html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    background-color: rgb(255, 255, 255);
}
/* 字体 */
@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: 50vh;
    width: 50vh;
    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: auto;
      width: 40%;
      position: absolute;
      bottom: 25%;
      right: 8%;
      z-index: 4; 
      opacity: 0;
}
.section3 .s3-text
{
    width: 40%;
    position: absolute;
    z-index: 8;
    font-size: 2.5rem;
    color: rgb(50, 50, 100);
    bottom: 12%;
    left: 10%;
    opacity: 0;
}
.s3-text-intro {
    padding-top: 180px;
    text-align: center;
    font-size: 4rem;
    color: rgb(245, 195, 100);
    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: 25%;
    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(245, 195, 100);
    font-weight: bold;
    white-space: nowrap;
}


@keyframes floatAnimation {
    0% {
      transform: translateY(0); /* 初始垂直位置 */
    }
    50% {
      transform: translateY(-10px); /* 上浮 10px（可调整距离） */
    }
    100% {
      transform: translateY(0); /* 回到初始位置 */
    }
  }








/* 介绍文字2样式保持不变 */
.section4 .intro-text2 {
    position: absolute;
    top: 80%;
    left: 11%;
    font-size: 2rem;
    color: rgb(50, 50, 100);
    width: 80%;
}

/* 通用图片容器样式保持不变（不影响其他元素） */
.image-container {
    position: absolute;
    width: 25%; 
}

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

/* 其他图片容器的文字样式保持不变（不影响iceberg、dolphins等） */
.image-container p:not(.card-text) {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -60px; 
    color: black;
    font-size: 1.2rem;
}

/* iceberg元素样式保持不变 */
.iceberg {
    top: 15%;
    left: 5%;
    z-index: 1;
}

/* plastic元素样式（仅修改此处，添加交互逻辑） */
.plastic {
    top: 13%;
    right: 63%;
    z-index: 2;
    overflow: hidden; /* 仅对plastic容器添加溢出隐藏，不影响其他元素 */
    width: 350px; /* 容器宽度略大于图片宽度，避免图片溢出 */
    animation: floatAnimation 3s ease-in-out infinite;
}

/* plastic内部图片交互样式（仅作用于plastic） */
.plastic img {
    transition: transform 0.3s ease; /* 仅plastic图片添加缩放动画 */
    width: 330px; /* 固定宽度（根据需要调整，原可能是100%继承容器） */
    height: auto; /* 高度自动计算，保持图片原有比例 */
}

/* plastic内部文字容器样式（新增交互逻辑） */
.plastic .card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(rgba(123, 123, 123, 0.8), rgba(48, 48, 48, 0.8));
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease-out;
    margin: 0; 
    text-align: left; /* 核心：文字容器整体靠右 */
    padding-left: 15px; /* 右侧留一定内边距，避免文字贴边 */
    padding-right: 10px; /* 左侧内边距可适当减小，保持平衡 */
    }

    .plastic .color-key {
        color: rgb(245, 195, 100); /* 橙色系，突出标题关键词 */
        font-weight: bold; /* 可选：加粗增强对比 */
    }

/* plastic内部小标题样式 */
.plastic .text-title {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgb(255, 255, 255);
}

/* plastic内部正文样式 */
.plastic .text-content {
    font-size: 0.5rem;
    line-height: 1;
    margin: 4px 0;
    color: rgb(50, 50, 100);
}

/* plastic鼠标悬停效果（仅作用于plastic） */
.plastic:hover .card-text {
    transform: translateY(0);
    opacity: 1;
}

.plastic:hover img {
    transform: scale(1.05);
}

/* dolphins元素样式保持不变 */




/* plastic元素样式（仅修改此处，添加交互逻辑） */
.dolphins {
    position: absolute;
    top: 20%;
    left: 63%;
    z-index: 2;
    overflow: hidden; /* 仅对plastic容器添加溢出隐藏，不影响其他元素 */
    width: 350px; /* 容器宽度略大于图片宽度，避免图片溢出 */
    animation: floatAnimation 3s ease-in-out infinite;
    animation-delay: 0.5s; /* 比plastic晚0.5s开始 */
}

/* plastic内部图片交互样式（仅作用于plastic） */
.dolphins img {
    transition: transform 0.3s ease; /* 仅plastic图片添加缩放动画 */
    width: 330px; /* 固定宽度（根据需要调整，原可能是100%继承容器） */
    height: auto; /* 高度自动计算，保持图片原有比例 */
}

/* plastic内部文字容器样式（新增交互逻辑） */
.dolphins .card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(rgba(123, 123, 123, 0.8), rgba(48, 48, 48, 0.8));
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease-out;
    margin: 0; 
    text-align: left; /* 核心：文字容器整体靠右 */
    padding-left: 15px; /* 右侧留一定内边距，避免文字贴边 */
    padding-right: 10px; /* 左侧内边距可适当减小，保持平衡 */
    }

    .dolphins .color-key {
        color: rgb(245, 195, 100); /* 橙色系，突出标题关键词 */
        font-weight: bold; /* 可选：加粗增强对比 */
    }

/* plastic内部小标题样式 */
.dolphins .text-title {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgb(255, 255, 255);
}

/* plastic内部正文样式 */
.dolphins .text-content {
    font-size: 0.5rem;
    line-height: 1;
    margin: 4px 0;
    color: rgb(50, 50, 100);
}

/* plastic鼠标悬停效果（仅作用于plastic） */
.dolphins:hover .card-text {
    transform: translateY(0);
    opacity: 1;
}

.dolphins:hover img {
    transform: scale(1.05);
}























/* plastic元素样式（仅修改此处，添加交互逻辑） */
.soil {
    position: absolute;
    top: 57%;
    left: 30%;
    z-index: 2;
    overflow: hidden; /* 仅对plastic容器添加溢出隐藏，不影响其他元素 */
    width: 650px; /* 容器宽度略大于图片宽度，避免图片溢出 */
    animation: floatAnimation 3s ease-in-out infinite;
    animation-delay: 1s; /* 比plastic晚0.5s开始 */
}

/* plastic内部图片交互样式（仅作用于plastic） */
.soil img {
    transition: transform 0.3s ease; /* 仅plastic图片添加缩放动画 */
    width: 630px; /* 固定宽度（根据需要调整，原可能是100%继承容器） */
    height: auto; /* 高度自动计算，保持图片原有比例 */
}

/* plastic内部文字容器样式（新增交互逻辑） */
.soil .card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(rgba(123, 123, 123, 0.8), rgba(48, 48, 48, 0.8));
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease-out;
    margin: 0; 
    text-align: left; /* 核心：文字容器整体靠右 */
    padding-left: 15px; /* 右侧留一定内边距，避免文字贴边 */
    padding-right: 10px; /* 左侧内边距可适当减小，保持平衡 */
    }

    .soil .color-key {
        color: rgb(245, 195, 100); /* 橙色系，突出标题关键词 */
        font-weight: bold; /* 可选：加粗增强对比 */
    }

/* plastic内部小标题样式 */
.soil .text-title {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgb(255, 255, 255);
}

/* plastic内部正文样式 */
.soil .text-content {
    font-size: 0.5rem;
    line-height: 1;
    margin: 4px 0;
    color: rgb(50, 50, 100);
}

/* plastic鼠标悬停效果（仅作用于plastic） */
.soil:hover .card-text {
    transform: translateY(0);
    opacity: 1;
}

.soil:hover img {
    transform: scale(1.05);
}















/* harm1元素样式保持不变 */
.harm1 {
    position: absolute;
    width: 25%; 
    top: 30%;
    left: 4%;
    z-index: 1;
}

/* harm2元素样式保持不变 */
.harm2 {
    position: absolute;
    width: 25%; 
    top: 30%;
    right: 4%;
    z-index: 1;
}

/* ip-down元素样式保持不变 */
.ip-down {
    width: 30%;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8%;
    z-index: 9;
}

/* txt-below-ip元素样式保持不变 */
.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元素样式保持不变 */
.text-on-magnifier {
    position: absolute;
    width: 30%;
    height: auto;
    bottom: 25%;
    left: 5%;
    z-index: 4;
    font-size: 1.5rem;
    color: #516B90;
}

/* magnifier元素样式保持不变 */
.magnifier {
    position: absolute;
    width: 40%;
    height: auto;
    bottom: 1%;
    left: 10%;
    z-index: 4;
}

/* in-magnifier元素样式保持不变 */
.in-magnifier {
    position: absolute;
    width: 18%;
    height: auto;
    bottom: 8%;
    left: 22%;
    z-index: 4;
}

/* cup元素样式保持不变 */
.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: 50vh; /* 确保部分不太小 */
    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: 60vh; /* 确保部分不太小 */
    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: 80vh; /* 确保部分不太小 */
    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: 200vh; /* 确保部分不太小 */
    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(255, 255, 255);
    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: rgb(245, 195, 100);
    font-weight: bold; /* 加粗字体 */
    white-space: nowrap;
}
.logo-dark {
    position: absolute;
    width: 20%;
    height: auto;

    top: 8%;
    right: 20%;

    z-index: 4;
}

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

    top: 8%;
    left: 15%;

    z-index: 2;
}

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

    top: 8%;
    right: 100%;

    z-index: 4;
}

.txt-Degradation {
    font-size: 5rem;
    color: rgb(20, 20, 20);
    /* 水平拉伸文本 */
    display: inline-block; /* 使transform属性有效 */
    font-weight: 800;
    right: 80%;
    z-index: 1;
}

.txt-Upgrading {
    font-size: 5rem;
    color: rgb(20, 20, 20);
    /* 水平拉伸文本 */
    display: inline-block; /* 使transform属性有效 */
    font-weight: 800;
    right: 60%;
    z-index: 1;
}


.txt-EG {
    font-size: 4rem;
    color: rgb(245, 195, 100);
    /* 水平拉伸文本 */
    display: inline-block; /* 使transform属性有效 */
    font-weight: 800;
    right: 80%;
    z-index: 1;
}

.txt-TPA {
    font-size: 4rem;
    color: rgb(44, 102, 174);
    /* 水平拉伸文本 */
    display: inline-block; /* 使transform属性有效 */
    font-weight: 800;
    right: 80%;
    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: 35%;
    height: auto;
    text-align: left;

    top: 0%;
    left: 11%;

    z-index: 99;

    font-size: 1.0rem;
    color: rgb(50, 50, 100);
    overflow: visible;
}

.text-left {
    color: rgb(50, 50, 100);
    left: 5%;
}

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

    top: 5%;
    right: 8%;

    z-index: 4;
}

.big-font-heightlight {
    font-size: 1.3rem;
    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-title {
    position: absolute;
    width: 65%;
    height: auto;
    text-align: left;

    top: 0%;
    right: 15%;

    z-index: 99;

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

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

    top: 10%;
    right: 8%;

    z-index: 99;

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

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

    top: 60%;
    right: 8%;

    z-index: 99;

    font-size: 4rem;
    color: rgb(44, 102, 174);
}


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

    top: 33%;
    right: 5%;

    z-index: 99;

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







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

    top: 20%;
    left: 15%;

    z-index: 4;
}

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

    top: 75%;
    left: 18%;

    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(20, 20, 20);
    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(50, 50, 100);
    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: 30vh;
}

.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: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    z-index: 5;

    font-size: 4rem;
    color: rgb(245, 195, 100);
}

.section7 {
    padding: 10%;
}