.dwz {
        display: flex;
        justify-content: center;    
        font-size: 3vw;
        font-weight: bold;
        height: 900px;
        white-space: nowrap;
        margin-top: 80px;
        padding-bottom: 400px;
        color: #c26c6c;
        position: relative;
        background-color: #fff;
        margin: 0;
        text-align: center; 
        flex-direction: column;
        align-items: center;
      }
 .ab {
        width: 100%;
        max-width: 100vw;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: -1;
      }
      .ab svg {
        width: 100%;
        height: auto;
        display: block;
      }
      section {
        position: relative;
        width: 100%;
        height: auto; /* 不要固定 100vh，高度由内容决定 */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      section img {
        width: 100%;
        height: auto; /* 按比例缩放 */
        object-fit: contain;
        display: block;
      }

      .kuang1 {
        background: url(https://static.igem.wiki/teams/5828/home/gddd.webp)
          no-repeat center;
        background-size: contain;
        background-size: 100% auto; /* 横向100%，纵向自适应 */
        position: relative;
        background-color: #fff;

        padding-top: 255%;
        box-sizing: border-box;
      }

      .kuangnei p {
        width: 50vw;
        text-align: justify;
        font-size: 1.2rem;
        letter-spacing: 0.06em;
        font-weight: bold;
        color: #515151;
        background: rgba(255, 255, 255, 0.5); /* 半透明背景，便于查看 */
      }
    
      
      .tp1,
      .tp4,
      .tp5,
      .tp6,
      .tp7     
      {
        opacity: 0; /* 初始隐藏 */
        transform: translateY(50px); /* 向下偏移 */
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
      }

      .tp1.visible,
      .tp4.visible,
      .tp5.visible,
      .tp6.visible,
      .tp7.visible
      {
        opacity: 1;
        transform: translateY(0); /* 浮现动画 */
      }
      .tp1 {
        width: 47vw;
        position: absolute;
        top: 4%;
        left: 50%;
        z-index: 3;
      }
      .tp2 {
        width: 50vw;
        height: 50vw;
        border: none;
        background: transparent;
        transform: rotate(25deg) scaleY(0.73) skewX(-18deg); /* 顺时针30°，横向缩小到80% */
        transform-origin: center center;
        position: absolute;
        top: 5%; /* 距离父容器顶部10% */
        left: -3%; /* 距离父容器左边30% */
        z-index: 3;
      }
      .tp3 {
        width: 50vw; /* 可以覆盖 iframe */
        position: absolute;
        top: 6%; /* 距离父容器顶部10% */
        left: -3%; /* 距离父容器左边30% */
        z-index: 3;
        float: left;
      }
      .tp4 {
        width: 43vw;
        position: absolute;
        top: 24%; /* 距离父容器顶部10% */
        left: 9%; /* 距离父容器左边30% */
        z-index: 3;
      }
      .tp5 {
        width: 50vw;
        position: absolute;
        top: 40%; /* 距离父容器顶部10% */
        left: 45%; /* 距离父容器左边30% */
        z-index: 3;
      }
      .tp6{
        width: 40vw;
        position: absolute;
        top: 66%;
        left: 13%;
        z-index: 3;
      }
      .tp7{
        width: 72.2vw;
        position: absolute;
        top: 71.5%;
        left: 26%;
        z-index: 4;
      }
      .tp8{
        width: 55vw;
        position: absolute;
        top: 67%;
        left: 0%;
        z-index: 4;
      }
      .wz1 {
        width: 33vw;
        position: absolute;
        top: 0%;
        left: 29%;
        color: #804040;
        font-size: 1.4vw;
        text-align: justify;
        font-weight: bolder;
        background-color: #f6e9e9;
        border-radius: 8px;
        padding-right: 1vw;
        padding-left: 1vw;
        z-index: 2;
      
        opacity: 0; /* 初始隐藏 */
        transform: rotate(30deg) skewX(-25deg) translateY(50px); /* 向下偏移 */
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
      }
       .wz1.visible {
    opacity: 1;
    transform: rotate(30deg) skewX(-25deg) translateY(0);
}
      .wz3 {
        width: 50vw;
        position: absolute;
        top: 6.5%;
        left: 16%;
        z-index: 3;
        line-height: 0.91;
        font-size: 2vw;
        color: #804040;
        font-weight: bolder;
        opacity: 0;
        transform: rotate(30deg) skewX(-25deg) translateY(50px);
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
      }
      .wz3.visible {
    opacity: 1;
    transform: rotate(30deg) skewX(-25deg) translateY(0);
}
      .wz4 {
        width: 50vw;
        position: absolute;       
        top: 34.5%;
        left: 20%;    
        z-index: 3;
        font-size: 5vw;
        color: #c26c6c;
        font-weight: bold;
        opacity: 0;
         transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        transform: rotate(-34deg) skewX(25deg) translateY(0px);        
      }
      .wz4.visible {
    opacity: 1;
   transform: rotate(-35deg) skewX(25deg) translateY(50px);
}
      .wz5 {
        width: 30vw;
        position: absolute;
        top: 29.3%;
        left: 51%;    
        z-index: 3;
        font-size: 2vw;
        color: #804040;
        font-weight: bolder;
        opacity: 0;
         transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        transform: rotate(-35deg) skewX(25deg) translateY(0px); 
      }
       .wz5.visible {
    opacity: 1;
   transform: rotate(-35deg) skewX(25deg) translateY(50px);
}
 .wz6 {
        width: 24vw;
        position: absolute;
        line-height: 1.3;
        top: 31.5%;
        left: 63%;    
        z-index: 3;
        padding: 1vw;
        font-size: 1.5vw;
        background-color: #f6e9e9;
        border-radius: 8px;
        color: #804040;
        font-weight: bold;
        opacity: 0;
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        transform: rotate(-35deg) skewX(25deg) translateY(0px); 
      }
       .wz6.visible {
    opacity: 1;
   transform: rotate(-35deg) skewX(25deg) translateY(50px);
}
 .wz9 {
        width: 45vw;
        position: absolute;
        line-height: 1.3;
        top: 79%;
        left: 43%;    
        z-index: 3;
        padding: 1vw;
        font-size: 2.5vw;      
        color: #804040;
        font-weight: bolder;
        transform: rotate(-32deg) skewX(25deg) ; 
      }

      .wz2 {
        width: 50vw;
        height: 50vw;
        border: none;
        background: transparent;
        transform: rotate(30deg) scaleY(0.73) skewX(-18deg); /* 顺时针30°，横向缩小到80% */
        transform-origin: center center;
        position: absolute;
        top: 11%; 
        left: 36%; 
        z-index: 3;
      }
    
   
      .line-svg {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1;
      }
      .k1 {
  position: absolute; /* 关键点 */
  width: 7vw;         /* 保持和 k1 一致 */
  top: 69.4%;
  left: 10%;
   transform-origin: left bottom;
   z-index: 10;
}
.jj1{
  position: absolute; /* 关键点 */
  width: 4vw;         /* 保持和 k1 一致 */
  top: 69.6%;
  left: 11.5%;
  z-index: 11;
}

.dhk1 p{
   position: absolute; /* 关键点 */
  width: 14.4vw;         /* 保持和 k1 一致 */
  top: 67%;
  left: 13.8%;
  opacity: 0;
  text-align: justify;   /* 两端对齐 */
  font-weight: bold;
  font-size: 1.1vw;
  color: #804040;
  z-index: 12;     /* 加粗 */
}
/* 鼠标移到容器 .dhk1 上时 */
.dhk1:hover .jj1 {
  opacity: 0;              /* jj1 消失 */
  transition: opacity .3s; /* 平滑过渡 */
}

.dhk1:hover .k1 {
  transform: scale(3.2);   /* k1 放大 */
  transition: transform .3s;
}

.dhk1:hover p {
  opacity: 1;              /* 文字显示 */
  transition: opacity .3s;
}

.k2 {
  position: absolute; /* 关键点 */
  width: 7vw;         /* 保持和 k1 一致 */
  top: 79.5%;
  left: 7%;
   transform-origin: left top;
   z-index: 10;
}
.jj2{
  position: absolute; /* 关键点 */
  width: 4vw;         /* 保持和 k1 一致 */
  top: 79.8%;
  left: 8.5%;
  z-index: 11;
}

.dhk2 p{
   position: absolute; /* 关键点 */
  width: 13vw;         /* 保持和 k1 一致 */
  top: 81.65%;
  left: 10%;
  opacity: 0;
  text-align: justify;   /* 两端对齐 */
  font-weight: bold;
  font-size: 1.1vw;
  color: #804040;
  z-index: 12;     /* 加粗 */
}
/* 鼠标移到容器 .dhk1 上时 */
.dhk2:hover .jj2 {
  opacity: 0;              /* jj1 消失 */
  transition: opacity .3s; /* 平滑过渡 */
}

.dhk2:hover .k2 {
  transform: scale(2.8);   /* k1 放大 */
  transition: transform .3s;
}

.dhk2:hover p {
  opacity: 1;              /* 文字显示 */
  transition: opacity .3s;
}

.k3 {
  position: absolute; /* 关键点 */
  width: 9.5vw;         /* 保持和 k1 一致 */
  top: 69.5%;
  left: 32%;
   transform-origin: left bottom;
   z-index: 10;
}
.jj3{
  position: absolute; /* 关键点 */
  width: 4vw;         /* 保持和 k1 一致 */
  top: 69.76%;
  left: 35%;
  z-index: 11;
}

.dhk3 p{
   position: absolute; /* 关键点 */
  width: 11vw;         /* 保持和 k1 一致 */
  top: 68%;
  left: 39.5%;
  opacity: 0;
  text-align: justify;   /* 两端对齐 */
  font-weight: bold;
  font-size: 1.1vw;
  color: #804040;
  z-index: 12;     /* 加粗 */
}
/* 鼠标移到容器 .dhk1 上时 */
.dhk3:hover .jj3 {
  opacity: 0;              /* jj1 消失 */
  transition: opacity .3s; /* 平滑过渡 */
}

.dhk3:hover .k3 {
  transform: scale(2.5);   /* k1 放大 */
  transition: transform .3s;
}

.dhk3:hover p {
  opacity: 1;              /* 文字显示 */
  transition: opacity .3s;
}

.k4 {
  position: absolute; /* 关键点 */
  width: 10vw;         /* 保持和 k1 一致 */
  top: 66.2%;
  left: 51%;
   transform-origin: left bottom;
   z-index: 10;
}
.jj4{
  position: absolute; /* 关键点 */
  width: 4vw;         /* 保持和 k1 一致 */
  top: 66.6%;
  left: 53.5%;
  z-index: 11;
}

.dhk4 p{
   position: absolute; /* 关键点 */
  width: 13vw;         /* 保持和 k1 一致 */
  top: 63.45%;
  left: 57%;
  opacity: 0;
  text-align: justify;   /* 两端对齐 */
  font-weight: bold;
  font-size: 1.1vw;
  color: #804040;
  z-index: 12;     /* 加粗 */
}
/* 鼠标移到容器 .dhk1 上时 */
.dhk4:hover .jj4 {
  opacity: 0;              /* jj1 消失 */
  transition: opacity .3s; /* 平滑过渡 */
}

.dhk4:hover .k4 {
  transform: scale(2.8);   /* k1 放大 */
  transition: transform .3s;
}

.dhk4:hover p {
  opacity: 1;              /* 文字显示 */
  transition: opacity .3s;
}


.dhk4:hover p {
  opacity: 1;              /* 文字显示 */
  transition: opacity .3s;
}
.project-section {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 150px;
    padding-bottom: 30px;
    text-align: center;
    font-family: system-ui, sans-serif;
  }

   .title p {
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: #cdc6c6;  /* Silver color */
    transform: scaleY(0.9);
    margin-bottom: 100px;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.4),  /* Shadow for depth */
        -1px -1px 2px rgba(255, 255, 255, 0.6),  /* Light highlight for 3D look */
        2px 2px 5px rgba(0, 0, 0, 0.3);  /* Additional depth */
}

  .gallery {
    display: flex;
    justify-items: center; /* 水平居中对齐 */
  }

  .gallery a {
    position: relative;
    overflow: hidden;      /* 裁剪超出部分 */
    width: 80%;           /* 占满父列 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -50px;
  }

  .gallery img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    display: block;
    transform: scale(0.68); 
  }

  .gallery a:hover img {
    transform: scale(0.6); /* 悬浮放大 */
  }
  .wenzt {
      list-style: none;
    }
    .wenzt .imagebox2 {
      width: 45vw;
      box-sizing: border-box;
      padding: 0 10px;
    }
    .wenzt .imagebox2 figure {
      position: relative;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .wenzt .imagebox2 figure::before,
    .wenzt .imagebox2 figure:after {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      background: #b6cbc0;
      transition: 0.5s;
    }
    .wenzt .imagebox2 figure::before {
      left: -50%;
    }
    .wenzt .imagebox2:hover figure::before {
      left: 0;
    }
    .wenzt .imagebox2 figure::after {
      right: -50%;
    }
    .wenzt .imagebox2:hover figure::after {
      right: 0;
    }
    .wenzt .imagebox2 figure img {
      width: 100%;
      height: 100%;
    }
    .wenzt .imagebox2 figure figcaption {
      position: absolute;
      top: 20px;
      left: 20px;
      bottom: 20px;
      right: 20px;
      background: #fff;
      text-align: center;
      padding: 20px;
      opacity: 0;
      transition: 0.5s;
      transform: translateY(20px);
      transition-delay: 0.5s;
      z-index: 1;
    }
    .wenzt .imagebox2:hover figure figcaption {
      opacity: 1;
      transform: translateY(0);
    }
    .wenzt .imagebox2 figure figcaption h1 {
      margin: 0;
      padding: 0;
      font-size: 1.9vw;
      font-family: 'xiaobiaoti';
      color: #804040;
    }
    .wenzt .imagebox2 figure figcaption p {
      margin: 10px 0 0;
      padding: 0;
      font-size: 1.34vw;
      text-align: justify;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
      line-height: 1.9vw;
      color: #804040;
    }
   .xintu {
  width: 100%;
  display: block;
  position: relative; /* 作为卡片定位参照 */
}

/* choula 居中，使用绝对定位覆盖在 xintu 上 */
.choula {
  position: absolute;
  top: 49%;           /* 垂直居中图片中间 */
  left: 50%;          /* 水平居中 */
  transform: translate(-50%, -60%);
  display: flex;
  justify-content: center;
  gap: 0.5vw;          /* 两排之间的横向间距 */
  width: 100%;        /* 可选，保证覆盖整个图片宽度 */
  pointer-events: none; /* 不挡住鼠标事件，如果需要hover可以去掉 */
}

.choula ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0.5vw;  /* li之间的间距 */
  pointer-events: auto; /* 让li可以响应hover */
}