@font-face {
    font-family: SF-Heavy;
    src: url(https://static.igem.wiki/teams/4628/wiki/fonts/sf-heavy.otf)
}

@font-face {
    font-family: Montserrat-Mid;
    src: url(https://static.igem.wiki/teams/4628/wiki/fonts/montserrat-mid.ttf)
}

@font-face {
    font-family: Montserrat-Ex;
    src: url(https://static.igem.wiki/teams/4628/wiki/fonts/montserrat-ex.ttf)
}

.contain * {
    background-size: contain;
    background-repeat: no-repeat
}

.contain {
    position: relative;
    width: 100vw;
    min-height: calc(100vh - 90px);
    margin-bottom: 0;
    font-size: min(3vmin, 25px);
    font-family: Montserrat-Reg
}

footer {
    transform-style: preserve-3d
}

footer::after {
    height: 100%;
    width: 100vw;
    display: block;
    content: "";
    position: absolute;
    transform: translateZ(-10px);
    background-color: var(--homebgc)
}

#s0,
#s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7,
#s8,
#s9 {
    position: relative;
    width: 100vw;
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--homebgc);
}

#s1 {
    transform: translateY(-10%); /* 根据需要调整像素值 */
}

.contain #s2 {
    margin-top: -20vmin
}

.contain #s1 .bg {
    position: relative;
    top: 1vmin;
    width: 91vmin;
    height: 56vmin;
    border-radius: 5vmin;
    background-color: transparent;
    color: var(--font);
    left: 15%;
}


#s1 .text {
    position: absolute;
    left: 44%;  /* 调整位置，使其距离 leftimg2 有一定距离 */
    top: 50%;   /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    width: 60%; /* 宽度为 30%，确保不会太长 */
    max-width: 550px; /* 最大宽度限制 */
    padding: 20px; /* 添加内边距 */
    /*background-color: white; !* 背景颜色 *!*/
    /*border: 1px solid #ccc; !* 边框 *!*/
    border-radius: 10px; /* 圆角 */
    margin-left: 20px; /* 添加左边距，确保与 leftimg2 有一定距离 */
}

#s1 .text p {
    /*font-family: 'Montserrat-Black', sans-serif;*/
    font-family: 'Montserrat-Black', sans-serif;
}

#s1 .text p b {
    color: #e05b53;
    font-size: 3.7em; /* 使 Astaxanthin 更大 */
    display: block; /* 使 b 标签独占一行 */
    margin-bottom: 5px; /* 添加下边距 */
}

#s1 .text p span {
    font-size: 2.7em; /* 使其他文本大小正常 */
}

#s1 .leftimg1 {
    display: flex;
    position: absolute;  /* 使用绝对定位来控制图片的位置 */
    width: 25%;        /* 设置图片的宽度，可以根据需要调整 */
    height: auto;        /* 自动调整高度，保持图片比例 */
    border-radius: 10px;  /* 圆角效果，可选 */
}

.leftimg2 {
    position: absolute;  /* 使用绝对定位来控制图片的位置 */
    width: 20%;        /* 设置图片的宽度，可以根据需要调整 */
    height: auto;        /* 自动调整高度，保持图片比例 */
    border-radius: 10px;  /* 圆角效果，可选 */
}

.leftimg1 {
    left: 14%;           /* 图片1固定在左侧 */
    z-index: 1;          /* 设置图片1在前面 */
}

.leftimg2 {
    left: 26%; /* 图片2向右移动，产生重叠效果 */
    transform: translateY(19%);
    z-index: 2;          /* 设置图片2在图片1的后面 */
}

.contain #s1 .bg p {
    position: relative;
    top: 40%;
    left: 5%;
    width: 56vmin;
    height: 25vmin;
    text-align: left;
    line-height: 100%;
    font-size: min(3vmin, 30px);
    font-family: Montserrat-Reg;
    line-height: 1.5em
}

.contain .shadow {
    position: relative;
    padding: 2px;
    -webkit-text-stroke: 8px transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.contain .shadow::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    z-index: 1;
    width: fit-content;
    height: 100%;
    text-wrap: nowrap;
    padding: 2px;
    -webkit-text-stroke: 8px transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.contain #s1 .bg p span {
    font-size: 1.5em;
    display: inline-block;
    left: -2px;
    top: 2px;
    font-family: Montserrat-Bold;
    background-color: var(--bg);
    transform: rotate(-3deg);
    transform-origin: left bottom
}

.contain #s1 .bg p span::after {
    left: 2px;
    top: -2px;
    color: var(--mg);
    background-color: var(--bg)
}

#s1 .greet {
    position: absolute;
    top: -5vmin;
    left: -10vmin;
    width: 50vmin;
    height: 20vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-greet.svg)
}

#s1 .l {
    position: absolute;
    bottom: -7vmin;
    left: -10vmin;
    width: 17vmin;
    height: 20vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-l.svg)
}

#s1 .r {
    bottom: -10vmin;
    right: -23vmin;
    position: absolute;
    width: 59vmin;
    height: 40vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-r.svg)
}

#s2 {
    margin-bottom: 1%;
}

.contain #s2 .bg {
    position: relative;
    top: -5vmin;
    width: 90vmin;
    height: 36vmin;
    border-radius: 5vmin;
    background-color: #fff4cd;
    color: var(--mg);
    transform-style: preserve-3d;
    padding-top: 2vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.s2_text_container {
    display: flex;
    justify-content: space-around;
    gap: 0px;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    width: 1200px;
    font-family: Montserrat-Bold, sans-serif;
}

.s2_text{
    font-family: 'Montserrat-Black', sans-serif;
    flex: 1;
    font-size: 24px;
    margin: 0 20px;
    text-align: center;
    flex-direction: row;
    padding: 10px;
    color: #e05b53;
}

.contain #s2 .bg::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5vmin;
    left: -1.5vmin;
    top: 1.5vmin;
    background-color: #ffc570;
    transform: translateZ(-10px)
}

.contain #s2 .bg .r1,
.contain #s2 .bg .r2,
.contain #s2 .bg .r3 {
    position: relative;
    left: 8vmin;
    top: 6vmin;
    width: 74vmin
}

.contain #s2 .bg .r1 {
    display: flex;
    padding-left: 5vmin;
    gap: 6vmin
}

.contain #s2 .bg .r1 .l {
    font-size: 2.4em;
    display: inline-block;
    left: -4px;
    top: 4px;
    font-family: Montserrat-Bold;
    background-color: #ffc570;
    transform: rotate(-5deg);
    color: #ffc570;
    transform-origin: left bottom
}

.contain #s2 .bg .r1 .l::after {
    left: 4px;
    top: -4px;
    width: fit-content;
    height: 100%;
    text-wrap: nowrap;
    color: var(--mg);
    background-color: var(--bg)
}

.contain #s2 .bg .r2 {
    margin-top: 3vmin
}

.contain #s2 .bg .r3 {
    position: absolute;
    top: calc(100% + 22vmin);
    color: #e46d39;
    text-align: center
}

.contain #s2 .bg .r2 .red {
    color: #e46d39
}

.contain #s2 .rbg {
    position: absolute;
    bottom: -18vmin;
    left: 2vmin;
    width: 50vmin;
    height: 25vmin;
    border-radius: 3vmin;
    border: 2vmin solid #f37952;
    background-color: #f37952
}

.contain #s2 .rbg:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 3vmin;
    left: -.5vmin;
    top: -3.5vmin;
    background-color: #ffdcbc;
    border: 2vmin solid #fffefe
}

.contain #s2 .rbg .l {
    left: 4vmin;
    top: 7vmin;
    font-family: SF-Heavy;
    transform: scaleY(1.4) rotate(-.5deg);
    font-size: 4.5vmin;
    line-height: 4.5vmin;
    transform-origin: left bottom;
    position: absolute;
    z-index: 5;
    color: #ff7549
}

.contain #s2 .rbg .l::after {
    display: block;
    content: "";
    position: absolute;
    width: 7vmin;
    height: 7vmin;
    top: -1.5vmin;
    right: 1.5vmin;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-feather.svg);
    transform: rotate(10deg)
}

.contain #s2 .rbg .r {
    top: 2vmin;
    position: absolute;
    z-index: 6;
    left: 23vmin;
    width: 100px;
    height: 50px;
    font-family: Montserrat-Ex
}

.contain #s2 .rbg .r .yellow {
    width: fit-content;
    font-size: 5vmin;
    color: #fc997a;
    background-color: #fc997a;
    left: 1vmin;
    top: .5vmin
}

.contain #s2 .rbg .r .yellow::after {
    z-index: 7;
    left: 6px;
    top: -6px;
    color: #ffca7c;
    background-color: #fff9ea;
    -webkit-text-stroke: 10px transparent
}

.contain #s2 .rbg .r .red {
    font-size: 10vmin;
    color: #fc997a;
    background-color: #fc997a;
    left: -6px;
    top: -2vmin;
    width: 80vmin;
    -webkit-text-stroke: 15px transparent
}

.contain #s2 .rbg .r .red::after {
    z-index: 8;
    left: 6px;
    top: -6px;
    color: #9e3636;
    background-color: #fff9ea;
    -webkit-text-stroke: 15px transparent
}

.contain #s2 .bg .lt {
    left: -5vmin;
    top: -5vmin;
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-lt.svg)
}

.contain #s2 .bg .rb {
    position: absolute;
    width: 24vmin;
    height: 18.5vmin;
    right: 3vmin;
    bottom: -15vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-panda.svg)
}

.contain #s2 .bg .rb .sign {
    position: absolute;
    width: 3vmin;
    height: 3vmin;
    bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-sign.svg)
}

.contain #s2 .bg .arrow {
    top: 5vmin;
    right: -10vmin;
    position: absolute;
    z-index: 10;
    width: 16vmin;
    height: 9.6vmin;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-decline.svg)
}

#s3 {
    flex-direction: column
}

#s3 .bot,
#s3 .top {
    width: 96vmin;
    padding: 5vmin;
    position: relative
}

#s3 .top {
    padding-bottom: 8vmin;
    color: #6d966b;
    text-align: center
}

#s3 .top::after,
#s3 .top::before {
    display: block;
    content: "";
    position: absolute
}

#s3 .top::before {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1vmin;
    background-color: #6d966b;
    transform: translateY(-50%);
    border-radius: .5vmin
}

#s3 .top::after {
    width: 5vmin;
    height: 5vmin;
    bottom: -1.5vmin;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/3-glassicon.svg)
}

#s3 .bot {
    display: flex;
    justify-content: space-between
}

#s3 .bot .card {
    display: flex;
    flex-direction: column;
    gap: 3vmin
}

#s3 .bot .card .img {
    position: relative;
    border: .5vmin solid #6d966b;
    box-shadow: 0 1vmin 0 #ffc570;
    width: 25vmin;
    height: 30.5vmin;
    border-radius: 2.4vmin;
    overflow: hidden
}

#s3 .bot .card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

#s3 .bot .card .img img.bad {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 1s;
    pointer-events: none
}

#s3 .bot .card .img img.good:hover~.bad {
    opacity: 1
}

#s3 .bot .card .tag {
    width: 100%;
    text-align: center;
    font-family: Montserrat-Mid;
    color: #f37952;
    font-size: min(3vmin, 30px)
}

#s3 .cursor {
    position: fixed;
    z-index: 1000;
    top: 40px;
    left: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 5px solid var(--mg);
    opacity: 0;
    transition: 1s;
    background-color: rgba(0, 0, 0, .3);
    pointer-events: none
}

#s3 .cursor::after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 100px;
    top: 136.5px;
    top: 47px;
    left: 90px;
    transform-origin: center;
    transform: rotate(135deg);
    background-color: var(--mg);
    border-radius: 5px
}

#s3:hover .cursor {
    opacity: 1
}

#s4 {
    flex-direction: column;
    gap: 15vmin
}

#s4 .bot,
#s4 .top {
    width: 96vmin;
    position: relative
}

#s4 .top {
    padding: 2vmin 8vmin;
    background-color: #f37952;
    color: #f1fff0;
    text-align: center;
    border-radius: 20vmin;
    box-shadow: 0 1vmin #a4c3a2
}

#s4 .bot {
    display: flex
}

#s4 .bot .l {
    flex: 4;
    position: relative;
    display: flex;
    justify-content: flex-end
}

#s4 .bot .l .bk {
    position: relative;
    width: 60%;
    aspect-ratio: 1.25;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-bkb.svg)
}

#s4 .bot .l .title {
    position: absolute;
    left: 0;
    top: -2vmin;
    font-family: Montserrat-Semi;
    font-size: 1.5em
}

#s4 .bot .l .title .shadow {
    margin-bottom: -2vmin;
    color: #6d966b;
    background-color: #6d966b
}

#s4 .bot .l .title .shadow::after {
    z-index: 1;
    top: -4px;
    left: 4px;
    color: #ffc570;
    background-color: #fff9ea
}

#s4 .bot .l .ft {
    position: absolute;
    z-index: 3;
    width: 24%;
    aspect-ratio: .8;
    bottom: 3%;
    right: 47%;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-ftb.svg)
}

#s4 .bot .l .head {
    position: absolute;
    z-index: 1;
    width: 20%;
    aspect-ratio: 1;
    left: 0;
    bottom: 0;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-ll.svg)
}

#s4 .bot .r {
    flex: 3;
    display: flex;
    position: relative;
    align-items: end
}

#s4 .bot .r::after {
    display: block;
    content: "";
    width: 20%;
    right: 0;
    bottom: 0;
    aspect-ratio: 1.1;
    transform: translateX(40%) translateZ(-10px);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-rr.svg)
}

#s4 .bot .r .drop {
    position: absolute
}

#s4 .bot .r .d1 {
    width: 80%;
    aspect-ratio: 1.5;
    bottom: 60%;
    left: -5%;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b1.svg)
}

#s4 .bot .r .d2 {
    width: 80%;
    aspect-ratio: 1.7;
    bottom: 35%;
    right: -10%;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b2.svg)
}

#s4 .bot .r .d3 {
    width: 70%;
    aspect-ratio: 1.4;
    bottom: 5%;
    left: 0;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b3.svg)
}

#s4 .drop {
    filter: brightness(1);
    transition: .6s;
    transform: scale(1);
    transform-origin: center
}

#s4 .bot .r:hover .drop {
    filter: brightness(.6)
}

#s4 .drop:hover+.pop {
    opacity: 1;
    transform: translateX(0)
}

#s4 .r>.drop:hover {
    filter: brightness(1) !important;
    transform: scale(1.02)
}

#s4 .pop {
    font-size: .6em;
    line-height: 1.5em;
    width: fit-content;
    max-width: min(30vw, 400px);
    position: fixed;
    z-index: 1000;
    top: 100px;
    right: 0;
    background-color: #fffefd;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(60, 60, 60, .03);
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: .6s
}

#s4 .pop::before {
    display: block;
    content: "";
    position: absolute;
    width: .6em;
    height: 100%;
    background-color: #6d966b;
    left: 0;
    top: 0;
    z-index: 1001
}

#s7 {
    padding: 0 max(calc(50vw - 55vmin), 100px);
    gap: 10px;
    flex-wrap: wrap
}

#s7 .l,
#s7 .r1,
#s7 .r2 {
    min-width: 280px;
    max-width: 420px;
    aspect-ratio: .8
}

#s7 .l {
    min-width: 300px;
    color: #6d966b;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#s7 .l b {
    font-family: Montserrat-Bold
}

#s7 .l .top {
    font-family: Montserrat-Bold;
    font-size: 2.5em
}

#s7 .l .bot {
    font-size: .8em;
    position: relative;
    padding-left: 5vmin
}

#s7 .l .bot::before {
    display: block;
    content: "";
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-size: contain;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/7-leaf.svg);
    left: 0;
    top: 0;
    transform: translateX(-50%)
}

#s7 .r1,
#s7 .r2 {
    position: relative;
    flex: 1;
    width: auto;
    height: auto;
    left: -3%;
}

#s7 .pop {
    position: absolute;
    width: max(63%, 70px);
    height: auto;
    animation: float 6s ease infinite;
    animation-delay: calc(var(--i)* .4s);
}

#s7 .pop img {
    width: 100%;
    object-fit: contain
}

#s7 .pop img.highlight {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .6s
}

#s7 .pop:hover img.highlight {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1
}

/* .link {
    background-color: #9e3636;
} */

#s7 .r1 .p1 {
    top: 70%;
    left: 40%;
}

#s7 .r1 .p2 {
    right: 47%;
    top: 30%;
}

#s7 .r1 .p3 {
    bottom: 25%;
    right: -57vmin;
}

#s7 .r2 .p1 {
    top: 71%;
    right: 16%;
}

#s7 .r2 .p2 {
    right: 66%;
    top: 29%;
}

#s7 .r2 .p3 {
    top: 27%;
    right: -16%
}

@keyframes float {

    0%,
    100%,
    50% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(3%)
    }

    50% {
        transform: translateY(-3%)
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

#s7 .l .top b {
    opacity: 0;
    animation: blink 3s linear infinite;
    animation-delay: calc(var(--i) * .3s)
}

#s8 {
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-bk.svg);
    background-size: contain;
    background-position: bottom;
    align-items: start;
    padding-top: 10%
}

#s8 .txt-wrap {
    z-index: -1;
    width: 90vmin;
    aspect-ratio: 2.5;
    color: #4e894b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vmin;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-cloud.svg)
}

#s8 .txt-wrap p {
    display: block;
    width: 98vmin;
    text-align: center;
    position: relative
}

#s8 .txt-wrap .p1::before,
#s8 .txt-wrap .p2::before {
    display: block;
    position: absolute;
    color: #ffba57;
    font-family: Montserrat-Mid;
    font-size: 6em
}

#s8 .txt-wrap .p1::before {
    content: '“';
    top: 0;
    left: 0;
    transform: translate(-110%, -25%)
}

#s8 .txt-wrap .p2::before {
    content: '”';
    bottom: 0;
    right: 0;
    transform: translate(100%, 75%)
}

#s8 .panda {
    position: absolute;
    bottom: 0;
    width: max(25vmin, 150px);
    aspect-ratio: .9;
    transform: translateX(-50%);
    left: 55%;
    bottom: 6%;
    background-size: contain;
    background-position: bottom;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-panda.svg);
    animation: bounce 2s infinite ease-in
}

#s8 .p-shadow {
    position: absolute;
    background-color: #c99953;
    width: max(16vmin, 120px);
    aspect-ratio: 10;
    border-radius: 50%;
    left: 55%;
    bottom: 3%;
    transform: translateX(-50%);
    animation: shadow 2s infinite ease-in
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) translateX(-50%)
    }

    50% {
        transform: translateY(-10%) translateX(-50%)
    }
}

@keyframes shadow {

    0%,
    100% {
        transform: scale(1) translateX(-50%);
        opacity: 1
    }

    50% {
        transform: scale(.8) translateX(-50%);
        opacity: .8
    }
}

/* s9样式 */
#s9 {
    background-color: var(--homebgc);
    background-size: contain;
    background-position: center;
    margin-top: 150px; /* 增加顶部外边距，避免与#s5内容重叠 */
}

#s9 .border {
    position: relative;
    width: 70%;
    max-width: 950px;
    aspect-ratio: 1.78;
    background-color: #fffefd;
    border: 10px solid #ffebcf;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#s9 .title {
    top: 0;
    right: 74%;
    transform: translateY(-90%) rotate(-7deg);
    position: absolute;
    width: 310px;
    height: auto;
    padding: 10px;
    z-index: -1;
}

#s9 .future-text {
    position: absolute;
    top: -30%;
    /*right: 14%;*/
    font-family: 'Montserrat-Black', sans-serif;
    font-size: 1em;
    color: var(--font);
    padding: 5px 10px;
    transform: translateX(-10%);
    /*border-radius: 5px;*/
}

/*#s9 .title {*/
/*    top: 0;*/
/*    right: 5%;*/
/*    transform: translateY(-85%);*/
/*    font-family: Montserrat-Semi;*/
/*    font-size: 2em;*/
/*    position: absolute;*/
/*    color: #6d966b;*/
/*    background-color: #6d966b;*/
/*    padding: 10px;*/
/*    -webkit-text-stroke: 15px transparent*/
/*}*/

#s9 .title::after {
    top: -6px;
    left: 6px;
    background-color: #fff9ea;
    color: #ffc470;
    padding: 10px;
    -webkit-text-stroke: 15px transparent
}

#s0 {
    transform: translateY(-10%);
    background-image: linear-gradient(to bottom, rgba(255, 214, 191, 0), rgba(255, 214, 191, 1)),
                      url(https://static.igem.wiki/teams/5385/home/homebg.jpg);
    background-size: cover;
    background-position: center 20%;
}



#s0 .intro {
    position: relative;
    width: 100%;
    max-width: 950px
}

#s0 .intro img {
    width: 100%;
    object-fit: contain
}

#s0 .color {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 2s
}



#s0.fin .color {
    opacity: 1
}

#s0.homelogo {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#s0 .go {
    position: absolute;
    bottom: -20px;
    font-family: Nunito-Bold;
    color: #6d966b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: go 4s linear infinite
}

@keyframes go {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

#s0 .go .btn {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #6d966b;
    display: flex;
    justify-content: center;
    align-items: center
}

#s0 .go .btn .line {
    position: relative;
    height: 40%;
    width: 3px;
    background-color: var(--bg);
    border-radius: 1.5px;
    transition: .6s
}

#s0 .go .btn .line::after,
#s0 .go .btn .line::before {
    transition: .6s;
    display: block;
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    border-radius: 1.5px;
    background-color: var(--bg);
    transform-origin: bottom;
    bottom: 0
}

#s0 .go .btn .line::before {
    transform: rotate(-45deg)
}

#s0 .go .btn .line::after {
    transform: rotate(45deg)
}

#s0 .go .btn:hover .line,
#s0 .go .btn:hover .line::after,
#s0 .go .btn:hover .line::before {
    background-color: var(--y)
}

.bg-wrap {
    width: 100vw;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/7-bg.svg);
    background-position: center;
    background-attachment: fixed
}

#s6 .bg {
    transform-style: preserve-3d;
    position: relative;
    font-size: .8em;
    color: #fff;
    width: 90vmin;
    aspect-ratio: 2.3;
    background-color: #6d966b;
    padding: 0 5%;
    padding-bottom: min(10%, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5em;
    border-radius: 20px;
    box-shadow: 10px -4px 0 #a3c394
}

#s6 .bg p {
    text-indent: 1.5em;
    text-align: left
}

#s6 .bg p .yellow {
    font-family: Montserrat-Semi;
    color: #ffc570
}

#s6 .ft {
    line-height: 1.5em;
    text-indent: 1.5em;
    left: 15%;
    top: 80%;
    position: absolute;
    width: 60%;
    aspect-ratio: 3;
    background-color: var(--bg);
    color: #6d966b;
    font-size: .8em;
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 6px 8px 0 #a3c394;
    display: flex;
    justify-content: center;
    align-items: center
}

#s6 .panda {
    left: -10%;
    top: 80%;
    position: absolute;
    width: 30%;
    aspect-ratio: 1.2;
    background-size: contain;
    background-position: top;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/6-panda.svg)
}

#s6 .circle {
    top: 0;
    left: 50%;
    transform: translate(-50%, -35%) translateZ(-10px);
    position: absolute;
    width: 60%;
    aspect-ratio: 1.2;
    background-size: contain;
    background-position: top;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/6-circle.svg)
}

#s6 .title {
    position: absolute;
    top: -5em;
    left: 45%;
    transform: translateX(-50%)
}

#s6 .title p {
    font-size: 3em;
    font-family: Titan;
    color: var(--mg);
    background-color: var(--mg)
}

#s6 .title p::after {
    top: -4px;
    left: 4px;
    color: var(--mg);
    background-color: var(--bg)
}

#s6 .title p.indent {
    margin-top: -.3em;
    left: .6em
}

#s6 .btn {
    right: min(3%, 20px);
    bottom: 0;
    transform: translateY(50%);
    position: absolute;
    background-color: var(--bg);
    border: 4px solid var(--mg);
    padding: .4em .6em;
    box-shadow: 4px 6px 0 var(--y);
    border-radius: 10px
}

#s6 .btn i {
    position: relative;
    display: block;
    width: .6em;
    height: 4px;
    border-radius: 2px;
    position: relative;
    background-color: var(--mg)
}

#s6 .btn i::after,
#s6 .btn i::before {
    right: 0;
    bottom: 0;
    display: block;
    content: "";
    position: absolute;
    height: 4px;
    width: 70%;
    border-radius: 2px;
    background-color: var(--mg);
    transform-origin: right
}

#s6 .btn i::before {
    transform: rotate(45deg)
}

#s6 .btn i::after {
    transform: rotate(-45deg)
}

#s6 .btn a {
    text-decoration: none;
    color: var(--mg);
    font-family: Nunito-Bold;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px
}

#s9 .border iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px
}

#s5 .wrap {
    width: 90vmin;
    height: 54vmin;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    gap: max(20px, 5%)
}

#s5 .wrap .l,
#s5 .wrap .r {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: justify;
    line-height: 1em
}

#s5 .wrap .r {
    padding: 5% 0
}

#s5 .wrap .txt {
    color: var(--mg);
    font-size: .6em;
    text-indent: 1.5em;
    padding: .8em;
    text-align: left
}

#s5 .wrap .txt b {
    font-family: Montserrat-Bold
}

#s5 .wrap .title {
    position: relative;
    height: 40%;
    width: 100%;
    background-size: contain
}

#s5 .wrap .l .title {
    transform: translate(10%, -10%);
    background-position: top;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-bio.svg)
}

#s5 .wrap .r .title {
    transform: translate(-10%, 5%);
    background-position: bottom;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-zju.svg)
}

#s5 .wrap .title .pic {
    position: absolute;
    width: 65%;
    aspect-ratio: 1.6;
    border: 6px solid var(--y);
    border-radius: 20px;
    background-color: #fff;
    background-size: cover;
    background-position: center
}

#s5 .wrap .title .pic::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    bottom: 0;
    aspect-ratio: .5;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    transform-origin: bottom;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-feather.svg)
}

#s5 .wrap .l .title .pic {
    top: 65%;
    left: 0;
    transform: translateX(-20%);
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-biopic.png)
}

#s5 .wrap .l .title .pic::before {
    left: 0;
    transform: rotate(-7deg) translateX(-50%)
}

#s5 .wrap .r .title .pic::before {
    right: 0;
    transform: rotateY(180deg) translateX(-50%) rotateX(7deg)
}

#s5 .wrap .r .title .pic {
    bottom: 50%;
    right: 0;
    transform: translateX(20%);
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-zjupic.png)
}

#s5 .flora {
    position: absolute;
    top: 40%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(-8deg);
    width: 65%;
    aspect-ratio: 3;
    background-size: contain;
    background-position: bottom;
    background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2l-flora.png)
}

#s5 .wrap {
    transform-origin: center;
    transform: scale(1.2)
}

#s7 .title {
    position: absolute;
    top: 2em;
    left: 33%;
    /*transform: translateX(0%);*/
    animation: float 6s ease infinite;
    animation-delay: calc(var(--i)* .4s);
}

#s7 .bot {
    position: relative;
    height: 2em
}

#s7 .op {
    width: fit-content;
    font-family: Nunito-Bold;
    opacity: 0;
    position: absolute;
    top: calc(50% + .5em);
    left: 5vmin;
    transition: 1s
}

#s7 .op.show {
    opacity: 1
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        opacity: 1
    }
}

@keyframes bounceInDown {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
        transform: translate3d(0, -3000px, 0) scaleY(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0) scaleY(.9);
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg)
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

#s0 .medal {
    top: 30%;
    width: 100vw;
    display: flex;
    justify-content: center;
    position: absolute
}

#s0 #star {
    position: relative;
    right: 0;
    top: 0;
    transform: translate(35%, -35%) rotate(15deg);
    position: absolute;
    z-index: 999;
    cursor: pointer;
    transition: transform 1s
}

#s0 #star::before {
    content: "Click Me !";
    display: block;
    position: absolute;
    top: -20px;
    left: calc(50% - 25px);
    white-space: nowrap;
    color: #6d966b;
    font-family: Montserrat-Semi;
    font-size: 12px;
    opacity: 0;
    transform-origin: center bottom
}

#s0 #star:hover::before {
    animation: jackInTheBox 1s forwards
}

#s0 .contain.active #star {
    transform: translate(35%, -35%) rotate(0)
}

#s0 .contain.active #star:hover::before {
    animation: none
}

#s0 #star img {
    width: min(130px, max(15vw, 110px));
    object-fit: contain
}

#s0 .contain.active #star img {
    animation: rubberBand 1s
}

#s0 .medal .contain {
    position: relative;
    width: 80vw;
    max-width: 860px;
    height: fit-content
}

#s0 .medal .contain.active .card {
    animation: flipInX 1s 1s forwards;
    pointer-events: all
}

#s0 .medal .contain.active .card .scene .tag {
    animation: bounceInDown 1s calc(var(--delay) * .4s + 1.4s) forwards
}

#s0 .medal .contain.active .card #scene .tag {
    animation: none
}

#s0 .medal .contain .card {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: #b9d9ac 5px solid;
    height: 200px;
    background-color: #fff9ea;
    box-shadow: 2px 6px 0 #b9d9ac;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 155px 0;
    pointer-events: none
}

#s0 .medal .contain .card .bg {
    background-color: #e7eed5;
    width: 100%;
    height: 90px;
    position: absolute;
    top: 50%;
    transform: translateY(-45px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px
}

#s0 .medal .contain .card .bg::after,
#s0 .medal .contain .card .bg::before {
    content: "AWARDS";
    display: block;
    color: #fff9ea;
    font-size: 40px;
    font-family: Montserrat-Black;
    letter-spacing: .3px
}

#s0 .medal .contain .card .scene {
    top: calc(50% - 55px);
    left: calc(50% - 55px);
    position: absolute;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center
}

#s0 .medal .contain .card #scene {
    opacity: 0
}

#s0 .medal .contain .card #scene.show {
    opacity: 1
}

#s0 .medal .contain .card .scene .tag {
    position: absolute;
    width: 110px;
    height: 110px;
    opacity: 0
}

#s0 .medal .contain.active .card .scene.hide .tag {
    animation: hide .01s
}

@keyframes hide {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

#s0 .medal .contain .card #scene .tag {
    opacity: 1
}

#s0 .medal .contain .card .scene .badge {
    position: relative
}

#s0 .medal .contain .card .scene .badge img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

#s0 .medal .contain .card .scene .badge.large {
    width: 110px;
    height: 110px;
    top: -40px
}

#s0 .medal .contain .card .scene .badge.mid {
    width: 80px;
    height: 80px;
    top: -15px
}

#s0 .medal .contain .card .scene .badge.small {
    width: 70px;
    height: 70px;
    top: 60px
}

#s0 .medal .contain .card .scene .badge.l {
    right: var(--off)
}

#s0 .medal .contain .card .scene .badge.r {
    left: var(--off)
}

#s0 .medal .contain .card .scene .badge.mid.m {
    top: 55px;
    left: 18px
}

#s0 .medal .contain .card .scene .label {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-style: italic
}

#s0 .medal .contain .card .scene .label.orange {
    font-family: Montserrat-Bold;
    color: #fff9ea;
    background-color: #f7b95a;
    border-radius: 23px;
    box-shadow: #6d966b 2px 4px;
    font-size: 18px;
    text-wrap: nowrap;
    white-space: nowrap;
    padding: 2px 15px;
    top: -57px
}

#s0 .medal .contain .card .scene .label.stroke {
    color: #6d966b;
    font-family: Montserrat-Bold;
    font-size: 18px;
    padding: 2px;
    text-wrap: nowrap;
    white-space: nowrap;
    top: 53px
}

#s0 .medal .contain .card .scene .label.thin {
    color: #6d966b;
    font-family: Montserrat-Semi;
    font-size: 16px;
    top: 105px
}

#s0 .medal .contain .card .scene .label.thin span:last-of-type {
    font-family: Montserrat-Reg;
    font-size: 12px
}

#s0 .medal .contain .card .scene .label span {
    display: block;
    text-wrap: nowrap;
    white-space: nowrap
}

#s0 .medal .contain .card .close {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 4px solid #b9d9ac;
    background-color: #fff9ea;
    position: absolute;
    cursor: pointer;
    transition: .6s;
    z-index: 1000;
    top: 20px;
    left: 20px;
    cursor: pointer
}

#s0 .medal .contain .card .close:hover {
    transform: rotate(90deg)
}

#s0 .medal .contain .card .close::after,
#s0 .medal .contain .card .close::before {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 70%;
    background-color: #b9d9ac;
    border-radius: 1.5px;
    transform-origin: center;
    left: 45%;
    top: 15%
}

#s0 .medal .contain .card .close::before {
    transform: rotate(45deg)
}

#s0 .medal .contain .card .close::after {
    transform: rotate(-45deg)
}

/* 外部容器，控制整体布局 */
#s3 {
    padding: 10px;  /* 内部间距 */
    display: flex;  /* 使用flex布局 */
    flex-direction: column;  /* 列方向布局 */
    align-items: center;  /* 居中对齐 */
    justify-content: center;  /* 垂直方向居中 */
    position: relative;  /* 相对定位 */
    text-align: center;  /* 水平居中 */
    background-size: cover; /* 确保背景图片覆盖整个元素 */
    background-position: var(--bg-position-x, center) var(--bg-position-y, 200px); /* 默认位置 */
    background-image: linear-gradient(to bottom, rgba(255, 237, 223, 0), rgba(255, 237, 223, 1)),
                      url(https://static.igem.wiki/teams/5385/home/s34bg.png);
}

/* 图片容器，便于调试图片大小和位置 */
#s3 .image-container {
    margin-bottom: 10px;  /* 图片与文本的间距 */
    position: relative;  /* 图片相对定位 */
    display: flex;
    justify-content: center;  /* 水平居中 */
}

/* 图片样式，控制图片大小和对齐 */
#s3 .custom-image {
    max-width: 25vw;  /* 使用视窗宽度单位，确保图片相对屏幕比例 */
    height: auto;  /* 保持图片比例 */
    display: block;  /* 图片为块元素 */
    transform: rotate(var(--s3-rotate, 0deg)) translateY(10%) translateX(10%); /* 旋转角度 */
}

/* 文本内容容器，控制文本部分的样式 */
#s3 .text-content {
    padding: 7px;  /* 内部间距 */
    margin-top: 5px;  /* 控制文本与其他元素的上下间距 */
    text-align: center;  /* 设置为 left、center 或 right */
    color: #ffa573;
    font-family: 'Montserrat-Black', sans-serif; /* 字体类型 */
    font-size: var(--text-size, 35px); /* 使用相对单位来控制文本大小 */
}

.text-content {
    color: #e05b53; /* 填充颜色 */
    -webkit-text-stroke: 0.5px var(--font); /* 描边颜色和宽度 */
}



/*s4龙眼动画*/
#s4 img {
    top:47px;
    position: absolute; /* 使图像重叠 */
    width: 60%; /* 根据需要调整图像宽度 */
    transform: rotate(var(--s3-rotate, -9deg)); /* 旋转角度 */
    transition: opacity 0.5s ease; /* 过渡效果 */
    z-index: 1;
}
#s4 {

    background-size: cover; /* 确保背景图片覆盖整个元素 */
    background-position: var(--bg-position-x, center) var(--bg-position-y, bottom); /* 默认位置 */
    background-image: url(https://static.igem.wiki/teams/5385/home/s34bg.png);
}

/* s4 容器样式 */
#s4 {
    position: relative;
    width: 100%; /* 宽度为100% */
    height: auto; /* 高度根据内容调整 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    /*padding: 30px 0; !* 减少上下边距 *!*/
    margin-bottom: 2%; /* 给下面的模块留出足够的空间，避免重叠 */
}

/* 图片容器 */
#s4 .image-container {
    position: relative; /* 相对定位，使得子元素可以绝对定位 */
    width: 100%; /* 图片容器宽度 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 图片之间的间距 */
    transform: translateY(-43.5vh); /* 上移图片容器 50px */
}

/* 单张图片样式 */
#s4 .image-container img {
    max-width: 55%; /* 每张图片的宽度 */
    height: auto; /* 保持图片宽高比例 */
    opacity: 0; /* 初始化图片透明度为0 */
    position: absolute; /* 图片绝对定位，便于切换 */
    transition: opacity 0.8s ease; /* 切换时的过渡效果 */
}



/* s5合照 */
#s5 {
    display: flex;
    flex-direction: column; /* 垂直排列图片和文本 */
    justify-content: flex-start; /* 确保内容从顶部开始排列 */
    align-items: center; /* 水平居中 */
    position: relative; /* 设置相对定位 */
    width: 100%; /* 宽度为100% */
    height: auto; /* 自动高度，确保内容全部可见 */
    padding: 100px 0; /* 上下增加额外空间 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* s5图片样式 */
#s5 img {
    width: var(--img-width, 75%); /* 图片宽度使用变量控制，默认75% */
    height: auto; /* 保持宽高比例 */
    /*margin-bottom: 20px; !* 图片和文本之间的间距 *!*/
    object-fit: cover; /* 确保图片内容完整显示 */
    z-index: 1; /* 确保图片层级较低 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}

/* s5文本容器 */
#s5 .text-container {
    /*padding: 20px; !* 内部间距 *!*/
    text-align: center; /* 文本居中 */
    color: var(--font); /* 文本颜色 */
    font-family: 'Montserrat-Black', sans-serif; /* 字体类型 */
    font-size: var(--text-size, 35px); /* 字体大小 */
    /*background-color: rgba(255, 255, 255, 0.85); !* 半透明背景，确保文本可读 *!*/
    border-radius: 10px; /* 圆角背景 */
    max-width: 80%; /* 限制文本容器的宽度 */
    z-index: 2; /* 提升文本容器的层级，确保位于图片上方 */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); !* 添加阴影让文本更突出 *!*/
}