html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    background-color: rgb(48, 77, 107);
}
/* 字体 */
@font-face {
    font-family: 'chalk';
    src: url(AutteraDemo-zrd00.otf)format("opentype");
}
@font-face {
    font-family: "LOFT";
    src: url(Inferno-Closed-Light-iF66713a0f1d333.otf);
}
@font-face {
    font-family: "Head";
    src: url('quicksand.woff2') format('woff2');;
}

section {
    font-family: "Head";
}

/* section1 */
.bg-hero {
    height: 100vh;
    /* 背景色 */
    background-image: url(https://static.igem.wiki/teams/5487/index-bg1.jpg);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; 调整间距 */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    width: 100%;

}

#intro-ani {
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    z-index: 5;
    opacity: 0;
    animation: 2s intro-ani-move 1s forwards;
    animation-delay: 4s;
}

/* 1 */

.logo-text {
    height: 100vh;
    position: absolute;
    width: 50%;
    top: 0;
    left: 0%;
    justify-content: center;
    z-index: -1;
}

#path-1 {
    fill: none;
    stroke: rgb(56, 180, 238);
    stroke-width: 4px;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: path 3s ease forwards;
    animation-delay: 2s;
    position: absolute;
    transform: translateY(2%);
}

#path-2 {
    position: absolute;
    transform: translateY(2.5%);
    opacity: 0;
    animation: show 3s ease forwards;
    animation-delay: 2s;
}

@keyframes path {
    0% {
        stroke-dashoffset: 1500;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 100%;
    }
    /* to
    {
        fill: linear-gradient(90deg, #3E8BFF 0%, #FFF5F5 100%);
    } */
}

@keyframes logoX-clip {

    0% {
        clip-path: circle(0%);
    }
    50% {
        clip-path: circle(25%);
        opacity: 50%;
    }
    100% {
        clip-path: circle(75%);
        opacity: 100%;
    }

}

@keyframes intro-ani-move {
    0% {
        transform: translate(30%, -52%);
    }
    100% {
        transform: translate(20%, -52%);
        opacity: 100%;
    }
}

/* 2 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#logo {
    position: absolute;
    top: 50%;
    animation: fill-text 0.5s ease-in forwards 1s;
    animation-delay: 4s;
    transform: translate(-65%, -45%);
    z-index: 3;
}

#logo2 {
    position: absolute;
    top: 50%;
    transform: translate(-62%, -44%);
    opacity: 0%;
    animation: show 0.5s ease-in forwards 2s;
    animation-delay: 2s;
    z-index: 2;
}

#logo3 {
    position: absolute;
    top: 50%;
    transform: translate(-10%, -49%);
    z-index: 4;
    animation: 1 logoX-clip 2s forwards;
    animation-delay: 4s;
    opacity: 0;
}

#logo4 {
    position: absolute;
    top: 50%;
    transform: translate(-9%, -48%);
    z-index: 3;
    animation: 1s logoX-clip 2s forwards;
    animation-delay: 2s;
    opacity: 0;
}

#logo path:nth-child(1) {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: line-anim 2s forwards 1s;
    animation-delay: 2s;
}

#logo path:nth-child(2) {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: line-anim 2s forwards 0.8;
    animation-delay: 2s;
}

#logo path:nth-child(3) {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: line-anim 2s forwards 0.6s;
    animation-delay: 2s;
}

#logo path:nth-child(4) {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: line-anim 2s forwards 0.3s;
    animation-delay: 2s;
}

#logo path:nth-child(5) {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: line-anim 2s forwards;
    animation-delay: 2s;
}

@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-text {
    to {
        fill: white;

    }
}

@keyframes show {
    to {

        opacity: 100%;

    }
}

@keyframes fill-lin {
    to {
        fill: linear-gradient(90deg, #3E8BFF 0%, #FFF5F5 100%);
    }
}

.section1 {
    height: 100vh;
    width: 100%;
    background-attachment: fixed;
}

/* section2 */
.section2 {
    height: 100vh;
    width: 100%;
    z-index: 2;
    font-family: 'chalk';
    position: relative;

}

.s2-img1 {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    z-index: 2;
}

.s2-img2, .s2-img3 {
    height: 60vh;
    width: 60vh;
    position: relative;
    z-index: 4;
    opacity: 0; /* 修改为可见 */
    margin: 12vh 10vh 10vh;
}

.s2-img3 {
    transform: translate(10%, 25%);
    -webkit-transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.s2-img3:hover, .s2-img3:focus, .s2-img3:active {
    -webkit-transform: translateY(26%);
    transform: translateY(26%);
}

.s2-div1, .s2-div2 {
    display: flex; /* 应用Flexbox布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    margin: 10px;
    /* font-family: 'chalk'; */
}

.s2-img4 {
    z-index: 4;
}

.s2-img5 {
    z-index: 4;
    /* height: 10vh;
    width: 20vh; */
}

.s2-img6 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,20%);
    z-index: 4;
    width: 70%;
}

.s2-p1 span, .s2-p2 span, .s2-p3 span {
    display: block; /* 将默认状态改为block，但透明度为0 */
    position: absolute; /* 使用绝对定位 */
    z-index: 5; /* 确保文本在最上层 */
    color: rgb(0, 245, 245); /* 文本颜色为紫色 */
    padding: 5px; /* 添加一些内边距 */
    margin-top: 60px; /* 初始距离顶部较大距离 */
    font-size: 60px; /* 字体大小 */
    white-space: nowrap; /* 防止文本折行 */
    opacity: 0; /* 开始时透明 */
    transition: opacity 0.5s, margin-top 0.5s; /* 设置透明度和顶部边距的过渡效果 */
}

.s2-p1:hover span, .s2-p2:hover span, .s2-p3:hover span {
    opacity: 1; /* 鼠标悬停时文本完全不透明 */
    margin-top: 20px; /* 鼠标悬停时将距离顶部的距离减少，实现从下向上移动的效果 */
}

/* 设置所有p标签的鼠标指针为正常指针 */
.section2 p {
    cursor: default; /* 鼠标悬停时使用默认指针 */
 
}

/* 为.s2-p1, .s2-p2, .s2-p3中的span添加蓝色边框 */
.s2-p1, .s2-p2, .s2-p3 {
    color: #0dcaf0;
}


.s2-p1, .s2-p2, .s2-p3, .s2-p4, .s2-p5, .s2-p6 {
    margin-left: 5px;
}

/* section3 */
.section3 {
    width: 100%; /* 宽度为100%，占满整个屏幕 */
    position: relative;
    background-image: url('https://static.igem.wiki/teams/5487/new-bg3.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}
.section3 .s3-img
{
      height: 40vh;
      width: 80vh;
      position: absolute;
      bottom: 30%;
      right: 5%;
      z-index: 4; 
      opacity: 0;
}
.section3 .s3-text
{
    width: 50%;
    position: absolute;
    z-index: 8;
    font-size: 3rem;
    color: rgb(73, 126, 181);
    bottom: 12%;
    left: 0;
    opacity: 0;
}
.s3-text-intro {
    padding-top: 180px;
    text-align: center;
    font-size: 4rem;
    color: rgb(73, 126, 181);
    font-weight: 700;
}
.s3-text-2 {
    position: relative;
    text-align: center;
    top: 25%;
    left: 50%;
    z-index: 1;
    font-size: 3em;
    color: black;
    transform: translateX(-50%);
}
/* section4 */
.section4 {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    z-index: 2;
    background-image: url(https://static.igem.wiki/teams/5487/bg4xxxx.png);
}

.arrow {
    position: absolute;
    width: 30%;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
}

.section4 .intro-text {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    text-align: center;
    color: rgb(73, 126, 181);
    font-weight: bold;
    white-space: nowrap;
    
}

.section4 .intro-text2 {
    position: absolute;
    top: 60%;
    left: 40px;
    font-size: 2.5rem;
    color: #1d437b;
    width: 50%;
}

.image-container {
    position: absolute;
    width: 25%; 
}

.image-container img {
    width: 100%;
    height: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

.image-container p {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -60px; 
    color: black;
    font-size: 1.2rem;
}

.iceberg {
    top: 15%;
    left: 5%;
    z-index: 1;
}

.plastic {
    top: 15%;
    right: 5%;
    z-index: 2;
    
}

.dolphins {
    top: 35%;
    right: 5%;
    z-index: 3;
}

.soil {
    top: 35%;
    left: 5%;
    z-index: 1;
}

.harm1 {
    position: absolute;
    width: 25%; 

    top: 30%;
    left: 4%;
    z-index: 1;
}

.harm2 {
    position: absolute;
    width: 25%; 

    top: 30%;
    right: 4%;
    z-index: 1;
}

.ip-down {
    width: 30%;
    height: auto;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    bottom: -8%;
    z-index: 9;
}

.txt-below-ip {
    width: 30%;
    height: auto;
    text-align: center;
    font-size: 1.5rem;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 15%;
}

.text-on-magnifier {
    position: absolute;
    width: 30%;
    height: auto;

    bottom: 25%;
    left: 5%;

    z-index: 4;

    font-size: 1.5rem;
    color: #516B90;
}

.magnifier {
    position: absolute;
    width: 40%;
    height: auto;

    bottom: 1%;
    left: 10%;

    z-index: 4;
}

.in-magnifier {
    position: absolute;
    width: 18%;
    height: auto;
    bottom: 8%;
    left: 22%;
    z-index: 4;
}

.cup {
    position: absolute;
    width: 30%;
    height: auto;

    bottom: 10%;
    right: 20%;

    z-index: 4;
}

.section5x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 100vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg5xxxx.png');
}

.section6x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 70vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bgzzzz.png');
}

.section6x2 {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 100vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg5xxxx.png');
}

.section7x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 100vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg7xxxx.png');
}

.section8x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 100vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg8xxxx.png');
}

.section9x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 100vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg9xxxx.png');
}

.section10x {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    height: 70vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 1;
    background-image: url('https://static.igem.wiki/teams/5487/bg10xxxx.png');
}

.section5 {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    /* background-repeat: no-repeat; */
    height: auto; /* 根据内容调整高度 */
    min-height: 400vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 2;
    background-image: url('https://static.igem.wiki/teams/5487/bg-b.jpg');
}

.section5x .intro-text {
    margin: 170px; /* 在文本和卡片之间增加间距 */
    color: rgb(73, 126, 181);
    font-size: 2em;
}

.card {
    position: absolute; /* 使用绝对定位 */
    width: 37%; /* 每张卡片占宽度的一半 */
    top: 21%; /* 根据实际需要调整 */
    overflow: hidden; /* 防止内容溢出 */
}

.card-left {
    left: 10%; /* 第一张卡片在左边 */
}

.card-right {
    right: 10%; /* 第二张卡片在右边 */
}

.card img {
    width: 100%; /* 使图片响应式 */
    height: auto; /* 保持宽高比 */
    transition: 0.5s ease; /* 平滑过渡效果 */
}

.card-text {
    position: absolute; /* 绝对定位 */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white; /* 文本颜色 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 0, 0, 0); /* 初始背景透明 */
    transition: background-color 0.5s ease; /* 平滑过渡效果 */
    opacity: 0; /* 初始不可见 */
    z-index: 2;
    padding: 20px 80px; /* 增加上下内边距以垂直居中文本 */
    font-weight: bold;
    font-size: 1.5rem;
}

.card:hover img {
    filter: brightness(50%); /* 图片变暗 */
}

.card:hover .card-text {
    background-color: rgba(0, 0, 0, 0.5); /* 背景变暗 */
    opacity: 1; /* 文本变为可见 */
}

.text-how {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em; /* 大字体 */
    color: #fff;
    font-weight: bold; /* 加粗字体 */
    white-space: nowrap;
}
.logo-dark {
    position: absolute;
    width: 40%;
    height: auto;

    top: 13%;
    right: 10%;

    z-index: 4;
}

.spetex {
    position: absolute;
    width: 60%;
    height: auto;

    top: 15%;
    left: 0;

    z-index: 2;
}

.img-uestc {
    position: absolute;
    width: 40%;
    height: auto;

    top: 17%;
    right: 100%;

    z-index: 4;
}

.txt-identification {
    font-size: 5rem;
    color: #1d437b;
    /* 水平拉伸文本 */
    display: inline-block; /* 使transform属性有效 */
    font-weight: 800;

    z-index: 1;
}

.bottle {
    position: absolute;
    width: 25%;
    height: auto;

    bottom: 5%;
    right: 2%;

    z-index: 4;
}

.bottle-mater {
    position: absolute;
    width: 30%;
    height: auto;

    bottom: 5%;
    right: 24%;

    z-index: 4;
}

.text1 {
    position: absolute;
    width: 40%;
    height: auto;
    text-align: left;

    top: 20%;
    left: 5%;

    z-index: 99;

    font-size: 1.5rem;
    color: rgb(73, 126, 181);
    overflow: visible;
}

.text-left {
    color: #516B90;
}

.identifaction-img {
    position: absolute;
    width: 45%;
    height: auto;
    text-align: left;

    top: 15%;
    right: 5%;

    z-index: 4;
}

.big-font-heightlight {
    font-size: 1.7rem;
    white-space: nowrap; /* 防止文本折行 */
    font-weight: bold;
}

.big-font-heightlight-2 {
    font-size: 1.8em;
    white-space: nowrap; /* 防止文本折行 */
    font-weight: bold;
}

.section6 {
    position: relative; /* 设置为相对定位的父容器 */
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto; /* 根据内容调整高度 */
    min-height: 300vh; /* 确保部分不太小 */
    width: 100%;
    z-index: 2;
    background-image: url('https://static.igem.wiki/teams/5487/bg-c.jpg');
}

.txt-upcycling {
    font-size: 5rem;
    color: white;
    font-weight: 800;
    white-space: nowrap;

    
    display: inline-block; /* 使transform属性有效 */

    z-index: 1;
}

.pot-cover {
    position: absolute;
    width: 30%;
    height: auto;

    top: 7%;
    left: 10%;

    z-index: 4;
}


.colibacillus {
    position: absolute;
    width: 20%;
    height: auto;

    top: 11%;
    left: 30%;

    z-index: 3;
}

.pot {
    position: absolute;
    width: 30%;
    height: auto;

    top: 10%;
    left: 10%;

    z-index: 2;
}

.text-right {
    position: absolute;
    width: 45%;
    height: auto;
    text-align: left;

    top: 33%;
    right: 5%;

    z-index: 99;

    font-size: 1.5rem;
    color: white;
}

.upcycle-img {
    position: absolute;
    width: 40%;
    height: auto;

    top: 33%;
    left: 2%;

    z-index: 4;
}

.process {
    position: absolute;
    
    top: 35%;
    width: 100%;
    height: auto;

    z-index: 4;

    padding: 30px;
    text-align: center;
}

.txt-summary {
    position: static;
    font-size: 5rem;
    width: 100%;
    color: rgb(73, 126, 181);
    margin: 10px auto 0; /* 水平居中对齐 */
    margin-bottom: 15px;
    margin-top: 100px;
    font-weight: 800;
    
    display: inline-block; /* 使transform属性有效 */

    z-index: 99;
}

.process-img {
    height: 50%;
    width: auto;
    opacity: 0.9;
}

.text-under {
    font-size: 1.4rem;
    color: rgb(73, 126, 181);
    max-width: 70%;
    margin: 10px auto 0; /* 水平居中对齐 */
    margin-top: 30px;
}


/* 定义浮动动画 */
@keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }

/* 为图片添加动画效果 */
.float-img {
    display: inline-block;
    animation: float 2s ease-in-out infinite; /* 上下浮动的动画 */
    width: 17%;
    padding-top: 20vh;
}

.float-img {
    display: inline-block;
    transition: transform 0.3s;
}

/* 不同速度的浮动动画 */
.float-img1 {
    animation: float 2s ease-in-out infinite;
}

.float-img2 {
    animation: float 3.5s ease-in-out infinite;
    padding-top: 35vh !important;
}

.float-img5 {
    animation: float 2.8s ease-in-out infinite;
}

.float-img4 {
    animation: float 4.2s ease-in-out infinite;
    padding-top: 35vh !important;
}

.end-text {
    position: absolute;

    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    z-index: 5;

    font-size: 4rem;
    color: white;
}

.section7 {
    padding: 10%;
}