/* ============================================================
   移动端响应式（responsive）— 2026-10-16
   ------------------------------------------------------------
   ⚠️⚠️ 本文件**全部内容都写在媒体查询里**，最高断点是 1240px。
        PC（视口 ≥ 1241px）下一条规则都不会生效 —— 这是「不扰动 PC 展示」
        的机制性保证，不依赖人工逐条核对。
        （1240px 这个数字来自项目既有约定：现有设计最小断点就是 1240，
         1241 以上是原始 PC 布局。）

   配合 style/js/responsive.js（汉堡菜单 / 移动端子菜单展开）。
   断点：1240（平板横屏）→ 1024（平板竖屏）→ 768（手机）→ 480（小屏手机）
   ============================================================ */

/* ============================================================
   ⓪ PC 侧兜底：汉堡按钮与子菜单箭头是本次**新增**的元素，
      PC 上必须不显示。用 min-width 媒体查询写，保证本文件
      「所有规则都在媒体查询里」这条约定依然成立。
   ============================================================ */
@media screen and (min-width: 1241px) {
    .mtBurger,
    .navCaret {
        display: none !important;
    }
}

/* ============================================================
   ① ≤1240px 平板横屏 / 窄窗口
   ============================================================ */
@media screen and (max-width: 1240px) {
    /* ---- 所有固定宽容器改流式 ---- */
    .section .inner,
    .stats-inner,
    .ind-inner,
    .ind-hero-inner,
    .ind-pagehead .ind-inner,
    .product-center .pc-inner,
    .tech-stack .ts-inner,
    .scenario .sc-inner {
        width: 100%;
        max-width: 1200px;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    /* ---- 首页三列卡 → 两列 ---- */
    .techGrid {
        flex-wrap: wrap;
        gap: 24px;
    }
    .techGrid > li {
        width: calc((100% - 24px) / 2);
        height: 290px;
    }
    .techGrid .mediaBox {
        height: 233px;
    }
    /* 成功案例两列（原来靠 nth-child(3n) 去掉右间距，这里改成按 2n） */
    .caseGrid {
        justify-content: space-between;
    }
    .caseGrid > li {
        width: calc((100% - 28px) / 2);
        height: 300px;
        margin: 0 0 28px 0;
    }
    .caseGrid > li:nth-child(3n) {
        margin-right: 0;
    }
    .caseGrid .mediaBox {
        height: 212px;
    }
    /* 合作企业 logo：一行 3 个 */
    .partnerGrid > li {
        width: calc((100% - 32px) / 3);
        margin: 0 8px 16px;
    }

    /* ---- 大标题收一档 ---- */
    .ind-sec-title,
    .sec-title,
    .ind-pagehead-title,
    .cover-title {
        font-size: 34px;
    }
    .ind-hero-title {
        font-size: 34px;
    }
    .ind-hero {
        min-height: 420px;
    }
    .ind-hero-inner {
        padding-top: 120px;
    }
    /* ---- 材料页 8 列 → 4 列 ---- */
    .ind-mat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* ---- 页脚 5 列收窄 ---- */
    .footer .main {
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    /* ---- 工业直角风：平板端也保持 0 圆角 ----
       P1-4 的 border-radius:0 只在 ≥1241 生效；这里补 ≤1240 的缺口。 */
    .ind-hero-btn,
    .ind-guide-btn,
    .ind-quick-btn,
    .moreBox,
    .ind-ab-submit {
        border-radius: 0;
    }
}

/* ============================================================
   ② ≤1024px 平板竖屏
   ============================================================ */
@media screen and (max-width: 1024px) {
    /* ---- 首页 ---- */
    .techGrid > li {
        width: calc((100% - 20px) / 2);
        height: 270px;
    }
    .techGrid .mediaBox {
        height: 213px;
    }
    .caseGrid > li {
        width: calc((100% - 20px) / 2);
        height: 280px;
    }
    .caseGrid .mediaBox {
        height: 192px;
    }
    /* ---- 区块上下留白收窄 ---- */
    .caseSection,
    .partnerSection,
    .section {
        padding-top: 60px !important;
        padding-bottom: 64px !important;
    }
    .ind-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    /* ---- 页脚：5 列换行成 2 行 ---- */
    .footer .top {
        flex-wrap: wrap;
        row-gap: 32px;
    }
    .footer .top > .logoB {
        flex: 1 1 100%;
    }
    .footer .top > .fwfw {
        flex: 1 1 calc(50% - 16px);
        height: auto;
        min-height: 150px;
        border-left: 0;
        padding-left: 0;
    }
    /* ---- 特性行（图文左右）在窄屏改为上下 ---- */
    .ind-feature-list > li,
    .ind-feature-list > li.ind-feature-rev {
        flex-direction: column;
        align-items: stretch;
        margin-top: 44px;
    }
    .ind-feature-media {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 22px;
    }
    .ind-feature-media > img,
    .ind-feature-media > video {
        width: 100%;
        height: auto;
    }
    /* ---- 双列 FAQ → 单列 ---- */
    .ind-faq-grid {
        grid-template-columns: 1fr;
    }
    /* ---- 表格可横向滚动 ---- */
    .ind-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ind-table-wrap > table {
        min-width: 720px;
    }

    /* ---- tab 条：6 个 tab 在窄屏放不下 → 允许横向滑动 ----
       （实测 820px 视口下 .ind-ab-tabs 会溢出 27px） */
    .ind-ab-tabs,
    .ind-sw-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .ind-ab-tabs::-webkit-scrollbar,
    .ind-sw-tabs::-webkit-scrollbar {
        display: none;
    }
    .ind-ab-tab,
    .ind-sw-tab {
        flex: 0 0 auto;
        min-width: 120px;
    }
    /* ---- 关于我们页 tab：延续下划线 tab bar，窄屏可滑动 ---- */
    .ind-ab-tabs {
        gap: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #E5E7EB;
    }
    .ind-ab-tab {
        min-width: auto;
        padding: 14px 18px 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
        font-weight: 500;
        color: #3F4A57;
        position: relative;
    }
    .ind-ab-tab::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        background: #FEC901;
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }
    .ind-ab-tab.ind-ab-tab-on::after {
        transform: scaleX(1);
    }
    .ind-ab-tab.ind-ab-tab-on {
        color: #14181D;
        background: transparent;
        border: 0;
    }
    .ind-ab-panel-on {
        margin-top: 32px;
    }
    /* ---- ISV / 工业软件页 tag：延续下划线 tab bar，但收窄 padding 保证可滑动 ---- */
    .ind-sw .ind-sw-tabs,
    .ind-isv-it .ind-sw-tabs {
        justify-content: flex-start;
        gap: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #E5E7EB;
    }
    .ind-sw .ind-sw-tab,
    .ind-isv-it .ind-sw-tab {
        min-width: auto;
        padding: 14px 18px 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        position: relative;
    }
    .ind-sw .ind-sw-tab::after,
    .ind-isv-it .ind-sw-tab::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        background: #FEC901;
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }
    .ind-sw .ind-sw-tab.ind-sw-tab-on::after,
    .ind-isv-it .ind-sw-tab.ind-sw-tab-on::after {
        transform: scaleX(1);
    }
    .ind-sw .ind-sw-name,
    .ind-isv-it .ind-sw-name {
        font-size: 14px;
        font-weight: 600;
        color: #3F4A57;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .ind-sw .ind-sw-tab.ind-sw-tab-on .ind-sw-name,
    .ind-isv-it .ind-sw-tab.ind-sw-tab-on .ind-sw-name {
        color: #14181D;
    }
    .ind-sw .ind-sw-sub,
    .ind-isv-it .ind-sw-sub {
        display: none;
    }
    .ind-sw .ind-sw-panel-on,
    .ind-isv-it .ind-sw-panel-on {
        margin-top: 32px;
    }

    /* ---- 关于我们·公司简介：左图右文 → 上下 ----
       .ind-ab-intro-media 是 flex:0 0 652px，820px 视口下会把文字挤到视口外 */
    .ind-ab-intro {
        flex-direction: column;
    }
    .ind-ab-intro-media {
        flex: 0 0 auto !important;
        width: 100%;
        margin-right: 0;
        margin-bottom: 22px;
    }

    /* ---- 案例中心列表卡（case.css 的 .listPro） ----
       li 是固定 379px 宽 + margin-left:20px，窄屏放不下两列。 */
    .listPro {
        justify-content: space-between;
    }
    .listPro li {
        width: calc((100% - 20px) / 2);
        margin-left: 0 !important;
    }
}

/* ============================================================
   ③ ≤768px 手机
   ============================================================ */
@media screen and (max-width: 768px) {

    /* ---------- 首页 banner ----------
       ⚠️ 原选择器是 .coverBox > .cover-title（带父级），只写 .cover-title
       优先级不够，字号改不动；垂直位置原来靠 padding-top:168px 硬顶，
       在 320px 高的手机 banner 里必然把按钮顶出画面。
       这里改成 flex 居中：文案长短都能自适应，不用再算高度。 */
    .banner {
        height: 340px;
    }
    .coverBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 18px;
        box-sizing: border-box;
    }
    .coverBox > .cover-title {
        padding-top: 0;
        font-size: 28px;
    }
    .coverBox > .cover-sub {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 14px;
    }
    .coverBox > .cover-btn {
        width: 132px;
        height: 40px;
        line-height: 40px;
        margin: 22px auto 0;
        border-radius: 0;
    }
    .coverBox > .cover-btn a {
        font-size: 15px;
    }
    /* 数据条 4 项 → 2×2
       ⚠️ 原 li 是 width:25% + margin-right:24px + height:130px，
       直接改 width 会被 margin 顶掉换行，必须连 margin / height 一起重置；
       .stat-val / .stat-unit 也各自声明了 56px（public.css 的全局 *{font-size:14px}
       优先级高于继承），字号要三个一起改。 */
    .statsBar {
        height: auto;
        padding: 22px 0;
    }
    .stats-inner {
        height: auto;
        padding: 0 16px;
    }
    .statsList {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 14px;
    }
    .statsList > li {
        width: calc(50% - 7px);
        height: 104px;
        margin-right: 0;
    }
    .stat-num,
    .stat-val,
    .stat-unit {
        font-size: 34px;
    }
    .stat-label {
        margin-top: 10px;
    }
    /* 所有网格卡改单列 */
    .techGrid,
    .caseGrid {
        gap: 18px;
    }
    .techGrid > li,
    .caseGrid > li {
        width: 100% !important;
        margin: 0 0 0 0;
        height: 260px;
    }
    .techGrid .mediaBox,
    .caseGrid .mediaBox {
        height: 203px;
    }
    .caseGrid > li {
        margin-bottom: 18px;
    }
    /* logo 墙：一行 2 个 */
    .partnerGrid > li {
        width: calc((100% - 20px) / 2);
        margin: 0 5px 12px;
    }
    .partnerGrid > li > img {
        max-width: 100%;
        height: auto;
    }
    .caseSection,
    .partnerSection,
    .section {
        padding-top: 44px !important;
        padding-bottom: 48px !important;
    }
    .sec-title,
    .ind-sec-title {
        font-size: 24px;
    }
    .sec-sub {
        font-size: 14px;
        padding: 0 4px;
    }

    /* ---------- 内页 hero ---------- */
    .ind-hero {
        min-height: 0;
        padding-bottom: 40px;
    }
    .ind-hero-inner {
        padding-top: 72px;
        padding-bottom: 0;
    }
    .ind-hero-title {
        font-size: 30px;
        line-height: 1.2;
    }
    .ind-hero-desc,
    .ind-hero-material .ind-hero-desc,
    .ind-hero-center .ind-hero-desc {
        font-size: 14px;
        line-height: 1.7;
    }
    .ind-hero-btn {
        width: 100%;
        max-width: 240px;
        text-align: center;
    }
    /* ---- 工业直角风：移动端也保持 0 圆角 ---- */
    .ind-hero-btn,
    .ind-guide-btn,
    .ind-quick-btn,
    .moreBox,
    .ind-ab-submit {
        border-radius: 0;
    }
    .ind-pagehead {
        padding: 34px 0 26px;
    }
    .ind-pagehead-title {
        font-size: 28px;
    }

    /* ---------- 通用区块 ---------- */
    .ind-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    /* ---------- 设计要素卡片（designFactor.php，见 /23/ 的 3D Model Design Elements）----------
       ⚠️ 这里原来写的是 column-count:1 —— 但 .ind-card-grid 是 **flex 两列**（不是多列），
       那条规则根本没生效，手机上两列各只剩 163px，文字每两三个词就折行。
       ⚠️ 卡片高度可能是后台「卡片高度」字段写死的**内联** style="height:XXXpx"，
       窄屏内容折行变多，固定高度装不下 → 内容直接溢出到卡片外面。
       ⚠️ 两列是 blkSegments 按**奇偶**分的（另可手工勾「放到右列」填空白），
       直接堆叠会变成「左列全部 → 右列全部」，与后台设定顺序不一致
       （实测 /23/ 上 Material 和 Solutions 被调换）→ 用 order 交错还原。 */
    .ind-card-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    /* 拆掉列容器，让卡片直接成为网格子项 —— 只有这样 order 才能跨列生效 */
    .ind-card-col {
        display: contents;
    }
    .ind-card-col + .ind-card-col {
        margin-left: 0;
    }
    .ind-card {
        height: auto !important;
        padding: 18px 16px;
        /* 间距统一交给 grid 的 gap，避免 order 打乱后「某列最后一张」的 margin:0 落在中间 */
        margin-bottom: 0 !important;
    }
    /* 左列第 k 张 → order 2k-1，右列第 k 张 → order 2k（覆盖到每列 12 张） */
    .ind-card-col:nth-child(1) > .ind-card:nth-child(1)  { order: 1;  }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(1)  { order: 2;  }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(2)  { order: 3;  }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(2)  { order: 4;  }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(3)  { order: 5;  }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(3)  { order: 6;  }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(4)  { order: 7;  }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(4)  { order: 8;  }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(5)  { order: 9;  }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(5)  { order: 10; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(6)  { order: 11; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(6)  { order: 12; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(7)  { order: 13; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(7)  { order: 14; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(8)  { order: 15; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(8)  { order: 16; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(9)  { order: 17; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(9)  { order: 18; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(10) { order: 19; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(10) { order: 20; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(11) { order: 21; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(11) { order: 22; }
    .ind-card-col:nth-child(1) > .ind-card:nth-child(12) { order: 23; }
    .ind-card-col:nth-child(2) > .ind-card:nth-child(12) { order: 24; }
    /* 通栏段：同样改用 gap 控距 */
    .ind-card-full {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .ind-card-flow > * + * {
        margin-top: 28px;
    }
    .ind-card-title {
        font-size: 17px;
    }
    .ind-card-body {
        margin-top: 12px;
        /* PC 上是 2.25 的行高，窄屏太散 */
        line-height: 1.85;
    }
    .ind-grid-list,
    .ind-isv-case-list,
    .ind-showcase-list,
    .ind-flow-list {
        flex-direction: column;
        gap: 18px;
    }
    .ind-isv-case-item > img,
    .ind-isv-case-item > video {
        height: 220px;
    }
    /* tabs：横向可滑动（滚动行为已在 ≤1024 定义，这里只调尺寸）
       （.ind-ab-tabs 关于我们 / .ind-sw-tabs 工业软件 两处 tab 条） */
    .ind-ab-tab,
    .ind-sw-tab {
        min-width: 128px;
        padding: 16px 14px;
        font-size: 14px;
    }
    /* 关于我们页保持下划线 tab bar，覆盖上面的样式 */
    .ind-ab-tab {
        min-width: auto;
        padding: 12px 14px 10px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 13px;
    }
    .ind-ab-panel-on {
        margin-top: 28px;
    }
    /* ISV / 工业软件页保持下划线 tab bar，覆盖上面的工业软件 tab 样式 */
    .ind-sw .ind-sw-tab,
    .ind-isv-it .ind-sw-tab {
        min-width: auto;
        padding: 12px 14px 10px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .ind-sw .ind-sw-name,
    .ind-isv-it .ind-sw-name {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .ind-sw .ind-sw-panel-on,
    .ind-isv-it .ind-sw-panel-on {
        margin-top: 28px;
    }
    .ind-ab-panel {
        padding-top: 24px;
    }
    .ind-mat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---------- 固定宽度 flex 子项：窄屏统一放开 ----------
       这些都是 flex: 0 0 <固定 px>，在 390px 视口下会把父容器撑破
       （实测 /149/ 溢出 461px、/156/ 溢出 170px 就是它们造成的）。 */
    .ind-quick-btn,
    .ind-ab-contact-info,
    .ind-mat-nav,
    .ind-mat-pics,
    .ind-tsteps-meter-bar {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    /* 关于我们·公司简介：上下堆叠（规则已在 ≤1024 定义） */

    /* ---------- 材料挑选指南（blocks/guide.php，见 /21/ 的 Material Selection Guide）----------
       .ind-guide-row 是「左图 + 右文」的 flex 行，且 .ind-guide-text 带 margin-left:60px。
       窄屏下两栏各只剩 151px、那 60px 外边距还白吃掉一块宽度 → 改成上下堆叠。 */
    .ind-guide-row {
        flex-direction: column;
        align-items: stretch;
        margin-top: 32px;
    }
    .ind-guide-media {
        flex: none;
    }
    .ind-guide-text {
        margin-left: 0;
        margin-top: 22px;
    }
    .ind-guide-desc {
        font-size: 14px;
        line-height: 1.9;
    }
    /* 快捷入口深色卡：横向排布 → 纵向
       加了 gap：纵向排列后按钮会紧贴上方最后一组数值，需要留出呼吸空间
       （取值与卡片上下 padding 22px 一致）。 */
    .ind-quick-card {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        padding: 22px 18px;
        gap: 22px;
    }
    .ind-quick-card > * {
        width: 100%;
    }
    /* 材料页：左侧导航 + 右侧图列 → 上下 */
    .ind-mat-body {
        flex-direction: column;
    }
    /* 联系表单：信息列 + 表单列 → 上下 */
    .ind-ab-contact {
        flex-direction: column;
    }

    /* ---------- 快捷入口深色卡（solution.php） ----------
       .ind-quick-list 是 flex 行、3 个 li 各 flex:1 1 0%，但 flex 项默认
       min-width:auto，48px 的大数字撑住不肯缩 → 实测 /23/ 溢出 105px。
       改成「每行一个：数字 + 标签」的左对齐排布。 */
    .ind-quick-list {
        flex-direction: column;
        row-gap: 14px;
    }
    .ind-quick-list > li {
        display: flex;
        align-items: baseline;
        column-gap: 10px;
        text-align: left;
        min-width: 0;
    }
    .ind-quick-num {
        font-size: 32px;
    }
    .ind-quick-label {
        margin-top: 0;
        font-size: 14px;
    }

    /* ---------- 内页 hero 右侧图卡（.ind-hero-hascards 变体，见 /21/） ----------
       原来是「左文案 + 右 196px 图卡 ×3」的横向排布，实测 /21/ 溢出 320px。 */
    .ind-hero-hascards .ind-hero-inner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-top: 64px;
        padding-bottom: 40px;
    }
    .ind-hero-cards {
        flex-wrap: wrap;
        margin-left: 0;
        margin-top: 26px;
        gap: 12px;
    }
    .ind-hero-card {
        width: calc(50% - 6px);
        margin-left: 0;
    }
    .ind-hero-card-media,
    .ind-hero-card-media > img,
    .ind-hero-card-media > video {
        width: 100%;
        height: auto;
    }

    /* ---------- 案例中心左侧分类（case.php 的 .proNav） ----------
       .listRight 是固定 1050px + float:left，实测 /2/ 溢出 23~53px。 */
    .proNav .main {
        display: flex;
        flex-direction: column;
    }
    .left1 {
        float: none;
        margin-top: 0;
        margin-bottom: 14px;
    }
    .listRight {
        float: none;
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }
    .listRight > li {
        margin-right: 8px;
        margin-bottom: 10px;
        /* ⚠️ 卡片标题是 white-space:nowrap，flex 项默认 min-width:auto
           会被整行文字撑到 379px（视口只有 390）→ 必须显式归零才能收缩 */
        min-width: 0;
        max-width: 100%;
    }
    .listRight .topPhoto,
    .listRight .topPhoto img,
    .listRight .bottomText {
        max-width: 100%;
    }

    /* ---------- 案例中心列表卡（.listPro）：单列 + 高度自适应 ---------- */
    .listPro li {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: 0 !important;
    }
    .listPro li .topPhoto {
        height: 200px;
    }

    /* ---------- 多端开发页手风琴卡：竖排堆叠 ---------- */
    .pc-cards {
        flex-direction: column;
        gap: 14px;
    }
    .pc-card {
        width: 100% !important;
        min-height: 300px;
        /* PC 上非焦点卡是窄条、文字竖排，所以它的 .pc-card-mask 是 background:none；
           手机端全部卡片都是整幅显示，没有遮罩就会白字压浅底、看不清。
           这里统一补一层自下而上的黑色渐变，并把文案统一压到底部。 */
        align-items: flex-end;
    }
    .pc-card .pc-card-mask {
        background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, .06) 100%) !important;
    }
    /* 个别卡片的底图是浅色插画，单靠遮罩仍不够 → 补一层文字阴影保证可读 */
    .pc-card .pc-card-info {
        text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    }
    /* 手机端不要竖排文字（PC 上非焦点标题是 writing-mode: vertical-rl） */
    .pc-card.is-vertical:not(.active) .pc-card-nf-title {
        writing-mode: horizontal-tb;
        letter-spacing: 0;
        display: block;
        margin-bottom: 6px;
    }
    /* 黄色指示条是按横向卡片宽度算的，竖向堆叠后没意义 */
    .pc-indicator {
        display: none;
    }
    /* ⚠️ 原写法是 .product-center .pc-title（带父级），只写 .pc-title 优先级不够 */
    .product-center .pc-title {
        font-size: 28px;
    }
    .product-center .pc-subtitle {
        font-size: 14px;
    }
    .ts-panels,
    .sc-panels {
        display: block;
    }
    .ts-panel,
    .sc-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* ---------- 视差步骤模块（.ind-tsteps，见 /23/ 的「3D Printing Technology」）----------
       ⚠️ 这个模块靠 techSteps.js 加 .is-live 启用「钉住 + 逐个切换」：
       5 个步骤被塞进**同一个网格单元**（grid-area: 1/1），同一时刻只显示一个。
       手机端如果只放开 opacity 而不取消同格叠放，5 段文字会全部叠在一起
       （2026-10-16 用户报的「文字挤到一块」就是这个原因）。
       这里把 .is-live 的效果整体还原成静态纵向排列，
       再用 display:contents + order 把「文字列表」和「图片列表」重新交织成
       步骤1文字 → 步骤1图 → 步骤2文字 → 步骤2图 …… */
    .ind-tsteps.is-live {
        height: auto !important;
    }
    .ind-tsteps.is-live .ind-tsteps-sticky {
        position: static !important;
        height: auto !important;
        display: block !important;
        padding: 48px 0 !important;
    }
    .ind-tsteps-grid {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 14px !important;
    }
    .ind-tsteps.is-live .ind-tsteps-item {
        grid-area: auto !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ind-tsteps.is-live .ind-tsteps-media {
        aspect-ratio: auto !important;
        max-height: none !important;
    }
    .ind-tsteps.is-live .ind-tsteps-shot {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    /* 进度条是按「钉住 + 切换」算位置的，静态列表下没有意义 */
    .ind-tsteps-meter {
        display: none;
    }
    /* 把两个列表的外层「拆开」，让它们的子项直接参与外层网格，才可能交错排列 */
    .ind-tsteps-text,
    .ind-tsteps-stack,
    .ind-tsteps-media {
        display: contents;
    }
    /* ⚠️ 只有按序号写 order，才能把「第 k 步文字」和「第 k 张图」配成一对。
       当前模块是 5 步；这里覆盖到 12 步 —— 后台再加步骤（≤12）不用动这段。 */
    .ind-tsteps-item:nth-child(1)  { order: 1;  }
    .ind-tsteps-shot:nth-child(1)  { order: 2;  }
    .ind-tsteps-item:nth-child(2)  { order: 3;  }
    .ind-tsteps-shot:nth-child(2)  { order: 4;  }
    .ind-tsteps-item:nth-child(3)  { order: 5;  }
    .ind-tsteps-shot:nth-child(3)  { order: 6;  }
    .ind-tsteps-item:nth-child(4)  { order: 7;  }
    .ind-tsteps-shot:nth-child(4)  { order: 8;  }
    .ind-tsteps-item:nth-child(5)  { order: 9;  }
    .ind-tsteps-shot:nth-child(5)  { order: 10; }
    .ind-tsteps-item:nth-child(6)  { order: 11; }
    .ind-tsteps-shot:nth-child(6)  { order: 12; }
    .ind-tsteps-item:nth-child(7)  { order: 13; }
    .ind-tsteps-shot:nth-child(7)  { order: 14; }
    .ind-tsteps-item:nth-child(8)  { order: 15; }
    .ind-tsteps-shot:nth-child(8)  { order: 16; }
    .ind-tsteps-item:nth-child(9)  { order: 17; }
    .ind-tsteps-shot:nth-child(9)  { order: 18; }
    .ind-tsteps-item:nth-child(10) { order: 19; }
    .ind-tsteps-shot:nth-child(10) { order: 20; }
    .ind-tsteps-item:nth-child(11) { order: 21; }
    .ind-tsteps-shot:nth-child(11) { order: 22; }
    .ind-tsteps-item:nth-child(12) { order: 23; }
    .ind-tsteps-shot:nth-child(12) { order: 24; }
    /* 每「组」之间留白：.ind-tsteps-item + .ind-tsteps-item 的原始值带相邻选择器
       （0,2,0），只写单个类压不住，必须连相邻写法一起覆盖 */
    .ind-tsteps-item + .ind-tsteps-item,
    .ind-tsteps.is-live .ind-tsteps-item + .ind-tsteps-item {
        margin-top: 34px;
    }
    .ind-tsteps-shot,
    .ind-tsteps-shot + .ind-tsteps-shot,
    .ind-tsteps.is-live .ind-tsteps-shot + .ind-tsteps-shot {
        margin-top: 0;
    }
    /* 字号：PC 上是 序号 60px / 标题 34px / 正文 15px，手机端各收一档 */
    .ind-tsteps-no {
        font-size: 38px;
    }
    .ind-tsteps-title {
        font-size: 22px;
        margin-top: 10px;
    }
    .ind-tsteps-desc {
        font-size: 14px;
        line-height: 1.75;
        margin-top: 10px;
        max-width: none;
    }

    /* ---------- 页脚 ---------- */
    .footer .top {
        flex-direction: column;
        row-gap: 26px;
    }
    .footer .top > .fwfw {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        border-left: 0;
        padding-left: 0;
    }
    .footer .top > .logoB {
        flex: 1 1 auto;
    }
    .footer .main {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* 二维码那一列在手机端居中 */
    .footer .fwfw:last-child {
        align-items: flex-start;
    }

    /* ---------- 右侧浮层：手机端隐藏，避免遮挡正文 ---------- */
    .rightNav1 {
        display: none;
    }

    /* ---------- 表单：输入框拉满宽 ---------- */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---------- 分页 ---------- */
    .paging a:first-child,
    .paging a:last-child {
        width: auto;
        padding: 0 10px;
    }
}

/* ============================================================
   ④ ≤480px 小屏手机
   ============================================================ */
/* ============================================================
   ⑤ ≤1240px：顶栏 / 导航（2026-10-19 从 768 块上提）
   ------------------------------------------------------------
   为什么上提：桌面导航 9 项在 16px 下实测 1035px 宽
   （文字 795 + 8×30 间距），加上 logo 124 与左右边距，
   视口低于 ~1180px 就必然换行 —— 而 header 高度是固定的 72px，
   换行后的第二行会直接压到 hero 上。
   原来汉堡菜单挂在 768，769~1240 这段就是「桌面导航 + 放不下」的死区。
   现在整套顶栏/导航规则在 ≤1240 生效，与项目既有的平板横屏断点对齐
   （1241 以上可用宽度 1192 > 需要 1159，放得下）；PC 不受任何影响。
   ⚠️ 本块必须排在 ≤480 块之前：480 块里的 .main padding 14px 要能覆盖这里的 20px。
   ============================================================ */
@media screen and (max-width: 1240px) {
    /* ---------- 顶栏 / 导航 ---------- */
    header {
        height: auto !important;
        min-height: 60px;
    }
    .main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .topNav {
        align-items: center;
        min-height: 60px;
    }
    .logoBox {
        margin-top: 0;
        display: flex;
        align-items: center;
        height: 60px;
    }
    .logoBox > img {
        max-height: 34px;
        width: auto;
    }
    /* 汉堡按钮：桌面隐藏，手机显示（结构见 header.php）
       ⚠️ rightNav.css 里有一个**无作用域**的全局 button{}（display:block;
       width:180px; margin:25px auto），新按钮必须逐条显式覆盖，
       否则会被撑成 180px 宽并居中。 */
    .mtBurger {
        display: flex;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        position: relative;
        z-index: 960;
    }
    /* ⚠️ rightNav.css 的全局 button:hover 会把汉堡按钮刷成黄色方块
       （悬停/触摸后残留），这里显式压掉。优先级 0,2,0 > 0,1,1。 */
    .mtBurger:hover,
    .mtBurger:focus,
    .mtBurger:active {
        background: transparent;
        outline: none;
    }
    .mtBurger > span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #333333;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
    }
    header.mt-nav-open .mtBurger > span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    header.mt-nav-open .mtBurger > span:nth-child(2) {
        opacity: 0;
    }
    header.mt-nav-open .mtBurger > span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    /* 一级菜单改成从顶栏下方滑出的竖向面板 */
    .rightNav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border-top: 1px solid #f0f0f0;
        box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
        padding: 8px 0 16px;
        z-index: 950;
    }
    header.mt-nav-open .rightNav {
        display: block;
    }
    .rightNav > li {
        float: none;
        width: 100%;
        height: auto;
        line-height: 1;
        margin-left: 0 !important;
        border-bottom: 1px solid #f4f4f4;
    }
    .rightNav > li > a {
        height: auto;
        line-height: 1.4;
        padding: 15px 20px;
        font-size: 16px;
    }
    /* 手机端用「当前项左侧竖条」代替 PC 的下划线 */
    .rightNav > li > a::after {
        left: 0;
        top: 50%;
        bottom: auto;
        margin-left: 0;
        width: 3px;
        height: 18px;
        margin-top: -9px;
        border-radius: 0 2px 2px 0;
    }
    /* ⚠️ 触摸设备点一下会一直保留 :hover 态 → 刚点过的项会「假装」是当前页。
       移动端不靠 hover 表达状态：把 hover 的加粗与竖条都关掉，
       竖条只留给「当前页」（.border-bottom）和「已展开」（.mt-open）。 */
    .rightNav > li > a:hover {
        -webkit-text-stroke: 0;
        text-shadow: none;
    }
    .rightNav > li > a:hover::after {
        opacity: 0;
    }
    .rightNav > li > a.border-bottom::after,
    .rightNav > li.mt-open > a::after {
        opacity: 1;
    }
    /* 二级菜单：默认收起，点标题行右侧的箭头展开 */
    /* 二级菜单：默认收起，点一级项展开（逻辑见 responsive.js）
       ⚠️ 必须带 !important —— 触摸设备会触发 header.php 里的 jQuery mouseenter，
       它用 .show() 写的是**内联** display:block，普通规则压不住；
       而作者样式表里的 !important 是能压过内联样式的。 */
    .rightNav .erNav {
        display: none !important;
        position: static;
        width: 100% !important;
        padding: 0 0 8px;
        box-shadow: none;
        border-radius: 0;
        background: #fafafa;
        animation: none;
    }
    .erNav-flip {
        left: auto;
        right: auto;
    }
    .erNav > .eveone {
        height: auto;
        background: transparent;
    }
    .erNav > .eveone a {
        line-height: 1.4;
        padding: 11px 20px 11px 34px;
        text-align: left;
        font-size: 14px;
    }
    .erNav > .eveone a.on::before {
        display: none;
    }
    /* 有子菜单的行：右侧箭头只作「可展开」的视觉提示。
       移动端**整行都可以点开**（点文字也是展开，不跳转），逻辑见 responsive.js。 */
    .navCaret {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 54px;
        height: 52px;
        cursor: pointer;
    }
    .navCaret::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 7px;
        height: 7px;
        margin: -5px 0 0 -5px;
        border-right: 2px solid #999999;
        border-bottom: 2px solid #999999;
        transform: rotate(45deg);
        transition: transform .25s ease, margin-top .25s ease;
    }
    .rightNav > li.mt-open > .navCaret::before {
        transform: rotate(-135deg);
        margin-top: -2px;
    }
    .rightNav > li.mt-open > .erNav {
        display: block !important;
    }

    /* 平板（769~1240）：抽屉改成右侧浮层。
       手机上整行拉满是合理的，但在 1100px 的窗口里每一行都横跨 1080px，
       标签孤零零贴在最左边，很散。这里收成 380px 的卡片贴右侧。 */
    @media screen and (min-width: 769px) {
        .rightNav {
            left: auto;
            right: 20px;
            width: 380px;
            margin-top: 6px;
            border-top: 0;
            border-radius: 12px;
            max-height: calc(100vh - 90px);
            box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
        }
    }
}

/* ============================================================
   ⑥ 769~1240px：首页 hero 与 PC 一样左对齐
   ------------------------------------------------------------
   tokens.css 把 ≥1241 的 .coverBox 改成了左对齐（与内页 hero 一致），
   但 ≤768 的手机版是按「flex 居中」调的（见 768 块）。
   中间的平板段原本沿用旧的居中，于是缩放窗口时文字会从居中突然跳到左边。
   这里补一段，让平板与 PC 对齐；手机保持居中不变。
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1240px) {
    .coverBox {
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }
    .coverBox > .cover-btn {
        margin-left: 0;
    }
}

@media screen and (max-width: 480px) {
    .main,
    .section .inner,
    .stats-inner,
    .ind-inner,
    .ind-hero-inner,
    .product-center .pc-inner,
    .tech-stack .ts-inner,
    .scenario .sc-inner,
    .footer .main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .cover-title {
        font-size: 24px;
    }
    .sec-title,
    .ind-sec-title {
        font-size: 21px;
    }
    .ind-hero-title {
        font-size: 26px;
    }
    .ind-pagehead-title {
        font-size: 24px;
    }
    .stat-num {
        font-size: 27px;
    }
    .techGrid > li,
    .caseGrid > li {
        height: 232px;
    }
    .techGrid .mediaBox,
    .caseGrid .mediaBox {
        height: 178px;
    }
    .partnerGrid > li {
        width: calc((100% - 14px) / 2);
        height: 76px;
        margin: 0 3px 10px;
    }
    .ind-mat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ind-ab-tab {
        min-width: auto;
        padding: 10px 11px 8px;
        font-size: 13px;
    }
    .ind-sw .ind-sw-tab,
    .ind-isv-it .ind-sw-tab {
        padding: 10px 11px 8px;
    }
    .pc-card {
        min-height: 260px;
    }
    .ind-isv-case-item > img,
    .ind-isv-case-item > video {
        height: 180px;
    }
}

/* ============================================================
   ⑨ tab 内容左右滑动切换：方向性滑入动画（2026-10-21）
   ------------------------------------------------------------
   industrySoftware.js 在 ≤1240 时给激活面板加 .ind-sw-from-left /
   .ind-sw-from-right；左滑（下一个）从右侧进，右滑（上一个）从左侧进。
   单独成一个块而不是塞进上面某个断点：480~1240 全区间都要生效。
   桌面不定义动画 → 万一类名残留也没有副作用。
   ============================================================ */
@media screen and (max-width: 1240px) {
    .ind-sw-panel-on.ind-sw-from-right {
        animation: ind-sw-in-right 0.22s ease;
    }
    .ind-sw-panel-on.ind-sw-from-left {
        animation: ind-sw-in-left 0.22s ease;
    }
}
@media screen and (max-width: 1240px) and (prefers-reduced-motion: reduce) {
    .ind-sw-panel-on.ind-sw-from-right,
    .ind-sw-panel-on.ind-sw-from-left {
        animation: none;
    }
}
@keyframes ind-sw-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes ind-sw-in-left {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}