.banner-text h1 {
    font-size: clamp(2rem, 6.5vw, 10em);
    margin: 0;
    padding: 0;
}

.banner-text img {
    width: clamp(2rem, 6.5vw, 10em);
    height: auto;
    flex-shrink: 1;
    min-width: 4vw;
}

.main {
    position: relative;
    padding: 70px 60px 50vh 40px;
    width: 100vw;
    display: flex;
    background-color: #efebec;
    min-height: calc(100vh - 302px);
    /* 减去banner高度 */
    gap: 5%;
    /* sidenav和paper之间的间距 */
    background-image: linear-gradient(to top, #6285DD 70%, #EFEBEC);
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 0;
}

/* .main::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100vw;
    min-height: 200vw;
    background-image: url('https://static.igem.wiki/teams/5858/images/ihp/tenwanv2.webp');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
} */

.main::after {
    content: "";
    position: absolute;
    top: 5%;
    left: 60%;
    width: 75%;
    height: 75%;
    background-image: url('https://static.igem.wiki/teams/5858/images/ihp/tenwanwanwan.svg');
    background-size: 20% auto;
    background-position: top center;
    background-repeat: repeat-y;
    z-index: 1;
    pointer-events: none;
    transform: translateX(-50%);
}

/*侧边栏样式 */
.sidenav {
    position: sticky;
    top: 15vh;
    /* 距离视口顶部 20px 开始粘住，可自行调整 */
    align-self: flex-start;
    margin-top: 20px;
    width: 20%;
    max-width: none;
    height: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;

}

/* 侧边栏导航样式 */
.sidenav .sidenav-content {
    padding: 40px 40px 40px 40px;
    position: relative;
    /* 改为相对定位 */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 1;
    background-color: #838bc5;
    border-radius: 16px;
    max-height: 80vh;
    border: 5px solid #e6b846;
}

/* 1. 滚动条整体区域 */
.sidenav-content::-webkit-scrollbar {
    width: 6px;
    /* 默认细线 */
    transition: width .2s;
    /* 悬停时平滑变宽 */
}

/* 2. 滑块本身 */
.sidenav-content::-webkit-scrollbar-thumb {
    background: rgba(174, 108, 235, 0.5);
    border-radius: 3px;
}

/* 3. 滑块悬停/拖动状态 */
.sidenav-content:hover::-webkit-scrollbar {
    width: 10px;
    /* 悬停时稍宽，便于拖拽 */
}

.sidenav-content::-webkit-scrollbar-thumb:hover {
    background: rgba(174, 108, 235, 0.8);
}

/* 4. 轨道（背景槽）保持隐形 */
.sidenav-content::-webkit-scrollbar-track {
    background: transparent;
}

/* 5. Firefox 纯 CSS 兜底 */
@supports (scrollbar-width: thin) {
    .sidenav-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(174, 108, 235, 0.5) transparent;
    }

    .sidenav-content:hover {
        scrollbar-color: rgba(174, 108, 235, 0.8) transparent;
    }
}

.sidenav h3 {
    margin: 15px 0 10px 0;
}

.sidenav ul {
    list-style: none;
    opacity: 1;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.sidenav li {
    margin: 15px 0;
}

.sidenav a {
    color: #434349;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.1em;
}

.sidenav a.highlight {
    color: #FFFFFF
        /* 高亮时文字颜色 */
    ;
    font-weight: bold;
    /* 高亮时文字加粗 */
}

.sidenav a:hover {
    color: #FFFFFF;

}

.sidenav-content {
    position: relative;
}

.sidenav-top {
    position: absolute;
    top: -5vh;
    right: -9vh;
    z-index: 0;
    width: 25vh;
    pointer-events: none;
    /* 防止遮挡点击 */
}

.sidenav-bottom {
    position: absolute;
    top: calc(100% - 26vh *1.26* 0.3);
    left: -7vh;
    z-index: 1;
    width: 28vh;
    pointer-events: none;
}

.sub-menu.collapsed {
    max-height: 0;
    opacity: 0;
}

/* 主内容区样式 */
.paper-content {
    z-index: 2;
    min-height: 100%;
    width: 75%;
    overflow: visible;
}

ul.sub-menu p.no-indent {
    margin: 0;
    margin-left: -20px;
    /* 负边距抵消ul的padding-left */
}

:target {
    scroll-margin-top: 160px;
}

.paper {
    background-color: transparent;
    z-index: 2;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.paper h2 {
    opacity: 0;
}

.paper section::before {
    opacity: 0;
}

.paper .section-divider::before {
    display: none
}

.section {
    position: relative;
    width: 100%;
    min-height: 150px;
    margin: 3vw 0;
}

#section5 {
    position: relative;
    width: 100%;
    min-height: 150px;
}

.more_information_ihp {
    position: absolute;
    left: 30%;
    /* 水平右移自身宽度一半 */
    top: -20px;
    /* 向上提 20 px */
    transform: translateX(-50%);
}


#sub2-1,
#sub2-2,
#sub3-1,
#sub3-2,
#sub3-3,
#sub3-4,
#sub4-1,
#sub4-2,
#sub4-3,
#sub4-4,
#sub4-5,
#sub4-6,
#sub4-7,
#sub4-8,
#sub5-1,
#sub5-2,
#sub5-3,
#sub6-1,
#sub6-2,
#sub6-3 {
    position: relative;
    /* 让卡片以它为包含块 */
}

#sub2-1 .info-card {
    position: absolute;
    top: -2vw;
    left: 50%;
    /* 先放到小节中轴 */
    transform: translateX(-60%);
    /* 再向右偏 20 px */
    margin: 0;
    /* 去掉以前的 auto */


}

#sub3-3 .info-card,
#sub4-3 .info-card,
#sub4-7 .info-card,
#sub5-3 .info-card {
    position: absolute;
    top: 20px;
    /* 保持你原来的垂直偏移 */
    left: 50%;
    /* 先放到小节中轴 */
    transform: translateX(-72%);
    /* 再向右偏 20 px */
    margin: 0;
    /* 去掉以前的 auto */
}

#sub2-2 .info-card,
#sub3-4 .info-card,
#sub4-4 .info-card,
#sub4-8 .info-card,
#sub6-1 .info-card {
    position: absolute;
    top: -20px;
    /* 保持你原来的垂直偏移 */
    left: 50%;
    /* 先放到小节中轴 */
    transform: translateX(70%);
    /* 再向右偏 20 px */
    margin: 0;
    /* 去掉以前的 auto */

}

#sub3-1 .info-card,
#sub4-1 .info-card,
#sub4-5 .info-card,
#sub5-1 .info-card,
#sub6-2 .info-card {
    position: absolute;
    top: -20px;
    /* 保持你原来的垂直偏移 */
    left: 50%;
    /* 先放到小节中轴 */
    transform: translateX(-68%);
    /* 再向右偏 20 px */
    margin: 0;
    /* 去掉以前的 auto */
}

#sub3-2 .info-card,
#sub4-2 .info-card,
#sub4-6 .info-card,
#sub5-2 .info-card,
#sub6-3 .info-card {
    position: absolute;
    top: -20px;
    /* 保持你原来的垂直偏移 */
    left: 50%;
    /* 先放到小节中轴 */
    transform: translateX(65%);
    /* 再向右偏 20 px */
    margin: 0;
    /* 去掉以前的 auto */
}

/* 1. 卡片本身继续当定位盒子 */
.info-card {
    position: relative;
    width: 30vw;
    height: 14.2vw;
    cursor: pointer;
    display: flex;
    /* 新增 */
    align-items: center;
    /* 垂直居中 */
    padding: 0 5vw 0 6vw;
    /* 左右空出，防止贴边 */
    box-sizing: border-box;
}

/* 2. 前景层：真正装内容，不再 absolute */
.info-front {
    position: relative;
    /* 去掉 absolute */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    /* 点击事件仍穿透到卡片 */
    z-index: 3;
}

/* 3. 文字块：不再 absolute，正常流 */
.info-txt {
    max-width: 80%;
    margin: 0 0.5vw;
    height: 20%;
    padding-left: 1em;
    padding-top: 1em;
    /* 添加这行 *
    /* 给头像留空，避免文字太长 */
}

.info-txt .name {
    margin: 0 0;
    font-size: 1.5vw;
    font-weight: bold;
    padding-bottom: 0;
    color: #fff;
    text-align: left
}

.info-txt .org {
    /* margin: 0; */
    font-size: 1.1vw;
    color: #eee;
    text-align: left
}


/* 圆形头像 */
.info-avatar {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    overflow: hidden;
    border: 0.3vw solid #fff;
    flex-shrink: 0;
    margin: 0 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.info-avatar img {
    width: 100%;
    margin: 0;
    transform: scale(1.8)
}

#hongxun {
    background-color: #fff;
}

/* #hongxun img {
    padding-top: 1vw;
} */

#yang img,
.dao img,
.ze img {
    /* padding-top: 1vw; */
    transform: scale(1.3)
}

.ze img {
    padding-top: 1vw;
}

.tang img {
    padding-top: 3vw;
}

.li img {
    padding-top: 2.5vw;
    scale: 1.4;

}

.chen img {
    padding-bottom: 0.5vw;
    padding-left: 0.5vw;
    scale: 2;
}

/* #dao {
    background-color: #fff;
} */
.wu img {
    /* padding-top: 2.5vw; */
    scale: 0.6;
}

.wu {
    background-color: #e3cbe1;
}

.info-card:hover .info-avatar {
    transform: scale(1.05)
}

/* 背景图层 */
.info-bg.f1 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(https://static.igem.wiki/teams/5858/images/ihp/f1.svg) center/cover no-repeat;
    transition: filter .3s;
}

.info-bg.f2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(https://static.igem.wiki/teams/5858/images/ihp/f3.svg) center/cover no-repeat;
    transition: filter .3s;
}

.info-bg.f3 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(https://static.igem.wiki/teams/5858/images/ihp/f2.svg) center/cover no-repeat;
    transition: filter .3s;
}

.info-bg.f4 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(https://static.igem.wiki/teams/5858/images/ihp/f4.svg) center/cover no-repeat;
    transition: filter .3s;
}


.info-card:hover .info-bg {
    filter: grayscale(100%) brightness(0.7)
}

/* ===== 弹窗 ===== */
/*=========  大  可  滚  动  弹  窗  =========*/
.info-modal {
    position: fixed;
    inset: 0;
    /* 全屏遮罩 */
    display: flex;
    align-items: flex-start;
    /* 垂直居中 */
    justify-content: center;
    padding-top: 15vh;
    /* 水平居中 */
    background: rgba(0, 0, 0, .65);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.info-modal.show {
    opacity: 1;
    pointer-events: auto;
}

/* 真正装内容的盒子 */
.info-modal-inner {
    position: relative;
    background: #fff;
    border-radius: 24px;
    width: 85%;
    /* 再给一个上限 */
    max-height: 80vh;
    /* 视口高 90% */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
    /* 自己不要出现滚动条 */
}

/* 关闭按钮 */
.info-close {
    position: absolute;
    top: 2%;
    right: 1.5%;
    font-size: 4vw;
    cursor: pointer;
    color: #666;
    z-index: 10;
}

.info-close:hover {
    color: #000
}

/* 可滚动内容区 */
.info-body {
    flex: 1;
    /* 撑满剩余高度 */
    overflow-y: auto;
    /* 太多就卷 */
    padding: 50px 40px 30px;
    /* 上边留空给关闭按钮 */
}

.sub5-4 {
    background-color: #f0e7d8;
    border-radius: 40px;
    padding: 40px;
    padding-left: 80px;
    padding-right: 80px;
}

#sub1-1 {
    background-color: #f0e7d8;
    border-radius: 40px;
    padding: 40px;
    padding-left: 80px;
    padding-right: 80px;
    margin-bottom: 20vh;
}

.simplebox {
    background-color: #f0e7d8;
    border-radius: 40px;
    padding: 40px;
    padding-left: 80px;
    padding-right: 80px;
    margin-bottom: 5vh;
}

a.highlight {
    color: #7030a0;
    font-weight: bold;
}

i.highlight {
    color: #7030a0;
    font-weight: bold;
}

.pointlist {
    margin-left: 0px;
    padding-left: 0px;
}

.pointlist li {
    position: relative;
    margin-bottom: 10px;
    margin-left: 40px;
}

.pointlist li::before {
    position: absolute;
    left: -40px;
    top: 3px;
    content: '';
    width: 25px;
    height: 25px;
    background-image: url('https://static.igem.wiki/teams/5858/images/template/pointlist.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

ul.c2r1_figure_list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

ul.c2r1_figure_list>div,
ul.c2r1_figure_list>img {
    box-sizing: border-box;
    width: 50%;
    padding: 10px;
    text-align: center;
}

ul.c2r1_figure_list img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

ul.c3r1_figure_list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

ul.c3r1_figure_list>div,
ul.c3r1_figure_list>img {
    box-sizing: border-box;
    width: 33%;
    padding: 10px;
    text-align: center;
}

ul.c3r1_figure_list img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}



.more_information {
    width: 100%;
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 20px auto 20px;
    padding-top: 42px;
}

.more_information .on {
    position: absolute;
    left: -3px;
    top: 0;
    content: '';
    width: 112px;
    height: 42px;
    background-image: url('https://static.igem.wiki/teams/5858/images/inclusivity/on.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
}

.more_information .off {
    position: absolute;
    left: -3px;
    top: 0;
    content: '';
    width: 112px;
    height: 42px;
    background-image: url('https://static.igem.wiki/teams/5858/images/inclusivity/off.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}

.more_information .turn {
    position: absolute;
    left: -28px;
    top: 0;
    content: '';
    width: 112px;
    height: 42px;
    background-image: url('https://static.igem.wiki/teams/5858/images/inclusivity/turn.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: left .35s ease;
    cursor: pointer;
}

.more_information .turn:hover {
    filter: brightness(120%);
}

/* .more_information .content {
    display: block;
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
    transition: opacity .25s ease;
} */

.more_information .content {
    overflow: hidden;
    max-height: 0;
    padding-left: 30px;
    padding-right: 30px;
    opacity: 0;
    transition: max-height .6s ease, opacity .4s ease;
}

.more_information:not(.folded) .content {
    max-height: 20000px;
    /* 比你任何一块实际内容都大即可 */
    padding-top: 20px;
    padding-bottom: 20px;
    opacity: 1;
}

.more_information::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0px;
    width: 95%;
    height: 21px;
    background-color: #9c91b9;
    border-radius: 21px;
    transition: height .35s ease, border-radius .35s ease;
}

.more_information.folded::before {
    content: 'click to see more';
    position: absolute;
    right: 0;
    top: 0px;
    width: 95%;
    height: 42px;
    background-color: #9c91b9;
    border-radius: 42px;
    text-align: center;
    line-height: 42px;
    font-size: 1.5em;
    font-family: 'Arima Madurai';
    color: #fff;
}

a.link {
    color: #7030a0;
    font-weight: bold;
    font-style: italic;
}

a.link:hover {
    text-decoration: underline;
}

.quote-box {
    background-color: #f0f0f0;
    /* 灰色背景 */
    border-radius: 10px;
    /* 圆角 */
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 轻微阴影增加层次感 */
    font-family: 'Crimson Text', serif;
    font-style: italic;
}

.quote-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.quote-author {
    float: right;
    font-weight: bold;
    font-style: normal;
    clear: both;
    margin-top: -20px;
}

.info-modal-inner img {
    max-width: 70%;
    max-height: 55vh;
}

.paper img.large {
    max-width: 90%;
    max-height: 120vh;
}