@charset "UTF-8";

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

@font-face {
    font-family: 'Source Han Sans';
    src: url('fonts/SourceHanSans.ttc') format('truetype-collection');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Source Han Sans', sans-serif;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
} /* 去除所有链接的自带格式 */

a:active {
    transform: scale(0.95);
}

h2 {
    line-height: 1.4;
}

p {
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word; /* 使单词之间有间隔，让对齐效果更自然 */
    color: #434343;
}

@media (max-width: 850px) {
    
    p {
        line-height: 1.6;
        font-size: smaller;
    }

}

/* 导航栏 */
header {
    position: fixed;
    top: 0;
    left: 0;
    height: fit-content;
    width: 100%;
    background-color:white;
    z-index: 20;
}

header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #FF731D;
}

.logo-container {
    height: 90px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container object {
    width: 200px;
    margin-left: 30px;
    margin-right: 20px;
}

.logo2 {
    transition: all 0.5s ease-in-out;
    background-color: white;
}

.logo3 {
    position: absolute;    
    left: 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.scrolled .logo2 {
    transform: translateX(-30%);
    opacity: 0;
} /* 滚动后的效果 */

.scrolled .logo3 {
    transform: translateX(0);
    opacity: 1;
}

.menu-toggle {
    display: none;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
}

nav ul li {
    margin-left: 30px;
}

nav ul li button {
    all: unset; /* 一键清除几乎所有默认样式 */
    cursor: pointer; /* 保留点击手型指针 */
    background-color: #FFF7E9;
    transition: 0.4s ease-in-out;
}

nav ul li a, nav ul li button {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    text-align: center;
    display: block;
    padding: 8px 16px;
    border-radius: 20px;
}

nav ul li button:active {
    transform: scale(0.95);
}

nav ul li a:hover {
    background-color: #FFF7E9;
    cursor: pointer;
    transition: 0.4s ease-in-out;
} /* 当a标签悬停时的效果 */

.language {
    background-color: #FFF7E9;
    cursor: pointer;
}

/* 响应式设计：当屏幕宽度小于1150px时，导航栏改为纵向排列 */
@media (max-width: 1150px) {
    .logo-container {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    /* 菜单按钮 */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        width: 30px;
        height: 30px;
        margin-right: 30px;
    }

    .menu-toggle:hover span {
        background-color: #FF731D; /* hover时变色 */
        transition: all 0.2s ease-in-out;
    }

    .menu-toggle:active {
        transform: scale(0.95);
    }

    .menu-toggle span {
        display: block;
        background-color: #333;
        height: 5px;
        width: 100%;
        border-radius: 4px;
        margin: 4px 0;
    }

    header > div {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        width: 100%;
        display: block;
        max-height: 0; /* 初始时导航栏高度为 0 */
        overflow: hidden; /* 隐藏超出的内容 */
        transition: max-height 0.6s ease-out; /* 设置过渡效果 */
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 4px 0;
    }

    nav.active {
        max-height: 500px; /* 根据需要调整最大高度，max-height选择fit-content无效果 */
    }
}

@media (max-width: 750px) {

    .logo-container object {
        width: 140px;
    }

    .logo-container {
        height: 70px;
    }
}

/* hero部分 */
.hero {
    display: flex;
    width: 100vw;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    overflow: hidden;
}

.hero video {
    width: 102%; /* 稍微放大，防止1px黑边 */
    height: 102%;
}

/* section部分 */
section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: fit-content;
    padding: 10vh 10vw 10vh 10vw;
    position: relative;
}

.section-1 a{
    color: #333333b3;
    font-weight: lighter;
    display: block;
    width: fit-content;
    text-decoration: none;
    margin-top: 20px;
    padding: 8px 35px 10px 30px;
    border: solid 2px #FFA41B;
    border-radius: 0 50px 50px 0;
}

.section-1 a:hover {
    color: white;
    background:  #FFA41B;
    transition: 0.3s ease-in-out;
}

.section-1 {
    background-color: #FFF7E9;
}

.image-right {
    display: flex;
    width: 60vw;
    height: 40vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-left: 6vw;
    box-shadow: 0 0 30px white;
}

.image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例适应容器，避免溢出 */
}

h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.intro {
    position: relative;
}

.icon-tracer-1 {
    position: absolute;
    top: calc(10vh - 34px);
    right: calc(10vw - 34px);
    width: 200px;
}

.icon-tracer-2 {
    position: absolute;
    bottom: calc(10vh - 17px);
    right: calc(30vw - 17px);
    width: 100px;
}

.image-left {
    display: flex;
    width: 60vw;
    height: 40vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-right: 6vw;
}

.image-left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例适应容器，避免溢出 */
}

.section-2 a{
    color: #333333b3;
    font-weight: lighter;
    display: block;
    width: fit-content;
    text-decoration: none;
    margin-top: 20px;
    padding: 8px 35px 10px 30px;
    border: solid 2px #FF731D;
    border-radius: 0 50px 50px 0;
}

.section-2 a:hover {
    color: white;
    background:  #FF731D;
    transition: 0.3s ease-in-out;
}

.section-3 {
    background: linear-gradient(to right, #5F9DF7, #FFF7E9);
}

.section-3 .image-right img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例适应容器，避免溢出 */
}

.section-3 a{
    color: white;
    font-weight: lighter;
    display: block;
    width: fit-content;
    text-decoration: none;
    margin-top: 20px;
    padding: 8px 35px 10px 30px;
    border: solid 2px white;
    border-radius: 0 50px 50px 0;
}

.section-3 a:hover {
    color: #333333b3;
    background:  white;
    transition: 0.3s ease-in-out;
}

/* 文字不要太宽 */
@media (min-width: 850px) {
    .intro .text {
        max-width: 40vw;
    }
}

@media (min-width: 1150px) {
    .science-p2 .text, .section-2 .text {
        max-width: 40vw;
    }
}

@media (max-width: 850px) {

    section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h2{
        font-size: x-large;
    }

    .text h2 {
        font-size: medium;
    }

    .text a {
        font-size: small;
    }

    .text p {
        font-weight: 300;
    }

    .image-right {
        margin-top: 40px;
        width: 100%;
        margin: 40px 0 0 0;
    }

    .icon-tracer-1 {
        position: absolute;
        top: 400px ;
        right: calc(10vw - 17px);
        width: 100px;
    }

    .image-left {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .text {
        width: 100%;
    }

}

@media (max-width: 1150px) {
    
    .section-2, .section-3, .science-p2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section-3 .image-right {
        margin: 40px 0 0 0;
        width: 100%;
    }

   .section-2 .image-left, .science-p2 .image-left {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .section-2 .text, .section-3 .text, .science-p2 .text {
        width: 100%;
    }

}

@media (min-width: 1086px) {

    .section-3 .image-right {
        min-width: 450px;
    }

}



.section-4 {
    background-image: url(images/JPG/brain2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 20vh;
    padding-bottom: 20vh;
    margin: 5vw;
    width: 90vw;
}

.section-4 .text h2 {
    color: white;
    text-align: center;
}

.section-4 .text p, .mission .text p {
    color: #FFF7E9;
    text-align: center;
    font-size: x-large; 
    margin-bottom: 4vh;
}

.icon-tracer-3 {
    width: 100px;
    position: absolute;
    left: 5vw;
    bottom: 10vh;
}

.icon-tracer-4 {
    width: 100px;
    position: absolute;
    right: 5vw;
    top: 10vh;
}

@media (max-width: 850px) {

    .section-4 {
        padding-top: 15vh;
        padding-bottom: 15vh;
    }

    .icon-tracer-3 {
        width: 60px;
        left: 5vw;
        bottom: 5vh;
    }
    
    .icon-tracer-4 {
        width: 60px;
        right: 5vw;
        top: 5vh;
    }

    .section-4 .text p, .mission .text p {
        font-size: 14px;
        margin-bottom: 3vh;
    }

}

/* footer部分 */
footer {
    background-color: #FFF7E9;
    padding: 10vh 10vw 2vw 10vw;
    display: block;
}

footer > div {
    display: flex;
    justify-content: space-between;
    gap: 5%;
}

footer .image-left{
    width: calc(15vw + 15vh);
    height: 100%;
    object-fit: contain; /* 保持比例适应容器，避免溢出 */
    margin: 0;
}

footer ul {
    list-style: none;
}

footer h4, footer ul li {
    margin-bottom: 10px;
}

footer ul li a:hover {
    color: #FF731D;
}

footer img {
    width: calc(2vw + 4vh);
    margin: 6px 0 0 0;
}

footer p {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid #FF731D;
    padding-top: 30px;
}


footer span {
    display: block;
    font-size: small;
    margin: 6px 0 15px 0;
}

@media (min-width: 750px) {
    .footer2 {
        margin-right: 10vw;
    }
}

@media (max-width: 750px) {

    footer {
        font-size: 12px;
    }

    footer > div {
        justify-content: space-around;
    }

    footer .image-left {
        display: none;
    }

    footer span {
        font-size: smaller;   
    }

}

/* 关于我们About Us页面 */
.mission {
    background-image: url(images/JPG/experiment2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 20vh;
    padding-bottom: 20vh;
    margin: 5vw;
    width: 90vw;
}

.mission .text {
    color: white;
    text-align: center;
    text-shadow: 0 0 30px black;
}

/* 企业介绍 */
.introduction {
    background: #FFF7E9;
}

.introduction .image-left {
    height: fit-content;
    min-width: 300px;
}

.introduction .image-left img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例适应容器，避免溢出 */
}

/* 我们的团队 */
.section-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-5 h2 {
    margin-bottom: 30px;
}

.team > h3 {
    font-size: x-large;
    margin-bottom: 30px;
    background: linear-gradient(to right, #FFA41B, #FF731D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 

.team-1 {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 40px;
    gap: 2vw;
}

.team-1 > div {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px #eee;
    width: 25vw;
}

.team-1 div > div {
    width: 12vw;
    height: 12vw;
    border-radius: 20vw;
    overflow: hidden;
}

.team-1 p {
    text-align: center;
    line-height: 1.2;
    color: gray;
    margin-top: 10px;
}

.team img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.team div h3 {
    margin-top: 20px;
}

.profile {
    width: 100%;
    font-size: x-small;
    color: gray;
    text-align: justify;
    text-justify: inter-word; /* 使单词之间有间隔，让对齐效果更自然 */
    margin: 5px 0 5px 0;
    display: none;
}

@media (max-width: 750px) {

    .mission {
        padding-top: 15vh;
        padding-bottom: 15vh;
    }

    .introduction .image-left {
        max-width: 300px;
    }

    .team div h3 {
        font-size: medium;
    }

    .team div p {
        font-size: small
    }

    .team > h3 {
        font-size: larger;
    }

    .team-1 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4vh;
        width: 100%;
    }

    .team-1 div {
        width: 100%;
        margin-bottom: 0;
    }

    .team-1 div > div {
        width: 30vw;
        height: 30vw;
    }

}

/* 文章 */
.research {
    background: linear-gradient(to right, #FFF7E9, #5F9DF7);
    display: block;
}

.research-slider {
    display: flex;
    overflow-x: scroll;  /* 启用横向滚动 */
    scroll-snap-type: x mandatory;  /* 启用平滑滚动 */
    gap: 20px;  /* 设置项目之间的间距 */
    padding: 30px;
    -webkit-overflow-scrolling: touch;  /* 为移动设备启用平滑滚动 */
    border-left: 1px solid #5F9DF7;
    border-right: 1px solid white;
}

.research-item {
    flex: 0 0 auto;
    width: 320px;  /* 每个文章项的宽度，英文单独设置了 */
    height: 460px;
    margin-right: 20px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 30px white;
    text-align: left;
    transition: transform 0.3s ease;
    background: #ffffff1a;
}

.research-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.research-item p {
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
    line-height: 1.6;
}

.research-item a {
    text-decoration: none;
    color: #5F9DF7;
}

.logo-wall {
    width: 100%;
    height: fit-content;
    margin: 30px 0 50px 0;
}

.logo-wall img {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 850px) {
    .logo-wall {
        width: 100%;
        height: fit-content;
        margin: 0;
    }

    .research-item h3 {
        font-size: large;
        line-height: 1.4;
    }
}


/* Science */
.focus {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(images/PNG/asyn-bbg-part.png);
}

.science-p3 {
    background: linear-gradient(to right, #5F9DF7, #FFF7E9);
}

.science-p3-1 img {
    margin-bottom: 30px;
    width: 50vw;
    box-shadow: 0 0 30px white;
}

.science-p3-23 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80vw;
    height: fit-content;
    margin-top: 80px;
}

.science-p3-23 div {
    box-shadow: 0 0 30px white;
    display: flex;
    width: 60vw;
    height: 40vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 5vw 0 5vw;
}

.science-p3-23 img {
    width: 100%;
}

.compound {
    margin-top: 60px;
}

@media (max-width: 850px) {

    .science-p3-1 img {
        width: 80vw;
        box-shadow: 0 0 30px white;
    }

    .science-p3 h2, .science-p4 h2 {
        margin-bottom: 16px;
        text-align: left;
    }

    .science-p3-23 {
        display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
        gap: 30px;
        margin-top: 40px;
    }

    .science-p3-23 div {
        height: fit-content;
        width: 100%;
    }
    
    .science-p4 img {
        content: url('images/PNG/compound-vertical.png');
    }
    
    .compound {
        width: 100%;
        height: fit-content;
        margin: 30px 0 0 0;
    }

    /* 
    .compound {
        overflow-x: auto;  /* 允许自由滚动 
        -webkit-overflow-scrolling: touch; /* 适配移动端平滑滚动
        border-left: 1px solid #FF731D;
        border-right: 1px solid #FF731D;
        padding: 30px;
        margin-top: 60px;
        white-space: nowrap;  /* 防止子元素换行
    }
    
    .compound img {
        min-width: 200vw;  /* 确保图片超出屏幕
        height: auto;
    } 
    */

}

@media (min-width: 750px) and (max-width: 1150px) {
    
    .science-p3-23 {
        display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
        gap: 30px;
        margin-top: 40px;
    }

    .science-p3-23 div {
        height: fit-content;
        width: 50vw;
    }

}

/* Pipeline */
.pipeline {
    background-image: url(images/JPG/scientist.jpg);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 20px 0;
}

th {
    font-size: large;
    background: #FFF7E9;
    text-align: center;
    padding: 30px 20px 30px 20px;
}

.no-wrap {
    white-space: nowrap;
}

td {
    padding: 46px 20px 46px 20px;
    text-align: center;
    border-bottom: 1px solid #FF731D;
}

.progress-container {
    position: relative;
    height: 42px;
    background-color: #eee;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 50px;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #FF731D;
    transition: width 1.5s ease-in-out;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: right;
    color: white;
    padding-right: 25px;
}

.progress-bar-exp {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin: 40px 0 0 0;
}

.progress-bar-exp > div {
    background-color: #FF731D;
    height: 50px;
    width: 120px;
    border-radius: 50px;
}

.progress-bar-exp p {
    color:#777;
    margin-right : 20px;
}

.mark {
    display: block;
    width: fit-content;
    background: linear-gradient(to right, #FFA41B, #FF731D);
    border-radius: 10px;
    color: white;
    margin: 5px auto;
    font-size: 10px;
    font-weight: 100;
    padding: 5px 10px;
}

@media (min-width: 1000px) {

    /* 默认隐藏垂直表格 */
    .pipeline-table-vertical {
        display: none;
    }

}

@media (max-width: 1000px) {

    #pipeline {
        padding-top: 0vh;
        padding-bottom: 5vh;
        font-size: smaller;
    }

    /* 让垂直表格适应小屏幕 */
    .pipeline-table-vertical {
        margin-bottom: 70px;
        /* display: block; 不要设置表格为block，宽度不能撑开 */
    }

    /* 横向表格在小屏幕时隐藏 */
    .pipeline-table {
        display: none;
    }

    .pipeline-table-vertical th {
        padding: 10px 0 12px 0;
        font-size: 20px;
    }

    .pipeline-table-vertical span, .progress-bar-exp p {
        color: gray;
        font-size: 14px;
        font-weight: 500;
    }

    .pipeline-table-vertical td {
        padding: 20px 0px 20px 0px;
        text-align: center;
        border-bottom: 1px solid #FF731D;
    }

    .bar-th td {
        border-bottom: 1px solid white;
        padding-bottom: 0;
        font-size: smaller;
        font-weight: 500;
    }

    .bar-td td {
        padding-top: 16px;
    }

    .progress-bar-exp {
        justify-content: right;
    }

    .progress-bar-exp p {
        margin-right : 10px;
    }

    .progress-bar-exp > div {
        background-color: #FF731D;
        height: 30px;
        width: 70px;
        border-radius: 50px;
    }

    .progress-bar {
        font-size: 10px;
        font-weight: lighter;
    }

    .mark {
        display: block;
        width: fit-content;
        background: linear-gradient(to right, #FFA41B, #FF731D);
        border-radius: 10px;
        color: white;
        margin: 5px auto;
        font-size: 10px;
        font-weight: 100;
        padding: 5px 10px;
    }   
}

/* 联系我们 */
.contact {
    background-image: url(images/JPG/lady.jpg);
    background-size: cover; /* 让背景图像填充元素 */
    background-position: top; /* 背景图像上对齐 */
    background-repeat: no-repeat; /* 防止背景图像重复 */
}

.contact .text {
    display: block;
    width: 100%;
}

.contact-pic {
    width: calc(3vw + 6vh);
}

#contact tr td:first-child {
    font-weight: bold;
}

@media (max-width: 750px) {
    
    .contact-table td {
        padding: 50px 20px 50px 20px;
        font-size: small;
    }
    
    #contact {
        padding-top: 6vh;
    }

}

/* 英文文本调整 */