/* * {
    border: 1px solid #FFD700; 
    box-sizing: border-box; 
} */
/* 使视频和页面覆盖 */
index-section video {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;  /* 确保视频在背景 */
}

/* 页脚样式 */

footer {
    font-family: 'SourceHanSansSC-CN-Regular';
    font-size: 20px;
    color: #ccc;
    width: 100%;
    text-align: center;
}

footer >p{
    position: relative;
    z-index:11;
    background-color: rgb(10, 25, 47);
    color:gray;
}

.footer-container {
    color: rgb(255, 255, 255);
    position: relative;
    background: rgb(10, 25, 47);
    width: 100%;
    padding-left:10%;
    overflow:visible;
}

.footer-container .square1 {
    content: ""; /* 必须设置content属性 */
    position: absolute;
    left: -100px;
    width: 60px; /* 线条宽度 */
    height: 100%; /* 线条粗细 */
    background: linear-gradient(to right, rgba(0,210,255,1), rgba(0,55,145,1));
    transform: skew(-20deg);
    z-index: 11;
}
.square1:nth-child(1) {
    left: calc(-40px);
}

.square1:nth-child(2) {
    left: calc(-130px);
}
.square1:nth-child(3) {
    left: calc(-220px);
}

.footer-container .square2 {
    content: ""; /* 必须设置content属性 */
    position: absolute;
    left: -50px;
    width: 100px; /* 线条宽度 */
    height: 100%; /* 线条粗细 */
    background: white;
    transform: skew(-20deg);
    z-index: 10;
    overflow:hidden;
}

.footer-menu {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.menu-item {
    text-align: left;
    flex: 1;
}

.menu-item h3 {
    margin-top: 0;
    font-size: 18px;
    color: #fff;
}
.menu-item h3:hover {
    color: rgb(100, 181, 246);
    text-decoration: underline;
}
.sub-menu {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.sub-menu li {
    margin-bottom: 10px;
}

.sub-menu li a {

    color:#9d9fa1;
    text-decoration: none;
    font-size: 14px;
}

.sub-menu li a:hover {
    color: rgb(100, 181, 246);
    text-decoration: underline;
}

@media (max-width: 768px) {

    .menu-item {
        margin-bottom: 20px;
    }
}

/* Logo 容器样式 */
.logo-container {
    display: flex;
    align-items: center;  
    justify-content: flex-start;  
    margin-left: 80px;
    margin-right: 40px;  
    width: 240px;
    max-width: 240px;
    flex-shrink: 0;
}

/* 标志样式 */
.logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}


@font-face {
    font-family: 'source-light';
    src: url('../fonts/source-light.woff2') format('woff2');
}

/* 中文 */
@font-face {
    font-family: 'SourceHanSansSC-Medium';
    src: url('../fonts/SourceHanSansSC-Medium.woff2') format('woff2');
}
/* 中文加粗 */
@font-face {
    font-family: 'SourceHanSansSC-Bold';
    src: url('../fonts/SourceHanSansSC-Bold.woff2') format('woff2');
}
/* 英文加粗 */
@font-face {
    font-family: 'SourceHanSansSC-CN-Medium';
    src: url('../fonts/SourceHanSansSC-CN-Medium.woff2') format('woff2');
}
/* 英文 */
@font-face {
    font-family: 'SourceHanSansSC-CN-Regular';
    src: url('../fonts/SourceHanSansSC-CN-Regular.woff2') format('woff2');
}
/* 打字机效果 */
.typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid #fff; /* 光标颜色为白色 */
    animation: typing 2s steps(14) 0s forwards, blink 0.8s step-end infinite;
}

.index-text{
    overflow: hidden; /* 确保内容不超出容器 */
    white-space: nowrap; /* 确保文本在一行内 */
}
/* 打字机动画，逐字显示 */
@keyframes typing {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* 光标闪烁效果 */
@keyframes blink {
    50% {
        border-color: transparent; /* 闪烁效果 */
    }
    100% {
        border-color: #fff; /* 恢复光标颜色 */
    }
}

h1, p {
    font-family: "SourceHanSansSC-Medium";
}

.content-index {
    background-color: #F5F5F5;

}

.content-index h1 {
    font-family: "SourceHanSansSC-Bold";
}

/* Header 样式 */
header {
    display: flex;
    justify-content: space-between; /* 左右对齐 logo 和导航栏 */
    align-items: center;            /* 垂直居中 */
    height: 120px;                  /* 增加 header 高度 */
    padding: 20px 30px;             /* 增加左右内边距，避免元素紧贴边缘 */
    z-index: 6;
    background: none;               /* 去掉背景 */
    width: 100%;                    /* 确保 header 占满整个宽度 */
    transition: background-color 0.6s ease;
    border-radius: 15px;
}

.sub-body {
    top: 0;
}

/* product dropdown */
.wrapper-product {
    visibility: hidden;
    opacity: 0;
    display: flex;
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1% 10%;
    background-color: #fcfcfc;
    z-index: 10;
    color: black;
    transition: opacity 0.4s ease;
}

.wrapper-product.visible {
    visibility: visible;
    opacity: 1;
}

.wrapper-product button{
    font-family: 'SourceHanSansSC-Medium';
}

.span-product {
    font-family: 'SourceHanSansSC-CN-Regular';
}

.categories {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    border-right: 1px solid #B0B0B0;
    margin-top: 2%;
    margin-bottom: 2%;
}

.categories h2 {
    margin-bottom: 10%;
}

.categories h2:nth-of-type(2) {
    margin-top: 12%;
}

.categories button {
    margin-bottom: 2%;
}

.content-product {
    flex: 5;
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 2%; /* 子元素间距 */
    justify-content: flex-start;
}

.row {
    display: flex; /* 使每一行使用 flexbox */
    flex-wrap: nowrap;
    width: 100%;
}

.card-product {
    flex: 1 1 calc(20% - 2%);
    max-width: calc(20% - 4%);
    text-align: center;
    margin: 2%;
}

.card-product img {
    width: 100%;
    height: auto;
}

/* 导航栏样式 */
nav {
    display: flex;
    justify-content: center;        /* 导航项居中对齐 */
    flex-grow: 1;                    /* 导航栏占据剩余的空间 */
}

nav ul {
    display: flex;                  /* 菜单项在一行显示 */
    list-style: none;
    gap: 1.4rem;                      /* 增加菜单项的间距 */
    margin: 0;                       /* 去掉 margin */
    padding: 0;
    position: relative;
}

nav ul li {
    display: flex;
    align-items: center;
    position: relative;       
}

/* 导航链接样式 */
nav ul li a {
    font-size: 18px;
    color: white;
    transition: color 0.4s ease;
}

/* 新增 hover-black 类 */
nav ul li a.hover-black {
    color: black;
}

nav ul li a:hover {
    color: #ff9800;
}
.language-framework{
    transition: color 0.4s ease;
}
.language-framework:hover{
    color: #ff9800;
}
header.nav-up {
    transform: translateY(-100%);
}

header.nav-down {
    transform: translateY(100%);
}
/* 新的 */

/* 导航栏中下拉菜单的容器 */
nav ul li.dropdown {
    position: relative; /* 设置相对定位 */
    height: 120px;
}

/* 下拉菜单内容 */
.dropdown-content {
    display: none;  /* 默认隐藏 */
    position: absolute;
    top: 80%;
    left: 0;
    background-color: #F5F5F5;  /* 设置下拉菜单背景色为白色 */
    min-width: 149px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;  /* 确保下拉菜单在其他元素之上 */
    border-radius: 10px;
}

/* 下拉菜单项 */
.dropdown-content a {
    color: black ;  /* 默认颜色为黑色 */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .drop-title {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-size:16px;
    display: block;
}
/* 悬停时改变下拉菜单项的字体颜色 */
.dropdown-content a:hover {
    color: #ff9800;
}

/* 悬停时显示下拉菜单 */
nav ul li.dropdown:hover .dropdown-content {
    display: block;  /* 悬停时显示下拉菜单 */
}

.menu-container{
    z-index:10;
}
.menu-toggle {
    position: fixed;
    display: none;
    background: none;
    font-size: 30px;
    cursor: pointer;
    margin-right:auto;
    z-index: 10;
    left:5%;
    color:#0093de
}
.bg-custom-color{
    background-color:#020F41; /* 自定义背景颜色 */
}
.m-nav-menu{
    display: none;
    position: relative;
    z-index:10;
    top:60px;
    color:white;
}
.m-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    display: none; /* 默认隐藏 */
    z-index: 9; /* 位于菜单下面但覆盖内容 */
}
.m-overlay.active {
    display: block; /* 激活时显示背景遮罩 */
}
  
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    .menu-toggle {
        display: block; 
    }
    header {
        display: flex;
        flex-direction: column;
        padding: 0px;
        justify-content: flex-start;
    }
    .logo-container{
        display: none;
    }
}

.filler {
    transition: transform 1.2s ease;
}

.filler.move {
    transform: translateY(43%);
}

.filler h2 {
    color: #F5F5F5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: "SourceHanSansSC-Bold";
    letter-spacing: 0.14rem;
}

.pro {
    position: relative; /* 定位基于容器 */
    display: flex;
    width: 80%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
}

.pic {
    width: 100%; /* 图片占据容器 */
    height: auto;
}

.text-overlay {
    position: absolute; /* 覆盖图片 */
    top: 0;
    right: 0; /* 靠右对齐 */
    width: 50%; /* 占据右半边 */
    height: 100%; /* 高度和图片相等 */
    background: linear-gradient(140deg, #fff8e1, #ffd7a3, #ffab66, #ff7e33);
    color: #994d00;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 20px;
    box-sizing: border-box; /* padding 不会改变宽度 */
    transition: background 0.6s ease;
    line-height: 1.4;
}

.text-overlay h1 {
    font-family: SourceHanSansSC-Bold;
    padding: 10px;
    font-size: clamp(0.1rem, 1.4vw, 2.0rem);
}

.text-overlay p {
    padding: 10px;
    font-size: clamp(0.1rem, 1.1vw, 2.0rem);
}

.span-about {
    font-family: 'SourceHanSansSC-CN-Regular';
}

#profile {
    font-family: "source-light";
    font-size: 1.8vw;
    margin-left: 10%;
}

#about-dev, #culture, #view {
    font-family: "source-light";
    font-size: 2.0vw;
    text-align: center;
}

#eq, #product {
    font-family: "SourceHanSansSC-Bold";
    font-size: 3.0vw;
    top: 45%;
    left: 5%;
    color: white;
}

#qc{
    font-family: "SourceHanSansSC-Medium";
    font-size: 2.0vw;
    position: absolute;
    letter-spacing: 0.12rem;
    color: white;
    left: 8%;
    top: 8%;
    z-index: 1;
}


#lab {
    color: white;
    font-family: "SourceHanSansSC-Medium";
    font-size: 2.0vw;
    letter-spacing: 0.12rem;
}

.snap {
    position: relative;
    margin-top: 4%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: auto;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
/*    background: linear-gradient(to bottom, #00cefe, #00b1f0, #0093de, #006ec0);*/
    background: radial-gradient(circle at 40% 40%, 
                rgba(0, 206, 254, 0.8),
                rgba(0, 177, 240, 0.6) 40%,
                rgba(0, 147, 222, 0.5) 60%,
                rgba(0, 110, 192, 0.4) 100%);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 
                inset 0 4px 8px rgba(255, 255, 255, 0.25),
                inset 0 -4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.play-icon svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: white;
}

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

.modal-about {
    display: none;
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
/*    background-color: black;*/
    background-image: url('/img/connectwork.png');
    background-repeat: repeat;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.video-about {
    position: fixed;
    z-index: 35;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: auto;
}

.close {
    position: absolute;
    top: 1%;
    right: 1%;
    font-size: 2.5vw;
    color: white;
    cursor: pointer;
}

/* 粘性 */
.about-dev {
    position: relative;
    height: 400vh; /* 确保有足够的高度 */
}

.about-wrapper {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.image-container-dev {
    position: relative;
    width: 100%;
}

.image-container-dev img {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    transition: blur 0.4s ease;
}

.image-container-dev img.blur {
    filter: blur(2px);
}

.text-overlay-dev {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    text-align: center;
    padding: 20px;
    z-index: 2;
}

.content-dev {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    text-align: center;
}

.content-dev.first {
    opacity: 1;
}

.content-dev h2 {
    font-family: 'SourceHanSansSC-Bold';
    font-size: 70px;
    color: #1E3A8A;
}

.content-dev .title {
    font-family: 'SourceHanSansSC-Bold';
    font-size: 20px;
    margin-top: 20%;
}

.content-dev .description {
    font-family: 'SourceHanSansSC-Medium';
    font-size: 14px;
}

.leader {
    padding-top: 15%;
    background-image: url('/img/white.png');
    background-repeat: repeat;
}

.letter {
    width: 45vw;
    margin: 0 auto;
}

.content-about p {
    font-size: 16px;
    margin-bottom: 20px;
    text-indent: 2em;
}

.end {
    padding-top: 25px;
    text-align: right;
}

.end p {
    font-size: 18px;
    margin-bottom: 4px;
}

.culture {
    padding-top: 4%;
    background-color: #fcfcfc;
}

.image-container-cult {
    position: relative;
    margin-top: 4%;
}

.image-container-cult img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-container-cult .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
}

.image-container-cult .overlay.show {
    animation: fadeIn 1.4s forwards;
}

.line-cult {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.33%;
    width: 0.4px;
    background-color: #fcfcfc;
}

.line-cult:nth-child(2) {
    left: 66.66%;
}

.text-cult {
    position: absolute;
    width: 33.33%;
    height: 100%;
    left: 0;
    color: white;
    padding: 24px;
}

.text-cult.second {
    left: 33.33%;
}

.text-cult.third {
    left: 66.66%;
}

.content-cult {
    margin-top: 40%;
}

.text-cult h2 {
    font-family: "SourceHanSansSC-Bold";
    font-size: clamp(0.1rem, 1.7vw, 4.0rem);
}

.text-cult p {
    font-size: clamp(0.1rem, 1.4vw, 2.0rem);
    white-space: pre;
}

.text-cult h2.en {
    font-family: "SourceHanSansSC-CN-Medium";
    font-size: clamp(0.1rem, 1.3vw, 2.0rem);
}

.text-cult p.en {
    font-family: "SourceHanSansSC-CN-Regular";
    font-size: clamp(0.1rem, 1.1vw, 2.0rem);
}

.text-cult p.v {
    margin-bottom: 5%;
    font-size: clamp(0.1rem, 1.2vw, 2.0rem);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.view {
    padding-top: 4%;
    background-color: #fcfcfc;
    margin-bottom:20px
}

.view img {
    margin-top: 4%;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* eq */
.image-container-eq {
    position: relative;
    width: 100%;
}

.image-container-eq img{
    width: 100%;
    height: auto;
}

/* qc */

.framework {
    position: relative;
    width: 100%;
    height: calc(109vh - 120px);
}

.framework .blue {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.framework::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.image-container-framework {
    position: absolute;
    width: 85%;
    height: 56%;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    border-image: linear-gradient(60deg, #00cdfd, #00b1f0, #0093de, #0070c2);
    border-image-slice: 1;
    overflow: hidden;
    background-color: #fcfcfc;
    z-index: 2;
}

.image-container-framework img {
    width: auto;
    height: 100%
}

.image-container-framework .content {
    position: absolute;
    left: 57%;
    top: 3%;
    z-index: 3;
}

.image-container-framework .content h1 {
    font-family: "SourceHanSansSC-Bold";
    font-size: clamp(0.1rem, 1.5vw, 2.0rem);
    margin-top: 10px;
}

.image-container-framework .content p {
    font-family: "SourceHanSansSC-medium";
    font-size: clamp(0.1rem, 1.0vw, 2.0rem);
    white-space: pre;
}

p.first {
    margin-top: 1%;
}

.direction {
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 1;
}

.direction h2 {
    font-family: 'SourceHanSansSC-Medium';
    font-size: 1.3vw;
    letter-spacing: 0.04rem;
}

.direction p {
    font-family: 'source-light';
    margin-top: 2%;
    font-size: 1.0vw;
}

/* lab */
.lab {
    position: relative;
    margin-top: 0;
    width: 100%;
    height: 48vh;
}

.card-lab {
    position: absolute;
    top: 34%;
    width: 25%;
    height: 60%;
    text-align: center;
    border: 1px solid #fcfcfc;
    overflow: hidden;
}

.card-lab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: blur 0.4s ease;
}

.card-lab .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease;
    z-index: 1;
}

.card-lab:hover {
    cursor: pointer;
}

.card-lab:hover .overlay {
    opacity: 0.4;
}

.card-lab:hover img {
    filter: blur(1px);
}

.card-lab h1 {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    color: #fcfcfc;
    letter-spacing: 0.06rem;
    z-index: 2;
}

.lab .first {
    left: 0%;
}

.lab .second {
    left: 25%;
}

.lab .third {
    left: 50%;
}

.lab .fourth {
    left: 75%;
}

.modal {
    display: none;
    position: fixed;
    z-index: 50; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.modal h2 {
    font-family: 'SourceHanSansSC-Medium';
    font-size: 1.4vw;
    color: #0F0F0F;
    margin-bottom: 4%;
    letter-spacing: 0.06rem;
}

.modal h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #B0B0B0;
    margin-top: 2%;
}

.modal p {
    font-size: 1.1vw;
    color: #191970;
    letter-spacing: 0.04rem;
    margin-bottom: 1%;
}

.span-eq {
    font-family: 'SourceHanSansSC-CN-Regular';
}

.content-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('/img/connect.png');
    background-repeat: repeat;
    width: 39%;
    height: 60%;
    padding: 4%;   
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

/* product */
.image-container-product {
    position: relative;
    width: 100%;
}

.image-container-product img{
    width: 100%;
    height: auto;
}

.cabinet-container {
    background-color: #f5f7f7;
    display: flex;
    flex-direction: column; /* 使 cabinet 容器从上到下排列 */
    gap: 20px; 
}

.cabinet-container .cabinet:nth-child(even) {
    background-color: #fff;
}
.cabinet-container .cabinet:nth-child(odd) {
    background-color: #f5f7f7;
}

.cabinet {
    display: flex;
    align-items: flex-start; /* left, right容器顶部在水平线上 */
    gap: 20px; /* left, right容器的间距 */
}

.left {
    flex: 1;
    width: auto;
    height: 100%;
    margin: auto;
}

.left h2 {
    font-size: 25px;
    color: #333;
    margin: 0;
    text-align: center;
}

.right {
    flex: 2; /* 占据宽度 */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行 4 个卡片 */
    gap: 15px; /* 卡片的间距 */
    margin-right:10%;
    margin-left:10%;
}

.card-cabinet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color:#e8eaed;
    margin:5px;
}

.card-cabinet img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 30px;
}

.card-cabinet h2 {
    font-size: 24px;
    margin-bottom: 25px;
}
.bg-3F3A39{
    background-color: #3F3A39 !important;
    padding-bottom: 30px;
}
.eq-header-framework{
    position: relative;
    left:50%;
    top:10%;
    z-index: 0;
    width: 220px;
    height: 50px;
    transform: translateX(-50%);
    border-radius: 15px 0; /* 定义圆角的大小 */
}
.fpr-style{
    color:white;
    text-align: center;
    background: linear-gradient(to right, rgba(0,210,255,1), rgba(0,55,145,1));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.language-framework{
    width: 100px;
    border-radius: 15px 0; /* 定义圆角的大小 */
}

html[lang="en"]{
    font-family: SourceHanSansSC-CN-Regular;
}