body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

    /* 1. 全局CSS变量定义（统一管理颜色/动画参数，避免重复） */
    :root {
        --primary-color: #688a6b;       /* 主色调 - 深绿色 */
        --primary-light: #8ba88d;       /* 主色调浅色变体 */
        --primary-dark: #557258;        /* 主色调深色变体 */
        --secondary-color: #a0b9a2;     /* 辅助色 - 浅绿色 */
        --accent-color: #d4e6d5;        /* 强调色 - 淡绿色 */
        --light-bg: #f8f9fa;            /* 浅色背景 */
        --card-bg: #ffffff;             /* 卡片背景色 */
        --text-primary: #333333;        /* 主要文本色 */
        --text-secondary: #666666;      /* 次要文本色 */
        --sidebar-bg: #688a6b;          /* 侧边栏背景色 */
        --sidebar-hover: #557258;       /* 侧边栏悬停色 */
        --transition-speed: 0.3s;       /* 过渡动画速度 */
    }

    /* 2. 全局样式重置（统一浏览器默认样式） */
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }

    /* 3. 页面基础样式（全局布局/字体/滚动） */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        min-height: 100vh;
        color: var(--text-primary);
        background-color: var(--light-bg);
        padding-top: 60px; /* 为顶部导航栏预留空间 */
        scroll-behavior: smooth; /* 平滑滚动效果 */
    }

    .animation-bg {
        position: fixed;
        top: 0;
        left:0;
        width: 100vw; /* 占满屏幕宽度 */
        height: 100vh; /* 占满屏幕高度 */
        /* 背景图：URL加载（替换为你的背景图） */
        background-image: url("https://static.igem.wiki/teams/5883/main/ldbg.webp"); /* 示例：山水背景图 */
        background-size: 30%; /* 背景图铺满容器，不拉伸 */
        background-position: center; /* 背景图居中 */
        background-repeat: no-repeat;
        background-color: rgba(248,249,250,0.5); /* 背景加载前的占位色（与背景色调匹配） */
        z-index: 9988; /* 背景层级最低，确保元素在上方 */
      }
  
      /* 3. 运动元素通用样式：图片基础配置 */
      .moving-element {
        position: absolute; /* 绝对定位，脱离文档流，在背景上自由运动 */
        background-size: contain; /* 图片完整显示，不裁剪 */
        background-position: center;
        background-repeat: no-repeat;
        /* 图片加载失败降级：淡色背景+圆角，避免空白 */
        border-radius: 8px;
        z-index: 9999; /* 元素层级高于背景 */
      }
  
      /* 4. 元素1：环形绕转运动（核心加载元素） */
      .element-1 {
        position: fixed;
        width: 60px; /* 元素尺寸（根据图片比例调整） */
        height: 60px;
        /* 元素图片URL（替换为你的图片，建议透明背景PNG/SVG） */
        background-image: url("https://static.igem.wiki/teams/5883/main/1754815045731.webp"); /* 示例：小图标 */
        /* 绑定环形绕转动画：6秒一圈，匀速循环 */
        animation: circle-move 2s linear infinite;
      }
  
      /* 5. 元素2：随机浮动+旋转运动（辅助元素） */
      .element-2 {
        position:fixed;
        width: 80px; /* 尺寸小于元素1，避免喧宾夺主 */
        height: 80px;
        /* 元素图片URL（替换为你的图片） */
        background-image: url("https://static.igem.wiki/teams/5883/main/fbn00000.webp"); /* 示例：小装饰图标 */
        /* 绑定浮动+旋转动画：4秒一个周期，缓进缓出 */
        animation: float-rotate 2s ease-in-out infinite;
      }
  
      /* -------------------------- 关键帧动画定义（核心运动逻辑） -------------------------- */
      /**
       * 动画1：元素1的环形绕转动画
       * 原理：通过 transform 先平移（远离中心），再旋转，模拟环形轨迹
       */
      @keyframes circle-move {
        0% {
          /* 初始位置：背景中心左侧150px，旋转0度 */
          top: 50%;
          left: 50%;
          transform:scale(0.5) translate(-50%, -50%) translateX(-150px) translateY(-50px) rotate(0deg);
        }
        33% {
          /* 25%进度：背景中心上方150px，旋转90度 */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) translateX(100px) rotate(90deg);
        }
        66% {
          /* 50%进度：背景中心右侧150px，旋转180度 */
          top: 50%;
          left: 50%;
          transform:scale(0.7) translate(-50%, -50%) translateX(-105px) translateY(-20px) rotate(180deg);
        }
        100% {
          /* 75%进度：背景中心下方150px，旋转270度 */
          top: 50%;
          left: 50%;
          transform:scale(0.7) translate(-50%, -50%) translateX(-105px) translateY(-20px) rotate(270deg);
        }
  
  
      }
  
      /**
       * 动画2：元素2的随机浮动+旋转动画
       * 原理：通过 translate 控制上下左右浮动，rotate 控制旋转，模拟不规则运动
       */
      @keyframes float-rotate {
        0% {
          /* 初始位置：背景右侧30%，下方40%，旋转0度 */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) translateX(100px) rotate(0deg);
          opacity: 0.8; /* 初始半透明 */
        }
  
         33% {
          /* 25%进度：背景中心上方150px，旋转90度 */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) translateX(100px) rotate(15deg);
          opacity: 1; /* 完全不透明 */
        }
        66% {
          /* 60%进度：向下浮动30px，向右移动30px，旋转-10度 */
          top: 50%;
          left: 50%;
          transform:scale(0.5) translate(-50%, -50%) translateX(-155px) translateY(-40px) rotate(-10deg);
          opacity: 0.9;
        }
         100% {
          /* 60%进度：向下浮动30px，向右移动30px，旋转-10度 */
          top: 50%;
          left: 50%;
          transform:scale(0.5) translate(-50%, -50%) translateX(-155px) translateY(-50px) rotate(-10deg);
          opacity: 0;
        }
  
      }

    /* 锚点滚动偏移（避免被导航栏遮挡） */
    :target, .card, #article4 h3 {
        scroll-margin-top: 70px;
     }

     .custom-icon {
        /* 1. 尺寸：FA 图标默认约 1em（跟随文字大小），可按需调整 */
        width: 1em;  /* 或固定值，如 24px */
        height: 1em; 
        object-fit: contain;  /* 保证图片不变形，完整显示 */
        
        /* 2. 对齐：和文字垂直居中（FA 图标默认特性） */
        vertical-align: middle;
        margin: 0 4px;  /* 可选：和文字/其他元素保留间距 */
        
        
      }


    /* 4. 导航栏样式（顶部固定+下拉菜单） */
    .nav {
        height: 60px;
        background: var(--primary-color);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        transition: background-color var(--transition-speed);
    }

    .nav:hover {
        background: var(--primary-dark);
    }

        /* 清除所有超链接的下横线 */
    a {
        text-decoration: none;
    }
    /* 可选：鼠标悬浮时恢复下横线，提升交互性 */
    a:hover {
        text-decoration: underline;
    }
    

    .btli {
        float: right;
        width: 110px;
        line-height: 60px; /* 垂直居中 */
        text-align: center;
        position: relative; /* 下拉菜单定位父容器 */
    }

    .bt { /* 第一个菜单项宽度调整 */
        width: 190px;
    }

    .navlist a {
        color: #ffffff;
        display: block;
        transition: all var(--transition-speed);
        font-weight: 500;
        letter-spacing: 0.3px;
        white-space: nowrap; /* 防止文本换行 */
    }

    .navlist a i {
        margin-right: 6px;
        font-size: 0.9em;
        width: 16px; /* 固定图标宽度，确保对齐 */
        text-align: center;
        display: inline-block;
    }

    .navlist a:hover {
        color: var(--accent-color);
        background-color: rgba(255,255,255,0.1);
    }

    /* 下拉菜单样式 */
    .droplist {
        background: var(--primary-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        display: none; /* 默认隐藏 */
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        position: absolute;
        min-width: 100%;
        transform-origin: top;
        transform: scaleY(0.9);
        opacity: 0;
        transition: all 0.2s;
    }

    .btli:hover .droplist {
        display: block;
        transform: scaleY(1);
        opacity: 1;
    }

    .droplist li {
        border-top: 1px solid rgba(255,255,255,0.1);
        line-height: 45px;
        transition: background-color 0.2s;
        padding: 0 15px;
    }

    .droplist a {
        display: flex;
        align-items: center;
        gap: 8px; /* 图标与文字间距 */
        width: 100%;
        padding: 0;
    }

    .droplist li:hover {
        background-color: var(--sidebar-hover);
    }

    /* 5. 左侧边栏样式（固定+滚动美化+子导航） */
    .sidebar {
        width: 280px;
        background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--primary-dark) 100%);
        color: #fff;
        height: calc(100vh - 60px); /* 减去导航栏高度 */
        position: fixed;
        transition: all var(--transition-speed) ease;
        box-shadow: 2px 0 15px rgba(0,0,0,0.1);
        z-index: 2;
        padding-top: 60px;
        overflow-y: auto;
        border-right: 1px solid rgba(255,255,255,0.08);
    }

    /* 侧边栏滚动条美化 */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
    }
    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.5);
    }

    .sidebar-header {
        padding: 25px 20px;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        position: relative;
    }

    .sidebar-header h2 {
        font-size: 1.5rem;
        letter-spacing: 1px;
        position: relative;
        display: inline-block;
        padding-bottom: 10px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .sidebar-header h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background-color: var(--accent-color);
        border-radius: 1px;
        transform: scaleX(0.8);
        transition: transform var(--transition-speed) ease;
    }

    .sidebar:hover .sidebar-header h2::after {
        transform: scaleX(1);
    }



    .sidebarm {
        width: 220px;
        background: var(--sidebar-bg);
        color: #ecf0f1;
        height: 100vh;
        padding: 80px 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        z-index: 900;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
      }
  
      .sidebarm h2 {
        font-size: 1.2rem; 
        margin: 0 20px 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #fff3cd;
        font-weight: 600;
      }
  
      .sidebarm ul {
        padding: 0 10px; 
      }
  
      .sidebarm li {
        margin: 5px 0; 
        border-radius: 4px;
        transition: background-color var(--transition-speed);
      }
  
      .sidebarm a {
        color: #bdc3c7; 
        text-decoration: none; 
        font-size: 1rem;
        display: block;
        padding: 10px 20px;
        transition: all var(--transition-speed);
        font-weight: 400;
      }
  
      .sidebarm a:hover, .sidebarm li.active a {
        color: white;
        background-color: var(--sidebar-hover);
        padding-left: 25px;
      }
  
      .sidebarm a i {
        margin-right: 10px;
        width: 16px;
        text-align: center;
      }
  

    /* 文章导航项样式 */
    .article-navigation {
        margin: 0;
        padding: 10px 0;
    }

    .article-item {
        letter-spacing: 0.5px;
        font-size: 15px;
        padding: 16px 25px;
        transition: all var(--transition-speed);
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        position: relative;
        overflow: hidden;
    }

    .article-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background-color: var(--accent-color);
        transform: scaleY(0);
        transition: transform var(--transition-speed) ease;
    }

    .article-item:hover {
        background-color: rgba(255,255,255,0.1);
        padding-left: 30px;
    }

    .article-item:hover::before {
        transform: scaleY(1);
    }

    .article-item a {
        color: #fff;
        display: block;
        transition: all var(--transition-speed);
    }

    .article-item.active {
        background-color: rgba(255,255,255,0.15);
    }

    .article-item.active::before {
        transform: scaleY(1);
    }

    .article-title {
        font-weight: 500;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .article-title::first-letter {
        color: var(--accent-color);
        font-size: 1.2em;
    }

    .article-excerpt {
        font-size: 12px;
        opacity: 0.8;
        line-height: 1.4;
        transition: opacity var(--transition-speed);
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 最多显示2行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .article-item:hover .article-excerpt {
        opacity: 1;
    }

    /* 子导航栏样式（父项 hover/active 时显示） */
    .sub-article-navigation {
        margin-left: 20px;
        padding-left: 15px;
        border-left: 2px solid rgba(255,255,255,0.2);
        display: none; /* 默认隐藏 */
    }

    .sub-article-item {
        padding: 10px 0;
        font-size: 14px;
        transition: all 0.2s;
    }

    .sub-article-item:hover {
        padding-left: 5px;
    }

    .sub-article-title {
        color: rgba(255,255,255,0.9);
        font-weight: 400;
    }

    .sub-article-item:hover .sub-article-title {
        color: var(--accent-color);
    }

    .article-item.active .sub-article-navigation,
    .article-item:hover .sub-article-navigation {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    /* 子导航淡入动画 */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 6. 右侧内容区域样式（卡片/图片/文字） */
    .content {
        flex: 1;
        margin-left: 280px; /* 与侧边栏宽度一致 */
        padding: 30px;
        transition: all var(--transition-speed) ease;
    }

    .content-header {
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .content-header h1 {
        color: var(--primary-color);
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .content-header p {
        color: var(--text-secondary);
        font-size: 1rem;
    }

    /* 团队照片区域 */
    .team-photo-section {
        margin-bottom: 40px;
        text-align: center;
        scroll-margin-top: 100px; /* 滚动锚点偏移量 */
      }
  
      .team-photo-container {
        position: relative;
        display: inline-block;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        margin-bottom: 20px;
      }
  
      .team-photo {
        width: 100%;
        max-width: 1000px;
        height: auto;
        display: block;
      }
  
      .team-photo-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.7));
        padding: 40px 20px 20px;
        color: white;
      }
  
      .team-photo-overlay h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
      }
  
      .team-photo-overlay p {
        font-size: 1rem;
        opacity: 0.9;
      }
    
    
   
    
    
    /* 内容卡片容器 */
    .content-cards {
        display: flex;
        flex-direction: column;
        gap: 40px; /* 卡片间距 */
    }

    .card {
        background-color: var(--card-bg);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 25px;
        transition: transform var(--transition-speed) ease;
    }
 


    .card:hover {
        transform: translateY(-5px); /* hover 上浮效果 */
    }


   
  
     
       /* 卡片网格布局 - 每行两张卡片 */
    .cardm-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }
  
      /* 卡片样式 */
      .cardm {
        background: var(--card-bg);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
       
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(0,0,0,0.05);
        cursor: pointer;
      }
  
      .cardm:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.12);
      }
  
      .cardm-image-container {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        width: 100%;
        max-width: 201px;
        height: 268px;
        margin-bottom: 15px;
      }
  
      .cardm:hover .cardm-image-container {
        transform: scale(1.03);
      }
  
      .cardm img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
  
      .cardm-image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.6));
        padding: 20px 15px 10px;
        color: white;
        font-size: 0.85rem;
        opacity: 0;
        transition: opacity 0.3s;
        text-align: center;
      }
  
      .cardm:hover .cardm-image-overlay {
        opacity: 1;
      }
  
      .cardm-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
  

      .cardm-content h2 {
        margin: 0 0 10px 0;
        font-size: 1.3rem;
        color: var(--primary-color);
        font-weight: 600;
        text-align: center;
      }
  
      .cardm-content p {
        margin: 0;
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.6;
        text-align: left; /* 段落强制左对齐 */
        text-indent: 1em;
      }
  
      

  
      .title-box {
              /* 边框样式 */
              border: 2px solid #557258;  /* 边框颜色 */
              border-radius: 100px;       /* 圆角半径 */
  
              /* 内边距 */
              padding: 15px;
  
              /* 背景颜色 */
              background-color: #688a6b;
  
              /* 文本样式 */
              text-align: center;
              font-family: 'Arial', sans-serif;
              font-size: 24px;
              font-weight: bold;
              color: #f8f9fa;
  
              object-fit: cover;
  
              /* 阴影效果（可选） */
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
              /* 宽度设置 */
              width: 80%;
  
              margin: 20px auto;  /* 居中 */
              opacity: 0.6;
          }
  
  


    .card h2 {
        color: var(--primary-color);
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--primary-color);
    }

    .card p {
        line-height: 1.7;
        color: var(--text-secondary);
        margin-bottom: 20px;
        font-size: 20px; /* 统一正文字体大小 */
        font-weight: 400;
    }

    /* 背景图伪元素（仅作用于背景，不影响文字） */
    .bg-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            linear-gradient(to top, rgba(254,250,248,0.3), transparent 30%),
            linear-gradient(to bottom, rgba(254,250,248,0.3), transparent 30%),
            linear-gradient(to left, rgba(254,250,248,0.3), transparent 30%),
            linear-gradient(to right, rgba(254,250,248,0.3), transparent 30%),
            url("https://static.igem.wiki/teams/5883/main/.webp");
        background-size: cover;
        opacity: 0.3;
        z-index: -1;
    }

    /* 三种文字格式（标题/正文/强调） */
    .text-style1 { /* 标题样式 */
        font-size: 64px;
        font-weight: bold;
        color: #009345;
        margin-bottom: 30px;
        padding-left: 40px;
        padding-bottom: 10px;
    }

    .text-style2 { /* 正文样式 */
        font-size: 32px;
        font-weight: bold;
        color: #009345;
        line-height: 1.8;
        margin-bottom: 25px;
        padding-left: 40px;
        padding-bottom: 10px;
    }

    .text-style3 { /* 强调样式（引用/备注） */
        font-size: 24px;
        font-weight: bold;
        color: #2b3541;
        padding: 15px;
        text-indent: 2em; /* 中文首行缩进2字符 */
        line-height: 1.8;
        padding-bottom: 50px;
    }

    /* 7. 图片/视频相关样式（基础/网格/滚动动画/轮播） */
    /* 基础图片容器 */
    .image-container {
        width: 90%;
        border-radius: 6px;
        overflow: hidden;
        margin: 0 auto 15px;
        position: relative;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .card-image {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
        object-fit: cover;
    }

    .card:hover .card-image {
        transform: scale(1.02); /* 图片 hover 放大 */
    }

    /* 竖版图片样式 */
    .image-vertical {
        height: 500px;
        max-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-vertical .card-image {
        height: auto;
        width: 33%;
        max-width: 100%;
    }

    /* 图片网格布局 */
    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
        padding: 0 5%;
    }

    .image-grid .image-container {
        width: 100%;
        margin: 0;
        aspect-ratio: 4/3; /* 固定宽高比 */
    }

    .image-grid .card-image {
        height: 100%;
        object-fit: cover;
    }

    /* 滚动触发图片动画（左移/右移入场） */
    .img-container {
        margin: 0 auto 50px; /* 图片容器间距，确保逐张触发 */
        overflow: hidden;
    }

    /* 左移入场图片 */
    .scroll-img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateX(-50px); /* 初始左移隐藏 */
        transition: opacity 0.8s ease, transform 1.8s ease;
    }

    /* 右移入场图片 */
    .scroll-img0 {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateX(50px); /* 初始右移隐藏 */
        transition: opacity 0.8s ease, transform 1.8s ease;
    }

    /* 滚动触发后显示 */
    .scroll-img.active, .scroll-img0.active {
        opacity: 1;
        transform: translateX(0);
    }

    /* 第3、4篇文章图片尺寸调整 */
    .image-container {
        max-width: 80%;
    }

    .image-grid .image-container {
        max-width: 100%; /* 网格图片保持满宽 */
    }

    /* 确保图片居中显示 */
    .image-container img {
        display: block;
        margin: 0 auto;
    }


    table {
        width: 95%; /* 表格总宽度，可设固定值如 800px */
        margin: 0 auto;/* 水平居中，垂直方向可加 margin-top/bottom 调整位置 */
        border-collapse: collapse; /* 合并边框，可选 */
    }

    th {
        font-size: 18px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
        border: 1px solid #688a6b;
    }

    .fttb{ table-layout: fixed; /* 关键：固定布局，让列宽平均分配 */
    }

      
    .fttd {
        width: 100%; /* 所有列设置相同宽度，配合 fixed 实现平均 */
    }

    .pttd {
        border: 1px solid #688a6b;
        padding: 10px;
    }


      
     /* 视频容器（居中显示） */
    .svideo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #f0f0f0;
    }

    .svideo-container video {
        max-width: 80%;
        max-height: 80%;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }


    /*lunbo start

/* 轮播图容器 */
.carousel {
    position: relative;
    width: 90%;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}



#carousel2 .carousel-slide img {
    width: 50%;
    height: auto;
    margin: 0 auto;
}

        /* 轮播图幻灯片容器 */
.carousel-slides {
    display: flex;
    transition: transform 0.5s ease;
    height: auto; /* 移除固定高度 */
}

/* 单张幻灯片 */
.carousel-slide {
    flex: 0 0 100%; /* 初始设置为100%，JS会动态调整 */
    position: relative;
}

/* 图片样式 - 保持原比例 */
.carousel-slide img {
    width: 100%;
    height: auto; /* 保持图片原始比例 */
    display: block;
    object-fit: contain; /* 改为contain以保持原比例 */
}

/* 控制按钮样式保持不变 */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.3);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 10;
}

.carousel-control:hover {
    background-color: rgba(0,0,0,0.5);
}

.carousel-control.prev {
    left: 15px;
}

.carousel-control.next {
    right: 15px;
}

/* 指示器样式保持不变 */
.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-indicator.active {
    background-color: white;
}

    /*lunbo end*/

    .pdf-embed {
            width: 100%;
            height: 80vh;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
    .download-btn {
            padding: 12px 24px;
            background-color: #688a6b;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            margin-top: 20px;
        }
        


    /* 8. 响应式设计（适配移动端/平板） */
    @media (max-width: 992px) { /* 平板/小屏幕电脑 */
        .sidebar {
            width: 80px; /* 侧边栏收缩 */
        }

        /* 隐藏侧边栏文字内容，仅保留图标 */
        .sidebar-header h2,
        .article-item .article-excerpt,
        .article-title span:not(.article-number),
        .sub-article-title {
            display: none;
        }

        .article-item {
            text-align: center;
            padding: 16px 0;
        }

        .article-item:hover {
            padding-left: 0;
        }

        .content {
            margin-left: 80px; /* 与收缩后侧边栏对齐 */
        }

        /* 导航栏文字隐藏，仅保留图标 */
        .btli span {
            display: none;
        }

        .btli {
            width: 60px;
        }

        .bt {
            width: 60px;
        }

        .navlist a i {
            margin-right: 0;
            font-size: 1.1em;
        }

        /* 图片/轮播尺寸调整 */
        .card-image,
        .carousel-slide img {
            max-height: 300px;
        }

        .image-vertical {
            height: 350px;
        }
    }

    @media (max-width: 576px) { /* 移动端 */
        .content {
            padding: 20px 15px; /* 减少内边距 */
        }

        .content-header h1 {
            font-size: 1.6rem; /* 缩小标题 */
        }

        .card {
            padding: 15px; /* 卡片内边距减少 */
        }

        /* 图片/轮播尺寸进一步缩小 */
        .card-image,
        .carousel-slide img {
            max-height: 150px;
        }

        .image-vertical {
            height: 250px;
        }

        .image-grid {
            grid-template-columns: 1fr; /* 网格变为单列 */
        }
    }
/* footer */
footer a { color: black; font-weight: bold; text-decoration: none; }
footer a:hover { color: black; text-decoration: underline; }