/* ============================================================
   index_scroll.css —— 首页卷轴式整屏滚动（2026-09-05）
   原理：CSS scroll-snap 整屏吸附 + Ken Burns 背景动画
   只影响 .scroll- 前缀类名，不污染其它页面
   ============================================================ */

/* ---------- 卷轴容器：滚一下吸到下一屏 ---------- */
.scroll-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;   /* 2026-09-17：产品中心已回滚为单屏「缩略图 + 背景切换」，snap 恢复 mandatory（滚一下必吸一屏，7 屏手感一致） */
    scroll-behavior: smooth;
}

/* ---------- 单屏：一整屏高，滚动对齐 ---------- */
.scroll-screen {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    color: #fff;
}

/* ---------- Ken Burns 动态背景：缓慢缩放平移，20 秒循环 ---------- */
.scroll-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.scroll-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kb-zoom 20s ease-in-out infinite alternate;
    will-change: transform;
}

/* 首屏专属运镜：缓慢放大 → 缓慢缩小 → 循环（对称呼吸式 Ken Burns）
   2026-09-13 修复：改用图片 + CSS 对称动画，去掉视频（视频循环时瞬间跳回导致"迅速缩小"）
   首屏顶部被 fixed 导航遮 189px，cover 裁剪点下移到 10% 让顶部尽量少裁；
   运镜去掉纵向 translate，避免上下裁切。 */
.scroll-hero .scroll-bg img {
    animation: kb-hero 24s ease-in-out infinite;
    object-position: center 10%;
}

/* 首屏专属遮罩：用户要求不遮 */
.scroll-hero .scroll-mask {
    background: transparent;
}

@keyframes kb-hero {
    0%   { transform: scale(1.0) translate(0, 0); }
    50%  { transform: scale(1.12) translate(-3.2%, 0); }
    100% { transform: scale(1.0) translate(0, 0); }
}

@keyframes kb-zoom {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

/* 深色遮罩：覆盖背景保证文字可读
   2026-09-13：用户要求去掉暗色处理，临时透明
   2026-09-14：第 2 屏（关于中达）暗化也按用户要求去掉，改用文字描边/阴影 */
.scroll-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
}

.scroll-screen[data-index="1"] .scroll-mask {
    background: transparent;
}

/* ---------- 内容层：浮在背景与遮罩之上 ---------- */
.scroll-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

/* ---------- 入场动画：滚到该屏时内容上浮 ---------- */
.scroll-content .fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.scroll-screen.active .fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* 逐个延迟，形成层次感 */
.scroll-screen.active .fade-up:nth-child(1) { transition-delay: 0.1s; }
.scroll-screen.active .fade-up:nth-child(2) { transition-delay: 0.3s; }
.scroll-screen.active .fade-up:nth-child(3) { transition-delay: 0.5s; }
.scroll-screen.active .fade-up:nth-child(4) { transition-delay: 0.7s; }
.scroll-screen.active .fade-up:nth-child(5) { transition-delay: 0.9s; }

/* ---------- 右侧导航圆点（桌面端显示）---------- */
.scroll-dots {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scroll-dots a {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    transition: all 0.3s;
    display: block;
}

.scroll-dots a.on {
    background: #fff;
    transform: scale(1.35);
}

/* ---------- 每屏文案样式 ---------- */
.scroll-screen .en-title {
    font-size: 0.22rem;
    letter-spacing: 6px;
    opacity: 0.75;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.scroll-screen .cn-title {
    font-size: 0.52rem;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 28px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.scroll-screen .line {
    width: 70px;
    height: 3px;
    background: #c7000b;
    margin: 0 auto 30px;
}

/* 视觉隐藏的章节标题（2026-09-14 新增）
   用途：屏内大标题按设计需要隐去时，保留 h2 语义给搜索引擎和读屏软件，
   完全脱离排版流、不占位、不可见。不要用于需要显示的文字。 */
.scroll-screen .sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scroll-screen .des {
    max-width: 820px;
    margin: 0 auto;
    font-size: 0.16rem;
    line-height: 0.34rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ---------- 首屏主视觉 ---------- */
.scroll-hero .cn-title {
    font-size: 0.72rem;
    letter-spacing: 8px;
}

.scroll-hero .des {
    font-size: 0.2rem;
    letter-spacing: 2px;
}

.scroll-hero .scroll-btn {
    display: inline-block;
    margin-top: 44px;
    padding: 14px 52px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-size: 0.17rem;
    letter-spacing: 4px;
    transition: all 0.3s;
}

.scroll-hero .scroll-btn:hover {
    background: #c7000b;
    border-color: #c7000b;
}

/* ---------- 首屏向下箭头（呼吸动画）---------- */
.scroll-down {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.12rem;
    letter-spacing: 2px;
    animation: scroll-bounce 2s infinite;
}

@keyframes scroll-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

/* ---------- 产品/品质/服务卡片区 ---------- */
.scroll-cards {
    display: flex;
    gap: 26px;
    justify-content: center;
    margin-top: 40px;
}

.scroll-card {
    position: relative;
    width: 340px;
    height: 240px;
    overflow: hidden;
    border-radius: 4px;
}

.scroll-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* 卡片底部文字条 */
.scroll-card .card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
    text-align: left;
    font-size: 0.18rem;
}

/* ---------- 产品屏卡片：无外框缩略图（2026-09-14 统一风格）----------
   用户要求：产品中心缩略图与品质管控/服务领域风格统一，去掉外框。
   方案：去掉玻璃底+边框，图片直接铺满（multiply 溶入深色背景），
   文字改为底部渐变遮罩叠加（与 .q-thumb 一致）。 */
.scroll-card-light {
    background: transparent;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* 4 分类卡片容器：卡片 220x160（2026-09-14 与品质管控 q-thumb 统一尺寸） */
.scroll-cards-cat {
    gap: 20px;
}

.scroll-cards-cat .scroll-card {
    width: 220px;
    height: 160px;
}

.scroll-card-light:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.scroll-card-light .card-img {
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
}

.scroll-card-light .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 与品质管控一致，直接铺满（原 contain 完整显示） */
    mix-blend-mode: multiply; /* 浅色底溶入深色背景，只留产品 */
    transition: transform 0.5s ease;
}

.scroll-card-light:hover .card-img img {
    transform: scale(1.08);
}

/* 文字条：与品质/服务缩略图一致，底部渐变遮罩叠加（与 .q-thumb-name 相同） */
.scroll-card-light .card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff;
    font-size: 0.15rem;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 品质管控屏：缩略图横排 + 悬停切换整屏背景 ----------
   缩略图直接用各品质体系子页的 banner 大图（1920px+），
   卡片小图 object-fit:cover 裁切显示；
   悬停时整屏背景切换为对应大图（见 JS），移出恢复默认
   2026-09-13：缩略图放大（品质 200x132→220x160；服务 200x132→200x160）*/
.scroll-thumbs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.q-thumb {
    position: relative;
    width: 200px;
    height: 132px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ---- 三屏布局：标题偏上、缩略图放大且下移（2026-09-13）----
   scroll-content 改为 flex 列，标题靠上，缩略图区 margin-top:auto 推到下方 */
#productScreen .scroll-content,
#qualityScreen .scroll-content,
#fieldsScreen .scroll-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 82vh;
    /* 2026-09-14 第三轮：padding-top 由固定 160px 改为"随视口自适应"的算式。
       原理：内容块在整屏内垂直居中 → 标题顶部 = (100vh - min-height) / 2 + padding-top。
       本组 min-height = 82vh，把上式代入并令"标题顶部 = 2.1rem"（导航 1.9rem + 0.2rem 间隙）
       解得：padding-top = 2.1rem - 9vh。这样无论视口多高、多宽（站内 rem 随宽度缩放），
       标题顶部永远落在导航下沿 0.2rem 处，与「关于中达」屏严格对齐。
       注意：缩略图区是 margin-top:auto 钉在内容块底部，min-height 未动 →
       缩略图位置完全不变，只有标题（及标题所在的那一行）在动。
       若想整体微调高度，只改 2.1rem 这个数（越大标题越低）。 */
    padding-top: calc(2.1rem - 9vh);
}

/* 缩略图/卡片区推到下半部分，按钮紧随其后
   2026-09-13 晚：产品卡片区 margin-bottom 24px → 8px，卡片更贴底 */
#productScreen .scroll-cards-cat,
#qualityScreen .scroll-thumbs {
    margin-top: auto;
    margin-bottom: 8px;
}

/* 产品中心卡片：2026-09-14 已与品质管控统一为 220x160（见 .scroll-cards-cat .scroll-card） */

/* 品质缩略图放大（5 张）：200x132 → 220x160 */
#qualityScreen .q-thumb {
    width: 220px;
    height: 160px;
}

/* 第 4 屏 品质管控：缩略图区整体下移（2026-09-14 二次调整）
   原理：本屏 .scroll-content 是 flex 列（justify-content:flex-start），
   缩略图靠 margin-top:auto 钉在内容块底部；加大 min-height 会让整个内容块
   向下延伸（父级 .scroll-screen 垂直居中，多出的高度主要向下走），
   缩略图随之下移。数值越大越靠下，改这一个数字即可调整位置。
   82vh（原始）→ 88vh（含标题版）→ 92vh（标题与屏底小字都移除后）。 */
#qualityScreen .scroll-content {
    min-height: 92vh;
    /* 2026-09-14 第三轮：本屏 min-height 是 92vh（比上面那组的 82vh 高），
       内容块顶部更靠近屏幕顶，补偿量要小一些。同样令"标题顶部 = 2.1rem"：
       标题顶部 = (100vh - 92vh)/2 + padding-top = 2.1rem
       → padding-top = 2.1rem - 4vh。与 newsScreen 同值，两屏标题齐平。 */
    padding-top: calc(2.1rem - 4vh);
}

/* 服务领域：2026-09-18 改为图标卡片幕墙，旧的竖分栏/底部胶囊规则已删除（见下方 .fld-wall） */

.q-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.q-thumb .q-thumb-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff;
    font-size: 0.15rem;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-thumb:hover {
    transform: translateY(-8px);
    border-color: #c7000b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

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

/* ============================================================
   服务领域（2026-09-18 第四版 / 回退全屏版）：整屏背景 + 卡片幕墙
   ------------------------------------------------------------
   用户要求：回到「整屏背景变化」，标题居中不偏。
     · 背景整屏铺满（inset:0），默认图 + 各行业图 hover 渐变切换，无自动轮播；
     · 标题浮在整屏上方居中（padding-top 钉在导航下沿，不偏移）；
     · 7 张行业卡片钉在整屏下部，hover 文字+图标变红、卡片小底变暗、微浮起。
   注：上一版标题"偏"是把标题锁进偏置舞台导致的，本版回到整屏即居中。
   ============================================================ */
#fieldsScreen{
    justify-content: flex-start;
}
/* 背景：整屏铺满（沿用基础 .scroll-bg 的 inset:0，这里撤掉上一版的舞台收缩） */
#fieldsScreen .scroll-bg{
    top: auto; bottom: auto; left: auto; right: auto;
    box-shadow: none;
}
/* 标题层：回到文档流、水平居中，顶位钉在导航下沿（2.1rem） */
#fieldsScreen .scroll-content{
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    z-index: 5;
    flex: 0 0 auto;
    min-height: 0;                 /* 覆盖上方 82vh 的组规则 */
    padding-top: 2.1rem;           /* 标题落在导航下沿+0.2rem（不用 calc，免被导航盖住） */
    padding-bottom: 0;
    pointer-events: none;
    text-align: center;
}

/* 卡片幕墙：钉在整屏下部，全宽居中 */
.fld-wall{
    position: absolute;
    top: auto;
    bottom: 9vh;
    left: 0; right: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 .3rem .5rem;
}
.fld-grid{
    width: 100%;
    max-width: 15rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .18rem;
}
/* 卡片（2026-09-22 改为「首页产品中心屏」同款缩略图卡片）：
   原为「SVG 线性图标 + 文字」的玻璃底卡片，现与 #productScreen 的
   .scroll-card-light 保持视觉一致 —— 缩略图铺满 + 底部渐变文字条，
   悬停浮起 + 图放大。宽度由 .fld-grid 的 7 列网格决定（版心 15rem 下约 199px/列），
   用 aspect-ratio 锁定与产品中心卡片相同的 220:160 比例。 */
.fld-card{
    position: relative;
    display: block;
    padding: 0;
    min-height: 0;
    aspect-ratio: 220 / 160;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
    box-shadow: none;
    transition: transform .35s ease, box-shadow .35s ease;
}
.fld-card .fld-img{ width: 100%; height: 100%; overflow: hidden; }
.fld-card .fld-img img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
/* 文字条：与 .scroll-card-light .card-label / .q-thumb-name 一致 */
.fld-card .fld-name{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 10px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .78));
    color: #fff;
    font-size: .15rem;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 悬停 / 激活（hover 或 JS 点亮）：卡片浮起 + 缩略图放大。
   大背景切换由页脚脚本 fShowBg 负责（hover 即切、移出复位，无自动轮播）。
   .on 仅由 JS 在 hover 时点亮；本模块已无自动轮播，故 .on 不会自己闪烁。 */
.fld-card:hover,
.fld-card.on{
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.fld-card:hover .fld-img img,
.fld-card.on .fld-img img{ transform: scale(1.08); }

/* ---------- 产品中心屏默认背景：桌面/手机双版本切换（2026-09-17） ----------
   桌面图 2560x1440（16:9）与该屏 100vh 整屏 1:1，1920x1080 / 1366x768 零裁切；
   但手机竖屏（390x844）下 cover 会横向裁掉 74%，只剩轴承一个角，且在 DPR=2 屏上
   被放大 3.25 倍偏糊。故手机端换用竖版 1080x2340（远景港口 / 虚化过渡 / 近景轴承）。
   两张图共用 .scroll-bg img 的 width/height:100% + object-fit:cover，仅 display 切换，
   手机上不下载桌面图（display:none 的 img 不发起请求）。 */
.scroll-bg img.bg-pc-mobile { display: none; }

@media (max-width: 1024px) {
    .scroll-bg img.bg-pc-desktop { display: none; }
    .scroll-bg img.bg-pc-mobile { display: block; }
}

/* 悬停切换的背景层：默认全透明，加 .show 淡入盖在默认背景上 */
.scroll-bg img.bg-switch {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.scroll-bg img.bg-switch.show {
    opacity: 1;
}

/* 切换大图时默认背景稍微压暗，增强层次
   2026-09-13：用户要求去掉暗色处理，临时禁用 */
.scroll-bg img.dim {
    filter: none;
    transition: filter 0.6s ease;
}

/* ---------- 数据条 ---------- */
.scroll-nums {
    display: flex;
    gap: 80px;
    justify-content: center;
    margin-top: 46px;
}

.scroll-num b {
    display: block;
    font-size: 0.44rem;
    font-weight: bold;
}

.scroll-num span {
    font-size: 0.14rem;
    opacity: 0.85;
    letter-spacing: 2px;
}

/* ---------- 第 2 屏（关于中达）：去掉暗化后文字增强 ----------
   背景为明亮航拍图（蓝天+浅色厂房），白色文字不明显。
   方案：正文加半透明深色底板（rgba 黑 0.55 圆角卡片）高对比呈现；
   按钮改纯红底白字；标题与其它模块统一风格（不加黑边）。2026-09-14 */

/* 正文：半透明深色底板 + 纯白字，任何明暗背景都清晰可读
   2026-09-14：收窄行宽（860px→760px）优化阅读体验 */
.scroll-screen[data-index="1"] .des {
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.18rem 0.3rem;
    max-width: 760px;
    box-sizing: border-box;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 按钮：实心红底白字，紧凑自适应宽度（与首屏"进入产品中心"风格统一）
   2026-09-14：修复按钮被拉伸成超宽长条问题，改为 inline-block 自适应 */
.scroll-screen[data-index="1"] .scroll-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 48px;
    color: #fff;
    background: #c7000b;
    border: 1px solid #c7000b;
    border-radius: 3px;
    font-size: 0.17rem;
    letter-spacing: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 14px rgba(199, 0, 11, 0.35);
    transition: all 0.3s;
}

.scroll-screen[data-index="1"] .scroll-btn:hover {
    background: #a00009;
    border-color: #a00009;
}

/* ---------- 白底屏（产品图是白底时用）---------- */
.scroll-screen.light-screen {
    color: #333;
    background: #f7f7f7;
}

.scroll-screen.light-screen .cn-title { color: #222; text-shadow: none; }
.scroll-screen.light-screen .des { color: #555; text-shadow: none; }

/* ---------- 资讯屏卡片：玻璃拟态 ---------- */
.scroll-news-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 40px;
}

.scroll-news-card {
    width: 350px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    overflow: hidden;
    text-align: left;
}

.scroll-news-card .news-img {
    height: 170px;
    overflow: hidden;
}

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

.scroll-news-card .news-txt {
    padding: 16px 18px;
}

.scroll-news-card .news-t {
    font-size: 0.17rem;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scroll-news-card .news-d {
    font-size: 0.13rem;
    opacity: 0.75;
}

/* ---------- 第 6 屏 中达资讯：与品质管控缩略图统一规格 + 整屏下移（2026-09-14）----------
   改动 1：版式套用品质屏那套（flex 列 + 缩略图区 margin-top:auto 推到底部），
           让两屏的"标题在上 / 卡片在下"节奏完全一致；
   改动 2：卡片由 350x?(170 图 + 文字块) 缩到 220x135（2026-09-14 二次缩小），
           改为「图片 + 底部渐变文字条」，边框/圆角/悬停与 #qualityScreen .q-thumb 对齐。
   调参说明：卡片大小改下面的 width 与 .news-img 的 height；
             整排上下位置改 #newsScreen .scroll-content 的 min-height（越大越靠下）。
             min-height 与第 4 屏保持同值（92vh），两屏节奏才一致。 */
#newsScreen .scroll-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 92vh;
    /* 2026-09-14 第三轮：改为与品质管控同款算式（本屏 min-height 同为 92vh），
       令「中达资讯」标题顶部 = 2.1rem = 导航下沿 + 0.2rem，四屏标题严格齐平。
       卡片区 margin-top:auto 钉底，min-height 未动 → 卡片位置不变。 */
    padding-top: calc(2.1rem - 4vh);
}

#newsScreen .scroll-news-cards {
    margin-top: auto;
    margin-bottom: 8px;
    gap: 20px;
}

.scroll-news-card {
    position: relative;
    width: 220px;              /* 2026-09-14：260 → 220（缩小） */
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.scroll-news-card .news-img {
    height: 135px;             /* 2026-09-14：160 → 135（缩小） */
}

.scroll-news-card .news-txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 8px;    /* 2026-09-14：随卡片缩小同步收紧 */
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.scroll-news-card .news-t {
    font-size: 0.13rem;        /* 2026-09-14：0.14 → 0.13rem */
    line-height: 1.35;
    margin-bottom: 2px;
}

.scroll-news-card .news-d {
    font-size: 0.105rem;       /* 2026-09-14：0.115 → 0.105rem */
    opacity: 0.85;
}

.scroll-news-card:hover {
    transform: translateY(-8px);
    border-color: #c7000b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- 首页专用：隐藏全站页脚（页脚内容已移到卷轴第 7 屏，见下方 .scroll-footer-screen）---------- */
/* 注意：此规则写在首页专用 CSS 中，仅首页引入本文件，其它页面不受影响。
   用 :has() 只命中首页 body；且 .scroll-container 内的页脚屏要保留，
   所以只隐藏 body 直接子级的 .footer-wrap（全站页脚），不动卷轴里的页脚屏 */
body:has(.scroll-container) > .footer-wrap {
    display: none;
}

/* ---------- 第 7 屏：页脚屏（2026-09-07 / 2026-09-13 更新）----------
   把全站页脚（内部导航/联系/二维码/联系表单/备案号）作为卷轴最后一屏。
   背景大图 + 深色遮罩 + 复用 footer 同款数据与样式类，数据仍走后台维护。 */
.scroll-footer-screen {
    justify-content: flex-start;   /* 内容从顶部开始排，避免挤压页脚 */
    overflow-y: auto;              /* 内容超高时屏内可滚动，防截断 */
}

/* 页脚屏背景图遮罩：恢复暗化保证文字和表单可读 */
.scroll-footer-mask {
    background: linear-gradient(to bottom,
        rgba(40, 40, 40, 0.88) 0%,
        rgba(30, 30, 30, 0.82) 50%,
        rgba(20, 20, 20, 0.90) 100%);
}

/* 复用 footer.css 的 .footer-flex 等类（第 7 屏不包裹 .footer-wrap，直接用这些子类）*/
.scroll-footer-screen .scroll-content {
    width: 100%;
    max-width: 15rem;              /* 与全站 w1500 容器宽度一致 */
    padding: 0;
    margin: 0 auto;
    text-align: left;              /* 覆盖 .scroll-content 的居中，与全站页脚一致 */
}

.scroll-footer-screen .footer-flex {
    min-height: auto;              /* 不再强制占满整屏，给地图留空间 */
    padding: 0.3rem 0 0.1rem;
}

.scroll-footer-screen .footer-icp {
    padding: 0.12rem 0;
}

/* ---- 页脚屏：二维码右上角并排（2026-09-14）---- */
.scroll-footer-screen .footer-code-box {
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    gap: 18px;
}

.scroll-footer-screen .footer-code_left,
.scroll-footer-screen .footer-code_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
}

.scroll-footer-screen .footer-code img {
    height: 0.95rem;
    width: auto;
    border-radius: 4px;
}

/* ---- 页脚屏：联系方式 + 申请引导区（2026-09-14；2026-09-15 移入地图右列）----
   原来独占一行（max-width 900px 居中）；现在挂在地图右侧那一列里，改为：
   - flex:1 占满右列剩余高度，内容垂直居中（右列高度由地图决定，不会跑出行）
   - 内部由横排改竖排（右列宽度只有 ~290~380px，横排会折成乱行） */
.footer-contact-cta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.fcf-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.fcf-cta-tel {
    font-size: 0.2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

.fcf-cta-p {
    font-size: 0.14rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    max-width: 520px;
}

/* “现在申请”按钮：与首屏“进入产品中心”同风格（红底白字、微圆角、inline-block 自适应） */
.scroll-footer-screen .footer-about-bt {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 40px;
    font-size: 0.16rem;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 3px;
    background: #c7000b;
    transition: background 0.3s;
    cursor: pointer;
    white-space: nowrap;
}

.scroll-footer-screen .footer-about-bt:hover {
    background: #a00009;
}

/* ---- 世界地图模块（2026-09-14 / v3.8 地图加大+自适应）----
   改动：
   1. .footer-dealer-map 由 max-width 1200px → 15rem（与页脚屏内容同宽，铺满）；
   2. 地图高度改为「随宽度自适应」：aspect-ratio 2:1 + clamp 保底/封顶，
      大屏地图更大、小屏不溢出；
   3. 信息栏改叠在地图下方？否——保留左右布局，但用 flex:2.6 让地图占比更大；
   4. ECharts 已有 window.resize 监听，容器尺寸变化会自动重绘。 */
.footer-dealer-map {
    max-width: 15rem;               /* 与页脚屏 .scroll-content 同宽，地图铺满内容区 */
    margin: 0.08rem auto 0;
    padding: 0.08rem 0;
}

.fdm-title {
    font-size: 0.18rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 0.1rem;
    letter-spacing: 2px;
}

.fdm-title span {
    font-size: 0.13rem;
    font-weight: normal;
    color: rgba(255,255,255,0.6);
    margin-left: 8px;
    letter-spacing: 1px;
}

.fdm-body {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

/* 右列（2026-09-15 新增）：上＝供应商信息框，下＝联系我们
   原来是「地图 + 信息框」一行、「联系我们」再独占一行 → 页脚屏内容 1018px
   超过视口 929px，底部被截断。把联系我们移进右列后整屏刚好放下。 */
.fdm-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 地图容器：宽屏铺满 + 高度随宽度自适应（世界图宽高比约 2:1）
   aspect-ratio 保证任何屏幕宽度下地图比例不变、随宽缩放；
   min-height 保底 300px（小屏不至于太小），max-height 见下。
   ⚠ 容器大 ≠ 地图大：ECharts 的 layoutSize 若写百分比是按容器短边算的，
     地图只会画到容器宽度的一半（2026-09-15 实测 50%）。
     真正的"放大"靠 index.blade.php 里的 dealerMapFitSize()（按像素算基准）。 */
.fdm-map {
    flex: 2.9;                      /* 2026-09-15：2.6 → 2.9，地图再占大一点（配合 JS 铺满） */
    aspect-ratio: 2 / 1;
    height: auto;                   /* 覆盖旧固定高度 3.6rem，改随宽度自适应 */
    min-height: 300px;
    max-height: min(54vh, 5.4rem);  /* 2026-09-15：与"页脚屏可视高度"联动。
                                       页脚屏其余部分（导航列+标题+备案号）实测约占 46vh，
                                       54vh 留给地图 → 1366/1520/1920 三种常见尺寸下
                                       「联系我们」都不再被截到屏幕外（还有 20~50px 余量）。
                                       再叠加 rem 上限，防止超高大屏把地图拉太高。 */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    overflow: hidden;
}

/* 供应商信息框（2026-09-15：不再拉满地图高度，改为"内容多高就多高"，明显缩小）
   - flex:0 1 auto  → 不主动撑满，只占自身内容高度
   - max-height 2.6rem → 经销商多时内部滚动，不会把右列撑爆
   - 空状态不再靠 .fdm-info-default 的 padding-top 撑高（见下） */
.fdm-info {
    flex: 0 1 auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 0.16rem;
    min-height: 0.8rem;             /* 空态也别只剩一条线，留个"框"的样子 */
    max-height: 2.6rem;             /* 经销商多时内部滚动，不会把右列撑爆 */
    overflow-y: auto;
    color: #fff;
}

/* flex 子项 aspect-ratio 在部分浏览器需约束宽度基数，这里显式给 min-width */
.fdm-map {
    min-width: 0;
}

.fdm-info-default {
    font-size: 0.15rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
    /* 2026-09-15：原 padding-top 2.6rem（≈258px）把右下空框撑得很高、
       视觉上"一大块空盒子"，现在信息框要缩小，这里也一并收掉，
       只留一点呼吸空间，提示文字贴近框顶。 */
    padding-top: 0.12rem;
}

.fdm-info-list .fdm-country {
    font-size: 0.18rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.1rem;
    padding-bottom: 0.08rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.fdm-info-list .fdm-dealer {
    padding: 0.1rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.12);
}

.fdm-info-list .fdm-dealer:last-child {
    border-bottom: none;
}

.fdm-dealer-name {
    font-size: 0.16rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.fdm-dealer-contact,
.fdm-dealer-email,
.fdm-dealer-address {
    font-size: 0.13rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    word-break: break-all;
}

.fcf-title {
    font-size: 0.2rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 0.12rem;
    letter-spacing: 2px;
}

/* ---------- 首页专用：双滚动条修复（2026-09-06）----------
   全站 common.css 给 body 设了 padding-top:1.75rem（给 fixed 导航避让，实际 175px）。
   卷轴首页容器已是 100vh 整屏，这 175px 变成纯多余高度 →
   页面级出现第二条滚动条、末屏还能"多滚一截"。
   用 :has() 只命中首页，抵消这条 padding；首屏自带 200px 顶部避让，导航不会压内容。 */
body:has(.scroll-container) {
    padding-top: 0 !important;
}

/* header 为 fixed 悬浮导航（黑条0.7rem+白条约1.19rem≈189px），
   body padding 清零后容器顶到视口 0，首屏避让需大于导航总高（2026-09-06 由120px上调） */
.scroll-screen.scroll-hero {
    padding-top: 200px;
}

/* ---------- 标题统一：五屏标题都钉在"导航下沿 + 0.2rem"（2026-09-14 第三轮）----------
   需求：产品中心 / 品质管控 / 服务领域 / 中达资讯 四屏的标题以前各靠各的，
   与「关于中达」屏（下面这条规则）不在同一高度。现在统一为：
      标题顶部 = 2.1rem（= 导航总高 1.9rem + 0.2rem 间隙）
   四屏靠 .scroll-content 的 padding-top 算式实现（见上面各屏注释，min-height 未动，
   缩略图/卡片位置不变）；「关于中达」屏内容块没有 min-height，改用
   「让内容块占满整屏 + 固定上内边距」，等效于把标题钉在同一高度。
   移动端（<1024px）走下面的自然排列，不受影响。 */
@media (min-width: 1024px) {
    .scroll-screen[data-index="1"] .scroll-content {
        min-height: 100vh;      /* 占满整屏 → 此块顶部即视口顶部，标题位置完全确定 */
        padding-top: 2.1rem;    /* 与其余四屏同值：导航下沿 + 0.2rem */
    }
}

/* ---------- 大屏 / 4K：地图模块自动放大（≥1921px，2026-09-15 第二轮）----------
   【为什么需要】本站根字号 = min(100px, 100vw ÷ 19.2)，1920 一到就钉死 100px，
   于是 15rem 恒等于 1500px、地图高度上限 5.4rem 恒等于 540px ——
   实测 2560 / 3440 / 3840 三档，地图绘制尺寸都停在 1037×537，2K/4K 屏上反而显小。

   【怎么改】只放大地图模块「自己」：让它突破 15rem 内容的宽度上限，向两侧扩到
   min(92vw, 2900px, 18px + 156vh) 并保持相对屏幕居中；页脚导航列、二维码、备案号
   仍是原来的 15rem（.footer-flex 是 justify-content:space-between，
   整块拉宽会把导航列拉开、二维码跑到很远，所以这轮不动它们）。

   【三个旋钮】4K 上地图多大，只由这三个数决定（改这里即可微调）：
     1) min(92vw, 2900px, 18px + 156vh) —— 地图模块最大宽度
        · 92vw        ：跟屏幕宽度走
        · 2900px      ：绝对上限（5K/6K 上不至于无限大）
        · 18px + 156vh：**跟屏幕高度走**的上限，必须有 ——
          地图框高 = 宽 ÷ 2，若只按宽度放开，矮屏（如 2560×1080、
          3440×1440）上框会变成"又宽又扁"，地图居中后左右各留一大块空白
          （实测 3440×1440 只按 92vw 时：框 2144×773，地图只占 70% 宽）。
          加上这一项后任何屏形下地图都填满框的 96% 左右。
     2) 58vh  —— 地图高度上限跟屏幕高度走（矮屏不会把"联系我们"顶出屏幕）
     3) 11rem —— 地图高度绝对上限 1100px（超高屏不会把地图拉得过高）
   地图内部 tooltip / 国界描边也会跟着地图尺寸等比放大（见 index.blade.php 的
   dealerMapScale()），否则地图大了、里面的字还是按 1920 的大小，看着别扭。

   ⚠ ≤1920 的电脑完全不受影响（这段整个不生效）。 */
@media (min-width: 1921px) {
    .footer-dealer-map {
        --fdm-w: min(92vw, 2900px, calc(18px + 156vh));
        width: var(--fdm-w);
        max-width: none;
        /* 突破父容器（15rem=1500px）并保持相对屏幕居中：
           两侧各外扩 (模块宽 - 父宽) ÷ 2；父容器本身是 margin:0 auto 居中的，
           所以这样算出来就等于"相对屏幕居中"。 */
        margin-left: calc((100% - var(--fdm-w)) / 2);
        margin-right: calc((100% - var(--fdm-w)) / 2);
    }

    .fdm-map {
        /* 高度三重上限（去掉原来固定的 5.4rem = 540px）：
           58vh              —— 跟屏幕高度走
           100vh - 420px     —— 页脚屏里"非地图部分"实测约占 377px，再留 43px 余量；
                                矮屏（如 2560×1080 超宽屏）上保证"联系我们"不被顶出屏幕
           11rem = 1100px    —— 绝对上限，超高屏不把地图拉得过高 */
        max-height: min(58vh, calc(100vh - 420px), 11rem);
    }
}

/* ---------- 移动端适配（<1024px 回退为普通滚动）---------- */
@media (max-width: 1023px) {
    .scroll-container {
        height: auto;
        overflow-y: visible;
        scroll-snap-type: none;
    }

    .scroll-screen {
        height: auto;
        min-height: 100vh;
        padding: 70px 0;
    }

    .scroll-cards {
        flex-wrap: wrap;
        gap: 16px;
    }

    .scroll-card {
        width: 46%;
        height: 200px;
    }

    /* 品质缩略图 & 产品白底卡：移动端改为行内自适应宽 */
    .scroll-thumbs {
        flex-wrap: wrap;
        gap: 14px;
    }

    .q-thumb {
        width: 44%;
        height: 110px;
    }

    .scroll-cards-cat .scroll-card {
        width: 46%;
        height: auto;
    }

    .scroll-cards-cat .card-img {
        height: auto;
    }

    /* 三屏布局下移在移动端不生效（回退为自然排列） */
    #productScreen .scroll-content,
    #qualityScreen .scroll-content,
    #fieldsScreen .scroll-content {
        min-height: auto;
        padding-top: 0;
    }

    #productScreen .scroll-cards-cat,
    #qualityScreen .scroll-thumbs {
        margin-top: 40px;
        margin-bottom: 0;
    }

    /* 服务领域（全屏版）：移动端整屏背景 + 标题居中 + 2 列卡片钉底部 */
    #fieldsScreen .scroll-bg {
        position: absolute;
        inset: 0;
        top: 0; bottom: 0; left: 0; right: 0;
        height: auto;
        margin: 0;
        box-shadow: none;
    }
    #fieldsScreen .scroll-content {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        height: auto;
        min-height: 0;
        padding-top: 1.1rem;
    }
    .fld-wall {
        position: absolute;
        inset: auto;
        top: auto; bottom: 6vh; left: 0; right: 0;
        margin-top: 0;
        padding: 0 16px;
    }
    /* 服务领域缩略图卡片：7 张用 2 列会占掉半屏高度，改 3 列（8 个格子放 7 张） */
    .fld-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .12rem;
    }
    .fld-card {
        min-height: 0;
        padding: 0;
    }
    .fld-card .fld-name {
        font-size: .13rem;
        letter-spacing: 0;
        padding: 16px 6px 6px;
    }
    .fld-card:hover,
    .fld-card.on {
        transform: translateY(-4px);
        box-shadow: 0 .08rem .24rem rgba(0, 0, 0, .35);
    }

    /* 第 6 屏中达资讯：移动端同样回退为自然排列，取消下移 */
    #newsScreen .scroll-content {
        min-height: auto;
        padding-top: 0;
    }

    #newsScreen .scroll-news-cards {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .scroll-card-light {
        width: 46%;
        height: auto;
    }

    .scroll-card-light .card-img {
        height: auto;
    }

    .scroll-news-cards {
        flex-wrap: wrap;
        gap: 16px;
    }

    .scroll-news-card {
        width: 100%;
    }

    /* 页脚屏：移动端自然展开，不强制占满一屏 */
    .scroll-footer-screen {
        padding: 30px 0;
        overflow-y: visible;
    }

    .scroll-footer-screen .footer-flex {
        min-height: auto;
    }

    /* 页脚屏新增模块：移动端堆叠 */
    .fcf-cta-row {
        flex-direction: column;
        gap: 10px;
    }

    .fdm-body {
        flex-direction: column;
    }

    /* 移动端地图：堆叠后地图占满宽度，高度仍随宽度自适应 */
    .fdm-map {
        flex: none;
        width: 100%;
        aspect-ratio: 2 / 1;
        height: auto;
        min-height: 220px;
        max-height: none;
    }

    .fdm-info {
        max-height: none;
    }

    /* 2026-09-15：与桌面端同步，空态不再靠 padding 撑高（原 1.6rem≈160px） */
    .fdm-info-default {
        padding-top: 0.2rem;
    }

    .footer-code-box {
        justify-content: center;
    }

    .scroll-dots {
        display: none;
    }
}


/* ============================================================
   背景视频层（2026-09-16 第十二轮新增）
   —— 后台给「品质管控」那条 banner 选了"视频"并传了 mp4 时，
      首页第 4 屏的默认背景会输出 <video class="bg-video">，
      各子页 banner 传了 mp4 时切换层是 <video class="bg-switch">。
   口径与 .scroll-bg img 完全一致（铺满 + cover），但**不加 Ken Burns 动画**
   —— 视频自己会动，再叠加缩放会显得晃。
   ============================================================ */
.scroll-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 悬停切换层的视频：与 .scroll-bg img.bg-switch 同一套淡入淡出 */
.scroll-bg video.bg-switch {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.scroll-bg video.bg-switch.show {
    opacity: 1;
}

/* 缩略图里如果是视频（子页 banner 传了 mp4）：与 .q-thumb img 同款裁切与悬停放大 */
.q-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.q-thumb:hover video {
    transform: scale(1.08);
}


/* ============================================================
   产品中心 4 屏 —— 左文案 / 右媒体（2026-09-16 改版）
   ------------------------------------------------------------
   版式：每屏 grid 两栏（左 1fr / 右 1.05fr），沿用首页既有的
         scroll-snap 整屏吸附，**没有**引入 sticky 钉屏。
   ⚠️ 为什么不做「滚动钉屏（内容钉住不动、滚动擦洗）」——
      实测（见 _probe/check_snap_sticky.py、check_snap_scheme.py）：
      在 .scroll-container 的 scroll-snap-type:y mandatory 下，
      一个 N 屏高的钉屏区会被强制吸回最近的吸附点
      （设 scrollTop=1350 会立刻被吸到 0），鼠标滚轮完全推不动；
      即使在钉屏区内部埋 snap 锚点也照样推不动（手势距离 < 半格就回弹）。
      要真钉屏必须把容器改成 y proximity，代价是其他屏也失去
      「滚一下必吸一屏」的手感（实测滚 420px 都不吸附）—— 不划算。
      所以这里保持「滚一下切一个分类」，且 4 屏的布局坐标严格一致，
      观感上就是「同一个位置在换内容」。
   注意：blade 里这 4 屏的 data-index 都写 "2"（共用第 3 个圆点）。
   ============================================================ */
.pc-content{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 60px;
    max-width: 1360px;
    text-align: left;              /* 覆盖 .scroll-content 的 text-align:center */
    padding-top: 1.1rem;           /* 避开固定头部（总高 1.9rem，见铁律 2） */
    padding-bottom: .4rem;
}

.pc-left{ max-width: 560px; }
.pc-right{ display: flex; flex-direction: column; align-items: center; }

/* ---------- 左侧文案 ---------- */
.pc-en{
    font-size: .15rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 14px;
}

.pc-title{
    font-size: .46rem;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.25;
    margin-bottom: 22px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

/* ⚠️ 不能复用 .scroll-screen .line —— 它是 margin:0 auto 居中的，
   左栏需要左对齐，所以这里另起 .pc-line */
.pc-line{
    width: 70px;
    height: 3px;
    background: #c7000b;
    margin: 0 0 26px;
}

.pc-desc{
    font-size: .16rem;
    line-height: .3rem;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
    margin-bottom: 22px;
}

.pc-points{ list-style: none; margin: 0 0 34px; padding: 0; }

.pc-points li{
    position: relative;
    padding-left: 26px;
    font-size: .15rem;
    line-height: .28rem;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.pc-points li::before{
    content: '';
    position: absolute;
    left: 0;
    top: .1rem;
    width: 9px;
    height: 9px;
    border: 2px solid #c7000b;
    border-radius: 50%;
}

.pc-actions{ display: flex; flex-wrap: wrap; gap: 16px; }

/* ⚠️ 原来的 .scroll-btn 只写在 .scroll-hero / [data-index="1"] 上，
   产品中心屏没有按钮样式（所以那行「查看全部产品」是裸文字），
   这里给产品中心的按钮单独定一套 */
.pc-btn{
    display: inline-block;
    padding: 13px 34px;
    border: 1px solid rgba(255, 255, 255, .85);
    color: #fff;
    font-size: .15rem;
    letter-spacing: 3px;
    transition: all .3s;
}

.pc-btn:hover{ background: #c7000b; border-color: #c7000b; }

.pc-btn--ghost{
    border-color: rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .85);
}

.pc-btn--ghost:hover{
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .75);
}

/* ---------- 右侧媒体框 ---------- */
.pc-media{
    position: relative;
    width: 100%;
    height: min(56vh, 480px);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.pc-media img,
.pc-media video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 圆形遮罩：视频素材本身就是「圆内产品 + 灰底」的构图，
   再套一个圆形容器把四角灰底裁掉，看上去就是一个旋转的圆，
   不会被认出是「一个方块视频」 */
.pc-media--round{
    width: min(46vh, 420px);
    height: min(46vh, 420px);
    max-width: 100%;
    border-radius: 50%;
    background: #dedede;
}

/* 多视角轮播：多张图绝对定位叠放，靠 .on 交叉淡入 */
.pc-frames img{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}

.pc-frames img.on{ opacity: 1; }

.pc-frame-dots{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.pc-frame-dots i{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    border: 1px solid rgba(255, 255, 255, .8);
    transition: all .3s;
    cursor: pointer;
}

.pc-frame-dots i.on{ background: #c7000b; border-color: #c7000b; }

.pc-hint{
    margin-top: 14px;
    font-size: .12rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .6);
    text-align: center;
}

/* ---------- 产品中心 4 屏：移动端（纵向堆叠）---------- */
@media (max-width: 1023px){
    .pc-content{
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 100%;
        padding-top: .95rem;
        padding-bottom: .3rem;
    }

    .pc-left{ max-width: 100%; }
    .pc-en{ font-size: .13rem; letter-spacing: 3px; margin-bottom: 8px; }
    .pc-title{ font-size: .32rem; letter-spacing: 2px; margin-bottom: 14px; }
    .pc-line{ margin-bottom: 16px; }
    .pc-desc{ font-size: .13rem; line-height: .24rem; margin-bottom: 14px; }
    .pc-points{ margin-bottom: 20px; }
    .pc-points li{ font-size: .12rem; line-height: .22rem; padding-left: 20px; }
    .pc-points li::before{ width: 7px; height: 7px; top: .07rem; }
    .pc-actions{ gap: 10px; }
    .pc-btn{ padding: 9px 20px; font-size: .12rem; letter-spacing: 2px; }

    .pc-media{ height: min(34vh, 300px); }
    .pc-media--round{ width: min(34vh, 260px); height: min(34vh, 260px); }
    .pc-hint{ margin-top: 10px; font-size: .11rem; }
    .pc-frame-dots{ bottom: 10px; }
}

/* ============================================================
   ⚠️ 2026-09-17：产品中心已回滚为「缩略图 + 背景切换」单屏版，
      本段与下方 .pc-* 规则（含 1222~1438 行的旧 .pc-* 段）当前
      **没有任何元素引用**，保留备用（想再试钉屏版可直接恢复
      HTML + JS，不必重写样式）。不要再拿它当参考改版式。
   ============================================================ */

/* ============================================================
   产品中心 · 钉屏改版（2026-09-16 晚）：左文右媒 + 滚动擦洗切分类 + 纯净背景
   ------------------------------------------------------------
   覆盖上方 2026-09-16 的 .pc-* 旧规则。结构：
   #productScreen(.scroll-screen.pc-pin) 高 400vh，内部 .pc-sticky
   (position:sticky;top:0;height:100vh) 钉满一屏；滚过这 400vh 时按进度
   算 active 分类(0..3)，左 .pc-pane / 右 .pc-media 交叉淡入；背景 .pc-bg
   始终纯净色、不随分类切换。
   ⚠️ 首页 .scroll-container 的 snap 必须是 y proximity（见 line 11），
      mandatory 下 N 屏高钉屏会被强制吸回吸附点、滚轮推不动。
   ⚠️ 白↔黑背景：改 .pc-pin 的 --pc-bg/--pc-fg/--pc-sub 三个变量即可
      （黑底：--pc-bg:#0e0e12; --pc-fg:#f2f3f5; --pc-sub:#b9bdc4）。
   data-index 仍 "2"（共用第 3 个圆点）。
   ============================================================ */

/* 钉屏容器：400vh 提供擦洗距离；display:block 覆盖 .scroll-screen 的 flex 居中；
   overflow:visible 让 sticky 相对 .scroll-container 正常钉住；不参与吸附 */
.pc-pin{
    display: block;
    height: 400vh;
    overflow: visible;
    scroll-snap-align: none;
    background: var(--pc-bg);
    --pc-bg:  #f4f5f7;   /* 纯净背景（浅灰白） */
    --pc-fg:  #1c1f24;   /* 主文字 */
    --pc-sub: #4a4f57;   /* 次要文字 */
    /* 黑底版：--pc-bg:#0e0e12; --pc-fg:#f2f3f5; --pc-sub:#b9bdc4; */
}

/* 钉住内层：满一屏 */
.pc-sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* 纯净背景层（始终同色，不随分类切换） */
.pc-bg{
    position: absolute;
    inset: 0;
    background: var(--pc-bg);
    z-index: 0;
}

/* 两栏内容（覆盖 .scroll-content 的 flex 居中 + 旧 .pc-content） */
.pc-content{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 60px;
    max-width: 1360px;
    height: 100%;
    text-align: left;
    padding: 2.1rem 0 1.2rem;
}

.pc-left,
.pc-right{
    position: relative;
    height: 100%;
}

/* 左侧文案：逐 pane 绝对堆叠交叉淡入 */
.pc-pane{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.pc-pane.on{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.pc-en{
    font-size: .15rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--pc-sub);
    opacity: .82;
    margin-bottom: 14px;
}
.pc-title{
    font-size: .46rem;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.25;
    margin-bottom: 22px;
    color: var(--pc-fg);
    text-shadow: none;
}
.pc-line{
    width: 70px;
    height: 3px;
    background: #c7000b;
    margin: 0 0 26px;
}
.pc-desc{
    font-size: .16rem;
    line-height: .3rem;
    color: var(--pc-sub);
    text-shadow: none;
    margin-bottom: 22px;
    max-width: 560px;
}
.pc-points{ list-style: none; margin: 0 0 34px; padding: 0; }
.pc-points li{
    position: relative;
    padding-left: 26px;
    font-size: .15rem;
    line-height: .28rem;
    color: var(--pc-fg);
    opacity: .92;
    text-shadow: none;
}
.pc-points li::before{
    content: '';
    position: absolute;
    left: 0;
    top: .1rem;
    width: 9px;
    height: 9px;
    border: 2px solid #c7000b;
    border-radius: 50%;
}
.pc-actions{ display: flex; flex-wrap: wrap; gap: 16px; }

.pc-btn{
    display: inline-block;
    padding: 13px 34px;
    border: 1px solid var(--pc-fg);
    color: var(--pc-fg);
    font-size: .15rem;
    letter-spacing: 3px;
    transition: all .3s;
}
.pc-btn:hover{ background: #c7000b; border-color: #c7000b; color: #fff; }
.pc-btn--ghost{
    border-color: color-mix(in srgb, var(--pc-fg) 45%, transparent);
    color: color-mix(in srgb, var(--pc-fg) 88%, transparent);
}
.pc-btn--ghost:hover{
    background: color-mix(in srgb, var(--pc-fg) 14%, transparent);
    border-color: color-mix(in srgb, var(--pc-fg) 75%, transparent);
    color: var(--pc-fg);
}

/* 右侧媒体：逐 pane 绝对堆叠交叉淡入 */
.pc-media{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(46vh, 560px);
    height: min(52vh, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
}
.pc-media.on{ opacity: 1; pointer-events: auto; }

.pc-media--round{
    width: min(46vh, 420px);
    height: min(46vh, 420px);
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #dedede;
}
.pc-media--round video{ width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-frames{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #e9eaec;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.pc-frames img{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}
.pc-frames img.on{ opacity: 1; }
.pc-frame-dots{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}
.pc-frame-dots i{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pc-fg) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-fg) 60%, transparent);
    transition: all .3s;
    cursor: pointer;
}
.pc-frame-dots i.on{ background: #c7000b; border-color: #c7000b; }

.pc-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.pc-hint{
    position: absolute;
    left: 0;
    right: 0;
    bottom: .4rem;
    text-align: center;
    font-size: .12rem;
    letter-spacing: 1px;
    color: var(--pc-sub);
    opacity: .75;
}

/* 分类导航圆点（点击跳到对应分类） */
.pc-nav{
    position: absolute;
    left: 0;
    right: 0;
    bottom: .5rem;
    display: flex;
    justify-content: center;
    gap: 14px;
    z-index: 3;
}
.pc-nav-dot{
    width: 11px;
    height: 11px;
    padding: 0;
    border: 1px solid var(--pc-fg);
    border-radius: 50%;
    background: transparent;
    opacity: .5;
    cursor: pointer;
    transition: all .3s;
}
.pc-nav-dot.on{
    background: #c7000b;
    border-color: #c7000b;
    opacity: 1;
    transform: scale(1.15);
}

/* ---------- 钉屏：移动端（不钉，4 分类直接纵向堆叠展示）---------- */
@media (max-width: 1023px){
    .pc-pin{
        height: auto;
        overflow: visible;
        scroll-snap-align: start;
    }
    .pc-sticky{
        position: static;
        height: auto;
        overflow: visible;
    }
    .pc-bg{ display: none; }   /* 移动端用 .pc-pin 的背景色即可 */
    .pc-content{
        grid-template-columns: 1fr;
        gap: 22px;
        height: auto;
        max-width: 100%;
        padding: 2.4rem 0 1rem;
    }
    .pc-left,
    .pc-right{ height: auto; }
    .pc-pane{
        position: relative;
        inset: auto;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        margin-bottom: 28px;
    }
    .pc-media{
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: min(40vh, 320px);
        opacity: 1 !important;
        pointer-events: auto;
        margin-bottom: 8px;
    }
    .pc-en{ font-size: .13rem; letter-spacing: 3px; margin-bottom: 8px; }
    .pc-title{ font-size: .32rem; letter-spacing: 2px; margin-bottom: 14px; }
    .pc-line{ margin-bottom: 16px; }
    .pc-desc{ font-size: .13rem; line-height: .24rem; margin-bottom: 14px; }
    .pc-points{ margin-bottom: 20px; }
    .pc-points li{ font-size: .12rem; line-height: .22rem; padding-left: 20px; }
    .pc-points li::before{ width: 7px; height: 7px; top: .07rem; }
    .pc-actions{ gap: 10px; }
    .pc-btn{ padding: 9px 20px; font-size: .12rem; letter-spacing: 2px; }
    .pc-media--round{ width: min(40vh, 280px); height: min(40vh, 280px); }
    .pc-hint{ position: static; margin-top: 10px; font-size: .11rem; }
    .pc-nav{ display: none; }
}