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

body {
    justify-content: center;
    align-items: flex-start;
    /* 使内容从顶部开始 */
    background-color: #262c4f;
    background-image: url(https://static.igem.wiki/teams/5322/back.png);
    background-repeat: no-repeat;
    /* 不重复 */
    background-size: cover;
    /* 铺满整个元素 */
    overflow-x: hidden;
}

section {
    display: block;
    /* 确保 section 元素为块级元素 */
    width: 100vw;
    /* 确保 section 元素占满整个容器宽度 */
}

.number-container {
    font-size: 12rem;
    color: #fff9c9;
    text-align: center;
    position: relative; /* 保证伪元素相对父元素定位 */
}
.number-container::after {
    content: '';
    /* 伪元素无内容 */
    position: absolute;
    left: 40%;
    bottom: 10%;
    /* 下划线在文字的下方 */
    width: 0;
    /* 起始宽度为 0 */
    height: 16px;
    /* 下划线的粗细 */
    background-color: #fff9c9;
    /* 下划线颜色 */
    transition: width 0.5s ease-out;
    /* 过渡效果 */
}

.number-container:hover::after {
    width: 20%;
    /* 鼠标悬停时下划线展开 */
}


.navbar {
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.5);
}

@font-face {
    font-family: "Archivo Black";
    src: url('https://static.igem.wiki/teams/4225/wiki/archivoblack-regular.ttf');
}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #262c4f;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out;
}

#loading img {
    width: 180vh;
    height: 100vh;
}

#loadingText {
    position: absolute;
    bottom: 30%;
    /* 调整文字的位置 */
    z-index: 10000;
    /* 确保文字在图片之上 */
    font-size: 300%;
    font-weight: 800;
    font-family: Arial, sans-serif;
    color: #fff9c9;
    /* 根据背景图片的颜色调整文字颜色 */
}

.dots {
    display: inline-flex;
    margin-left: 0.8vw;
    /* 在文字和小圆点之间增加一点间距 */
}

.dot {
    width: 0.7vw;
    height: 0.7vw;
    background-color: #000;
    /* 调整小圆的颜色 */
    border-radius: 50%;
    margin-left: 1vw;
    /* 调整小圆点之间的距离 */
}


/* 为每个小圆点设置不同的颜色 */
#dot1 {
    background-color: #fff9c9;
}

#dot2 {
    background-color: #ffb0b1;
}

#dot3 {
    background-color: #b291eb;
}

/*------------------------------------------------------------------*/
/*  goodle fonts */
@import './google-fonts.css';

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(353, 98%, 67%);
    --first-color-alt: hsl(353, 50%, 47%);
    --gradient-color: linear-gradient(90deg, var(--first-color), var(--first-color-alt));
    --black-color: hsl(353, 90%, 16%);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat Alternates", sans-serif;
    --biggest-font-size: 2.5rem;
    --normal-font-size: .938rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}


/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
    :root {
        --biggest-font-size: 5.5rem;
        --normal-font-size: 1rem;
    }
}

.navbar {
    position: fixed;
    top: -6vh;
    padding-bottom: 1vh;
    width: 100vw;
    z-index: 1000;
    /* 确保导航栏在最上层 */
    left: 0;
    /* 确保导航栏从页面的左边开始 */
    transition: top 0.5s ease;
    /* 过渡动画 */
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.5);
}




.fixed-header {
    top: 0vh;
    left: 0;
    right: 0;
    z-index: 1000;
    ;
}



.sec1 {
    background-color: #fff9c9;
    position: relative;
    width: 100vw;
    overflow: hidden;
    /* 确保内容不会溢出 */
}


.sec1 div {
    position: absolute;
    width: 100vw;
}

.sec1 img {
    position: absolute;
    width: 100vw;
    left: -1.5vw;
}

.head {
    color: #fff;
    position: absolute;
    transform: translate(0%, 200%);
    /* 完全居中 */
    display: flex;
    top: -8vh;
    justify-content: center;
    font-size: 10vw;
    font-weight: 600;
    z-index: 8;
}

.parallax {
    position: relative;
    /* 确保 z-index 生效 */
    will-change: transform;
    /* 提升渲染性能 */
}


/*------------------------------------------------------------------*/
.duration {
    height: 25vh;
    background: linear-gradient(to bottom, #232946, #262c4f);
}

.container-2 {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 7;
}

.container-2 .text_1_1 {
    padding-left: 5vw;
    flex: 1;
    opacity: 0;
    transform: translateX(-10vw);
    font-size: 3.5vw;
    color: #fac27d;
    padding-bottom: 10vh;
}

.container-2 .text_1_2 {

    padding-left: 5vw;
    font-size: 2.5vw;
    color: #f2f0ff;
    opacity: 0;
    transform: translateX(-10vw);
}

.container-2 .content {
    flex: 1.5;
}

.container-2 .image_1 {
    flex: 1;
    align-items: center;
    /* 垂直居中对齐 */
}

.image_1 .imgs {
    position: absolute;
}

.p2_1 {
    width: 50%;
    left: 50vw;
    top: calc(20vh + 5vw);
    /* 使用calc根据屏幕宽度调整位置 */
    z-index: 2;
    opacity: 0;
    transform: translateX(20vw);
}

.p2_2 {
    width: 90%;
    left: 20vw;
    top: calc(38vh - 5vw);
    /* 使用calc调整位置 */
    z-index: 1;
    opacity: 0;
}

.p2_3 {
    width: 40%;
    right: calc(-5vw + 2vh);
    /* 根据宽高比调整位置 */
    top: calc(40vh + 15vw);
    z-index: 1;
    opacity: 0;
    transform: translateX(10vw);
}

.p2_4 {
    top: calc(50vh - 10vw);
    width: 90%;
    right: 0vw;
    opacity: 0;
}

.image_1 .ca_1 {
    width: 20%;
    bottom: calc(-10vh + 5vw);
    /* 使用calc根据屏幕宽度调整位置 */
    left: 10vw;
}

.image_1 .ca_2 {
    width: 20%;
    top: calc(0vh + 5vw);
    /* 使用calc调整位置 */
    right: 10vw;
    rotate: 30deg;
}

.image_1 .ca_3 {
    width: 20%;
    top: calc(35vh - 5vw);
    /* 使用calc调整位置 */
    right: 0vw;
}

.container-2 .box {
    position: sticky;
    top: 20vh;
    width: 80%;
    height: 500px;
    transition: 0.5s;
    margin: 10px;
    /* 设置盒子之间的间距 */
}

/*------------------------------------------------------------------*/
.pcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
}

#model-container {
    position: absolute;
    left: -25vw;
    /* 保持原来的左侧位置 */
    width: calc(100vw * 0.5);
    /* 保持相对于视口宽度的缩放 */
    height: calc(80vh);
    /* 保持与视口高度一致 */
}

#info-box {
    position: absolute;
    z-index: 30;
    width: 50vw;
    /* 保持相对于视口宽度的缩放 */
    height: 80vh;
    /* 保持原来的高度比例 */
    left: 45vw;
    /* 保持原来的左侧位置 */
    top: 20vh;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    border-radius: 10px;
    overflow-y: auto;
    font-size: calc(3vw);
    /* 动态调整字体大小，结合视口宽度和高度 */
    opacity: 1;
}

#info-box h2 {
    font-size: calc(3vw);
}

.label {
    position: absolute;
    display: inline-block;
    pointer-events: auto;
}

.label-circle {
    width: calc(3vw + 1vh);
    /* 动态调整圆圈大小 */
    height: calc(3vw + 1vh);
    background-color: white;
    color: black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(1vw + 0.5vh);
    /* 动态调整字体大小 */
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.description-box {
    position: absolute;
    top: calc(4vh + 1%);
    /* 动态调整描述框的位置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: calc(0.5vh + 0.5vw);
    /* 动态调整内边距 */
    border-radius: 5px;
    font-size: calc(1vw + 0.5vh);
    /* 动态调整字体大小 */
    white-space: nowrap;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
}

@media (max-width: 768px) {
    .pcontainer {
        flex-direction: column;
        /* 竖向排列 */
        height: auto;
        /* 允许高度自动调整 */
    }

    #model-container {
        position: absolute;
        top: calc(-10vh - 20vw);
        /* 结合视口高度和宽度动态计算top值 */
        left: calc(5vw - 2vh);
        /* 结合视口宽度和高度动态计算left值 */
    }

    #info-box {
        position: absolute;
        z-index: 30;
        top: 40vh;
        width: 50vw;
        /* 保持相对于视口宽度的缩放 */
        height: 80vh;
        /* 保持原来的高度比例 */
        left: 30vw;
        /* 保持原来的左侧位置 */
        background-color: rgba(0, 0, 0, 0);
        color: white;
        border-radius: 10px;
        overflow-y: auto;
        font-size: calc(3vw);
        /* 动态调整字体大小，结合视口宽度和高度 */
        opacity: 1;
    }
}

/*------------------------------------------------------------------*/
.container-4 {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 7;
    flex-wrap: wrap;
    /* 允许在小屏幕上换行 */
}

.container-4 .text_2_1 {
    text-align: right;
    line-height: calc(2.5vw + 1vh);
    /* 动态调整行高 */
    padding-right: calc(5vw + 2vh);
    /* 动态调整右侧内边距 */
    padding-top: calc(15vh + 5vw);
    /* 动态调整顶部内边距 */
    flex: 1;
    opacity: 0;
    transform: translateY(calc(20vw + 10vh));
    /* 动态调整初始位置 */
    font-size: calc(2.5vw + 1vh);
    /* 动态调整字体大小 */
    color: #fff9c9;
    padding-bottom: calc(10vh + 5vw);
    /* 动态调整底部内边距 */
}

.container-4 .image_2 {
    flex: 1;
    /* 允许图片容器占据适当的空间 */
}

.p4_1 {
    width: calc(80% + 10vw);
    /* 动态调整图片宽度 */
    top: calc(15vh + 5vw);
    /* 动态调整图片位置 */
    left: calc(-15vw);
    /* 动态调整左侧位置 */
    opacity: 0;
    transform: translateY(calc(-30vh - 10vw));
    /* 动态调整初始位置 */
}

.image_2 .imgs {
    position: absolute;
}

.image_2 .ca_1 {
    width: calc(20% + 2vw);
    /* 动态调整胶囊大小 */
    left: calc(75vw - 10vw);
    /* 动态调整左侧位置 */
    top: calc(30vh + 5vh);
    /* 动态调整顶部位置 */
    rotate: 60deg;
}

.image_2 .ca_2_1 {
    width: calc(20% + 2vw);
    /* 动态调整胶囊大小 */
    left: calc(60vw - 5vw);
    /* 动态调整左侧位置 */
    top: calc(20vh + 3vh);
    /* 动态调整顶部位置 */
}

.image_2 .ca_2_2 {
    width: calc(20% + 2vw);
    /* 动态调整胶囊大小 */
    left: calc(75vw - 10vw);
    /* 动态调整左侧位置 */
    top: calc(0vh + 2vh);
    /* 动态调整顶部位置 */
    rotate: 30deg;
}

.image_2 .ca_3 {
    width: calc(20% + 2vw);
    /* 动态调整胶囊大小 */
    left: 0vw;
    /* 动态调整左侧位置 */
    top: calc(60vh + 10vh);
    /* 动态调整顶部位置 */
}


/*------------------------------------------------------------------*/
.container-5 {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 7;
    margin-top: 50vh;
    padding-bottom: 100vh;
}

.container-5 .text {
    position: absolute;
}

.container-5 .text_5_1 {
    top: 0vh;
    left: 20vw;
    font-size: 8vw;
    color: #fac27d;
}

.container-5 .text_5_2 {
    top: 0vh;
    left: 20vw;
    font-size: 8vw;
    color: #fff9c9;
    opacity: 0;
}

.container-5 .text_5_3 {
    top: 20vh;
    left: 40vw;
    font-size: 6vw;
    color: #fff;
    opacity: 0;
}

#model-container-2-1 {
    width: 100vw;
    /* 设置容器宽度 */
    height: 100vh;
    /* 设置容器高度 */
    position: absolute;
    top: -100vh;
    /* 距离顶部 50% */
    left: -30vw;
    /* 距离左侧 50% */
}

#model-container-2-2 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -100vh;
    /* 控制位置 */
    left: 30vw;
}

#model-container-cap-1 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -90vh;
    /* 控制位置 */
    left: 25vw;
}

#model-container-cap-2 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -85vh;
    /* 控制位置 */
    left: 27vw;
}

#model-container-cap-3 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -80vh;
    /* 控制位置 */
    left: 23vw;
}

#model-container-cap-4 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -75vh;
    /* 控制位置 */
    left: 26vw;
}

#model-container-cap-5 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -76vh;
    /* 控制位置 */
    left: 24vw;
}

#model-container-cap-6 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -83vh;
    /* 控制位置 */
    left: 22vw;
}

#model-container-cap-7 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 20vh;
    /* 控制位置 */
    left: 26vw;
}

#model-container-cap-8 {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: -81vh;
    /* 控制位置 */
    left: 24vw;
}


/*------------------------------------------------------------------*/

.sec6 {
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
}

.container-6 {
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
    z-index: 7;
    padding-bottom: 10vh;
    overflow: hidden;
    margin: 10px auto;
}


.carousel {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* 添加平滑过渡效果 */
    transform: translateX(0);
    /* 初始状态不偏移 */
}

.image_6 {
    width: 100%;
    flex: 1 0 100%;
    /* 每个 .image_6 占据 100% 宽度 */
    display: flex;
    justify-content: space-between;
    /* 使图片和文字分别位于左右 */

    align-items: center;
    /* 垂直居中 */
}

.image_6 .imgs {
    position: absolute;
    width: 60%;
    height: auto;
    display: block;
    /* 确保图片按比例显示 */
}

.image_6 .img2 {
    width: 500px;
    height: 300px;
}

.image_6 .img3 {
    width: 500px;
    height: 300px;
}

.container-6 .carousel .image_6 .text_6_1 {
    text-align: right;
    /* 文字左对齐 */
    max-width: 50vw;
    /* 限制文字部分的最大宽度为视口宽度的50% */
    line-height: 2.5vw;
    padding-right: 5vw;
    flex: 5;
    font-size: 2.5vw;
    color: #fff9c9;
}


.container-6 .carousel .image_6 .content {
    flex: 1;
    width: 50%;
    /* 文字部分占50%的宽度 */
    text-align: right;
    /* 文字右对齐 */
    padding-right: 5vw;
    /* 给文字部分一些内边距 */
    max-width: 50vw;
    /* 确保文字部分不超过50%的宽度 */
}





.indicator {
    position: absolute;
    bottom: 10px;
    z-index: 99px;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
}

.indicator span {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 0 5px;
}

.indicator span.active {
    background-color: #b291eb;
}

.circle {
    width: 3vw;
    /* 圆形的直径 */
    height: 3vw;
    background-color: #b291eb;
    /* 圆形的颜色 */
    border-radius: 50%;
    /* 使元素成为圆形 */
    position: relative;
    /* 允许自由定位 */
    opacity: 0;
}

.circle1 {
    top: 20vh;
    left: 30vw;
}

.circle2 {
    top: 25vh;
    left: 27vw;
}

.sod_2_l {
    opacity: 0;
}

.sod_2_r {
    opacity: 0;
}




.sod_3_l {
    width: 50%;
    opacity: 0;
    z-index: -5;
}

.sod_3_r {
    width: 50%;
    opacity: 0;
    z-index: -5;
}

.circle3 {
    top: 5.5vh;
    left: 13vw;
}

.circle4 {
    top: 5.5vh;
    left: 8vw;
}

.circle5 {
    top: 5.5vh;
    left: 0vw;
}

.circle6 {
    top: 5.6vh;
    left: 8vw;
}

.circle7 {
    top: 5.5vh;
    left: 13vw;
}

.circle8 {
    top: 5.6vh;
    left: 8vw;
}

/*------------------------------------------------------------------*/
.container-7 {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 7;
    padding-bottom: 45vh;
    overflow: hidden;
    /* 隐藏溢出部分 */
}

.container-7 .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fac27d;
    /* 黄色背景色 */
    clip-path: polygon(0% 30%, 100% 50%, 100% 50%, 0% 70%);
    /* 左宽右窄的梯形 */
    z-index: 1;
    /* 确保背景在文字下方 */
    transform-origin: right center;
    /* 设置旋转中心为右侧中点 */
    transition: transform 0.3s ease-out;
    /* 平滑的旋转效果 */
    pointer-events: none;
    /* 防止背景干扰鼠标事件 */
}

.container-7 .text {
    position: relative;
    padding-top: 40vh;
    z-index: 10;
    /* 确保文字在背景之上 */
}

.container-7 .text_7_1 {
    font-size: 4vw;
    color: #ffffff;
    mix-blend-mode: difference;
}


/*------------------------------------------------------------------*/

.container-8 {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 7;
    background-image: url("{{ url_for('static', filename='img/wiki-video/1.png') }}");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* 设置明确高度 */
    padding-top: 0; /* 去掉padding-top */
    margin-bottom: 0vh;
}

.video_8 {
    position: relative;
    width: 60%;
    height: 60%; /* 或其他合适的高度 */
    z-index: 10;
    border: 10px solid #fff9c9;
    border-radius: 8px;
}


.image_8 .imgs {
    position: absolute;
}

.image_8 .ca_1 {
    width: 20%;
    left: 10vw;
    top: 55vh;
    z-index: 9;
}

.image_8 .ca_2 {
    width: 20%;
    left: 70vw;
    top: 10vh;
    rotate: 60deg;
    z-index: 11;
}