body {
    padding-top: 56px;
    background-color: white;
}

.left-aligned {
    margin-left: auto;
}

.bg-dark {
    background-color: #343a40 !important;
}

/* loading page */
#loading-body {
    position: fixed;
    top: 10px;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    box-sizing: border-box;
    font-family: "Lucida Blackletter";
}

.loading-page {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-page span {
    position: relative;
    width: 250px;
    height: 250px;
    background-color: #eaeef0;
    border: 6px solid #eaeef0;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
}

.loading-page span::before {
    content: '';
    position: absolute;
    inset: 40px;
    background-image: url("https://static.igem.wiki/teams/4644/wiki/loadinglogo.png");
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 1),
    8px 8px 25px rgba(0, 0, 0, 0.25),
    inset 3px 3px 10px rgba(0, 0, 0, 0.1), inset -1px -1px 15px rgba(255, 255, 255, 1);
    border: 2px solid #eaeef0;
    z-index: 1;
}

.loading-page span i {
    position: absolute;
    inset: 0;
    background: linear-gradient(darkred, pink);
    border-radius: 50%;
    filter: blur(5px);
    animation: animate 2s linear infinite;
}

.loading-text {
    position: absolute;
    top: 100%; /* 让top属性等于span的高度，将文本放在span正下方 */
    transform: translate(-50%, 0); /* 使用transform属性水平居中文本 */
    left: 50%; /* 将文本的左侧对齐到父元素的中心 */
    width: 340px;
    text-align: center; /* 文本居中对齐 */
}

.loading-text p {

    font-weight: normal;
    font-size: 2em;
    color: rgba(138, 47, 52, 1);
}

/*
.loading-text {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    animation: animateText 20s linear infinite;
}

.loading-text b {
    position: absolute;
    display: block;
    left: 50%;
    transform-origin: 0 170px;
    font-weight: normal;
    font-size: 1.8em;
}
*/
/* progress-bar */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: transparent;
    z-index: 9999;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(to right, darkred, lightpink);
    transition: width 0.3s ease, background 0.3s ease;
}

/* homepage */
.home-container {
    background-color: #edecda;
    width: 100%;
    overflow: hidden;
}

.comic img {
    margin-top: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.mascot {
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.mascot img {
    width: 350px;
    height: auto;
}

.mascot.img-show {
    transform: translateX(0);
}

.head-item-icon {
    display: inline-block;
}

.head-item-icon img {
    width: 1.5em;
    height: auto;
    padding: 5px;
}

.head-item-title {
    display: inline-block;
}

.home-link {
    transform: translateX(100%);
    transition: transform 1s ease;
}

.home-link.link-show {
    transform: translateX(0);
}

.home-link a {
    text-decoration: none;
    color: white;
    font-size: 2em;
    font-weight: 700;
    border-radius: 10px;
    background-color: rgba(138, 47, 52, 1);
    box-shadow: 0 0 2px 2px rgba(138, 47, 52, 1);
    border-color: transparent;
    border-style: solid;
    padding: 4px;

}

.home-link a:hover {
    background-color: rgba(241, 153, 151, 1);
    box-shadow: 0 0 2px 2px rgba(241, 153, 151, 1);
}

.home-link li {
    list-style: none;
    margin-top: 20px;
}

.home-link ul {
    padding-left: 0;
}

/* header*/
.header-implementation {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-19.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-es {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-18.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-collaboration {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-17.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-part {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-16.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-si {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-5.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-partnership {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-11.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-communication {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-10.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-team {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-9.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-model {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-14.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-education {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-8.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-home {
    background: url("https://static.igem.wiki/teams/4644/wiki/bg2.jpg");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-safety {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-13.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    background-attachment: fixed;
}

.header-hp {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-6.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-members {
    background: linear-gradient(25deg, #bb001a, #c55248, #c98078, #c3aaab);
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-attributions {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-2.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-description {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-3.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-design {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-4.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-notebook {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone.webp");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header-results {
    background: url("https://static.igem.wiki/teams/4644/wiki/duotone-12.png");
    width: 100%;
    height: calc(100vh - 56px);
    background-size: cover;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.header {
    background-size: 200% 200%;
    background: radial-gradient(circle at left top, rgba(139, 0, 0, 0.9), pink);
    height: calc(100vh - 56px);
    width: 100%;
    margin-bottom: 3rem;
    background-attachment: fixed;
}

.head-title {
    font-size: 6vw;
    color: rgba(255, 255, 255, 0.50);
    font-family: "Gill Sans MT";
    background-image: url("https://static.igem.wiki/teams/4644/wiki/water-red.png");
    width: 100%;
    height: auto;
    text-transform: uppercase;
    letter-spacing: 8px;
    -webkit-background-clip: text;
    font-weight: 500;
    animation: wave 25s linear infinite;
    display: inline-block;

}

.head-title2 {
    font-size: 6vw;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Gill Sans MT";
    font-weight: 500;
    display: inline-block;
    width: 100%;
    height: auto;
    text-transform: uppercase;
    letter-spacing: 8px;
}

/* CALLOUT */
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.bd-callout h4 {
    margin-bottom: .25rem;
}

.bd-callout p:last-child {
    margin-bottom: 0;
}

.bd-callout code {
    border-radius: .25rem;
}

.bd-callout + .bd-callout {
    margin-top: -.25rem;
}

.bd-callout-info {
    border-left-color: #5bc0de;
}

.bd-callout-warning {
    border-left-color: #f0ad4e;
}

.bd-callout-danger {
    border-left-color: #d9534f;
}

/* footer */
.footer {
    background: linear-gradient(125deg, darkred, pink);
    animation: bgAnimation 10s linear infinite;
    background-size: 200%;
    font-family: sans-serif;
    color: white;
}

footer a {
    color: darkred;
    font-weight: bold;
    text-decoration: none;
}

footer a:hover {
    color: rgba(241, 153, 151, 1);
    text-decoration: underline;
}

.about {
    margin-left: 40px;
}

.detail {

}

.sponsor img {
    margin-top: 10px;
    width: 120px;
    height: auto;
}

/* Navbar*/
.navbar-custom {
    background-color: white;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, .15);
}

.navbar-toggler {
    background-color: #6a1a21;
    border-radius: 50%;
    padding: 0;
    font-size: 1em;
}

.collapse {
    margin-right: 3.25vw;
}

.nav-link {
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 1.2em;
    margin: 0 10px;
    padding: 0.5em 0.5em;
    color: rgba(138, 47, 52, 1);
    border: 0.15em solid white;
    border-radius: 2em;
    transition: 3s;
}

.nav-link:before,
.nav-link:after {
    content: '';
    position: absolute;
    top: -1.5em;
    z-index: -1;
    width: 200%;
    aspect-ratio: 1;
    border: none;
    border-radius: 40%;
    background-color: rgba(241, 153, 151, 0.25);
    transition: 3s;
}

.nav-link:before {
    left: -80%;
    transform: translate3d(0, 5em, 0) rotate(-340deg);
}

.nav-link:after {
    right: -80%;
    transform: translate3d(0, 5em, 0) rotate(390deg);
}

.nav-link:hover,
.nav-link:focus {
    color: white;
}

.nav-link:hover:before,
.nav-link:hover:after,
.nav-link:focus:before,
.nav-link:focus:after {
    transform: none;
    background-color: rgba(241, 153, 151, 0.75);
}

.dropdown-menu {
    display: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dropdown-menu a {
    color: rgba(138, 47, 52, 1);
    font-size: 18px;
    font-weight: bold;
}

.dropdown-menu a:hover {
    color: rgba(241, 153, 151, 1);
    font-weight: bolder;
    background-color: transparent !important;
}

/* sidenav */

.sidenav {
    align-self: flex-start;
    text-align: left;
    position: sticky;
    top: 100px;
    line-height: 2vw;
    padding-top: 2rem;
    width: 100%;
}

.sidenav li {
    margin-top: 0.5vw;
    list-style: none;
}

.sidenav a {
    text-decoration: unset;
    display: block;
    color: darkred;
    font-size: 1.25vw;
    font-weight: bold;
}

.sidenav a:hover {
    color: rgba(241, 153, 151, 1);
}

.sidenav .sidenav-header {
    background: linear-gradient(45deg, darkred, pink);
    -webkit-background-clip: text;
    color: transparent;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2vw;
    margin-bottom: 1vw;
}

.sidenav ul li a {
    position: relative;
}

.sidenav ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, darkred, pink); /* 渐变样式 */
    transition: width 0.5s ease; /* 过渡效果 */
}

.sidenav ul li a.active:after {
    width: 100%;
}

.main-text {
    padding: 2em;
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 3em;
}

h2 {
    text-align: center;
    font-size: 3vw;
    color: rgba(138, 47, 52, 1);
    margin-bottom: 1vw;
    font-weight: bolder;
    text-shadow: 0.2rem 0.2rem rgba(241, 153, 151, 0.5);
}

.main-content h3 {
    color: rgba(138, 47, 52, 1);
    font-size: 2.25vw;
    text-shadow: 0.25rem 0.25rem 0.25rem pink;
    font-weight: bold;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.main-content h4 {
    color: rgba(138, 47, 52, 1);
    font-weight: bold;
}

.main-content p {
    text-indent: 2.4em;
    color: #000;
    font-size: 1.2rem;
    font-weight: normal;
    font-family: unset;
    line-height: 2rem;
    margin-bottom: 0.8vw;
    text-align: justify;
}

/* description */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.des-img img {
    width: 60%;
    height: auto;
}

/* members */
.group-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: grid;
    grid-template-rows: 500px 200px;
}

.photo-box {
    /*  将容器放置在第一行，其高度为第一行的高度 */
    grid-row: 1 / 2;
    /*  将容器放置在第一列，其宽度为第一到第八列的宽度 */
    grid-column: 1 / 8;
    width: 100vw;
    height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 设置 3D 转换，以便于创建立体效果 */
    transform-style: preserve-3d;
    /* 定义立体效果的观察距离 */
    perspective: 800px;
    /*  定义容器内包含的元素数量 */
    --items: 5;
    /* 定义容器内居中显示的元素 */
    --middle: 3;
    /* 定义容器内当前位置的元素 */
    --position: 1;
}

.group-picture {
    position: absolute;
    width: 600px;
    height: 400px;
    /* 定义一个 CSS 变量 --r 的值为 var(--position) - var(--offset) */
    --r: calc(var(--position) - var(--offset));
    /* 定义变量 --abs 的值为 var(--r) * -1 和 var(--r) 中的最大值 */
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.6s ease;
    /* 旋转-10deg*var(--r)角度,并向x轴负方向平移-330px*var(--r) */
    transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-330px * var(--r)));
    /* 使当前的图片位于最前面 */
    z-index: calc((var(--position) - var(--abs)));
    background-size: cover;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    border: rgb(138, 47, 52) 10px solid;
    border-radius: 5px;
}

.custom-radio {
    /* 移除默认的radio按钮外观 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid rgba(138, 47, 52, 1); /* 设置radio按钮的边框 */
    border-radius: 50%; /* 使radio按钮呈圆形 */
    width: 20px; /* 设置radio按钮的宽度 */
    height: 20px; /* 设置radio按钮的高度 */
    background-color: #fff; /* 设置radio按钮的背景颜色 */
    margin-right: 10px; /* 可选：增加按钮之间的间距 */
}

.custom-radio:checked {
    background-color: rgba(241, 153, 151, 1); /* 选中状态时改变背景颜色 */
    border: 2px solid rgba(241, 153, 151, 1); /* 选中状态时改变边框颜色 */
    /* 可添加其他样式以表示选中状态 */
}


.photo-box .group-picture:nth-of-type(1) {
    --offset: 1;
    background-image: url('https://static.igem.wiki/teams/4644/wiki/groupbnu.jpg');
}

.photo-box .group-picture:nth-of-type(2) {
    --offset: 2;
    background-image: url('https://static.igem.wiki/teams/4644/wiki/group2.jpg');
}

.photo-box .group-picture:nth-of-type(3) {
    --offset: 3;
    background-image: url('https://static.igem.wiki/teams/4644/wiki/group-photo.jpg');
}

.photo-box .group-picture:nth-of-type(4) {
    --offset: 4;
    background-image: url('https://static.igem.wiki/teams/4644/wiki/group4.jpg');
}

.photo-box .group-picture:nth-of-type(5) {
    --offset: 5;
    background-image: url('https://static.igem.wiki/teams/4644/wiki/colla8.jpg');
}

input:nth-of-type(1) {
    grid-column: 2/3;
    grid-row: 2/3;
}

input:nth-of-type(2) {
    grid-column: 3/4;
    grid-row: 2/3;
}

input:nth-of-type(3) {
    grid-column: 4/5;
    grid-row: 2/3;
}

input:nth-of-type(4) {
    grid-column: 5/6;
    grid-row: 2/3;
}

input:nth-of-type(5) {
    grid-column: 6/7;
    grid-row: 2/3;
}

input:nth-of-type(1):checked ~ .photo-box {
    --position: 1;
}

input:nth-of-type(2):checked ~ .photo-box {
    --position: 2;
}

input:nth-of-type(3):checked ~ .photo-box {
    --position: 3;
}

input:nth-of-type(4):checked ~ .photo-box {
    --position: 4;
}

input:nth-of-type(5):checked ~ .photo-box {
    --position: 5;
}

.photo-wrap {
    margin-left: 2.25vw;
    position: relative;
    width: 330px;
    height: 440px;
    background: linear-gradient(to bottom, rgb(196, 0, 0), #f1acab);
    box-shadow: 0 0 20px gray;
    overflow: hidden;
    border-radius: 30px;
}

.box-top {
    position: relative;
    width: 330px;
    height: 330px;
    background: white;
    display: flex;
    justify-content: center;
    transition: .5s;
}

.box-top::after {
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -38px;
    z-index: 999;
}

.member-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-image img {
    position: absolute;
    top: 40px;
    width: 240px;
    height: 240px;
    border-radius: 30px;
    background-size: cover;
    transition: 0.5s;
}

.photo-wrap:hover .member-image img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    transform: translate(0, -10px);
}


.box-bottom, .box-bottom2 {
    position: absolute;
    width: 330px;
    height: 130px;
    text-align: center;
    transition: 0.5s;
}

.box-bottom h2 {
    display: block;
    margin: 30px 0 10px 0;
    font: 800 32px 'Helvetica';
    color: darkred;
}


.box-bottom2 {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 700px;
    height: 220px;
    padding: 0 15px;
}

.box-bottom2 span {
    font: 800 1.25em 'OCR A Extended';
    transition: 0.2s;
    text-align: justify;
}

.photo-wrap:hover .box-top {
    height: 220px; /* 白色部分*/
}

.photo-wrap:hover .box-bottom {
    top: 500px; /* name disappear*/
}

.photo-wrap:hover .box-bottom2 {
    top: 225px; /* profile center*/
}


/* notebook */
.notebook-wrap {
    width: 100%;
    position: relative;
    top: 100px;
    padding-bottom: 100px;
}

.notebook-wrap::after {
    content: '';
    position: absolute;
    top: -100px;
    bottom: 120px;
    left: 50%; /* 水平居中 */
    transform: translateX(-50%);
    width: 10px;
    z-index: -999;
    background: linear-gradient(to bottom, darkred, pink);
}

.notebook-box {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

.notebook-left, .notebook-right {
    position: relative;
    width: 40%;
    border-radius: 16px;
    color: #000;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2rem;
    margin-bottom: 0.8vw;
    padding: 14px;
    text-align: match-parent;

}

.notebook-box:nth-child(even) .notebook-left {
    border: darkred solid 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notebook-box:nth-child(odd) .notebook-right {
    border: darkred solid 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.notebook-center {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.notebook-center > span {
    width: 200px;
    border-radius: 16px;
    font: 900 2vw '';
    background: linear-gradient(25deg, #cd6067, #dd8f8f, #e9bcba, #f1eae6);
    box-shadow: 0 0 2px 2px #e9bcba;
}

.slide-in-element {

    opacity: 0; /* 初始时将元素透明 */
    transition: opacity 0.8s ease; /* 添加过渡效果 */
}

.show {
    opacity: 1;
}

/* human practices*/
.main-text blockquote p {
    padding: 5px;
    font-style: italic;
    text-indent: 2em;
    line-height: 2em;
}

.main-img img {
    width: 40%;
    height: auto;

}

.main-text blockquote p::before {
    content: "“";
    color: darkred;
    font-family: Georgia;
    font-size: 5rem;
    margin: 0.5rem 0 0 -5rem;
    position: absolute;
    opacity: .5;
    width: 2rem;
}

.main-text blockquote p::after {
    content: "”";
    margin: 0.5rem 0 0 -2rem;
    color: darkred;
    font-family: Georgia;
    font-size: 5rem;
    position: absolute;
    opacity: .5;
    width: 2rem;
}

.content-btn {
    color: #000;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2rem;
    margin-bottom: 0.8vw;
    text-align: justify;
}

.btn-alert {
    border: none;
    background-color: white;
    border-radius: 10px;
    color: #000;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    box-shadow: 0 0 5px darkred;
}

/* 遮罩层 */
.alert {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
}

.alert-body {
    width: 60%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    text-align: center;
    animation: moveFromBottom .3s linear;
}

.alert-title {
    font-size: 2em;
    margin-top: 0.2vw;
    position: relative;
}

.close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.close:hover {
    color: darkred;
}

.alert-content {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    padding: 20px;
}

.hp-table {
    margin: 0 auto;
    width: 80%;
    border-collapse: collapse;
    border: 1px solid black;
}

.hp-table th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid black;
}

video {
    width: 80%;
    height: auto;
}

/* model */
.formula-center {
    text-align: center;
    color: #000;
    font-size: 1.2rem;
    font-weight: normal;
    font-family: unset;
    line-height: 2rem;
    margin-bottom: 0.8vw;
}

.formula-note {
    border: 1px dotted rgba(0, 0, 0, 0.7);
    padding: 0.5em;
}

.formula-note p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: left;
    margin-left: 1vw;
}

.table-container {
    overflow-x: auto;
    margin-bottom: 1vw;
}

.model-table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    width: 80%;
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
    caption-side: top;
}

.model-table th {
    padding: 10px;
    text-align: center;
    border: 1px solid black;
    background-color: #efd3d7;
}

.model-table td {
    border: 1px solid black;
    text-align: center;
}

.model-table caption {
    text-align: center;
    color: #6a1a21;
}

/* result*/
.image-row {
    display: flex; /* 使用弹性布局，使图片在同一行上显示 */
    margin: 2vw 0;
    justify-content: space-evenly;
}

.result-img {
    text-align: center; /* 居中显示图片和标题 */
    position: relative; /* 允许绝对定位标题 */
    align-items: center;
}

.result-img img {
    width: 50%; /* 图片宽度最大不超过容器宽度 */
    height: auto; /* 保持纵横比 */
}

.img-caption {
    position: absolute; /* 绝对定位标题 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    color: rgba(0, 0, 0, 0.7); /* 文字颜色 */
    width: 100%;
}

/* education */
.education-img img {
    width: 30%;
    height: auto;
}

.education-ul {
    margin-left: 2.8em;
    padding: 0.5em;
    font-size: 1.1rem;

}

/* s-i */
.si-table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
    width: 80%;
    text-align: left;
    caption-side: top;
    font-size: 1.2rem;
}

.si-table thead {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: none;
    border-left: none;
}

.si-table tbody {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: none;
    border-left: none;
}

.si-table.th, td {
    border: none;
    text-align: left;
}

.si-table caption {
    font-size: 1.2rem;
    text-align: center;
    color: black;
}

/* part */
.part {
    border-radius: 4px;
    background-color: #f3c1ce;
    color: rgba(138, 47, 52, 1);
    text-decoration: none;
}

.part:hover {
    background-color: #efb2bc;
    color: rgba(138, 47, 52, 1);
}

.part-table {
    font-size: 1.2rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    width: 80%;
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
}

.part-table th {
    padding: 10px;
    text-align: center;
    border: 2px solid black;
}

.part-table td {
    border: 2px solid black;
    text-align: center;
}

.part-table tr:hover {
    background-color: #eaddde;
}

.part-table a {
    color: rgba(138, 47, 52, 1);
    text-decoration: none;
}

.part-table a:hover {
    color: rgba(138, 47, 52, 1);
    text-shadow: 2px 2px 5px white;
}

/* communication */
.collapse-container {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.collapse-title {
    border-radius: 16px;
    line-height: 2vw;
    padding: 10px 50px;
    font-size: 1.3rem;
    border: 2px solid #6a1a21;
    cursor: pointer;
}

.collapse-content {
    margin-top: 0.6rem;
    padding-left: 1em;
    padding-right: 1em;
    display: block;
    text-align: justify;
    font-size: 1.2rem;
    height: 0;
    overflow: hidden;
    transition: all .3s;
}

.collapse-content.click-show {
    height: auto;
}
/* es */
.es-table {
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    width: 100%;
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
}
.es-table th {
    padding: 10px;
    text-align: center;
    border: 2px solid black;
}

.es-table td {
    border: 2px solid black;
    text-align: justify;
}
.es-table p {
    font-size: 1rem;
}
/* implementation */
.collapse-content p, ol {
        display: block;
    }


.pdf {
    margin-top: 2vw;
    margin-left: 9vw;

}


@keyframes moveFromTop {
    0% {
        margin-top: -600px;
    }
    100% {
        margin-top: 0;
    }
}

@keyframes moveFromBottom {
    0% {
        margin-bottom: -600px;
    }
    100% {
        margin-bottom: 0;
    }
}

@keyframes wave {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1000px 0;
    }

}

@keyframes bgAnimation {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animateText {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}