/* ============================================================
   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;
    box-sizing: border-box;
    height: 9.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.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;
    overflow: hidden;
}

.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: 9.6rem;
    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.64) 0%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.banner__content {
    position: absolute;
    left: 2.6rem;
    top: 2.4rem;
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ---------- 主标题：逐行蒙版揭示 ---------- */
.banner__title {
    color: #FFF;
    text-shadow: 0 0 0.093rem rgba(0, 0, 0, 0.51);
    font-family: Montserrat, sans-serif;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.banner__line {
    display: block;
    overflow: hidden;
}

.banner__line > span {
    display: inline-block;
}

.banner__slide.is-active .banner__line > span {
    animation: banner-line-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.banner__slide.is-active .banner__line:nth-child(2) > span {
    animation-delay: 0.3s;
}

@keyframes banner-line-up {
    from {
        transform: translateY(110%);
        opacity: 0.4;
    }

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

/* ---------- 描述文案 ---------- */
.banner__desc {
    width: 7.12rem; /* 712px */
    color: #FFF;
    text-shadow: 0 0.02rem 0.065rem rgba(0, 0, 0, 0.25);
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0.3rem 0 0;
}

.banner__slide.is-active .banner__desc {
    animation: banner-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

/* ---------- 卖点清单（毛玻璃圆角面板） ---------- */
.banner__list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.14rem 0.23rem;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 0.1rem;
    box-sizing: border-box;
}

.banner__list li {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 600;
    line-height: 1.8;
}

.banner__list li::before {
    content: "✓";
    margin-right: 0.06rem;
}

.banner__slide.is-active .banner__list li {
    animation: banner-fade-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.banner__slide.is-active .banner__list li:nth-child(1) {
    animation-delay: 0.75s;
}

.banner__slide.is-active .banner__list li:nth-child(2) {
    animation-delay: 0.87s;
}

.banner__slide.is-active .banner__list li:nth-child(3) {
    animation-delay: 0.99s;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes banner-fade-left {
    from {
        opacity: 0;
        transform: translateX(-0.3rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- CTA 按钮：橙色胶囊 + ↗ ---------- */
.banner__btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    height: 0.48rem; /* 48px */
    margin-top: 0.55rem;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    border-radius: 1rem;
    background: #EA5404;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0 0.1rem;
}

.banner__btn svg {
    width: 0.2rem; /* 20px */
    height: 0.2rem;
    display: block;
    transition: transform 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: #f2600f;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.42);
}

.banner__btn:hover svg {
    transform: translate(0.02rem, -0.02rem);
}

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

.banner__btn:active {
    transform: translateY(0);
    box-shadow: 0 0.02rem 0.06rem rgba(234, 84, 4, 0.3);
    transition-duration: 0.12s;
}

.banner__slide.is-active .banner__btn {
    animation: banner-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both;
}

@keyframes banner-pop {
    from {
        opacity: 0;
        transform: scale(0.6) translateY(0.2rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 左右切换箭头（两侧竖排居中） ---------- */
.banner__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem; /* 50px */
    height: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease 1.2s;
    animation: banner-fade 0.8s ease 1.2s both;
}

.banner__nav-btn svg {
    display: block;
    width: 0.32rem;
    height: 0.32rem;
}

.banner__nav-btn:hover {
    background: rgba(234, 84, 4, 0.9);
}

.banner__nav-btn:active {
    transform: translateY(-50%) scale(0.9);
    transition-duration: 0.12s;
}

.banner__nav-btn--prev {
    left: 0.68rem; /* 68px */
}

.banner__nav-btn--next {
    right: 0.51rem; /* 51px */
}

.banner__nav-btn--next svg {
    width: 0.5rem;
    height: 0.5rem;
}

/* ---------- 01/02/03 数字分页（index.js 自动生成） ---------- */
.banner__dots {
    position: absolute;
    left: 2.74rem; /* 274px */
    bottom: 0.96rem;
    z-index: 10;
    display: flex;
    gap: 0.2rem;
    counter-reset: banner-dot;
    animation: banner-fade 0.8s ease 1.3s both;
}

.banner__dot {
    counter-increment: banner-dot;
    position: relative;
    width: 0.6rem; /* 60px */
    height: 0.33rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 400;
    text-align: left;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

.banner__dot::before {
    content: "0" counter(banner-dot);
}

/* 下划线跟随容器宽度：未激活 60px，激活撑开为 120px 并推动后续数字 */
.banner__dot::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #999;
    transition: background 0.4s ease;
}

.banner__dot:hover {
    color: #DDD;
}

.banner__dot:hover::after {
    background: #DDD;
}

.banner__dot.is-active {
    width: 1.2rem; /* 120px */
    color: #FFF;
}

.banner__dot.is-active::after {
    background: #FFF;
}

.banner__dot.is-active:hover {
    color: #FFF;
}

.banner__dot.is-active:hover::after {
    background: #FFF;
}

/* ---------- 底部鼠标滚动提示（设计稿 SVG：滚轮 + 下方竖线） ---------- */
.banner__mouse {
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    transform: translateX(-50%);
    z-index: 10;
    width: 0.23rem; /* 23px */
    height: 1.16rem; /* 116px */
    animation: banner-fade 0.8s ease 1.4s both;
}

.banner__mouse svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 下方竖线：循环下滑提示滚动 */
.banner__mouse-line {
    animation: banner-mouse 1.8s ease-in-out infinite;
}

@keyframes banner-mouse {
    0% {
        transform: translateY(-0.06rem);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(0.06rem);
        opacity: 0;
    }
}

@keyframes banner-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------- H5 Banner ---------- */
/* H5：首屏 banner 占满一屏（100vh - 头部 0.8rem），viewport 撑满 banner，避免图片过矮、下方留白 */
html[data-mode="h5"] .banner {
    height: 7.5rem;
}

html[data-mode="h5"] .banner__viewport {
    padding-top: 0;
    height: 100%;
}

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

html[data-mode="h5"] .banner__content {
    left: 0.4rem;
    top: 1.5rem;
    right: 0.4rem;
}

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

html[data-mode="h5"] .banner__desc {
    width: 100%;
    font-size: 0.16rem;
    margin-top: 0.2rem;
}

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

html[data-mode="h5"] .banner__list li {
    font-size: 0.16rem;
    line-height: 1.7;
}

html[data-mode="h5"] .banner__btn {
    padding: 0 0.1rem;
    height: 0.44rem;
    margin-top: 0.4rem;
    font-size: 0.18rem;
}

html[data-mode="h5"] .banner__nav-btn {
    width: 0.4rem;
    height: 0.4rem;
}

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

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

html[data-mode="h5"] .banner__nav-btn svg {
    width: 0.26rem;
    height: 0.26rem;
}

html[data-mode="h5"] .banner__nav-btn--next svg {
    width: 0.4rem;
    height: 0.4rem;
}

html[data-mode="h5"] .banner__dots {
    left: 0.4rem;
    bottom: 0.5rem;
}

html[data-mode="h5"] .banner__mouse {
    display: none;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .banner__bg,
    .banner__slide.is-active .banner__bg {
        animation: none;
        transition: none;
        opacity: 1;
    }

    .banner__slide.is-leaving .banner__bg {
        opacity: 0;
    }

    .banner__slide.is-active .banner__line > span,
    .banner__slide.is-active .banner__desc,
    .banner__slide.is-active .banner__list li,
    .banner__slide.is-active .banner__btn,
    .banner__dots,
    .banner__mouse {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .banner__nav-btn {
        animation: none;
        opacity: 1;
        transform: translateY(-50%);
    }

    .banner__btn::after {
        display: none;
    }

    .banner__mouse-line {
        animation: none;
    }
}


/* ============================================================
   third —— Three Ways to Customize Your Foam（1920 基准）
   背景图 + 标题 + 居中模式无限轮播
   ============================================================ */
.third {
    position: relative;
    height: 7.82rem;
    overflow: hidden;
}

.third__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.third.is-in-view .third__bg {
    transform: scale(1);
}

.third__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

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

/* ---------- 标题：蒙版揭示 ---------- */
.third__title {
    margin: 1rem 0 0;
    overflow: hidden;
    padding-bottom: 0.05rem;
    text-align: center;
    color: #FFF;
    text-shadow: 0 0 0.093rem rgba(0, 0, 0, 0.51);
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.third__title span {
    display: inline-block;
}

html.js .third__title span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.third.is-in-view .third__title span {
    transform: none;
}

/* ---------- 轮播 ---------- */
.third__carousel {
    position: relative;
    margin-top: 0.6rem;
}

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

.third__track {
    display: flex;
    gap: 1.1rem; /* 110px */
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.third__card {
    flex: 0 0 11.8rem; /* 1180px */
    display: flex;
    height: 4.54rem; /* 454px */
    background: #FFF;
    box-shadow: 0 0.04rem 0.3rem rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
    cursor: pointer;
}

.third__card-media {
    flex: 0 0 4.98rem; /* 498px */
    overflow: hidden;
}

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

.third__card-body {
    flex: 1;
    padding: 0.79rem 0.4rem 0 0.76rem;
    box-sizing: border-box;
}

.third__card-icon {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.third__card-title {
    margin: 0.33rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 1.25;
}

/* 标题下装饰线：hover 时变橙加长 */
.third__card-line {
    display: block;
    width: 0.3rem; /* 30px */
    height: 2px;
    margin: 0.18rem 0 0.15rem;
    background: #ACACAC;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

.third__card-desc {
    width: 4.01rem; /* 401px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 1.5;
}

.third__card-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    width: 1.9rem; /* 190px */
    height: 0.48rem; /* 48px */
    margin-top: 0.52rem;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    border-radius: 1rem;
    background: #EA5404;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.third__card-btn svg {
    width: 0.2rem;
    height: 0.2rem;
    transition: transform 0.3s ease;
}

.third__card-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;
}

/* ---------- 左右切换按钮 ---------- */
.third__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem; /* 50px */
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease, box-shadow 0.3s ease;
}

.third__nav svg {
    display: block;
    width: 0.32rem;
    height: 0.32rem;
}

.third__nav--prev,
.third__nav--next {
    background: #FFF;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.15);
}

.third__nav--prev {
    left: 2.9rem; /* 290px */
}

.third__nav--next {
    right: 2.9rem;
}

/* 悬浮：白底变主题橙，箭头同步变白 */
.third__nav--prev:hover,
.third__nav--next:hover {
    background: #EA5404;
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.45);
}

.third__nav:hover svg path {
    stroke: #FFF;
}

/* ---------- 悬浮动效 ---------- */
.third__card:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.16rem 0.4rem rgba(0, 0, 0, 0.28);
}

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

.third__card:hover .third__card-icon {
    transform: rotate(90deg) scale(1.1);
}

.third__card:hover .third__card-line {
    width: 0.6rem;
    background: #EA5404;
}

.third__card:hover .third__card-btn {
    background: #f2600f;
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.42);
}

.third__card:hover .third__card-btn svg {
    transform: translate(0.02rem, -0.02rem);
}

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

.third__nav:hover {
    transform: translateY(-50%) scale(1.12);
}

.third__nav:active {
    transform: translateY(-50%) scale(0.92);
    transition-duration: 0.12s;
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ---------- */
/* 卡片：animation + backwards 填充，结束后不残留，避免影响 hover 过渡 */
html.js .third:not(.is-in-view) .third__card {
    opacity: 0;
}

/* 轮播含首尾克隆（共 9 个子元素），按列位置错峰：1/4/7 → 2/5/8 → 3/6/9 */
.third.is-in-view .third__card:nth-child(3n+1) {
    animation: third-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

.third.is-in-view .third__card:nth-child(3n+2) {
    animation: third-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.third.is-in-view .third__card:nth-child(3n) {
    animation: third-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s backwards;
}

@keyframes third-card-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

html.js .third__nav {
    opacity: 0;
    transition: opacity 0.6s ease 0.9s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease, box-shadow 0.3s ease;
}

.third.is-in-view .third__nav {
    opacity: 1;
}

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

html[data-mode="h5"] .third__title {
    margin-top: 0;
    font-size: 0.32rem;
    padding: 0 0.4rem;
}

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

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

html[data-mode="h5"] .third__card {
    flex: 0 0 6rem;
    flex-direction: column;
    height: auto;
}

html[data-mode="h5"] .third__card-media {
    flex: 0 0 auto;
    width: 100%;
    height: 3rem;
}

html[data-mode="h5"] .third__card-body {
    padding: 0.3rem;
}

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

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

html[data-mode="h5"] .third__nav--prev {
    left: 0.2rem;
}

html[data-mode="h5"] .third__nav--next {
    right: 0.2rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .third__bg,
    .third.is-in-view .third__bg {
        transform: none;
        transition: none;
    }

    html.js .third__title span,
    html.js .third__card,
    html.js .third__nav {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .third__card:hover {
        transform: none;
    }

    .third__card:hover .third__card-img {
        transform: none;
    }
}

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

.eighth h2{
    color: #333;
font-family: Gabarito;
font-size: 0.56rem;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
margin-bottom: 0.43rem;
}

.eighth ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

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

.eighth ul li .t .tit {
    font-size: 0.24rem;
    font-weight: 700;
    color: #333;
    margin-left: 0.15rem;
    font-family: Montserrat, sans-serif; /* Gabarito */
}

/* .b 为社交嵌入容器 */
.eighth ul li .b {
    width: 100%;
    height: calc(100% - 0.4rem);
    border: 0.03rem solid #f0f5fa;
    padding: 0.1rem;
    margin-top: 0.3rem;
    box-sizing: border-box;
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发，等效 wow fadeInUp） ---------- */
html.js .eighth:not(.is-in-view) ul li {
    opacity: 0;
    transform: translateY(0.3rem);
}

.eighth.is-in-view ul li {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.eighth.is-in-view ul li:nth-child(1) {
    transition-delay: 0.05s;
}

.eighth.is-in-view ul li:nth-child(2) {
    transition-delay: 0.2s;
}

.eighth.is-in-view ul li:nth-child(3) {
    transition-delay: 0.35s;
}

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

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

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

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

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

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

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

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

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

/* 系统开启"减少动态效果"时：直接显示，不做隐藏与动画 */
@media (prefers-reduced-motion: reduce) {
    html.js .eighth:not(.is-in-view) ul li {
        opacity: 1;
        transform: none;
    }

    .eighth.is-in-view ul li {
        transition: none;
    }
}

/* ============================================================
   ninth —— Ready to Start Your Project? CTA 横幅（1920 基准）
   ============================================================ */
.ninth {
    position: relative;
    height: 5.2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背景：入场时 Ken Burns 缩放回正 */
.ninth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ninth.is-in-view .ninth__bg {
    transform: scale(1);
}

/* 压暗遮罩，保证文字可读性 */
.ninth__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(2, 18, 38, 0.55) 0%,
            rgba(2, 18, 38, 0.15) 45%,
            rgba(2, 18, 38, 0.5) 100%);
}

.ninth__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ninth__desc {
    color: #E6E6E6;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 1.5;
}

/* 标题：overflow 裁切 + 上移入场的蒙版揭示效果 */
.ninth__title {
    margin-top: 0.14rem;
    overflow: hidden;
    padding-bottom: 0.06rem;
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.48rem;
    font-weight: 600;
    line-height: 1.2;
}

.ninth__title span {
    display: inline-block;
}

/* ---------- CTA 圆形按钮 ---------- */
.ninth__cta {
    position: relative;
    display: block;
    width: 1.97rem;
    height: 1.97rem;
    margin: 0.22rem auto 0;
}

.ninth__cta-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    background: #EA5404;
    border-radius: 50%;
    transition: transform 0.35s ease;
}

/* ---------- 环形文字：沿圆内侧排布（设计稿 "Share Your Ideas ..."） ---------- */
.ninth__cta-ring-text {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    transform: rotate(-45deg);
    /* 起点转到左下（约 7 点半方向），文字顺时针向上绕排 */
    transition: transform 6s linear;
    pointer-events: none;
}

.ninth__cta-ring-text-inner {
    fill: rgba(255, 255, 255, 0.55);
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 500;
}

.ninth__cta:hover .ninth__cta-ring-text {
    transform: rotate(-405deg);
}

.ninth__cta-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.46rem;
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01rem;
    text-transform: uppercase;
    text-align: center;
}

/* 圆内右下方的白色小圆点（设计稿 6px、60% 白点，约 4 点半方向） */
.ninth__cta-dot {
    position: absolute;
    top: 70.6%;
    left: 73.6%;
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transition: transform 0.35s ease;
}

/* 呼吸扩散光环（仅在入场后循环播放） */
.ninth__cta-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    border: 1px solid rgba(234, 84, 4, 0.85);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.ninth.is-in-view .ninth__cta-ring {
    animation: ninth-ring 2.4s ease-out 1.4s infinite;
}

@keyframes ninth-ring {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

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

/* hover：圆放大、箭头沿 ↗ 方向探出 */
.ninth__cta:hover .ninth__cta-circle {
    transform: scale(1.08);
}

.ninth__cta:hover .ninth__cta-dot {
    transform: translateX(0.08rem);
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .ninth__desc {
    opacity: 0;
    transform: translateY(0.3rem);
    transition: opacity 0.8s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

html.js .ninth__title span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

html.js .ninth__cta {
    transform: scale(0) rotate(-45deg);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
}

html.js .ninth__cta-dot {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease 0.95s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s;
}

html.js .ninth__cta-ring-text {
    opacity: 0;
    transition: opacity 0.7s ease 1.1s, transform 6s linear;
}

.ninth.is-in-view .ninth__cta-ring-text {
    opacity: 1;
}

.ninth.is-in-view .ninth__desc {
    opacity: 1;
    transform: none;
}

.ninth.is-in-view .ninth__title span {
    transform: none;
}

.ninth.is-in-view .ninth__cta {
    transform: none;
}

.ninth.is-in-view .ninth__cta-dot {
    opacity: 1;
    transform: none;
}

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

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

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

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

html[data-mode="h5"] .ninth__cta-circle {
    width: 1.26rem;
    height: 1.26rem;
    margin: -0.63rem 0 0 -0.63rem;
}

html[data-mode="h5"] .ninth__cta-text {
    width: 1.26rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .ninth__cta-ring-text {
    width: 1.26rem;
    height: 1.26rem;
    margin: -0.63rem 0 0 -0.63rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .ninth__bg,
    .ninth.is-in-view .ninth__bg {
        transform: none;
        transition: none;
    }

    html.js .ninth__desc,
    html.js .ninth__title span,
    html.js .ninth__cta,
    html.js .ninth__cta-dot,
    html.js .ninth__cta-ring-text {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ninth.is-in-view .ninth__cta-ring {
        animation: none;
    }
}

/* ============================================================
   第七屏：News & Blogs（Figma 168_201：1920 x 950 浅色城市背景）
   布局：左上标题 + 三张 427x590 白卡（图 391x250 圆角10）+ View More
   ============================================================ */
.seventh {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    box-sizing: border-box;
    height: 9.5rem;
    padding: 0.78rem 2.6rem 0;
    background: #F2F3ED;
    overflow: hidden;
}

/* 背景：入场时 Ken Burns 缩放回正 */
.seventh__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.seventh.is-in-view .seventh__bg {
    transform: scale(1);
}

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

/* ---------- 标题：40px / 600 / #333 ---------- */
.seventh__title {
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* ---------- 卡片行：三卡 427 宽，间距 59 ---------- */
.seventh__grid {
    margin-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    gap: 0.59rem;
}

.seventh__card {
    display: flex;
    flex-direction: column;
    width: 4.27rem;
    /* 427px */
    height: 5.9rem;
    /* 590px */
    padding: 0.21rem 0.18rem 0.36rem;
    box-sizing: border-box;
    background: #FFF;
    text-decoration: none;
    transform-origin: center bottom;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}

/* 卡片图：391 x 250，圆角 10 */
.seventh__card-media {
    height: 2.5rem;
    border-radius: 0.1rem;
    overflow: hidden;
}

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

/* 标题：20px / 600 / #333，最多 3 行 */
.seventh__card-name {
    margin: 0.34rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* 分隔线：1px，悬浮时橙色从左向右扫入 */
.seventh__card-line {
    position: relative;
    display: block;
    margin-top: auto;
    height: 1px;
    background: #D9D9D9;
    overflow: hidden;
}

.seventh__card-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #EA5404;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 底部：News + 日期，16px / #999 */
.seventh__card-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.34rem;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* ---------- 卡片悬浮：上浮投影 + 图放大 + 标题变橙 + 橙线扫入 ---------- */
.seventh__card:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.24rem 0.48rem rgba(51, 51, 51, 0.16);
}

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

.seventh__card:hover .seventh__card-name {
    color: #EA5404;
}

.seventh__card:hover .seventh__card-line::after {
    transform: scaleX(1);
}

/* ---------- View More：163 x 46 圆角 50 描边按钮 ---------- */
.seventh__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.63rem;
    /* 163px */
    height: 0.46rem;
    /* 46px */
    margin: 0.6rem auto 0;
    border-radius: 0.5rem;
    /* 50px */
    border: 1px solid #CCC;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 悬浮：橙色斜切高光扫过 */
.seventh__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.seventh__btn:hover {
    background: #EA5404;
    border-color: #EA5404;
    color: #FFF;
    transform: translateY(-0.04rem);
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.4);
}

.seventh__btn:hover::before {
    left: 130%;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   背景 Ken Burns + 标题左滑揭示 + 卡片 3D 翻转入场 + 按钮回弹
   ============================================================ */
/* 入场前统一隐藏；入场改用 animation（不占用 transition），
   保证卡片阴影 / 按钮背景色的悬浮 transition 不被覆盖 */
html.js .seventh__title,
html.js .seventh__card,
html.js .seventh__btn {
    opacity: 0;
}

.seventh.is-in-view .seventh__title {
    opacity: 1;
    animation: seventh-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

.seventh.is-in-view .seventh__card {
    opacity: 1;
    animation: seventh-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 错峰仅作用于 animation-delay，不污染悬浮 transition-delay */
.seventh.is-in-view .seventh__card:nth-child(1) { animation-delay: 0.3s; }
.seventh.is-in-view .seventh__card:nth-child(2) { animation-delay: 0.45s; }
.seventh.is-in-view .seventh__card:nth-child(3) { animation-delay: 0.6s; }

.seventh.is-in-view .seventh__btn {
    opacity: 1;
    animation: seventh-btn-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s backwards;
}

@keyframes seventh-title-in {
    from {
        opacity: 0;
        transform: translateX(-0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes seventh-card-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateX(14deg) translateY(0.9rem) scale(0.94);
        transform-origin: center bottom;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes seventh-btn-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem) scale(0.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 入场后卡片图轻微回缩呼吸（动画不占用 transform，避免与 hover 冲突） */
.seventh.is-in-view .seventh__card-img {
    animation: seventh-zoom 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.seventh.is-in-view .seventh__card:nth-child(1) .seventh__card-img { animation-delay: 0.35s; }
.seventh.is-in-view .seventh__card:nth-child(2) .seventh__card-img { animation-delay: 0.5s; }
.seventh.is-in-view .seventh__card:nth-child(3) .seventh__card-img { animation-delay: 0.65s; }

@keyframes seventh-zoom {
    from {
        transform: scale(1.18);
    }

    to {
        transform: scale(1);
    }
}

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

html[data-mode="h5"] .seventh__title {
    font-size: 0.4rem;
    text-align: center;
}

html[data-mode="h5"] .seventh__grid {
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

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

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

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

html[data-mode="h5"] .seventh__btn {
    width: 2rem;
    height: 0.6rem;
    font-size: 0.22rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .seventh__bg,
    .seventh.is-in-view .seventh__bg {
        transform: none;
        transition: none;
    }

    html.js .seventh__title,
    html.js .seventh__card,
    html.js .seventh__btn,
    .seventh.is-in-view .seventh__title,
    .seventh.is-in-view .seventh__card,
    .seventh.is-in-view .seventh__btn {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .seventh.is-in-view .seventh__card-img {
        animation: none;
    }
}

/* ============================================================
   第五屏：Our Core Advantages（Figma 193_573：1920 x 860）
   左侧标题区 + 右侧三条优势（圆形图标 120 + 文案 365 宽）
   ============================================================ */
.fifith {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    box-sizing: border-box;
    height: 8.6rem;
    background: #F2F3ED;
    overflow: hidden;
}

/* 背景：入场时 Ken Burns 缩放回正 */
.fifith__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.fifith.is-in-view .fifith__bg {
    transform: scale(1);
}

/* 海绵纹理叠加层 */
.fifith__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.fifith__inner {
    position: relative;
    z-index: 1;
    height: 100%;
}

/* ---------- 左侧标题区：left 260 / top 239 / 宽 582 ---------- */
.fifith__intro {
    position: absolute;
    left: 2.6rem;
    top: 2.39rem;
    width: 5.82rem;
}

/* eyebrow：图标 + Core Advantages，16px / #999 */
.fifith__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.11rem;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.24rem;
    letter-spacing: 0.02rem;
}

.fifith__eyebrow-icon {
    width: 0.24rem;
    height: 0.24rem;
    display: block;
}

/* 标题：40px / 600 / #333，两行 */
.fifith__title {
    margin: 0.1rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

/* 描述：16px / 400 / #666，宽 524 */
.fifith__desc {
    margin: 0.27rem 0 0;
    width: 5.24rem;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

/* Scroll for More：圆形箭头 + 20px 文案 */
.fifith__scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    margin-top: 0.9rem;
    text-decoration: none;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.fifith__scroll-icon {
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fifith__scroll {
    transition: color 0.3s ease;
}

/* 悬浮：箭头下探回弹 + 文字变橙 */
.fifith__scroll:hover {
    color: #EA5404;
}

.fifith__scroll:hover .fifith__scroll-icon {
    transform: translateY(0.06rem);
}

/* ---------- 右侧优势列表：left 1082 / top 106，条目间隔 109 ---------- */
.fifith__list {
    position: absolute;
    left: 10.82rem;
    top: 1.06rem;
    display: flex;
    flex-direction: column;
    gap: 1.09rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fifith__item {
    display: flex;
    align-items: flex-start;
    width: 5.28rem;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 中间条目右移 52（错落布局） */
.fifith__item:nth-child(2) {
    margin-left: 0.52rem;
}

/* 圆形图标：120，首条 #EA5404，其余 #333 */
.fifith__item-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #333;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.4s ease,
        box-shadow 0.45s ease;
}

/* 内圈半透明白描边：90，居中 */
.fifith__item-circle::before {
    content: "";
    position: absolute;
    inset: 0.15rem;
    border: 1px solid #FFF;
    border-radius: 50%;
    opacity: 0.3;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease;
}

.fifith__item-icon {
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 文案区：左距 43（163-120），宽 365 */
.fifith__item-info {
    margin-left: 0.43rem;
    width: 3.65rem;
}

.fifith__item-name {
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.fifith__item-desc {
    margin: 0.18rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
}

/* ---------- 悬浮：条目右移 + 圆放大发光 + 图标旋转 + 标题变橙 ---------- */
.fifith__item:hover {
    transform: translateX(0.08rem);
}

.fifith__item:hover .fifith__item-circle {
    transform: scale(1.1);
    background: #EA5404;
    box-shadow: 0 0.1rem 0.26rem rgba(234, 84, 4, 0.5);
}

.fifith__item:hover .fifith__item-circle::before {
    transform: scale(1.12);
    opacity: 0.55;
}

.fifith__item:hover .fifith__item-icon {
    transform: scale(1.12) rotate(-8deg);
}

.fifith__item:hover .fifith__item-name {
    color: #EA5404;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   入场用 animation（不占用 transition），悬浮过渡不受影响
   ============================================================ */
html.js .fifith__eyebrow,
html.js .fifith__title,
html.js .fifith__desc,
html.js .fifith__scroll,
html.js .fifith__item,
html.js .fifith__lines {
    opacity: 0;
}

/* 纹理叠加层：入场后淡入 */
.fifith.is-in-view .fifith__lines {
    opacity: 1;
    transition: opacity 1.2s ease 0.2s;
}

.fifith.is-in-view .fifith__eyebrow {
    opacity: 1;
    animation: fifith-fade-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

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

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

.fifith.is-in-view .fifith__scroll {
    opacity: 1;
    animation: fifith-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s backwards;
}

/* 右侧条目：从右滑入错峰 */
.fifith.is-in-view .fifith__item {
    opacity: 1;
    animation: fifith-item-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fifith.is-in-view .fifith__item:nth-child(1) { animation-delay: 0.35s; }
.fifith.is-in-view .fifith__item:nth-child(2) { animation-delay: 0.5s; }
.fifith.is-in-view .fifith__item:nth-child(3) { animation-delay: 0.65s; }

/* 圆形图标：错峰弹出 */
.fifith.is-in-view .fifith__item-circle {
    animation: fifith-circle-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.fifith.is-in-view .fifith__item:nth-child(1) .fifith__item-circle { animation-delay: 0.55s; }
.fifith.is-in-view .fifith__item:nth-child(2) .fifith__item-circle { animation-delay: 0.7s; }
.fifith.is-in-view .fifith__item:nth-child(3) .fifith__item-circle { animation-delay: 0.85s; }

@keyframes fifith-fade-left {
    from {
        opacity: 0;
        transform: translateX(-0.4rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifith-title-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifith-pop {
    from {
        opacity: 0;
        transform: translateY(0.3rem) scale(0.6);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifith-item-in {
    from {
        opacity: 0;
        transform: translateX(0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fifith-circle-pop {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

html[data-mode="h5"] .fifith__inner {
    height: auto;
    display: flex;
    flex-direction: column;
}

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

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

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

html[data-mode="h5"] .fifith__desc {
    width: 100%;
    font-size: 0.24rem;
}

html[data-mode="h5"] .fifith__scroll {
    margin-top: 0.5rem;
    font-size: 0.26rem;
}

html[data-mode="h5"] .fifith__list {
    position: static;
    margin-top: 0.6rem;
    gap: 0.5rem;
}

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

html[data-mode="h5"] .fifith__item:nth-child(2) {
    margin-left: 0;
}

html[data-mode="h5"] .fifith__item-info {
    flex: 1;
    width: auto;
    margin-left: 0.3rem;
}

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

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

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .fifith__bg,
    .fifith.is-in-view .fifith__bg {
        transform: none;
        transition: none;
    }

    html.js .fifith__eyebrow,
    html.js .fifith__title,
    html.js .fifith__desc,
    html.js .fifith__scroll,
    html.js .fifith__item,
    html.js .fifith__lines,
    .fifith.is-in-view .fifith__eyebrow,
    .fifith.is-in-view .fifith__title,
    .fifith.is-in-view .fifith__desc,
    .fifith.is-in-view .fifith__scroll,
    .fifith.is-in-view .fifith__item,
    .fifith.is-in-view .fifith__item-circle {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* ============================================================
   第四屏：About Jiangyuan（Figma 168_47：1920 x 1187）
   上部 960 背景图区（标题/播放按钮/双卡片），下部白底数据条
   ============================================================ */
.fourth {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    box-sizing: border-box;
    height: 13.11rem;
    background: #FFF;
    overflow: hidden;
}

/* 背景：仅覆盖上部 960（数据条在白底上），入场 Ken Burns 缩放回正 */
.fourth__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 9.6rem;
    object-fit: cover;
    transform: scale(1.15);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.fourth.is-in-view .fourth__bg {
    transform: scale(1);
}

.fourth__inner {
    position: relative;
    z-index: 1;
    height: 100%;
}

/* ---------- 播放按钮：141 圆形热区 + 100 橙色圆心 ---------- */
.fourth__play {
    position: absolute;
    left: 2.4rem;
    top: 5.18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 50%;
    text-decoration: none;
}

/* 橙色圆心：100 */
.fourth__play::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #EA5404;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.45s ease;
}

/* 呼吸扩散光环：入场后循环播放 */
.fourth__play-halo {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(234, 84, 4, 0.4);
    opacity: 0;
    pointer-events: none;
}

.fourth.is-in-view .fourth__play-halo {
    animation: fourth-halo 2.4s ease-out 1.4s infinite;
}

/* 旋转虚线描边环：悬浮时加速旋转 */
.fourth__play-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    animation: fourth-spin 18s linear infinite;
}

.fourth__play-icon {
    position: relative;
    z-index: 1;
    width: 0.23rem;
    height: 0.27rem;
    margin-left: 0.05rem;
    display: block;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 悬浮：圆放大发光 + 环加速 + 三角放大 */
.fourth__play:hover::before {
    transform: scale(1.12);
    box-shadow: 0 0.12rem 0.36rem rgba(234, 84, 4, 0.55);
}

.fourth__play:hover .fourth__play-ring {
    opacity: 1;
    animation-duration: 6s;
}

.fourth__play:hover .fourth__play-icon {
    transform: scale(1.15);
}

/* ---------- 左上文字区 ---------- */
.fourth__eyebrow {
    position: absolute;
    left: 2.69rem;
    top: 2.13rem;
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
}

/* 标题：72px，About #333 / Jiangyuan #EA5404 */
.fourth__title {
    position: absolute;
    left: 2.6rem;
    top: 2.44rem;
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}

.fourth__title span {
    color: #EA5404;
}

/* 描述：16px / #333，宽 628 */
.fourth__desc {
    position: absolute;
    left: 2.6rem;
    top: 3.63rem;
    width: 6.28rem;
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
}

/* ---------- 双卡片：424 x 359，Company Profile 白卡 / Our Factory 橙卡 ---------- */
.fourth__card {
    position: absolute;
    top: 6.01rem;
    box-sizing: border-box;
    width: 4.24rem;
    height: 3.59rem;
    padding: 0.52rem 0.44rem 0;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

.fourth__card:nth-child(1) {
    left: 8.12rem;
    background: rgba(255, 255, 255, 0.9);
}

.fourth__card:nth-child(2) {
    left: 12.36rem;
    background: #EA5404;
}

.fourth__card-name {
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.fourth__card-desc {
    margin: 0.22rem 0 0;
    width: 3.46rem;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

/* View More：127 x 46 胶囊描边按钮 */
.fourth__card-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.44rem;
    width: 1.27rem;
    height: 0.46rem;
    border: 1px solid #333;
    border-radius: 0.5rem;
    overflow: hidden;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 400;
    z-index: 1;
    transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

/* 橙卡按钮：白色描边白字 */
.fourth__card--orange .fourth__card-name,
.fourth__card--orange .fourth__card-desc,
.fourth__card--orange .fourth__card-btn {
    color: #FFF;
    border-color: #FFF;
}

/* 高光斜切层：悬浮时扫过按钮表面 */
.fourth__card-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -0.75rem;
    width: 0.5rem;
    height: 100%;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

/* 右下角图标 */
.fourth__card-icon {
    position: absolute;
    right: 0.42rem;
    bottom: 0.28rem;
    width: 0.8rem;
    height: 0.67rem;
    display: block;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fourth__card--orange .fourth__card-icon {
    width: 0.66rem;
}

/* 悬浮：卡片上浮投影 + 图标回旋放大 + 按钮填充反色 */
.fourth__card:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.24rem 0.5rem rgba(51, 51, 51, 0.18);
}

.fourth__card:hover .fourth__card-btn {
    background: #EA5404;
    border-color: #EA5404;
    color: #FFF;
}

.fourth__card--orange:hover .fourth__card-btn {
    background: #FFF;
    border-color: #FFF;
    color: #EA5404;
}

.fourth__card:hover .fourth__card-btn::before {
    left: 1.5rem;
}

.fourth__card:hover .fourth__card-icon {
    transform: scale(1.12) rotate(-8deg);
}

.fourth__card:hover .fourth__card-name {
    color: #EA5404;
}

.fourth__card--orange:hover .fourth__card-name {
    color: #FFF;
}

/* ---------- 底部数据条：4 项统计 + 分隔线 ---------- */
.fourth__stats {
    position: absolute;
    left: 2.6rem;
    top: 10.84rem;
    box-sizing: border-box;
    display: flex;
    width: 14rem;
    height: 1.03rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fourth__stat {
    flex: 1;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 分隔线：由 index.js 创建，精确居中于相邻两个数字正中间 */
.fourth__stat-divider {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1rem;
    background: #D9D9D9;
}

.fourth__stat-num {
    margin: 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    transition: color 0.3s ease;
}

.fourth__stat-plus {
    margin-left: 0.06rem;
    font-size: 0.2rem;
    font-weight: 400;
    /* 设计稿中 + 为上标（顶部距数字顶部约 7px），提升基线模拟 */
    vertical-align: 0.22rem;
}

.fourth__stat-label {
    margin: 0.22rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

/* 悬浮：整项上浮 + 数字变橙 */
.fourth__stat:hover {
    transform: translateY(-0.05rem);
}

.fourth__stat:hover .fourth__stat-num {
    color: #EA5404;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   入场用 animation（不占用 transition），悬浮过渡不受影响
   ============================================================ */
html.js .fourth__eyebrow,
html.js .fourth__title,
html.js .fourth__desc,
html.js .fourth__play,
html.js .fourth__card,
html.js .fourth__stat {
    opacity: 0;
}

.fourth.is-in-view .fourth__eyebrow {
    opacity: 1;
    animation: fourth-fade-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* 标题：蒙版揭示（clip-path 裁切 + 上移入场） */
.fourth.is-in-view .fourth__title {
    opacity: 1;
    animation: fourth-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

.fourth.is-in-view .fourth__desc {
    opacity: 1;
    animation: fourth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

/* 播放按钮：旋转弹出 */
.fourth.is-in-view .fourth__play {
    opacity: 1;
    animation: fourth-play-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s backwards;
}

/* 卡片：白卡从左、橙卡从右，错峰滑入 */
.fourth.is-in-view .fourth__card {
    opacity: 1;
    animation: fourth-card-in-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.fourth.is-in-view .fourth__card:nth-child(2) {
    animation-name: fourth-card-in-right;
    animation-delay: 0.65s;
}

/* 数据项：上浮错峰 */
.fourth.is-in-view .fourth__stat {
    opacity: 1;
    animation: fourth-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.fourth.is-in-view .fourth__stat:nth-child(1) { animation-delay: 0.7s; }
.fourth.is-in-view .fourth__stat:nth-child(2) { animation-delay: 0.85s; }
.fourth.is-in-view .fourth__stat:nth-child(3) { animation-delay: 1s; }
.fourth.is-in-view .fourth__stat:nth-child(4) { animation-delay: 1.15s; }

@keyframes fourth-fade-left {
    from {
        opacity: 0;
        transform: translateX(-0.4rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fourth-title-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fourth-play-pop {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(-90deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fourth-card-in-left {
    from {
        opacity: 0;
        transform: translateX(-0.8rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fourth-card-in-right {
    from {
        opacity: 0;
        transform: translateX(0.8rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 光环呼吸扩散 */
@keyframes fourth-halo {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

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

/* 虚线环旋转 */
@keyframes fourth-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

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

html[data-mode="h5"] .fourth__inner {
    height: auto;
    display: flex;
    flex-direction: column;
}

html[data-mode="h5"] .fourth__eyebrow,
html[data-mode="h5"] .fourth__title,
html[data-mode="h5"] .fourth__desc,
html[data-mode="h5"] .fourth__play,
html[data-mode="h5"] .fourth__cards {
    position: static;
}

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

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

html[data-mode="h5"] .fourth__desc {
    width: 100%;
    font-size: 0.24rem;
}

html[data-mode="h5"] .fourth__play {
    order: 10;
    align-self: center;
    margin-top: 0.5rem;
}

html[data-mode="h5"] .fourth__cards {
    order: 11;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

html[data-mode="h5"] .fourth__card,
html[data-mode="h5"] .fourth__card:nth-child(1),
html[data-mode="h5"] .fourth__card:nth-child(2) {
    position: static;
    width: 100%;
    height: auto;
    padding-bottom: 0.4rem;
}

html[data-mode="h5"] .fourth__card-desc {
    width: calc(100% - 1rem);
    font-size: 0.22rem;
}

html[data-mode="h5"] .fourth__card-btn {
    margin-top: 0.3rem;
}

html[data-mode="h5"] .fourth__stats {
    position: static;
    order: 12;
    width: 100%;
    height: auto;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    gap: 0.4rem 0;
}

html[data-mode="h5"] .fourth__stat {
    flex: 1 1 40%;
    box-sizing: border-box;
}

html[data-mode="h5"] .fourth__stat-num {
    font-size: 0.52rem;
}

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

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .fourth__bg,
    .fourth.is-in-view .fourth__bg {
        transform: none;
        transition: none;
    }

    html.js .fourth__eyebrow,
    html.js .fourth__title,
    html.js .fourth__desc,
    html.js .fourth__play,
    html.js .fourth__card,
    html.js .fourth__stat,
    .fourth.is-in-view .fourth__eyebrow,
    .fourth.is-in-view .fourth__title,
    .fourth.is-in-view .fourth__desc,
    .fourth.is-in-view .fourth__play,
    .fourth.is-in-view .fourth__card,
    .fourth.is-in-view .fourth__stat {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }

    .fourth.is-in-view .fourth__play-halo,
    .fourth__play-ring {
        animation: none;
    }
}

/* ============================================================
   第二屏：Custom Foam Components 分类横滑列表（1920 基准）
   padding 100 0；标题 1000 宽下边距 60；列表横向滚动 padding 0 312 间隔 40
   ============================================================ */
.second {
    position: relative;
    box-sizing: border-box;
}

/* 可视内容吸附层：高度由 JS 设为整屏，横滚期间钉住不动 */
.second__inner {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
}

/* ---------- 标题：1000 宽 / 40px / 600 / #333 ---------- */
.second__title {
    width: 10rem;
    margin: 0 auto 0.6rem;
    color: #333;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.second__title span {
    display: inline-block;
}

/* ---------- 分类列表：横向滚动，padding 0 312，间隔 40 ---------- */
.second__list {
    display: flex;
    gap: 0.4rem;
    /* 左右 312 为设计参数；上下 60 为悬浮上浮与投影留出余量，避免被滚动容器裁切 */
    padding: 0.6rem 3.12rem;
    overflow-x: auto;
    /* 隐藏滚动条，保持画面干净 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* ---------- 卡片 ---------- */
.second__card {
    position: relative;
    flex: 0 0 auto;
    width: 4.28rem;
    border-radius: 0.2rem;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

/* 图片：428 x 360，上圆角 20 */
.second__card-media {
    position: relative;
    width: 4.28rem;
    height: 3.6rem;
    border-radius: 0.2rem 0.2rem 0 0;
    overflow: hidden;
}

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

/* 悬浮时图片上的橙色渐变提亮层 */
.second__card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(234, 84, 4, 0) 30%,
            rgba(234, 84, 4, 0.45) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 文本区域：428 x 142，下圆角 20，#333，padding 30 30 0 */
.second__card-body {
    box-sizing: border-box;
    width: 4.28rem;
    height: 1.42rem;
    border-radius: 0 0 0.2rem 0.2rem;
    background: #333;
    padding: 0.3rem 0.3rem 0;
    text-align: left;
    transition: background-color 0.45s ease;
}

/* 卡片标题：20px / 600 / #FFF，下边距 15 */
.second__card-title {
    margin: 0 0 0.15rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* tag 容器：间隔 10 */
.second__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
}

/* tag：胶囊描边，14px / 400 / #999 */
.second__tag {
    display: inline-flex;
    border-radius: 100px;
    border: 1px solid #999;
    padding: 0.06rem 0.16rem;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    color: #999;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-transform: capitalize;
    transition: color 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 悬浮：卡片上浮橙色辉光 + 图放大 + 文本区变橙 + tag 变白 ---------- */
.second__card:hover {
    transform: translateY(-0.14rem);
    /* 投影扩散控制在 60 内，配合列表上下 padding 保证不被裁切 */
    box-shadow: 0 0.18rem 0.4rem rgba(234, 84, 4, 0.35);
}

.second__card:hover .second__card-img {
    transform: scale(1.1) rotate(1.5deg);
    filter: brightness(1.06);
}

.second__card:hover .second__card-media::after {
    opacity: 1;
}

.second__card:hover .second__card-body {
    background: #EA5404;
}

.second__card:hover .second__tag {
    color: #FFF;
    border-color: #FFF;
    transform: translateY(-0.03rem);
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   标题裁切揭示 + 卡片 3D 翻转滑入错峰（入场用 animation，不占用悬浮 transition）
   ============================================================ */
html.js .second__title,
html.js .second__card {
    opacity: 0;
}

.second.is-in-view .second__title {
    opacity: 1;
    animation: second-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* 卡片：错峰 3D 翻入 */
.second.is-in-view .second__card {
    opacity: 1;
    animation: second-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) { animation-delay: 0.3s; }
.second.is-in-view .second__card:nth-child(2) { animation-delay: 0.45s; }
.second.is-in-view .second__card:nth-child(3) { animation-delay: 0.6s; }
.second.is-in-view .second__card:nth-child(4) { animation-delay: 0.75s; }

/* 卡片图入场轻微回缩呼吸 */
.second.is-in-view .second__card-img {
    animation: second-zoom 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) .second__card-img { animation-delay: 0.35s; }
.second.is-in-view .second__card:nth-child(2) .second__card-img { animation-delay: 0.5s; }
.second.is-in-view .second__card:nth-child(3) .second__card-img { animation-delay: 0.65s; }
.second.is-in-view .second__card:nth-child(4) .second__card-img { animation-delay: 0.8s; }

/* tag 入场：逐个弹出 */
.second.is-in-view .second__tag {
    animation: second-tag-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.second.is-in-view .second__card:nth-child(1) .second__tag:nth-child(1) { animation-delay: 0.7s; }
.second.is-in-view .second__card:nth-child(1) .second__tag:nth-child(2) { animation-delay: 0.8s; }
.second.is-in-view .second__card:nth-child(2) .second__tag:nth-child(1) { animation-delay: 0.85s; }
.second.is-in-view .second__card:nth-child(2) .second__tag:nth-child(2) { animation-delay: 0.95s; }
.second.is-in-view .second__card:nth-child(3) .second__tag:nth-child(1) { animation-delay: 1s; }
.second.is-in-view .second__card:nth-child(3) .second__tag:nth-child(2) { animation-delay: 1.1s; }
.second.is-in-view .second__card:nth-child(4) .second__tag:nth-child(1) { animation-delay: 1.15s; }
.second.is-in-view .second__card:nth-child(4) .second__tag:nth-child(2) { animation-delay: 1.25s; }

@keyframes second-title-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

@keyframes second-card-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateY(18deg) translateX(-0.6rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes second-zoom {
    from {
        transform: scale(1.18);
    }

    to {
        transform: scale(1);
    }
}

@keyframes second-tag-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

/* H5：取消钉屏，恢复常规纵向排布 + 原生横滑 */
html[data-mode="h5"] .second__inner {
    position: static;
    height: auto;
    display: block;
    padding: 0.6rem 0;
}

html[data-mode="h5"] .second__title {
    width: auto;
    margin: 0 0.4rem 0.4rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .second__list {
    padding: 0 0.4rem;
    gap: 0.3rem;
}

html[data-mode="h5"] .second__card,
html[data-mode="h5"] .second__card-media,
html[data-mode="h5"] .second__card-body {
    width: 6rem;
}

html[data-mode="h5"] .second__card-media {
    height: 5.04rem;
}

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

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

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .second__title,
    html.js .second__card,
    .second.is-in-view .second__title,
    .second.is-in-view .second__card,
    .second.is-in-view .second__card-img,
    .second.is-in-view .second__tag {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }
}

/* ============================================================
   第六屏：Certifications & Compliance（1920 基准）
   padding 100 0 内容居中；标题 1000 宽下边距 40
   左图 660x495 右距 108；右侧列表 5 项自动向下循环（图 62 右距 20）
   底部证书卡片横向无限滚动（卡片 226 / padding 9 / 间距 23）
   ============================================================ */
.sixth {
    box-sizing: border-box;
    padding: 1rem 0;
    overflow: hidden;
}

/* ---------- 标题：1000 宽 / 40px / 600 / #333，下边距 40 ---------- */
.sixth__title {
    width: 10rem;
    margin: 0 auto 0.4rem;
    color: #333;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.sixth__title span {
    display: inline-block;
}

/* ---------- 中部：左图 + 右列表，下边距 60 ---------- */
.sixth__main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

/* 左侧图片：660 x 495，右边距 108 */
.sixth__media {
    flex: 0 0 auto;
    margin-right: 1.08rem;
}

.sixth__media-img {
    display: block;
    width: 6.6rem;
    height: 4.95rem;
    object-fit: cover;
}

/* 右侧列表：上边距 42，间隔 23（视口固定 400，自动向下循环） */
.sixth__list {
    height: 4rem;
    overflow: hidden;
    margin-top: 0.42rem;
}

.sixth__list-track {
    display: flex;
    flex-direction: column;
    gap: 0.23rem;
    /* 自动循环的位移动画（JS 复位时临时关闭） */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sixth__item {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 图标：62 x 62，右边距 20 */
.sixth__item-icon {
    flex: 0 0 auto;
    width: 0.62rem;
    height: 0.62rem;
    margin-right: 0.2rem;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.45s ease;
}

/* 标题：20px / 600 / #333，宽 549，下边距 10 */
.sixth__item-name {
    width: 5.49rem;
    margin: 0 0 0.1rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    transition: color 0.3s ease;
}

/* 描述：16px / 400 / #666 / 150%，宽 549 */
.sixth__item-desc {
    width: 5.49rem;
    margin: 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* ---------- 列表悬浮：右移 + 图标金色辉光回旋 + 标题变橙 ---------- */
.sixth__item:hover {
    transform: translateX(0.08rem);
}

.sixth__item:hover .sixth__item-icon {
    transform: scale(1.18) rotate(-10deg);
    filter: drop-shadow(0 0 0.12rem rgba(234, 84, 4, 0.55));
}

.sixth__item:hover .sixth__item-name {
    color: #EA5404;
}

/* ---------- 底部证书：横向无限滚动（间距 23） ---------- */
.sixth__marquee {
    overflow: hidden;
    /* 上下留出悬浮余量，负 margin 抵消，不改变整体布局 */
    padding: 0.6rem 0;
    margin: -0.6rem 0;
}

/* 用卡片 margin-right 承载间距，保证 translateX(-50%) 无缝循环 */
.sixth__marquee-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    animation: sixth-marquee 36s linear infinite;
    will-change: transform;
}

.sixth__marquee:hover .sixth__marquee-track {
    animation-play-state: paused;
}

@keyframes sixth-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* 卡片：226 宽（含 padding 9）、#D9D9D9 底、内部间距 10 */
.sixth__card {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
    width: 2.26rem;
    padding: 0.09rem;
    margin-right: 0.23rem;
    background: #D9D9D9;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.45s ease,
        box-shadow 0.45s ease;
}

.sixth__card-img {
    display: block;
    width: 2.08rem;
    height: 2.98rem;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

/* 卡片悬浮：上浮放大 + 白底橙辉光 + 图片微旋提亮 */
.sixth__card:hover {
    transform: translateY(-0.1rem) scale(1.05);
    background: #FFF;
    box-shadow: 0 0.18rem 0.4rem rgba(234, 84, 4, 0.4);
    z-index: 1;
}

.sixth__card:hover .sixth__card-img {
    transform: scale(1.04) rotate(-1.5deg);
    filter: brightness(1.05);
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   标题裁切揭示 + 左图 3D 翻入 + 列表右滑错峰 + 横滚带上浮
   ============================================================ */
html.js .sixth__title,
html.js .sixth__media,
html.js .sixth__item,
html.js .sixth__marquee {
    opacity: 0;
}

.sixth.is-in-view .sixth__title {
    opacity: 1;
    animation: second-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

/* 左图：从左 3D 翻入 */
.sixth.is-in-view .sixth__media {
    opacity: 1;
    animation: sixth-media-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

@keyframes sixth-media-in {
    from {
        opacity: 0;
        transform: perspective(12rem) rotateY(24deg) translateX(-0.8rem) scale(0.92);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 列表项：从右滑入错峰 */
.sixth.is-in-view .sixth__item {
    opacity: 1;
    animation: sixth-item-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sixth.is-in-view .sixth__item:nth-child(1) { animation-delay: 0.45s; }
.sixth.is-in-view .sixth__item:nth-child(2) { animation-delay: 0.6s; }
.sixth.is-in-view .sixth__item:nth-child(3) { animation-delay: 0.75s; }
.sixth.is-in-view .sixth__item:nth-child(4) { animation-delay: 0.9s; }
.sixth.is-in-view .sixth__item:nth-child(5) { animation-delay: 1.05s; }

@keyframes sixth-item-in {
    from {
        opacity: 0;
        transform: translateX(0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 证书横滚：整体上浮入场 */
.sixth.is-in-view .sixth__marquee {
    opacity: 1;
    animation: sixth-marquee-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
}

@keyframes sixth-marquee-in {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

html[data-mode="h5"] .sixth__title {
    width: auto;
    margin: 0 0 0.4rem;
    font-size: 0.4rem;
}

html[data-mode="h5"] .sixth__main {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

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

html[data-mode="h5"] .sixth__media-img {
    width: 6.4rem;
    height: 4.8rem;
}

/* H5 列表取消自动循环，展示全部 */
html[data-mode="h5"] .sixth__list {
    overflow: auto;
    margin-top: 0;
}

html[data-mode="h5"] .sixth__item-name,
html[data-mode="h5"] .sixth__item-desc {
    width: 100%;
}

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

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

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

html[data-mode="h5"] .sixth__card-img {
    width: 2.42rem;
    height: 3.47rem;
}