/* ==========================================================
   排版规范 (Typography System) — 基于设计规范
   ------------------------------------------------------------
   B1 主标题  : 40 / 32 / 28 px  | weight 700 | -0.02em | 1.25 / 1.25 / 1.3
   B2 次主标题: 30 / 28 / 24 px  | weight 600 | -0.01em | 1.3 / 1.3 / 1.35
   B3 模块标题: 22 / 20 / 18 px  | weight 600 |   -     | 1.35 / 1.35 / 1.4
   B4 次级标题: 18 / 17 / 16 px  | weight 500 |   -     | 1.4 / 1.4 / 1.4
   B5 正文段落: 16 / 16 / 16 px  | weight 400 |   -     | 1.6 / 1.6 / 1.6 (表格按此)
   B6 导航按钮: 16 / 15 / 16 px  | weight 500 |   -     | 1.5 / 1.5 / 1.5
   B7 辅助说明: 14 / 14 / 14 px  | weight 400 | 0.01em  | 1.5 / 1.5 / 1.5
   B8 页脚小字: 12 / 12 / 12 px  | weight 400 | 0.02em  | 1.5 / 1.5 / 1.5
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
    max-width: 100%;
}

body {
       font-family: "hei" !important;
    /* B5 正文段落：16px / 1.6 / 400 */
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    counter-reset: section;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.st-wrapper {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.noscript-warning {
    border: solid 4px #fff;
    background: #fee;
    color: #f00;
    padding: 10px;
    text-align: center;
}

.mod-compoundA024 {
    width: 100%;
}

.mod-compoundA024_inner {
    max-width: 1052px;
    margin: 0 auto;
}

.mod-compoundA024_img {
    width: 100%;
    text-align: center;
}

.img-pc {
    display: block;
    width: 100%;
    height: auto;
}

.img-sp {
    display: none;
    width: 100%;
    height: auto;
}

.content-container {
    max-width: 1052px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 1.6rem;
    overflow-x: hidden;
    box-sizing: border-box;
}


/* ==========================================================
   H1 - B1 主标题：40 / 32 / 28 px
   ========================================================== */
.hero-section h1 {
    font-size: 2.8rem;          /* 移动端默认 28px / 1.3 */
    line-height: 1.3;
    color: #0d2ea0;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 2rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section h1 {
        font-size: 3.2rem;      /* 平板 32px / 1.25 */
        line-height: 1.25;
    }
}
@media (min-width: 1024px) {
    .hero-section h1 {
        font-size: 4rem;        /* PC 40px / 1.25 */
        line-height: 1.25;
    }
}


/* ==========================================================
   正文段落 - 15px / 1.86 / 段距 30px（参考官方文章 a0062）
   ========================================================== */
p {
    font-size: 1.5rem;          /* 正文 15px */
    line-height: 1.86;          /* 行高 1.86 */
    font-weight: 400;
    color: #333;
    margin-bottom: 3rem;        /* 段间距 30px */
    text-indent: 2em;           /* 首行缩进两字符 */
}

/* 居中/说明类段落不缩进 */
.img-caption,
.block-title,
.block-subtitle,
.conclusion p,
.problem-item p {
    text-indent: 0;
}

.part-image {
    width: 80%;                 /* 图片宽 80% */
    max-width: 100%;
    height: auto;
    display: block;             /* 居中展示 */
    margin: 0 auto;
    border-radius: 0.4rem;
}

/* 转向器壳体零件特点：左图右文两栏布局 */
.part-layout {
    display: flex;
    gap: 6rem;
    align-items: stretch;
    margin-top: -4rem;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.part-column {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.part-column-center {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.problem-section {
    margin-bottom: 4rem;
}

.solution-section {
    margin-bottom: 6rem;
}

.hr-divider {
    border: none;
    border-bottom: 1px solid #d9d9d9;
    margin: 0 0 2rem 0;
}

.hr-divider-lg {
    border: none;
    border-bottom: 1px solid #d9d9d9;
    margin: 0 0 3rem 0;
}

.solution-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.4rem;
    margin: 2rem auto;
    display: block;
}

.feature-section {
    margin-bottom: 6rem;
}

.feature-section p {
    font-size: 1.5rem;
    line-height: 1.86;
    color: #333;
    margin-bottom: 3rem;
    font-weight: 400;
}

.cta-button {
    display: inline-block;
    background-color: #0d2ea0;
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 0.4rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.6rem;
    transition: background-color 0.3s;
    margin-top: 2rem;
    cursor: pointer;
}

.cta-button:hover {
    background-color: #0a2480;
}

.cta-wrapper {
    text-align: center;
}


/* ==========================================================
   H2 基础样式 - 蓝色粗体 + 下划线 + 一、二、三 编号
   B2 次主标题：30 / 28 / 24 px  | weight 600 | -0.01em | 1.3 / 1.3 / 1.35
   ========================================================== */
/* ==========================================================
   H2 基础样式 - 深蓝 + 一、编号（B2 模块标题）
   ========================================================== */
/* 覆盖站点 bootstrap 的 .h1,.h2,.h3,h1,h2,h3 { margin: 20px 0 10px } 干扰，
   标题上下间距交由各断点统一控制 */
.content-container h2,
.content-container h3 {
    margin-top: 0;
    margin-bottom: 0;
}

.problem-section h2,
.secret-section h2 {
    color: #0d2ea0;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.problem-section h2::before,
.secret-section h2::before {
    counter-increment: section;
    content: counter(section, cjk-ideographic) "、";
}


/* ==========================================================
   H3 基础样式 - 黑色 + 1.2.3 编号
   B3 模块标题：22 / 20 / 18 px | weight 600 | 1.35 / 1.35 / 1.4
   ========================================================== */
.secret-item h3 {
    color: #000;
    font-weight: 600;
    line-height: 1.4;
}

.secret-section {
    counter-reset: subsection;
}

.secret-item h3::before {
    counter-increment: subsection;
    content: counter(subsection) ". ";
}


/* ==========================================================
   H4 序号样式 - li 圆点列表
   ========================================================== */
.problem-list {
    list-style: disc;                   /* li 圆点 */
    padding-left: 1.2em;
    margin: 0 0 2rem 0;
}

.problem-item {
    font-size: 1.5rem;
    line-height: 1.86;
    font-weight: 400;
    color: #333;
}

.problem-item p {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}


/* ==========================================================
   桌面端 (≥1024px)
   ========================================================== */
@media (min-width: 1024px) {
    .problem-section h2,
    .secret-section h2,
    .solution-section h2 {
        font-size: 2.6rem;      /* H2 PC 26px / 1.47（参考官方文章 a0062） */
        line-height: 1.47;
    }

    .problem-section h2 {
        margin-bottom: 2.5rem;
    }

    .secret-section h2 {
        margin: 3rem 0 2.5rem 0;
    }

    .secret-item h3 {
        font-size: 2rem;        /* H3 PC 20px / 1.5 */
        line-height: 1.5;
        margin-bottom: 2.5rem;
    }
}


/* ==========================================================
   平板端 (768px ~ 1023px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .problem-section h2,
    .secret-section h2,
    .solution-section h2 {
        font-size: 2.4rem;      /* H2 平板 24px / 1.47 */
        line-height: 1.47;
    }

    .problem-section h2 {
        margin-bottom: 2rem;
    }

    .secret-section h2 {
        margin: 2.5rem 0 2rem 0;
    }

    .secret-item h3 {
        font-size: 1.9rem;      /* H3 平板 19px / 1.5 */
        line-height: 1.5;
        margin-bottom: 2rem;
    }
}


/* ==========================================================
   solution-section h2（与 H2 基础样式一致，仅叠加灰底卡片样式）
   ========================================================== */
.solution-section h2 {
    background-color: #666666;
    color: #fff;
    padding: 2rem;
    border-radius: 0.4rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.47;
    letter-spacing: -0.01em;
    border-bottom: none;
    font-size: 2.2rem;          /* 移动端默认 22px */
}

.solution-section h2::before {
    content: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .solution-section h2 {
        font-size: 2.4rem;      /* 平板 24px / 1.47 */
        line-height: 1.47;
    }
}

@media (min-width: 1024px) {
    .solution-section h2 {
        font-size: 2.6rem;      /* PC 26px / 1.47 */
        line-height: 1.47;
    }
}

/* 仅手机端显示的换行标签：PC/平板隐藏，手机端生效 */
.only-mobile {
    display: none;
}
@media (max-width: 767px) {
    .only-mobile {
        display: inline;
    }
}


.secret-section {
    margin-bottom: 6rem;
}

.secret-item {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.4rem;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.secret-item-content {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    justify-content: center;    /* 子项水平居中 */
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}

/* 底部双表格 secret-item：两个块均分宽度（一半一半） */
.secret-item--double-table > .secret-item-content > div {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* 右侧列：上面文字块，下面表格 */
.secret-item-right {
    flex: 1 1 24rem;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: end;
    box-sizing: border-box;
    padding: 15px 0;
}

/* 图片下方/旁边文字块：最大承载质量 */
.image-caption-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d7e6;
    border-radius: 0.6rem;
    padding: 0.8rem 1.6rem;
    font-size: 1.6rem;          /* 正文段落：16px / 1.6 */
    line-height: 1.6;
    color: #333;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: center;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.image-caption-box .highlight-num {
    font-size: 1.6rem;
    margin-left: 0.6rem;
    color: #0d2ea0;
    font-weight: 500;
}

.secret-image {
    flex: 1 1 40%;
    max-width: 50%;
    height: auto;
    border-radius: 0.4rem;
    margin: 0px auto 0;
    padding: 15px;
    box-sizing: border-box;
}

.secret-item-content > div > .secret-image {
    max-width: 100%;
}

/* secret-item-content 直接子项（图片/图片块/表格块）必须能缩 */
.secret-item-content > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- 图片下方居中说明文字（图片内说明：B7 辅助说明） ---------- */
.img-caption {
    text-align: center;
    font-size: 1.4rem !important;     /* B7 辅助说明 14px */
    line-height: 1.5;
    color: #333;
    margin-bottom: 1.5rem !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ---------- 块标题 / 副标题 / 高亮 ---------- */
.block-title {
    text-align: center;
    font-size: 1.6rem;                  /* 与正文一致 */
    line-height: 1.5;
    font-weight: 600;                   /* B3 语义下相应用 600 */
    color: #000 !important;
    margin: 0 0 8px 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.block-title .highlight {
    color: #0d2ea0;                     /* 只保留颜色，字号继承父级 */
}
.block-subtitle {
    text-align: center;
    font-size: 1.2rem;                  /* B8 页脚小字 12px */
    line-height: 1.5;
    color: #333;
    letter-spacing: 0.02em;
    margin: 0 0 10px 0;
}
.highlight-num {
    color: #333;
    font-weight: 600;
    font-size: 1.4rem;                  /* B7 辅助说明 14px */
}

/* ---------- 扩展表格：脚注样式（B8 页脚小字） ---------- */
.spec-table-extend tfoot td.table-note {
    background: #fff;
    color: #333;
    font-size: 1.2rem;                  /* B8 页脚小字 12px */
    line-height: 1.5;
    letter-spacing: 0.02em;
    border-top: 0 solid #d0d7e6;
    border-bottom: 0 solid #d0d7e6;
    border-left: none;
    border-right: none;
    text-align: right;
    padding: 0.6rem 1rem;
    white-space: nowrap;
}

/* 表格下方脚注段落（B8 页脚小字） */
.table-note {
    text-align: right;
    font-size: 1.2rem;                  /* B8 页脚小字 12px */
    line-height: 1.5;
    color: #333;
    letter-spacing: 0.02em;
    margin: 0.6rem 1rem 0 0;
}

/* 表格中的上标不增加行高（让左右两表高度一致） */
.spec-table sup {
    font-size: 1.2rem;
    vertical-align: super;
    line-height: 0;
    top:0;
}

/* 左表：首位空表头列采用蓝底但隐藏文字 */
.spec-table-extend thead th.empty-head {
    background: #0d2ea0;
    color: #0d2ea0;
    font-size: 0;
    line-height: 0;
    padding: 1.2rem 0;
}

/* 定位时间表中 B 轴转速单元格（原内联样式迁移） */
.spec-table .td-b-axis-speed {
    padding: 0.45rem 1.2rem;
}

.secret-item p {
    font-size: 1.5rem;                  /* 正文 15px / 1.86（参考官方文章 a0062） */
    line-height: 1.86;
    color: #333;
    font-weight: 400;
    margin-bottom: 1rem;                /* 卡片内保持紧凑 */
}


/* ==========================================================
   表格样式 - 完整版
   桌面 ≥1024px | 平板 768-1023px | 手机 ≤767px | 小屏 ≤480px
   排版按 B5 正文段落 16px / 1.6 / 400
   ========================================================== */

/* ---------- 表格容器 ---------- */
.spec-table-wrap {
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
    margin: 2rem 0;
    box-sizing: border-box;
}

/* ---------- 表格主体（桌面端默认 ≥1024px） ---------- */
.spec-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 1.6rem;                  /* B5 正文段落 16px */
    line-height: 1.6;
    font-weight: 400;
    min-width: 0;
    table-layout: auto;
}

/* ---------- 所有单元格 ---------- */
.spec-table th,
.spec-table td {
    border: 1px solid #d0d7e6;
    padding: 0.8rem 1.2rem;
    text-align: center;
    vertical-align: middle;
    min-height: 5rem;
    font-size: 1.6rem;                  /* B5 正文段落 16px */
    line-height: 1.6;
    font-weight: 400;
}

/* ---------- 表头（thead）样式 ---------- */
.spec-table thead th {
    background: #0d2ea0;
    color: #fff;
    font-weight: 600;                   /* 表头略加重 500/600 */
}

/* ---------- 表体左侧行标题（th）样式 ---------- */
.spec-table tbody th {
    background: #f0f4ff;
    color: #0d2ea0;
    font-weight: 600;
    text-align: left;
}

/* ---------- 表体普通数据单元格 ---------- */
.spec-table tbody td {
    background: #fff;
    color: #333;
}

/* 含单位的单元格（6.0kg·m² 等）：无论字体宽度如何，数字+单位保持一行不换行 */
.spec-table td:has(.unit) {
    white-space: nowrap;
}

/* ----- 表体第一列：项目（左对齐、蓝色加粗） ----- */
.spec-table tbody td:nth-child(1) {
    color: #0d2ea0;
    font-weight: 600;
    text-align: center;
    background-color: #f0f4ff;
}

/* ===== 第三列（规格）样式 ===== */
.spec-table tbody td:nth-child(3) {
    color: #333;
    text-align: center;
}
.spec-table tbody td:nth-child(3) .unit,
.spec-table tbody td:nth-child(3).unit,
.spec-table tbody td:nth-child(3) .sub-label,
.spec-table tbody td:nth-child(3).sub-label {
    color: #888;
}

/* ---------- 辅助类 ---------- */
.spec-table .group-header {
    background: #e8edf9;
    font-weight: 600;
    color: #0d2ea0;
    text-align: left;
}
/* 表格内 sub-label：B7 辅助说明 14px */
.spec-table .sub-label {
    font-weight: 400;
    color: #555;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* 表格内 unit：跟随表格 B5 16px */
.spec-table .unit {
    font-size: 1.6rem;
    color: #888;
    display: inline-block;
    line-height: 1.6;
}


/* ==========================================================
   平板端 (768px ~ 1023px) —— 表格专属适配
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .spec-table {
        font-size: 1.6rem;              /* B5 平板保持 16px */
        line-height: 1.6;
        width: 100%;
    }
    .spec-table th,
    .spec-table td {
        font-size: 1.6rem;
        line-height: 1.6;
        padding: 0.6rem 0.9rem;
    }
    .spec-table .unit {
        font-size: 1.6rem;
    }
    .spec-table .sub-label {
        font-size: 1.4rem;
    }
}


/* ==========================================================
   手机端 (≤767px) —— 表格布局（字号已由 ≤900px 断点统一控制）
   ========================================================== */
@media (max-width: 767px) {
    .spec-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        min-width: 0 !important;
    }
    .spec-table th,
    .spec-table td {
        padding: 0.3rem 0.4rem;
        word-break: normal;     /* 不主动断行（中文长文本仍可按 CJK 规则换行） */
    }
    /* 通用：单元格手机端左对齐（需要时给 td 加 td-left 类即可） */
    .spec-table .td-left {
        text-align: left;
    }
    .spec-table-wrap {
        overflow: hidden !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 1rem 0;
    }
    .spec-table .unit {
        word-break: keep-all;
        white-space: nowrap;    /* 单位（kg·m² 等）不换行 */
    }
    /* 底部双表格 secret-item：手机端改为上下堆叠（间距由 ≤900px 断点控制） */
    .secret-item--double-table .secret-item-content > div {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    .secret-item--double-table .spec-table {
        table-layout: auto;
    }
    .secret-item--double-table .spec-table th,
    .secret-item--double-table .spec-table td {
        padding: 0.3rem 0.4rem;
        word-break: normal;
    }
    .secret-item--double-table .spec-table .table-note {
        padding: 0.4rem 0.6rem;
        white-space: normal;
    }

    /* 保持图片左 + 表格右 的左右排列（不强制上下堆叠） */
    .secret-item-content {
        flex-direction: row;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .secret-item-content > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .secret-item-right {
        gap: 1.2rem;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 24rem;
    }
    /* 底部两块表格（两个 div）均分宽度、可收缩 */
    .secret-item-content > div {
        flex: 1 1 22rem;
        min-width: 0;
    }
    .image-caption-box {
        margin-top: 0;
    }
    /* 防止整个页面被表格撑宽出现横向滚动 */
    body, html {
        overflow-x: hidden !important;
    }
    .secret-item {
        overflow-x: hidden;
    }
}


/* ==========================================================
   小屏手机 (≤480px) —— 布局微调（字号已由 ≤900px 断点统一控制）
   ========================================================== */
@media (max-width: 480px) {
    .spec-table {
        width: 100%;
        table-layout: fixed;
    }
    .spec-table th,
    .spec-table td {
        padding: 0.3rem 0.4rem;
        word-break: normal;
    }
    .spec-table .unit {
        word-break: keep-all;
    }
    /* 底部双表格 secret-item：极窄屏同样上下堆叠 */
    .secret-item--double-table .secret-item-content > div {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }
    .secret-item--double-table .spec-table {
        table-layout: fixed;
    }
    .secret-item--double-table .spec-table th,
    .secret-item--double-table .spec-table td {
        padding: 0.3rem 0.4rem;
        word-break: normal;
    }
    .secret-item--double-table .spec-table .table-note {
        padding: 0.4rem 0.6rem;
        white-space: normal;
    }
    .secret-item-content > * {
        max-width: 100%;
        min-width: 0;
    }
    .secret-item-right {
        width: auto;
        flex: 1 1 20rem;
    }
    /* 极窄屏下，图片与右侧表格仍尽量左右排列；空间实在不够时再允许换行 */
    .secret-item-content {
        flex-wrap: wrap;
    }
}


.conclusion {
    text-align: center;
}

.conclusion p {
    font-size: 1.5rem;                  /* 正文 15px / 1.86 */
    line-height: 1.86;
    color: #0d2ea0;
    font-weight: 600;
    margin-bottom: 2rem;
}

.conclusion-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.4rem;
    margin: 2rem 0;
}


/* ==========================================================
   按钮样式（按 B6 导航/按钮 16 / 15 / 16 px  / 1.5  / 500）
   ========================================================== */

/* ---------- 按钮容器 ---------- */
.consult-btn-container {
    text-align: center;
    margin: 3rem 0;
}
.consult-btn-container a{
    opacity: 1;
    color: #fff;
}

/* ---------- 按钮基础（移动端默认 ≤767px） ---------- */
.consult-btn {
    color: #fff;
    font-size: 2rem;                    /* 手机端按钮 20px */
    line-height: 1.5;
    font-weight: 500;
    padding: 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    border: none;
    min-width: 22rem;
    height: 5.6rem;
    position: relative;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

/* 背景渐变层 */
.consult-btn .btn-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(135deg, #0d2ea0, #1a4bbf);
    transition: filter 0.3s ease;
    border-radius: 8px;
}

/* 文字和图标在顶层 */
.consult-btn .btn-text,
.consult-btn .btn-icon {
    position: relative;
    z-index: 1;
}
.btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 1rem;
    position: relative;
    z-index: 1;
}

/* ---------- 底部白线 ---------- */
.consult-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: #ffffff;
    transition: width 0.35s ease, left 0.35s ease;
    z-index: 2;
    border-radius: 2px;
}

/* ---------- 悬停效果（无位移） ---------- */
.consult-btn:hover {
    box-shadow: 0 8px 30px rgba(13, 46, 160, 0.5);
}
.consult-btn:hover .btn-bg {
    filter: brightness(0.88);
}
.consult-btn:hover::after {
    width: 100%;
    left: 0;
}


/* ==========================================================
   平板端 (768px ~ 1023px) —— 按钮专属适配 (B6 平板 15px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .consult-btn {
        font-size: 1.5rem;              /* B6 平板 15px / 1.5 */
        line-height: 1.5;
        min-width: 24rem;
        height: 5.8rem;
        padding: 0 2.4rem;
    }
    .btn-icon {
        width: 2.6rem;
        height: 2.6rem;
    }
}


/* ==========================================================
   桌面端 (≥1024px) —— 按钮专属适配 (B6 PC 16px)
   ========================================================== */
@media (min-width: 1024px) {
    .consult-btn {
        font-size: 2rem;                /* PC 按钮 20px */
        line-height: 1.5;
        min-width: 28rem;
        height: 6.5rem;
        padding: 0 3rem;
    }
    .btn-icon {
        width: 3rem;
        height: 3rem;
    }
}


/* ==========================================================
   触屏设备禁用悬停效果
   ========================================================== */
@media (hover: none) {
    .consult-btn:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    .consult-btn:hover .btn-bg {
        filter: none !important;
    }
    .consult-btn::after {
        display: none !important;
    }
}


/* ==========================================================
   基础移动端适配（PC 共享样式外的补充；字号已由 ≤900px 断点统一控制）
   ========================================================== */
@media (max-width: 767px) {
    .img-pc {
        display: none;
    }

    .img-sp {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .content-container {
        padding: 2rem 1rem;
    }

    /* 手机端：零件特点说明 + 方案介绍正文，左右内边距 1.5rem */
    .part-column-center p,
    .solution-section p {
        padding: 0 1.5rem;
    }

    /* 手机端：难题区块底部间距收紧 */
    .problem-section {
        margin-bottom: 2rem;
    }

    /* 手机端：秘籍分隔线下无间距 */
    .hr-divider-lg {
        margin: 0 0 0rem 0;
    }

    .secret-item {
        padding: 1.5rem;
    }

    .part-image {
        max-width: 100%;
        flex-direction: column;
    }

    .problem-section > .part-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .problem-section > .part-layout > div {
        flex: none !important;
        width: 100%;
    }

    .problem-section > .part-layout img {
        max-width: 100%;
    }

    .secret-item-content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .cta-button {
        padding: 0.8rem 2rem;
        line-height: 1.5;
    }
}

@media (min-width: 768px) {
    .secret-item {
        padding: 0rem;
    }
}

/* ==========================================================
   覆盖站点公共样式 (common.css) 对文章模块的干扰
   ------------------------------------------------------------
   common.css 中存在以下会影响本文章布局的规则：
     1. .mod-compoundA024 { margin: 40px 0; }              （桌面端主图块上下间距）
     2. @media (max-width:640px){ .mod-compoundA024 { margin: 40px -10px; } }
                                                           （移动端负边距，造成横向溢出）
     3. @media (max-width:640px){ .mod-compoundA024_img { width: auto; margin-bottom: 40px; } }
                                                           （覆盖文章自定的主图样式）
   此处用 !important 强制覆盖，确保文章布局稳定（不受 CMS 样式加载顺序影响）。
   ========================================================== */
.mod-compoundA024 {
    margin: 0 !important;
}

@media screen and (max-width: 640px) {
    .mod-compoundA024 {
        margin: 0 !important;
    }
    .mod-compoundA024_img {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   通用列表样式（参考官方文章 a0062 的 .list-box）
   ------------------------------------------------------------
   仅作用于文章正文的三个 section（problem/solution/secret），
   不影响 content-container 内的模板模块（如 mod-bannerList 更多机型）
   ul/ol：15px / 1.86，margin 10px 10px 30px，padding-left 1em
   （problem-list 为自定义编号列表，排除在外）
   ========================================================== */
.content-container > section ul:not(.problem-list),
.content-container > section ol:not(.problem-list) {
    margin: 1rem 1rem 3rem;
    padding-left: 1em;
    font-size: 1.5rem;
    line-height: 1.86;
    color: #333;
}
.content-container > section ul:not(.problem-list) {
    list-style: disc;
}
.content-container > section ol:not(.problem-list) {
    list-style: decimal;
}
.content-container > section ul:not(.problem-list) > li > ul,
.content-container > section ol:not(.problem-list) > li > ul {
    margin: 0.5rem 0;
    list-style: "-  ";
}
/* 覆盖站点模板 layout.css 的 ul, li { list-style: none }：
   让 li 继承父级列表的圆点/序号，否则 li 上的 marker 不显示
   （限定在文章 section 内，不影响模板模块） */
.content-container > section li {
    list-style: inherit;
}
.problem-list li {
    list-style: inherit;
}

/* 不干预模板"更多机型介绍文章"（mod-bannerList）模块的段落样式：
   全局 p 规则的首行缩进/段距不作用于模板模块 */
.mod-bannerList p {
    text-indent: 0;
    margin-bottom: 0 !important;
}


/* ==========================================================
   窄屏（≤900px）正文 vw 缩放（参考官方文章 a0062）
   ------------------------------------------------------------
   官方文章在 max-width:900px 断点将正文设为
   font-size: 3.6vw; line-height: 1.86; 段距 9.66vw
   放在文件末尾以覆盖 ≤767px 断点的固定字号
   ========================================================== */
@media (max-width: 900px) {
    /* 外层包裹：banner + 正文整体 90% 宽、居中（参考官方 mod-freeHTML .wrap） */
    .article-wrap {
        width: 90%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    /* 正文容器：占满外层包裹宽度 */
    .content-container {
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding-top: 7.25vw;
    }
    p,
    .problem-item,
    .problem-item p,
    .feature-section p,
    .solution-section p,
    .secret-item p,
    .part-column p {
        font-size: 3.6vw;
        line-height: 1.86;
    }
    /* 段落间距 4.83vw（参考官方 html[lang=zh-Hans] .contents-box p / table；
       限定文章 section 内，不影响模板模块） */
    .content-container > section p {
        margin-bottom: 4.83vw;
    }
    /* li 与 p 行距一致（继承 + 显式 1.86；限定文章 section 内） */
    .content-container > section li {
        line-height: 1.86;
    }
    .content-container > section ul:not(.problem-list),
    .content-container > section ol:not(.problem-list) {
        margin-bottom: 9.66vw;
        font-size: 3.6vw;
        line-height: 1.86;
    }
    /* 方案主图（p2）窄屏宽度 75% */
    .solution-image {
        width: 75%;
    }
    /* H2 字号跟随官方（5.07vw / 0 / 2.42vw） */
    .problem-section h2,
    .secret-section h2 {
        font-size: 5.07vw;
        line-height: 1.47;
        margin-bottom: 0;
        padding-bottom: 2.42vw;
    }
    .secret-section h2 {
        margin-top: 2rem;
    }
    .solution-section h2 {
        font-size: 5.07vw;
        margin-bottom: 4vw;
        line-height: 1.6;
        padding: 1.5rem;
    }
    /* 标题下方分隔线间距 4vw（官方布局） */
    .hr-divider {
        margin-bottom: 4vw;
    }
    /* H3 字号跟随官方（4.3vw / 6vw） */
    .secret-item h3 {
        font-size: 4.3vw;
        line-height: 1.5;
        margin-bottom: 6vw;
    }
    /* 表格字号跟随正文 3.6vw（!important 覆盖各断点双表格的高特异性规则） */
    .spec-table {
        font-size: 3.6vw !important;
        line-height: 1.86;
    }
    .spec-table th,
    .spec-table td {
        font-size: 3.6vw !important;
        line-height: 1.86;
    }
    .spec-table .unit,
    .spec-table .sub-label {
        font-size: 3.6vw !important;
    }
    /* 表格内其余文字（上标/脚注/组标题）统一 3.6vw */
    .spec-table sup,
    .spec-table .table-note,
    .spec-table-extend tfoot td.table-note,
    .spec-table .group-header {
        font-size: 3.6vw !important;
    }
    /* 双表格脚注：窄屏 2.7vw */
    .secret-item--double-table .spec-table .table-note {
        font-size: 2.7vw !important;
    }
    /* 表格上标（*）：窄屏 2vw */
    .spec-table sup {
        font-size: 2vw !important;
    }
    /* 块标题（表格上方说明）：窄屏下间距 2vw */
    .block-title {
        margin-bottom: 2vw !important;
    }
    /* 零件特点两栏：窄屏改为块级上下堆叠 */
    .part-layout {
        display: block;
    }
    /* secret-item-content 下子项：窄屏纵向排列 */
    .secret-item-content > div {
        flex-direction: column;
    }
    /* 双表格区块：窄屏上下堆叠 */
    .secret-item--double-table .secret-item-content {
        flex-direction: column;
        gap: 1.2rem;
    }
    /* 按钮文字：窄屏字号 4.1vw、行高 5.4vw */
    .btn-text {
        font-size: 4.1vw;
        line-height: 5.4vw;
    }
    /* 按钮高度与图标尺寸换算 vw（1rem≈2.25vw：5.6rem→12.6vw，2.4rem→5.4vw） */
    .consult-btn {
        height: 12.6vw;
    }
    .btn-icon {
        width: 5.4vw;
        height: 5.4vw;
    }
    /* 其余元素字号统一换算为 vw（基准：3.6vw ≈ 1.6rem，vw = rem × 2.25） */
    .image-caption-box,
    .cta-button,
    .block-title {
        font-size: 3.6vw;           /* 原 1.6rem/16px */
    }
    .image-caption-box .highlight-num {
        font-size: 3.6vw;           /* 原 1.6rem */
    }
    .highlight-num {
        font-size: 3.15vw;          /* 原 1.4rem */
    }
    .block-subtitle {
        font-size: 2.7vw;           /* 原 1.2rem/12px */
    }
    /* 图片说明：窄屏字号 3.15vw */
    .img-caption {
        font-size: 3.15vw !important;
        margin-bottom: 1vw !important;
        margin-top: 5vw;
    }
    /* 图片宽度工具类（≤900px 手机端，按需给 img 添加 class 控制大小，未来新网页可直接复用） */
    .img-70,
    .img-80,
    .img-90,
    .img-100 {
        display: block;
        flex: 0 0 auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto;              /* 居中 */
    }
    .img-70 { width: 70%; }
    .img-80 { width: 80%; }
    .img-90 { width: 90%; }
    .img-100 { width: 100%; }
    /* 详情图（secret-image）：窄屏取消 flex 约束、无内边距，宽度交给工具类控制 */
    .secret-item-content .secret-image {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 0;
    }
    /* 高亮文字：只修改颜色，不改变字号（字号继承父级 block-title） */
    .block-title .highlight {
        color: #0d2ea0;
    }
}