/* 整体容器 */
#page {
  padding: 1rem;
  box-sizing: border-box;}

#page .content {
  display: flex;
  gap: 2rem;
  width: 70%;
  /* max-width: 1300px; */
  margin: 0 auto;
  background-color: #fff;
  padding: 1rem;}

/* 左侧菜单 */
#page .content .left {
  flex: 0 0 18%;
  flex-direction: column;
  gap: 1rem;}

.left .title {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  padding: 0.8rem 1rem;
  font-weight: bold;
  background-color: #ccc;
  color: #fff;}

#page .left ul {
  display: flex;
  flex-direction: column;
  width: 100%;}

.left ul li {
  width: 100%;
  border-bottom: 1px solid rgb(252, 199, 199);}

.left ul li a {
  display: block;
  padding: 0.6rem 1rem;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  color: #333;
  text-decoration: none;
  font-weight: 500;}

.left ul li:hover {
  background: #f5f5f5;}

/* 右侧正文 */
#page .right {
  flex:  0 0 80%;
  display: flex;
  flex-direction: column;
  line-height: 2.6;
  padding: 0 2rem;
  font-size: clamp(1rem, 1.3vw, 3.2rem);}

#page .right h1 {
  font-size: clamp(1.5rem, 2.5vw, 10rem);}

/* 移动端布局 */
@media screen and (max-width: 768px) {
  #page .content {
    width: 100%;
    flex-direction: column;}

  #page .content .left {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    gap: 0;}

  .left .title {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 4vw, 1.4rem);
    background-color: #ccc;}

  #page .left ul {
    width: 60%;
    display: flex;
    flex-direction: column;}

  #page .left ul li {
    width: 100%;}

  #page .left ul li a {
    display: block;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    padding: 0.4rem;
    color: #333;
    text-align: center;}

  /* 右侧正文 */
  #page .content .right {
    width: 100%;
    padding: 0 0.5rem;}

  #page .right h1 {
    font-size: clamp(1.5rem, 2.5vw, 10rem);}
}