/* ============================================================
   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;
    max-width: 6.5rem;
}

.banner__eyebrow {
    color: #FFF;
    text-shadow: 0 0.04rem 0.04rem rgba(0, 0, 0, 0.56);
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0.16rem;
}

.banner__title {
    color: #FFF;
    text-shadow: 0 0 0.093rem rgba(0, 0, 0, 0.51);
    font-family: Inter, sans-serif;
    font-size: 0.50rem;
    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: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 0.4rem;
    max-width: 5.2rem;
}

.banner__btn {
    display: inline-flex;
    padding: 0.20rem 0.40rem;
    justify-content: center;
    align-items: center;
    gap: 0.10rem;
    background: var(--Style, #02347D);
    color: #FFF;
    font-family: Inter, 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;
}

.banner__btn:hover {
    background: #0A4BA8;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 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;
}

/* ---------- 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;
}

/* ============================================================
   首页 第二屏：Our Products
   ============================================================ */
.second {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    background: #F3F7FA;
    padding: 0.8rem 1.6rem 0.52rem;
    box-sizing: border-box;
}

.second__inner {
    max-width: 16.5rem;
    margin: 0 auto;
}

/* ---------- 标题行 ---------- */
.second__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.second__title {
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.14rem;
}

.second__line {
    width: 0.8rem;
    height: 0.06rem;
    background: #B81C22;
    margin-bottom: 0.14rem;
}

.second__subtitle {
    color: #666;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.second__view-all {
    display: inline-flex;
padding: 0.18rem 0.32rem;
justify-content: center;
align-items: center;
gap: 0.1rem;
border: 1px solid #0137A4;
    font-family: Inter;
font-size: 0.18rem;
font-style: normal;
font-weight: 500;
line-height: normal;
color: #02347D;
    background: transparent;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.second__view-all:hover {
    background: #02347D;
    border-color: #02347D;
    color: #FFF;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 0.4);
}

/* ---------- 分类导航 ---------- */
.second__tabs {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    margin-bottom: 0.3rem;
    position: relative;
}

.second__tab-list {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    /* flex 项默认 min-width:auto 会被内容撑开，导致横向滚动失效、整屏被撑宽 */
    min-width: 0;
    /* overflow-x:auto 会使 overflow-y 隐式变为 auto，选中项底部的小三角
       会被裁掉；用上下内边距留出空间，负外边距抵消以免布局位移 */
    padding: 0.06rem 0;
    margin: -0.06rem 0;
}

.second__tab-list::-webkit-scrollbar {
    display: none;
}

.second__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    /* gap: 0.06rem; */
    /* min-width: 1.5rem; */
    padding: 0.08rem 0.2rem;
    background: #FFF;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    /* user-select: none; */
    /* flex-shrink: 0; */
    width: 1.825rem;
    height: 1.52rem;
}

.second__tab img {
    height: 0.8rem;
    width: 1.41rem;
    margin-bottom: 0.18rem;
}

.second__tab span {
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    transition: color 0.3s ease;
}

.second__tab.is-active {
    background: #02347D;
}

.second__tab.is-active span {
    color: #FFF;
}

/* 选中分类底部的指示箭头（小三角，指向下方） */
.second__tab.is-active::after {
    content: "";
    position: absolute;
    bottom: -0.05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.09rem;
    height: 0.05rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M9 0H0L4.5 5L9 0Z' fill='%2302347D'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.second__tab-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.24rem;
    height: 0.24rem;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.25s ease;
    position: absolute;
}

.second__tab-arrow:hover {
    opacity: 1;
}

.second__tab-arrow img {
    width: 100%;
    height: 100%;
    display: block;
}

.second__tab-arrow--left{
    left: -0.3rem;
}

.second__tab-arrow--right{
    right: -0.3rem;
}

/* ---------- 产品网格 ---------- */
/* 面板默认隐藏，仅当前分类的面板显示（tab 切换的显示开关） */
.second__panel {
    display: none;
}

.second__panel.is-active {
    display: block;
}

.second__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.24rem;
    margin-bottom: 0.4rem;
}

.second__card {
    display: block;
    color: inherit;
    text-decoration: none;
        background: #FFF;
    border-radius: 0.04rem;
    overflow: hidden;
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 3.82rem;
    /* height: 4.66rem; */
    padding: 0.16rem 0.24rem;
}

.second__card:hover {
    transform: translateY(-0.04rem);
    box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.1);
}

.second__card-img {
    height: 3.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 0.2rem; */
    box-sizing: border-box;
    width: 3.34rem;
}

.second__card-img img {
    width: 3.34rem;
    height: 3.34rem;
    object-fit: contain;
    display: block;
}

.second__card-title {
        color: #333;
    font-family: Inter, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 500;
    height: 0.64rem;
    margin-bottom: 0.14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.second__card-divider {
    height: 0.01rem;
    background: #DFDFDF;
    margin-bottom: 0.14rem;
}

.second__card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.second__card-action span {
    color: #666;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: color 0.3s ease;
}

.second__card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.34rem;
    height: 0.34rem;
    background: #CACACA;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.second__card-icon-wrap img {
    width: 0.12rem;
    height: 0.07rem;
    display: block;
}

.second__card-icon-wrap img.second__card-icon-hover {
    display: none;
}

.second__card:hover .second__card-icon-wrap img.second__card-icon {
    display: none;
}

.second__card:hover .second__card-icon-wrap img.second__card-icon-hover {
    display: block;
}

.second__card:hover .second__card-icon-wrap {
    background: #02347D;
}

.second__card:hover .second__card-action span {
    color: #02347D;
}

/* ---------- Learn More 按钮 ---------- */
.second__learn-more {
    display: block;
    width: max-content;
    margin: 0 auto;
    padding: 0.16rem 0.4rem;
    background: #02347D;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.second__learn-more:hover {
    background: #0A4BA8;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 0.4);
    filter: brightness(1.08);
}

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

html[data-mode="h5"] .second__header {
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.3rem;
}

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

html[data-mode="h5"] .second__tab {
    /* 原规则只设了 min-width，实际宽度仍被 PC 的 1.825rem 锁定，
       且 8 个 tab 会在窄屏把导航撑成两倍屏宽 */
    width: 1.6rem;
    min-width: 1.6rem;
    height: auto;
    padding: 0.16rem 0.12rem;
}

html[data-mode="h5"] .second__tab img {
    width: 1.2rem;
    height: 0.68rem;
    margin-bottom: 0.12rem;
}

/* 原 0.11rem 在 375 设备上只有 5.5px，完全不可读 */
html[data-mode="h5"] .second__tab span {
    font-size: 0.22rem;
}

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

/* 卡片沿用 PC 的固定 3.82rem 会超出两列栅格的列宽，改为随列宽自适应 */
html[data-mode="h5"] .second__card {
    width: 100%;
    height: auto;
    padding: 0.16rem 0.2rem;
}

/* 图片容器与图片同样改为自适应，避免固定 3.34rem 溢出并被裁切 */
html[data-mode="h5"] .second__card-img {
    width: 100%;
    height: 1.8rem;
}

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

html[data-mode="h5"] .second__card-title {
    font-size: 0.24rem;
}

html[data-mode="h5"] .second__card-action span {
    font-size: 0.22rem;
}

html[data-mode="h5"] .second__card-icon-wrap {
    width: 0.4rem;
    height: 0.4rem;
}

/* ---------- 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 {
    width: 0.095rem;
    height: 0.095rem;
    border-radius: 50%;
    background: #FFF;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.banner__dot:hover {
    opacity: 0.9;
}

.banner__dot.is-active {
    background: #02347D;
    opacity: 1;
    transform: scale(1.15);
}

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

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

/* ============================================================
   第三屏：About Xin Wugang Steel（公司介绍 + 数据 + 工厂图）
   设计稿基准：1920×1221
   背景图：third-img1.png（淡蓝白色调）
   ============================================================ */
.third {
    position: relative;
    width: 100%;
    height: 12.21rem;
    background: #FFFFFF url('../assets/images/home/third-img1.webp') no-repeat center top / cover;
    overflow: hidden;
    padding: 1.33rem 1.6rem 0;
}

.third__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 顶部行：标题 + 描述 + 统计 */
.third__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.third__intro{
    width: 6.88rem;
    margin-right: 1.2rem;
}

.third__stats {
    flex: 1;
    max-width: 12.4rem;
}

.third__title {
    color: #1a1a2e;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    line-height: 0.4rem;
    font-style: normal;
    font-weight: 700;
}

.third__line {
    width: 0.8rem;
    height: 0.06rem;
    margin: 0.14rem 0;
    background: #B81C22;
}

.third__eyebrow {
    color: #1a1a2e;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
}

.third__learn-more {
    margin-top: 1.08rem;
    display: flex;
padding: 0.18rem 0.4rem;
justify-content: center;
align-items: center;
gap: 0.1rem;
color: #FFF;
font-family: Inter;
font-size: 0.18rem;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
background:  #02347D;
width: max-content;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.third__learn-more:hover {
    background: #0A4BA8;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 0.4);
    filter: brightness(1.08);
}

.third__desc {
    color: #666;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* 数字统计：3 列 */
.third__numbers {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.third__number {
        min-width: 1.6rem;
    display: flex;
    flex-direction: column;
}

.third__num {
    display: inline-flex;
    align-items: baseline;
    color: var(--Style, #02347D);
    font-family: "ITC Avant Garde Gothic Demi", "Inter", sans-serif;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.third__num-unit {
    color: var(--Style, #02347D);
    font-family: "ITC Avant Garde Gothic Demi", "Inter", sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 0.04rem;
}

.third__label {
    margin-top: 0.12rem;
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

opacity: 0.58;
}

/* 底部：工厂建筑图 + 中央播放按钮 */
.third__media {
    position: relative;
    width: 100%;
    height: 6.09rem;
    overflow: hidden;
    border-radius: 0.04rem;
}

.third__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.third__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.12801rem;
    height: 1.12801rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #02347D;
    box-shadow: 0 0.08rem 0.3rem rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.third__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.third__play-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: thirdPlaySpin 14s linear infinite;
}

.third__play-char {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Inter, sans-serif;
    font-size: 0.1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #ffffff;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-0.44rem);
}

.third__play-icon {
    position: relative;
    z-index: 1;
    width: 0.21745rem;
    height: 0.21745rem;
        left: 0.05rem;
}

.third__play::after {
    content: "";
    position: absolute;
    inset: -0.12rem;
    border-radius: 50%;
    border: 0.02rem solid rgba(255, 255, 255, 0.85);
    animation: thirdPlayPulse 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes thirdPlaySpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes thirdPlayPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.65);
        opacity: 0;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* ---------- 第三屏入场动画：JS 加 .is-in-view 触发 ---------- */
html.js .third:not(.is-in-view):not(.third--played) .third__title,
html.js .third:not(.is-in-view):not(.third--played) .third__line,
html.js .third:not(.is-in-view):not(.third--played) .third__eyebrow,
html.js .third:not(.is-in-view):not(.third--played) .third__learn-more,
html.js .third:not(.is-in-view):not(.third--played) .third__desc,
html.js .third:not(.is-in-view):not(.third--played) .third__number,
html.js .third:not(.is-in-view):not(.third--played) .third__media {
    opacity: 0;
    transform: translateY(0.2rem);
}

.third.is-in-view .third__title {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

.third.is-in-view .third__line {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.third.is-in-view .third__eyebrow {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.third.is-in-view .third__learn-more {
    /* 用 backwards 而非 both：动画结束后交还给普通样式，悬浮位移才能生效 */
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.third.is-in-view .third__desc {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.third.is-in-view .third__number:nth-child(1) {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.third.is-in-view .third__number:nth-child(2) {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.third.is-in-view .third__number:nth-child(3) {
    animation: thirdFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.third.is-in-view .third__media {
    animation: thirdFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

@keyframes thirdFadeUp {
    from {
        opacity: 0;
        transform: translateY(0.2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   H5 端覆盖（750 设计稿基准）
   ============================================================ */
html[data-mode="h5"] .third {
    height: auto;
    padding: 0.6rem 0.4rem 0.5rem;
}

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

html[data-mode="h5"] .third__stats {
    flex: none;
    max-width: none;
}

html[data-mode="h5"] .third__title {
    font-size: 0.42rem;
    margin-bottom: 0.12rem;
}

html[data-mode="h5"] .third__line {
    width: 0.5rem;
    height: 0.04rem;
    margin-bottom: 0.14rem;
}

html[data-mode="h5"] .third__eyebrow {
    font-size: 0.2rem;
    margin-bottom: 0.28rem;
}

html[data-mode="h5"] .third__learn-more {
    padding: 0.12rem 0.32rem;
    font-size: 0.2rem;
}

html[data-mode="h5"] .third__desc {
    font-size: 0.22rem;
    line-height: 1.6;
    margin-bottom: 0.3rem;
}

html[data-mode="h5"] .third__numbers {
    flex-wrap: wrap;
    gap: 0.3rem;
}

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

html[data-mode="h5"] .third__num-unit {
    font-size: 0.32rem;
}

html[data-mode="h5"] .third__label {
    font-size: 0.18rem;
    margin-top: 0.1rem;
}

html[data-mode="h5"] .third__media {
    height: auto;
}

html[data-mode="h5"] .third__media-img {
    height: auto;
}

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

html[data-mode="h5"] .third__play-icon {
    width: 0.18rem;
    height: 0.18rem;
}

html[data-mode="h5"] .third__play-char {
    font-size: 0.05rem;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-0.3rem);
}

/* ============================================================
   第四屏：Industries We Serve
   ============================================================ */
.fourth {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    height: 9.6rem;
    overflow: hidden;
    background: #0e1a2b;
}

.fourth__bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fourth__bg-slide {
    position: absolute;
    inset: 0;
    background: no-repeat center / cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.fourth__bg-slide.is-active {
    opacity: 1;
    animation: fourthBgIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fourthBgIn {
    from {
        opacity: 0;
        transform: scale(1.15) translateX(0.8rem);
    }
    to {
        opacity: 1;
        transform: scale(1.04) translateX(0);
    }
}

.fourth__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}

.fourth__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: 16.5rem;
    margin: 0 auto;
    box-sizing: border-box;
}

.fourth__left {
    flex: 1;
    max-width: 6.5rem;
}

.fourth__slides {
    position: relative;
}

.fourth__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(0.2rem);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fourth__slide.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fourth__title {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.fourth__line {
    width: 0.8rem;
    height: 0.06rem;
    background: #B81C22;
    margin: 0.14rem 0;
}

.fourth__desc {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0.32rem;
}

.fourth__btn {
    display: inline-flex;
    padding: 0.18rem 0.4rem;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    background: var(--Style, #02347D);
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.fourth__btn:hover {
    background: #0A4BA8;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 0.4);
    filter: brightness(1.08);
}

.fourth__right {
    position: relative;
        flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.fourth__nav-line {
        position: absolute;
    left: 0.065rem;
    /* top: 0.24rem; */
    /* bottom: 0.24rem; */
    width: 0.01rem;
    background: rgba(255, 255, 255, 0.25);
    height: 100%;
}

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

.fourth__nav li {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.24rem 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.fourth__nav li:not(.is-active) {
    opacity: 0.6;
}

.fourth__nav li.is-active {
    opacity: 1;
}

.fourth__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50%;
    background: #FFF;
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fourth__nav li:not(.is-active) .fourth__dot {
    opacity: 0;
}

.fourth__dot span {
    display: block;
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    background: var(--Style, #02347D);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fourth__nav li.is-active .fourth__dot span {
    opacity: 1;
}

.fourth__nav-text {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.22rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

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

html[data-mode="h5"] .fourth__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0;
}

html[data-mode="h5"] .fourth__left {
    max-width: none;
}

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

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

html[data-mode="h5"] .fourth__btn {
    font-size: 0.2rem;
    padding: 0.14rem 0.32rem;
}

html[data-mode="h5"] .fourth__nav-text {
    font-size: 0.2rem;
}

html[data-mode="h5"] .fourth__nav li {
    padding: 0.18rem 0;
}

/* ============================================================
   第五屏：Why Buyers Choose Us
   ============================================================ */
.fifth {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    height: 9.6rem;
    padding: 1.61rem 1.6rem 0;
    box-sizing: border-box;
    background: url('../assets/images/home/fifth-img1.webp') no-repeat center / cover;
    overflow: hidden;
}

.fifth__inner {
    position: relative;
    z-index: 3;
}

.fifth__header {
    text-align: center;
    margin-bottom: 0.68rem;
}

.fifth__title {
    color: #000;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.fifth__line {
    width: 0.8rem;
    height: 0.06rem;
    background: #C90025;
    margin: 0.14rem auto;
}

.fifth__desc {
    color: #000;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.fifth__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.66rem 0.56rem;
}

.fifth__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fifth__item-head {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.fifth__icon {
    width: 0.58rem;
    height: 0.58rem;
    flex-shrink: 0;
    object-fit: contain;
}

.fifth__item-title {
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.fifth__item-desc {
    color: #999;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0.27rem 0 0;
}

.fifth__trapezoid {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 7.5rem;
    height: 3.55rem;
    z-index: 1;
    pointer-events: none;
}

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

.fifth__product {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6.09rem;
    height: 4.57rem;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
}

/* ============================================================
   第六屏：Supplying Projects Worldwide
   ============================================================ */
.sixth {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    height: 8.9rem;
    margin: 0 auto;
    padding-left: 1.46rem;
    box-sizing: border-box;
    background: #1D2235;
    overflow: hidden;
}

.sixth__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.sixth__left {
    flex: 0 0 3rem;
}

.sixth__title {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.44rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.sixth__line {
    display: block;
    width: 0.8rem;
    height: 0.06rem;
    margin: 0.24rem 0;
    background: #B81C22;
}

.sixth__desc {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.sixth__btn {
    display: inline-flex;
    padding: 0.18rem 0.4rem;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    background: linear-gradient(90deg, #00339A 0%, #014ADC 105.62%);
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 1.56rem;
    border: none;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sixth__btn:hover {
    transform: translateY(-0.04rem);
    box-shadow: 0 0.14rem 0.28rem rgba(1, 74, 220, 0.5);
    filter: brightness(1.15);
}

.sixth__btn:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(0.95);
}

.sixth__right {
    flex: 0 0 14.67rem;
    height: 5.99rem;
    align-self: center;
    position: relative;
}

.sixth__map {
    position: relative;
    width: 100%;
    height: 100%;
}

.sixth__map-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.sixth__dots {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.sixth__dot {
    position: absolute;
    width: 0.0694rem;
    height: 0.0694rem;
    border-radius: 50%;
    background: #FFF;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0.04rem 0.01rem rgba(1, 74, 220, 0.85),
        0 0 0.12rem 0.05rem rgba(0, 51, 154, 0.55);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
    animation: sixthDotPulse 2.4s ease-in-out infinite;
}

.sixth__dot:nth-child(2n) {
    animation-delay: 0.5s;
}

.sixth__dot:nth-child(3n) {
    animation-delay: 1s;
}

.sixth__dot:hover {
    transform: translate(-50%, -50%) scale(1.7);
}

.sixth__dot.is-selected {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: none;
}

@keyframes sixthDotPulse {
    0%, 100% {
        box-shadow:
            0 0 0.04rem 0.01rem rgba(1, 74, 220, 0.8),
            0 0 0.12rem 0.05rem rgba(0, 51, 154, 0.5);
    }
    50% {
        box-shadow:
            0 0 0.07rem 0.03rem rgba(1, 74, 220, 0.95),
            0 0 0.18rem 0.08rem rgba(0, 51, 154, 0.75);
    }
}

.sixth__marker {
    position: absolute;
    width: 0.3642rem;
    height: 0.3885rem;
    transform: translate(-50%, -100%) scale(1);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.sixth__marker.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -100%) scale(0.4);
}

.sixth__marker-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7rem;
    height: 0.7rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(184, 28, 34, 0.7) 0%,
        rgba(184, 28, 34, 0.3) 40%,
        rgba(184, 28, 34, 0) 70%);
    pointer-events: none;
    animation: sixthGlowPulse 1.6s ease-in-out infinite;
}

@keyframes sixthGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.65;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

.sixth__marker-icon {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 0.06rem rgba(184, 28, 34, 0.85));
}

.sixth__info {
    position: absolute;
    width: 3.21rem;
    height: 1.36rem;
    background: linear-gradient(90deg, #0A2D76 0%, #0B3B9F 100%);
    padding: 0.14rem 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.sixth__info.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.12rem);
}

.sixth__info-tip {
    position: absolute;
    top: -0.12rem;
    left: 50%;
    width: 0.2rem;
    height: 0.2rem;
    background: #B81C22;
    transform: translate(-50%, 0) rotate(45deg);
    pointer-events: none;
}

.sixth__info-dash {
    position: absolute;
    top: -0.2rem;
    left: 50%;
    width: 0.01rem;
    height: 0.08rem;
    background: #B81C22;
    transform: translate(-50%, 0);
    pointer-events: none;
}

.sixth__info-title {
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.26rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 0;
}

.sixth__info-line {
    display: block;
    width: 2.34rem;
    height: 0.01rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
    margin: 0;
}

.sixth__info-desc {
    color: #FFF;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.4;
    margin: 0;
}

.sixth__info-title,
.sixth__info-desc {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sixth__info.is-switching .sixth__info-title,
.sixth__info.is-switching .sixth__info-desc {
    opacity: 0;
    transform: translateY(0.08rem);
}

/* ============================================================
   通用滚动入场动效（第二屏 / 第四屏 / 第五屏）
   - JS 在进入视口时给 section 添加 .is-in-view 触发
   - 初始隐藏态仅在 html.js 且未入场时生效，无 JS 时直接可见
   - 使用 fill-mode: backwards，动画结束后释放 transform，不影响 hover 效果
   ============================================================ */
@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(0.2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 初始隐藏态 ---------- */
html.js .second:not(.is-in-view) .second__header,
html.js .second:not(.is-in-view) .second__tabs,
html.js .second:not(.is-in-view) .second__card,
html.js .second:not(.is-in-view) .second__learn-more,
html.js .fourth:not(.is-in-view) .fourth__left,
html.js .fourth:not(.is-in-view) .fourth__right,
html.js .fifth:not(.is-in-view) .fifth__header,
html.js .fifth:not(.is-in-view) .fifth__item,
html.js .fifth:not(.is-in-view) .fifth__trapezoid,
html.js .fifth:not(.is-in-view) .fifth__product,
html.js .sixth:not(.is-in-view) .sixth__left,
html.js .sixth:not(.is-in-view) .sixth__right,
html.js .seventh:not(.is-in-view) .seventh__header,
html.js .seventh:not(.is-in-view) .seventh__slider,
html.js .seventh:not(.is-in-view) .seventh__controls {
    opacity: 0;
    transform: translateY(0.2rem);
}

/* ---------- 第二屏：标题行 → 分类导航 → 产品卡片逐个 → Learn More ---------- */
.second.is-in-view .second__header {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.second.is-in-view .second__tabs {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.second.is-in-view .second__card {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) {
    animation-delay: 0.22s;
}

.second.is-in-view .second__card:nth-child(2) {
    animation-delay: 0.28s;
}

.second.is-in-view .second__card:nth-child(3) {
    animation-delay: 0.34s;
}

.second.is-in-view .second__card:nth-child(4) {
    animation-delay: 0.4s;
}

.second.is-in-view .second__card:nth-child(5) {
    animation-delay: 0.46s;
}

.second.is-in-view .second__card:nth-child(6) {
    animation-delay: 0.52s;
}

.second.is-in-view .second__card:nth-child(7) {
    animation-delay: 0.58s;
}

.second.is-in-view .second__card:nth-child(8) {
    animation-delay: 0.64s;
}

.second.is-in-view .second__learn-more {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards;
}

/* ---------- 第四屏：左侧内容 + 右侧导航 ---------- */
.fourth.is-in-view .fourth__left {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.fourth.is-in-view .fourth__right {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

/* ---------- 第五屏：标题 → 五项逐个 → 装饰图形 ---------- */
.fifth.is-in-view .fifth__header {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.fifth.is-in-view .fifth__item {
    animation: fadeUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fifth.is-in-view .fifth__item:nth-child(1) {
    animation-delay: 0.15s;
}

.fifth.is-in-view .fifth__item:nth-child(2) {
    animation-delay: 0.23s;
}

.fifth.is-in-view .fifth__item:nth-child(3) {
    animation-delay: 0.31s;
}

.fifth.is-in-view .fifth__item:nth-child(4) {
    animation-delay: 0.39s;
}

.fifth.is-in-view .fifth__item:nth-child(5) {
    animation-delay: 0.47s;
}

.fifth.is-in-view .fifth__trapezoid {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.fifth.is-in-view .fifth__product {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.62s backwards;
}

/* ---------- 第六屏：左侧内容 + 右侧地图 ---------- */
.sixth.is-in-view .sixth__left {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.sixth.is-in-view .sixth__right {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

/* ============================================================
   第七屏：Latest News 横向滚动轮播
   ============================================================ */
.seventh {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    height: 9.6rem;
    margin: 0 auto;
    padding: 1.28rem 1.6rem 0;
    box-sizing: border-box;
    background: url("../assets/images/home/seventh-img1.webp") no-repeat center/cover;
    overflow: hidden;
}

.seventh__inner {
    position: relative;
    z-index: 1;
}

.seventh__header {
    position: relative;
    margin-bottom: 0.5rem;
}

.seventh__subtitle {
    color: var(--Style, #02347D);
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0.12rem;
}

.seventh__title {
    color: #1A1A1A;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.seventh__more {
    position: absolute;
    right: 0;
    top: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.3rem;
    background: #02347D;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.seventh__more:hover {
    background: #0A4BA8;
    transform: translateY(-0.03rem);
    box-shadow: 0 0.12rem 0.24rem rgba(2, 52, 125, 0.4);
}

.seventh__slider {
    width: 100%;
    overflow: hidden;
}

.seventh__track {
    display: flex;
    gap: 0.74rem;
    padding-left: 0.24rem;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.seventh__card {
    position: relative;
    color: inherit;
    text-decoration: none;
    flex: 0 0 7.54rem;
    display: flex;
    width: 7.54rem;
    height: 4rem;
    padding: 0.24rem 0.24rem 0.24rem 3.6rem;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 0.01rem solid #EEE;
    background: #FFF;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.seventh__card:hover {
    transform: translateY(-0.04rem);
    border-color: transparent;
    box-shadow: 0 0.14rem 0.32rem rgba(2, 52, 125, 0.18);
}

.seventh__thumb {
    position: absolute;
    left: -0.24rem;
    top: 50%;
    width: 3.64rem;
    height: 3.05rem;
    transform: translateY(-50%);
}

.seventh__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.seventh__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.seventh__time {
    color: #999;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0.12rem;
}

.seventh__card-title {
    color: #333;
    font-family: Inter, sans-serif;
    font-size: 0.26rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.12rem;
    transition: color 0.25s ease;
}

.seventh__card.is-active .seventh__card-title,
.seventh__card:hover .seventh__card-title {
    color: #02347D;
}

.seventh__desc {
    overflow: hidden;
    color: #1A1A1A;
    text-overflow: ellipsis;
    font-family: Inter, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0.2rem;
}

.seventh__link {
    color: var(--Style, #02347D);
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    margin-top: 0.8rem;
    transition: color 0.25s ease;
}

.seventh__link:hover {
    color: #014ADC;
    text-decoration: underline;
}

.seventh__controls {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-top: 0.4rem;
}

.seventh__arrow {
    width: 0.59rem;
    height: 0.59rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

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

.seventh__arrow:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 0.05rem 0.1rem rgba(2, 52, 125, 0.35));
}

.seventh__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ---------- 第七屏：滚动入场动效 ---------- */
.seventh.is-in-view .seventh__header {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.seventh.is-in-view .seventh__slider {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.seventh.is-in-view .seventh__controls {
    animation: fadeUpIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

/* ============================================================
   H5 适配（data-mode="h5"，750 设计稿基准）
   —— 第五屏 / 第六屏 / 第七屏
   ============================================================ */
/* ---------- 第五屏：Why Buyers Choose Us ---------- */
html[data-mode="h5"] .fifth {
    height: auto;
    padding: 0.8rem 0.3rem;
}

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

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

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

/* 单列堆叠：PC 的三列网格在窄屏会挤成竖条 */
html[data-mode="h5"] .fifth__grid {
    grid-template-columns: 1fr;
    gap: 0.3rem;
}

html[data-mode="h5"] .fifth__item-head {
    gap: 0.16rem;
}

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

html[data-mode="h5"] .fifth__item-title {
    font-size: 0.28rem;
}

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

/* 装饰图形：H5 下压低为底部色块，避免遮挡正文 */
html[data-mode="h5"] .fifth__trapezoid {
    /* width: 100%;
    height: 1.2rem; */
}

/* 右下角产品图在窄屏会压住最后一条文案，H5 下隐藏 */
html[data-mode="h5"] .fifth__product {
    display: none;
}

/* ---------- 第六屏：Supplying Projects Worldwide ---------- */
html[data-mode="h5"] .sixth {
    height: auto;
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .sixth__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    height: auto;
}

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

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

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

html[data-mode="h5"] .sixth__btn {
    margin-top: 0.3rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.26rem;
}

/* 地图容器按图片原始比例（1453×599）等比缩放，避免 object-fit 留白
   导致百分比坐标与实际地图错位；点位的百分比坐标因此可跨端复用 */
html[data-mode="h5"] .sixth__right {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1453 / 599;
    align-self: stretch;
}

/* H5 下加大点位热区，便于手指点击 */
html[data-mode="h5"] .sixth__dot {
    width: 0.16rem;
    height: 0.16rem;
}

/* 触屏无 hover，取消点位放大 */
html[data-mode="h5"] .sixth__dot:hover {
    transform: translate(-50%, -50%);
}

html[data-mode="h5"] .sixth__info {
    width: 3.4rem;
    height: auto;
    min-height: 1.6rem;
    padding: 0.18rem 0.24rem;
}

html[data-mode="h5"] .sixth__info-title {
    font-size: 0.28rem;
}

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

html[data-mode="h5"] .sixth__info-desc {
    font-size: 0.22rem;
}

/* ---------- 第七屏：Latest News ---------- */
html[data-mode="h5"] .seventh {
    height: auto;
    padding: 0.8rem 0.3rem;
}

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

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

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

/* 绝对定位的 "Learn More" 在窄屏会压住标题，改为常规流内按钮 */
html[data-mode="h5"] .seventh__more {
    position: static;
    margin-top: 0.24rem;
    padding: 0.16rem 0.28rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .seventh__track {
    gap: 0.3rem;
    padding-left: 0.24rem;
}

html[data-mode="h5"] .seventh__card {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    height: auto;
    min-height: 3.2rem;
    padding: 0.3rem 0.3rem 0.3rem 2.9rem;
}

/* 触屏无 hover，取消悬浮位移 */
html[data-mode="h5"] .seventh__card:hover {
    transform: none;
}

html[data-mode="h5"] .seventh__thumb {
    width: 2.8rem;
    height: 2.6rem;
}

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

html[data-mode="h5"] .seventh__card-title {
    font-size: 0.28rem;
}

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

html[data-mode="h5"] .seventh__link {
    font-size: 0.24rem;
    margin-top: 0.24rem;
}

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

/* 系统开启“减少动态效果”时：直接显示，不做隐藏与位移 */
@media (prefers-reduced-motion: reduce) {
    html.js .second:not(.is-in-view) .second__header,
    html.js .second:not(.is-in-view) .second__tabs,
    html.js .second:not(.is-in-view) .second__card,
    html.js .second:not(.is-in-view) .second__learn-more,
    html.js .fourth:not(.is-in-view) .fourth__left,
    html.js .fourth:not(.is-in-view) .fourth__right,
    html.js .fifth:not(.is-in-view) .fifth__header,
    html.js .fifth:not(.is-in-view) .fifth__item,
    html.js .fifth:not(.is-in-view) .fifth__trapezoid,
    html.js .fifth:not(.is-in-view) .fifth__product,
    html.js .sixth:not(.is-in-view) .sixth__left,
    html.js .sixth:not(.is-in-view) .sixth__right,
    html.js .seventh:not(.is-in-view) .seventh__header,
    html.js .seventh:not(.is-in-view) .seventh__slider,
    html.js .seventh:not(.is-in-view) .seventh__controls {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   按钮悬浮微交互（统一升级）
   底色渐变自左向右擦入 + 高光斜向扫过 + 轻微上浮
   阴影改为紧致柔和的小投影，去掉原过大扩散阴影与 brightness 提亮
   ============================================================ */

/* 建立包含块（.seventh__more 自身已绝对定位，不再覆盖 position） */
.banner__btn,
.second__view-all,
.second__learn-more,
.third__learn-more,
.fourth__btn,
.sixth__btn {
    position: relative;
}

.banner__btn,
.second__view-all,
.second__learn-more,
.third__learn-more,
.fourth__btn,
.sixth__btn,
.seventh__more {
    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,
.second__view-all::after,
.second__learn-more::after,
.third__learn-more::after,
.fourth__btn::after,
.sixth__btn::after,
.seventh__more::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,
.second__view-all:hover,
.second__learn-more:hover,
.third__learn-more:hover,
.fourth__btn:hover,
.sixth__btn:hover,
.seventh__more: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,
.second__view-all:hover::after,
.second__learn-more:hover::after,
.third__learn-more:hover::after,
.fourth__btn:hover::after,
.sixth__btn:hover::after,
.seventh__more:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.banner__btn:active,
.second__view-all:active,
.second__learn-more:active,
.third__learn-more:active,
.fourth__btn:active,
.sixth__btn:active,
.seventh__more:active {
    transform: translateY(0);
    box-shadow: 0 0.01rem 0.04rem rgba(2, 52, 125, 0.16);
    transition-duration: 0.12s;
}

/* 描边按钮：底色擦入时同步切换文字与描边颜色 */
.second__view-all:hover {
    color: #FFF;
    border-color: #014ADC;
}

/* 第六屏按钮：保留原有渐变底色，在其之上叠加擦入渐变 */
.sixth__btn {
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%),
        linear-gradient(90deg, #00339A 0%, #014ADC 105.62%);
    background-repeat: no-repeat, no-repeat;
    background-size: 0% 100%, 100% 100%;
    background-position: 0 0, 0 0;
}

.sixth__btn:hover {
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%),
        linear-gradient(90deg, #00339A 0%, #014ADC 105.62%);
    background-size: 100% 100%, 100% 100%;
}

/* 系统开启“减少动态效果”时：只保留颜色变化 */
@media (prefers-reduced-motion: reduce) {

    .banner__btn::after,
    .second__view-all::after,
    .second__learn-more::after,
    .third__learn-more::after,
    .fourth__btn::after,
    .sixth__btn::after,
    .seventh__more::after {
        display: none;
    }

    .banner__btn:hover,
    .second__view-all:hover,
    .second__learn-more:hover,
    .third__learn-more:hover,
    .fourth__btn:hover,
    .sixth__btn:hover,
    .seventh__more:hover {
        transform: none;
    }
}