:root {
    --blue: #1677ff;
    --blue-dark: #135AC0;
    --green: #21c464;
    --dark: #14314a;
    --muted: #6b7280;
    --light: #ffffff;
    --nav-height: 5vw;
}

html,
body {
    height: 100%;
}

p {
    margin-top: 0;
    margin-bottom: 1vw;
}

body {
    margin: 0;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #14314a !important;
    background: #ffffff;
}

/* Lesson Detail Page Styles */
.story-detail-page,
.news-detail-page,
.lesson-detail-page {
    background-color: #F5FAFF;
    position: relative;
    width: 100%;
}

.news-detail-page{
    background-color: #fff;
}

.lesson-top-banner-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.lesson-detail-bg {
    width: 100%;
    display: block;
}

.story-banner-section{
    padding-top: 8vw;
}

.news-container,
.lesson-container {
    position: relative;
    z-index: 1;
    width: 49vw;
    margin: 0 auto;
    padding-top: 0; /* Header overlays page */
    top:8vw;
    margin-bottom: 8vw;
}

.news-header,
.lesson-header {
    margin-bottom: 3vw;
}

.lesson-logo-wrap {
    margin-bottom: 2vw;
}

.lesson-header-logo {
    height: 5vw;
    width: auto;
}

.news-detail-title,
.lesson-detail-title {
    font-size: 1.5vw;
    font-weight: bold;
    color: #14314a;
    margin-bottom: 1.5vw;
    line-height: 1.4;
    letter-spacing: 0.05vw;
}

.lesson-detail-intro {
    font-size: 0.7vw;
    color: #666;
    line-height: 2;
    margin-top: 2vw;
}

.lesson-arrow-down {
    /* color: #135AC0; */
    font-size: 1.1vw;
    animation: bounce 2s infinite;
}



@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

.news-article-body,
.lesson-article-body {
    margin-bottom: 3vw;
    color: #14314a;
}

.news-detail-header,
.lesson-detail-header{
    margin-bottom: 2.2vw;
}

.news-detail-header{
    border-bottom: 1px solid #135AC0;
}

.news-section-title,
.lesson-section-title {
    font-size: 1.2vw;
    color: #135AC0;
    margin-top: 2vw;
    margin-bottom: 1vw;
    font-weight: bold;
}

.lesson-article-body img{
    margin-bottom: 2vw;
    width: 100%;
}

.news-article-body img{
    display: block;
    margin: 0 auto;
    margin-bottom: 2vw;
    width: 94%;
}

.news-article-body p,
.lesson-article-body p {
    font-size: 0.8vw;
     line-height: 1.8;
    margin-bottom: 1.5vw;
    text-align: justify;
}

.news-article-body h2,
.lesson-article-body h2 {
    font-size: 1.2vw;
    margin-bottom: 1.5vw;
    text-align: justify;
    font-weight: 600;
}

.news-article-body h3,
.lesson-article-body h3 {
    font-size: 1vw;
    margin-bottom: 1.5vw;
    text-align: justify;
    font-weight: 600;
}

.lesson-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw 0;
    margin-top: 2vw;
}

.lesson-nav-link {
    font-size: 0.7vw;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.lesson-nav-link:hover {
    color: #135AC0;
}

.lesson-back-btn {
    display: inline-block;
    padding: 0.6vw 2vw;
    border: 1px solid #135AC0;
    color: #135AC0;
    text-decoration: none;
    font-size: 0.75vw;
    transition: all 0.3s;
    background: transparent;
}

.lesson-back-btn:hover {
    background: #135AC0;
    color: #fff;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    backdrop-filter: saturate(150%) blur(.6vw);
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 0.1vw solid rgba(0, 0, 0, 0.06);
}

.nav-wrap {
    width: 86vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    width: 6.6vw;
    margin-left: -1vw;
}

.logo img {
    width: 100%;
}

.logo_foot {
    display: flex;
    align-items: center;
    width: 10.5vw;
}

.logo_foot img {
    width: 100%;
}

.menu {
    display: flex;
    column-gap: 2.2vw;
    margin-left: 1.8vw;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 0.3vw;
}

.submenu-arrow {
    font-size: .5vw;
    transition: transform 200ms ease;
}

.bi-chevron-down::before {
    font-weight: 700 !important;
}

.menu-item.open .submenu-arrow {
    transform: rotate(180deg);
}

.submenu {
    position: absolute;
    top: calc(100% + 1.9vw);
    left: -25%;
    min-width: 6.6vw;
    padding: 0.6vw;
    background: #fff;
    /* border: 0.1vw solid rgba(0, 0, 0, 0.08); */
    border-top: 1px solid #135AC0;
    box-shadow: 0 .8vw 2vw rgba(16, 24, 40, 0.12);
    border-radius: 0 0 .4vw .4vw;
    display: none;
    z-index: 1500;
    text-align: center;
}

.submenu::before {
    content: "";
    position: absolute;
    top: -2vw;
    left: 0;
    width: 100%;
    height: 2vw;
    background: transparent;
}

.menu-item.open .submenu {
    display: grid;
    row-gap: .8vw;
}

.submenu a {
    font-size: .8vw;
    color: #1f2937;
    line-height: 1.5vw;
    text-decoration: none;
    white-space: nowrap;
}

.submenu a:hover {
    color: #135AC0;
}

@media (hover: hover) and (pointer: fine) {
    .menu-item.has-sub:hover .submenu {
        display: grid;
    }

    .menu-item.has-sub:hover .submenu-arrow {
        transform: rotate(180deg);
    }
}

.nav-link {
    font-size: 0.95vw;
    color: #444;
    font-weight: Regular;
    text-decoration: none;
    letter-spacing: 0.05vw;
}

.submenu a.active_er,
.nav-link.active {
    color: #135AC0;
    font-weight: 800;
}

.actions {
    display: flex;
    align-items: center;
    column-gap: 1vw;
}

.nav-cta {
    font-size: 1.1vw;
    padding: .8vw 1.6vw;
    border-radius: 1.4vw;
    background: #135AC0;
    border: none;
}

.nav-cta:hover {
    background: var(--blue-dark);
}

.icon-btn {
    width: 2.8vw;
    height: 2.8vw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 0;
}

.search-wrap {
    position: relative;
    width: 8.2vw;
    height: 2.8vw;
}

.search-input {
    font-size: 0.8vw;
    padding: .5vw 0.8vw .5vw 1vw;
    border-radius: 1.5vw;
    /* border: 0.1vw solid rgba(0, 0, 0, 0.12); */
    background-color: #135AC0;
    color: #fff;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    transition: width 0.3s ease;
    box-sizing: border-box;
}

.search-input:focus {
    width: 13vw;
    background-color: #fff;
    color: #135AC0;
}

.search-input:focus::placeholder {
    color: #ccc;
}

.search-input:focus + .search-btn i,
.search-input:focus + .search-btn i::before {
    color: #135AC0;
}

.search-btn {
    position: absolute;
    right: .6vw;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4vw;
    height: 2.4vw;
    background: transparent;
    border: none;
}

.search-btn i {
    font-size: 1vw;
    color: #fff;
    background: unset;
}

.search-input::placeholder {
    color: #ffffff;
    opacity: 1;
}

.bi-search::before {
    font-size: 1.1vw;
    color: #FFF;
    margin-top: 0.1vw;
    margin-left: 0.8vw;
}

/* Hide default clear button in search input for WebKit browsers */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

.swiper {
    width: 100vw;
    height: 100vh;
}

.swiper-slide {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding-top: calc(var(--nav-height) + 3vw);
}

.swiper-slide.site-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--nav-height) + 1vw);
    padding-bottom: 1vw;
    background-color: #EEF3F9;
}

.swiper>.swiper-pagination {
    right: 2vw !important;
}

.swiper-pagination-bullet {
    width: .8vw;
    height: .8vw;
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #135AC0;
}

.hero {
    color: #fff;
}

.hero-swiper {
    position: absolute;
    inset: 0;
}

.hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2vw;
    z-index: 5;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 50%;
    right: 50%;
    text-align: center;
    margin-bottom: 2vw;
}

.hero-pagination .swiper-pagination-bullet {
    width: .35vw;
    height: .35vw;
    background: #ffffff;
    opacity: 1;
}

.hero-pagination .swiper-pagination-bullet-active {
    background: #135AC0;
    width: 1.4vw;
    height: .35vw;
    border-radius: .17vw;
}

.hero-prev,
.hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    z-index: 2;
}

.hero-prev {
    left: 2vw;
}

.hero-next {
    right: 2vw;
}

.hero-arrow {
    font-size: 2vw;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-shadow: 0 .2vw .6vw rgba(0, 0, 0, .2);
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", Arial, sans-serif;
}

.hero-bg {
    position: absolute;
    inset: 0;
    /* background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1920&auto=format&fit=crop'); */
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 72vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    row-gap: 2vw;
    margin-top: 17vh;
}

.hero-title {
    font-size: 1.8vw;
    line-height: 1.2;
    color: #14314a;
    letter-spacing: 0.2vw;
    font-weight: normal;
}

.accent {
    color: #135AC0;
    font-size: 3.7vw;
    font-weight: 600;
    line-height: 6vw;
}

.hero-actions {
    display: flex;
    column-gap: 1vw;
}

.btn-primary.explore-btn,
.btn-primary.hero-cta {
    font-size: 0.75vw;
    padding: 0.6vw 1.8vw;
    border-radius: 0;
    background: unset;
    letter-spacing: 0.05vw;
    color: #134ac0;
}

.btn-primary.explore-btn {
    margin-top: 8.6vh;
}

.btn:hover {
    background-color: #134ac0 !important;
    color: #FFF;
}

.section {
    width: 92vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3vw;
    align-items: center;
}

.section-title {
    font-size: 2.4vw;
    font-weight: normal;
    color: #14314a;
    letter-spacing: 0.15vw;
}

.section-sub {
    font-size: 2.4vw;
    color: #14314a;
    max-width: 40vw;
    font-weight: bold;
    letter-spacing: 0.15vw;
    white-space: nowrap;
}

.section-cta {
    font-size: 1.1vw;
    padding: .8vw 1.6vw;
    border-radius: 1.4vw;
}

.solutions {
    position: relative;
    z-index: 1;
    width: 72vw;
    margin-top: 10vh;
}

.solutions-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .9;
}

.solution-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

.solution-links {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    margin-top: 5vh;
}

.solution-link {
    font-size: 1.1vw;
    color: #14314a;
    text-decoration: none;
    display: block;
    font-weight: 600;
    position: relative;

}

.solution-link.active {
    font-weight: 600;
    font-size: 2.3vw;
    color: #135AC0;
    letter-spacing: 0.05vw;
    line-height: 2.3vw;
    margin: 0.7vw 0;
    padding-left: 1.2vw;
    padding-bottom: 0.3vw;
}

.solution-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.2vw;
    background: #135AC0;
    border-radius: 0.1vw;
}

.product-col {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 2vw;
}

.pack {
    width: 12vw;
    height: 18vw;
    border-radius: 1vw;
    background: #fff;
    box-shadow: 0 1.2vw 3vw rgba(16, 24, 40, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.pack.large {
    width: 14vw;
    height: 21vw;
}

.factory-wrap {
    width: 92vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.4vw;
    align-items: stretch;
}

.factory-photo {
    position: relative;
    border-radius: 1vw;
    overflow: hidden;
}

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

.metric {
    position: absolute;
    bottom: 1.4vw;
    left: 1.4vw;
    background: rgba(255, 255, 255, 0.9);
    color: #0b1020;
    padding: .8vw 1.2vw;
    border-radius: .8vw;
    font-size: 1.1vw;
}

.side-card {
    border-radius: 1vw;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1.2vw 3vw rgba(16, 24, 40, 0.12);
    display: grid;
    place-items: center;
}

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

.part03 {
    padding-top: 0;
}

.part03-scroll-wrapper {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.part03-scroll-wrapper.grabbing {
    cursor: grabbing;
    user-select: none;
}

.site-footer {
    position: relative;
    background-color: #EEF3F9;
}

.accordion3 {
    width: 100%;
    margin: 0 auto;
    height: calc(100vh);
    display: flex;
    align-items: stretch;
}

.pane {
    position: relative;
    flex: 1;
    min-width: 18vw;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1.2vw 3vw rgba(16, 24, 40, 0.12);
    transition: flex 400ms ease, transform 300ms ease;
}

.pane.active {
    flex: 3.8;
}

.pane:hover {
    /* transform: translateY(-.2vw); */
}

.pane-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 83% center;
}

.pane-overlay {
    position: absolute;
    inset: 0;
}

.pane-label {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -50%);
    font-size: 2.3vw;
    font-weight: 800;
    color: #14314a;
}

.pane-caption {
    position: absolute;
    left: 50%;
    bottom: calc(0% + 3.5vw);
    transform: translateX(-50%);
    font-size: 1.5vw;
    color: #14314a;
}

.pane.active .pane-label,
.pane.active .pane-caption {
    display: none;
}

.pane-content {
    position: absolute;
    left: 14vw;
    top: 25%;
    right: 2vw;
    display: none;
}

.pane-content-txtlf {
    left: 6vw;
}


.pane.active .pane-content {
    display: block;
    opacity: 0;
    animation: paneFade 0.2s ease 0.4s forwards;
}

.pane-title {
    font-size: 2.3vw;
    font-weight: bold;
    margin-bottom: 1vw;
    letter-spacing: 0.1vw;
    color: #14314a;
}

.pane-sub {
    margin-top: 5vh;
    font-size: 0.8vw;
    opacity: .9;
    max-width: 40vw;
    color: #14314a;
    font-weight: 600;
}

@keyframes paneFade {
    from {
        opacity: 0;
        transform: translateY(1vw);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-footer {
    background: #EEF3F9;
}

.footer-top {
    width: 88vw;
    margin: 0 auto;
    padding: 4vw 0;
    display: grid;
    grid-template-columns: 2.3fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
    gap: 2vw;
    align-items: start;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1vw;
    font-weight: 800;
    font-size: 1.8vw;
    color: #135AC0;
}

.foot_menu {
    font-size: 0.9vw !important;
    margin-bottom: 0.5vw;
}

.footer-links {
    display: grid;
    row-gap: .3vw;
    text-align: center;
}

.footer-links a {
    font-size: 0.7vw;
    color: #666;
    text-decoration: none;
    letter-spacing: 0.06vw;
}

.footer-bottom {
    border-top: 1px solid #135AC0;
    padding: 1.6vw 0;
    width: 88vw;
    margin: 0 auto;
}

.footer-bottom .container {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4vw;
}

.footer-blline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #135AC0;
    height: 0.5vw;
}

.footer_copyright {
    text-align: center;
    width: 100%;
    font-size: 0.7vw;
    color: #666;
}

.footer_copyright a{
    color: #666;
}

.wxewm{
    display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; z-index: 9999; background: #fff; padding: 5px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.wxewm img{
    width: 120px; height: 120px; display: block;
}

.xhsewm{
    display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; z-index: 9999; background: #fff; padding: 5px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.xhsewm img{
    width: 120px; height: 120px; display: block;
}

.social {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 0.5vw;
}

.social .icon-btn {
    width: unset;
    height: unset;
}

.social .icon-btn img {
    width: 1.75vw;
    height: 1.75vw;
}

.footer {
    background-color: #EEF3F9;
}

.footer-blline2 {
    left: 0;
    bottom: 0;
    width: 100%;
    background: #135AC0;
    height: 0.5vw;
}

/* Products page */
.products-page {
    width: 100%;
    margin: 0 auto;
}

.prod-hero {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    position: relative;
}

.prod-lineup {
    width: 100%;
}

.prod-lineup img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.strength-overlay {
    position: absolute;
    top: 50%;
    left: 14vw;
    transform: translateY(-50%);
    width: 45vw;
}

.strength-title {
    font-size: 2.2vw;
    font-weight: 800;
    margin-bottom: 1.5vw;
    letter-spacing: 0.1vw;
    color: #14314a;
}

.strength-sub {
    font-size: 0.8vw;
    color: #14314a;
    font-weight: 600;
    line-height: 1.2;
}

.hc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    width: 70vw;
    margin: 0 auto;
}

.hc-left {
    margin-top: 2vw;
}

.hc-left-title {
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 1.9vw;
    letter-spacing: 0.1vw;
    display: inline-block;
}

.hc-left-row {
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

.hc-left-icon {
    display: inline-block;
    width: 2.3vw;
    margin-right: 0.5vw;
}

.hc-left-icon img {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: -1vw;
}

.hc-tags {
    display: flex;
    align-items: center;
    gap: 0;
}

.hc-tag {
    font-size: 1.6vw;
    padding: 0 .8vw;
    letter-spacing: 0.1vw;
}

.hc-tag+.hc-tag {
    border-left: 1px solid #ffffff;
}

.hc-right {
    display: flex;
    align-items: center;
    gap: 1.4vw;
}

.hc-right a img {
    height: 2.65vw;
    display: block;
}

/* 产品01横幅覆盖内容 */
.hero-content-01 {
    position: absolute;
    left: 42%;
    top: 9vw;
    text-align: left;
    width: 45vw;
}

.hero-content-02 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 7vw;
    background-color: #1A62C7E6;
}

.hc-title {
    font-size: 2.6vw;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.1vw;
}

.hc-title img {
    width: 100%;
}

.hc-title-pic {
    position: absolute;
    top: 20vw;
    right: 20vw;
    z-index: 2;
}

.hc-title-pic img {
    display: block;
}

.hc-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 3.6vw;
    padding: 0 2.4vw;
}

.hc-col {
    text-align: center;
    padding: .6vw 0;
}

.hc-col+.hc-col {
    border-left: 1px solid #ffffff;
}

.hc-ico img {
    height: 2.8vw;
    display: inline-block;
}

.hc-txt {
    font-size: 1vw;
    margin-top: .8vw;
    color: #FFF;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
}

.prod-tabs {
    display: flex;
    gap: 2vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5vw;
    z-index: 2;
}

.prod-tab {
    font-size: 1.1vw;
    color: #14314a;
    text-decoration: none;
}

.prod-tab.active {
    font-weight: 700;
    color: #135AC0;
    border-bottom: 0.15vw solid #135AC0;
}

#product-anchor{
    display: block;
    width: 0;
    height: 0;
    scroll-margin-top: calc(var(--nav-height) + 160px);
}

.prod-summary {
    text-align: center;
    padding: 4vw 0;
    width: 72vw;
    margin: 0 auto;
}

.prod-title {
    font-size: 2.2vw;
    font-weight: 500;
    letter-spacing: 0.1vw;
    margin-bottom: 2vw;
    color: #14314a;
}

.prod-sub {
    font-size: 1vw;
    color: #14314a;
}

.prod-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 3vw;
    align-items: center; */
}

.audience-01{
    overflow: hidden;
}

/* 产品01特性环 */
.wheel-01 {
    width: 100%;
    background: url(../imgs/product_01_pt02bg.jpg) no-repeat center center;
    background-size: cover;
    padding: 6vw 0;
}

.wheel-inner {
    width: 88vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5vw;
    align-items: center;
}

.wheel-left img {
    width: 28vw;
    margin: 0 auto;
    display: block;
    position: relative;
    left: 3vw;
}

.wheel-right {
    display: grid;
    place-items: left;
}

.wheel-right-title {
    font-size: 1.7vw;
    font-weight: 600;
    color: #14314a;
    letter-spacing: 0.1vw;
    line-height: 1.8vw;
    margin-bottom: 1.5vw;
    margin-top: -6.5vw;
}

.wheel-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1vw 0;
    column-gap: 1vw;
    margin-bottom: 2vw;
    width: 80%;
}

.wheel-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

/* The separator line */
.wheel-nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.5vw;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(22, 119, 255, 0), rgba(22, 119, 255, 1) 20%, rgba(22, 119, 255, 1) 80%, rgba(22, 119, 255, 0));
    opacity: 0.6;
}

.wheel-nav-icon img {
    height: 2.8vw;
    display: block;
    margin-bottom: 1vw;
}

.wheel-nav-item:hover .wheel-nav-icon img,
.wheel-nav-item.active .wheel-nav-icon img {
    filter: invert(30%) sepia(54%) saturate(8649%) hue-rotate(205deg) brightness(78%) contrast(100%);
}

.wheel-nav-text {
    font-size: 0.8vw;
    color: #14314a;
    text-align: center;
    font-weight: normal;
}

.wheel-nav-item:hover .wheel-nav-text,
.wheel-nav-item.active .wheel-nav-text {
    color: #135AC0;
}

.wheel-right-btn-content {
    margin-top: 1vw;
}

.wheel-right-btn-title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #135AC0;
    letter-spacing: 0.1vw;
    margin-bottom: 0.6vw;
}

.wheel-right-btn-desc {
    font-size: 1vw;
    color: #666;
    letter-spacing: 0.05vw;
}

.feature-left img {
    width: 100%;
    object-fit: cover;
}

.feature-right {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
    align-items: start;
    background-color: #F9F9F9;
}

.feature-right img {
    /* width: 100%;
    border-radius: 1vw; */
    width: 19vw;
    margin: 0 auto;
    margin-top: 8vw;
}

.feature-meta {
    margin: 0 auto;
    text-align: center;
    margin-top: -5vw;
}

.feature-meta .feature-name {
    font-size: 1vw;
    font-weight: 700;
    line-height: 2.4vw;
}

.feature-meta .feature-desc {
    font-size: 0.8vw;
    color: #14314a;
    margin-bottom: 1.2vw;
}

.prod_link,
.feature-meta .feature-link {
    font-size: 0.8vw;
    color: #14314a;
    text-decoration: none;
    display: inline-block;
    line-height: 1.6vw;
    border-bottom: 0.1vw solid #14314a;
}

.prod_link:hover,
.feature-meta .feature-link:hover {
    color: #135AC0;
    border-bottom: 0.1vw solid #135AC0;
}

.prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4vw;
    padding: 5vw 1vw;
    width: 72vw;
    margin: 0 auto;
}

.prod-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.prod-top {
    background: #f9f9f9;
}

.prod_txt {
    width: 100%;
    display: block;
    color: #135AC0;
    font-size: 0.8vw;
    padding: 1.6vw;
}

.prod-thumb {
    width: 100%;
    height: 34vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-thumb img {
    width: 42%;
    object-fit: cover;
    display: block;
}

.prod-info {
    padding: 1.6vw;
    margin-top: 0.8vw;
    text-align: center;
}


/* Story Overview Section */
.story-overview-section {
    width: 100%;
    background: url('../imgs/story_banner2.jpg') no-repeat center center;
    background-size: cover;
    padding: 5vw 0;
    color: #14314a;
}

.story-overview-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.story-overview-title {
    font-size: 1.9vw;
    color: #135AC0; /* Bootstrap primary blue or similar */
    font-weight: 600;
    margin-bottom: 1.5vw;
    letter-spacing: 0.1vw;
    margin-top: 1vw;
}

.story-overview-subtitle {
    font-size: 1vw;
    font-weight: 700;
    color: #14314a;
    margin-bottom: 2vw;
    letter-spacing: 0.05vw;
}

.story-overview-desc {
    font-size: 0.82vw;
    line-height: 1.8;
    color: #14314a;
    max-width: 48vw;
    margin: 0 auto 1vw auto;
    letter-spacing: 0.05vw;
}

/* Hexagon Layout */
.story-hexagon-wrapper {
    position: relative;
    width: 60vw;
    height: 30vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-hexagon-main {
    position: relative;
    width: 29vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-hexagon-bg {
    width: 100%;
    display: block;
}

.story-hexagon-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    color: #fff;
    z-index: 2;
}

.story-hexagon-content h4 {
    font-size: 2.05vw;
    font-weight: 700;
    margin-top: 0.8vw;
    margin-bottom: 0.8vw;
    letter-spacing: 0.1vw;
}

.story-hexagon-content p {
    font-size: 1.1vw;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.05vw;
}

/* Story Timeline Section */
.story-timeline-section {
    width: 100%;
    background: url('../imgs/story_banner4.jpg') no-repeat center bottom;
    background-size: cover;
    padding: 5vw 0 8vw 0;
    color: #14314a;
    overflow: hidden;
}

.story-timeline-container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.story-timeline-title {
    font-size: 1.9vw;
    color: #135AC0;
    font-weight: 700;
    margin-bottom: 1.5vw;
    margin-top: 1.5vw;
}

.story-timeline-subtitle {
    font-size: 1vw;
    font-weight: 600;
    color: #14314a;
    margin-bottom: 5vw;
}

.timeline-content-wrapper {
    min-height: 15vw;
    margin-bottom: 3vw;
    position: relative;
}

.timeline-content-item {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.timeline-content-item.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(1vw); }
    to { opacity: 1; transform: translateY(0); }
}

.timeline-year-big {
    font-size: 7vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 3vw;
    line-height: 1;
}

.timeline-item-title {
    font-size: 1vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 0.5vw;
}

.timeline-content-item p {
    font-size: 0.9vw;
    line-height: 1.8;
    color: #14314a;
    margin-bottom: 0;
}


/* Story Research Section */
.story-research-section {
    width: 100%;
    background: url('../imgs/story_banner5.jpg') no-repeat center center;
    background-size: cover;
    padding: 6vw 0;
    color: #14314a;
}

.story-research-container {
    width: 67%;
    margin: 0 auto;
}

.story-research-title {
    font-size: 1.9vw;
    color: #135AC0;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1vw;
    letter-spacing: 0.05vw;
}

.story-research-subtitle {
    font-size: 1vw;
    font-weight: 600;
    color: #14314a;
    text-align: center;
    margin-bottom: 4vw;
    letter-spacing: 0.05vw;
}

.research-numbers-row {
    display: flex;
    justify-content: center;
    gap: 12vw;
    margin-bottom: 4vw;
}

.research-number-item {
    text-align: center;
}

.research-num {
    font-size: 7vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 0.5vw;
    line-height: 1;
}

.research-number-item p {
    font-size: 1vw;
    color: #14314a;
    font-weight: 600;
}

.research-content-row {
    display: flex;
    gap: 4.5vw;
    align-items: stretch;
}

.research-text-left {
    flex: 0 0 37%;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.research-text-left h4 {
    font-size: 1vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 1.5vw;
    line-height: 1.4;
    letter-spacing: 0.05vw;
}

.research-text-left p {
    font-size: 0.85vw;
    line-height: 1.8;
    color: #14314a;
    margin-bottom: 1.5vw;
    text-align: justify;
}

.research-team-right {
    flex: 1;
    width: 0; /* Crucial for Swiper in Flexbox */
    min-width: 0; /* Prevent flex item from overflowing */
    overflow: hidden; /* For Swiper */
}

/* Team Member Card */
.team-member-card {
    position: relative;
    border-radius: 0.5vw;
    overflow: hidden;
    cursor: pointer;
}

.team-member-name {
    display: none; /* Hidden by default on PC */
}

.team-member-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-member-card:hover img {
    transform: scale(1.1);
}

.team-member-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 34, 68, 0.8); /* Blue overlay */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
}

.team-member-card:hover .team-member-info {
    opacity: 1;
}

.team-member-info h4 {
    font-size: 0.9vw;
    font-weight: 700;
    margin-bottom: 1vw;
    letter-spacing: 0.05vw;
}

.member-divider {
    width: 8vw;
    background-color: transparent;
    border-top: 1px dashed rgba(255,255,255,0.85);
    margin-bottom: 1vw;
}

.team-member-info p {
    font-size: 0.8vw;
    line-height: 1.8;
    text-align: justify;
}

/* Swiper Tweaks */
.researchSwiper {
    padding-bottom: 2vw; /* Space for shadow/overflow if needed */
    width: unset;
    height: unset;
}

.team-swiper-slide{
    height: unset;
    padding-top:unset;
}

/* Part 06: Responsibility Section */
.responsibility-section {
    position: relative;
    padding: 4vw 0 3vw 0;
    background: url('../imgs/story_banner6.jpg') no-repeat center center;
    background-size: 100%;
    color: #002244;
}

.responsibility-container {
    width: 70%;
    margin: 0 auto;
}

/* Header & Intro */
.responsibility-header {
    margin-bottom: 1vw;
    text-align: center;
}

.responsibility-title {
    font-size: 1.9vw;
    font-weight: bold;
    color: #135AC0;
    margin-bottom: 1vw;
    margin-top: 1.8vw;
}

.responsibility-subtitle {
    font-size: 1vw;
    font-weight: 600;
    color: #14314a;
    text-align: center;
    margin-bottom: 2.5vw;
    letter-spacing: 0.05vw;
}

.responsibility-intro {
    margin: 0 auto;
    width: 47vw;
}

.responsibility-intro h3 {
    font-size: 1vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 1vw;
    line-height: 1.4;
    letter-spacing: 0.05vw;
}

.responsibility-intro p{
    font-size: 0.85vw;
    line-height: 1.8;
    color: #14314a;
    text-align: center;
    letter-spacing: 0.05vw;
}

/* Responsibility Slider */
.responsibilitySwiper {
    position: relative;
    padding: 2vw 1vw; /* Space for shadow */
    width: unset;
    height: unset;
}

.responsibility-slide {
    height: 19vw;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
    padding-top:unset;
}

.responsibility-card {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 0.6vw;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%; /* Ensure equal height */
    text-align: center;
    padding: 3vw 1.5vw;
    position: relative;
}

/* Hover Effect: Scale Up & Shadow */
.responsibility-card:hover {
    transform: translateY(-0.5vw);
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.15);
}

.card-logo {
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.7vw;
}

.card-logo img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.responsibility-card:hover .card-logo img {
    transform: scale(1.05);
}

.card-content h4 {
    font-size: 1vw;
    color: #135AC0;
    margin-bottom: 0.5vw;
    font-weight: bold;
    letter-spacing: 0.05vw;
}

.card-content p {
    font-size: 0.95vw;
    color: #14314a;
    line-height: 1.5;
    margin-bottom: 0;
    letter-spacing: 0.05vw;
}

/* Navigation Buttons */
.responsibility-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1vw;
}

.responsibility-prev,
.responsibility-next {
    width: 3vw;
    height: 3vw;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #999;
}

.responsibility-prev:hover,
.responsibility-next:hover {
    border-color: #135AC0;
    color: #135AC0;
    background-color: #f0f6ff;
}

.responsibility-prev i,
.responsibility-next i {
    font-size: 1.2vw;
}

.responsibility-prev.swiper-button-disabled,
.responsibility-next.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #eee;
    color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
    .research-numbers-row {
        gap: 10vw;
    }
    .research-num {
        font-size: 10vw;
    }
    .research-content-row {
        flex-direction: column;
    }
    .research-text-left, .research-team-right {
        flex: 0 0 100%;
    }
    .team-member-card {
        height: 60vw;
    }
    .team-member-info h4 {
        font-size: 4vw;
    }
    .team-member-info p {
        font-size: 2.5vw;
    }
    
    /* Responsibility Responsive */
    .responsibility-title {
        font-size: 6vw;
    }
    .responsibility-subtitle {
        font-size: 3vw;
    }
    .responsibility-intro {
        max-width: 90vw;
        padding: 4vw;
    }
    .responsibility-intro h3 {
        font-size: 4.5vw;
    }
    .responsibility-intro p {
        font-size: 3vw;
    }
    .responsibilitySwiper {
        padding: 4vw 0;
    }
    .card-content h4 {
        font-size: 4vw;
    }
    .card-content p {
        font-size: 3vw;
    }
    .responsibility-prev,
    .responsibility-next {
        width: 8vw;
        height: 8vw;
    }
    .responsibility-prev i,
    .responsibility-next i {
        font-size: 4vw;
    }
}
.timeline-nav-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03); /* Very subtle background text */
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    letter-spacing: 1vw;
}

.timeline-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #135AC0;
    z-index: 1;
    transform: translateY(-50%);
}

.timeline-arrow {
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    background-color: #002244; /* Dark blue */
    color: #fff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s;
    font-size: 1.5vw;
}

.timeline-arrow.prev-btn {
    margin-left: 15vw;
    background-color: #135AC0;
}

.timeline-arrow.next-btn {
    margin-right: 15vw;
    background-color: #135AC0; /* Right arrow blue as per design */
}

.timeline-arrow:hover {
    background-color: #002244;
}

.timeline-points {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    margin: 0 8vw;
    position: relative;
    z-index: 2;
}

.timeline-point {
    position: relative;
    cursor: pointer;
    text-align: center;
}

.point-dot {
    display: block;
    width: 1vw;
    height: 1vw;
    background-color: #135AC0;
    border-radius: 50%;
    margin: 0 auto;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(11, 94, 215, 0);
}

.timeline-point.active .point-dot {
    background-color: #135AC0;
    box-shadow: 0 0 0 0.4vw rgba(11, 94, 215, 0.3); /* Outer ring effect */
    transform: scale(1.2);
}

.point-year {
    position: absolute;
    top: 2vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1vw;
    color: #135AC0;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Responsive */
.story-founder-section {
    width: 100%;
    background: url('../imgs/story_banner3.jpg') no-repeat center center;
    background-size: cover;
    padding: 6vw 0;
    color: #14314a;
}

.story-founder-container {
    width: 80%;
    margin: 0 auto;
}

.story-founder-title {
    font-size: 1.9vw;
    color: #135AC0;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.3vw;
    letter-spacing: 0.05vw;
    margin-top: 1.2vw;
}

.story-founder-subtitle {
    font-size: 1vw;
    font-weight: 600;
    color: #14314a;
    text-align: center;
    margin-bottom: 4vw;
    letter-spacing: 0.05vw;
}

.story-founder-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
}

.story-founder-left {
    flex: 0 0 30%;
    display: flex;
    justify-content: flex-end;
}

.story-founder-img-wrapper {
    width: 24vw;
    height: auto;
}

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

.story-founder-right {
    flex: 0 0 50%;
    text-align: left;
}

.story-founder-right h4 {
    font-size: 1vw;
    color: #135AC0;
    font-weight: 600;
    margin-bottom: 0.5vw;
    letter-spacing: 0.05vw;
}

.story-founder-right h2{
    font-size: 1.9vw;
    font-weight: 700;
    color: #14314a;
    margin-bottom: 1.5vw;
    letter-spacing: 0.05vw;
}

.story-founder-right h2 span {
    border-right: 1px solid #14314a; 
    margin:0 1vw;
    height: 1.8vw;
    display: inline-block;
    vertical-align: middle;
}

.founder-tags {
    display: flex;
    gap: 0.8vw;
    margin-bottom: 2vw;
    flex-wrap: wrap;
}

.founder-tags p {
    background-color: #135AC0;
    color: #fff;
    padding: 0.4vw 1.2vw;
    border-radius: 2vw;
    font-size: 0.8vw;
    font-weight: 600;
    letter-spacing: 0.05vw;
}

.founder-desc {
    font-size: 0.82vw;
    line-height: 1.8;
    color: #14314a;
    margin-top: 3vw;
}

.founder-desc p {
    margin-bottom: 1.2vw;
    text-align: justify;
    letter-spacing: 0.05vw;
}

/* Responsive */
@media (max-width: 768px) {
    .story-founder-content {
        flex-direction: column;
        gap: 8vw;
    }
    .story-founder-left, .story-founder-right {
        flex: 0 0 100%;
        text-align: center;
        justify-content: center;
    }
    .story-founder-img-wrapper {
        width: 50vw;
        height: 50vw;
    }
    .founder-tags {
        justify-content: center;
    }
    .founder-desc p {
        text-align: left;
    }
}
.story-hex-item {
    position: absolute;
    font-size: 1.1vw;
    color: #14314a;
    line-height: 1.4;
    z-index: 4;
    white-space: nowrap;
    letter-spacing: 0.05vw;
}

.story-hex-item strong {
    font-size: 1.3vw;
    color: #135AC0;
    font-weight: 700;
    letter-spacing: 0.05vw;
}

/* Positioning Text Items Relative to Wrapper */
/* Adjust based on main hexagon size which is centered */
/* Wrapper is 60vw wide, Hexagon is 22vw wide */
/* Center is at 30vw */

.item-tl { bottom: 78%; right: 66%; text-align: right; }
.item-tr { bottom: 78%; left: 66%; text-align: left; }

.item-ml { top: 51%; right: 76%; transform: translateY(-50%); text-align: right; }
.item-mr { top: 51%; left: 76%; transform: translateY(-50%); text-align: left; }

.item-bl { top: 82%; right: 66%; text-align: right; }
.item-br { top: 82%; left: 66%; text-align: left; }

/* Responsive tweaks if needed */
@media (max-width: 768px) {
    .story-hexagon-wrapper {
        width: 90vw;
        height: auto;
        flex-direction: column;
        padding-bottom: 10vw;
    }
    .story-hexagon-main {
        width: 50vw;
        margin-bottom: 5vw;
    }
    .story-hex-item {
        position: relative;
        text-align: center;
        margin: 2vw 0;
        /* left: auto;
        right: auto; */
        top: auto;
        bottom: auto;
        transform: none;
    }
    .hex-dot { display: none; }
}

.sec-head {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    position: relative;
    margin-top: 6vw;
}

.sec-head-01 {
    margin-bottom: 5vw;
    margin-top: -4vw;
}

.sec-head .aud-nav {
    position: absolute;
    right: 0;
    z-index: 99;
}

.sec-title {
    font-size: 1.6vw;
    font-weight: 800;
    color: #14314a;
    margin-bottom: 1.2vw;
    letter-spacing: .1vw;
    margin: 0 auto;
}

.sec-title2 {
    font-size: 2vw;
    font-weight: 800;
    color: #14314a;
    margin: 4vw 0 3.5vw 0;
    letter-spacing: .1vw;
}

.sec-title-en {
    font-size: 1.6vw;
    font-weight: 800;
    color: #14314a;
    margin-bottom: 1.2vw;
    letter-spacing: .1vw;
    margin: 0 auto;
}

.aud-nav {
    display: flex;
    gap: .8vw;
}

.aud-nav .icon-btn {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    background-color: #fff;
    border: 0.15vw solid #135AC0;
    color: #135AC0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all 0.3s ease;
    font-size: 1.4vw;
    font-weight: 900;
}

.aud-nav .icon-btn:hover {
    background-color: #135AC0;
    color: #fff;
}

.aud-nav .icon-btn.swiper-button-disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: default;
    background-color: #fff;
}

.aud-nav .icon-btn.swiper-button-disabled:hover {
    background-color: #fff;
    color: #ccc;
}

.aud-swiper {
    /* direction: rtl;
    padding-left: 16%; */
    box-sizing: border-box;
    height: auto;
    margin-top: -4vw;
}

@media (max-width: 768px) {
    .aud-swiper {
        padding-left: 10%;
    }
}

.aud-swiper .swiper-slide {
    height: auto;
}

.aud-card {
    position: relative;
    /* border: 0.1vw solid #e5edf8; */
    border-radius: 0.6vw;
    overflow: hidden;
    /* box-shadow: 0 1vw 2vw rgba(16, 24, 40, .06); */
}

.aud-card img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.aud-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.1vw;
    color: #fff;
    padding: 1.2vw 0;
    font-weight: 600;
    letter-spacing: 0.1vw;
    background: linear-gradient(to top, rgba(28, 84, 168, 0.6), transparent);
}

.aud-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 30, 50, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2vw;
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 10;
}

.aud-card:hover .aud-overlay {
    transform: translateY(0);
}

.aud-overlay-title {
    font-size: 1.2vw;
    font-weight: 600;
    margin-bottom: 0.8vw;
    letter-spacing: 0.1vw;
}

.aud-overlay-sub {
    font-size: 1vw;
    margin-bottom: 0.8vw;
    font-weight: 600;
    letter-spacing: 0.05vw;
}

.aud-overlay-line {
    width: 100%;
    height: 1px;
    border-top: 1px dashed rgba(255, 255, 255, 0.6);
    margin-bottom: 1vw;
}

.aud-overlay-desc {
    font-size: 0.8vw;
    line-height: 2;
    text-align: justify;
    letter-spacing: 0.05vw;
}

/* 产品01信息区 */
.info-01-container {
    width: 100%;
    position: relative;
    height: 40vw;
}

.myzdycc{
    height: unset !important;
}

.info-01 {
    width: 88vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 3vw;
    align-items: start;
    padding: 8vw 0;
    position: relative;
}

.info-head {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 2vw;
}

.info-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.info-chart {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: -2vw;
    z-index: 2;
    position: relative;
}

.info-chart-label {
    background: #135AC0;
    color: #fff;
    padding: 1.6vw 3vw;
    border-top-left-radius: 3.2vw;
    border-bottom-left-radius: 3.2vw;
    font-size: 1.6vw;
    font-weight: 600;
    margin-bottom: 0.5vw;
    margin-right: -3.5vw;
    width: 18vw;
}

.info-chart-grid {
    display: flex;
    background: #135AC0;
    color: #fff;
    border-top-left-radius: 3.2vw;
    border-bottom-left-radius: 3.2vw;
    padding: 1.5vw 2vw;
    align-items: center;
    box-shadow: 0 0.5vw 1vw rgba(19, 90, 192, 0.2);
}

.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255);
    padding: 0 0.5vw;
}

.chart-item:last-child {
    border-right: none;
}

.chart-name {
    font-size: 0.7vw;
    margin-bottom: 0.4vw;
    white-space: nowrap;
}

.chart-val {
    font-size: 1vw;
}

.info-prod-img {
    position: relative;
    z-index: 99;
}

.info-prod-img img {
    width: 12.3vw;
    display: block;
    margin-right: -1vw;
}

.info-right ul {
    /* margin-top: 1vw; */
    color: #14314a;
    line-height: 1.7vw;
    font-size: 0.8vw;
    letter-spacing: 0.05vw;
    /* padding-top: 1vw; */
    list-style-type: none;
    /* 移除默认圆点 */
    width: 66%;
    padding-left: 0;
    margin-top: -0.5vw;
}

.info-right ul li {
    position: relative;
    padding-left: 1vw;
}

.info-right ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7vw;
    /* 调整垂直位置以对齐文本 */
    width: 0.5vw;
    height: 0.5vw;
    background-color: #135AC0;
    /* 蓝色 */
    border-radius: 50%;
    /* 圆形 */
}

/* 产品01 FAQ */
.faq-01 {
    width: 70vw;
    margin: 0 auto;
    padding: 8vw 0 6vw;
}

.faq-item {
    border-radius: 0.7vw;
    background: #F5F9FF;
    margin-bottom: 1vw;
    overflow: hidden;
    position: relative;
    border-left: 0.3vw solid #135AC0;
}

.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vw 3vw 1.5vw 3vw;
    background: transparent;
    border: none;
    font-size: 1.1vw;
    font-weight: 600;
    color: #135AC0;
    cursor: pointer;
    text-align: left;
}

.faq-q i {
    font-size: 1.2vw;
    transition: transform 0.3s ease;
    background: #135AC0;
    color: #fff;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-item.active .faq-q i {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 0 2vw 1.5vw 3vw;
    font-size: 0.8vw;
    letter-spacing: 0.05vw;
    color: #666;
    line-height: 1.6;
    margin-top: -0.5vw;
}

.faq-item.active .faq-a {
    display: block;
}

.evidence-content{
    width: 70vw;
    margin: 0 auto;
    background-color:#135AC0;
    height: 10vw;
    text-align: center;
    color: #FFF;
    line-height: 1.8;
    padding-top: 1.6vw;
    position: relative;
    margin-top: 2vw;
    margin-bottom: 2vw;
    border: 1px solid #135AC0;

}

.evidence-content:hover{
    background-color: #FFF;

}

.evidence-banner-label {
    position: absolute;
    top: 0;
    left: 1.6vw;
    background-color: #ffffff;
    color: #135AC0;
    font-size: 1.2vw;
    font-weight: 600;
    letter-spacing: 0vw;
    width: 4.4vw;
    height: 5vw;
    padding-top: 0.3vw;
    padding-left: 0.6vw;
    padding-right: 0.6vw;
    line-height: 1.4;
    text-align: center;
    margin-top: -1px;
    border-top: 1px solid #FFF;
}

.evidence-content:hover .evidence-banner-label{
    border-top: 1px solid #135AC0;
    margin-top: -1px;
    background-color: #135AC0;
    color: #FFF;
}

.evidence-banner-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2.2vw 0.9vw 2.2vw;
    border-color: transparent transparent #135AC0 transparent;
    margin-top: -0.88vw;
}

.evidence-content:hover .evidence-banner-label::after{
    border-color: transparent transparent #FFF transparent;
}

.evidence-title{
    font-size: 1.15vw;
    font-weight: 600;
    letter-spacing: 0.03vw;
}

.evidence-content:hover .evidence-title{
    color: #135AC0;
}

.evidence-des{
    font-size: 1.05vw;
    font-weight: lighter;
    margin: 0.3vw 0;
}

.evidence-content:hover .evidence-des{
    color: #135AC0;
    font-weight: normal;
}

.evidence-btn{
    font-size: 0.85vw;
    font-weight: lighter;
    margin: 0.5vw 0;
    height: 1.6vw;
    border-bottom: 1px solid #FFF;
    display: inline-block;
}

.evidence-content:hover .evidence-btn{
    color: #135AC0;
    border-bottom: 1px solid #135AC0;
    font-weight: normal;
}

.evidence-btn a{
    color: #FFF;
    text-decoration: none;
}

.evidence-content:hover .evidence-btn a{
    color: #135AC0;
}

.prod-info .prod-name {
    font-size: 1vw;
    font-weight: 700;
}

.prod-info .prod-note {
    font-size: 0.8vw;
    color: #14314a;
    margin: 0.6vw 0 1.2vw;
}

/* New additions */
.sec-title-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.sec-title-group .sec-title {
    margin: 0;
    margin-bottom: 1vw;
    line-height: 1;
}

.sec-title-group .sec-title-en {
    margin: 0;
    font-size: 1vw;
    color: #666;
    font-weight: 300;
    letter-spacing: 0.02vw;
}

/* Duplicates removed */

/* 团标与白皮书 */
.standards-section {
    padding: 6vw 0;
    background: #fff;
}

.standards-container {
    width: 72vw;
    margin: 0 auto;
}

.std-tabs {
    display: flex;
    gap: 2vw;
    margin-bottom: 4vw;
}

.std-tab {
    font-size: 1.1vw;
    color: #14314a;
    cursor: pointer;
    font-weight: 600;
    padding-bottom: 0.5vw;
    border-bottom: 0.2vw solid transparent;
}

.std-tab.active {
    color: #135AC0;
    border-bottom-color: #135AC0;
}

.std-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.std-content.active {
    display: block;
    opacity: 1;
}

.std-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5vw 6vw;
    align-items: start;
    width: 64vw;
    margin: 0 auto;
}

.std-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.std-img {
    width: 100%;
    margin-bottom: 1.5vw;
    box-shadow: 0.4vw 0.2vw 1vw rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.std-img:hover {
    transform: translateY(-0.5vw);
    box-shadow: 0.8vw 1.2vw 2.2vw rgba(0, 0, 0, 0.18);
}

.std-img img {
    width: 100%;
    height: auto;
    display: block;
}

.std-title {
    font-size: 1.1vw;
    font-weight: 700;
    color: #135AC0;
    margin-bottom: 1vw;
}

.std-desc {
    font-size: 0.7vw;
    color: #14314a;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 1.5vw;
    text-align: justify;

}

.std-links {
    display: flex;
    gap: 2vw;
    margin-top: auto;
    justify-content: center;
}

.std-link {
    font-size: 0.8vw;
    color: #14314a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.std-link:hover {
    color: #135AC0;
    border-bottom-color: #135AC0;
}

/* 弹窗样式 */
.cert-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.cert-modal-content {
    position: relative;
    margin: 10% auto;
    padding: 0;
    width: 40vw;
    max-width: 90%;
}

.cert-modal-content img {
    width: 100%;
    height: auto;
    display: block;
}

.cert-close {
    position: absolute;
    top: -2vw;
    right: -2vw;
    color: #f1f1f1;
    font-size: 2vw;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.cert-close:hover,
.cert-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.xue-section {
    background-image: url('../imgs/xue_bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 6vw 0;
}

.xue-container {
    width: 72vw;
    margin: 0 auto;
}

.xue-header {
    text-align: center;
    margin-bottom: 5vw;
}

.xue-title {
    font-size: 2vw;
    font-weight: 800;
    color: #135AC0;
    margin-bottom: 1.5vw;
    letter-spacing: 0.1vw;
}

.xue-desc {
    font-size: 1vw;
    color: #14314a;
    font-weight: 600;
}

.xue-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-items: center;
    margin-bottom: 6vw;
}

.xue-row:last-child {
    margin-bottom: 0;
}

.xue-col-img {
    display: flex;
    justify-content: center;
}

.xue-col-img img {
    width: 100%;
    height: auto;
}

.padding-right {
    padding-right: 3vw;
}

.padding-left {
    padding-left: 3vw;
}

.xue-col-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xue-icon {
    margin-bottom: 1.5vw;
}

.xue-icon img {
    height: 1.8vw;
    width: auto;
}

.xue-text {
    font-size: 0.8vw;
    line-height: 1.8;
    color: #14314a;
    text-align: justify;
    font-weight: 600;
    letter-spacing: 0.05vw;
}

/* Patent Section */
.patent-section {
    position: relative;
    width: 100%;
    padding: 0 0 9vw 0;
    background-image: url('../imgs/yan_bg.jpg');
    background-size: cover;
    background-position: center;
}

.patent-container {
    width: 72vw;
    margin: 0 auto;
}

.patent-img {
    margin-top: 9vw;
}

.patent-img .img-fluid {
    width: 100%;
}

.patent-content {
    padding-left: 4vw;
}

.patent-title {
    font-size: 1.9vw;
    font-weight: 800;
    color: #135AC0;
    margin-bottom: 2vw;
    letter-spacing: 0.1vw;
}

.patent-desc {
    margin-bottom: 3vw;
}

.patent-desc p {
    font-size: 1vw;
    font-weight: 600;
    color: #14314a;
    margin-bottom: 0.8vw;
    line-height: 1.2;
    letter-spacing: 0.05vw;
}

/* Patent Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.patent-modal-content {
    position: relative;
    width: 70vw;
    height: 90vh;
    background-color: #fff;
    border-radius: 0.5vw;
    padding: 3vw;
    box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.patent-close {
    position: absolute;
    top: 2vw;
    right: 2vw;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}

.patent-close img {
    width: 2vw;
    height: 2vw;
}

.patent-modal-body {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 5;
}

.pm-left {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.patent-swiper {
    width: 25vw;
    height: 35vw;
    margin-bottom: -2vw;
    z-index: 2;
}

.patent-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.patent-swiper .swiper-slide img {
    max-width: 100%;
    /* max-height: 100%; */
    object-fit: contain;
    box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.1);
    width: 85%;
}

.pm-base {
    width: 28vw;
    z-index: 1;
    margin-top: -1vw;
}

.pm-base img {
    width: 100%;
}

.pm-right {
    flex: 1;
    padding-left: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pm-info {
    margin-bottom: 3vw;
    max-width: 25vw;
}

.pm-label {
    font-size: 0.9vw;
    color: #135AC0;
    font-weight: 600;
    margin-bottom: 0.2vw;
}

.pm-title {
    font-size: 1.15vw;
    font-weight: 700;
    letter-spacing: 0.05vw;
    color: #135AC0;
    margin-bottom: 2vw;
}

.pm-info p {
    font-size: 0.75vw;
    color: #14314a;
    line-height: 1.6;
    font-weight: 500;
}

.pm-nav {
    display: flex;
    gap: 1vw;
}

.pm-prev,
.pm-next {
    width: 2.2vw;
    height: 2.2vw;
    border-radius: 50%;
    background-color: #135AC0;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pm-prev:hover,
.pm-next:hover {
    background-color: #0f172a;
}

.pm-prev i,
.pm-next i {
    font-size: 1.2vw;
}

.pm-bg-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0.8;
    width: 30vw;
}

.pm-bg-decoration img {
    width: 100%;
    display: block;
}

.yan_swiper {
    height: unset !important;
    padding-top: unset !important;
}

/* Honors Section */
.honors-section {
    padding: 6vw 0;
    text-align: center;
    background-color: #fff;
    overflow: hidden;
}

.honors-title {
    color: #135AC0;
    font-size: 2vw;
    font-weight: 800;
}

.honors-desc {
    font-size: 1vw;
    color: #14314a;
    font-weight: 600;
    margin-top: 1vw;
}

.honors-container {
    position: relative;
    width: 100%;
    margin-top: 1vw;
}

.honors-swiper {
    width: 100%;
    padding-bottom: 4.5vw;
    overflow: visible;
    height: 30vw;
    z-index: 9;
}

.honors-swiper .swiper-slide {
    width: 15.5vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: transform 0.3s;
    opacity: 1;
}

.honors-swiper .swiper-slide img {
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    width: 100%;
}

.honors-base {
    position: absolute;
    bottom: 3.5vw;
    /* Align with bottom of swiper slides */
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.honors-base img {
    width: 100%;
    display: block;
}

.honors-nav {
    display: flex;
    justify-content: center;
    gap: 0.5vw;
    margin-top: 2vw;
}

.honors-prev,
.honors-next {
    width: 2.3vw;
    height: 2.3vw;
    border-radius: 50%;
    border: 2px solid #135AC0;
    color: #135AC0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.honors-prev:hover,
.honors-next:hover {
    background-color: #135AC0;
    color: #fff;
}

.honors-prev.swiper-button-disabled,
.honors-next.swiper-button-disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: default;
    background-color: transparent;
    opacity: 0.5;
}

.honors-prev i,
.honors-next i {
    font-size: 1vw;
}

/* 生产实力页面 - 品质基石 */
.chan-section {
    padding: 4.5vw 0;
    background-color: #fff;
    overflow: hidden;
}

.chan-container {
    width: 80vw;
    margin: 0 auto;
    box-sizing: border-box;
}

.chan-container2 {
    width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
}

.chan-container3 {
    width: 70vw;
    margin: 0 auto;
    box-sizing: border-box;
}


.chan-container4 {
    width: 70vw;
    margin: 0 auto;
    box-sizing: border-box;
}

.chan-title {
    color: #135AC0;
    font-weight: bold;
    font-size: 1.9vw;
    letter-spacing: 0.05vw;
    margin-bottom: 2.5vw !important;
}

/* 权威认证 Section */
.auth-section {
    padding: 3vw 0 5vw;
    background: #fff;
}

.auth-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
    margin-bottom: 3vw;
    font-size: 1vw;
    color: #1f2937;
    font-weight: 600;
}

.auth-tab {
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab:hover,
.auth-tab.active {
    color: #135AC0;
}

.auth-tab-divider {
    border-right: 1px solid #14314a;
    height: 1vw;
}

.auth-content-wrapper {
    position: relative;
    height: 24vw;
}

.auth-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.auth-content.active {
    display: block;
    opacity: 1;
}

.auth-swiper {
    padding: 1vw 1vw 6vw !important; /* Increased bottom padding to 6vw to show nav buttons */
    overflow: hidden;
    max-width: 78vw; /* Increased from 60vw to make items wider */
    margin: 0 auto;
    height: 25vw;
}

.mys-auth-slide{
    /* height: 22vw; */
    padding-top: 0vw;
}

.auth-card {
    background: #F5F8FF;
    border-radius: 1vw;
    padding: 1.5vw;
    text-align: center;
    height: 100%;
    /* min-height: 14vw;  *//* Reduced from 18vw to make aspect ratio wider */
    height: 18vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 0.5vw;
}

.auth-card:hover {
    transform: translateY(-0.5vw);
    box-shadow: 0 1vw 2vw rgba(19, 90, 192, 0.1);
}

.auth-img-box {
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5vw;
}

.auth-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.auth-text {
    font-size: 0.8vw;
    color: #14314a;
    line-height: 1.5;
    font-weight: 600;
}

.auth-text p {
    margin: 0;
}

/* Swiper Navigation for Auth Section */
.swiper-navigation-box {
    display: flex;
    justify-content: center;
    gap: 1vw;
    position: relative;
    z-index: 10;
    margin-top: 2.2vw;
}

.auth-prev,
.auth-next {
    width: 3vw;
    height: 3vw;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #999;
}

.auth-prev:hover,
.auth-next:hover {
    border-color: #135AC0;
    color: #135AC0;
    background-color: #f0f6ff;
}

.auth-prev i,
.auth-next i {
    font-size: 1.2vw;
}

.auth-prev.swiper-button-disabled,
.auth-next.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #eee;
    color: #ccc;
}

/* Lesson Page Styles */
.lesson-banner-wrap {
    position: relative;
    width: 100%;
}

.lesson-banner-bg {
    width: 100%;
    display: block;
    min-height: 45vw; /* Increased to ensure enough space */
    object-fit: cover;
}

.lesson-top-carousel-container {
    position: absolute;
    top: 58%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    z-index: 10;
}

.lesson-top-swiper {
    /* padding: 2vw 0 4vw !important; */ /* Space for shadow and bottom nav */
    overflow: hidden;
    width: unset !important;
    height: unset;
    margin-top: -10vw;
}

.lesson-top-swiper .swiper-slide {
    width: 52vw; /* Adjusted to show half of side items */
    height: auto;
    transition: all 0.3s ease;
    opacity: 1;
    padding-left: 1vw;
    padding-right: 1vw;
}

.lesson-top-swiper .swiper-slide-active {
    opacity: 1;
    z-index: 10;
    padding-left: 1vw;
    padding-right: 1vw;
}

.lesson-top-swiper .swiper-slide-active .lesson-top-card,
.lesson-top-swiper .swiper-slide-active .lesson-card-left {
    /* background: transparent !important; */
    box-shadow: none !important;
}

.lesson-top-card {
    display: flex;
    background: #fff;
    border-radius: 1vw;
    overflow: hidden;
    box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.08);
    height: 24vw; /* Restored height */
    transition: all 0.3s;
}

/* ... existing styles ... */
.lesson-card-left {
    flex: 1;
    padding: 3vw 3vw 1vw 3vw; /* Restored padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: #fff;
}

.lesson-card-title {
    font-size: 0.9vw; /* Restored font size */
    font-weight: bold;
    color: #14314a;
    margin-bottom: 1.2vw;
    line-height: 1.5;
    /* padding-right: 1.5vw; */
    letter-spacing: 0.05vw;
    text-align: center;
}

.lesson-card-divider {
    width: 1.2vw;
    height: 1px;
    background: #14314a;
    margin: 0 auto;
    margin-top: 1.4vw;
}

.lesson-card-desc {
    font-size: 0.75vw; /* Slightly larger */
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    /* padding-right: 1.5vw; */
    text-align: center;
    overflow: hidden;
}

.btn-lesson-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2vw;
}

.btn-lesson-more {
    display: inline-block;
    padding: 0.2vw 1.7vw;
    border: 1px solid #135AC0; /* Always blue border */
    color: #FFF; /* Default blue text */
    background: #135AC0; /* Default white background */
    text-decoration: none;
    /* border-radius: 0.2vw; */
    font-size: 0.7vw;
    transition: all 0.3s;
    width: fit-content;
    margin: 0 auto;
}

/* Active Slide Button Style */
.btn-lesson-more:hover {
    background: #FFF;
    color: #135AC0;
}

.lesson-card-right {
    flex: 2; /* Image side slightly larger */
    position: relative;
    height: 100%;
}

.lesson-card-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-logo-overlay {
    position: absolute;
    top: 1.5vw;
    right: 1.5vw;
    width: 8vw !important;
    height: auto !important;
    object-fit: contain !important;
}

.lesson-top-swiper-wrapper{
    height: auto !important;
}

.lesson-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.5vw;
    margin-top: 4vw;
}

.lesson-prev,
.lesson-next {
    width: 2.3vw;
    height: 2.3vw;
    border-radius: 50%;
    border: 2px solid #135AC0;
    color: #135AC0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background-color: transparent;
}

.lesson-prev:hover,
.lesson-next:hover {
    background-color: #135AC0;
    color: #fff;
}

.lesson-prev.swiper-button-disabled,
.lesson-next.swiper-button-disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: default;
    background-color: transparent;
    opacity: 0.5;
}

.lesson-prev i,
.lesson-next i {
    font-size: 1vw;
}

/* More Section */
.lesson-more-section {
    background: #fff;
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.lesson-grid-item {
    border-radius: 1vw;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
}

.grid-img-box {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

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

.grid-logo-overlay {
    position: absolute;
    top: 1.1vw;
    right: 1.5vw;
    width: 8vw !important;
    height: auto !important;
    object-fit: contain !important;
}

.grid-text-box {
    background: #F8F9FA;
    padding: 1.4vw 0vw 1.2vw 1.5vw;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lesson-grid-item:hover .grid-text-box {
    background: #EAF3FF;
}

.grid-title {
    font-size: 0.9vw;
    font-weight: bold;
    color: #14314a;
    margin-bottom: 0.9vw;
    letter-spacing: 0.05vw;
}

.grid-link {
    font-size: 0.7vw;
    color: #135AC0;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05vw;
}

.btn-load-more {
    background: none;
    border: none;
    font-size: 0.9vw;
    color: #14314a;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.2vw;
    margin: 0 auto;
    font-weight: 600;
    padding: 3.5vw 2vw 0vw 2vw;
    letter-spacing: 0.1vw;
}

.btn-load-more:hover {
    color: #135AC0;
}

/* Hide navigation if loop is false or not needed */
.auth-swiper.no-nav .swiper-navigation-box {
    display: none;
}

.chan-desc{
    margin-bottom: 2.5vw;
}

.chan-desc p {
    margin-bottom: 0.3rem;
    font-size: 1vw;
    color: #14314a;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.05vw;
}

/* News Page Banner Overlay */
.news-hero-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw; /* Adjust width as needed */
    border-radius: 0.5vw;
    z-index: 10;
    overflow: hidden;
}

.news-hero-content {
    display: flex;
    width: 100%;
    height: 22vw; /* Fixed height for the card */
}

.news-hero-left {
    flex: 1.5; /* Left side image slightly larger or equal */
    overflow: hidden;
}

.news-hero-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.news-hero-right {
    flex: 1;
    padding: 3vw 0vw 0 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-meta {
    display: flex;
    align-items: center;
    font-size: 0.7vw;
    color: #666;
    margin-bottom: 1.2vw;
}

.news-category {
    font-weight: 500;
}

.news-date {
    font-family: Arial, sans-serif;
}

.news-title {
    font-size: 1.25vw;
    font-weight: bold;
    color: #14314a; /* Brand Blue */
    line-height: 1.4;
    margin-bottom: 1.2vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0.1vw;
}

.news-desc {
    font-size: 0.7vw;
    color: #666;
    line-height: 1.6;
    margin-bottom: 2vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0.05vw;
}

.news-explore-btn {
    font-size: 0.7vw;
    color: #135AC0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
}

.news-explore-btn:hover {
    color: #0d3e87; /* Darker blue on hover */
}

.chan-swiper-container {
    margin-top: 1.5vw;
    position: relative;
    padding-bottom: 1vw;
}

.chan-swiper {
    padding: 1vw 5vw 0 5vw;
    margin: 0vw;
    overflow: unset;
    height: 23vw;
}

.chan-swiper .swiper-slide {
    height: 20vw;
    padding-top: unset;
}

.chan-card {
    border: 1px solid #ddd;
    border-radius: 1.2vw;
    padding: 2.5vw 2.8vw;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: all 0.3s ease;
    background-color: #fff;
    cursor: pointer;
}

.chan-card:hover {
    background-color: #135AC0;
    border-color: #135AC0;
    box-shadow: 0 10px 20px rgba(19, 90, 192, 0.2);
}

.chan-card:hover .chan-card-title,
.chan-card:hover p {
    color: #fff;
}

.chan-card:hover .chan-icon {
    filter: brightness(0) invert(1);
}

/* News List Styles */
.news-list-section {
    padding-top: 5vw;
    background: #fff;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}

.news-item {
    background: #fff;
    border-radius: 0.5vw;
    padding: 1.45vw 1.45vw 2.45vw 1.45vw;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    margin-bottom: 2.8vw;
}

.news-item:hover {
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.2);
    z-index: 99;
}

.news-item-img {
    position: relative;
    width: 100%;
    padding-bottom: 65%;
    overflow: hidden;
    margin-bottom: 1.5vw;
}

.news-item-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    /* 保持比例不变，裁剪多余部分 */
}

.news-item:hover .news-item-img img {
    transform: scale(1.05);
}

.news-item-meta {
    display: flex;
    align-items: center;
    font-size: 0.7vw;
    color: #666;
    margin-bottom: 0.8vw;
}

.news-item-meta2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7vw;
    color: #666;
    margin-bottom: 2.8vw;
}

.news-item-cat {
    font-weight: 500;
}

.news-divider,
.news-item-divider {
    width: 1px;
    height: 0.8vw;
    background: #999;
    margin: 0 0.5vw;
}

.news-item-title {
    font-size: 1vw;
    font-weight: bold;
    color: #14314a;
    line-height: 1.8;
    margin-bottom: 0.5vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.5vw;
    transition: color 0.3s;
    letter-spacing: 0.05vw;
}

.news-item:hover .news-item-title {
    color: #135AC0;
}

.news-item-desc {
    font-size: 0.7vw;
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.5vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.75vw;
    letter-spacing: 0.05vw;
}

.news-item-link {
    font-size: 0.7vw;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}

.news-item:hover .news-item-link {
    color: #135AC0;
}

.chan-icon-wrapper {
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1vw;
    width: 100%;
}

.chan-icon {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
    margin-left: 0;
}

.chan-card-title {
    font-size: 1.5vw;
    font-weight: bold;
    color: #14314a;
    margin-bottom: 4vw;
    transition: color 0.3s ease;
    letter-spacing: 0.05vw;
}

.chan-divider {
    width: 100%;
    border-top: 1px dashed #ccc;
    margin: 0.5vw 0;
    transition: border-color 0.3s ease;
}

.chan-card:hover .chan-divider {
    border-color: rgba(255, 255, 255, 0.5);
}

.chan-card p {
    font-size: 0.8vw;
    color: #14314a;
    line-height: 1.3;
    transition: color 0.3s ease;
    margin-top: 1vw;
}

/* Navigation Buttons */
.chan-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1vw;
}

.chan-prev,
.chan-next {
    width: 3vw;
    height: 3vw;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #999;
}
.chan-prev:hover,
.chan-next:hover {
    border-color: #135AC0;
    color: #135AC0;
    background-color: #f0f6ff;
}

.chan-prev i,
.chan-next i {
    font-size: 1.2vw;
}

.chan-prev.swiper-button-disabled,
.chan-next.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #eee;
    color: #ccc;
}

.products-page-container {
    width: 100%;
    margin: 0 auto;
}

.prod-hero-container {
    /* padding-top: calc(var(--nav-height) + 0vw); */
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    position: relative;
}

.lesson-nav-footer{
    /* padding-bottom: 0vw; */
}

.news-container-border{
    border-top: 1px solid #135AC0;
    padding-top: 3vw;
}

/* News List Header Styles */
.news-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
}

.news-other-title {
    font-size: 1.4vw;
    font-weight: 600;
    color: #14314a;
    margin: 0;
    letter-spacing: 0.05vw;
}

.news-more-link {
    font-size: 1vw;
    color: #135AC0;
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 600;
}


/* Story Page Banner */
.story-banner-section {
    width: 100%;
    height: 35vw;
    background: url('../imgs/story_banner1.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 0;
}

.story-banner-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
}

.story-title-img {
    width: 31vw;
}

.story-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 1.8vw;
    margin-top: 0.5vw;
}

.story-subtitle-text {
    font-size: 1.5vw;
    color: #14314a;
    font-weight: 500;
    letter-spacing: 0.15vw;
}

.story-line {
    width: 14vw;
    height: 2px;
}

.story-line-left {
    background: linear-gradient(90deg, transparent, #14314a, #14314a);
}

.story-line-right {
    background: linear-gradient(90deg, #14314a, #14314a, transparent);
}

.story-video-trigger {
    display: flex;
    align-items: center;
    gap: 0.8vw;
    cursor: pointer;
    margin-top: 1.7vw;
    transition: transform 0.3s;
}

.story-video-trigger:hover {
    transform: scale(1.05);
}

.story-play-icon img {
    width: 2vw;
    height: 2vw;
}

.story-play-text {
    font-size: 0.8vw;
    color: #135AC0;
    font-weight: 600;
    letter-spacing: 0.05vw;
}

/* Video Modal */
.story-video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.story-video-container {
    position: relative;
    width: 70%;
    max-width: 1000px;
    background: #14314a;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.story-video-close {
    color: #fff;
    position: absolute;
    top: -2.5vw;
    right: -2.5vw;
    font-size: 2.5vw;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.story-video-close:hover {
    color: #bbb;
}

.story-video-player {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.story-detail-page {
    height: 100%;
    width: 100%;
    position: relative;
}
.story-main-swiper {
    width: 100%;
    height: 100%;
}
.story-main-swiper > .swiper-wrapper > .swiper-slide {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.story-banner-section,
.story-overview-section,
.story-founder-section,
.story-timeline-section,
.story-research-section {
    width: 100%;
    height: 100%;
}

.story-scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.story-banner-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.story-video-modal {
    z-index: 9999;
}

#part06.swiper-slide {
    padding-top: 0 !important;
}

#part06 .responsibility-section {
    /* padding-top: calc(var(--nav-height, 100px) + 7vw) !important; */
    min-height: 100%; /* Ensure background covers full height even if content is short */
    background-attachment: scroll; /* Ensure background scrolls with content */
}

/* 响应式图片显示控制 */
.pc-show {
    display: block;
}
.mobile-show {
    display: none;
}

@media (max-width: 768px) {
    .pc-show {
        display: none !important;
    }
    .mobile-show {
        display: block !important;
    }
}