/* 以 100px = 1rem 为换算基准 */
html {
    font-size: 100px;
    /* 禁止页面横向滚动：轮播卡片/100vw 元素溢出右缘时，
       横向滚轮会把 scroll 事件抛给头部显隐逻辑误触发导航弹出。
       clip 比 hidden 更彻底（程序化滚动也不允许），不支持 clip 的浏览器回退到 body 的 hidden */
    overflow-x: clip;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'PingFang SC', sans-serif;
    background-color: #0b0f14;
    color: #ffffff;
    overflow-x: clip; /* clip 不产生滚动容器，position:sticky（产品目录侧栏等）可正常吸顶；hidden 会使 body 成为滚动容器导致 sticky 失效 */
    min-height: 100vh;
    position: relative;
    font-size: 0.14rem;
}
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.smooth-scroll {
    scroll-behavior: auto !important;
}
.lenis.smooth-scroll [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.stopped {
    overflow: hidden;
}
.lenis.scrolling iframe {
    pointer-events: none;
}
/* SVG 图标通用样式 */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
}
/* 全局统一蓝色胶囊按钮：查看更多 */
.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0.11rem 0.32rem;
    background: #0099ff;
    color: #ffffff;
    font-size: 0.14rem;
    font-weight: 500;
    border-radius: 0.9999rem;
    text-decoration: none;
    box-shadow: 0 0.06rem 0.2rem rgba(0, 153, 255, 0.35);
    transition: all 0.3s ease;
}
.btn-view-more:hover {
    background: #00bfff;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.08rem 0.25rem rgba(0, 191, 255, 0.5);
}
.btn-view-more .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
    transition: transform 0.3s ease;
}
.btn-view-more:hover .icon-svg {
    transform: translate(0.02rem, -0.02rem);
}
/* 第一屏样式 */
.screen-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.bg-image {
    position: absolute;
    inset: 0;
    background-image: url('../images/back-index.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}
.bg-gradient-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0b0f14 25%, rgba(11, 15, 20, 0.75) 55%, rgba(11, 15, 20, 0.4) 100%),
        linear-gradient(180deg, rgba(11, 15, 20, 0.8) 0%, rgba(11, 15, 20, 0.2) 40%, rgba(11, 15, 20, 0.1) 100%);
}
/* 顶部导航栏 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.24rem 0.6rem;
    background: rgba(11, 15, 20, 0.55);
    backdrop-filter: blur(0.15rem);
    border-bottom: 0.01rem solid rgba(255, 255, 255, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
}
header.header-hidden {
    transform: translateY(-100%);
}
/* 1. 设置极细宽度 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
/* 2. 彻底隐藏箭头（包含单箭头、双箭头和拐角） */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
/* 3. 清除角落交叉区域（避免产生灰块） */
::-webkit-scrollbar-corner {
    background: transparent;
}
/* 4. 轨道背景透明 */
::-webkit-scrollbar-track {
    background: transparent;
}
/* 5. 滑块样式（绿色细线条） */
::-webkit-scrollbar-thumb {
    background-color: #5586e9;
    border-radius: 999px;
    min-height: 150px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #5586e9;
}
.logo-box {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    cursor: pointer;
}
.logo-box img {
    filter: brightness(0) invert(1);
    width: 180px;
    /* 固定高度占位：logo 加载前后 header 高度一致，防止页面加载/跳转时头部抖动 */
    height: 44px;
    object-fit: contain;
}
nav {
    display: flex;
    align-items: center;
    gap: 0.56rem;
    font-size: 0.14rem;
}
.nav-item {
    position: relative;
    padding: 0.15rem 0;
}
.nav-item>a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.06rem;
    font-size: 0.16rem;
}
.nav-item>a .icon-svg {
    width: 0.12rem;
    height: 0.12rem;
    color: #9ca3af;
    transition: transform 0.3s ease, color 0.3s ease;
}
.nav-item:hover>a,
.nav-item>a.active {
    color: #00bfff;
}
.nav-item:hover>a .icon-svg {
    transform: rotate(180deg);
    color: #00bfff;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0.15rem);
    background: rgba(9, 13, 19, 0.95);
    backdrop-filter: blur(0.2rem);
    border: 0.01rem solid rgba(0, 191, 255, 0.3);
    border-radius: 0.12rem;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.6);
    padding: 0.12rem 0;
    min-width: 2.1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 40;
}
.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0.05rem);
}
.dropdown-menu a {
    display: block;
    padding: 0.12rem 0.24rem;
    color: #9ca3af;
    font-size: 0.135rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.dropdown-menu a:hover {
    color: #ffffff;
    background-color: rgba(0, 191, 255, 0.15);
    padding-left: 0.28rem;
}
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 0.24rem;
    height: 0.18rem;
    cursor: pointer;
    z-index: 50;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 0.02rem;
    background-color: #ffffff;
    transition: all 0.3s;
}
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(0.04rem);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 3.2rem;
    height: 100vh;
    background: rgba(13, 18, 26, 0.98);
    backdrop-filter: blur(0.2rem);
    border-left: 0.01rem solid rgba(0, 191, 255, 0.2);
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 0.24rem 0.4rem;
    transition: right 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
}
.mobile-drawer.active {
    right: 0;
}
.mobile-nav-item {
    border-bottom: 0.01rem solid rgba(255, 255, 255, 0.06);
}
.mobile-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.16rem 0;
    color: #e5e7eb;
    font-size: 0.15rem;
    text-decoration: none;
    font-weight: 500;
}
.mobile-sub-menu {
    display: none;
    padding: 0.04rem 0 0.12rem 0.12rem;
}
.mobile-sub-menu a {
    display: block;
    padding: 0.08rem 0;
    color: #9ca3af;
    font-size: 0.135rem;
    text-decoration: none;
}
.header-right-group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.btn-wrapper {
    display: inline-block;
    position: relative;
    will-change: transform;
}
.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.1rem 0.22rem;
    font-size: 0.14rem;
    color: #ffffff;
    border: 0.01rem solid rgba(0, 191, 255, 0.5);
    border-radius: 0.9999rem;
    text-decoration: none;
    background: rgba(0, 191, 255, 0.03);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}
.btn-header:hover {
    border-color: #00bfff;
    background-color: rgba(0, 191, 255, 0.15);
    box-shadow: 0 0 0.25rem rgba(0, 191, 255, 0.45);
}
.btn-header span,
.btn-header .icon-svg {
    position: relative;
    z-index: 2;
}
.btn-header .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
    color: #00bfff;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn-header:hover .icon-svg {
    transform: translate(0.02rem, -0.02rem);
}
/* 主体内容区（第一屏） */
main {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    padding: 1.2rem 0.9rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.hero-content {
    max-width: 6.8rem;
}
.hero-tag {
    font-size: 0.11rem;
    font-family: monospace;
    letter-spacing: 0.02rem;
    color: #00bfff;
    margin-bottom: 0.16rem;
    opacity: 0;
}
.hero-line {
    width: 0;
    height: 0.02rem;
    background-color: #00bfff;
    margin-bottom: 0.24rem;
    opacity: 0;
}
.hero-title {
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.24rem;
    color: #ffffff;
    opacity: 0;
}
.hero-desc {
    font-size: 0.15rem;
    color: #c7d2fe;
    line-height: 1.8;
    margin-bottom: 0.36rem;
    font-weight: 300;
    opacity: 0;
    max-width: 7rem;
}
.hero-btn {
    opacity: 0;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.13rem 0.32rem;
    font-size: 0.14rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #0099ff;
    border-radius: 0.9999rem;
    text-decoration: none;
    box-shadow: 0 0.04rem 0.2rem rgba(0, 153, 255, 0.4);
    transition: all 0.3s;
}
.btn-primary:hover {
    background-color: #00bfff;
    transform: translateY(-0.02rem);
}
.btn-primary .icon-svg {
    width: 0.12rem;
    height: 0.12rem;
}
/* 第二屏：“关于海美格” 样式 */
.about-section {
    position: relative;
    min-height: 100vh;
    background-color: #f2f4f8;
    color: #111827;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.8rem 0;
    overflow: hidden;
}
.about-container {
    max-width: 16rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.about-left {
    max-width: 6rem;
}
.about-header-tag {
    display: flex;
    align-items: center;
    gap: 0.14rem;
    margin-bottom: 0.3rem;
}
.about-logo-icon {
    width: 0.36rem;
    height: 0.36rem;
    background: #0099ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 153, 255, 0.3);
}
.about-logo-icon .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
}
.about-header-tag h2 {
    font-size: 0.28rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.01rem;
}
.about-title {
    font-size: 0.4rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
    margin-bottom: 0.3rem;
}
.about-desc {
    font-size: 0.15rem;
    color: #4b5563;
    line-height: 1.8;
    font-weight: 300;
}
.about-right-logo-parallax {
    position: relative;
    width: 6.5rem;
    height: 5.5rem;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.parallax-shadow {
    position: absolute;
    width: 80%;
    height: 70%;
    background: radial-gradient(circle, rgba(0, 153, 255, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    transform: translateY(0.3rem);
    pointer-events: none;
}
.about-right-logo-parallax img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-style: preserve-3d;
    filter: drop-shadow(0 0.15rem 0.3rem rgba(0, 153, 255, 0.15));
}
.about-stats-bar {
    width: 100%;
    max-width: 14.8rem;
    margin: 0.6rem auto 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
    border-top: 0.01rem solid rgba(0, 153, 255, 0.15);
    box-shadow: 0 -0.1rem 0.4rem rgba(0, 0, 0, 0.03);
    padding: 0.6rem 0.4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    position: relative;
    z-index: 5;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}
.stat-item {
    text-align: center;
    position: relative;
    padding: 0 0.2rem;
}
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.01rem;
    height: 0.5rem;
    background-color: #0099ff;
    opacity: 0.4;
}
.stat-number-box {
    font-size: 0.56rem;
    font-weight: 800;
    color: #0b0f14;
    line-height: 1.1;
    margin-bottom: 0.1rem;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.05rem;
}
.stat-number-box .unit {
    font-size: 0.22rem;
    font-weight: 500;
    color: #1f2937;
}
.stat-desc {
    font-size: 0.14rem;
    color: #6b7280;
    font-weight: 400;
}
/* 第三屏：“应用场景” Swiper 样式 */
.solutions-section {
    position: relative;
    min-height: 100vh;
    background-color: #0b0f14;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem 0;
    overflow: hidden;
}
.solutions-header-container {
    max-width: 16rem;
    margin: 0 auto 0.5rem;
    padding: 0 0.6rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.solutions-title-box {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.solutions-logo-icon {
    width: 0.36rem;
    height: 0.36rem;
    background: #0099ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0 0.12rem rgba(0, 153, 255, 0.4);
}
.solutions-logo-icon .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
}
.solutions-title {
    font-size: 0.36rem;
    font-weight: 700;
    letter-spacing: 0.02rem;
    color: #ffffff;
}
.solutions-subtitle {
    max-width: 4.8rem;
    font-size: 0.14rem;
    color: #9ca3af;
    line-height: 1.6;
    font-weight: 300;
}
.solutions-swiper {
    width: 100%;
    height: 5.6rem;
    overflow: visible !important;
}
/* 盒子 = 卡片 + 左右各 20px 半间隙（间距内建在 padding，Swiper 只测盒子尺寸，
   loop 重测恒定一致，不漂移不跳卡；视觉样式全部在内层 .sc-card 上） */
.solutions-swiper .swiper-slide {
    width: calc(min(9.6rem, 62vw) + 40px);
    height: 5.2rem;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
}
.solutions-swiper .sc-card {
    width: 100%;
    height: 100%;
    border-radius: 0.24rem;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.6);
    opacity: 0.3;
    transform: scale(0.88) rotateY(12deg);
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.solutions-swiper .swiper-slide-active {
    z-index: 10;
}
.solutions-swiper .swiper-slide-active .sc-card {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    box-shadow: 0 0.25rem 0.6rem rgba(0, 153, 255, 0.25);
}
.solutions-swiper .swiper-slide-next .sc-card {
    transform: scale(0.88) rotateY(-12deg);
}
.solution-card-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 20, 0.15) 0%, rgba(11, 15, 20, 0.85) 65%, #0b0f14 100%),
        linear-gradient(90deg, rgba(0, 153, 255, 0.35) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem;
}
.solution-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.solution-number {
    font-size: 0.24rem;
    font-weight: 700;
    color: #00bfff;
    font-family: monospace;
    letter-spacing: 0.02rem;
}
.solution-action-btn {
    width: 0.54rem;
    height: 0.54rem;
    border: 0.01rem solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
    text-decoration: none;
}
.solution-action-btn .icon-svg {
    width: 0.25rem;
    height: 0.25rem;
}
.solution-action-btn:hover {
    background-color: #00bfff;
    border-color: #00bfff;
    color: #0b0f14;
}
.solution-card-content {
    max-width: 7.8rem;
}
.solution-card-title {
    font-size: 0.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.16rem;
}
.solution-card-desc {
    font-size: 0.145rem;
    color: #d1d5db;
    line-height: 1.8;
    font-weight: 300;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    background: rgba(0, 153, 255, 0.85);
    border: 0.01rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 153, 255, 0.4);
    transition: all 0.3s ease;
}
.carousel-btn .icon-svg {
    width: 0.28rem;
    height: 0.28rem;
}
.carousel-btn:hover {
    background: #00bfff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0.12rem 0.3rem rgba(0, 191, 255, 0.6);
}
.carousel-btn-prev {
    left: 1.8rem;
}
.carousel-btn-next {
    right: 1.8rem;
}
/* 第四屏：“产品矩阵” Swiper 样式 */
.products-section {
    position: relative;
    min-height: 100vh;
    background-color: #f4f7fb;
    color: #111827;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
    overflow: hidden;
}
.products-container {
    width: 100%;
}
.products-header-box {
    max-width: 16rem;
    margin: 0 auto 0.4rem;
    padding: 0 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.products-title-group {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-bottom: 0.12rem;
}
.products-logo-icon {
    width: 0.36rem;
    height: 0.36rem;
    background: #0099ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 153, 255, 0.3);
}
.products-logo-icon .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
}
.products-title {
    font-size: 0.38rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01rem;
}
.products-subtitle {
    font-size: 0.14rem;
    color: #64748b;
    margin-left: 0.52rem;
    font-weight: 400;
}
.products-pagination-counter {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.32rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: baseline;
    gap: 0.04rem;
}
.products-pagination-counter .current-page {
    color: #0099ff;
    font-size: 0.42rem;
    font-weight: 800;
}
.products-pagination-counter .total-page {
    font-size: 0.22rem;
    color: #94a3b8;
    font-weight: 500;
}
.products-swiper-wrapper {
    position: relative;
    width: 100%;
}
.products-swiper {
    width: 100%;
    overflow: visible !important;
    padding: 0.2rem 0;
}
/* 盒子 = 320px 卡片 + 左右各 12px 半间隙（间距内建 padding，与 solutions 同架构） */
.products-swiper .swiper-slide {
    width: 3.44rem;
    height: 5.2rem;
    padding: 0 12px;
    position: relative;
    cursor: pointer;
}
.products-swiper .pc-card {
    width: 100%;
    height: 100%;
    border-radius: 0.24rem;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.16rem;
    opacity: 0.65;
    filter: brightness(0.8);
    transform: scale(0.96);
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.products-swiper .swiper-slide-active {
    z-index: 10;
}
.products-swiper .swiper-slide-active .pc-card {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1);
    border: 0.02rem solid #0099ff;
    box-shadow: 0 0.2rem 0.45rem rgba(0, 153, 255, 0.3);
}
.product-card-info {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(0.16rem);
    border-radius: 0.18rem;
    padding: 0.24rem 0.18rem;
    border: 0.01rem solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.4s ease;
}
.products-swiper .swiper-slide-active .product-card-info {
    background: #ffffff;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 153, 255, 0.2);
}
.product-name {
    font-size: 0.24rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.1rem;
}
.product-desc {
    font-size: 0.125rem;
    color: #334155;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0.16rem;
    min-height: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-btn-wrap {
    height: 0.38rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-product-details {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0.08rem 0.2rem;
    background: #0099ff;
    color: #ffffff;
    font-size: 0.125rem;
    font-weight: 500;
    border-radius: 0.9999rem;
    text-decoration: none;
    box-shadow: 0 0.04rem 0.15rem rgba(0, 153, 255, 0.35);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(0.15rem);
}
.btn-product-details .icon-svg {
    width: 0.1rem;
    height: 0.1rem;
}
.products-swiper .swiper-slide-active .btn-product-details {
    opacity: 1;
    transform: translateY(0);
}
.btn-product-details:hover {
    background: #00bfff;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.06rem 0.2rem rgba(0, 191, 255, 0.5);
}
.products-bottom-bar {
    max-width: 16rem;
    margin: 0.4rem auto 0;
    padding: 0 0.6rem;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-arrows-group {
    position: absolute;
    left: 0.6rem;
    display: flex;
    gap: 0.16rem;
}
.products-carousel-btn {
    width: 0.62rem;
    height: 0.62rem;
    background: #ffffff;
    border: 0.01rem solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 0.06rem 0.15rem rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}
.products-carousel-btn .icon-svg {
    width: 0.3rem;
    height: 0.3rem;
}
.products-carousel-btn:hover {
    background: #0099ff;
    color: #ffffff;
    border-color: #0099ff;
    transform: scale(1.08);
    box-shadow: 0 0.08rem 0.2rem rgba(0, 153, 255, 0.3);
}
/* 第五屏：“客户评价与合作伙伴” 样式 */
.testimonials-section {
    position: relative;
    min-height: 100vh;
    background-color: #0b0f14;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
/* 5A. 上半部分：城市建筑背景图 + 评价卡片 */
.reviews-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem 0.8rem 0.4rem;
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.reviews-bg-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(11 15 20 / 26%) 0%, rgba(11, 15, 20, 0.65) 50%, rgb(11 15 20 / 32%) 100%), rgba(11, 15, 20, 0.4);
    z-index: 1;
}
.reviews-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 16rem;
    /* 限制最大宽度，让两边自动留白 */
    margin: 0 auto;
    /* 居中对齐 */
    padding: 0 0.6rem;
    /* <-- 居中对齐，左右就会自动留出对称的空隙 */
}
/* Swiper 轮播布局 */
.reviews-swiper {
    width: 100% !important;
    overflow: hidden !important;
    /* 隐藏超出两边的卡片，实现完美的左右留白裁剪 */
    padding: 0.4rem 0 !important;
}
.reviews-swiper .swiper-slide {
    width: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
/* 气泡方块白色卡片 */
.review-bubble-card {
    background: #ffffff;
    border-radius: 0.08rem;
    padding: 0.32rem 0.28rem;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.25);
    position: relative;
    width: 100%;
    min-height: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.review-bubble-card::after {
    content: '';
    position: absolute;
    bottom: -0.14rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 0.12rem solid transparent;
    border-right: 0.12rem solid transparent;
    border-top: 0.14rem solid #ffffff;
}
.review-card-title {
    font-size: 0.18rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.14rem;
    line-height: 1.4;
    text-align: left;
}
.review-card-desc {
    font-size: 0.13rem;
    color: #475569;
    line-height: 1.75;
    font-weight: 400;
    text-align: left;
}
.review-circle-logo-box {
    margin-top: 0.32rem;
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 50%;
    border: 0.03rem solid #ffffff;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.review-circle-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 指示器容器 */
.reviews-pagination-box {
    position: relative;
    z-index: 5;
    width: 100%;
    margin-top: 0.35rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reviews-pagination-box .swiper-pagination {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.12rem !important;
    width: auto !important;
}
.reviews-pagination-box .swiper-pagination-bullet {
    width: 0.1rem;
    height: 0.1rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    margin: 0 !important;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}
.reviews-pagination-box .swiper-pagination-bullet-active {
    background: #00bfff;
    transform: scale(1.3);
    box-shadow: 0 0 0.1rem rgba(0, 191, 255, 0.8);
}
/* 5B. 下半部分：合作伙伴与认证 LOGO 跑马灯 */
.logos-bar-wrapper {
    position: relative;
    z-index: 10;
    background: rgba(241, 245, 249, 0.92);
    backdrop-filter: blur(0.12rem);
    padding: 0.32rem 0;
    border-top: 0.01rem solid rgba(255, 255, 255, 0.6);
    width: 100%;
    overflow: hidden;
    cursor: grab;
    padding: 0.4rem 0.8rem;
}
.logos-bar-wrapper:active {
    cursor: grabbing;
}
.logos-swiper {
    width: 100vw;
}
.logos-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}
.logos-swiper .swiper-slide {
    width: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    user-select: none;
}
.logos-swiper .swiper-slide:hover {
    opacity: 1;
    filter: grayscale(0%);
}
.logo-item-text {
    font-size: 0.24rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.02rem;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    pointer-events: none;
}
/* ---------------------------------------------------- */
/* 第六屏：“海美格动态” 样式                            */
/* ---------------------------------------------------- */
.news-section {
    position: relative;
    min-height: 100vh;
    background-color: #f4f7fb;
    color: #111827;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
    overflow: hidden;
}
.news-container {
    max-width: 16rem;
    margin: 0 auto;
    width: 100%;
    padding: 0 0.6rem;
}
/* 头部标题与统一的“查看更多”按钮（初始隐藏，悬停卡片时上浮显示） */
.news-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.45rem;
}
.news-title-group {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-bottom: 0.12rem;
}
.news-logo-icon {
    width: 0.38rem;
    height: 0.38rem;
    background: #0099ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 153, 255, 0.3);
}
.news-logo-icon .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
}
.news-title {
    font-size: 0.38rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.01rem;
}
.news-subtitle {
    font-size: 0.14rem;
    color: #64748b;
    margin-left: 0.54rem;
    font-weight: 400;
}
/* 顶部右侧查看更多按钮：初始隐藏/下沉 */
.news-header-box .btn-view-more {
    opacity: 0;
    transform: translateY(0.2rem);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 当悬停在左侧大卡片或整个区块时显示按钮 */
.news-content-grid:hover~.news-header-box .btn-view-more,
.news-section:hover .news-header-box .btn-view-more {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* 主体布局：左侧大图推荐 + 右侧 2x2 网格 */
.news-content-grid {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.4rem;
    align-items: stretch;
}
/* 左侧大图推荐位卡片：恢复背景图片及高品质渐变遮罩 */
.news-featured-card {
    position: relative;
    border-radius: 0.14rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.4rem;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 3.5rem;
}
.news-featured-card:hover {
    transform: translateY(-0.04rem);
    box-shadow: 0 0.2rem 0.45rem rgba(0, 153, 255, 0.25);
}
.news-featured-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.news-featured-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-featured-mask::before {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.8) 65%, rgba(11, 15, 20, 0.95) 100%);
    display: block;
    height: 100%;
    width: 100%;
    content: '';
    position: absolute;
}
.news-featured-info {
    position: relative;
    z-index: 2;
}
.news-featured-title {
    font-size: 0.24rem;
    font-weight: 700;
    color: #00bfff;
    margin-bottom: 0.14rem;
    line-height: 1.35;
}
.news-featured-desc {
    font-size: 0.13rem;
    color: #e2e8f0;
    line-height: 1.7;
    font-weight: 300;
}
/* 右侧 2x2 新闻列表网格 */
.news-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 0.4rem;
}
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.news-item:hover {
    transform: translateX(0.04rem);
}
.news-date-box {
    font-size: 0.36rem;
    font-weight: 800;
    color: #0099ff;
    line-height: 1;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
}
.news-date-box .slash {
    font-size: 0.28rem;
    font-weight: 700;
    color: #0f172a;
    margin-left: 0.02rem;
}
.news-text-box {
    flex-grow: 1;
}
.news-item-title {
    font-size: 0.17rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.1rem;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item:hover .news-item-title {
    color: #0099ff;
}
.news-item-desc {
    font-size: 0.125rem;
    color: #64748b;
    line-height: 1.7;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ---------------------------------------------------- */
/* 第七屏：项目咨询与页脚 Footer 样式                   */
/* ---------------------------------------------------- */
/* ==========================================================================
页脚 Footer 双色背景与细节排版优化
========================================================================== */
.footer-section {
    /* 100vw 不扣除纵向滚动条宽度，会比可视区宽出滚动条那几像素，
       曾导致全页出现横向滚动（右滚会误触导航弹出） */
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 1. 上半部分：稍亮深灰蓝背景 (#161b22) */
.footer-top-cta {
    width: 100%;
    background-color: #161b22;
    /* 设计图上半部分深灰调 */
    padding: 0.9rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.contact-cta-wrapper {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.contact-cta-left {
    max-width: 880px;
}
.contact-tag {
    font-size: 0.13rem;
    font-weight: 700;
    color: #00a0e9;
    /* 亮蓝色标签 */
    letter-spacing: 0.02rem;
    margin-bottom: 0.15rem;
}
.contact-title {
    font-size: 0.36rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 0.18rem 0;
}
.contact-desc {
    font-size: 0.15rem;
    color: #8b949e;
    line-height: 1.6;
    margin: 0;
}
.contact-cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.contact-phone {
    font-size: 0.32rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.08rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.contact-email {
    font-size: 0.15rem;
    color: #00a0e9;
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: opacity 0.3s ease;
}
.contact-email:hover {
    opacity: 0.8;
}
.contact-address {
    font-size: 0.13rem;
    color: #6e7681;
    margin-bottom: 0.25rem;
}
/* 胶囊蓝按钮 */
.btn-submit-req {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    background-color: #00a0e9;
    color: #ffffff;
    padding: 0.14rem 0.32rem;
    border-radius: 0.3rem;
    text-decoration: none;
    font-size: 0.15rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.25);
}
.btn-submit-req:hover {
    background-color: #00b4ff;
    transform: translateY(-2px);
    box-shadow: 0 0.12rem 0.28rem rgba(0, 160, 233, 0.38);
}
.btn-submit-req .icon-svg {
    width: 0.18rem;
    height: 0.18rem;
    fill: #ffffff;
}
/* 2. 下半部分：极深纯黑背景 (#0d1117) */
.footer-bottom-main {
    width: 100%;
    background-color: #0d1117;
    /* 设计图下半部分极深纯黑 */
    padding: 0.8rem 0 0.4rem;
    box-sizing: border-box;
}
.footer-main-wrapper {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.6rem;
    box-sizing: border-box;
    margin-bottom: 0.6rem;
}
/* 品牌列 */
.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.2rem;
}
.footer-logo-icon {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background-color: #00a0e9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-logo-icon span {
    width: 0.12rem;
    height: 0.12rem;
    background-color: #ffffff;
    border-radius: 50%;
}
.footer-brand-title {
    font-size: 0.18rem;
    font-weight: 800;
    color: #ffffff;
}
.footer-brand-sub {
    font-size: 0.1rem;
    color: #6e7681;
    letter-spacing: 0.05rem;
    display: block;
}
.footer-slogan {
    font-size: 0.22rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.15rem 0;
}
.footer-brand-desc {
    font-size: 0.13rem;
    color: #8b949e;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
}
/* 导航列与质量体系列 */
.footer-col-title {
    font-size: 0.12rem;
    font-weight: 700;
    color: #00a0e9;
    letter-spacing: 0.03rem;
    margin-bottom: 0.2rem;
}
.footer-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.footer-nav-links a {
    color: #8b949e;
    text-decoration: none;
    font-size: 0.14rem;
    transition: color 0.3s ease;
}
.footer-nav-links a:hover {
    color: #ffffff;
}
.quality-title {
    font-size: 0.18rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.1rem;
}
.quality-desc {
    font-size: 0.13rem;
    color: #8b949e;
    line-height: 1.6;
    margin: 0 0 0.2rem 0;
}
.quality-status-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.11rem;
    color: #00a0e9;
    font-weight: 700;
    letter-spacing: 0.02rem;
}
.quality-status-bar .green-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00a0e9;
    box-shadow: 0 0 8px #00a0e9;
}
/* 最底部版权条 (添加顶部精致分割线) */
.footer-bottom-bar {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0.3rem 5% 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* 精致浅暗色分割线 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.13rem;
    color: #484f58;
    box-sizing: border-box;
}
.footer-legal-links {
    display: flex;
    gap: 0.2rem;
}
.footer-legal-links a {
    color: #484f58;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-legal-links a:hover {
    color: #8b949e;
}
.footer-location {
    display: flex;
    align-items: center;
    gap: 0.06rem;
}
.footer-location .icon-svg {
    width: 0.14rem;
    height: 0.14rem;
    fill: #484f58;
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .contact-cta-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    .contact-cta-right {
        align-items: flex-start;
        text-align: left;
    }
    .footer-main-wrapper {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 0.15rem;
        align-items: flex-start;
    }
}
/* ---------------------------------------------------- */
/* 手机端精细化适配优化 (<= 1024px)                       */
/* ---------------------------------------------------- */
@media (max-width: 1024px) {
    html {
        font-size: 85px;
    }
    nav {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
    }
    header {
        padding: 0.18rem 0.24rem;
    }
    .screen-footer-bar,
    main,
    .solutions-section {
        padding-left: 0.24rem;
        padding-right: 0.24rem;
    }
    main {
        padding-top: 1rem;
    }
    .hero-content {
        max-width: 100%;
    }
    .hero-title {
        font-size: 0.38rem;
        line-height: 1.35;
        margin-bottom: 0.18rem;
    }
    .hero-desc {
        font-size: 0.145rem;
        line-height: 1.7;
        max-width: 100%;
    }
    .arrow-left,
    .arrow-right {
        display: none;
    }
    /* 第二屏手机端优化 */
    .about-section {
        padding: 0.6rem 0.24rem 0;
        min-height: auto;
    }
    .about-container {
        flex-direction: column;
        gap: 0.35rem;
    }
    .about-left {
        max-width: 100%;
    }
    .about-title {
        font-size: 0.3rem;
        line-height: 1.4;
    }
    .about-desc {
        font-size: 0.14rem;
    }
    .about-right-logo-parallax {
        width: 100%;
        height: 3.4rem;
    }
    .about-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem 0.2rem;
        padding: 0.4rem 0.2rem;
        margin-top: 0.4rem;
        border-radius: 0.16rem 0.16rem 0 0;
    }
    .stat-item:nth-child(2)::after {
        display: none;
    }
    .stat-number-box {
        font-size: 0.44rem;
    }
    /* 第三屏手机端优化 */
    .solutions-section {
        padding: 0.6rem 0;
        min-height: auto;
    }
    .solutions-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.16rem;
        padding: 0 0.24rem;
        margin-bottom: 0.3rem;
    }
    .solutions-title {
        font-size: 0.26rem;
    }
    .solutions-subtitle {
        max-width: 100%;
        font-size: 0.135rem;
    }
    .solutions-swiper {
        height: 4.4rem;
        width: 100%;
    }
    .solutions-swiper .swiper-slide {
        width: calc(88vw + 20px);
        height: 4.1rem;
        padding: 0 10px;
    }
    .solution-card-mask {
        padding: 0.3rem;
    }
    .solution-card-title {
        font-size: 0.28rem;
    }
    .solution-card-desc {
        font-size: 0.135rem;
    }
    .carousel-btn {
        display: none;
    }
    /* 第四屏手机端优化 */
    .products-section {
        padding: 0.6rem 0;
        min-height: auto;
    }
    .products-header-box,
    .products-bottom-bar {
        padding-left: 0.24rem;
        padding-right: 0.24rem;
    }
    .products-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-bottom: 0.25rem;
    }
    .products-title {
        font-size: 0.28rem;
    }
    .products-subtitle {
        margin-left: 0;
        font-size: 0.13rem;
    }
    .products-swiper {
        padding-left: 0.24rem;
        padding-right: 0.24rem;
    }
    .products-swiper .swiper-slide {
        width: calc(76vw + 24px);
        height: 4.4rem;
        padding: 0 12px;
    }
    .products-bottom-bar {
        flex-direction: column;
        gap: 0.25rem;
    }
    .products-arrows-group {
        position: static;
        justify-content: center;
    }
    /* 第五屏手机端优化 */
    .testimonials-section {
        min-height: auto;
    }
    .reviews-wrapper {
        padding: 0.6rem 0 0.3rem;
    }
    .reviews-swiper .swiper-slide {
        width: 88vw;
    }
    .review-bubble-card {
        min-height: 2rem;
        padding: 0.26rem 0.22rem;
    }
    .review-card-title {
        font-size: 0.16rem;
    }
    .review-card-desc {
        font-size: 0.125rem;
    }
    /* 第六屏手机端优化 */
    .news-section {
        padding: 0.6rem 0;
        min-height: auto;
    }
    .news-container {
        padding: 0 0.24rem;
    }
    .news-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.16rem;
        margin-bottom: 0.3rem;
    }
    .news-title {
        font-size: 0.28rem;
    }
    .news-subtitle {
        margin-left: 0;
    }
    .news-header-box .btn-view-more {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .news-content-grid {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    .news-featured-card {
        height: 3.2rem;
        padding: 0.28rem;
    }
    .news-featured-title {
        font-size: 0.2rem;
    }
    .news-list-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .news-date-box {
        font-size: 0.3rem;
    }
    .news-item-title {
        font-size: 0.15rem;
    }
    /* 第七屏手机端优化 */
    .contact-cta-wrapper {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.6rem 0.24rem;
    }
    .contact-cta-right {
        text-align: left;
        align-items: flex-start;
        width: 100%;
    }
    .contact-title {
        font-size: 0.28rem;
        line-height: 1.4;
    }
    .contact-phone {
        font-size: 0.32rem;
    }
    .footer-main-wrapper {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.6rem 0.24rem;
    }
    .footer-brand-desc {
        max-width: 100%;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 0.2rem;
        text-align: center;
        padding: 0.25rem 0.24rem;
    }
}
/* 第一屏主容器 */
.about-hero-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #0b131f;
}
/* 视差背景图与蒙版 */
.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/about-hero-bg.jpg') center/cover no-repeat;
    z-index: 1;
    transform: scale(1.08);
    filter: brightness(0.85) contrast(1.05);
}
.about-hero-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 19, 31, 0.65) 0%, rgba(11, 19, 31, 0.4) 50%, rgba(11, 19, 31, 0.85) 100%);
    z-index: 2;
}
/* 第一屏文字内容区 */
.about-hero-content {
    position: relative;
    z-index: 3;
    padding-top: 1.8rem;
    /* 留出 Header 空间 */
    padding-bottom: 0.8rem;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}
.about-hero-title {
    font-size: 0.52rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: 0.02rem;
    margin: 0 0 0.28rem 0;
    text-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.4);
}
.about-hero-sub {
    display: flex;
    align-items: center;
    font-size: 0.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01rem;
}
.about-hero-sub .sub-line {
    display: inline-block;
    width: 0.4rem;
    height: 2px;
    background-color: #00bfff;
    margin-right: 0.15rem;
}
/* 底部数据统计条（对应图2底部浅色数据区） */
.about-hero-stats {
    position: relative;
    z-index: 3;
    width: 100%;
    background: rgb(249 248 255);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.15);
}
.about-stats-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.4rem 5%;
    box-sizing: border-box;
}
.about-stat-card {
    text-align: center;
    position: relative;
    padding: 0 0.2rem;
}
.about-stat-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}
.stat-num-box {
    font-size: 0.56rem;
    background: linear-gradient(135deg, #00d2ff 0%, #0088e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.stat-num-box .unit {
    font-size: 0.36rem;
    font-weight: 700;
    margin-left: 0.02rem;
}
.stat-label {
    font-size: 0.15rem;
    color: #556575;
    font-weight: 500;
    letter-spacing: 0.005rem;
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 0.38rem;
    }
    .about-hero-sub {
        font-size: 0.16rem;
    }
    .about-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem 0;
    }
    .about-stat-card:nth-child(2)::after {
        display: none;
    }
}
@media (max-width: 640px) {
    .about-hero-title {
        font-size: 0.28rem;
    }
    .about-stats-container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0.25rem 4%;
    }
    .stat-num-box {
        font-size: 0.36rem;
    }
    .stat-label {
        font-size: 0.13rem;
    }
}
/* 第二屏容器 */
.about-intro-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 1.2rem 0;
    overflow: hidden;
    box-sizing: border-box;
}
.about-intro-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}
/* 左侧文本布局 */
.about-intro-left {
    width: 48%;
    position: relative;
    z-index: 2;
}
.intro-en-sub {
    font-size: 0.22rem;
    font-weight: 600;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}
.intro-main-title {
    font-size: 0.4rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.35rem 0;
    letter-spacing: 0.01rem;
}
.intro-desc-group p {
    font-size: 0.16rem;
    color: #667585;
    line-height: 1.85;
    margin-bottom: 0.25rem;
    text-align: justify;
}
.intro-watermark {
    font-size: 0.95rem;
    font-weight: 900;
    color: rgba(220, 232, 243, 0.45);
    line-height: 1;
    margin-top: 0.4rem;
    letter-spacing: -0.02rem;
    user-select: none;
    font-family: Arial, sans-serif;
}
/* 右侧视频与背景布局 */
.about-intro-right {
    width: 46%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 蓝色半圆形圆点阵图 */
.dot-matrix-bg {
    position: absolute;
    right: -12%;
    top: -20%;
    width: 120%;
    height: 140%;
    background-image: radial-gradient(#00bfff 20%, transparent 20%);
    background-size: 18px 18px;
    opacity: 0.35;
    z-index: 1;
    mask-image: radial-gradient(circle at 80% 50%, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 80% 50%, black 40%, transparent 75%);
    pointer-events: none;
}
/* 视频封面卡片 */
.video-card {
    position: relative;
    width: 100%;
    height: 3.8rem;
    border-radius: 0.24rem;
    overflow: hidden;
    z-index: 2;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 50, 100, 0.12);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.video-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 50, 100, 0.2);
}
.video-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.video-card:hover .video-card-bg {
    transform: scale(1.06);
}
.video-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 45, 60, 0.65) 0%, rgba(20, 30, 45, 0.35) 100%);
}
.video-card-content {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    z-index: 3;
}
.video-watermark-title {
    font-size: 0.32rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1.1;
    letter-spacing: 0.02rem;
    font-family: Arial, sans-serif;
}
.video-watermark-sub {
    font-size: 0.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.08rem;
    letter-spacing: 0.01rem;
}
/* 播放按钮圆圈 */
.play-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.68rem;
    height: 0.68rem;
    background: rgba(10, 18, 26, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    transition: all 0.3s ease;
}
.play-btn-circle .icon-play {
    width: 0.28rem;
    height: 0.28rem;
    fill: #ffffff;
    margin-left: 0.03rem;
    transition: fill 0.3s ease;
}
.video-card:hover .play-btn-circle {
    background: #00bfff;
    border-color: #00bfff;
    transform: translate(-50%, -50%) scale(1.12);
}
/* 视频弹出层 Modal */
/* 视频弹出层 Modal 背景 */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
/* 视频窗口容器 */
.video-modal-wrapper {
    position: relative;
    width: 85%;
    max-width: 1000px;
    background: #000000;
    border-radius: 0.16rem;
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.6);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.video-modal-overlay.active .video-modal-wrapper {
    transform: scale(1);
}
/* 右上角关闭按钮样式 */
.video-modal-close {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    width: 0.4rem;
    height: 0.4rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
    outline: none;
    padding: 0;
}
.video-modal-close svg {
    width: 0.22rem;
    height: 0.22rem;
    fill: #ffffff;
    transition: transform 0.25s ease, fill 0.25s ease;
}
.video-modal-close:hover {
    background: #00bfff;
    border-color: #00bfff;
    transform: scale(1.1);
}
.video-modal-close:hover svg {
    fill: #ffffff;
    transform: rotate(90deg);
}
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 比例 */
    border-radius: 0.16rem;
    overflow: hidden;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 移动端适配：将关闭按钮移入窗口内部右上角，避免超出现屏 */
@media (max-width: 768px) {
    .video-modal-close {
        top: 0.12rem;
        right: 0.12rem;
        background: rgba(0, 0, 0, 0.6);
        width: 0.36rem;
        height: 0.36rem;
    }
}
/* 第三屏容器 */
.timeline-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    background-color: #102030;
    display: flex;
    align-items: center;
}
/* 雪山背景与蓝色蒙层 */
.timeline-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
    z-index: 1;
    filter: brightness(0.9) contrast(1.1);
}
.timeline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 110, 185, 0.72);
    backdrop-filter: blur(2px);
    z-index: 2;
}
/* 内容布局网格 */
.timeline-container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
}
/* 左侧标题固定列 */
.timeline-header-col {
    width: 25%;
    height: 100%;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
}
.timeline-en-tag {
    font-size: 0.22rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.04rem;
    margin-bottom: 0.12rem;
}
.timeline-main-title {
    font-size: 0.42rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.02rem;
}
/* 右侧年份弹性手风琴列 */
.timeline-grid {
    width: 75%;
    height: 100%;
    display: flex;
}
.timeline-item {
    flex: 1;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}
.timeline-item:hover,
.timeline-item.active {
    flex: 1.6;
    background-color: rgba(255, 255, 255, 0.06);
}
.timeline-item-inner {
    height: 100%;
    padding: 0 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
/* 年份数字 */
.timeline-year {
    font-size: 0.38rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01rem;
    font-family: Arial, sans-serif;
    transition: transform 0.3s ease;
}
/* 装饰分割线 */
.timeline-divider {
    width: 0.35rem;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.6);
    margin: 0.18rem 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.4s ease;
}
.timeline-item.active .timeline-divider,
.timeline-item:hover .timeline-divider {
    opacity: 1;
    transform: scaleX(1);
}
/* 文字描述（非激活项收起） */
.timeline-desc {
    font-size: 0.14rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0 0 0.25rem 0;
    max-width: 2.6rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, height 0.4s ease;
}
.timeline-item.active .timeline-desc,
.timeline-item:hover .timeline-desc {
    height: auto;
    opacity: 1;
}
/* 箭头圆圈按钮 */
.timeline-arrow-btn {
    width: 0.42rem;
    height: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    transition: all 0.3s ease;
}
.timeline-arrow-btn svg {
    width: 0.18rem;
    height: 0.18rem;
    transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-arrow-btn {
    background-color: #ffffff;
    color: #186eb9;
    border-color: #ffffff;
}
.timeline-item:hover .timeline-arrow-btn svg {
    transform: translateX(2px);
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .timeline-container {
        flex-direction: column;
    }
    .timeline-header-col {
        width: 100%;
        height: 20%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0.2rem 5%;
    }
    .timeline-grid {
        width: 100%;
        height: 80%;
        flex-direction: column;
    }
    .timeline-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
    .timeline-item:hover,
    .timeline-item.active {
        flex: 2;
    }
}
/* 第四屏容器 */
.supply-chain-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #f7f9fc;
    display: flex;
    align-items: center;
    padding: 1rem 0;
    box-sizing: border-box;
}
.supply-chain-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 头部标题 */
.supply-chain-header {
    margin-bottom: 0.5rem;
}
.supply-chain-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
    letter-spacing: 0.01rem;
}
/* 3列卡片网格 */
.supply-chain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}
/* 单个卡片样式 */
.supply-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}
.supply-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0.2rem 0.4rem rgba(0, 160, 233, 0.15);
}
/* 卡片上半部分（白底） */
.supply-card-top {
    padding: 0.45rem 0.35rem 0.35rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.supply-card-icon {
    width: 0.7rem;
    height: 0.7rem;
    margin-bottom: 0.25rem;
    transition: transform 0.3s ease;
}
.supply-card-icon svg {
    width: 100%;
    height: 100%;
}
.supply-card:hover .supply-card-icon {
    transform: scale(1.1);
}
.supply-card-title {
    font-size: 0.24rem;
    font-weight: 700;
    color: #1a2530;
    margin: 0 0 0.2rem 0;
    line-height: 1.3;
}
.supply-card-desc {
    font-size: 0.15rem;
    color: #667585;
    line-height: 1.75;
    margin: 0;
    text-align: justify;
}
/* 卡片下半部分（蓝色底栏） */
.supply-card-bottom {
    background-color: #00A0E9;
    padding: 0.22rem 0.35rem;
    color: #ffffff;
}
.supply-card-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.supply-card-bottom li {
    font-size: 0.14rem;
    font-weight: 500;
    line-height: 1.8;
    display: flex;
    align-items: center;
    letter-spacing: 0.005rem;
}
.supply-card-bottom .check-icon {
    margin-right: 0.08rem;
    font-weight: 700;
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .supply-chain-grid {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    .supply-chain-title {
        font-size: 0.3rem;
    }
}
/* 第五屏容器 */
.qc-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #ebf5fa;
    /* 浅淡冰蓝调背景 */
    display: flex;
    align-items: center;
    padding: 1.2rem 0;
    box-sizing: border-box;
    overflow: hidden;
}
.qc-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
/* 左侧内容样式 */
.qc-left {
    width: 48%;
}
.qc-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    line-height: 1.35;
    margin: 0 0 0.35rem 0;
    letter-spacing: 0.01rem;
}
.qc-desc {
    font-size: 0.16rem;
    color: #4a5a6a;
    line-height: 1.8;
    margin: 0 0 0.4rem 0;
    text-align: justify;
}
/* 列表项样式 */
.qc-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.qc-feature-item {
    display: flex;
    align-items: center;
    padding: 0.16rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}
.qc-feature-item .dot {
    font-size: 0.2rem;
    color: #334455;
    margin-right: 0.12rem;
}
.qc-feature-item .text {
    font-size: 0.16rem;
    font-weight: 600;
    color: #2c3e50;
    flex-grow: 1;
    transition: color 0.3s ease;
}
.qc-feature-item .plus-box {
    width: 0.26rem;
    height: 0.26rem;
    border: 1px solid #73d1f7;
    color: #00a8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.16rem;
    font-weight: 400;
    border-radius: 0.03rem;
    transition: all 0.3s ease;
}
/* 列表悬停效果 */
.qc-feature-item:hover .text {
    color: #0088cc;
}
.qc-feature-item:hover .plus-box {
    background-color: #00a8e8;
    color: #ffffff;
    border-color: #00a8e8;
    transform: rotate(90deg);
}
/* 右侧 2x2 网格样式 */
.qc-right {
    width: 46%;
}
.qc-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
}
/* 2x2 蓝色渐变卡片 */
.qc-card {
    background: linear-gradient(135deg, #00d2ff 0%, #0088e8 100%);
    border-radius: 0.28rem;
    padding: 0.45rem 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 136, 232, 0.25);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    cursor: pointer;
}
.qc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.25rem 0.45rem rgba(0, 136, 232, 0.38);
}
.qc-card-icon {
    width: 0.52rem;
    height: 0.52rem;
    margin-bottom: 0.18rem;
    transition: transform 0.3s ease;
}
.qc-card-icon svg {
    width: 100%;
    height: 100%;
}
.qc-card:hover .qc-card-icon {
    transform: scale(1.12);
}
.qc-card-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.08rem 0;
    letter-spacing: 0.01rem;
}
.qc-card-sub {
    font-size: 0.13rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    letter-spacing: 0.005rem;
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .qc-container {
        flex-direction: column;
        padding-top: 0.5rem;
    }
    .qc-left,
    .qc-right {
        width: 100%;
    }
    .qc-left {
        margin-bottom: 0.5rem;
    }
    .qc-main-title {
        font-size: 0.32rem;
    }
}
/* 手风琴列表容器 */
.qc-accordion-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.qc-accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}
/* 标题头部 */
.qc-accordion-header {
    display: flex;
    align-items: center;
    padding: 0.18rem 0;
}
.qc-accordion-item .dot {
    font-size: 0.2rem;
    color: #334455;
    margin-right: 0.12rem;
}
.qc-accordion-item .text {
    font-size: 0.16rem;
    font-weight: 600;
    color: #2c3e50;
    flex-grow: 1;
    transition: color 0.3s ease;
}
.qc-accordion-item.active .text {
    color: #0088cc;
}
/* 右侧加减号方框按钮 */
.qc-accordion-item .toggle-btn {
    position: relative;
    width: 0.26rem;
    height: 0.26rem;
    border: 1px solid #73d1f7;
    background-color: transparent;
    border-radius: 0.03rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
/* 加号横线与竖线伪元素 */
.qc-accordion-item .toggle-btn::before,
.qc-accordion-item .toggle-btn::after {
    content: '';
    position: absolute;
    background-color: #00a8e8;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
/* 横线 */
.qc-accordion-item .toggle-btn::before {
    width: 0.12rem;
    height: 2px;
}
/* 竖线 */
.qc-accordion-item .toggle-btn::after {
    width: 2px;
    height: 0.12rem;
}
/* 激活展开（变成减号 -） */
.qc-accordion-item.active .toggle-btn {
    background-color: #00a8e8;
    border-color: #00a8e8;
}
.qc-accordion-item.active .toggle-btn::before {
    background-color: #ffffff;
}
.qc-accordion-item.active .toggle-btn::after {
    transform: rotate(90deg) scaleY(0);
    /* 隐藏竖线变减号 */
    background-color: #ffffff;
}
/* 展开隐藏描述文本区 */
.qc-accordion-body {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.qc-accordion-body p {
    font-size: 0.14rem;
    color: #667585;
    line-height: 1.7;
    margin: 0;
    padding: 0 0 0.2rem 0.26rem;
    /* 留出点号间距 */
    text-align: justify;
}
/* 初始展开项样式 */
.qc-accordion-item.active .qc-accordion-body {
    height: auto;
    opacity: 1;
}
.cases-section {
    position: relative;
    width: 100vw;
    background-color: #ffffff;
    padding: 1.2rem 0;
    overflow: hidden;
    box-sizing: border-box;
}
/* 1600px 定宽对齐容器 */
.cases-section {
    position: relative;
    width: 100vw;
    background-color: #ffffff;
    padding: 1.2rem 0;
    overflow: hidden;
    box-sizing: border-box;
}
.cases-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.cases-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.45rem;
}
.cases-en-tag {
    font-size: 0.2rem;
    font-weight: 600;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.cases-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
    letter-spacing: 0.01rem;
}
.cases-pagination-counter {
    font-size: 0.38rem;
    font-weight: 800;
    color: #00a0e9;
    letter-spacing: 0.02rem;
}
.cases-pagination-counter .total-page {
    font-size: 0.22rem;
    font-weight: 500;
    color: #a0b0c0;
    margin-left: 0.06rem;
}
.cases-swiper-wrapper {
    width: 100%;
    position: relative;
}
.cases-swiper {
    width: 100%;
    overflow: visible;
    /* 右侧贯穿拉满 */
    padding-left: 0 !important;
    /* 彻底清除 padding 干扰 */
}
.cases-swiper .swiper-slide {
    width: 380px;
    height: auto;
    cursor: pointer;
}
.case-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.12rem 0.35rem rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.2rem 0.45rem rgba(0, 50, 100, 0.12);
}
.case-card-img {
    position: relative;
    width: 100%;
    height: 2.6rem;
    overflow: hidden;
}
.case-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.case-card:hover .case-card-img img {
    transform: scale(1.06);
}
.case-card-info {
    padding: 0.3rem 0.28rem 0.35rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.case-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #1a2530;
    margin: 0 0 0.15rem 0;
    line-height: 1.35;
}
.case-desc {
    font-size: 0.14rem;
    color: #667585;
    line-height: 1.75;
    margin: 0;
    text-align: justify;
}
.cases-bottom-bar {
    display: flex;
    align-items: center;
    margin-top: 0.45rem;
    justify-content: center;
}
.cases-arrows-group {
    display: flex;
    gap: 0.15rem;
    position: absolute;
    left: 0;
}
.cases-carousel-btn {
    width: 0.62rem;
    height: 0.62rem;
    background: #ffffff;
    border: 0.01rem solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 0.06rem 0.15rem rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}
.cases-carousel-btn:hover {
    background: #0099ff;
    color: #ffffff;
    border-color: #0099ff;
    transform: scale(1.08);
    box-shadow: 0 0.08rem 0.2rem rgba(0, 153, 255, 0.3);
}
.cases-carousel-btn svg {
    width: 0.3rem;
    height: 0.3rem;
    fill: currentColor;
}
@media (max-width: 1024px) {
    .cases-swiper .swiper-slide {
        width: 300px;
    }
}
/* Swiper 自动添加的禁用状态样式 */
.cases-carousel-btn.cases-btn-disabled,
.cases-carousel-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    /* 彻底禁止点击事件 */
    transform: none !important;
}
/* 设备页面 */
.equipment-hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #121a24;
}
/* 视差背景图 */
.equipment-hero-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url('../images/shebei-bg.jpg');
    /* 可替换为你的精密零部件车间高精图 */
    background-size: cover;
    background-position: center bottom;
    z-index: 1;
}
/* 深蓝冷调遮罩（100% 还原设计图暗色工业氛围） */
.equipment-hero-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 32, 54, 0.88) 0%, rgba(10, 20, 36, 0.78) 100%);
    z-index: 2;
}
/* 主体文字容器 */
.equipment-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.equipment-hero-container {
    max-width: 860px;
}
/* 巨幅主标题 */
.equipment-hero-title {
    margin: 0 0 0.35rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.title-line-1 {
    font-size: 0.54rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: 0.01rem;
}
/* 亮青色 / 渐变高亮精度文本 */
.title-line-2.highlight-cyan {
    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1.25;
    background: linear-gradient(135deg, #00d2ff 0%, #00a0e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* 描述文本 */
.equipment-hero-desc {
    font-size: 0.18rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin: 0;
    max-width: 720px;
    text-align: justify;
    font-weight: 400;
}
/* 移动端响应式适配 */
@media (max-width: 1024px) {
    .title-line-1,
    .title-line-2.highlight-cyan {
        font-size: 0.36rem;
    }
    .equipment-hero-desc {
        font-size: 0.15rem;
    }
}
/* ==========================================================================
设备页第二屏：厂房概况 (Factory Section)
========================================================================== */
.factory-section {
    width: 100vw;
    background-color: #fff;
    /* 极浅灰蓝底色，衬托白卡片 */
    padding: 1.2rem 0;
    box-sizing: border-box;
}
.factory-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部标题与右侧说明 */
.factory-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}
.factory-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.factory-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
}
.factory-header-right {
    max-width: 540px;
}
.factory-sub-desc {
    font-size: 0.15rem;
    color: #8090a0;
    line-height: 1.7;
    margin: 0;
    text-align: right;
}
/* 主体 5:7 左右比例网格 */
.factory-content-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0.35rem;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    /* 确保与标题栏绝对齐平 */
}
/* 左侧：大图展示卡片 */
.factory-featured-card {
    position: relative;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 520px;
}
.factory-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
}
.factory-featured-card:hover .factory-card-bg {
    transform: scale(1.05);
}
.factory-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 20, 35, 0.2) 0%, rgba(10, 20, 35, 0.88) 100%);
}
.factory-card-content {
    position: relative;
    z-index: 2;
    padding: 0.45rem 0.4rem;
}
.factory-card-title {
    font-size: 0.3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 0.25rem 0;
}
.factory-card-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    margin-bottom: 0.25rem;
}
.factory-card-desc {
    font-size: 0.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0;
}
/* 右侧：2x2 设备卡片网格 */
.factory-equip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
}
.equip-spec-card {
    background: #ffffff;
    border-radius: 0.2rem;
    padding: 0.35rem 0.3rem;
    box-shadow: 0 0.08rem 0.25rem rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.equip-spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.15rem 0.35rem rgba(0, 100, 200, 0.08);
}
/* 顶部蓝色弧线修饰条（100% 还原设计图顶部造型） */
.equip-spec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #00d2ff 0%, #00a0e9 100%);
    border-radius: 0.2rem 0.2rem 0 0;
}
.equip-card-title {
    font-size: 0.22rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.15rem 0;
    text-align: center;
}
.equip-card-intro {
    font-size: 0.12rem;
    color: #90a0b0;
    line-height: 1.6;
    margin: 0 0 0.2rem 0;
    text-align: justify;
}
.equip-spec-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.equip-spec-list li {
    font-size: 0.13rem;
    color: #607080;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-weight: 500;
}
.equip-spec-list .blue-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00a0e9;
    display: inline-block;
    flex-shrink: 0;
}
/* 响应式断点适配 */
@media (max-width: 1024px) {
    .factory-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .factory-sub-desc {
        text-align: left;
    }
    .factory-content-grid {
        grid-template-columns: 1fr;
    }
    .factory-equip-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
设备页第三屏：核心能力数据指标栏（默认全白，Hover高亮蓝）
========================================================================== */
/* ==========================================================================
设备页第三屏：核心能力数据指标栏（默认白底黑字，Hover蓝底白字）
========================================================================== */
.equip-metrics-section {
    width: 100vw;
    background-color: #f7f9fc;
    padding: 0.7rem 1.2rem;
    box-sizing: border-box;
}
.equip-metrics-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    box-sizing: border-box;
}
/* 默认卡片：白底 + 深色字 */
.metric-card {
    background: #ffffff !important;
    /* 强制默认纯白背景 */
    border-radius: 0.28rem;
    padding: 0.38rem 0.32rem 0.35rem;
    box-shadow: 0 0.12rem 0.35rem rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.metric-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.15rem;
}
/* 默认数字天蓝色 */
.metric-number-box {
    font-size: 0.44rem;
    font-weight: 800;
    color: #00a0e9 !important;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: color 0.35s ease;
}
.metric-number-box .prefix {
    font-size: 0.36rem;
    margin-right: 0.02rem;
}
.metric-number-box .unit {
    font-size: 0.22rem;
    font-weight: 600;
    margin-left: 0.04rem;
}
.metric-icon {
    width: 0.32rem;
    height: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-icon svg {
    width: 100%;
    height: 100%;
    fill: #c0d0e0;
    transition: fill 0.35s ease;
}
/* 默认标题：深灰色 */
.metric-title {
    font-size: 0.18rem;
    font-weight: 700;
    color: #4a5a6a !important;
    margin: 0 0 0.25rem 0;
    transition: color 0.35s ease;
}
/* 默认描述：中灰色 */
.metric-bottom-desc {
    font-size: 0.13rem;
    color: #8090a0 !important;
    line-height: 1.6;
    margin-top: auto;
    opacity: 1 !important;
    transition: color 0.35s ease;
}
/* ==========================================================================
核心：鼠标移入（Hover）高亮蓝底白字
========================================================================== */
.metric-card:hover {
    background: linear-gradient(135deg, #00b4ff 0%, #0090e0 100%) !important;
    transform: translateY(-8px);
    box-shadow: 0 0.18rem 0.4rem rgba(0, 160, 233, 0.32);
}
.metric-card:hover .metric-number-box,
.metric-card:hover .metric-title,
.metric-card:hover .metric-bottom-desc {
    color: #ffffff !important;
}
.metric-card:hover .metric-icon svg {
    fill: rgba(255, 255, 255, 0.9);
}
/* ==========================================================================
设备页第四屏：重型加工设备规模 (Equip Catalog Section)
========================================================================== */
.equip-catalog-section {
    width: 100vw;
    background-color: #f7f9fc;
    padding: 0.8rem 0 1.2rem;
    box-sizing: border-box;
}
.equip-catalog-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部标题栏 */
.equip-catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.35rem;
}
.catalog-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.catalog-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
}
.catalog-header-right {
    max-width: 500px;
}
.catalog-sub-desc {
    font-size: 0.15rem;
    color: #8090a0;
    line-height: 1.7;
    margin: 0;
    text-align: right;
}
/* 分类 Tab 栏（还原设计图椭圆胶囊按钮） */
.equip-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.tab-btn {
    padding: 0.12rem 0.28rem;
    font-size: 0.15rem;
    font-weight: 600;
    color: #1a2530;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    outline: none;
}
.tab-btn:hover {
    border-color: #00a0e9;
    color: #00a0e9;
}
.tab-btn.active {
    background-color: #00a0e9;
    /* 选中亮天蓝 */
    border-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.25);
}
/* 3 列卡片网格 */
.equip-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}
/* 设备卡片 */
.catalog-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.catalog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.18rem 0.4rem rgba(0, 50, 100, 0.09);
}
/* 图片区域 */
.catalog-card-img {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #eaeff5;
}
.catalog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.catalog-card:hover .catalog-card-img img {
    transform: scale(1.06);
}
/* 文本信息区域 */
.catalog-card-content {
    padding: 0.3rem 0.28rem 0.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.equip-title {
    font-size: 0.22rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.12rem 0;
    line-height: 1.35;
}
.equip-desc {
    font-size: 0.135rem;
    color: #708090;
    line-height: 1.65;
    margin: 0 0 0.22rem 0;
    min-height: 0.44rem;
}
/* 参数规格列表 */
.equip-param-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    border-top: 1px dashed #e8eef5;
    padding-top: 0.18rem;
}
.equip-param-list li {
    font-size: 0.13rem;
    color: #8090a0;
    display: flex;
    align-items: center;
    gap: 0.08rem;
}
.equip-param-list .dot {
    color: #a0b0c0;
}
/* 响应式断点 */
@media (max-width: 1100px) {
    .equip-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 680px) {
    .equip-catalog-grid {
        grid-template-columns: 1fr;
    }
    .equip-catalog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
    .catalog-sub-desc {
        text-align: left;
    }
}
/* ==========================================================================
设备页第五屏：标准化 6 段工艺流程 (Process Section)
========================================================================== */
.process-section {
    width: 100vw;
    background-color: #ffffff;
    padding: 1.2rem 0;
    overflow: hidden;
    box-sizing: border-box;
}
.process-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 头部标题与右侧说明 */
.process-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.8rem;
}
.process-header-left {
    max-width: 720px;
}
.process-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.process-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
    line-height: 1.3;
}
.process-header-right {
    max-width: 460px;
}
.process-sub-desc {
    font-size: 0.15rem;
    color: #8090a0;
    line-height: 1.7;
    margin: 0;
    text-align: right;
}
/* 流程图主结构 */
.process-flow-wrapper {
    position: relative;
    width: 100%;
    padding: 0.4rem 0;
}
/* 6 节点平分 6 列网格 */
.process-nodes-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.2rem;
    align-items: center;
}
/* 节点单元卡片 */
.process-node-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* 节点上方排版 */
.node-top {
    justify-content: flex-end;
}
.node-top .node-text-box {
    margin-bottom: 0.25rem;
}
/* 节点下方排版 */
.node-bottom {
    justify-content: flex-start;
}
.node-bottom .node-text-box {
    margin-top: 0.25rem;
}
/* 圆形图片容器（精准匹配设计图外白边圆图） */
.node-circle-img {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0.12rem 0.3rem rgba(0, 50, 100, 0.12);
    border: 4px solid #ffffff;
    background-color: #eaeff5;
    flex-shrink: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.process-node-item:hover .node-circle-img {
    transform: scale(1.08);
    box-shadow: 0 0.2rem 0.45rem rgba(0, 160, 233, 0.28);
}
.node-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 节点文字信息 */
.node-text-box {
    max-width: 1.8rem;
}
.node-title {
    font-size: 0.2rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.1rem 0;
}
.node-desc {
    font-size: 0.125rem;
    color: #708090;
    line-height: 1.55;
    margin: 0;
}
/* 移动端响应式适配 */
@media (max-width: 1200px) {
    .process-wave-path {
        display: none;
        /* 移动端隐藏波浪线，转为垂直列表 */
    }
    .process-nodes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    .node-top .node-text-box,
    .node-bottom .node-text-box {
        margin: 0.15rem 0 0 0;
    }
    .node-top {
        flex-direction: column-reverse;
    }
}
@media (max-width: 640px) {
    .process-nodes-grid {
        grid-template-columns: 1fr;
    }
    .process-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .process-sub-desc {
        text-align: left;
    }
}
/* 开启硬件加速，提升渲染性能 */
.process-wave-path {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 180px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    will-change: clip-path, opacity;
    /* 告知浏览器提前准备 GPU 合成 */
    backface-visibility: hidden;
}
/* ==========================================================================
设备页：资质证书与体系认证 (Cert Section)
========================================================================== */
.cert-section {
    width: 100vw;
    background-color: #f7f9fc;
    padding: 1.2rem 0;
    box-sizing: border-box;
}
.cert-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部标题与说明 */
.cert-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.6rem;
}
.cert-header-left {
    max-width: 760px;
}
.cert-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.cert-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
    line-height: 1.3;
}
.cert-header-right {
    max-width: 450px;
}
.cert-sub-desc {
    font-size: 0.15rem;
    color: #8090a0;
    line-height: 1.7;
    margin: 0;
    text-align: right;
}
/* 4 列证书卡片网格 */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}
.cert-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.cert-card:hover {
    transform: translateY(-8px);
}
/* 证书外框容器（还原设计图浅白底/极轻内阴影） */
.cert-img-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.12rem;
    padding: 0.18rem;
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.35s ease;
}
.cert-card:hover .cert-img-box {
    box-shadow: 0 0.18rem 0.4rem rgba(0, 50, 100, 0.12);
}
.cert-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}
.cert-card:hover .cert-img-box img {
    transform: scale(1.03);
}
/* 底部标注文案 */
.cert-caption {
    font-size: 0.13rem;
    color: #90a0b0;
    text-align: center;
    margin-top: 0.2rem;
    line-height: 1.5;
    font-weight: 500;
}
/* 响应式适配 */
@media (max-width: 1100px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }
}
@media (max-width: 640px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
    .cert-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .cert-sub-desc {
        text-align: left;
    }
}
/* ==========================================================================
产品聚合页第一屏 (Products Hero Section)
========================================================================== */
.products-hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #101a26;
}
/* 视差背景图 */
.products-hero-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url('../images/back-index.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}
/* 沉浸式冷深蓝遮罩 */
.products-hero-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 26, 38, 0.85) 0%, rgba(10, 20, 36, 0.75) 100%);
    z-index: 2;
}
/* 内容主容器 */
.products-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.products-hero-container {
    max-width: 900px;
}
/* 两行大标题 */
.products-hero-title {
    margin: 0 0 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.p-title-line-1,
.p-title-line-2 {
    font-size: 0.54rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.22;
    letter-spacing: 0.01rem;
    text-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.3);
}
/* 高亮文字调色（与 equipment 页统一） */
.highlight-cyan {
    color: #00a0e9;
}
/* 副标/公司落款 */
.products-hero-sub {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.16rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.p-sub-line {
    display: inline-block;
    height: 2px;
    background-color: #00a0e9;
}
/* 移动端响应式 */
@media (max-width: 1024px) {
    .p-title-line-1,
    .p-title-line-2 {
        font-size: 0.36rem;
    }
    .products-hero-sub {
        font-size: 0.14rem;
    }
}
/* ==========================================================================
产品聚合页第二屏 (Products Overview Section)
========================================================================== */
.products-overview-section {
    position: relative;
    width: 100%;
    padding: 1.2rem 0;
    background-color: #eef2f5;
    /* 还原图中的浅灰蓝背景 */
    box-sizing: border-box;
    overflow: hidden;
}
.products-overview-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    box-sizing: border-box;
}
/* ---------------- 左侧卡片 ---------------- */
.overview-left-card {
    flex: 0 0 42%;
    max-width: 540px;
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.15rem 0.35rem rgba(16, 32, 54, 0.08);
}
.card-img-box {
    position: relative;
    width: 100%;
    height: 3.4rem;
    overflow: hidden;
}
.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 图内右侧文字标注 */
.card-img-tag {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    text-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.5);
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    padding-left: 0.18rem;
}
.card-img-tag .tag-title {
    font-size: 0.28rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02rem;
}
.card-img-tag .tag-sub {
    font-size: 0.15rem;
    margin-top: 0.06rem;
    color: rgba(255, 255, 255, 0.9);
}
.card-img-tag .tag-sub span {
    margin: 0 0.06rem;
    opacity: 0.6;
}
/* 卡片底部进度条与文案 */
.card-bottom-info {
    padding: 0.28rem 0.32rem 0.32rem;
}
.info-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.12rem;
}
.info-label {
    font-size: 0.18rem;
    font-weight: 700;
    color: #1a2533;
}
.info-value {
    font-size: 0.2rem;
    font-weight: 800;
    color: #00b894;
    /* 翠绿色百分比 */
}
.info-progress-bar {
    width: 100%;
    height: 0.08rem;
    background-color: #e2e8f0;
    border-radius: 0.04rem;
    overflow: hidden;
    margin-bottom: 0.16rem;
}
.progress-fill {
    width: 0%;
    /* 默认由 JS 触发平滑过渡动画至 99.99% */
    height: 100%;
    background: linear-gradient(90deg, #00b894 0%, #00cec9 100%);
    border-radius: 0.04rem;
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.info-desc {
    font-size: 0.13rem;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}
/* ---------------- 右侧内容区 ---------------- */
.overview-right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.overview-paragraph {
    font-size: 0.24rem;
    line-height: 1.65;
    color: #2d3748;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01rem;
}
/* 数据指标栏 */
.overview-metrics-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.metric-item {
    display: flex;
    flex-direction: column;
}
.metric-num {
    font-size: 0.42rem;
    font-weight: 800;
    color: #00a0e9;
    /* 招牌海洋蓝 */
    line-height: 1.1;
    margin-bottom: 0.08rem;
}
.metric-num .unit {
    font-size: 0.26rem;
    font-weight: 700;
    margin-left: 0.02rem;
}
.metric-label {
    font-size: 0.14rem;
    color: #718096;
    font-weight: 500;
}
.metric-divider {
    width: 1px;
    height: 0.45rem;
    background-color: #cbd5e0;
    margin: 0 0.45rem;
}
/* 按钮组 */
.overview-btn-group {
    display: flex;
    align-items: center;
    gap: 0.24rem;
}
.btn-solid-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.32rem;
    background-color: #00a0e9;
    color: #ffffff;
    font-size: 0.15rem;
    font-weight: 600;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 160, 233, 0.25);
}
.btn-solid-blue:hover {
    background-color: #008ccb;
    transform: translateY(-2px);
    box-shadow: 0 0.1rem 0.22rem rgba(0, 160, 233, 0.35);
}
.btn-outline-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.32rem;
    background-color: transparent;
    color: #00a0e9;
    font-size: 0.15rem;
    font-weight: 600;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-outline-blue:hover {
    background-color: rgba(0, 160, 233, 0.08);
    transform: translateY(-2px);
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .products-overview-container {
        flex-direction: column;
        padding: 0.6rem 5%;
    }
    .overview-left-card {
        max-width: 100%;
        width: 100%;
    }
    .overview-paragraph {
        font-size: 0.18rem;
    }
    .metric-num {
        font-size: 0.32rem;
    }
    .metric-divider {
        margin: 0 0.2rem;
    }
}
/* ==========================================================================
产品聚合页第三屏：应用场景 (Scenario Section)
========================================================================== */
.products-scenario-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding: 0.8rem 0 1rem;
    background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.scenario-bg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(8, 20, 32, 0.92) 0%, rgba(5, 14, 24, 0.88) 100%);
    z-index: 1;
}
.scenario-container {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部行业 Tab 导航 */
.scenario-top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.industry-tab-btn {
    background: transparent;
    border: none;
    font-size: 0.15rem;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.08rem 0;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}
.industry-tab-btn:hover {
    color: #ffffff;
}
.industry-tab-btn.active {
    color: #00a0e9;
    font-weight: 700;
}
.industry-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00a0e9;
}
/* 主体左右网格 */
.scenario-main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0.6rem;
    align-items: center;
}
/* 左侧标题区 */
.scenario-en-tag {
    font-size: 0.16rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02rem;
    margin-bottom: 0.15rem;
}
.scenario-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.28;
    margin: 0 0 0.35rem 0;
}
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12rem 0.36rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.3rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.14rem;
    transition: all 0.3s ease;
    margin-bottom: 0.8rem;
}
.btn-outline-white:hover {
    border-color: #00a0e9;
    background-color: #00a0e9;
}
/* 翻页指示器 */
.scenario-counter-bar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.13rem;
    font-family: monospace;
}
.counter-arrow {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.14rem;
    transition: color 0.3s;
}
.counter-arrow:hover {
    color: #00a0e9;
}
.counter-line {
    width: 0.8rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
}
.counter-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #00a0e9;
    transition: width 0.3s ease;
}
/* 右侧 3 列卡片网格 */
.scenario-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}
.scenario-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.scenario-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.22rem 0.45rem rgba(0, 160, 233, 0.3);
}
.scenario-card-img {
    width: 100%;
    height: 2.6rem;
    overflow: hidden;
    background-color: #eaeff5;
}
.scenario-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.scenario-card:hover .scenario-card-img img {
    transform: scale(1.06);
}
.scenario-card-body {
    padding: 0.25rem 0.22rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.card-title {
    font-size: 0.18rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.1rem 0;
    line-height: 1.35;
}
.card-desc {
    font-size: 0.125rem;
    color: #607080;
    line-height: 1.6;
    margin: 0 0 0.18rem 0;
    min-height: 0.6rem;
}
/* 勾选列表 */
.card-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.18rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.card-check-list li {
    font-size: 0.12rem;
    color: #4a5a6a;
    display: flex;
    align-items: center;
    gap: 0.06rem;
}
.blue-check {
    color: #00a0e9;
    font-weight: bold;
    font-size: 0.11rem;
}
/* 底部适用范围 */
.card-scope {
    margin-top: auto;
    font-size: 0.115rem;
    color: #8090a0;
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.12rem;
}
.card-scope span {
    color: #4a5a6a;
    font-weight: 600;
}
/* 响应式适配 */
@media (max-width: 1200px) {
    .scenario-main-grid {
        grid-template-columns: 1fr;
    }
    .scenario-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 680px) {
    .scenario-top-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.15rem;
    }
    .scenario-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
产品聚合页第四屏：航海工程核心产品系列 (4列平铺网格)
========================================================================== */
.products-grid-section {
    width: 100vw;
    background-color: #f7f9fc;
    padding: 1rem 0 1.2rem;
    box-sizing: border-box;
}
.products-grid-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部标题 */
.products-grid-header {
    margin-bottom: 0.45rem;
}
.p-grid-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.p-grid-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
}
/* 4 列产品卡片网格 */
.products-four-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}
/* 产品卡片外框 */
.p-catalog-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}
.p-catalog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.18rem 0.4rem rgba(0, 50, 100, 0.1);
}
/* 图片区域 */
.p-card-img {
    width: 100%;
    height: 260px;
    overflow: hidden;
    background-color: #eaeff5;
}
.p-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.p-catalog-card:hover .p-card-img img {
    transform: scale(1.06);
}
/* 文本信息与内容 */
.p-card-body {
    padding: 0.28rem 0.24rem 0.3rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.p-card-title {
    font-size: 0.2rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.12rem 0;
    line-height: 1.35;
}
.p-card-desc {
    font-size: 0.13rem;
    color: #708090;
    line-height: 1.65;
    margin: 0 0 0.18rem 0;
    min-height: 0.62rem;
}
/* 参数属性说明 */
.p-card-params {
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
}
.p-card-params p {
    font-size: 0.125rem;
    color: #8090a0;
    margin: 0;
    line-height: 1.5;
}
.p-card-params span {
    color: #506070;
    font-weight: 600;
}
/* 底部圆角胶囊线框按钮（100% 还原设计图） */
.btn-p-card {
    margin-top: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.1rem 0;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    color: #00a0e9;
    text-decoration: none;
    font-size: 0.135rem;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.btn-p-card svg {
    width: 0.15rem;
    height: 0.15rem;
    transition: transform 0.3s ease;
}
.btn-p-card:hover {
    background-color: #00a0e9;
    color: #ffffff;
}
.btn-p-card:hover svg {
    transform: translateX(4px);
}
/* 响应式断点适配 */
@media (max-width: 1200px) {
    .products-four-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }
}
@media (max-width: 640px) {
    .products-four-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
产品聚合页第五屏：成功案例 (平铺等宽轮播)
========================================================================== */
.products-success-section {
    width: 100vw;
    background-color: #f7f9fc;
    padding: 0.8rem 0 1.2rem;
    box-sizing: border-box;
    overflow: hidden;
}
.products-success-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 顶部标题 */
.success-header-box {
    margin-bottom: 0.4rem;
}
.success-en-tag {
    font-size: 0.22rem;
    font-weight: 700;
    color: #c2cfdc;
    letter-spacing: 0.03rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.success-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
}
/* 轮播外层相对定位容器 */
.success-swiper-container {
    position: relative;
    width: 100%;
}
/* 悬浮左右按钮（精准锚定在两侧外侧） */
.success-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    z-index: 30;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: all 0.3s ease;
}
.success-nav-btn svg {
    width: 0.24rem;
    height: 0.24rem;
}
/* 左按钮：实心天蓝 */
.success-nav-btn.prev-btn {
    left: -0.24rem;
    background-color: #00a0e9;
    border: none;
    color: #ffffff;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 160, 233, 0.3);
}
.success-nav-btn.prev-btn:hover {
    background-color: #008ccb;
    transform: translateY(-50%) scale(1.08);
}
/* 右按钮：线框白底天蓝 */
.success-nav-btn.next-btn {
    right: -0.24rem;
    background-color: #00a0e9;
    border: none;
    color: #ffffff;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 160, 233, 0.3);
}
.success-nav-btn.next-btn:hover {
    background-color: #00a0e9;
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}
/* Swiper 容器 */
.success-swiper {
    width: 100%;
    padding: 0.15rem 0 0.25rem;
}
/* 单个卡片造型 */
.success-card {
    background: #ffffff;
    border-radius: 0.24rem;
    overflow: hidden;
    box-shadow: 0 0.08rem 0.25rem rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.success-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.16rem 0.35rem rgba(0, 50, 100, 0.1);
}
.success-card-img {
    width: 100%;
    height: 3.2rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.success-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.success-card-info {
    padding: 0.22rem 0.25rem 0.28rem;
    background-color: #ffffff;
    border-top: 1px solid #f0f4f8;
}
.success-card-info .card-title {
    font-size: 0.19rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.08rem 0;
}
.success-card-info .card-desc {
    font-size: 0.13rem;
    color: #8090a0;
    line-height: 1.6;
    margin: 0;
}
/* 移动端响应式 */
@media (max-width: 1024px) {
    .success-nav-btn.prev-btn {
        left: 0.02rem;
    }
    .success-nav-btn.next-btn {
        right: 0.02rem;
    }
}
@media (max-width: 640px) {
    .success-nav-btn {
        display: none;
    }
}
/* ==========================================================================
全站通用 FAQ：固定高度零跳动纯净版
========================================================================== */
.global-faq-section {
    width: 100vw;
    background-color: #ffffff;
    padding: 1.2rem 0;
    box-sizing: border-box;
    overflow: hidden;
    /* 核心 1：隔离布局重排，阻止向上影响 Lenis */
    contain: layout paint;
}
.faq-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0.8rem;
    box-sizing: border-box;
}
/* 左侧标题 */
.faq-left-box {
    display: flex;
    flex-direction: column;
}
.faq-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    line-height: 1.25;
    margin: 0 0 0.18rem 0;
}
.faq-sub-desc {
    font-size: 0.14rem;
    color: #8090a0;
    line-height: 1.65;
    margin: 0;
}
/* 右侧手风琴列表 */
.faq-right-list {
    display: flex;
    flex-direction: column;
    /* 核心 2：固定右侧整体高度，预留足够空间（无论手风琴怎么开合，FAQ 整体高度锁定不跳动） */
    min-height: 460px;
}
.faq-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.28rem 0;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.faq-item:first-child {
    padding-top: 0;
}
.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem;
    user-select: none;
}
.faq-question {
    font-size: 0.2rem;
    font-weight: 700;
    color: #1a2530;
    margin: 0;
    transition: color 0.3s ease;
}
.faq-item:hover .faq-question,
.faq-item.active .faq-question {
    color: #00a0e9;
}
/* 圆圈加减号按钮 */
.faq-toggle-icon {
    position: relative;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 1px solid #00a0e9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.faq-item:hover .faq-toggle-icon {
    background-color: rgba(0, 160, 233, 0.08);
}
.icon-line {
    position: absolute;
    background-color: #00a0e9;
    border-radius: 1px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.icon-line.horiz {
    width: 0.14rem;
    height: 2px;
}
.icon-line.vert {
    width: 2px;
    height: 0.14rem;
}
.faq-item.active .icon-line.vert {
    transform: rotate(90deg);
    opacity: 0;
}
/* 隐藏展开内容区 */
.faq-body {
    display: none;
}
.faq-answer {
    font-size: 0.14rem;
    color: #708090;
    line-height: 1.7;
    margin: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.05rem;
    max-width: 820px;
}
@media (max-width: 1024px) {
    .faq-container {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .faq-right-list {
        min-height: auto;
        /* 移动端自适应 */
    }
}
/* ==========================================================================
产品聚合页 第一屏：产品中心 Hero Section (完全防冲突命名空间 .p-hub-)
========================================================================== */
.p-hub-hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 650px;
    background-color: #06111e;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* 视差背景图 */
.p-hub-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115%;
    /* 预留视差移动空间 */
    background: url('../images/back-index.jpg') center right / cover no-repeat;
    z-index: 1;
}
/* 冷蓝暗色渐变遮罩（保证左侧文字清晰度） */
.p-hub-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(6, 17, 30, 0.95) 0%,
            rgba(6, 17, 30, 0.85) 45%,
            rgba(6, 17, 30, 0.3) 80%,
            rgba(6, 17, 30, 0.1) 100%);
    z-index: 2;
}
/* 定宽 1600px 居中容器 */
.p-hub-hero-container {
    position: relative;
    z-index: 3;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
/* 文字区块限制宽度为左半侧 */
.p-hub-hero-content {
    max-width: 580px;
}
/* 顶部青蓝短线 */
.p-hub-cyan-line {
    width: 0.38rem;
    height: 3px;
    background-color: #00a0e9;
    margin-bottom: 0.22rem;
    border-radius: 2px;
}
/* 主标题 */
.p-hub-main-title {
    font-size: 0.52rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 0.22rem 0;
    letter-spacing: 0.02rem;
}
/* 描述段落 */
.p-hub-desc {
    font-size: 0.15rem;
    color: #a0b2c6;
    line-height: 1.85;
    margin: 0 0 0.35rem 0;
    text-align: justify;
}
/* 圆角线框胶囊按钮 */
.p-hub-btn-box {
    display: flex;
}
.btn-p-hub-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.12rem 0.32rem;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    color: #00a0e9;
    font-size: 0.14rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: rgba(0, 160, 233, 0.05);
}
.btn-p-hub-outline svg {
    width: 0.16rem;
    height: 0.16rem;
    transition: transform 0.3s ease;
}
.btn-p-hub-outline:hover {
    background-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.35);
}
.btn-p-hub-outline:hover svg {
    transform: translateX(4px);
}
/* 响应式适配 */
@media (max-width: 768px) {
    .p-hub-hero-section {
        height: auto;
        padding: 1.5rem 0 1rem;
    }
    .p-hub-main-title {
        font-size: 0.38rem;
    }
    .p-hub-desc {
        font-size: 0.14rem;
    }
}
/* ==========================================================================
产品聚合页 第二屏：复合材料中心 (专用命名空间 .p-hub-composite-)
========================================================================== */
.p-hub-composite-section {
    position: relative;
    width: 100vw;
    background-color: #f8fafc;
    padding: 1.2rem 0;
    box-sizing: border-box;
    overflow: hidden;
}
/* 右下角淡天蓝圆点点阵背景 */
.composite-dots-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 70%;
    background-image: radial-gradient(#cbe7fb 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
.p-hub-composite-container {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0.6rem;
    align-items: center;
    box-sizing: border-box;
}
/* ---------------- 左侧介绍栏 ---------------- */
.composite-left-box {
    display: flex;
    flex-direction: column;
}
.c-en-tag {
    font-size: 0.2rem;
    font-weight: 700;
    color: #c0cedc;
    letter-spacing: 0.04rem;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
}
.c-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.22rem 0;
    line-height: 1.25;
}
.c-desc {
    font-size: 0.135rem;
    color: #607080;
    line-height: 1.8;
    margin: 0 0 0.35rem 0;
    text-align: justify;
}
/* 底部胶囊线框按钮 */
.btn-c-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0.1rem 0.26rem;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    color: #00a0e9;
    font-size: 0.135rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
    background-color: #ffffff;
}
.btn-c-outline svg {
    width: 0.15rem;
    height: 0.15rem;
    transition: transform 0.3s ease;
}
.btn-c-outline:hover {
    background-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.25);
}
.btn-c-outline:hover svg {
    transform: translateX(4px);
}
/* ---------------- 右侧 Swiper 轮播栏 ---------------- */
.composite-right-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* 顶部右上角左右按钮 */
.composite-nav-group {
    display: flex;
    justify-content: flex-end;
    gap: 0.12rem;
    margin-bottom: 0.3rem;
    padding: 0.2rem 0.3rem;
}
.c-nav-btn {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}
.c-nav-btn svg {
    width: 0.22rem;
    height: 0.22rem;
}
/* 左按钮：实心天蓝 */
.c-nav-btn.prev-btn {
    background-color: #ffffff;
    border: 1px solid #00a0e9;
    color: #00a0e9;
    box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.04);
}
.c-nav-btn.prev-btn:hover {
    background-color: #008ccb;
    transform: scale(1.08);
    color: #ffffff;
}
/* 右按钮：线框白底天蓝 */
.c-nav-btn.next-btn {
    background-color: #ffffff;
    border: 1px solid #00a0e9;
    color: #00a0e9;
    box-shadow: 0 0.06rem 0.16rem rgba(0, 0, 0, 0.04);
}
.c-nav-btn.next-btn:hover {
    background-color: #00a0e9;
    color: #ffffff;
    transform: scale(1.08);
}
/* Swiper 容器：无限循环模式下隐藏溢出部分 */
.composite-swiper {
    width: 100%;
    padding: 0.15rem 0.05rem 0.35rem;
    overflow: hidden;
}
.composite-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
}
.composite-swiper .swiper-slide {
    width: 280px;
    /* 卡片固定宽度 */
    height: auto;
}
/* 单个卡片造型 */
.c-feature-card {
    height: 380px;
    background: #ffffff;
    border-radius: 0.28rem;
    padding: 0.35rem 0.3rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0.12rem 0.3rem rgba(0, 50, 100, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
/* 图标圆形底座 */
.c-card-icon-wrapper {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background-color: #f0f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00a0e9;
    transition: all 0.4s ease;
}
.c-card-icon-wrapper svg {
    width: 0.32rem;
    height: 0.32rem;
}
/* 卡片标题与副标题 */
.c-card-title {
    font-size: 0.2rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.12rem 0;
    line-height: 1.3;
    transition: color 0.4s ease;
}
.c-card-desc {
    font-size: 0.13rem;
    color: #8090a0;
    line-height: 1.65;
    margin: 0;
    transition: color 0.4s ease;
}
/* ---------------- 选中/高亮激活卡片（100% 还原设计图：蓝底白字） ---------------- */
.composite-swiper .swiper-slide-active .c-feature-card,
.c-feature-card:hover {
    background-color: #00a0e9;
    box-shadow: 0 0.12rem 0.3rem rgba(0, 50, 100, 0.05);
    transform: translateY(-6px);
}
/* 高亮卡片的图标底座与颜色 */
.composite-swiper .swiper-slide-active .c-card-icon-wrapper,
.c-feature-card:hover .c-card-icon-wrapper {
    background-color: #ffffff;
    color: #00a0e9;
}
/* 高亮卡片的文字变白 */
.composite-swiper .swiper-slide-active .c-card-title,
.composite-swiper .swiper-slide-active .c-card-desc,
.c-feature-card:hover .c-card-title,
.c-feature-card:hover .c-card-desc {
    color: #ffffff;
}
/* ---------------- 响应式断点 ---------------- */
@media (max-width: 1024px) {
    .p-hub-composite-container {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}
/* ==========================================================================
第三屏：核心产品品类 (.p-hub-categories-)
========================================================================== */
.p-hub-categories-section {
    position: relative;
    width: 100vw;
    background-color: #ffffff;
    padding: 1.2rem 0;
    box-sizing: border-box;
    overflow: hidden;
}
.p-hub-categories-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* 1. 顶部标题栏 */
.cat-header-box {
    text-align: center;
    margin-bottom: 0.6rem;
}
.cat-en-tag {
    font-size: 0.18rem;
    font-weight: 700;
    color: #c0cedc;
    letter-spacing: 0.04rem;
    margin-bottom: 0.08rem;
    text-transform: uppercase;
}
.cat-main-title {
    font-size: 0.38rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0;
}
/* 2. 主体网格 */
.cat-main-content-wrapper {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
/* 左侧品类菜单（小红框 1） */
.cat-left-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.cat-menu-item {
    font-size: 0.18rem;
    font-weight: 600;
    color: #1a2530;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.08rem;
    transition: all 0.3s ease;
    user-select: none;
}
.cat-menu-item:hover,
.cat-menu-item.active {
    color: #00a0e9;
    font-weight: 700;
}
.cat-menu-item .blue-dot {
    color: #00a0e9;
    font-size: 0.24rem;
    line-height: 1;
}
/* 大红框：主展示卡片舞台 */
.cat-display-stage {
    position: relative;
    width: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
}
/* 主展示卡片 (大红框内容) */
.cat-product-card {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 180px);
    /* 留出右侧 180px 给装饰切角卡片 */
    display: grid;
    grid-template-columns: 555px 1fr;
    gap: 0.35rem;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    pointer-events: none;
    z-index: 1;
}
/* 激活显示的卡片 */
.cat-product-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
}
/* 平行四边形斜切图片容器 (skewX(-12deg)) */
.cat-skew-img-box {
    position: relative;
    width: 440px;
    height: 340px;
    transform: skewX(-12deg);
    border-radius: 0.16rem;
    overflow: hidden;
    background-color: #f1f5f9;
    box-shadow: 0 0.12rem 0.3rem rgba(0, 0, 0, 0.08);
}
.skew-bg-cyan {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(135deg, #00a0e9 0%, #0080c8 100%);
    z-index: 1;
}
.cat-skew-img-box img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 120%;
    object-fit: cover;
    transform: translate(-50%, -50%) skewX(12deg);
    z-index: 2;
}
/* 右侧文案 */
.cat-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-info-title {
    font-size: 0.32rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.16rem 0;
}
.c-info-desc {
    font-size: 0.135rem;
    color: #8090a0;
    line-height: 1.8;
    margin: 0 0 0.28rem 0;
    max-width: 380px;
}
.btn-cat-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.28rem;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    color: #00a0e9;
    font-size: 0.135rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
    background-color: #ffffff;
}
.btn-cat-outline:hover {
    background-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.25);
}
/* 3. 底部 5 个圆形缩略图（小红框 2） */
.cat-thumbs-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
}
.thumb-item {
    position: relative;
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    border: 2px solid transparent;
    box-sizing: border-box;
    background-color: #f8fafc;
}
.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb-item:hover {
    transform: scale(1.1);
}
.thumb-item.active {
    border-color: #00a0e9;
    transform: scale(1.18);
    box-shadow: 0 0.08rem 0.2rem rgba(0, 160, 233, 0.35);
}
/* 响应式 */
@media (max-width: 1024px) {
    .cat-main-content-wrapper {
        grid-template-columns: 1fr;
    }
    .cat-product-card {
        position: relative;
        width: 100%;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .cat-decor-preview-card {
        display: none;
    }
}
/* ==========================================================================
产品列表页 第一屏 Hero (产品库 Banner) .p-list-hero-
========================================================================== */
.p-list-hero-section {
    position: relative;
    width: 100vw;
    height: 48vh;
    /* Banner 高度适配，保持大气沉稳 */
    min-height: 380px;
    background-color: #0b0f15;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
/* 动态背景图（拉丝金属 + 发光光轨背景） */
.p-list-hero-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    /* 预设拉丝金属黑系背景，若有本地高精原图可替换 images/product-hero-bg.jpg */
    background: url('../images/product-bg.jpg') center center / cover no-repeat;
    z-index: 1;
    filter: brightness(0.65) contrast(1.1);
}
/* 暗色暗角遮罩，增强中央文字可读性 */
.p-list-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(11, 15, 21, 0.4) 0%, rgba(11, 15, 21, 0.85) 100%);
    z-index: 2;
}
/* 中央文案容器 */
.p-list-hero-container {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0;
}
.p-list-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.p-list-main-title {
    font-size: 0.48rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.06rem;
    margin: 0 0 0.16rem 0;
    line-height: 1.2;
    text-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.5);
}
.p-list-sub-desc {
    font-size: 0.16rem;
    font-weight: 400;
    color: #a0b0c0;
    letter-spacing: 0.02rem;
    margin: 0;
    opacity: 0.9;
}
/* 响应式断点 */
@media (max-width: 768px) {
    .p-list-hero-section {
        height: 38vh;
        min-height: 280px;
    }
    .p-list-main-title {
        font-size: 0.36rem;
    }
    .p-list-sub-desc {
        font-size: 0.14rem;
    }
}
/* ==========================================================================
产品列表页 第二屏：产品目录与 3 列网格 (.p-list-main-)
========================================================================== */
.p-list-main-section {
    position: relative;
    width: 100vw;
    background-color: #f8fafc;
    padding: 0.8rem 0 1.2rem;
    box-sizing: border-box;
}
.p-list-main-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0.35rem;
    align-items: start;
    box-sizing: border-box;
}
/* ---------------- 1. 左侧侧边栏 ---------------- */
.p-list-sidebar {
    background-color: #ffffff;
    border-radius: 0.16rem;
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}
/* 顶部蓝色天窗 */
.sidebar-header-box {
    background: linear-gradient(135deg, #00a0e9 0%, #0080c8 100%);
    padding: 0.24rem 0.22rem;
    color: #ffffff;
}
.sidebar-title {
    font-size: 0.22rem;
    font-weight: 800;
    margin: 0 0 0.04rem 0;
    letter-spacing: 0.02rem;
}
.sidebar-sub-en {
    font-size: 0.11rem;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.04rem;
}
/* 菜单列表 */
.sidebar-menu-list {
    list-style: none;
    padding: 0.1rem 0;
    margin: 0;
}
.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #333333;
    text-decoration: none;
    transition: all 0.25s ease;
}
/* 激活或悬停状态 */
.sidebar-menu-item.active > .menu-link,
.menu-link:hover {
    color: #0088cc; /* 配图中的天蓝色 */
    font-weight: 600;
}
/* 一级 SVG 图标样式 */
.menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    stroke: currentColor;
    position: relative;
    top: 3px;
}
/* 二级菜单样式 */
.sidebar-sub-menu {
    list-style: none;
    padding-left: 20px;
    margin: 0;
}
.sidebar-sub-menu a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: #0088cc;
    text-decoration: none;
    font-size: 14px;
}
/* 二级 SVG 图标 */
.sub-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    flex-shrink: 0;
    stroke: currentColor;
}
.sidebar-menu-item {
    border-bottom: 1px solid #f1f5f9;
}
.sidebar-menu-item:last-child {
    border-bottom: none;
}
.sidebar-menu-item .menu-link {
    display: block;
    padding: 0.18rem 0.22rem;
    font-size: 0.155rem;
    font-weight: 600;
    color: #1a2530;
    text-decoration: none;
    transition: all 0.3s ease;
}
.sidebar-menu-item:hover .menu-link,
.sidebar-menu-item.active .menu-link {
    color: #00a0e9;
}
/* 二级子菜单 */
.sidebar-sub-menu {
    list-style: none;
    padding: 0 0.22rem 0.18rem 0.22rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.sidebar-sub-menu .sub-item a {
    font-size: 0.13rem;
    color: #607080;
    text-decoration: none;
    transition: color 0.3s ease;
}
.sidebar-sub-menu .sub-item:hover a,
.sidebar-sub-menu .sub-item.active a {
    color: #00a0e9;
    font-weight: 600;
}
/* ---------------- 2. 右侧 3 列产品网格 ---------------- */
.p-list-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}
/* 单个产品卡片 */
.p-grid-card {
    background-color: #ffffff;
    border-radius: 0.16rem;
    overflow: hidden;
    box-shadow: 0 0.08rem 0.2rem rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.p-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.16rem 0.35rem rgba(0, 0, 0, 0.08);
}
.p-grid-card .card-img-box {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background-color: #0b0f15;
}
.p-grid-card .card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.p-grid-card:hover .card-img-box img {
    transform: scale(1.06);
}
.card-content-box {
    padding: 0.22rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
/* 灰背景浅蓝字胶囊标准标签 */
.card-std-tag {
    display: inline-block;
    padding: 0.04rem 0.12rem;
    background-color: #edf7fc;
    color: #00a0e9;
    font-size: 0.115rem;
    font-weight: 600;
    border-radius: 0.2rem;
    width: fit-content;
    margin-bottom: 0.12rem;
}
.card-title {
    font-size: 0.19rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.12rem 0;
    line-height: 1.3;
}
.card-desc {
    font-size: 0.13rem;
    color: #8090a0;
    line-height: 1.7;
    margin: 0 0 0.2rem 0;
    flex-grow: 1;
}
/* 胶囊框天蓝按钮 */
.btn-card-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    width: 100%;
    padding: 0.09rem 0;
    border: 1px solid #00a0e9;
    border-radius: 0.3rem;
    color: #00a0e9;
    font-size: 0.135rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.btn-card-outline svg {
    width: 0.16rem;
    height: 0.16rem;
    transition: transform 0.3s ease;
}
.btn-card-outline:hover {
    background-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 160, 233, 0.25);
}
.btn-card-outline:hover svg {
    transform: translateX(4px);
}
/* 响应式适配 */
@media (max-width: 1200px) {
    .p-list-three-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 860px) {
    .p-list-main-container {
        grid-template-columns: 1fr;
    }
    .p-list-sidebar {
        position: relative;
        top: 0;
    }
    .p-list-three-grid {
        grid-template-columns: 1fr;
    }
}
/* ---------------- 卡片内工业规格参数对齐块 ---------------- */
.card-params-list {
    background-color: #f8fafc;
    border-radius: 0.08rem;
    padding: 0.12rem 0.14rem;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    border: 1px solid #edf2f7;
}
.param-row {
    display: flex;
    align-items: center;
    font-size: 0.125rem;
    line-height: 1.5;
}
.param-row .p-label {
    color: #8090a0;
    font-weight: 500;
    min-width: 0.72rem;
    flex-shrink: 0;
}
.param-row .p-val {
    color: #1a2530;
    font-weight: 600;
    word-break: break-all;
}
/* ==========================================================================
   2026-11-15 恢复：v4 改版误删的 常见问题页 / 新闻列表页 / 新闻详情页 /
   新闻正文排版增强 样式（源自 style.css.bak-20261115-1436 行 6209-7270）。
   产品页样式 (.pdp-) 仍在其后，互不冲突。
   ========================================================================== */
/* ==========================================================================
常见问题与技术解答页面 专有样式 (.faq-page-)
========================================================================== */
/* ---------------- 1. 第一屏 Hero Banner ---------------- */
.faq-content-list {
    padding: 0;
}
.faq-hero-section {
    position: relative;
    width: 100vw;
    height: 50vh;
    min-height: 340px;
    background-color: #0b111a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.faq-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 采用高质感 PCB/电路科技风背景遮罩 */
    background: radial-gradient(circle at 50% 30%, rgba(0, 160, 233, 0.18) 0%, rgba(11, 17, 26, 0.95) 75%),
        url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1920&q=80') center center / cover no-repeat;
    z-index: 1;
}
.faq-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 17, 26, 0.2) 0%, rgba(11, 17, 26, 0.8) 100%);
    z-index: 2;
}
.faq-hero-container {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0;
}
.faq-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.faq-hero-content .faq-main-title {
    font-size: 0.44rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.16rem 0;
    letter-spacing: 0.04rem;
}
.faq-hero-content .faq-sub-desc {
    font-size: 0.15rem;
    color: #a0b0c0;
    line-height: 1.8;
    max-width: 820px;
    margin: 0;
}
/* ---------------- 2. 主区 2 栏布局 ---------------- */
.faq-page-main {
    background-color: #f8fafc;
    padding: 0.8rem 0 1.2rem;
    position: relative;
}
.faq-page-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0.45rem;
    align-items: start;
    box-sizing: border-box;
}
/* ---------------- 左侧 Sticky 侧边栏 ---------------- */
.faq-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* 问题分类导航卡片 */
.faq-nav-card {
    background-color: #ffffff;
    border-radius: 0.12rem;
    border: 1px solid #e2e8f0;
    padding: 0.22rem;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.03);
}
.nav-card-title {
    font-size: 0.15rem;
    font-weight: 700;
    color: #8090a0;
    margin-bottom: 0.15rem;
}
.faq-cat-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.faq-cat-menu .cat-item {
    padding: 0.12rem 0.16rem;
    border-radius: 0.08rem;
    font-size: 0.145rem;
    font-weight: 600;
    color: #1a2530;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.faq-cat-menu .cat-item:hover {
    color: #00a0e9;
    background-color: #f1f5f9;
}
.faq-cat-menu .cat-item.active {
    background-color: #edf7fc;
    color: #00a0e9;
    border-color: #00a0e9;
    font-weight: 700;
}
/* 需要技术咨询吗？天蓝卡片 */
.faq-contact-card {
    background: linear-gradient(135deg, #00a0e9 0%, #0080c8 100%);
    border-radius: 0.12rem;
    padding: 0.28rem 0.22rem;
    color: #ffffff;
    box-shadow: 0 0.08rem 0.22rem rgba(0, 160, 233, 0.25);
}
.faq-contact-card .c-card-title {
    font-size: 0.22rem;
    font-weight: 800;
    margin: 0 0 0.12rem 0;
    color: #fff;
}
.faq-contact-card .c-card-desc {
    font-size: 0.13rem;
    line-height: 1.7;
    margin: 0 0 0.2rem 0;
    opacity: 0.95;
    color: #fff;
}
.faq-contact-card .c-card-info p {
    font-size: 0.13rem;
    margin: 0 0 0.06rem 0;
    font-weight: 600;
}
/* ---------------- 右侧手风琴内容列表 ---------------- */
.faq-category-group {
    margin-bottom: 0.5rem;
}
.faq-category-group .category-title {
    font-size: 0.22rem;
    font-weight: 800;
    color: #1a2530;
    margin: 0 0 0.2rem 0;
}
.faq-accordion-box {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}
.faq-accordion-box .faq-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
}
.faq-accordion-box .faq-item:hover {
    border-color: #00a0e9;
    box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.04);
}
.faq-accordion-box .faq-item.active {
    border-color: #00a0e9;
    box-shadow: 0 0.08rem 0.22rem rgba(0, 160, 233, 0.1);
}
.faq-accordion-box .faq-header {
    padding: 0.22rem 0.24rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 0.2rem;
}
.faq-q-title {
    display: flex;
    align-items: center;
    gap: 0.14rem;
}
.faq-q-title .q-icon {
    width: 0.26rem;
    height: 0.26rem;
    min-width: 0.26rem;
    background-color: #1a2530;
    color: #ffffff;
    font-size: 0.13rem;
    font-weight: 800;
    border-radius: 0.04rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.faq-item.active .faq-q-title .q-icon {
    background-color: #00a0e9;
}
.faq-q-title h3 {
    font-size: 0.16rem;
    font-weight: 700;
    color: #1a2530;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.faq-item.active .faq-q-title h3 {
    color: #00a0e9;
}
.faq-arrow-icon {
    width: 0.24rem;
    height: 0.24rem;
    color: #8090a0;
    transition: transform 0.35s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-arrow-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.faq-item.active .faq-arrow-icon {
    transform: rotate(180deg);
    color: #00a0e9;
}
.faq-accordion-box .faq-body {
    display: none;
    border-top: 1px solid #f1f5f9;
    background-color: #f8fafc;
}
.faq-accordion-box .faq-body-inner {
    padding: 0.2rem 0.24rem 0.24rem 0.64rem;
}
.faq-answer {
    font-size: 0.16rem;
    color: #607080;
    line-height: 1.85;
    margin: 0;
    padding: 0;
}
/* 响应式断点 */
@media (max-width: 1024px) {
    .faq-page-container {
        grid-template-columns: 1fr;
    }
    .faq-sidebar {
        position: relative;
        top: 0;
    }
}
/* FAQ 左侧分类 SVG 图标样式 */
.faq-cat-menu .cat-item {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    /* 图标与文字的间距 */
}
.faq-cat-menu .cat-icon-svg {
    width: 0.18rem;
    height: 0.18rem;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform 0.3s ease, fill 0.3s ease;
}
/* 悬停与激活时图标轻微放大联动 */
.faq-cat-menu .cat-item:hover .cat-icon-svg,
.faq-cat-menu .cat-item.active .cat-icon-svg {
    transform: scale(1.12);
}
/* ==========================================================================
新闻中心列表页 (News Center Module)
========================================================================== */
/* --- 第一屏 Hero (科技网络背景) --- */
.news-hero-section {
    position: relative;
    width: 100vw;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #060e1a;
}
.news-hero-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.news-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(6, 14, 26, 0.4) 0%, rgba(6, 14, 26, 0.85) 100%),
        linear-gradient(to bottom, rgba(6, 14, 26, 0.3), rgba(6, 14, 26, 0.95));
    z-index: 2;
}
.news-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 16rem;
    padding: 0 0.3rem;
    margin: 0 auto;
    text-align: center;
}
.news-hero-content {
    max-width: 8.8rem;
    margin: 0 auto;
}
.news-main-title {
    font-size: 0.44rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02rem;
    margin-bottom: 0.2rem;
}
.news-sub-desc {
    font-size: 0.15rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin: 0 auto;
}
/* --- 第二屏 新闻列表主体与 Filter --- */
.news-main-section {
    width: 100vw;
    background-color: #ffffff;
    padding: 0.6rem 0 1rem;
}
.news-main-container {
    width: 100%;
    max-width: 14rem;
    margin: 0 auto;
    padding: 0 0.3rem;
}
/* 蓝色圆角分类选项卡 */
.news-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-bottom: 0.5rem;
}
.news-tab-btn {
    padding: 0.1rem 0.28rem;
    font-size: 0.15rem;
    font-weight: 500;
    color: #2b3648;
    background-color: #f2f4f8;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.news-tab-btn:hover {
    background-color: #e4e8f0;
    color: #00a0e9;
}
.news-tab-btn.active {
    background-color: #00a0e9;
    color: #ffffff;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 160, 233, 0.3);
}
/* 横向新闻列表布局 */
.news-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
}
.news-item-card {
    display: flex;
    align-items: stretch;
    gap: 0.32rem;
    padding-bottom: 0.36rem;
    border-bottom: 0.01rem solid #eef2f7;
    transition: transform 0.3s ease;
}
.news-item-card:last-child {
    border-bottom: none;
}
.news-card-img-box {
    width: 3.4rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 0.12rem;
    overflow: hidden;
    background-color: #f0f3f7;
}
.news-card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.news-item-card:hover .news-card-img-box img {
    transform: scale(1.05);
}
.news-card-info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.news-card-title {
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 0.12rem;
}
.news-card-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.3s ease;
}
.news-card-title a:hover {
    color: #00a0e9;
}
.external-icon {
    width: 0.18rem;
    height: 0.18rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.06rem;
    color: #94a3b8;
    transition: color 0.3s ease;
}
.news-card-title a:hover .external-icon {
    color: #00a0e9;
}
/* 访问量与日期 Meta 标 */
.news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.24rem;
    font-size: 0.13rem;
    color: #94a3b8;
    margin-bottom: 0.16rem;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.06rem;
}
.meta-icon {
    width: 0.16rem;
    height: 0.16rem;
}
.news-card-summary {
    font-size: 0.13rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 响应式 Mobile 适配 */
@media (max-width: 768px) {
    .news-hero-section {
        height: 3.6rem;
    }
    .news-main-title {
        font-size: 0.28rem;
    }
    .news-item-card {
        flex-direction: column;
        gap: 0.16rem;
    }
    .news-card-img-box {
        width: 100%;
        height: 2rem;
    }
    .news-card-title {
        font-size: 0.18rem;
    }
}
/* ==========================================================================
新闻详情页 (News Detail Article Section)
========================================================================== */
.news-detail-section {
    width: 100vw;
    background-color: #ffffff;
    padding: 0.8rem 0 1.2rem;
}
.news-detail-container {
    width: 100%;
    max-width: 14rem;
    /* 居中阅读最佳宽度 */
    margin: 0 auto;
    padding: 0 0.3rem;
}
/* 1. 文章头部 */
.article-header {
    text-align: center;
    margin-bottom: 0.4rem;
}
.article-title {
    font-size: 0.32rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.24rem;
    letter-spacing: -0.01em;
}
.article-meta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.36rem;
    font-size: 0.14rem;
    color: #94a3b8;
}
.article-meta-bar .meta-item {
    display: flex;
    align-items: center;
    gap: 0.08rem;
}
.article-meta-bar .meta-item svg {
    width: 0.18rem;
    height: 0.18rem;
    fill: currentColor;
}
/* 2. 主体大图 */
.article-featured-image {
    width: 100%;
    max-height: 4.8rem;
    border-radius: 0.16rem;
    overflow: hidden;
    margin-bottom: 0.48rem;
    box-shadow: 0 0.12rem 0.32rem rgba(15, 23, 42, 0.06);
}
.article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 3. 文章富文本内容排版 */
.article-body-content {
    font-size: 0.15rem;
    line-height: 1.85;
    color: #334155;
}
.article-body-content p {
    margin-bottom: 0.2rem;
    text-align: justify;
}
.article-body-content .section-lead {
    font-weight: 600;
    color: #1e293b;
    margin-top: 0.28rem;
    margin-bottom: 0.12rem;
}
/* 有序列表 */
.article-body-content .custom-num-list {
    padding-left: 0.2rem;
    margin-bottom: 0.24rem;
}
.article-body-content .custom-num-list li {
    font-size: 0.14rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 0.04rem;
}
.article-body-content .caption-note {
    font-size: 0.13rem;
    color: #64748b;
    margin-top: 0.12rem;
    margin-bottom: 0.24rem;
}
/* 移动端响应式 */
@media (max-width: 768px) {
    .article-title {
        font-size: 0.22rem;
    }
    .article-meta-bar {
        gap: 0.16rem;
        font-size: 0.12rem;
    }
    .article-featured-image {
        max-height: 2.6rem;
        border-radius: 0.12rem;
    }
}
/* 上下一篇翻页控制（左右两端对齐布局） */
.article-pagination-box {
    margin-top: 0.6rem;
    padding-top: 0.36rem;
    border-top: 0.01rem solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
}
/* 左侧：上一篇 / 下一篇 链接组 */
.pagination-left-group {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1;
}
.pagination-link {
    display: flex;
    align-items: baseline;
    font-size: 0.14rem;
    line-height: 1.6;
}
.pagination-link .p-label {
    color: #475569;
    flex-shrink: 0;
}
.pagination-link a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.3s ease;
}
.pagination-link a:hover {
    color: #00a0e9;
}
.pagination-link .p-null {
    color: #94a3b8;
}
/* 右侧：蓝色胶囊型返回列表按钮 */
.pagination-right-btn {
    flex-shrink: 0;
}
.btn-back-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.28rem;
    background-color: #00a0e9;
    color: #ffffff !important;
    font-size: 0.14rem;
    font-weight: 500;
    border-radius: 0.25rem;
    text-decoration: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 160, 233, 0.25);
}
.btn-back-list:hover {
    background-color: #008cd1;
    box-shadow: 0 0.06rem 0.16rem rgba(0, 160, 233, 0.35);
    transform: translateY(-0.02rem);
}
/* 移动端适配：竖向堆叠 */
@media (max-width: 768px) {
    .article-pagination-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.24rem;
    }
    .pagination-right-btn {
        width: 100%;
    }
    .btn-back-list {
        width: 100%;
        text-align: center;
    }
}
.p-list-grid-wrapper {
    padding: 0;
}
/* ==========================================================================
   新闻/技术文档正文排版增强 + SEO 组件样式（2026-11）
   - 目的：长文可读性、结构化（h2/h3/列表/表格/引用），同时利于搜索引擎与
     AI 生成式引擎抽取内容
   ========================================================================== */
/* 1. 面包屑 */
.article-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.06rem;
    font-size: 0.13rem;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}
.article-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.25s;
}
.article-breadcrumb a:hover {
    color: #00a0e9;
}
.article-breadcrumb .bc-sep {
    color: #cbd5e1;
    margin: 0 0.02rem;
}
.article-breadcrumb .bc-current {
    color: #94a3b8;
}
/* 2. 摘要卡片 */
.article-summary {
    position: relative;
    background: linear-gradient(90deg, #f0f8fe, #f8fbfe);
    border-left: 0.04rem solid #00a0e9;
    border-radius: 0 0.1rem 0.1rem 0;
    padding: 0.2rem 0.24rem;
    margin: 0 0 0.36rem;
}
.article-summary .as-label {
    display: inline-block;
    font-size: 0.12rem;
    font-weight: 600;
    color: #0072c6;
    background: rgba(0, 160, 233, 0.1);
    border-radius: 0.04rem;
    padding: 0.02rem 0.1rem;
    margin-bottom: 0.1rem;
    letter-spacing: 0.02em;
}
.article-summary p {
    font-size: 0.145rem;
    line-height: 1.8;
    color: #475569;
    margin: 0;
    text-align: justify;
}
/* 3. 正文标题层级 */
.article-body-content h2 {
    font-size: 0.21rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
    margin: 0.5rem 0 0.18rem;
    padding-left: 0.16rem;
    border-left: 0.05rem solid #00a0e9;
}
.article-body-content h3 {
    font-size: 0.17rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
    margin: 0.34rem 0 0.12rem;
}
.article-body-content h4 {
    font-size: 0.155rem;
    font-weight: 600;
    color: #334155;
    margin: 0.24rem 0 0.08rem;
}
.article-body-content h2:first-child,
.article-body-content h3:first-child {
    margin-top: 0;
}
/* 4. 列表 */
.article-body-content ul,
.article-body-content ol {
    margin: 0 0 0.24rem;
    padding-left: 0.3rem;
}
.article-body-content ul {
    list-style: none;
    padding-left: 0.26rem;
}
.article-body-content ul > li {
    position: relative;
    font-size: 0.148rem;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 0.08rem;
}
.article-body-content ul > li::before {
    content: "";
    position: absolute;
    left: -0.18rem;
    top: 0.11rem;
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    background: #00a0e9;
}
.article-body-content ol > li {
    font-size: 0.148rem;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 0.08rem;
    padding-left: 0.04rem;
}
.article-body-content ol > li::marker {
    color: #00a0e9;
    font-weight: 600;
}
/* 5. 引用 / 强调 */
.article-body-content blockquote {
    margin: 0.28rem 0;
    padding: 0.18rem 0.24rem;
    background: #f8fafc;
    border-left: 0.04rem solid #cbd5e1;
    border-radius: 0 0.08rem 0.08rem 0;
    color: #475569;
    font-size: 0.145rem;
    line-height: 1.8;
}
.article-body-content blockquote p:last-child {
    margin-bottom: 0;
}
.article-body-content strong,
.article-body-content b {
    color: #0f172a;
    font-weight: 600;
}
.article-body-content em {
    color: #0072c6;
    font-style: normal;
}
.article-body-content a {
    color: #0072c6;
    text-decoration: none;
    border-bottom: 0.01rem dashed rgba(0, 114, 198, 0.45);
    transition: color 0.25s, border-color 0.25s;
}
.article-body-content a:hover {
    color: #00a0e9;
    border-bottom-color: #00a0e9;
}
/* 6. 表格 */
.article-body-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.24rem 0 0.32rem;
    font-size: 0.138rem;
    line-height: 1.6;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-body-content table th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    padding: 0.12rem 0.14rem;
    border: 0.01rem solid #e2e8f0;
    white-space: nowrap;
}
.article-body-content table td {
    padding: 0.11rem 0.14rem;
    border: 0.01rem solid #e2e8f0;
    color: #475569;
}
.article-body-content table tr:nth-child(even) td {
    background: #fafcfe;
}
.article-body-content table tr:hover td {
    background: #f0f8fe;
}
.article-body-content table caption {
    caption-side: bottom;
    font-size: 0.13rem;
    color: #94a3b8;
    padding-top: 0.08rem;
    text-align: left;
}
/* 7. 图片与图注 */
.article-body-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.28rem auto;
    border-radius: 0.1rem;
    box-shadow: 0 0.08rem 0.24rem rgba(15, 23, 42, 0.08);
}
.article-body-content figure {
    margin: 0.28rem 0;
}
.article-body-content figure img {
    margin-bottom: 0.1rem;
}
.article-body-content figcaption {
    font-size: 0.128rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.6;
}
/* 8. 分隔线 / 代码 */
.article-body-content hr {
    border: none;
    height: 0.01rem;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0.4rem 0;
}
.article-body-content code {
    background: #f1f5f9;
    color: #0b6fa4;
    font-size: 0.9em;
    padding: 0.02rem 0.06rem;
    border-radius: 0.03rem;
    font-family: Consolas, Monaco, monospace;
}
.article-body-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.18rem 0.2rem;
    border-radius: 0.08rem;
    overflow-x: auto;
    font-size: 0.13rem;
    line-height: 1.7;
    margin: 0.24rem 0;
}
.article-body-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}
/* 9. 正文首段 */
.article-body-content > p:first-of-type {
    font-size: 0.155rem;
    color: #334155;
}
/* 10. 相关阅读 */
.article-related {
    margin-top: 0.6rem;
    padding-top: 0.36rem;
    border-top: 0.01rem solid #e8eef4;
}
.article-related .related-title {
    font-size: 0.18rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.18rem;
    padding-left: 0.14rem;
    border-left: 0.04rem solid #00a0e9;
}
.article-related .related-list {
    display: grid;
    gap: 0.1rem;
}
.article-related .related-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.16rem;
    padding: 0.14rem 0.18rem;
    background: #f8fafc;
    border-radius: 0.08rem;
    text-decoration: none;
    transition: background 0.25s, transform 0.25s;
}
.article-related .related-item:hover {
    background: #f0f8fe;
    transform: translateX(0.04rem);
}
.article-related .related-item-title {
    font-size: 0.145rem;
    color: #1e293b;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.article-related .related-item:hover .related-item-title {
    color: #0072c6;
}
.article-related .related-item-date {
    font-size: 0.125rem;
    color: #94a3b8;
    flex: none;
}
/* 11. 文末转化位 */
.article-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.24rem;
    margin-top: 0.44rem;
    padding: 0.26rem 0.3rem;
    background: linear-gradient(120deg, #06283d, #0b3a57 60%, #0d4a6e);
    border-radius: 0.12rem;
}
.article-cta .cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
}
.article-cta .cta-text strong {
    font-size: 0.16rem;
    color: #ffffff;
    font-weight: 600;
}
.article-cta .cta-text span {
    font-size: 0.13rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
}
.article-cta .cta-btn {
    flex: none;
    font-size: 0.14rem;
    font-weight: 600;
    color: #06283d;
    background: #ffffff;
    border-radius: 0.06rem;
    padding: 0.11rem 0.24rem;
    text-decoration: none;
    transition: background 0.25s, transform 0.25s;
}
.article-cta .cta-btn:hover {
    background: #c9eafd;
    transform: translateY(-0.01rem);
}
/* 12. 移动端适配 */
@media (max-width: 768px) {
    .article-body-content h2 {
        font-size: 0.19rem;
        margin-top: 0.4rem;
    }
    .article-body-content h3 {
        font-size: 0.165rem;
    }
    .article-body-content table {
        font-size: 0.13rem;
    }
    .article-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.16rem;
    }
    .article-cta .cta-btn {
        width: 100%;
        text-align: center;
    }
    .article-related .related-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.04rem;
    }
}
/* ==========================================================================
   产品详情页 · 新版视觉系统（pdp-v4 · 白底蓝调编辑式）
   设计来源：用户提供设计稿（白 + 品牌蓝 / 衬线标题 / 编号章节）
   结构：Hero → 信任条 → 01 产品介绍 → 02 规格参数 → 03 技术资料
         → 04 产品特点 → 05 质量与可核验信息 → 06 常见问题(沿用旧 FAQ) → 07 相关产品
   命名统一前缀 .pdp- 以避免与主题既有 .btn/.section/.wrap 等类冲突。
   说明：本站 html 基准为 100px=1rem，本页全部使用 px，不受该缩放影响。
   ========================================================================== */
.pdp {
    --pdp-blue: #1157c9;
    --pdp-blue-deep: #0a448f;
    --pdp-blue-bright: #2b7ae8;
    --pdp-blue-soft: #eaf3ff;
    --pdp-blue-line: #d5e5fa;
    --pdp-ink: #0c2a55;
    --pdp-steel: #5b7291;
    --pdp-line: #e2ecf8;
    --pdp-paper-2: #f5f9ff;
    --pdp-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'STSong', 'SimSun', serif;
    --pdp-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    --pdp-ease: cubic-bezier(.16, 1, .3, 1);
    --pdp-w: 1600px;
    position: relative;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    color: var(--pdp-ink);
    font-family: var(--pdp-sans);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
.pdp *,
.pdp *::before,
.pdp *::after {
    box-sizing: border-box;
}
.pdp img {
    display: block;
    max-width: 100%;
}
.pdp a {
    color: inherit;
    text-decoration: none;
}
.pdp-wrap {
    max-width: var(--pdp-w);
    margin: 0 auto;
    padding: 0 32px;
}
/* ---------------- Hero ---------------- */
.pdp-hero {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-bottom: 1px solid var(--pdp-blue-line);
    overflow: hidden;
}
.pdp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 87, 201, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 87, 201, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 25%, transparent 100%);
    pointer-events: none;
}
.pdp-hero::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -30%;
    width: 56vw;
    height: 56vw;
    max-width: 760px;
    max-height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 122, 232, .14) 0%, rgba(43, 122, 232, .05) 45%, transparent 70%);
    pointer-events: none;
}
.pdp-hero .pdp-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 60px;
    align-items: center;
    padding-top: 152px;
    padding-bottom: 92px;
}
/* 面包屑 */
.pdp-crumb {
    font-size: 13px;
    color: #5a7194;
    letter-spacing: 1px;
    margin-bottom: 30px;
    gap: 0;
}
.pdp-crumb a:hover {
    color: var(--pdp-blue);
}
.pdp-crumb span.sep {
    margin: 0 6px;
    color: #a9bfd8;
}
.pdp-crumb em {
    font-style: normal;
    color: var(--pdp-blue);
}
/* 徽标胶囊 */
.pdp-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--pdp-blue);
    border: 1px solid var(--pdp-blue-line);
    background: var(--pdp-blue-soft);
    padding: 8px 18px;
    margin-bottom: 26px;
}
.pdp-tag i {
    width: 6px;
    height: 6px;
    background: var(--pdp-blue);
    border-radius: 50%;
    animation: pdp-pulse 2.4s infinite;
}
@keyframes pdp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}
.pdp-hero h1 {
    font-family: var(--pdp-serif);
    font-weight: 900;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.24;
    letter-spacing: 1px;
    color: var(--pdp-ink);
    margin: 0;
}
.pdp-hero h1 .thin {
    display: block;
    margin-top: 8px;
    font-size: .52em;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--pdp-blue);
}
.pdp-hero-sub {
    margin: 24px 0 0;
    font-size: 16.5px;
    color: var(--pdp-steel);
    max-width: 40em;
    line-height: 2;
}
/* 三个核心规格 */
.pdp-specs {
    display: flex;
    margin-top: 42px;
    border-top: 1px solid var(--pdp-blue-line);
    border-bottom: 1px solid var(--pdp-blue-line);
}
.pdp-spec {
    flex: 1;
    min-width: 0;
    padding: 20px 12px 20px 0;
}
.pdp-spec + .pdp-spec {
    padding-left: 26px;
    border-left: 1px solid var(--pdp-blue-line);
}
.pdp-spec b {
    display: block;
    font-family: var(--pdp-serif);
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 700;
    color: var(--pdp-ink);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    /* 中文按词换行，避免把「TA1（工业纯钛，Ti≥99.9%）」逐字拆成三行 */
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
/* 存在长规格值时整组统一降一档字号，三格视觉一致且不易拆行 */
.pdp-specs.is-compact .pdp-spec b {
    font-size: clamp(16px, 1.55vw, 20px);
    line-height: 1.5;
    letter-spacing: .2px;
}
.pdp-spec span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #5a7194;
    letter-spacing: 2px;
}
/* 按钮 */
.pdp-actions {
    display: flex;
    gap: 14px;
    margin-top: 38px;
    flex-wrap: wrap;
}
.pdp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pdp-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 15px 32px;
    border: 1px solid transparent;
    transition: all .35s var(--pdp-ease);
    cursor: pointer;
}
/* 选择器带 .pdp a 前缀，特异度 (0,2,1) 高于全局 .pdp a{color:inherit} (0,1,1)，
   避免按钮文字色被继承色覆盖（曾导致蓝底深蓝字 / 白底白字）。 */
.pdp a.pdp-btn-primary {
    background: var(--pdp-blue);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(17, 87, 201, .75);
}
.pdp a.pdp-btn-primary:hover {
    background: var(--pdp-blue-deep);
    color: #fff;
    transform: translateY(-2px);
}
.pdp a.pdp-btn-ghost {
    border-color: var(--pdp-blue-line);
    color: var(--pdp-blue);
    background: #fff;
}
.pdp a.pdp-btn-ghost:hover {
    border-color: var(--pdp-blue);
    color: var(--pdp-blue-deep);
    background: var(--pdp-blue-soft);
}
/* 内容元信息（E-E-A-T：责任与时效） */
.pdp-meta {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--pdp-blue-line);
    font-size: 12.5px;
    color: #4a6387;
    line-height: 2.1;
    letter-spacing: .3px;
}
.pdp-meta b {
    color: var(--pdp-ink);
    font-weight: 500;
}
.pdp-meta em {
    font-style: normal;
    color: #b9c9dc;
    margin: 0 8px;
}
/* 右侧产品图 */
.pdp-visual {
    position: relative;
    display: grid;
    place-items: center;
}
.pdp-visual .ring {
    position: absolute;
    width: 112%;
    aspect-ratio: 1;
    border: 1px solid var(--pdp-blue-line);
    border-radius: 50%;
    pointer-events: none;
}
.pdp-visual .ring:nth-of-type(2) {
    width: 86%;
    border-style: dashed;
}
.pdp-visual-frame {
    position: relative;
    width: 100%;
    max-width:680px;
    background: #fff;
    border: 1px solid var(--pdp-blue-line);
    padding: 10px;
    box-shadow: 0 34px 56px -34px rgba(17, 87, 201, .45);
}
.pdp-visual-frame img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}
.pdp-fig-label {
    position: absolute;
    bottom: 22px;
    right: 22px;
    font-size: 12px;
    color: #5a7194;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--pdp-blue-line);
    padding: 4px 12px;
}
/* ---------------- 信任条 ---------------- */
.pdp-trust {
    background: #fff;
    border-bottom: 1px solid var(--pdp-blue-line);
}
.pdp-trust .pdp-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--pdp-line);
    padding: 0;
    max-width: var(--pdp-w);
}
.pdp-trust-item {
    background: #fff;
    padding: 30px 16px;
    text-align: center;
    transition: background .35s var(--pdp-ease);
}
.pdp-trust-item:hover {
    background: var(--pdp-paper-2);
}
.pdp-trust-item svg {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    stroke: var(--pdp-blue);
    stroke-width: 1.4;
    fill: none;
}
.pdp-trust-item b {
    display: block;
    font-family: var(--pdp-serif);
    font-size: 20px;
    margin-top: 12px;
    letter-spacing: 1px;
    color: var(--pdp-ink);
}
.pdp-trust-item span {
    display: block;
    font-size: 12px;
    color: var(--pdp-steel);
    letter-spacing: .5px;
    line-height: 1.7;
}
/* ---------------- 章节通用 ---------------- */
.pdp-sec {
    padding: 100px 0;
    border-top: 1px solid var(--pdp-line);
}
.pdp-hero + .pdp-trust + .pdp-sec {
    border-top: none;
}
.pdp-sec-head {
    display: flex;
    align-items: baseline;
    gap: 26px;
    margin-bottom: 54px;
}
.pdp-sec-num {
    font-family: var(--pdp-serif);
    font-size: clamp(44px, 5.4vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #c9def8;
    flex-shrink: 0;
}
.pdp-sec-title h2 {
    font-family: var(--pdp-serif);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.3;
    color: var(--pdp-ink);
    margin: 0;
}
.pdp-sec-title h2 i {
    font-style: normal;
    color: var(--pdp-blue);
}
.pdp-sec-title p {
    color: #5a7194;
    font-size: 12.5px;
    letter-spacing: 3px;
    margin: 8px 0 0;
    text-transform: uppercase;
}
.pdp-sec-rule {
    flex: 1;
    height: 1px;
    background: var(--pdp-blue-line);
    align-self: center;
    min-width: 40px;
}
.pdp-cap-note {
    margin-top: 22px;
    font-size: 12.5px;
    color: var(--pdp-steel);
    line-height: 2;
}
.pdp-cap-note b {
    color: var(--pdp-ink);
    font-weight: 600;
}
/* ---------------- 01 产品介绍 ---------------- */
.pdp-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.pdp-lede {
    font-family: var(--pdp-serif);
    font-size: clamp(20px, 1.9vw, 25px);
    font-weight: 700;
    line-height: 1.95;
    letter-spacing: .5px;
    margin: 0;
    color: var(--pdp-ink);
}
.pdp-lede em {
    font-style: normal;
    color: var(--pdp-blue);
    font-weight: 700;
    white-space: nowrap;
}
.pdp-quote {
    margin-top: 32px;
    padding-left: 22px;
    border-left: 3px solid var(--pdp-blue);
    color: var(--pdp-ink);
    font-family: var(--pdp-serif);
    font-size: 16.5px;
    line-height: 2;
}
.pdp-src-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}
.pdp-src-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--pdp-steel);
    line-height: 2;
    margin-bottom: 4px;
}
.pdp-src-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background: var(--pdp-blue);
}
.pdp-src-list a {
    color: var(--pdp-blue);
    border-bottom: 1px solid var(--pdp-blue-line);
}
.pdp-intro-body {
    color: var(--pdp-steel);
    font-size: 15.5px;
    line-height: 2.05;
}
.pdp-intro-body p {
    margin: 0 0 1.25em;
}
.pdp-intro-body strong {
    color: var(--pdp-ink);
    font-weight: 600;
}
/* ---------------- 02 规格参数 / 表格 ---------------- */
.pdp-table-shell {
    background: #fff;
    border: 1px solid var(--pdp-line);
    box-shadow: 0 18px 40px -34px rgba(12, 42, 85, .5);
}
.pdp-table-shell + .pdp-table-shell {
    margin-top: 48px;
}
.pdp-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 32px;
    border-bottom: 1px solid var(--pdp-line);
    background: linear-gradient(90deg, var(--pdp-blue-soft) 0%, #ffffff 70%);
}
.pdp-table-head h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pdp-serif);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--pdp-ink);
    margin: 0;
}
.pdp-table-head h3::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--pdp-blue);
    flex-shrink: 0;
}
.pdp-table-head span {
    font-size: 12px;
    color: #5a7194;
    letter-spacing: 1.5px;
    text-align: right;
}
.pdp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.pdp-table th {
    font-weight: 500;
    text-align: left;
    color: #587199;
    letter-spacing: 1px;
    padding: 14px 18px;
    background: var(--pdp-paper-2);
    border-bottom: 1px solid var(--pdp-line);
    font-size: 13px;
    white-space: nowrap;
}
.pdp-table thead th {
    padding: 14px 32px;
}
.pdp-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--pdp-line);
    color: var(--pdp-ink);
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}
.pdp-table thead th + th,
.pdp-table thead th:first-child {
    padding-left: 32px;
}
.pdp-table tbody td:first-child {
    padding-left: 32px;
}
.pdp-table tbody td:last-child {
    padding-right: 32px;
}
.pdp-table tbody tr:last-child td {
    border-bottom: none;
}
.pdp-table tbody tr {
    transition: background .25s var(--pdp-ease);
}
.pdp-table tbody tr:hover {
    background: #f7fbff;
}
.pdp-table td b {
    font-weight: 700;
    color: var(--pdp-blue-deep);
}
.pdp-table .pdp-kv-th {
    width: 22%;
    background: #fbfdff;
    color: #587199;
    font-weight: 500;
    white-space: nowrap;
}
.pdp-src-note {
    margin: 0;
    padding: 16px 32px 20px;
    font-size: 12.5px;
    color: var(--pdp-steel);
    line-height: 2;
    background: var(--pdp-paper-2);
    border-top: 1px solid var(--pdp-line);
}
.pdp-src-note .label {
    color: var(--pdp-blue-deep);
    font-weight: 700;
    margin-right: 8px;
    letter-spacing: 1px;
}
.pdp-src-note a {
    color: var(--pdp-blue);
    border-bottom: 1px solid var(--pdp-blue-line);
}
/* ---------------- 03 技术资料（后台正文） ---------------- */
.pdp-prose {
    max-width: 980px;
    font-size: 16px;
    color: #3d5878;
    line-height: 2;
}
.pdp-prose > p {
    margin: 0 0 1.3em;
}
.pdp-prose h2 {
    position: relative;
    font-family: var(--pdp-serif);
    font-size: clamp(21px, 1.8vw, 26px);
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--pdp-ink);
    margin: 60px 0 22px;
    padding-left: 16px;
    line-height: 1.5;
}
.pdp-prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .28em;
    bottom: .28em;
    width: 4px;
    background: var(--pdp-blue);
}
.pdp-prose h2:first-child {
    margin-top: 0;
}
.pdp-prose h3 {
    font-family: var(--pdp-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--pdp-ink);
    margin: 36px 0 14px;
}
.pdp-prose p {
    margin: 0 0 1.2em;
}
.pdp-prose strong {
    color: var(--pdp-ink);
    font-weight: 600;
}
.pdp-prose a {
    color: var(--pdp-blue);
    border-bottom: 1px solid var(--pdp-blue-line);
    transition: border-color .25s var(--pdp-ease);
}
.pdp-prose a:hover {
    border-color: var(--pdp-blue);
}
.pdp-prose ul,
.pdp-prose ol {
    margin: 0 0 1.4em;
    padding-left: 0;
    list-style: none;
    counter-reset: pdp-li;
}
.pdp-prose ul li,
.pdp-prose ol li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.95;
}
.pdp-prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--pdp-blue);
}
.pdp-prose ol li {
    counter-increment: pdp-li;
}
.pdp-prose ol li::before {
    content: counter(pdp-li, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--pdp-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--pdp-blue);
    letter-spacing: .5px;
}
.pdp-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 28px;
    font-size: 14px;
    border: 1px solid var(--pdp-line);
    box-shadow: 0 16px 34px -34px rgba(12, 42, 85, .5);
}
.pdp-prose table th {
    background: linear-gradient(180deg, #f2f8ff, #eaf3ff);
    color: #33517a;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--pdp-blue-line);
    white-space: nowrap;
}
.pdp-prose table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pdp-line);
    color: #3d5878;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}
.pdp-prose table tbody tr:last-child td {
    border-bottom: none;
}
.pdp-prose table tbody tr:nth-child(even) {
    background: #fafcff;
}
.pdp-prose table tbody tr:hover {
    background: #f4faff;
}
/* ---------------- 04 产品特点 ---------------- */
.pdp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--pdp-line);
    border: 1px solid var(--pdp-line);
}
.pdp-feature {
    background: var(--pdp-paper-2);
    padding: 44px 36px;
    transition: background .4s var(--pdp-ease);
}
.pdp-feature:hover {
    background: #fff;
}
.pdp-feature .f-num {
    font-family: var(--pdp-serif);
    font-size: 13px;
    color: var(--pdp-blue);
    letter-spacing: 2.5px;
}
.pdp-feature h3 {
    font-family: var(--pdp-serif);
    font-size: 20px;
    font-weight: 700;
    margin: 14px 0 12px;
    letter-spacing: 1.5px;
    color: var(--pdp-ink);
}
.pdp-feature p {
    color: var(--pdp-steel);
    font-size: 14px;
    line-height: 1.95;
    margin: 0;
}
.pdp-feature::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    background: var(--pdp-blue);
    margin-top: 22px;
    transition: width .4s var(--pdp-ease);
}
.pdp-feature:hover::after {
    width: 68px;
}
/* ---------------- 05 质量与可核验信息（蓝色横幅） ---------------- */
.pdp-band {
    position: relative;
    padding: 96px 0;
    color: #fff;
    background: linear-gradient(125deg, var(--pdp-blue-deep) 0%, var(--pdp-blue) 55%, #2f7fe6 100%);
    overflow: hidden;
}
.pdp-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}
.pdp-band .pdp-wrap {
    position: relative;
}
.pdp-band .pdp-sec-title h2 {
    color: #fff;
}
.pdp-band .pdp-sec-title p {
    color: rgba(255, 255, 255, .72);
}
.pdp-band .pdp-sec-num {
    -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
}
.pdp-band .pdp-sec-rule {
    background: rgba(255, 255, 255, .3);
}
.pdp-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255, 255, 255, .22);
}
.pdp-adv {
    padding: 38px 30px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}
.pdp-adv:first-child {
    border-left: none;
}
.pdp-adv b {
    display: block;
    font-family: var(--pdp-serif);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}
.pdp-adv h4 {
    font-family: var(--pdp-serif);
    font-size: 16px;
    letter-spacing: 1.5px;
    margin: 14px 0 10px;
    color: #fff;
}
.pdp-adv p {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.95;
    margin: 0;
}
.pdp-verify-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}
.pdp-verify-links a {
    font-size: 13px;
    color: #e6f1ff;
    border: 1px solid rgba(255, 255, 255, .35);
    padding: 9px 16px;
    letter-spacing: 1px;
    transition: background .3s var(--pdp-ease), border-color .3s var(--pdp-ease);
}
.pdp-verify-links a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .6);
}
/* 横幅内对接信息 */
.pdp-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.pdp-contact-row .c-left {
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.9;
}
.pdp-contact-row .c-left strong {
    color: #fff;
    font-weight: 600;
}
.pdp-contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.pdp-contact-item .hotline {
    font-family: var(--pdp-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.pdp-contact-item .hotline:hover {
    color: #cfe4ff;
}
.pdp-contact-item .mail {
    font-size: 14px;
    color: #dcebff;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 2px;
}
.pdp a.pdp-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--pdp-blue);
    font-family: var(--pdp-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 13px 26px;
    transition: background .3s var(--pdp-ease), transform .3s var(--pdp-ease);
}
.pdp a.pdp-band-btn:hover {
    background: var(--pdp-blue-soft);
    color: var(--pdp-blue-deep);
    transform: translateY(-2px);
}
/* ---------------- 06 常见问题（沿用主题既有 FAQ 结构，仅约束容器宽度） ---------------- */
.pdp #pdpFaq.global-faq-section {
    width: 100%;
    padding: 100px 0;
    border-top: 1px solid var(--pdp-line);
    contain: none;
}
.pdp #pdpFaq .faq-container {
    max-width: var(--pdp-w);
    margin: 0 auto;
    padding: 0 32px;
    grid-template-columns: 300px 1fr;
    gap: 56px;
}
.pdp #pdpFaq .faq-main-title {
    font-family: var(--pdp-serif);
    letter-spacing: 1.5px;
}
/* ---------------- 07 相关产品 ---------------- */
.pdp-related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.pdp-rel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pdp-line);
    padding: 30px 26px;
    transition: all .35s var(--pdp-ease);
}
.pdp-rel:hover {
    border-color: var(--pdp-blue);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -26px rgba(17, 87, 201, .45);
}
.pdp-rel h3 {
    font-family: var(--pdp-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--pdp-ink);
    margin: 0;
    line-height: 1.5;
}
.pdp-rel .r-tag {
    display: block;
    font-size: 11.5px;
    color: var(--pdp-blue);
    letter-spacing: 1.5px;
    margin-top: 8px;
}
.pdp-rel p {
    font-size: 13px;
    color: var(--pdp-steel);
    line-height: 1.9;
    margin: 12px 0 0;
}
.pdp-rel .r-link {
    margin-top: auto;
    padding-top: 18px;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    color: var(--pdp-blue);
}
.pdp-rel:hover .r-link {
    color: var(--pdp-blue-deep);
}
/* ---------------- 进场动效 ---------------- */
.pdp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--pdp-ease), transform .8s var(--pdp-ease);
}
.pdp-reveal.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .pdp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .pdp-tag i {
        animation: none;
    }
}
/* ---------------- 响应式 ---------------- */
@media (max-width: 1100px) {
    .pdp-hero .pdp-wrap {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-top: 120px;
        padding-bottom: 72px;
    }
    .pdp-visual {
        display: none;
    }
    .pdp-trust .pdp-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
    .pdp-intro {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .pdp-features {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-adv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-adv:nth-child(3) {
        border-left: none;
    }
    .pdp-adv:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .22);
    }
    .pdp-related {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-sec {
        padding: 76px 0;
    }
    .pdp #pdpFaq.global-faq-section {
        padding: 76px 0;
    }
    .pdp #pdpFaq .faq-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@media (max-width: 640px) {
    .pdp-wrap {
        padding: 0 20px;
    }
    .pdp-hero .pdp-wrap {
        padding-top: 100px;
        padding-bottom: 56px;
    }
    .pdp-hero-sub {
        font-size: 15px;
    }
    .pdp-specs {
        flex-direction: column;
        margin-top: 30px;
    }
    .pdp-spec {
        padding: 16px 0;
    }
    .pdp-spec + .pdp-spec {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--pdp-blue-line);
    }
    .pdp-actions {
        margin-top: 28px;
    }
    .pdp-btn {
        flex: 1;
        justify-content: center;
        padding: 13px 18px;
    }
    .pdp-trust .pdp-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-features,
    .pdp-adv-grid,
    .pdp-related {
        grid-template-columns: 1fr;
    }
    .pdp-adv {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .22);
    }
    .pdp-adv:first-child {
        border-top: none;
    }
    .pdp-sec {
        padding: 60px 0;
    }
    .pdp-sec-head {
        gap: 14px;
        margin-bottom: 36px;
    }
    .pdp-sec-rule {
        display: none;
    }
    .pdp-table-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 18px 20px;
    }
    .pdp-table thead th {
        padding: 12px 16px;
    }
    .pdp-table thead th:first-child,
    .pdp-table tbody td:first-child {
        padding-left: 16px;
    }
    .pdp-table tbody td:last-child {
        padding-right: 16px;
    }
    .pdp-table td {
        padding: 12px 14px;
        font-size: 13.5px;
    }
    .pdp-table .pdp-kv-th {
        width: 34%;
        font-size: 12.5px;
    }
    .pdp-table {
        font-size: 13px;
    }
    .pdp-prose h2 {
        margin-top: 44px;
    }
    .pdp-prose table {
        display: block;
        overflow-x: auto;
    }
    .pdp-band {
        padding: 64px 0;
    }
    .pdp-contact-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .pdp-visual-frame img {
        height: 260px;
    }
    .pdp #pdpFaq .faq-container {
        padding: 0 20px;
    }
}
/* ==========================================================================
   产品页 v5 追加：应用领域 / 执行标准 / 说明行（与 pdp-v4 同一视觉系统）
   ========================================================================== */
/* ---------------- 04 应用领域 ---------------- */
.pdp-apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.pdp-app {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--pdp-line);
    padding: 44px 32px 38px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.pdp-app:hover {
    transform: translateY(-6px);
    border-color: var(--pdp-blue);
    box-shadow: 0 24px 44px -22px rgba(17, 87, 201, 0.35);
}
.pdp-app i {
    font-style: normal;
    position: absolute;
    right: 20px;
    top: 14px;
    font-family: var(--pdp-serif);
    font-size: 56px;
    font-weight: 900;
    color: var(--pdp-blue-soft);
    line-height: 1;
    transition: color 0.4s ease;
}
.pdp-app:hover i {
    color: #c8e0ff;
}
.pdp-app h4 {
    font-family: var(--pdp-serif);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
    color: var(--pdp-ink);
}
.pdp-app p {
    font-size: 14px;
    color: var(--pdp-steel);
    line-height: 1.9;
    margin: 0;
}
/* ---------------- 05 执行标准 ---------------- */
.pdp-standards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pdp-std {
    background: #ffffff;
    border: 1px solid var(--pdp-line);
    padding: 36px;
    display: flex;
    gap: 22px;
    align-items: flex-start;
    transition: border-color 0.35s ease;
}
.pdp-std:hover {
    border-color: var(--pdp-blue);
}
.pdp-std .std-code {
    font-family: var(--pdp-serif);
    font-weight: 900;
    font-size: 17px;
    color: var(--pdp-blue);
    border: 1px solid var(--pdp-blue-line);
    background: var(--pdp-blue-soft);
    padding: 6px 12px;
    white-space: nowrap;
}
.pdp-std h5 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--pdp-ink);
    margin: 0 0 6px 0;
}
.pdp-std p {
    font-size: 13px;
    color: var(--pdp-steel);
    margin: 0;
    line-height: 1.8;
}
/* ---------------- 说明行（应用/标准底部） ---------------- */
.pdp-cap-note {
    margin: 28px 0 0 0;
    font-size: 13px;
    color: var(--pdp-steel);
    line-height: 1.9;
}
.pdp-cap-note a {
    color: var(--pdp-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--pdp-blue-line);
}
.pdp-cap-note a:hover {
    border-bottom-color: var(--pdp-blue);
}
/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
    .pdp-apps {
        grid-template-columns: repeat(2, 1fr);
    }
    .pdp-standards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .pdp-apps {
        grid-template-columns: 1fr;
    }
    .pdp-app {
        padding: 34px 26px 30px;
    }
    .pdp-std {
        padding: 26px 22px;
        gap: 14px;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   2026-11-15 移动端：规格参数表横向滚动（追加规则，不改动上方既有声明）
   问题：390px 视口下多列表格被压成竖排文字、右侧列被裁切且无法滚动。
   方案：卡片作为横向滚动容器；表格按内容自然宽度撑开（内容少的
   双列表格仍铺满容器、不产生多余滚动）；标题栏与来源说明 sticky 固定左侧。
   ========================================================================== */
@media (max-width: 768px) {
    .pdp-table-shell {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #a9c2e4 #eef3fb;
    }
    .pdp-table-shell::-webkit-scrollbar {
        height: 7px;
    }
    .pdp-table-shell::-webkit-scrollbar-track {
        background: #eef3fb;
        border-radius: 4px;
    }
    .pdp-table-shell::-webkit-scrollbar-thumb {
        background: #a9c2e4;
        border-radius: 4px;
    }
    /* 内容决定表格宽度：短表格铺满，多列表格超出后即可横向滑动 */
    .pdp-table {
        width: max-content;
        min-width: 100%;
    }
    .pdp-table th,
    .pdp-table td {
        white-space: nowrap;
    }
    /* 横向滚动时标题栏与来源说明不跟着滚走 */
    .pdp-table-head,
    .pdp-src-note {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 100%;
    }
    .pdp-src-note {
        background: var(--pdp-paper-2);
    }
    /* 移动端滚动条多为 overlay（滑动时才出现），补一条常驻提示 */
    .pdp-table-shell::after {
        content: "← 左右滑动查看完整表格 →";
        display: block;
        position: sticky;
        left: 0;
        z-index: 3;
        width: 100%;
        box-sizing: border-box;
        padding: 9px 12px;
        text-align: center;
        font-size: 11.5px;
        letter-spacing: 1px;
        color: #7a8ca8;
        background: #f7fbff;
        border-top: 1px solid var(--pdp-line);
    }
}