/* ================================================================
   中大咨询 ·「核心优势」模块样式（数字主导型）v10
   适用页面：https://www.mpgroup.cn/consult_tzyjbg.html
   上传位置：犀牛云后台 → 插件Css / 外部插件样式 → 选择本文件（请选 zd-adv-v11.css）
   ----------------------------------------------------------------
   ★ v11 相对 v10：只改了一处，补上「移动端」漏掉的那半 ★
   ----------------------------------------------------------------
   v10 立的原则是「本文件只碰四列卡片区，标题区零干预」，
   PC 端做到了（挂着与完全不挂，标题区逐项相同）；
   但**移动端漏了一条**：
       @media (max-width:768px){ #s50033{padding:0 20px} }
   padding 挂在 section 上，这个 section 里的所有后代都跟着内缩，
   标题区的眉标与主句一起被推进来 20px。

   线上实测（2026-09-15）：
     核心优势 眉标文字左边界 x=41   ← 被推
     站内其他栏目 眉标左边界 x=23   ← 全站 17 个 section 的 secPad 全是 0px
   差 18px，手机上肉眼可见。

   而这条留白**不能删**：实测完全不挂插件 CSS 时，卡片文字 x=0，
   直接贴屏边、末字被切。所以 v11 的做法是「挪位置」——
   把 padding 从 section 挪到卡片行 .row:has(> .col-lg-3) 上。
   结果：卡片区几何与 v10 逐像素相同（x=20 / 宽 350），
        眉标回到 x=21（站内标准 23，差 2px，不可见）。

   ================================================================
   ★ 以下为 v10 的说明，仍然有效 ★
   ================================================================
   ★ v10 的主题：把「标题区」彻底还给设计器 ★
   ----------------------------------------------------------------
   你问：为什么这份 CSS 本来只想管卡片（红圈），结果标题区（黄圈）
   也被改了？答案两条，都已修掉。

   【漏点 1】选择器写成了 section 级
      #s50033 .xg_html{overflow:visible}
      #s50033 .xg_html p{margin:0}
   这两条本意是给卡片用的（让数字悬停上浮不被裁、把卡片段落的外边距
   清零），但 #s50033 这个 section 里同时装着头（标题行）和身子（四列行）
   —— 于是标题的两个 .xg_html 也被命中：
     · overflow:visible 让标题段落的 margin 不再被宿主裁住、塌陷出去
     · margin:0 把平台给标题段落的外边距清成了 0
   v10 收窄为「只认卡片里的 .xg_html」：
      #s50033 .row > .col-lg-3 .xg_html{...}

   【漏点 2】第 2 节整段就是在给标题写样式
   其中这一行直接制造了你看到的那个间隔：
      .xg_html:nth-child(2) p{ margin-top:22px; line-height:1.5 }
   实测（真 Chrome + 服务器三源文件一比一复现）：
      挂 v9 时：眉标文字底 → 主句文字顶 = 38px
      不挂时  ：                       = 29px   ← 平台原本的值
   差值 9px 就是它。而逐条比对后确认：**平台自己的标题样式与站内其他栏目
   完全一致**（眉标 34px/700/居中/字距 12px/#484848，主句 22px/400/居中/
   字距 2px/#666），我们那套本来就是重复劳动。
   → v10 把第 2 节整段删除。标题的字号、颜色、字距、对齐、间距全部由
     设计器与平台决定，要调就在设计器里调。

   【一句话原则】
     本文件只碰「四列卡片区」。标题区（眉标 + 主句）零干预，
     **PC 端与移动端都是** ——
     验证方式：挂着本文件与完全不挂插件 CSS，标题区的盒位置、间距、
     全部文字样式**逐项相同**（v11 起移动端也满足）。

   ----------------------------------------------------------------
   ★ 相对 v9 只动了三处正文，其余一字不差 ★
   ----------------------------------------------------------------
   ① 上面两条 section 级选择器收窄到卡片区；
   ② 第 2 节（标题区）整段删除，连同标题行的入场动效；
   ③ PC 描述字号 13.5px → 14px、行高 1.9 → 1.85
      原因：PC 描述原来比手机端的 14px 还小，不合常理，现在两端统一。

   ★ 一条建议已撤回（实测后判定不必改）★
     上一轮我提过「手机端内容宽 312px 要补到站内的 348px」。
     v10 实测：手机端卡片 x=20、宽 350（左右各留 20px），
     站内其他栏目是 x=21、宽 348（左右各留 21px）—— 差 1px，
     肉眼不可见。此条作废，本文件不动宽度。

   ★ 顺便澄清一条「看着像 bug」的现象 ★
     卡片描述段落，平台默认是 text-align:justify（两端对齐，中文会被
     拉成均匀字距），本文件用 text-align:left !important 压掉。
     注意：**设计器里的预览不加载插件 CSS**，所以你在设计器里看到的
     仍是 justify 的拉散效果；线上是左对齐。这不是本文件失效。

   ----------------------------------------------------------------
   ★ 沿用 v8/v9 的结论：全文零「平台哈希类名」★
   ----------------------------------------------------------------
   v6 / v7 被后台拒收（提示「禁止使用私有样式名或者ID」），2026-09-14 18:50
   用服务器上的文件逐个比对，把因果坐实了：
     · 被拒的不是 ID，是平台私下生成的哈希类名（形如 p2207m+哈希）；
       校验器扫全文，连注释里的引用也算。
     · v5 全文写了 72 处本模块 section 的 ID → 上传通过，线上一直在生效。
     · v6 正文与 v5 一字不差，只因注释里引用了 4 个哈希类名 → 被拒。
     · v7 正文改用哈希类名当锚点 → 照样被拒。
   所以本文件：正文零哈希名、注释零哈希名；锚点只用 #s50033（设计器分配的
   section ID，页内唯一）+ 平台公共类（.container / .row / .col-lg-3 / .xg_html）。

   栅格策略（沿用各版，别改）：**不接管四列列宽**，交给平台自己的浮动态栅格
   （col-lg-3 = 25%），与站内其他板块同源同断点；本文件只负责「外观 + 动效 + 卡内排版」。

   ── 为什么卡内三行带 !important ──────────────────────────────
   平台把「数字 / 单位」放在两个各占一半宽的栅格列里，结构本身就决定了
   单位会落在列中线上。必须用 flex + 内容宽把这两栏拉成"紧挨着的一行"，
   再让整行居中。而平台给这些行列写的栅格声明优先级不低，所以这几条要 !important。
   注意：!important 只出现在卡「内」三行；四列本身绝不接管 width / float，
   否则会重演「PC 端四列塌成一列」。

   ★ 还有规则作用于标题区吗？★
     没有。v10 连标题行的入场动效也删了 ——「滚动淡入」现在只作用于
     四列卡片。若想让标题也跟着淡入，打开文件末尾的开关即可。

   用法：整份文件直接使用，不需要改任何值。
   ================================================================ */


/* ---------------------------------------------------------------
   0. 变量区（要改数字/颜色，只改这里）
   --------------------------------------------------------------- */
#s50033{
  --zd-brand:#d0121b;          /* 品牌红 */
  --zd-brand-deep:#a80e16;     /* 悬停加深红 */
  --zd-num-color:#d0121b;      /* 大号数字颜色 */
  --zd-num-size:44px;          /* 大号数字字号 */
  --zd-unit-color:#8a8a8a;     /* 单位后缀颜色（大领域 / + / 大核心数据库） */
  --zd-unit-size:15px;         /* 单位后缀字号 */
  --zd-unit-gap:2px;           /* 数字与单位之间的空隙 */
  --zd-title-color:#333333;    /* 小标题颜色 */
  --zd-title-size:18px;        /* 小标题字号 */
  --zd-desc-color:#565656;     /* 描述颜色 */
  --zd-desc-size:14px;         /* 描述字号（v10：与手机端统一 14px，原来 PC 反而更小） */
  --zd-desc-line:1.85;         /* 描述行高 */
  --zd-head-eyebrow:#484848;   /* 眉标颜色（对齐站内其他板块） */
  --zd-head-sub:#666666;       /* 主句颜色 */
  --zd-rule:#e9e9e9;           /* 四列之间的竖向分隔线 */
  /* 区块上下留白已交给设计器，本文件不设（原 --zd-pad-y:72px） */
  --zd-col-pad:30px;           /* 四列各自左右内边距 */
  --zd-group-max:1280px;       /* 四列组最大宽度（站内标准内容宽） */
  --zd-ease:cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------------
   1. 区块外框
   --------------------------------------------------------------- */
#s50033{padding:0}

/* ★ 作用域刻意只到「卡片」★
   平台的 .xg_html 默认 overflow:hidden，会把数字悬停时的上浮和光晕裁掉；
   卡片里的段落也要把外边距清零。但这几条**不能**写成 section 级
   （#s50033 .xg_html）—— 那个 section 里还装着标题区，一写就漏过去。
   v9 正是漏在这里；v10 收窄为「只认 .col-lg-3 里的 .xg_html」。 */
#s50033 .row > .col-lg-3 .xg_html{overflow:visible}
#s50033 .row > .col-lg-3 .xg_html p{margin:0}


/* ---------------------------------------------------------------
   2. 标题行（眉标 + 主句）—— ★ 本文件不管，整段交回设计器 ★
   ---------------------------------------------------------------
   v9 及以前，这里写过一整套标题样式（字号 / 颜色 / 字距 / 对齐 / 间距）。
   v10 全部删除，三个理由：

   ① 它是冗余的。实测：完全不挂插件 CSS 时，平台的标题样式就是
        眉标 34px / 700 / 居中 / 字距 12px / #484848
        主句 22px / 400 / 居中 / 字距 2px  / #666
      与站内其他栏目一致 —— 我们写的那套和平台给的完全一样。

   ② 它制造了你不想要的结果。其中
        .xg_html:nth-child(2) p{ margin-top:22px; line-height:1.5 }
      把「眉标 → 主句」的间隔从平台的 29px 改成了 38px。
      你反馈的「标题副标题之间有间隔」，来源就是这 9px。

   ③ 你的原则是「位置和间距我自己在设计器里调」——
      那么字号、颜色、对齐、间距就该由设计器与平台决定，CSS 不越界。

   → 现在标题区（含手机端）零干预。要调标题，进设计器点中那些控件调。
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   3. 四列外框（列宽交给平台栅格，这里只管外观）
   —— 平台的 col-lg-3 是 float:left + 25%，四列天然等宽；
      只补「盒模型 + 内边距 + 悬停光带」，不碰 width / float
   --------------------------------------------------------------- */
#s50033 .row > .col-lg-3{
  position:relative;
  box-sizing:border-box;
  padding:4px var(--zd-col-pad);
  /* 悬停时从底部升起的浅红光带 */
  background-image:linear-gradient(180deg,rgba(208,18,27,0),rgba(208,18,27,.055));
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 0;
  transition:background-size .55s var(--zd-ease);
}

/* 四列组：限宽居中。平台为每个模块容器写的是 width:100%（满 1600 画布），
   站内其他板块靠「包裹列的百分比内边距」做留白；这里再兜一道限宽，
   保证无论包裹列有没有设内边距，四列组都不会顶到屏幕边缘。
   :has() 不支持的浏览器会整条丢弃，栅格退回平台默认 —— 不影响可用性。 */
#s50033 .row:has(> .col-lg-3){
  max-width:var(--zd-group-max);
  margin-left:auto;
  margin-right:auto;
}

/* 竖向分隔线（静态灰线） */
#s50033 .row > .col-lg-3::before{
  content:"";
  display:block;
  position:absolute;
  top:4px;
  bottom:4px;
  right:0;
  width:1px;
  background:var(--zd-rule);
  pointer-events:none;
}
#s50033 .row > .col-lg-3:last-child::before{display:none}

/* 竖向分隔线（悬停时自上而下亮起的红光） */
#s50033 .row > .col-lg-3::after{
  content:"";
  display:block;
  position:absolute;
  top:4px;
  bottom:4px;
  right:0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--zd-brand),transparent);
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform .6s var(--zd-ease);
  pointer-events:none;
}
#s50033 .row > .col-lg-3:last-child::after{display:none}
#s50033 .row > .col-lg-3:hover::after{transform:scaleY(1)}


/* ===============================================================
   ★★ 宽度兜底（设计器优先）★★
   ---------------------------------------------------------------
   优先做法：在设计器里点中控件 → 右侧属性面板「宽度」→ 选「自动」。
             平台会把它编译成 width:auto（2026-09-14 实测：16 个控件从
             width:160px 全变成 width:auto）。
   下面这几条 !important 宽度只是**兜底**：万一哪天又在设计器里填了固定宽度，
   有它们在就不会重演「数字贴左、单位甩到中线」。不改宽度也不会坏事。
   ---------------------------------------------------------------
   （以下是 v6 当时坐实的根因，留档）
   ---------------------------------------------------------------
   平台的页面 CSS 里，模块内**每一个文字块**都有一条独立规则写死宽度：

     平台为该控件生成的哈希类名{ width:160px }   ← 数字「5」
     平台为该控件生成的哈希类名{ width:160px }   ← 单位「大领域精英人才」
     平台为该控件生成的哈希类名{ width:160px }   ← 小标题「全域复合团队」
     平台为该控件生成的哈希类名{ width:auto }    ← 描述（只有这条是 auto）

   而卡片当时的可用内容宽只有 320−(30×2)=260px。于是：
     · 数字行两个子列被撑成 160+160=320px > 260px → 溢出居中，
       数字在自己的 160px 盒里居中（跑到列中线左侧），
       单位在第二个 160px 盒里左对齐（正好落在列中线右侧）
       —— 这就是「数字贴左、单位被甩到中线」的真正原因（前五版都没碰这个属性）
     · 小标题的 160px 盒从列左侧起算，居中点落在列中线左 50px 处
     —— 这就是「标题偏左 50px」的原因

   下面的规则把宽度交还给布局系统。注意必须 !important：
   平台那条是 .p2207m<hash> 类选择器（0-1-0），我们这条是 (1-2-0)，
   本来就赢；写上 !important 是为了防住平台以后改成行内 style。
   =============================================================== */
#s50033 .row > .col-lg-3 .xg_html{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* 数字行里的文字块：按内容收缩，才可能两个紧挨在一起。
   这条要压在 .col-lg-6 那一层之上，所以单独再声明一次。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) .xg_html,
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row .xg_html{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

/* ===============================================================
   4. 卡内第 1 行：大号数字 + 单位后缀
   —— v4 核心修复区：平台在这行的行 / 列 div 上写了行内 style
      （宽度 50%、可能还带 float、padding），必须用 !important 才压得住。
      目标：数字与单位按内容宽度紧挨着、基线对齐、整体在列内居中。
   =============================================================== */
#s50033 .row > .col-lg-3 > .row:nth-child(1){
  position:relative;
  display:flex !important;          /* 压掉平台的两栏浮动 */
  align-items:baseline !important;  /* 数字与单位同基线 */
  justify-content:center !important;/* 整体在列内居中 */
  float:none !important;
  margin:0 !important;
  padding:0 0 22px !important;
}

/* 行内两个子元素：宽度按内容收缩，才可能紧挨在一起。
   用 `> *` 而不是 `> div`，避免平台换了标签就失配；
   再补一条 `[class*="col-"]`（平台的栅格列类），双保险。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *,
#s50033 .row > .col-lg-3 > .row:nth-child(1) > [class*="col-"]{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  flex:0 0 auto !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box;
  text-align:inherit;
}

/* v5 兜底①：万一平台在数字行里面**又套了一层行**（.row > .col-lg-6 > .row > .col-lg-12），
   光压外层不管用，里层那对 50% 浮动列还在。下面两条把里层也拉成 flex + 内容宽。
   没有嵌套行时这两条不匹配，纯冗余，不会坏事。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row{
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box;
}

/* 这一行被改成 flex 后，站点栅格挂在 .row 上的清浮动伪元素
   （.row 的 :before，内容是空格、display:table）会变成一个 flex 项，
   所以只对这一行单独屏蔽；本行自己的下划线在下面另行声明。
   其余 .row 里还躺着 float:left 的列，全靠那对伪元素清浮动，不能一起动。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1)::before{
  content:none;
  display:none;
  clear:none;
}

/* 数字下方那条短线：悬停时向两侧延展
   （display 必须显式声明，否则会被上面那条屏蔽规则压成 none） */
#s50033 .row > .col-lg-3 > .row:nth-child(1)::after{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  bottom:0;
  width:26px;
  height:3px;
  margin-left:-13px;
  border-radius:2px;
  background:var(--zd-brand);
  transition:width .55s var(--zd-ease),margin-left .55s var(--zd-ease);
}

/* 大号数字 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(1) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) > .xg_html:nth-child(1) p{
  font-size:var(--zd-num-size) !important;
  font-weight:700 !important;
  color:var(--zd-num-color) !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  transition:transform .45s var(--zd-ease),color .45s var(--zd-ease),text-shadow .45s var(--zd-ease);
}

/* 单位后缀 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(2) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) > .xg_html:nth-child(2) p{
  font-size:var(--zd-unit-size) !important;
  font-weight:400 !important;
  color:var(--zd-unit-color) !important;
  line-height:1 !important;
  text-align:left !important;
  margin-left:var(--zd-unit-gap) !important;
  white-space:nowrap !important;
}

/* v5 兜底②：不管平台把 text-align 写在哪一级（行内 style、列上、还是 p 上），
   下面两条都把「数字居中、单位紧跟其后」钉死。
   选择器只要求「这一行里的第 1 / 第 2 个文本块」，对 DOM 形状不敏感。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(1) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(1) p{
  text-align:center !important;
}
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(2) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(2) p{
  text-align:left !important;
}

/* v5 兜底③（形态 C 暴露的真 bug）：数字行里若还嵌了一层行，
   那么"整行的第 1 个子元素"就是那一层行本身，上面 `> *` 那套会把
   数字的 44px 误伤到单位上（形态 C 实测：单位被染成 44px 红字）。
   这里补一套"再往里一层"的选择器，把真正的第 1 / 第 2 栏重新钉对。
   特异性比上面高一级，所以不看书写顺序也能赢；没有嵌套行时不匹配，纯冗余。 */
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *:nth-child(1) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *:nth-child(1) p{
  font-size:var(--zd-num-size) !important;
  font-weight:700 !important;
  color:var(--zd-num-color) !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  margin-left:0 !important;
}
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *:nth-child(2) .xg_html p,
#s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *:nth-child(2) p{
  font-size:var(--zd-unit-size) !important;
  font-weight:400 !important;
  color:var(--zd-unit-color) !important;
  line-height:1 !important;
  text-align:left !important;
  margin-left:var(--zd-unit-gap) !important;
  white-space:nowrap !important;
}


/* ===============================================================
   5. 卡内第 2 行：小标题
   —— v4：把容器拉平（宽度 100%、去掉左右内边距），再强制居中，
      这样无论平台把内边距加在「列」还是「行」上，居中点都落在列中线上。
   =============================================================== */
#s50033 .row > .col-lg-3 > .row:nth-child(2){
  margin:0 !important;
  float:none !important;
}
#s50033 .row > .col-lg-3 > .row:nth-child(2) > *{
  width:100% !important;
  float:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}
#s50033 .row > .col-lg-3 > .row:nth-child(2) .xg_html p{
  font-size:var(--zd-title-size);
  font-weight:700;
  color:var(--zd-title-color);
  line-height:1.4;
  text-align:center !important;
  transition:color .4s var(--zd-ease);
}


/* ===============================================================
   6. 卡内第 3 行：描述
   —— 只锁「左对齐 / 字号 / 颜色 / 行高」，左右内边距交给平台原样保留，
      避免把列留白压没了。
   —— 左对齐那条是在压平台默认值：平台给描述控件写的是
        text-align:justify; text-justify:inter-ideograph;
      中文 justify 会把字距拉成均匀分布，看着"散"。这里必须 !important
      （平台那条是类选择器，虽然我们也赢，但留着防它以后改成行内 style）。
   =============================================================== */
#s50033 .row > .col-lg-3 > .row:nth-child(3){margin:12px 0 0}
#s50033 .row > .col-lg-3 > .row:nth-child(3) .xg_html p{
  font-size:var(--zd-desc-size);
  font-weight:400;
  color:var(--zd-desc-color);
  line-height:var(--zd-desc-line);
  text-align:left !important;
}


/* ---------------------------------------------------------------
   7. 悬停交互
   --------------------------------------------------------------- */
#s50033 .row > .col-lg-3:hover{background-size:100% 100%}
#s50033 .row > .col-lg-3:hover > .row:nth-child(1) > *:nth-child(1) .xg_html p{
  transform:translateY(-4px);
  color:var(--zd-brand-deep) !important;
  text-shadow:0 8px 18px rgba(208,18,27,.22);
}
#s50033 .row > .col-lg-3:hover > .row:nth-child(2) .xg_html p{color:var(--zd-brand) !important}
#s50033 .row > .col-lg-3:hover > .row:nth-child(1)::after{
  width:56px;
  margin-left:-28px;
}


/* ---------------------------------------------------------------
   8. 滚动入场动效
   —— 仅在浏览器支持滚动驱动动画时启用；
      不支持的浏览器这一段整段不生效，区块直接静态显示，不会白屏
   --------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes zdRise{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }
    /* v10：标题行不再参与淡入（原来这里有一条 .row:nth-child(1) 的动画，
       它同样属于"漏到黄圈"。想让标题也淡入，见文件末尾开关。） */
    #s50033 .row > .col-lg-3{
      animation:zdRise .9s var(--zd-ease) both;
      animation-timeline:view();
    }
    /* 四列依次入场（注意：.col-lg-3 只在四列组里出现，所以下面的位置判断安全） */
    #s50033 .row > .col-lg-3:nth-child(1){animation-range:entry 10% cover 34%}
    #s50033 .row > .col-lg-3:nth-child(2){animation-range:entry 14% cover 38%}
    #s50033 .row > .col-lg-3:nth-child(3){animation-range:entry 18% cover 42%}
    #s50033 .row > .col-lg-3:nth-child(4){animation-range:entry 22% cover 46%}
  }
}


/* ---------------------------------------------------------------
   9. 手机端（站内栅格断点：≤768 单列，≥769 桌面）
   —— 单列靠平台栅格自动完成（col-lg-3 的 25% 只在 ≥769 生效），
      这里只做排版与分隔样式
   --------------------------------------------------------------- */
@media (max-width:768px){
  /* ★ v11 关键改动：左右留白加在「卡片行」上，不加在 section 上 ★
     v10 写的是 #s50033{padding:0 20px} —— padding 一旦挂在 section 上，
     这个 section 里的**所有后代**都会跟着内缩，包括头部的眉标与主句。
     线上实测：移动端眉标文字左边界 x=41，而站内其他栏目是 x=23，
     差了 18px，肉眼可见。根因就是这条。
     但留白本身是必要的（实测完全不挂插件 CSS 时，卡片文字 x=0，
     直接贴屏边、部分字被切）。所以做法是「挪位置」而不是「删掉」：
     改挂到卡片行（.row:has(> .col-lg-3)，即装 4 个 .col-lg-3 的那一层），
     标题行完全不受影响。改后卡片区几何与 v10 逐像素相同，
     而眉标回到 x=21，与站内标准 x=23 只差 2px。 */
  #s50033 .row:has(> .col-lg-3){
    max-width:none;
    padding-left:20px;
    padding-right:20px;
  }

  /* 标题 / 主句：这里**故意什么都不写** —— 交回平台的手机端样式，
     与站内其他栏目（18px 左对齐 + 左侧竖线 / 12px）保持一致。 */

  #s50033 .row > .col-lg-3{
    padding:22px 0 0;
    margin-top:22px;
    border-top:1px solid var(--zd-rule);
    background-image:none;
  }
  #s50033 .row > .col-lg-3:first-child{
    padding-top:0;
    margin-top:0;
    border-top:0;
  }
  #s50033 .row > .col-lg-3::before,
  #s50033 .row > .col-lg-3::after{display:none}

  #s50033 .row > .col-lg-3 > .row:nth-child(1){justify-content:flex-start !important;padding-bottom:18px !important}
  #s50033 .row > .col-lg-3 > .row:nth-child(1)::after{left:0;margin-left:0;width:22px}
  #s50033 .row > .col-lg-3 > .row:nth-child(1) > *:nth-child(1) .xg_html p,
  #s50033 .row > .col-lg-3 > .row:nth-child(1) > .xg_html:nth-child(1) p,
  #s50033 .row > .col-lg-3 > .row:nth-child(1) .row > *:nth-child(1) .xg_html p{font-size:34px !important}
  #s50033 .row > .col-lg-3 > .row:nth-child(2) .xg_html p{font-size:17px;text-align:left !important}
  #s50033 .row > .col-lg-3 > .row:nth-child(2) > *{width:auto !important}
  #s50033 .row > .col-lg-3 > .row:nth-child(3){margin-top:10px}
  #s50033 .row > .col-lg-3 > .row:nth-child(3) .xg_html p{font-size:14px;line-height:1.85}
}


/* ---------------------------------------------------------------
   10. 系统开启「减少动态效果」时，关掉所有位移类动效，保留颜色反馈
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #s50033 .row > .col-lg-3,
  #s50033 .row > .col-lg-3 *{transition-property:color,background-color,background-size}
  #s50033 .row > .col-lg-3:hover > .row:nth-child(1) > *:nth-child(1) .xg_html p{
    transform:none;
    text-shadow:none;
  }
  #s50033 .row > .col-lg-3::after,
  #s50033 .row > .col-lg-3 > .row:nth-child(1)::after{
    transition:none;
  }
}


/* ---------------------------------------------------------------
   【眉标下方那条红色短线】—— 不归本文件管，也不要去动它
   —— 平台给眉标容器 平台为该控件生成的哈希类名 写了一条规则，自带这张
      134×10 的装饰图（站内每个板块眉标下面都是这一张，同一个 PNG）：
        background-image:url(/Images/Upload/20260716/19c8990f233041dc8257bcec02a06e3b.png)
        background-position:center bottom;  background-size:134px 10px;
      也就是说「核心优势」下面的红短线跟「行业」下面那条是同一个东西，
      属于站内统一视觉，本文件刻意不干预（v6 实测确认它一直在生效）。
      如果你哪天想让它消失，把下面这段注释打开即可：

   #s50033 > .container > .row:nth-child(1) .xg_html:nth-child(1){
     background-image:none !important;
   }
   --------------------------------------------------------------- */



/* ---------------------------------------------------------------
   【可选开关】v10 默认两项都不做。要用哪项，把对应那段的注释去掉。
   ---------------------------------------------------------------

   【开关 A】让标题行也跟随滚动淡入（默认关，标题保持静态）
   —— 打开前请知悉：这会让插件 CSS 重新作用于标题区。

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    #s50033 > .container > .row:nth-child(1){
      animation:zdRise .8s var(--zd-ease) both;
      animation-timeline:view();
      animation-range:entry 6% cover 28%;
    }
  }
}

   ---------------------------------------------------------------

   【开关 B】手机端标题改回「居中大字」（默认关）
   —— 默认状态是交回平台：眉标 18px 左对齐 + 3px 左侧深蓝竖线、主句 12px
      左对齐，与站内其他栏目一致；位置也不再被本文件推动（v11 修正）。
      打开下面这段会改成居中大字，代价是跟同页其他栏目不一致。
   —— 注：开关 A / B 一旦打开，就等于重新让插件 CSS 作用于标题区，
      与 v10/v11 的原则相悖，仅在明确需要时使用。

@media (max-width:768px){
  #s50033 > .container > .row:nth-child(1) .xg_html p{text-align:center}
  #s50033 > .container > .row:nth-child(1) .xg_html:nth-child(1) p{
    font-size:22px;
    letter-spacing:6px;
    text-indent:6px;
  }
  #s50033 > .container > .row:nth-child(1) .xg_html:nth-child(2) p{
    font-size:14px;
    letter-spacing:1px;
    margin-top:12px;
  }
  #s50033 > .container > .row:nth-child(1) .xg_html:nth-child(1){border-left:none}
}
   --------------------------------------------------------------- */