/* ============================================================
   index.css —— 仅首页 index.html 使用（页面级样式）
   包含：Banner 轮播、产品/About/Industries/Why 等首页各屏区块
   注意：公共组件样式（header/quote 等）已移至 common.css
   ============================================================ */

/* ============================================================
   首页 Banner 轮播
   ============================================================ */
.banner {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
}

.banner__viewport {
    position: relative;
    width: 100%;
    padding-top: 50%;
    /* 1920 x 960 比例 */
}

.banner__track {
    position: absolute;
    inset: 0;
}

.banner__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.05s linear 0.65s;
}

.banner__slide.is-active {
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    transition: opacity 0.05s linear;
}

.banner__slide.is-leaving {
    opacity: 0;
    z-index: 2;
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04) translateY(0);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
}

.banner__slide.is-active .banner__bg {
    opacity: 1;
    animation: banner-enter 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.banner__slide.is-leaving .banner__bg {
    transform: scale(1.08) translateY(-0.3rem);
    opacity: 0;
}

@keyframes banner-enter {
    from {
        opacity: 0;
        transform: scale(1.25) translateY(2rem);
    }

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

.banner__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.15) 45%,
            rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.banner__content {
    position: absolute;
        left: 1.48rem;
    top: 3.41rem;
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.banner__eyebrow {
    color: #FFF;
    text-shadow: 0 0.04rem 0.04rem rgba(0, 0, 0, 0.56);
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 0.16rem;
}

.banner__title {
    color: #FFF;
    text-shadow: 0 0 0.093rem rgba(0, 0, 0, 0.51);
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.16rem;
}

.banner__title div {
    line-height: 1.15;
}

.banner__desc {
    color: #FFF;
    text-shadow: 0 0.02rem 0.065rem rgba(0, 0, 0, 0.25);
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin-bottom: 0.6rem;
}

.banner__btn {
    display: inline-flex;
    padding: 0.12rem 0.20rem; /* 12px 20px */
    justify-content: center;
    align-items: center;
    gap: 0.10rem; /* 10px */
    background: #044EAD;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    border: none;
    width: max-content;
}

.banner__btn img {
    width: 0.16rem; /* 16px */
    height: 0.16rem; /* 16px */
    display: block;
}

.banner__btn:hover {
    background: #0A5AD0;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(4, 78, 173, 0.4);
    filter: brightness(1.08);
}

.banner__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.59rem;
    height: 0.59rem;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.banner__arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.banner__arrow--left {
    left: 0.68rem;
}

.banner__arrow--right {
    right: 0.68rem;
}

.banner__arrow img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 箭头内联 SVG：悬浮缩放 + 方向位移 + 圆底提亮 + 箭头前冲 + 扩散光环 */
.banner__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner__arrow circle {
    transition: opacity 0.3s ease;
}

.banner__arrow path {
    transition: stroke 0.3s ease;
}

/* 悬浮扩散光环 */
.banner__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 0.02rem solid rgba(255, 255, 255, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.banner__arrow:hover {
    opacity: 1;
}

.banner__arrow:hover::before {
    opacity: 1;
    animation: banner-arrow-ring 1.1s ease-out infinite;
}

.banner__arrow:hover svg {
    transform: scale(1.12);
}

.banner__arrow:hover circle {
    opacity: 0.5;
}

.banner__arrow:hover path {
    stroke: #FFF;
}

.banner__arrow--right:hover svg {
    transform: scale(1.12) translateX(0.04rem);
}

.banner__arrow--left:hover svg {
    transform: scale(1.12) translateX(-0.04rem);
}

@keyframes banner-arrow-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* ---------- H5 Banner ---------- */
html[data-mode="h5"] .banner__content {
    left: 0.4rem;
    top: 0.95rem;
    max-width: 5.8rem;
}

html[data-mode="h5"] .banner__eyebrow {
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
}

html[data-mode="h5"] .banner__title {
    font-size: 0.32rem;
    margin-bottom: 0.1rem;
}

html[data-mode="h5"] .banner__desc {
    font-size: 0.16rem;
    margin-bottom: 0.24rem;
}

html[data-mode="h5"] .banner__btn {
    font-size: 0.18rem;
    padding: 0.12rem 0.24rem;
}

html[data-mode="h5"] .banner__arrow {
    width: 0.5rem;
    height: 0.5rem;
}

html[data-mode="h5"] .banner__arrow--left {
    left: 0.16rem;
}

html[data-mode="h5"] .banner__arrow--right {
    right: 0.16rem;
}

/* ---------- Banner 指示点 ---------- */
.banner__dots {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.16rem;
}

.banner__dot {
    position: relative;
    width: 0.30rem; /* 30px */
    height: 0.04rem; /* 4px */
    border-radius: 0.04rem;
    background: #FFF;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    transition: width 0.35s ease, opacity 0.25s ease;
}

.banner__dot:hover {
    opacity: 0.75;
}

.banner__dot.is-active {
    width: 0.60rem; /* 60px */
    opacity: 1;
}

/* 激活态内部蓝色进度条：随轮播切换间隔动态填满白色色块 */
.banner__dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #044EAD;
    transform-origin: left center;
    transform: scaleX(0);
    animation: banner-dot-fill var(--banner-dot-duration, 5000ms) linear forwards;
}

@keyframes banner-dot-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

html[data-mode="h5"] .banner__dots {
    bottom: 0.2rem;
    gap: 0.12rem;
}

/* ============================================================
   Banner 按钮悬浮微交互
   底色渐变自左向右擦入 + 高光斜向扫过 + 轻微上浮
   ============================================================ */

.banner__btn {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* 高光扫过层：半透明白色斜条，掠过按钮表面 */
.banner__btn::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.banner__btn:hover {
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-size: 100% 100%;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.05rem 0.14rem rgba(2, 52, 125, 0.22);
    filter: none;
}

.banner__btn:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.banner__btn:active {
    transform: translateY(0);
    box-shadow: 0 0.01rem 0.04rem rgba(2, 52, 125, 0.16);
    transition-duration: 0.12s;
}

/* ============================================================
   第八屏：Our Partners
   设计稿基准：1919×507（1rem = 100px）
   ============================================================ */
.eight {
    position: relative;
    width: 100%;
    max-width: 19.19rem;
    height: 5.07rem;
    margin: 0 auto;
    background: url("../assets/images/home/eight-img1.webp") no-repeat center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.eight__title {
    position: relative;
    z-index: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.5rem; /* 下边距 50px */
}

/* 标题背后的横线 */
.eight__title::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    width: 3.24rem; /* 324px */
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    z-index: -1;
}

.eight__grid {
    display: grid;
    grid-template-columns: repeat(5, 2.14rem); /* 214px */
    gap: 0.3rem; /* 30px */
    list-style: none;
    perspective: 9rem;
}

.eight__item {
    width: 2.14rem; /* 214px */
    height: 1rem; /* 100px */
    background: #FFF;
    box-shadow: 0 0.02rem 0.08rem rgba(2, 52, 125, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.eight__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eight__item:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.1rem 0.22rem rgba(2, 52, 125, 0.18);
}

.eight__item:hover img {
    animation: eightLogoPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eightLogoPulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ----------
   横线自中心展开 → 标题带模糊上浮收拢字距 → Logo 3D 翻转入场逐个错峰 */
html.js .eight:not(.is-in-view) .eight__title,
html.js .eight:not(.is-in-view) .eight__item {
    opacity: 0;
}

.eight.is-in-view .eight__title::before {
    transform-origin: center;
    animation: eightBarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.eight.is-in-view .eight__title {
    animation: eightTitleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.eight.is-in-view .eight__item {
    transform-style: preserve-3d;
    animation: eightFlipIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.eight.is-in-view .eight__item:nth-child(1) { animation-delay: 0.30s; }
.eight.is-in-view .eight__item:nth-child(2) { animation-delay: 0.37s; }
.eight.is-in-view .eight__item:nth-child(3) { animation-delay: 0.44s; }
.eight.is-in-view .eight__item:nth-child(4) { animation-delay: 0.51s; }
.eight.is-in-view .eight__item:nth-child(5) { animation-delay: 0.58s; }
.eight.is-in-view .eight__item:nth-child(6) { animation-delay: 0.65s; }
.eight.is-in-view .eight__item:nth-child(7) { animation-delay: 0.72s; }
.eight.is-in-view .eight__item:nth-child(8) { animation-delay: 0.79s; }
.eight.is-in-view .eight__item:nth-child(9) { animation-delay: 0.86s; }
.eight.is-in-view .eight__item:nth-child(10) { animation-delay: 0.93s; }

@keyframes eightBarIn {
    from {
        transform: translate(-50%, -50%) scaleX(0);
    }
    to {
        transform: translate(-50%, -50%) scaleX(1);
    }
}

@keyframes eightTitleIn {
    from {
        opacity: 0;
        filter: blur(0.08rem);
        letter-spacing: 0.18em;
        transform: translateY(0.3rem);
    }
    to {
        opacity: 1;
        filter: blur(0);
        letter-spacing: normal;
        transform: translateY(0);
    }
}

@keyframes eightFlipIn {
    from {
        opacity: 0;
        transform: rotateX(-72deg) translateY(0.4rem) scale(0.72);
        filter: blur(0.04rem);
    }
    to {
        opacity: 1;
        transform: rotateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .eight {
    height: auto;
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .eight__title {
    font-size: 0.36rem;
    margin-bottom: 0.32rem;
}

html[data-mode="h5"] .eight__title::before {
    width: 2.4rem;
    height: 0.12rem;
}

html[data-mode="h5"] .eight__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.16rem;
    width: 100%;
    perspective: 4rem;
}

html[data-mode="h5"] .eight__item {
    width: 100%;
    height: 0.8rem;
}

/* ============================================================
   第九屏：社交关注（Follow us，与 zwxc 第七屏一致）
   ============================================================ */
.ninth {
    padding: 0.6rem 0.6rem;
    display: flex;
        flex-direction: column;
    align-items: center;
}

.ninth ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.ninth ul li {
    width: 32%;
    display: flex;
    flex-direction: column;
}

.ninth ul li .t {
    display: flex;
    align-items: center;
    height: 0.32rem;
}

.ninth ul li .t img {
    width: 0.32rem;
    height: 0.32rem;
}

.ninth ul li .t .tit {
    font-size: 0.24rem;
    font-weight: 700;
    color: #333;
    margin-left: 0.15rem;
    font-family: Gabarito;
}

.ninth ul li .b {
    width: 100%;
    height: -webkit-calc(100% - 0.4rem);
    height: -moz-calc(100% - 0.4rem);
    height: calc(100% - 0.4rem);
    border: 0.03rem solid #f0f5fa;
    padding: 0.1rem;
    margin-top: 0.3rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .ninth {
    padding: 0.4rem 0.4rem 0.2rem;
}

/* 屏标题 */
.ninth__title {
    margin: 0 0 0.43rem; /* 43px */
    color: #333;
    font-family: Gabarito, sans-serif;
    font-size: 0.56rem; /* 56px */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

/* 列表：三列改单列纵向排布 */
html[data-mode="h5"] .ninth ul {
    flex-direction: column;
    gap: 0.4rem;
}

html[data-mode="h5"] .ninth ul li {
    width: 100%;
}

html[data-mode="h5"] .ninth ul li .t {
    height: auto;
}

html[data-mode="h5"] .ninth ul li .t img {
    width: 0.44rem;
    height: 0.44rem;
}

/* 覆盖内联 width（Youtube 图标 style="width:0.75rem"） */
html[data-mode="h5"] .ninth ul li .t img[style] {
    width: 0.44rem;
}

html[data-mode="h5"] .ninth ul li .t .tit {
    font-size: 0.3rem;
    margin-left: 0.16rem;
}

/* .b 为社交嵌入容器：移动端给定展示高度，避免高度塌陷 */
html[data-mode="h5"] .ninth ul li .b {
    height: auto;
    min-height: 3rem;
    margin-top: 0.2rem;
    padding: 0.16rem;
    border-width: 0.02rem;
}

/* 嵌入内容内的图片自适应 */
html[data-mode="h5"] .ninth ul li .b img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   第二屏：Our Product Range（产品范围 + 渐隐渐显轮播）
   ============================================================ */
.second {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 0.8rem 1.6rem 1.13rem; /* 80px 160px 113px */
    box-sizing: border-box;
    background: #FFF;
}

/* ---------- 头部 ---------- */
.second__pill {
    position: relative;
    display: inline-flex;
    padding: 0.12rem 0.24rem; /* 12px 24px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    margin-bottom: 0.2rem; /* 20px */
    border-radius: 0.3rem; /* 30px */
    border: 1px solid #D9D9D9;
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    overflow: hidden;
    cursor: default;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

/* 高光扫过层：半透明白色斜条掠过表面 */
.second__pill::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.second__pill:hover {
    background-size: 100% 100%;
    color: #FFF;
    transform: translateY(-0.03rem);
    box-shadow: 0 0 0.09rem 0 rgba(4, 78, 173, 0.35);
}

.second__pill:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.second__title {
    position: relative;
    z-index: 0;
    margin: 0 0 0.2rem; /* 20px */
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* 标题背后的横线 */
.second__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.06rem;
    z-index: -1;
    width: 5.33rem; /* 533px */
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    transform-origin: left center;
}

.second__desc {
    margin: 0 0 1.02rem; /* 102px */
    max-width: 6.5rem;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
}

/* ---------- 下方：左列表 + 右轮播 ---------- */
.second__body {
    display: flex;
    align-items: flex-start;
}

.second__left {
    flex: 1;
    min-width: 0;
    margin-right: 1.1rem; /* 110px */
}

.second__sub {
    margin: 0 0 0.57rem; /* 57px */
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.32rem; /* 32px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.second__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.second__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__item:hover,
.second__item.is-active {
    transform: translateX(0.08rem);
}

.second__item-icon {
    width: 0.5rem; /* 50px */
    height: 0.5rem; /* 50px */
    margin-right: 0.3rem; /* 30px */
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.second__item:hover .second__item-icon {
    transform: scale(1.15) rotate(-8deg);
}

/* 点击时图标弹跳脉冲 */
.second__item.is-just-clicked .second__item-icon {
    animation: second-icon-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes second-icon-pulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.35) rotate(10deg);
    }
    100% {
        transform: scale(1);
    }
}

.second__item-text {
    flex: 1;
    min-width: 0;
    font-size: 0.16rem; /* 防止继承根字号形成超高行盒 */
}

.second__item-title {
    position: relative;
    display: inline-block;
    margin: 0 0 0.2rem; /* 20px */
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: color 0.3s ease;
}

/* 标题下划线：悬浮/选中自左向右扫入 */
.second__item-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.04rem;
    width: 100%;
    height: 0.02rem;
    background: linear-gradient(90deg, #1078D8 0%, #166198 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__item:hover .second__item-title,
.second__item.is-active .second__item-title {
    color: #044EAD;
}

.second__item:hover .second__item-title::after,
.second__item.is-active .second__item-title::after {
    transform: scaleX(1);
}

.second__item-desc {
    margin: 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

/* ---------- 右侧轮播 ---------- */
.second__carousel {
    position: relative;
    width: 9.4rem; /* 940px */
    height: 5.88rem; /* 588px */
    border-radius: 0.3rem; /* 30px */
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.second__carousel:hover {
    transform: translateY(-0.06rem);
    box-shadow: 0 0.3rem 0.6rem rgba(4, 78, 173, 0.28);
}

.second__slides {
    position: absolute;
    inset: 0;
}

.second__slide {
    position: absolute;
    inset: 0;
    background: no-repeat center / cover;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.9s ease, transform 5s linear;
    pointer-events: none;
}

.second__slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 底部压暗渐变，保证标题可读 */
.second__slide-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0.9;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.second__carousel:hover .second__slide-shade {
    opacity: 1;
}

.second__slide-info {
    position: absolute;
    left: 0.3rem;
    right: 2rem;
    bottom: 0.26rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.second__slide-title {
    margin: 0 0 0.08rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.45);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.second__slide-more {
    display: inline-flex;
    align-items: center;
    gap: 0.06rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 悬浮轮播卡片时：标题与链接渐变为蓝色系 */
.second__carousel:hover .second__slide-title {
    color: #7AB8FF;
}

.second__carousel:hover .second__slide-more {
    color: #B9D2F2;
}

.second__slide-more svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__slide-more:hover svg {
    transform: translateX(0.05rem);
}

/* ---------- 控制器：与第一屏一致的进度指示点 ---------- */
.second__dots {
    position: absolute;
    right: 0.3rem;
    bottom: 0.28rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.12rem;
}

.second__dot {
    position: relative;
    width: 0.3rem; /* 30px */
    height: 0.04rem; /* 4px */
    border-radius: 0.04rem;
    background: #FFF;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    transition: width 0.35s ease, opacity 0.25s ease;
}

.second__dot:hover {
    opacity: 0.75;
}

.second__dot.is-active {
    width: 0.6rem; /* 60px */
    opacity: 1;
}

/* 激活态蓝色进度条：随轮播间隔填满 */
.second__dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #044EAD;
    transform-origin: left center;
    transform: scaleX(0);
    animation: second-dot-fill var(--second-dot-duration, 5000ms) linear forwards;
}

@keyframes second-dot-fill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .second:not(.is-in-view) .second__pill,
html.js .second:not(.is-in-view) .second__title,
html.js .second:not(.is-in-view) .second__desc,
html.js .second:not(.is-in-view) .second__sub,
html.js .second:not(.is-in-view) .second__item,
html.js .second:not(.is-in-view) .second__carousel {
    opacity: 0;
}

html.js .second:not(.is-in-view) .second__title::before {
    transform: scaleX(0);
}

html.js .second.is-in-view .second__pill {
    animation: second-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both;
}

html.js .second.is-in-view .second__title {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

html.js .second.is-in-view .second__title::before {
    animation: second-bar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

html.js .second.is-in-view .second__desc {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

html.js .second.is-in-view .second__sub {
    animation: second-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

html.js .second.is-in-view .second__item:nth-child(1) {
    animation: second-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

html.js .second.is-in-view .second__item:nth-child(2) {
    animation: second-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

html.js .second.is-in-view .second__item:nth-child(3) {
    animation: second-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.74s both;
}

html.js .second.is-in-view .second__item:nth-child(4) {
    animation: second-item-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.86s both;
}

html.js .second.is-in-view .second__carousel {
    animation: second-carousel-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

html.js .second.is-in-view .second__slide {
    animation: second-slide-in 1.2s ease-out 0.5s both;
}

@keyframes second-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0.2rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes second-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes second-bar-in {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes second-item-in {
    0% {
        opacity: 0;
        transform: translateX(-0.6rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes second-carousel-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0 round 0.3rem);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 0.3rem);
    }
}

@keyframes second-slide-in {
    0% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- 第二屏 H5 适配 ---------- */
html[data-mode="h5"] .second {
    padding: 0.5rem 0.3rem 0.6rem;
}

html[data-mode="h5"] .second__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .second__title::before {
    width: 3rem;
    height: 0.12rem;
}

html[data-mode="h5"] .second__desc {
    margin-bottom: 0.5rem;
}

html[data-mode="h5"] .second__body {
    flex-direction: column;
}

html[data-mode="h5"] .second__left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .second__sub {
    margin-bottom: 0.3rem;
}

html[data-mode="h5"] .second__carousel {
    width: 100%;
    height: 4.2rem;
}

/* ============================================================
   第四屏：Watch The Video（视频横幅）
   设计稿基准：1919×641（1rem = 100px）
   ============================================================ */
.fourth {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 6.41rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景图层独立成层，便于做缓推入场 */
.fourth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../assets/images/home/fourth-img1.webp") no-repeat center / cover;
}

.fourth__title {
    max-width: 13rem;
    color: #FFF;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.5rem; /* 下边距 50px */
}

.fourth__actions {
    display: flex;
    align-items: center;
    gap: 0.12rem;
}

/* Watch The Video 胶囊按钮 */
.fourth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.31rem; /* 231px */
    height: 0.5rem; /* 50px */
    border-radius: 6rem; /* 600px */
    background: #044EAD;
    color: #FFF;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fourth__btn:hover {
    transform: translateY(-0.04rem);
    background: #0A5AD0;
    box-shadow: 0 0.1rem 0.24rem rgba(4, 78, 173, 0.45);
}

.fourth__btn:active {
    transform: translateY(-0.01rem) scale(0.98);
    box-shadow: 0 0.03rem 0.08rem rgba(4, 78, 173, 0.35);
    transition-duration: 0.12s;
}

/* 圆形播放按钮：涟漪光环持续扩散 + 悬浮放大 */
.fourth__play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem; /* 50px */
    height: 0.5rem; /* 50px */
    border-radius: 50%;
    background: #044EAD;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fourth__play img {
    display: block;
    width: 0.2rem; /* 20px */
    height: 0.2rem; /* 20px */
}

.fourth__play::before,
.fourth__play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 0.02rem solid rgba(4, 78, 173, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: fourth-ripple 2.2s ease-out infinite;
}

.fourth__play::after {
    animation-delay: 1.1s;
}

.fourth__play:hover {
    transform: scale(1.15);
    background: #0A5AD0;
    box-shadow: 0 0.08rem 0.2rem rgba(4, 78, 173, 0.5);
}

.fourth__play:hover img {
    animation: fourth-play-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fourth-ripple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@keyframes fourth-play-pulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ----------
   背景 Ken Burns 缓推 → 标题自中缝向两侧展开擦亮 → 按钮弹性登场 */
html.js .fourth:not(.is-in-view) .fourth__title,
html.js .fourth:not(.is-in-view) .fourth__btn,
html.js .fourth:not(.is-in-view) .fourth__play {
    opacity: 0;
}

.fourth.is-in-view::before {
    animation: fourth-bg-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fourth.is-in-view .fourth__title {
    animation: fourth-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

.fourth.is-in-view .fourth__btn {
    animation: fourth-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s backwards;
}

.fourth.is-in-view .fourth__play {
    animation: fourth-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s backwards;
}

@keyframes fourth-bg-in {
    from {
        transform: scale(1.18);
    }
    to {
        transform: scale(1);
    }
}

@keyframes fourth-title-in {
    from {
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
        transform: translateY(0.3rem);
        filter: blur(0.06rem);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fourth-pop-in {
    from {
        opacity: 0;
        transform: scale(0.4) translateY(0.3rem);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fourth {
    height: auto;
    padding: 0.8rem 0.3rem;
}

html[data-mode="h5"] .fourth__title {
    max-width: 100%;
    font-size: 0.32rem;
    margin-bottom: 0.3rem;
}


/* ============================================================
   第五屏：About Zhongkang（公司介绍 + 世界地图）
   设计稿基准：1920，padding 100 160（1rem = 100px）
   ============================================================ */
.fifith {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    min-height: 9.66rem;
    margin: 0 auto;
    padding: 1rem 1.6rem; /* 100px 160px */
    box-sizing: border-box;
}

.fifith__left{
    display: flex;
    flex-direction: column;
}
/* ---- 左侧内容 ---- */
.fifith__btn {
    position: relative;
    display: inline-flex;
    width: max-content;
    padding: 0.12rem 0.24rem; /* 12px 24px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    margin-bottom: 0.23rem; /* 23px */
    overflow: hidden;
    border-radius: 0.3rem; /* 30px */
    border: 1px solid #D9D9D9;
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

/* 悬浮：蓝色渐变自左铺满 + 高光斜切扫过（与第三屏 pills 一致） */
.fifith__btn::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.fifith__btn:hover {
    background-size: 100% 100%;
    color: #FFF;
    border-color: #044EAD;
    transform: translateY(-0.03rem);
    box-shadow: 0 0 0.09rem 0 rgba(4, 78, 173, 0.35);
}

.fifith__btn:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.fifith__btn:active {
    transform: translateY(-0.01rem) scale(0.98);
    transition-duration: 0.12s;
}

.fifith__title {
    position: relative;
    z-index: 0;
    margin-bottom: 0.25rem; /* 25px */
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* 标题背后的横线（参考第三屏 .third__title::before） */
.fifith__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.06rem;
    z-index: -1;
    width: 4.61rem; /* 461px */
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    transform-origin: left center;
}

.fifith__desc {
    max-width: 4.61rem;
    margin-bottom: 0.48rem; /* 48px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.fifith__more {
    width: max-content;
    position: relative;
    z-index: 0;
    display: inline-flex;
    padding: 0.12rem 0.16rem; /* 12px 16px */
    align-items: center;
    gap: 0.1rem;
    margin-bottom: 0.75rem; /* 75px */
    overflow: hidden;
    border: 1px solid #D9D9D9;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: color 0.35s, border-color 0.35s, transform 0.35s;
}

/* 悬浮：蓝色斜切色块从左扫入 */
.fifith__more::before {
    content: "";
    position: absolute;
    left: -10%;
    top: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background: #044EAD;
    transform: skewX(-20deg);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fifith__more svg {
    transition: transform 0.35s;
}

.fifith__more:hover {
    color: #FFF;
    border-color: #044EAD;
    transform: translateY(-0.03rem);
}

.fifith__more:hover::before {
    width: 120%;
}

.fifith__more:hover svg {
    transform: translateX(0.06rem);
}

/* ---- 数字区域：左右间隔 114 / 上下间隔 53 ---- */
.fifith__nums {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.14rem; /* 114px */
    row-gap: 0.53rem; /* 53px */
    list-style: none; /* 去掉数字前的默认圆点 */
    margin: 0;
    padding: 0;
}

.fifith__num-row {
    display: flex;
    align-items: flex-end;
    gap: 0.02rem;
}

.fifith__num-value {
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.56rem; /* 56px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    font-variant-numeric: tabular-nums;
}

.fifith__num-unit {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: 280%; /* 39.2px */
}

.fifith__num-plus {
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.3rem; /* 30px */
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 42px */
}

.fifith__num-desc {
    margin-top: 0.06rem;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

/* ---- 右侧地图：绝对定位 top 187 / right 60 ---- */
.fifith__map {
    position: absolute;
    top: 1.87rem; /* 187px */
    right: 0.6rem; /* 60px */
    width: 11.27rem; /* 1127px */
    height: 6.79rem; /* 679px */
    background: url("../assets/images/home/fifth-img1.webp") no-repeat center / 100% 100%;
}

.fifith__map>div {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 地图圆点 */
.fifith__dot {
    position: absolute;
    width: 0.24rem; /* 24px */
    height: 0.24rem; /* 24px */
}

.fifith__dot-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.fifith__dot-btn img {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 悬浮 / 激活：圆点放大 + 涟漪光环扩散 */
.fifith__dot-btn::before,
.fifith__dot-btn::after {
    content: "";
    position: absolute;
    inset: -0.02rem;
    border-radius: 50%;
    border: 0.02rem solid rgba(4, 78, 173, 0.55);
    opacity: 0;
    pointer-events: none;
}

.fifith__dot:hover .fifith__dot-btn::before,
.fifith__dot.is-active .fifith__dot-btn::before {
    animation: fifth-ping 1.5s ease-out infinite;
}

.fifith__dot:hover .fifith__dot-btn::after,
.fifith__dot.is-active .fifith__dot-btn::after {
    animation: fifth-ping 1.5s ease-out 0.5s infinite;
}

.fifith__dot:hover .fifith__dot-btn img,
.fifith__dot.is-active .fifith__dot-btn img {
    transform: scale(1.35);
}

/* 折线 + 标签：默认隐藏，点击圆点展开 */
.fifith__pin {
    position: absolute;
    left: 0.12rem;
    bottom: 0.12rem;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.1rem) scale(0.9);
    transform-origin: bottom left;
    transition: opacity 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s;
}

.fifith__dot.is-active .fifith__pin {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.fifith__pin-line {
    display: block;
    overflow: visible;
}

.fifith__pin-line path {
    stroke-dasharray: 92;
    stroke-dashoffset: 0;
}

.fifith__dot.is-active .fifith__pin-line path {
    animation: fifth-line-draw 0.5s ease-out;
}

.fifith__tag {
    display: inline-flex;
    align-items: center;
    margin-top: -0.3rem;
    padding: 0.18rem 0.22rem; /* 18px 22px */
    background: #FFF;
    box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.06);
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    white-space: nowrap;
}

.fifith__tag-icon {
    width: 0.2rem; /* 20px */
    height: 0.2rem; /* 20px */
    margin-right: 0.12rem; /* 12px */
    border-radius: 50%;
    object-fit: cover;
}

.fifith__dot.is-active .fifith__tag {
    animation: fifth-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards;
}

/* 靠右侧的圆点：折线与标签向左展开 */
.fifith__dot--flip .fifith__pin {
    left: auto;
    right: 0.12rem;
    align-items: flex-end;
    transform-origin: bottom right;
}

.fifith__dot--flip .fifith__pin-line {
    transform: scaleX(-1);
}

.fifith__dot--flip .fifith__tag {
    margin-left: 0;
    margin-right: 0.52rem;
}

/* ---- 入场动画（.is-in-view 由 common.js sectionReveal 触发） ---- */
html.js .fifith:not(.is-in-view) .fifith__btn,
html.js .fifith:not(.is-in-view) .fifith__title,
html.js .fifith:not(.is-in-view) .fifith__desc,
html.js .fifith:not(.is-in-view) .fifith__more,
html.js .fifith:not(.is-in-view) .fifith__num,
html.js .fifith:not(.is-in-view) .fifith__map,
html.js .fifith:not(.is-in-view) .fifith__dot {
    opacity: 0;
}

html.js .fifith:not(.is-in-view) .fifith__title::before {
    transform: scaleX(0);
}

.fifith.is-in-view .fifith__btn {
    animation: fifth-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
}

.fifith.is-in-view .fifith__title {
    animation: fifth-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

.fifith.is-in-view .fifith__title::before {
    animation: fifth-line-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
}

.fifith.is-in-view .fifith__desc {
    animation: fifth-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}

.fifith.is-in-view .fifith__more {
    animation: fifth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s backwards;
}

.fifith.is-in-view .fifith__num:nth-child(1) { animation: fifth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards; }
.fifith.is-in-view .fifith__num:nth-child(2) { animation: fifth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards; }
.fifith.is-in-view .fifith__num:nth-child(3) { animation: fifth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s backwards; }
.fifith.is-in-view .fifith__num:nth-child(4) { animation: fifth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s backwards; }

.fifith.is-in-view .fifith__map {
    animation: fifth-map-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

.fifith.is-in-view .fifith__dot {
    animation: fifth-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.fifith.is-in-view .fifith__dot:nth-child(1) { animation-delay: 1.1s; }
.fifith.is-in-view .fifith__dot:nth-child(2) { animation-delay: 1.18s; }
.fifith.is-in-view .fifith__dot:nth-child(3) { animation-delay: 1.26s; }
.fifith.is-in-view .fifith__dot:nth-child(4) { animation-delay: 1.34s; }
.fifith.is-in-view .fifith__dot:nth-child(5) { animation-delay: 1.42s; }
.fifith.is-in-view .fifith__dot:nth-child(6) { animation-delay: 1.5s; }
.fifith.is-in-view .fifith__dot:nth-child(7) { animation-delay: 1.58s; }
.fifith.is-in-view .fifith__dot:nth-child(8) { animation-delay: 1.66s; }

@keyframes fifth-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fifth-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fifth-line-in {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes fifth-map-in {
    from {
        opacity: 0;
        transform: scale(0.92) translateX(0.4rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifth-line-draw {
    from {
        stroke-dashoffset: 92;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fifth-ping {
    0% {
        opacity: 0.8;
        transform: scale(0.6);
    }
    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

/* ---- H5 适配 ---- */
html[data-mode="h5"] .fifith {
    min-height: 0;
    padding: 0.8rem 0.3rem;
}

html[data-mode="h5"] .fifith__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .fifith__title::before {
    width: 3rem;
    height: 0.12rem;
}

html[data-mode="h5"] .fifith__nums {
    column-gap: 0.6rem;
}

html[data-mode="h5"] .fifith__map {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1127 / 679;
    margin-top: 0.5rem;
    overflow: hidden; /* 裁剪超出容器的圆点/标签，避免横向滚动条 */
}

/* 内层保持设计稿尺寸 11.27rem，整体等比缩放（缩放比 = 6.9 / 11.27），
   使圆点 rem 坐标与地图背景严格对齐 */
html[data-mode="h5"] .fifith__map>div {
    width: 11.27rem;
    height: 6.79rem;
    transform: scale(0.6122);
    transform-origin: 0 0;
}

/* H5 全局兜底：禁止横向滚动 */
html[data-mode="h5"],
html[data-mode="h5"] body {
    overflow-x: hidden;
}


/* ============================================================
   第三屏：Best-Selling Machines（横向拖拽滚动卡片）
   设计稿基准：1920×1152，padding 74 160 0（1rem = 100px）
   ============================================================ */
.third {
    width: 100%;
    max-width: 19.2rem;
    height: 11.52rem;
    margin: 0 auto;
    padding: 0.74rem 0 0; /* 74px 160px 0 */
    box-sizing: border-box;
    background: url("../assets/images/home/third-img1.webp") no-repeat center / cover;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hot Products 徽章：与第二屏 second__pill 同款（含高光扫过悬浮动效） */
.third__pill {
    position: relative;
    display: inline-flex;
    padding: 0.12rem 0.24rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
    border-radius: 0.3rem;
    border: 1px solid #D9D9D9;
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    overflow: hidden;
    cursor: default;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
    width: max-content;
    margin-left: 1.6rem;
}

.third__pill::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.third__pill:hover {
    background-size: 100% 100%;
    color: #FFF;
    transform: translateY(-0.03rem);
    box-shadow: 0 0 0.09rem 0 rgba(4, 78, 173, 0.35);
}

.third__pill:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.third__title {
    position: relative;
    z-index: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.66rem; /* 下边距 66px */
    margin-left: 1.6rem;
}

/* 标题背后的横线 */
.third__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.06rem;
    z-index: -1;
    width: 5.57rem; /* 557px */
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    transform-origin: left center;
}

/* ---------- 横向滚动区 ---------- */
.third__viewport {
    position: relative;
    min-height: 0;
}

.third__track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 8rem;
    gap: 0.42rem; /* 卡片间距 42px */
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scrollbar-width: none; /* 隐藏原生滚动条，用自绘进度条 */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
        padding: 0 1.6rem;
}

.third__track::-webkit-scrollbar {
    display: none;
}

.third__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* ---------- 卡片 ---------- */
.third__card {
    position: relative;
    flex: 0 0 5.2rem; /* 520px */
    width: 5.2rem;
    height: 7.11rem; /* 711px */
    padding: 0.3rem 0.25rem; /* 30px 25px */
    box-sizing: border-box;
    border-radius: 0.2rem; /* 20px */
    background: #FFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.third__card:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.14rem 0.3rem rgba(4, 78, 173, 0.16);
}

.third__card-img {
    position: relative;
    width: 4.7rem; /* 470px */
    height: 2.88rem; /* 288px */
    border: 1px solid #D9D9D9;
    margin-bottom: 0.32rem; /* 下边距 32px */
    overflow: hidden;
}

.third__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__card:hover .third__card-img img {
    transform: scale(1.06);
}

/* 图片上的 Hot Sale 斜角标签：负偏移使蓝色斜带两端与图片左缘/顶缘对齐 */
.third__hot {
    position: absolute;
    top: -0.42rem;
    left: -0.41rem;
    width: 1.68rem;
    height: 1.68rem;
    z-index: 1;
    pointer-events: none;
}

.third__hot svg {
    display: block;
    width: 100%;
    height: 100%;
}

.third__hot span {
    position: absolute;
        left: 0.68rem;
    top: 0.75rem;
    transform: translate(-50%, -50%) rotate(-44.71deg);
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.third__card-title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem; /* 24px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 0.1rem; /* 下边距 10px */
    transition: color 0.3s ease;
}

/* 卡片标题悬浮变色 */
.third__card:hover .third__card-title {
    color: #044EAD;
}

.third__card-desc {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0 0 0.28rem; /* 下边距 28px */
}

/* ---------- 参数标签 ---------- */
.third__tags {
    display: grid;
    grid-template-columns: repeat(2, 2.27rem); /* 227px */
    gap: 0.1rem 0.16rem;
    margin: 0 0 0.3rem;
    padding: 0;
    list-style: none;
}

.third__tag {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.02rem;
    width: 2.27rem; /* 227px */
    height: 0.5rem; /* 50px */
    padding: 0 0.12rem;
    box-sizing: border-box;
    background: #F7F8FA;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 左侧蓝色竖条：悬浮时自中心展开 */
.third__tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.03rem;
    background: #044EAD;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__tag:hover {
    transform: translateY(-0.04rem);
    background: #EDF4FF;
    box-shadow: 0 0.06rem 0.14rem rgba(4, 78, 173, 0.14);
}

.third__tag:hover::before {
    transform: scaleY(1);
}

.third__tag-label {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.12rem; /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.third__tag-value {
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.12rem; /* 12px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- View More 按钮 ---------- */
.third__more {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem; /* 10px */
    width: max-content;
    margin-top: auto; /* 沉底 */
    padding: 0.12rem 0.16rem; /* 12px 16px */
    border: 1px solid #D9D9D9;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.third__more svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__more:hover {
    background: #044EAD;
    border-color: #044EAD;
    color: #FFF;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.06rem 0.14rem rgba(4, 78, 173, 0.18);
}

.third__more:hover svg {
    transform: translateX(0.04rem);
}

.third__more:active {
    transform: translateY(0);
    transition-duration: 0.12s;
}

/* ---------- 底部进度条 ---------- */
.third__scrollbar {
    position: relative;
    flex-shrink: 0;
    width: 16rem; /* 1600px */
    max-width: 100%;
    height: 0.04rem; /* 4px */
    margin: 0.2rem auto 0; /* 轨道已留 0.5rem 底部空间，此处补足 0.7rem 视觉间距 */
    border-radius: 0.3rem; /* 30px */
    background: #D9D9D9;
    overflow: hidden;
}

.third__scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: inherit;
    background: #044EAD;
    will-change: transform, width;
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .third:not(.is-in-view) .third__pill,
html.js .third:not(.is-in-view) .third__title,
html.js .third:not(.is-in-view) .third__card,
html.js .third:not(.is-in-view) .third__scrollbar {
    opacity: 0;
}

html.js .third:not(.is-in-view) .third__title::before {
    transform: scaleX(0);
}

.third.is-in-view .third__pill {
    animation: third-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s backwards;
}

.third.is-in-view .third__title {
    animation: third-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.third.is-in-view .third__title::before {
    animation: third-bar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.third.is-in-view .third__card {
    animation: third-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.third.is-in-view .third__card:nth-child(1) { animation-delay: 0.25s; }
.third.is-in-view .third__card:nth-child(2) { animation-delay: 0.34s; }
.third.is-in-view .third__card:nth-child(3) { animation-delay: 0.43s; }
.third.is-in-view .third__card:nth-child(4) { animation-delay: 0.52s; }
.third.is-in-view .third__card:nth-child(5) { animation-delay: 0.61s; }
.third.is-in-view .third__card:nth-child(6) { animation-delay: 0.7s; }

.third.is-in-view .third__scrollbar {
    transform-origin: left center;
    animation: third-bar-expand 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards;
}

@keyframes third-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0.2rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes third-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes third-bar-in {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes third-card-in {
    0% {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes third-bar-expand {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .third {
    height: auto;
    padding: 0.6rem 0.24rem 0.6rem;
}


html[data-mode="h5"] .third__pill,
html[data-mode="h5"] .third__title {
    font-size: 0.36rem;
    margin-bottom: 0.4rem;
    margin-left: 0;
}

html[data-mode="h5"] .third__title::before {
    width: 3.6rem;
    height: 0.12rem;
}

html[data-mode="h5"] .third__viewport {
    flex: 0 0 auto;
}

html[data-mode="h5"] .third__track {
    margin: 0 -0.24rem;
    padding: 0.2rem 0 0.4rem 0.24rem;
    gap: 0.16rem;
}

html[data-mode="h5"] .third__card {
    flex: 0 0 5.6rem;
    width: 5.6rem;
    height: auto;
    padding-bottom: 0.3rem;
}

html[data-mode="h5"] .third__card-img {
    width: 100%;
    height: 3rem;
    margin-bottom: 0.24rem;
}

html[data-mode="h5"] .third__tags {
    grid-template-columns: repeat(2, 1fr);
}

html[data-mode="h5"] .third__tag {
    width: 100%;
}

html[data-mode="h5"] .third__scrollbar {
    margin-top: 0.2rem;
}


/* ============================================================
   第六屏：Why Buyers Choose Zhongkang（优势卡片）
   设计稿基准：1920×944（1rem = 100px）
   ============================================================ */
.sixth {
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 19.2rem;
    height: 9.44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景图层独立成层，便于做缓推入场 */
.sixth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../assets/images/home/sixth-img1.webp") no-repeat center / cover;
}

/* ---------- Advantages 徽章按钮 ---------- */
.sixth__pill {
    display: inline-flex;
    padding: 0.12rem 0.24rem; /* 12px 24px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    margin-bottom: 0.1rem; /* 下边距 10px */
    border-radius: 0.3rem; /* 30px */
    border: 1px solid #D9D9D9;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer;
    overflow: hidden;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

/* 高光斜条掠过 */
.sixth__pill::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.sixth__pill:hover {
    background-size: 100% 100%;
    border-color: #044EAD;
    transform: translateY(-0.03rem) scale(1.04);
    box-shadow: 0 0.08rem 0.24rem rgba(4, 78, 173, 0.55);
}

.sixth__pill:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.sixth__pill:active {
    transform: translateY(0) scale(1);
    transition-duration: 0.12s;
}

.sixth__title {
    color: #FFF;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-width: 15rem;
    margin: 0 0 0.48rem; /* 下边距 48px */
}

/* ---------- 卡片网格 ---------- */
.sixth__grid {
    display: grid;
    grid-template-columns: repeat(3, 5.16rem); /* 516px */
    gap: 0.26rem; /* 间隔 26px */
    margin: 0;
    padding: 0;
    list-style: none;
    perspective: 12rem;
}

.sixth__card {
    position: relative;
    z-index: 0;
    width: 5.16rem; /* 516px */
    height: 2.69rem; /* 269px */
    padding: 0.5rem 0.43rem 0; /* 50px 43px 0 */
    box-sizing: border-box;
    border-radius: 0.2rem; /* 20px */
    background: #FFF;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

/* 蓝色底：悬浮时自上而下擦入 */
.sixth__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #044EAD;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sixth__card:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.16rem 0.34rem rgba(0, 0, 0, 0.4);
}

.sixth__card:hover::before {
    transform: scaleY(1);
}

/* ---------- 左侧图标 ---------- */
.sixth__card-icon {
    position: relative;
    flex: 0 0 0.8rem;
    width: 0.8rem; /* 80px */
    height: 0.8rem; /* 80px */
    margin-right: 0.3rem; /* 右边距 30px */
    border-radius: 50%;
    background: #F4F7FD;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sixth__card-icon img {
    display: block;
    width: 0.4rem; /* 40px */
    height: 0.4rem; /* 40px */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 右侧文案 ---------- */
.sixth__card-body {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sixth__card-title {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 25px */
    margin: 0 0 0.2rem; /* 下边距 20px */
    transition: color 0.4s ease;
}

.sixth__card-desc {
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0;
    transition: color 0.4s ease 0.05s;
}

/* ---------- 悬浮态：蓝底白字白图标底 ---------- */
.sixth__card:hover .sixth__card-title {
    color: #FFF;
}

.sixth__card:hover .sixth__card-desc {
    color: #FFF;
}

.sixth__card:hover .sixth__card-icon {
    background: #FFF;
    transform: rotate(-6deg) scale(1.06);
}

.sixth__card:hover .sixth__card-icon img {
    transform: scale(1.08);
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ----------
   背景 Ken Burns 缓推 → 徽章弹出 → 标题模糊上浮 → 卡片 3D 翻入错峰 */
html.js .sixth:not(.is-in-view) .sixth__pill,
html.js .sixth:not(.is-in-view) .sixth__title,
html.js .sixth:not(.is-in-view) .sixth__card {
    opacity: 0;
}

.sixth.is-in-view::before {
    animation: sixth-bg-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__pill {
    animation: sixth-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
}

.sixth.is-in-view .sixth__title {
    animation: sixth-title-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

.sixth.is-in-view .sixth__card {
    animation: sixth-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__card:nth-child(1) { animation-delay: 0.35s; }
.sixth.is-in-view .sixth__card:nth-child(2) { animation-delay: 0.43s; }
.sixth.is-in-view .sixth__card:nth-child(3) { animation-delay: 0.51s; }
.sixth.is-in-view .sixth__card:nth-child(4) { animation-delay: 0.59s; }
.sixth.is-in-view .sixth__card:nth-child(5) { animation-delay: 0.67s; }
.sixth.is-in-view .sixth__card:nth-child(6) { animation-delay: 0.75s; }

@keyframes sixth-bg-in {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}

@keyframes sixth-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0.2rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes sixth-title-in {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.06rem);
        letter-spacing: 0.08em;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: normal;
    }
}

@keyframes sixth-card-in {
    0% {
        opacity: 0;
        transform: rotateY(26deg) translateY(0.4rem) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: rotateY(0) translateY(0) scale(1);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .sixth {
    height: auto;
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .sixth__title {
    font-size: 0.32rem;
    margin-bottom: 0.3rem;
}

html[data-mode="h5"] .sixth__grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    width: 100%;
}

html[data-mode="h5"] .sixth__card {
    width: 100%;
    height: auto;
    padding: 0.3rem 0.24rem;
}


/* ============================================================
   第七屏：Latest News & Insights（新闻卡片 + 博客列表）
   设计稿基准：1920，padding 100 160（1rem = 100px）
   ============================================================ */
.seventh {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 1.6rem; /* 100px 160px */
    box-sizing: border-box;
}

/* ---------- 头部：徽章 + 标题 + View More ---------- */
.seventh__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 0.6rem; /* 下边距 60px */
}

.seventh__head-left{
    display: flex;
    flex-direction: column;
}

.seventh__pill {
    width: max-content;
    position: relative;
    display: inline-flex;
    padding: 0.12rem 0.24rem; /* 12px 24px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    margin-bottom: 0.23rem; /* 下边距 23px */
    border-radius: 0.3rem; /* 30px */
    border: 1px solid #D9D9D9;
    color: #044EAD;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer;
    overflow: hidden;
    background-image: linear-gradient(100deg, #1078D8 0%, #044EAD 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

/* 高光斜条掠过 */
.seventh__pill::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.seventh__pill:hover {
    background-size: 100% 100%;
    border-color: #044EAD;
    color: #FFF;
    transform: translateY(-0.03rem) scale(1.04);
    box-shadow: 0 0.08rem 0.2rem rgba(4, 78, 173, 0.4);
}

.seventh__pill:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.seventh__title {
    position: relative;
    z-index: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.48rem; /* 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* 标题背后的横线 */
.seventh__title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.06rem;
    z-index: -1;
    width: 5.72rem; /* 572px */
    height: 0.18rem; /* 18px */
    background: #B9D2F2;
    transform-origin: left center;
}

/* View More 按钮：与标题水平对齐 */
.seventh__more {
    display: inline-flex;
    padding: 0.12rem 0.16rem; /* 12px 16px */
    align-items: center;
    gap: 0.1rem; /* 10px */
    background: #044EAD;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease, box-shadow 0.3s ease;
}

.seventh__more svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh__more:hover {
    transform: translateY(-0.04rem);
    background: #0A5AD0;
    box-shadow: 0 0.1rem 0.22rem rgba(4, 78, 173, 0.45);
}

.seventh__more:hover svg {
    transform: translateX(0.05rem);
}

.seventh__more:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.12s;
}

/* ---------- 卡片网格 ---------- */
.seventh__grid {
    display: grid;
    grid-template-columns: 4.8rem 4.8rem 5.8rem; /* 480 / 480 / 580 */
    gap: 0.3rem; /* 间距 30px */
    align-items: stretch;
    perspective: 14rem;
}

/* ---------- 新闻卡片（第一、二张） ---------- */
.seventh__card {
    margin: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* 悬浮阴影与第三张博客卡保持一致 */
.seventh__card:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.14rem 0.28rem rgba(4, 78, 173, 0.18);
}

.seventh__card-img {
    width: 4.8rem; /* 480px */
    height: 2.9rem; /* 290px */
    overflow: hidden;
}

.seventh__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh__card:hover .seventh__card-img img {
    transform: scale(1.06);
}

/* 文本区域：悬浮时蓝色自上而下擦入 */
.seventh__card-text {
    position: relative;
    z-index: 0;
    width: 4.8rem; /* 480px */
    height: 2.59rem; /* 259px */
    padding: 0.4rem 0.2rem; /* 40px 20px */
    box-sizing: border-box;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
}

.seventh__card-text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #044EAD;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh__card:hover .seventh__card-text::before {
    transform: scaleY(1);
}

/* tag */
.seventh__tag {
    display: inline-flex;
    padding: 0.06rem 0.1rem; /* 6px 10px */
    justify-content: center;
    align-items: center;
    gap: 0.1rem; /* 10px */
    background: #E6E6E6;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    margin-bottom: 0.2rem; /* 下边距 20px */
    transition: background-color 0.4s ease, color 0.4s ease;
    width: max-content;
}

.seventh__card-title {
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 0.1rem; /* 下边距 10px */
    transition: color 0.4s ease;
}

.seventh__card-desc {
    overflow: hidden;
    color: #666;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0 0 0.3rem; /* 下边距 30px */
    transition: color 0.4s ease 0.05s;
}

.seventh__card-date {
    margin-top: auto;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    transition: color 0.4s ease 0.1s;
}

/* 悬浮态：文本区蓝底、tag 白底、标题白、其余 D9D9D9 */
.seventh__card:hover .seventh__tag {
    background: #FFF;
}

.seventh__card:hover .seventh__card-title {
    color: #FFF;
}

.seventh__card:hover .seventh__card-desc,
.seventh__card:hover .seventh__card-date {
    color: #D9D9D9;
}

/* ---------- 博客列表卡（第三张） ---------- */
.seventh__blog {
    width: 5.8rem; /* 580px */
    height: 5.49rem; /* 549px */
    padding: 0.44rem 0.25rem 0; /* 44px 25px */
    box-sizing: border-box;
    background: #F5F5F5;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.seventh__blog:hover {
    transform: translateY(-0.08rem);
    box-shadow: 0 0.14rem 0.28rem rgba(4, 78, 173, 0.18);
}

.seventh__blog-title {
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 0.19rem; /* 下边距 19px */
    transition: color 0.3s ease;
}

.seventh__blog:hover .seventh__blog-title {
    color: #044EAD;
}

.seventh__blog-desc {
    overflow: hidden;
    color: #666;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin: 0 0 0.32rem; /* 下边距 32px */
}

.seventh__blog-divider {
    height: 1px;
    background: #CCC;
    margin-bottom: 0.24rem; /* 下边距 24px */
}

.seventh__blog-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem; /* 间距 24px */
    margin: 0;
    padding: 0;
    list-style: none;
}

.seventh__blog-list li {
    display: block;
}

/* 整行可点击 */
.seventh__blog-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    text-decoration: none;
}

.seventh__blog-item {
    width: 4rem; /* 400px */
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: color 0.3s ease;
}

.seventh__blog-link:hover .seventh__blog-item {
    color: #044EAD;
}

.seventh__blog-list time {
    flex-shrink: 0;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

/* ---------- 入场动画（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .seventh:not(.is-in-view) .seventh__pill,
html.js .seventh:not(.is-in-view) .seventh__title,
html.js .seventh:not(.is-in-view) .seventh__more,
html.js .seventh:not(.is-in-view) .seventh__card,
html.js .seventh:not(.is-in-view) .seventh__blog {
    opacity: 0;
}

html.js .seventh:not(.is-in-view) .seventh__title::before {
    transform: scaleX(0);
}

.seventh.is-in-view .seventh__pill {
    animation: seventh-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s backwards;
}

.seventh.is-in-view .seventh__title {
    animation: seventh-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.seventh.is-in-view .seventh__title::before {
    animation: seventh-bar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s backwards;
}

.seventh.is-in-view .seventh__more {
    animation: seventh-more-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

.seventh.is-in-view .seventh__card:nth-child(1) {
    animation: seventh-card-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.seventh.is-in-view .seventh__card:nth-child(2) {
    animation: seventh-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.42s backwards;
}

.seventh.is-in-view .seventh__blog {
    animation: seventh-card-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.54s backwards;
}

@keyframes seventh-pop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0.2rem);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes seventh-fade-up {
    0% {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes seventh-bar-in {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes seventh-more-in {
    0% {
        opacity: 0;
        transform: translateX(0.4rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes seventh-card-left {
    0% {
        opacity: 0;
        transform: rotateY(20deg) translateX(-0.5rem);
    }
    100% {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

@keyframes seventh-card-right {
    0% {
        opacity: 0;
        transform: rotateY(-20deg) translateX(0.5rem);
    }
    100% {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .seventh {
    padding: 0.6rem 0.24rem;
}

html[data-mode="h5"] .seventh__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .seventh__title {
    font-size: 0.36rem;
}

html[data-mode="h5"] .seventh__title::before {
    width: 3.8rem;
    height: 0.12rem;
}

html[data-mode="h5"] .seventh__grid {
    grid-template-columns: 1fr;
    gap: 0.3rem;
}

html[data-mode="h5"] .seventh__card-img,
html[data-mode="h5"] .seventh__card-text {
    width: 100%;
}

html[data-mode="h5"] .seventh__card-img {
    height: 3.4rem;
}

html[data-mode="h5"] .seventh__blog {
    width: 100%;
    height: auto;
    padding-bottom: 0.4rem;
}