/* 基本字体设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 设置苹果字体 */
    margin: 0px;
  }
  
  /* Header 样式 */
  header.top {
    display: flex;
    margin: 0px;
    height: 200px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* 防止换行 */
  }
  
  header.top img {
    margin: 0px 10px 0px 10px;
  }
  
  header.top div {
    display: flex;
    flex-direction: column; /* 让 h1 和 h2 垂直排列 */
    text-align: left; /* 让文本左对齐 */
  }
  
  #language {
    display: flex;
    flex-direction: row;
    text-align: left; /* 让文本左对齐 */
    margin: 90px 20px 90px 40px;
  }
  
  #language img {
    width: auto;
    height: 30px;
  }
  
  header.top h1 {
    font-family: Microsoft YaHei;
    font-size: 600%;
    color: #104b28;
    padding: 15px 0px 0px 0px;
    margin: 0px;
    max-width: 100%;
    white-space: nowrap; /* 防止换行 */
  }
  
  header.top h2 {
    font-family: Microsoft YaHei;
    font-size: 200%;
    color: #104b28;
    padding: 0px;
    margin: 0px 0px 0px 10px;
  }
  
  /* 响应式调整：小屏幕时修改字体大小 */
  @media screen and (max-width: 768px) {
    #LaboratoryLogo {
      height: 40px;
      width: auto;
      max-width: 100%; /* 限制图片的最大宽度 */
    }
    
    header.top {
      height: auto; /* 高度自适应 */
      padding: 10px; /* 添加内边距 */
    }
  
    header.top h1 {
      font-size: 120%; /* 调整标题字体 */
    }
  
    header.top h2 {
      font-size: 100%; /* 调整副标题字体 */
    }
  
    header.top div {
      text-align: center; /* 小屏幕时文本居中 */
    }
  
    #language {
      margin: 20px 10px; /* 调整语言选择的间距 */
      font-size: 80%;
    }
  
    #language img {
      height: 25px; /* 调整图标的高度 */
    }
  }
  
  /* 导航栏样式 */
  nav {
    height: 45px;
    background-color: #f5f5f7;
    text-align: center;
  }
  
  nav ul {
    font-size: 160%;
    list-style-type: none;
    padding: 5px 0px 0px 0px;
    margin: auto;
  }
  
  nav ul li {
    display: inline;
    padding: 5px 20px 5px 20px;
  }
  
  nav ul li a:link {
    color: black;
    border-bottom: none;
    font-weight: bold;
  }
  
  nav ul li a {
    text-decoration: none;
  }
  
  nav ul li a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
  }
  
  nav ul li.selected {
    background-color: #ddddde;
  }
  
  @media screen and (max-width: 768px) {
    nav {
      height: 40px;
    }
  
    nav ul {
      font-size: 120%; /* 缩小字体 */
    }
  
    nav ul li {
      padding: 5px 10px; /* 缩小间距 */
    }
  }
  
  /* 内容区域布局 */
  div#tableContainer {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
  }
  
  div#tableRow {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
  }
  
  section#section_groupPhoto,
  section#text,
  #news {
    border-style: groove;
    border-width: thin;
    border-color: #ddddde;
    border-radius: 15px;
    padding: 20px;
    text-align: left;
  }
  
  section#section_groupPhoto {
    flex: 1;
    max-width: 33%; /* 默认占三分之一宽度 */
    text-align: center; /* 让内容居中 */
  }
  
  section#text {
    flex: 2;
    max-width: 50%; /* 默认占一半宽度 */
  }
  
  #news {
    flex: 1;
    max-width: 33%; /* 默认占三分之一宽度 */
  }
  
  .thumbnail, .article_thumbnail {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 15px; /* 设置圆角 */
    transition: transform 0.3s ease;
  }
  
  .thumbnail:hover, .article_thumbnail:hover {
    transform: scale(1.05); /* 放大效果 */
  }
  
  @media screen and (max-width: 768px) {
    section#section_groupPhoto,
    section#text,
    #news {
      max-width: 100%; /* 在小屏幕时占满全宽 */
      margin: 10px 0; /* 增加间距 */
    }
  
    section#section_groupPhoto {
      padding: 10px; /* 调整内边距 */
    }
  
    section#text {
      padding: 10px;
    }
  
    #news {
      padding: 10px;
    }
  
    .thumbnail, .article_thumbnail {
      max-width: 100%; /* 确保图片大小适应 */
    }
  }
  
  /* 文字样式 */
  section#text h1 {
    font-size: 150%;
  }
  
  section#text p {
    line-height: 1.6; /* 设置段落行间距 */
  }
  
  @media screen and (max-width: 768px) {
    section#text h1 {
      font-size: 120%; /* 调整标题大小 */
    }
  
    section#text p {
      font-size: 90%; /* 调整段落字体 */
    }
  }
  
  /* 新闻区域样式 */
  #news header a {
    font-size: 120%; /* 调整链接字体 */
    color: black; /* 设置颜色 */
    text-decoration: none; /* 去掉下划线 */
    font-weight: bold; /* 加粗 */
    transition: transform 0.3s ease;
    display: inline-block;
  }
  
  #news header a:hover {
    transform: scale(1.1); /* 放大效果 */
  }
  
  #news article {
    margin: 30px 10px;
  }
  
  @media screen and (max-width: 768px) {
    #news header a {
      font-size: 110%; /* 缩小字体 */
    }
  }
  
  /* 页脚样式 */
  footer {
    background-color: #675c47;
    color: #efe5d0;
    text-align: center;
    padding: 15px;
    margin: 0px 10px 10px 10px;
    font-size: 90%;
  }
  
  @media screen and (max-width: 768px) {
    footer {
      padding: 10px; /* 减小内边距 */
      font-size: 80%; /* 缩小字体 */
    }
  }