@charset "utf-8";
/* ==========================================================================
   mobile.css — 移动端（H5）适配覆盖样式
   项目：武汉讯网官网 whxunw.com
   --------------------------------------------------------------------------
   设计原则：
   1. 全部规则包在 max-width: 768px 内，768px 以上对现有 PC 布局零影响
   2. 本文件必须在 style.css / atom.css / page.css 之后引入，以保证覆盖优先级
   3. 只做「覆盖」，不修改任何既有 CSS 文件，便于随时回滚（删掉 link 即可）
   ========================================================================== */

/* --------------------------------------------------------------------------
   移动端专用元素 —— PC 端（>768px）一律不渲染
   汉堡按钮与导航抽屉由各页面静态写入 HTML，此处保证桌面端完全无痕迹
   -------------------------------------------------------------------------- */
.m-nav-btn,
.m-nav-mask,
.m-nav-drawer {
  display: none;
}

@media (max-width: 768px) {

  /* ======================================================================
     0. 全局兜底层 —— 解除 PC 定宽约束
     ====================================================================== */

  html,
  body {
    width: 100%;
    min-width: 0;
    /* 覆盖 style.css 的 body{min-width:1200px}，否则手机必然横向溢出 */
    overflow-x: hidden;
    /* 兜底：即使个别组件仍有溢出，也不产生左右滚动条 */
    -webkit-text-size-adjust: 100%;
    /* 防止横屏时 iOS 自动放大字号 */
    margin: 0;
    padding: 0;
    /* system-weihu.html 这类独立页没有引入 common.css，body 会带浏览器
       默认的 8px 边距，使内容整体右移并溢出 8px。这里统一清零；其余页面
       common.css 已经归零，属无副作用的冗余声明。 */
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    /* 统一盒模型，让百分比宽度 + padding 的组合可预测 */
  }

  /* 全站主容器：1200px 固定宽 → 流式 100% */
  .mid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 图片自适应，避免固定宽高撑破容器 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 标题类字号收敛，PC 的 34px 在手机上过大 */
  .title_h1 {
    font-size: 24px;
    line-height: 36px;
  }

  .titlep {
    font-size: 14px;
    line-height: 24px;
  }

  /* 段落说明文字：PC 用 padding:0 100px 限制行宽，小屏下会吃掉大半宽度，
     导致正文被挤成极窄一列（产品详情页症状最明显） */
  .dtp {
    padding: 0 4px;
    font-size: 14px;
    line-height: 26px;
  }

  /* 首屏 Banner：PC 用 1920px + 负 margin 居中溢出，移动端改为流式 */
  .banner_box {
    height: auto;
  }

  .banner {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin-left: 0;
    left: auto;
  }

  /* --- 首屏 Banner（首页专属）：居中裁切放大 ---------------------------
     img/banner.png 是 1920×500，标语「教育领域数字化服务提供商」直接
     印在图里（原图 34px、宽 429px，副标 18px）。整图压到 375px 宽后
     缩放比只剩 0.195，标语变成 7.8px、副标 3.5px，基本不可读。
     这张图只有 index.html 在用（内页走 banner3/4/8.png + HTML .bannertxt），
     所以可以放心地只对首页做「居中裁切」：只取原图中央 560×382 的一块
     （正好把 429px 宽的标语和上方穹顶、下方楼群一起框住），按 0.67
     缩放显示，标语回到 22.8px / 副标 12px，构图不变形。
     数值全部用百分比表达（宽高各按 .banner_box 的宽/高取比例），
     因此裁切范围与视口宽度无关，320 / 375 / 414 看到的是同一块画面。
     用 :has() 精确限定「img 指向 /banner.png 的那个首屏」；不支持
     :has() 的旧浏览器匹配不到，自动回落到上面那条原尺寸规则（优雅降级）。 */
  .banner_box:has(> .banner[src$="/banner.png"]) {
    height: auto;
    padding-top: 68.21%;                /* 382 ÷ 560 → 375 宽时 256 高 */
    overflow: hidden;
  }

  .banner_box:has(> .banner[src$="/banner.png"]) > .banner {
    position: absolute;
    left: 50%;
    bottom: 0;                          /* 裁切窗口贴着原图底边 */
    width: 342.9%;                      /* 1920 × 0.6697 ÷ 375 */
    height: auto;
    margin-left: -171.45%;              /* -(width / 2)，水平居中 */
    max-width: none;
  }

  /* --- 首屏 Banner（自考网络助学专属）：整图完整可见 + 居中 -------------
     img/banner2.png 是 1920×500，标题「自考网络助学」直接印在图里
     （x 751..1131，基本在图心；图文一体，不能拆开）。
     整图压到 375px 宽时缩放比只剩 0.195、标题只有 16px，不可读；所以
     横向必须放大，取原图中央 960px 宽的一块（x 480..1440）按 0.39 显示，
     标题 32.8px。
     竖向上：导航条高 52px、透明浮在页面顶部，而图顶部 0..207px 本来就是
     一片空的深蓝底。若图仍从 y=0 开始铺，等于把图的上半截白白压在导航
     背后，露出来的只剩「标题 + 半截光环」，看着就像被横切了一刀。
     这里把盒子高度改成「导航高 52px + 图高」，图整体落到导航下方
     （bottom:0）—— 于是 ① 整张图完整可见，没有任何一部分被导航吃掉；
     ② 图在导航以下的可视区域里上下居中（不再是「贴顶 + 被挡」）。
     导航背后多出来的那 52px 用 ::before 铺同一张图的顶部并做上下镜像，
     与下方图像无缝衔接，不会出现一条突兀的纯色横带。
     banner2.png 只有 zikaowangluozhuxue.html 在用，其余内页走
     banner3/4/8.png + HTML 标题，不受影响。 */
  .banner_box:has(> .banner[src$="/banner2.png"]) {
    height: auto;
    padding-top: 65.94%;                /* (52 + 195.3) ÷ 375，375 宽时 247 高 */
    overflow: hidden;
  }

  /* 导航背后的 52px：铺图的顶部再上下镜像，接缝与下方图像顶部完全对齐 */
  .banner_box:has(> .banner[src$="/banner2.png"])::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 52px;                       /* = .nav 的高度 */
    background: url(../img/banner2.png) center top / 200% auto no-repeat;
    transform: scaleY(-1);
  }

  .banner_box:has(> .banner[src$="/banner2.png"]) > .banner {
    position: absolute;
    left: 50%;
    bottom: 0;                          /* 图整体落在导航下方 */
    width: 200%;                        /* 1920 × 0.3906 ÷ 375 */
    height: auto;
    margin-left: -100%;                 /* -(width / 2)，水平居中 */
    max-width: none;
  }

  /* 内页 banner 上的大标题：PC 是 64px + 1200px 绝对定位，
     移动端改为贴底通栏。之所以不垂直居中，是因为小屏下 banner
     高度只有 100px 左右，而导航条已占顶部 52px，居中会压在一起 */
  .bannertxt {
    width: 100%;
    left: 0;
    top: auto;
    bottom: 10px;
    padding: 0 15px;
    font-size: 20px;
    line-height: 26px;
  }

  /* ======================================================================
     1. 移动端导航 —— 汉堡按钮 + 右侧滑出抽屉
     依赖：各页面已静态写入 .m-nav-btn / .m-nav-mask / .m-nav-drawer
           js/mobile-nav.js 负责开合、遮罩、滚动锁定等交互
     说明：导航为透明底 + banner 垫底设计，故汉堡线条默认白色，
           随 .nav_fixed（滚动置顶）自动转为深色，与 logo 换色逻辑一致
     ====================================================================== */

  /* 导航条：压缩高度，隐藏 PC 横排项 */
  .nav {
    height: 52px;
  }

  .nav .mid {
    height: 52px;
  }

  .nav .navli {
    display: none;
  }

  .nav .logo {
    float: left;
    width: auto;
    padding: 14px 0;
    margin-right: 0;
  }

  .nav .logo .logo_img {
    width: 108px;
    height: auto;
  }

  /* 汉堡按钮：位于导航条内，随 .nav_fixed 自动换色 */
  .m-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    float: right;
    width: 40px;
    height: 52px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-nav-btn-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin-bottom: 4px;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
  }

  .m-nav-btn-bar:last-child {
    margin-bottom: 0;
  }

  .nav_fixed .m-nav-btn-bar {
    background-color: #333333;
  }

  /* 展开态：三横线收成 X */
  .m-nav-btn.open .m-nav-btn-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .m-nav-btn.open .m-nav-btn-bar:nth-child(2) {
    opacity: 0;
  }

  .m-nav-btn.open .m-nav-btn-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* 遮罩层 */
  .m-nav-mask {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }

  .m-nav-mask.open {
    opacity: 1;
    visibility: visible;
  }

  /* 抽屉面板：自右侧滑出 */
  .m-nav-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 78%;
    max-width: 300px;
    background-color: #FFFFFF;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }

  .m-nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* 抽屉头部 */
  .m-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid #EEEEEE;
  }

  .m-nav-logo {
    width: 108px;
    height: auto;
  }

  .m-nav-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999999;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 一级菜单 */
  .m-nav-list {
    padding: 6px 0;
  }

  .m-nav-item {
    border-bottom: 1px solid #F2F2F2;
  }

  .m-nav-row {
    display: flex;
    align-items: center;
  }

  .m-nav-row > a {
    flex: 1;
    padding: 14px 16px;
    font-size: 15px;
    color: #333333;
    line-height: 22px;
  }

  .m-nav-row > a:active {
    background-color: #F5F5F5;
  }

  .m-nav-item.on > .m-nav-row > a {
    color: #0066FF;
    font-weight: bold;
  }

  /* 二级菜单展开箭头 */
  .m-nav-toggle {
    position: relative;
    width: 48px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-nav-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-right: 1.5px solid #999999;
    border-bottom: 1.5px solid #999999;
    transform: rotate(45deg);
    transition: transform .3s ease;
  }

  .m-nav-item.open > .m-nav-row .m-nav-toggle::after {
    transform: rotate(-135deg);
  }

  /* 二级菜单：手风琴展开 */
  .m-nav-sub {
    max-height: 0;
    overflow: hidden;
    background-color: #F8F8F8;
    transition: max-height .3s ease;
  }

  .m-nav-item.open .m-nav-sub {
    max-height: 420px;
  }

  .m-nav-sub a {
    display: block;
    padding: 12px 16px 12px 28px;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
  }

  .m-nav-sub a:active {
    background-color: #EEEEEE;
  }

  /* 抽屉展开时锁定背景滚动 */
  body.m-nav-lock {
    overflow: hidden;
  }


  /* ======================================================================
     2. 首页与列表页网格
     思路：PC 端普遍是「固定宽 + float + 百分比列宽」的多列网格，
           移动端一律改为「单列铺满 / 两列换行」。
           注意 PC 的多列是靠 float + margin-right 实现的，
           覆盖时必须同时复位 margin，否则换行后会错位。
     ====================================================================== */

  /* --- 2.0 网格容器统一允许换行 ----------------------------------------
     PC 的 .flexbox 系列是 flex-flow: row（不换行），多列并排才成立；
     移动端列宽改成 100% 后，若不换行 flex 会把各项强行压成等分，
     导致「联系我们」那类左右分栏被压扁、文字溢出，故统一允许换行。 */
  .flexbox,
  .flexbox_center,
  .flexbox_between {
    flex-wrap: wrap;
  }

  /* --- 2.1 产品入口 .fimg：360×220 三列 → 单列铺满 ---------------------- */
  .fimg {
    float: none;
    display: block;
    width: 100%;
    height: 220px;
    margin-right: 0;
    margin-bottom: 20px;
  }

  /* 复位 PC 的「每行第三个去掉右边距」规则，避免覆盖后仍生效 */
  .fimg:nth-child(3n+3) {
    margin-right: 0;
  }

  /* --- 2.2 数字栏 .shubg：5 项 20% 横排 → 两列换行 ---------------------- */
  .shubg {
    height: auto;
    padding: 24px 0;
  }

  .shu {
    width: 50%;
    padding: 16px 0;
    text-align: center;
  }

  /* 5 个项目时，最后一项刚好落单，让它占满整行保持居中平衡 */
  .shu:last-child:nth-child(odd) {
    width: 100%;
  }

  .num {
    font-size: 28px;
    line-height: 44px;
  }

  .shup {
    font-size: 15px;
    line-height: 32px;
  }

  .xian {
    margin: 5px auto;
  }

  /* --- 2.3 创新产品 .chuangli：25% 四列 → 单列 ------------------------- */
  .chuangli {
    width: 100%;
  }

  .cimg {
    width: 180px;
    height: 180px;
    margin: 24px auto;
  }

  .ch2 {
    font-size: 20px;
    line-height: 36px;
    margin-bottom: 8px;
  }

  .cp1 {
    font-size: 14px;
    line-height: 26px;
    padding-bottom: 10px;
  }

  /* --- 2.4 新闻卡片 .newList：330px 定宽 → 流式 ------------------------ */
  .newList .dtli {
    width: 100%;
    padding: 16px;
    margin: 16px 0;
  }

  .dtimg {
    width: 100%;
    height: auto;
  }

  .dth2 {
    width: 100%;
    font-size: 15px;
    line-height: 28px;
    /* PC 是单行省略号，移动端允许折行，但最多两行，避免长标题把卡片撑高 */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dtmore {
    width: 160px;
    line-height: 40px;
    font-size: 16px;
    border-radius: 22px;
  }

  /* --- 2.5 合作院校 logo 墙 .cgan：1200px 定宽 → 流式换行 ------------- */
  .cgan {
    width: 100%;
    margin: 20px 0;
  }

  .cgan .d-flex {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cgan .d-flex div {
    margin: 6px;
    padding: 4px 8px;
  }

  .cgan img {
    height: 36px;
  }

  /* --- 2.6 页脚 footer：左右浮动 → 竖排 -------------------------------- */
  .footleft,
  .footlink {
    float: none;
    width: 100%;
  }

  .foot_title {
    float: none;
    width: auto;
    padding: 0;
    line-height: 34px;
    font-size: 15px;
  }

  .linkright {
    float: none;
    width: 100%;
    line-height: 28px;
    padding: 2px 0 12px 0;
    /* HTML 里的「|」分隔符是没有标签包裹的纯文本节点，小屏下极易被挤到
       下一行行首、单独占一行；父级字号归零后分隔符宽度为 0，
       就会始终贴合在上一项末尾，由 .ylinka 自行恢复可读字号 */
    font-size: 0;
  }

  .ylinka {
    padding: 0 5px;
    line-height: 28px;
    font-size: 13px;
  }

  /* 由于上面把父级字号归零，HTML 里原本的「|」已不可见，
     这里用伪元素补回分隔符：它绑定在链接自身，绝不会被挤到行首 */
  .ylinka::after {
    content: '|';
    margin-left: 8px;
    color: rgba(255, 255, 255, .3);
  }

  .ylinka:last-child::after {
    content: none;
  }

  /* 二维码在移动端居中显示，不再作为浮动的右栏 */
  .footlink.tec {
    padding-top: 12px;
    text-align: center;
  }

  .beip {
    font-size: 12px;
    line-height: 24px;
  }

  /* --- 2.7 页内锚点导航 .topnav（关于我们 / 产品详情页）-------------- */

  /* PC 端 tab 栏外面套了一个内联 height:70px 的包裹 div。
     移动端 tab 折行后实际高度会超过 70px，而内联样式优先级高于任何
     CSS 规则，只能用 !important 覆盖；否则 .topnav 会溢出这个包裹层，
     直接把下方的页面标题压住（产品详情页最明显）。
     选择器限定「紧跟在 .banner_box 之后且带内联样式」，避免误伤其它 div。 */
  .banner_box + div[style*="height"] {
    height: auto !important;
  }

  .topnav {
    height: auto;
  }

  .topa2 {
    width: 33.33%;
    line-height: 44px;
    font-size: 14px;
  }

  /* .topa1 与 .topa2 同族，前者用于产品详情页、后者用于关于我们，
     PC 同样是 25%/20% 定宽 + 70px 行高 */
  .topa1 {
    width: 50%;
    line-height: 44px;
    font-size: 13px;
  }

  /* 滚动吸顶时的偏移量要跟随移动端导航条高度（52px），否则会盖住页面顶部 */
  .topnav_fixed {
    top: 52px;
  }

  /* --- 2.8 新闻分类栏 .xinwenfenlei（新闻中心）------------------------ */
  .xinwenfenlei {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 0;
  }

  .xinwenfenlei .classification {
    flex: 0 0 auto;
  }

  .xinwenfenlei .classification .nava {
    line-height: 40px;
    margin: 0 10px;
    font-size: 14px;
  }

  /* --- 2.9 合作高校列表 .xxli（自考网络助学）--------------------------
     规则统一放在段 3I.1 维护（那里有完整的踩坑说明与 grid 方案），
     此处不再重复定义，避免两处冲突。见文件后部「3I.1」。
     -------------------------------------------------------------------- */

  /* 下载APP / 关注公众号按钮 .xiaz 的规则统一放在段 3I.5 维护
     （与自考页三个流程区块同批改造），此处不再重复定义。见文件后部「3I.5」。 */

  /* --- 2.10 案例卡片 .anlibox（非学历教育数字化）---------------------- */
  .anlibox {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  /* PC 用奇偶项 margin-top 错落排列，移动端单列后必须归零 */
  .anlibox:nth-child(2n+1) {
    margin-top: 0;
  }

  .animg {
    width: 100%;
    height: auto;
  }

  .anlip {
    line-height: 56px;
    font-size: 15px;
  }

  /* --- 2.11 关于我们：公司介绍图文 ------------------------------------- */
  .about1 {
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }

  .aboutp {
    float: none;
    width: 100%;
    padding: 0 0 20px 0;
    font-size: 15px;
    line-height: 30px;
  }

  /* --- 2.12 关于我们：发展历程（左右交替时间轴 → 单列）---------------- */
  /* PC 是 50% 宽左右交替 + 180px 内边距放箭头图，
     移动端无法维持双栏，改为左对齐单列 + 左侧竖线做时间轴 */
  .licbox {
    width: 100%;
    padding: 20px 0 30px 0;
  }

  /* 背景图必须跟着区块高度走 —— 这是「2017 年不见了」的真正原因。
     PC 的 .fz_bg 是 `url(licheng_bg.png) no-repeat`（图 1919×1038）
     + `min-height:1038px`，图高刚好等于区块高，铺满一屏。
     H5 把时间轴改成单列后区块高约 1346px，底部约 300px 落到图外，
     而 .jth1 / .jtp 是 #FFF 白字 —— 白字压在白底上，
     最后一条「2017年」连同年份下的描述整段不可见（2018年 也被切一半）。
     用 100% 100% 拉伸让图铺满：图本身是平滑的蓝色径向渐变
     （实测像素：边缘 #0458D8 / 中心 #0C7EF1），拉伸看不出变形。 */
  .fz_bg {
    background-size: 100% 100%;
    background-color: #0458D8;
  }

  /* 居中竖线在新的单列布局下已无意义 */
  .jt_licheng {
    display: none;
  }

  .jtli,
  .jtli:nth-child(2n+1),
  .jtli:nth-child(2n+2) {
    float: none;
    width: 100%;
    height: auto;
    left: auto;
    right: auto;
    top: auto;
    padding: 0 0 0 18px;
    margin-bottom: 22px;
    background: none;
    border-left: 2px solid rgba(255, 255, 255, .4);
  }

  /* 时间轴节点圆点：负偏移使其压在这条竖线的中心上 */
  .jtli::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 17px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FF991C;
    box-shadow: 0 0 0 3px rgba(255, 153, 28, .3);
  }

  .jtli:last-child {
    border-left-color: transparent;
  }

  .jtli:last-child::before {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
  }

  .jtli .jth1,
  .jtli:nth-child(2n+1) .jth1,
  .jtli:nth-child(2n+2) .jth1 {
    font-size: 22px;
    line-height: 38px;
    text-align: left;
  }

  .jtli .jtp,
  .jtli:nth-child(2n+1) .jtp,
  .jtli:nth-child(2n+2) .jtp {
    font-size: 14px;
    line-height: 26px;
    text-align: left;
  }

  /* PC 靠绝对定位钉在容器底部，移动端改为常规流，避免压住最后一条 */
  .lcbtn {
    position: static;
    left: auto;
    bottom: auto;
    width: 180px;
    margin: 0 auto;
    line-height: 48px;
    font-size: 16px;
  }

  /* --- 2.13 关于我们：企业文化 ----------------------------------------- */
  .about_bg .flexbox_between {
    flex-wrap: wrap;
  }

  .wenhua_img {
    width: 100%;
    margin: 16px auto;
  }

  .wenhuali {
    width: 100%;
    margin-bottom: 16px;
  }

  .whh1 {
    font-size: 20px;
    line-height: 40px;
  }

  .whp {
    font-size: 14px;
    line-height: 26px;
  }

  /* --- 2.14 关于我们：资质荣誉（三列 → 两列）-------------------------- */
  .rongyu {
    width: calc(50% - 20px);
    margin: 10px;
    padding: 8px;
    font-size: 14px;
  }

  .rongyu img {
    max-width: 100%;
    height: auto;
  }

  /* --- 2.15 关于我们：联系我们（地图 + 电话左右分栏 → 上下）---------- */
  .leftlx,
  .rightlx {
    float: none;
    width: 100%;
  }

  /* 百度地图容器在 PC 靠左栏撑高，移动端需显式给高，否则塌成 0 */
  #dituContent {
    height: 320px;
  }

  /* --- 联系我们（H5 适配）：覆盖 style.css 中 .contact 作用域的高特异性规则 ---
     PC 版为左右分栏；H5 改为上下堆叠：地图在上、联系方式在下。 */
  .contact .rightlx,
  .contact .leftlx {
    flex: 1 1 100%;
    width: 100%;
  }

  .contact .telbox {
    padding: 24px 16px;
    justify-content: flex-start;
  }

  .contact .telp {
    white-space: normal;
    margin-left: 0;
  }

  .contact .telbox .clearfix {
    margin-bottom: 20px;
  }

  .telbox {
    padding: 24px 16px;
  }

  .icon_tel {
    width: 28px;
    height: 28px;
    margin-right: 16px;
    margin-top: 6px;
  }

  .telp {
    float: none;
    /* 宽度交给块级自适应（100% - 左侧图标留白），
       不要再叠加 calc(100% - 44px)，否则会多出 44px 溢出容器 */
    width: auto;
    margin-left: 44px;
    overflow: hidden;
    font-size: 15px;
    line-height: 32px;
  }


  /* ======================================================================
     3. 产品详情页复杂组件
     ----------------------------------------------------------------------
     本段处理「像素级定位 / 固定宽高」的图形化组件。这类组件靠绝对坐标与
     旋转虚线还原静态设计稿，小屏无法靠调数值解决，一律改为竖向堆叠。
     ====================================================================== */

  /* --- 3.0 弹性容器统一允许换行 ---------------------------------------
     全站 flex 容器默认 nowrap，子项改成 100% 宽后会被强行压扁（文字溢出）。
     统一允许换行，只在空间不足时才生效，PC 端布局不受影响（本段在媒体
     查询内）。
     --------------------------------------------------------------------- */
  .flex-btw,
  .flex-btw-center,
  .flex-btw-start,
  .flex-center,
  .flex-wrap,
  .flexbox,
  .flexbox_between,
  .flexbox_center {
    flex-wrap: wrap;
  }

  /* ---------------------------------------------------------------------
     3.1 固定高度包裹层解除裁剪
     .zbwrap(680px) / .tdxl(698px) / .shidabg 靠固定高度 + overflow:hidden
     裁切背景图，小屏内容变高后会被切掉。
     --------------------------------------------------------------------- */
  .zbwrap,
  .tdxl,
  .jsmb,
  .shidabg,
  .duoyuan_bg {
    height: auto;
    overflow: visible;
    padding: 44px 0;
  }

  .jsmb {
    background-size: cover;
  }

  /* ---------------------------------------------------------------------
     3.2 标题内装饰线 .btzs1/.btzs2（458px 横条）
     --------------------------------------------------------------------- */
  .btzs1,
  .btzs2 {
    width: 34px;
    height: auto;
    margin: 0 10px;
  }

  /* ---------------------------------------------------------------------
     3.3 装饰性光斑 / 连线图层：小屏隐藏
     .y1-.y7（适用场景背景圆斑）、.zs1-.zs4（典型案例连接条）、
     .tdxl-line / .good-line（1200px 连接线图）纯装饰，越界不承载信息。
     --------------------------------------------------------------------- */
  .y1,
  .y2,
  .y3,
  .y4,
  .y5,
  .y6x,
  .y7,
  .zs1,
  .zs2,
  .zs3,
  .zs4,
  .tdxl-line,
  .good-line {
    display: none !important;
  }

  /* ---------------------------------------------------------------------
     3.4 平台优势卡片 .ptysli（360×148 三列 → 单列）
     图标 .ptysimg 是绝对定位悬在卡片上沿的 108px 圆形，改为水平居中，
     标题下移让出图标位置。
     --------------------------------------------------------------------- */
  .ptysli {
    float: none;
    width: 100%;
    height: auto;
    margin: 70px 0 26px;
    padding: 0 18px 22px;
  }

  .ptysli:nth-child(3n+3) {
    margin-right: 0;
  }

  .ptysimg {
    width: 96px;
    height: 96px;
    left: 50%;
    margin-left: -48px;
    top: -58px;
  }

  .ptysh2 {
    padding-top: 52px;
    line-height: 40px;
    margin-bottom: 8px;
    font-size: 18px;
  }

  .ptysp1 {
    font-size: 13px;
    line-height: 22px;
  }

  /* ---------------------------------------------------------------------
     3.5 核心功能图标格 .ptli（200px 浮动 → 2 列）
     --------------------------------------------------------------------- */
  .ptli {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 0 6px;
    margin-bottom: 18px;
  }

  .ptimg {
    width: 70px;
    height: 70px;
    margin: 10px auto;
  }

  .ptp1 {
    font-size: 15px;
    line-height: 26px;
  }

  /* ---------------------------------------------------------------------
     3.5b 系统优势卡片 .pttli（580×150 两列 → 单列，图标左文右）
     --------------------------------------------------------------------- */
  .pttli {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 16px;
  }

  .pttimg {
    width: 62px;
    height: 62px;
    margin: 6px 16px 6px 0;
  }

  .pttr {
    float: none;
    width: auto;
    padding: 0;
    overflow: hidden;
  }

  .pttrh3 {
    font-size: 17px;
    line-height: 30px;
  }

  .pttrp {
    font-size: 14px;
    line-height: 22px;
  }

  /* ---------------------------------------------------------------------
     3.6 典型案例卡片 .dxbox（400px 定宽 → 流式）
     .dximg 是压在图文交界处的圆形徽标，改为水平居中。
     --------------------------------------------------------------------- */
  .dxbox,
  .dxb {
    width: 100%;
    height: auto;
  }

  .dxtu {
    width: 100%;
    height: auto;
  }

  .about_wrap2 .dxbox .dximg {
    width: 104px;
    height: 104px;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .dxb {
    padding: 22px 18px;
  }

  .dxh2 {
    font-size: 17px;
    line-height: 28px;
  }

  .dxp2 {
    font-size: 13px;
    line-height: 22px;
  }

  /* ---------------------------------------------------------------------
     3.6b 适用场景 .ksli（300×300 四张大图纵排 → 两列）
     --------------------------------------------------------------------- */
  .about_wrap2 .flexbox_between > .ksli {
    width: calc(50% - 8px);
    margin-bottom: 16px;
  }

  .ksimg {
    width: 100%;
    height: auto;
  }

  .syp1 {
    height: auto;
    min-height: 56px;
    padding: 14px 6px;
    font-size: 14px;
    line-height: 22px;
  }

  /* ---------------------------------------------------------------------
     3.7 核心板块 .hexli（522px 两列 → 单列，图标左文右）
     --------------------------------------------------------------------- */
  .hexli {
    float: none;
    width: 100%;
    margin: 0 0 26px;
  }

  .heicon1 {
    width: 60px;
    height: 60px;
    margin-right: 16px;
    margin-top: 4px;
  }

  .heright {
    float: none;
    width: auto;
    overflow: hidden;
  }

  .heh3 {
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 4px;
  }

  .hepp {
    width: auto;
    font-size: 14px;
    line-height: 22px;
  }

  /* ---------------------------------------------------------------------
     3.8 防作弊卡片 .zbli（calc(25% - 40px) 四列 → 单列）
     --------------------------------------------------------------------- */
  .zbli {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 22px;
    padding: 56px 20px 24px;
  }

  .zbh3 {
    height: auto;
    min-height: 48px;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 6px;
  }

  .zbp {
    font-size: 14px;
    line-height: 21px;
  }

  /* ---------------------------------------------------------------------
     3.9 咨询与量身定制 .dzli（240px 五列 → 竖向编号轴 + 步骤）
     PC 是 5 张 240px 卡片横排，下方压一张 981×34 的轴线图（.bzli，图上
     有 1~5 的圆环节点）把卡片串成流程。缩到 375 后轴线只剩 13px 高、
     节点数字约 4px 完全看不出是编号。
     这里复用那条轴的视觉语言 —— 圆环节点 + 连线 —— 竖向排布：既标出
     了步骤顺序，也替代了已经看不清的横向轴线图。
     --------------------------------------------------------------------- */
  .zxdzbg .flexbox_center {
    display: block;              /* 原为 flex 横排，改块级后 .dzli 自然竖排 */
    counter-reset: dzstep;
  }

  .dzli {
    flex: none;
    position: relative;
    width: 100%;
    min-height: 66px;
    padding: 0 0 18px 96px;      /* 左：编号环 34 + 图标 44 + 间距 */
    margin-bottom: 0;
    text-align: left;
    counter-increment: dzstep;
  }

  /* 编号圆环（对应轴线上 1~5 的节点） */
  .dzli::before {
    content: counter(dzstep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 5px;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 30px;           /* 34 - 上下各 2px 边框 */
    text-align: center;
  }

  /* 竖向连线：向下穿过项间距 5px 接到下一项编号环的上沿，
     长度只跟间距有关、不随文案行数变化 */
  .dzli::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 39px;
    bottom: -5px;
    width: 2px;
    background: rgba(255, 255, 255, 0.35);
  }

  .dzli:last-child::after {
    display: none;
  }

  .dzimg {
    position: absolute;
    left: 46px;
    top: 0;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .dzh3 {
    text-align: left;
    line-height: 24px;
    font-size: 16px;
  }

  .dzp {
    text-align: left;
    font-size: 13px;
    line-height: 20px;
  }

  /* PC 文案里的硬换行是按 240px 卡片宽度排的，手机端一行放得下，去掉更整齐 */
  .dzli .dzp br {
    display: none;
  }

  /* PC 的横向轴线图（981×34）缩到 375 只有 13px 高、编号约 4px，
     既看不清又与上方竖向轴重复，直接隐藏 */
  .bzli {
    display: none;
  }

  .zxbtn {
    width: 100%;
    max-width: 300px;
    font-size: 16px;
    margin: 24px auto 8px;
  }

  /* ======================================================================
     3A. 继续教育综合管理平台（atom.css 组件）
     ====================================================================== */

  /* --- 3A.1 侧边竖排标签 .side-box（66px 竖排 → 横向通栏）-------------- */
  .side-box {
    width: 100%;
    height: 34px;
    font-size: 15px;
    letter-spacing: 2px;
  }

  .side-box-title {
    width: auto;
    height: 34px;
    line-height: 34px;
  }

  /* 中列包裹层带内联 style="margin: 0 50px"，内联样式优先级最高，
     必须用 !important 解除左右 100px 挤压 */
  .about_wrap .flex-btw.f-size-20 > div[style] {
    margin: 0 !important;
    width: 100%;
  }

  /* --- 3A.2 类型横条 .part5-type-box（908px 虚线框）-------------------- */
  .part5-type-box {
    width: 100%;
    height: auto;
    padding: 8px 6px;
    margin-bottom: 20px;
  }

  .part5-type {
    width: auto;
    height: auto;
    line-height: 24px;
    justify-content: center;
    gap: 6px 16px;
    font-size: 15px;
    letter-spacing: 1px;
  }

  /* 折行后竖线分隔符会孤立成行，隐藏（结构固定：偶数位即分隔符） */
  .part5-type > div:nth-child(even) {
    display: none;
  }

  /* --- 3A.3 业务模块卡 .jxjy-item（195px 四列 → 单列）----------------- */
  .jxjy-item {
    width: 100%;
    margin-bottom: 18px;
  }

  .jxjy-item-title {
    width: 100%;
    height: auto;
    line-height: 38px;
    font-size: 15px;
    border-radius: 19px;
  }

  .jxjy-item img {
    margin: 12px 0 10px;
  }

  .jxjy-item-info {
    height: auto;
    padding: 14px 16px 10px;
    font-size: 13px;
    text-align: left;
  }

  /* --- 3A.4 基础资源条 .jxjy-nav（8 项横排 → 换行居中）---------------- */
  .jxjy-nav {
    height: auto;
    padding: 10px 12px;
    line-height: 22px;
    font-size: 14px;
    justify-content: center;
    gap: 6px 16px;
  }

  .jxjy-baxic {
    font-size: 14px;
  }

  .jxjy-baxic img {
    width: 70px;
    height: auto;
    margin: 0 6px;
  }

  /* --- 3A.5 微服务圆形矩阵 .jxjy-app-box ----------------------------- */
  .jxjy-app-box {
    height: auto;
    margin-top: 26px;
    padding: 0;
    background-image: none;
    justify-content: center;
    gap: 12px;
  }

  .jxjy-app,
  .jxjy-app:nth-child(2n) {
    width: 58px;
    height: 58px;
    margin-top: 0;
    font-size: 11px;
    line-height: 1.25;
    padding: 0 4px;
    box-sizing: border-box;
  }

  /* 原为绝对定位在底部的说明文字，改回常规流 */
  .jxjy-app-box > .f-size-20 {
    position: static !important;
    width: 100%;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
  }

  /* ======================================================================
     3B. 建设目标 / 平台优势（atom.css 组件）
     ====================================================================== */

  /* --- 3B.1 建设目标 .jsmb-item（380×173 三列 → 单列）----------------- */
  .jsmb-title {
    padding: 50px 0 26px;
    font-size: 24px;
  }

  .jsmb-item {
    width: 100%;
    height: auto;
    margin-bottom: 14px;
    padding: 22px 20px;
    font-size: 14px;
    line-height: 22px;
  }

  .jsmb-item-title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  /* --- 3B.2 平台优势 .good-item（218×230 五列 → 单列）----------------- */
  .good-box {
    height: auto;
    margin: 24px 0 20px;
    align-items: stretch;
  }

  .good-item {
    width: 100%;
    height: auto;
    /* 底部留白给插画（插画绝对定位贴底） */
    padding: 22px 20px 138px;
    margin-bottom: 14px;
  }

  .good-item:hover {
    height: auto;
  }

  .good-item img {
    left: auto;
    right: 6px;
    bottom: 0;
    width: 150px;
    height: auto;
    max-height: 126px;
    object-fit: contain;
    object-position: bottom right;
  }

  .good-item-title {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .good-item2 {
    width: 100%;
    height: auto;
    margin-bottom: 14px;
  }

  /* ======================================================================
     3C. 同等学力申硕（.tdxl 系列）
     ====================================================================== */

  /* --- 3C.1 十步流程 .tdxl-item（120px 交替高低 → 两列网格）----------- */
  .tdxl-box {
    margin-top: 28px;
  }

  .tdxl-item,
  .tdxl-item:nth-child(2n+1) {
    width: 50%;
    box-sizing: border-box;
    padding: 0 4px;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .tdxl-no {
    font-size: 20px;
    line-height: 26px;
  }

  .tdxl-item-title {
    font-size: 15px;
    line-height: 24px;
    margin: 4px 0;
  }

  /* --- 3C.2 课程资源类型 .tdxl-type-item（122×56 → 三列小卡）---------- */
  .tdxl-type {
    justify-content: center;
    gap: 8px;
  }

  .tdxl-type-item {
    width: calc(33.33% - 8px);
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    border-width: 1px;
  }

  .tdxl-bold-box {
    width: 100%;
    margin: 6px 0;
  }

  .tdxl-type-bold {
    width: 170px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    margin: 0 6px;
  }

  .tdxl-down {
    width: 40px;
    height: auto;
    margin: 12px 0 6px;
  }

  /* --- 3C.3 管理端/学生端面板 .tdxl-sys（560×177 → 单列）------------- */
  .tdxl-sys {
    width: 100%;
    height: auto;
    padding: 14px;
    margin-bottom: 16px;
  }

  .tdxl-logo {
    width: 100%;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
  }

  .tdxl-sys img {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
  }

  .tdxl-detail {
    width: 100%;
    height: auto;
    padding: 14px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 26px;
  }

  /* --- 3C.4 平台特点 .tdxl-ts-item（220×190 五列 → 单列）-------------- */
  .tdxl-ts-line {
    width: 100%;
    height: auto;
  }

  .tdxl-ts-item {
    width: 100%;
    height: auto;
    padding: 26px 18px 24px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 1px;
  }

  /* ======================================================================
     3D. 统招专升本（.zsb 七节点像素流程图 → 竖向时间轴）
     ----------------------------------------------------------------------
     原设计用 left/bottom 绝对像素坐标摆 7 个节点，节点间靠 ::after 加
     rotate(26deg/42deg/…/154deg) 画虚线连成折线。小屏无法通过调数值还原，
     改为竖向时间轴：节点回到常规流，隐藏旋转虚线，用 ::before 画竖线。
     ====================================================================== */
  .zsb-box {
    height: auto;
    margin: 30px 0 10px;
  }

  .zsb-box .zsb-item {
    position: relative;
    left: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
  }

  /* 旋转虚线连接线全部隐藏 */
  .zsb-box .zsb-item::after {
    display: none;
  }

  /* 竖向时间轴连线 */
  .zsb-box .zsb-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: -16px;
    width: 2px;
    background: rgba(64, 140, 255, .25);
  }

  .out-circle {
    margin: 0;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
  }

  .inner-circle {
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
  }

  /* --- 3D.1 核心内容卡 .zxb-hx-item（218×144 十宫格 → 两列）------------ */
  .about_wrap .flex-wrap {
    justify-content: space-between;
  }

  .zxb-hx-item,
  .zxb-hx-item:nth-child(5) {
    width: calc(50% - 7px);
    height: auto;
    min-height: 108px;
    margin: 0 0 14px;
    padding: 16px 8px;
    font-size: 15px;
  }

  .zsb-img {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
  }

  /* ======================================================================
     3E. 高等教育自学考试解决方案
     ====================================================================== */

  /* --- 3E.1 核心业务系统 .hexinbox（11 个绝对定位圆形子系统）----------
     原图：1096×425 的背景图 + 11 个 left/top 绝对定位的圆形节点。
     小屏改为三列圆形网格，并移除背景连接图。
     注意 PC 的圆有两种尺寸：.hec1/2/3/6/7/9 是 70px，.hec4/5/8/10/11 是
     90px（配合连线图做交错节奏）。手机端去掉连线图后，大小不一的圆只会
     显得参差，统一压到 56px；命名绕开 .hecon 本身（它也以 hec 开头），
     直接取 .hecon 的唯一 div 子元素。
     --------------------------------------------------------------------- */
  .hexinbox {
    height: auto;
    background: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* 11 个排满 3 行后，最后一行 2 个居中 */
    padding-top: 6px;
  }

  .hexinbox .hecon {
    position: static;
    width: 33.333%;
    margin: 0 0 16px;
    text-align: center;
  }

  .hexinbox .hecon > div {
    width: 56px;
    height: 56px;
    margin: 0 auto;
  }

  .hexinbox .heimg {
    width: 28px;
    height: auto;
    margin: 14px auto;
  }

  .hexinbox .hep1 {
    font-size: 13px;
    line-height: 19px;
  }

  /* --- 3E.2 完整业务流程 .zglc（1200px 流程图）------------------------- */
  .zglc {
    width: 100%;
    height: auto;
  }

  /* --- 3E.3 平台优势 .fwtscon（200×240 三列错位 → 一行两个）----------- */
  .fwtsbox {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* 9 张排满 4 行后，最后 1 张居中 */
    gap: 14px;
  }

  /* .fwtsbox 同时带 .clearfix：它的 ::before/::after 会成为 flex item，
     白白占掉第一行的位置（表现为「01 单独占一行，02 之后才开始两列」），
     与 .xxbox 是同一个坑，这里一并禁用 */
  .fwtsbox::before,
  .fwtsbox::after {
    content: none;
    display: none;
  }

  /* PC 用 .fwtscon:nth-child(5)/(9){margin-right:0} 和 :nth-child(6)
     {margin-left:112px} 做三列错位排版，这些规则与单类权重相同、又比
     单纯的 .fwtsbox .fwtscon 更早，所以补一条 :nth-child(n) 提权压干净 */
  .fwtsbox .fwtscon,
  .fwtsbox .fwtscon:nth-child(n) {
    float: none;
    flex: 0 0 calc(50% - 7px);   /* 两张 + 14px 间隙 = 100% */
    width: auto;
    height: auto;
    min-height: 0;
    margin: 26px 0 0;            /* 顶住伸出卡外的 01~09 徽标 */
    padding: 30px 12px 16px;
    border-radius: 10px;
    background-image: none;      /* 200×240 的卡图右边缘带「→」箭头，
                                    两列时右列箭头会指向页面外，改用纯色底 */
    background-color: #E8F1FF;
  }

  /* 编号徽标（84×40 的图）等比缩到 64×32 */
  .fwtsxu {
    left: calc(50% - 32px);
    width: 64px;
    height: 32px;
    top: -16px;
    font-size: 17px;
    line-height: 32px;
    background-size: 100% 100%;
  }

  .fwtst {
    font-size: 14px;
    line-height: 22px;
  }

  .fwtsp {
    font-size: 13px;
    line-height: 20px;
  }

  /* --- 3E.4 命题流程 .mtlcbg（1200×469 折线图 → 竖向编号步骤条）-------
     PC 是 5 段文案交错挂在折线图上，style.css 给每个 :nth-child 单独设了
     padding-left（55/65/60/100px）和 margin-top（140/260px）。这些规则
     与单类同权重，只写 .mtlcbg .mtp1 压不住，会出现「第 2 项缩进到页面
     中间、1~2 项之间空一大截」，所以统一用 :nth-child(n) 提权。
     ------------------------------------------------------------------- */
  .mtlcbg {
    width: 100%;
    height: auto;
    background: none;
    padding: 4px 0 10px 54px;    /* 左侧留出编号轴 */
    counter-reset: mtstep;
  }

  .mtlcbg .mtp1,
  .mtlcbg .mtp1:nth-child(n) {
    float: none;
    position: relative;
    width: 100%;
    margin: 0 0 22px;
    padding-left: 0;
    font-size: 15px;
    line-height: 24px;
    counter-increment: mtstep;
  }

  .mtlcbg .mtp1::before {
    content: counter(mtstep, decimal-leading-zero);
    position: absolute;
    left: -54px;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #3385FF;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
  }

  /* 竖向连线：穿过 22px 的项间距接到下一项编号环上沿 */
  .mtlcbg .mtp1::after {
    content: '';
    position: absolute;
    left: -38px;
    top: 34px;
    bottom: -22px;
    width: 2px;
    background-color: #BFD8FF;
  }

  .mtlcbg .mtp1:last-child::after {
    display: none;
  }

  /* 硬换行是给 1200px 折线图的窄节点排的，手机端去掉更整齐 */
  .mtlcbg .mtp1 br {
    display: none;
  }

  /* --- 3E.5 命题细目表 .mtxm（1200×493 四角定位 → 2×2 卡片）--------- */
  .mtxm {
    width: 100%;
    height: auto;
    background: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 15px;             /* .mtxm 不在 .mid 里，自己补左右安全边距 */
  }

  .mtxm .mtli1,
  .mtxm .mtli2,
  .mtxm .mtli3,
  .mtxm .mtli4 {
    position: static;
    width: auto;
    margin: 0;
    padding: 16px 12px 14px;
    background-color: #F4F8FF;
    border-radius: 10px;
    text-align: center;
  }

  /* PC 为了让 01/04 靠右，写了 .mtli1 .mth3{text-align:right} 和
     .mtli1 .mtp,.mtli4 .mtp{text-align:right}，手机端四项统一居中，
     需要三类选择器才压得住 */
  .mtxm .mth3,
  .mtxm .mtli1 .mth3,
  .mtxm .mtli4 .mth3 {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
  }

  .mtxm .mtp,
  .mtxm .mtli1 .mtp,
  .mtxm .mtli4 .mtp {
    text-align: center;
    font-size: 13px;
    line-height: 20px;
  }

  /* --- 3E.6 成绩分析（左图右列表 → 上下）----------------------------- */
  .cjimg {
    float: none;
    width: 100%;
    height: auto;
    padding: 0;
    margin-bottom: 20px;
  }

  .fl {
    float: none;
    width: 100%;
  }

  /* 成绩分析：序号圆 + 说明文字原来是「行内块 + 裸文本节点」，
     文字换行后会退回到圆形的左边缘（和序号对齐），而不是和第一行
     文字对齐 —— 20 字的那条被挤成两行时特别明显。
     改成 flex 后文本成为独立的 flex 项，换行自然与首行左边缘对齐；
     圆同时缩到 40px，让「独立运算引擎服务支持百万级试卷同时分析」
     在 375 屏下（可用宽 293px × 14px 字 ≈ 280px）也能单行排下。 */
  .cjcon,
  .cjcon:nth-child(2) {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    line-height: 22px;
  }

  .cjcon .cjxu {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    margin: 0 12px 0 0;
  }

  /* --- 3E.7 核心功能 .hexin1-9（1200×420 绝对定位气泡）--------------- */
  .hexin_bg {
    background-size: cover;
    padding: 34px 15px;
  }

  .hexinfix {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hexinfix .hexin {
    position: static;
    width: 33.333%;
    height: auto;
    min-height: 96px;
    margin: 0 0 14px;
    padding: 22px 4px;
    font-size: 15px;
    line-height: 22px;
    background-size: 100% 100%;
  }

  /* --- 3E.8 平台优势 .zkyscon（544×230 两列 → 单列）------------------ */
  .zkyscon {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 24px;
    padding: 20px 20px 24px;
    border-radius: 0 14px 14px 14px;
  }

  /* 序号徽标原是绝对定位在卡片左上角外侧，改为常规流内居左 */
  .zkysshu {
    position: static;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .zkysh3 {
    font-size: 17px;
    line-height: 28px;
  }

  .zkysp {
    font-size: 13px;
    line-height: 23px;
  }

  /* --- 3E.9 相关数据 .sjli（400px 三列 → 两列）----------------------- */
  .sjli {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-left: 0;
    margin-bottom: 22px;
  }

  .sjimg {
    width: 48px;
    height: 48px;
    margin-right: 8px;
  }

  .sjr {
    padding: 2px 0;
  }

  .sjh3 {
    font-size: 22px;
    line-height: 30px;
  }

  .sjh3 span {
    font-size: 13px;
    margin-left: 3px;
  }

  .sjp1 {
    font-size: 14px;
    line-height: 22px;
  }

  /* 合作院校背景图按视口适配 */
  .hezxxbg {
    background-size: cover;
  }

  /* ======================================================================
     3F. 非学历教育数字化解决方案
     ====================================================================== */

  .gaoxiao_bg,
  .jigou_bg,
  .dx_bg {
    background-size: cover;
    background-position: center;
  }

  /* --- 3F.1 角色功能 .jsbox（左 3 圆 + 中面板 + 右 3 圆）--------------
     原为「3 列并排」，DOM 顺序是 左栏 / 中间面板 / 右栏。移动端用 order
     把左右两栏的 6 个角色圆提到前面拼成两行三列，面板排到下方。
     --------------------------------------------------------------------- */
  .jsbox {
    width: 100%;
    margin: 24px auto 40px;
    display: flex;
    flex-wrap: wrap;
  }

  .jsbox .fl,
  .jsbox .fr {
    order: 1;
    float: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .jstx {
    width: 33.333%;
    margin-bottom: 22px;
  }

  .jsimg {
    width: 74px;
    height: 74px;
    border-width: 4px;
    display: block;
    margin: 0 auto;
  }

  .jsp1 {
    font-size: 13px;
    line-height: 22px;
  }

  /* 角色之间的连线装饰隐藏。
     注意 .line 默认就是 display:none，但 .jstx.on .line 会把它打开，
     所以要显式带上 .on 状态（并列写两个选择器把权重压过去）。 */
  .jsbox .jstx .line,
  .jsbox .jstx.on .line {
    display: none;
  }

  .midjs {
    order: 2;
    float: none;
    width: 100%;
    margin: 0;
    padding: 24px 16px;
  }

  .midjsh3 {
    width: auto;
    display: inline-block;
    padding: 0 24px;
    font-size: 18px;
    line-height: 44px;
    margin-bottom: 18px;
  }

  .titleList {
    height: auto;
  }

  .midjsp {
    float: left;
    width: 50%;
    margin-left: 0;
    font-size: 14px;
    line-height: 40px;
  }

  /* --- 3F.2 业务流程 .ywlcbox（1236px 折线图 → 竖向流程）------------- */
  .ywlcbox {
    width: 100%;
    height: auto;
    background: none;
    margin: 30px auto 40px;
    padding-left: 18px;
    border-left: 2px solid #0066FF;
  }

  .ywlcp1,
  .ywlcp1:nth-child(n) {
    position: static;
    white-space: normal;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 14px;
  }

  /* --- 3F.3 典型案例 .anlibox（380×390 三列交替）--------------------- */
  .anlibox,
  .anlibox:nth-child(2n+1) {
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .animg {
    width: 100%;
    height: auto;
  }

  .anlip {
    font-size: 14px;
    line-height: 26px;
    padding: 14px 12px;
    white-space: normal;
  }

  /* --- 3F.4 机构版业务流程 .jglc（384px 两列 → 单列）----------------- */
  .jglc {
    width: 100%;
    margin-bottom: 20px;
  }

  .jglch3 {
    font-size: 22px;
    line-height: 64px;
  }

  /* --- 3F.5 平台优势 .youshicon（360×148 三列 → 单列）---------------- */
  .youshicon {
    width: 100%;
    height: auto;
    min-height: 124px;
    margin: 44px 0 20px;
    padding: 54px 16px 20px;
    font-size: 15px;
    line-height: 26px;
  }

  .xuhao {
    left: 50%;
    margin-left: -41px;
  }

  /* --- 3F.6 典型案例（logo 卡）--------------------------------------- */
  .dxcon {
    width: 100%;
    height: auto;
    padding-bottom: 24px;
    margin-bottom: 20px;
  }

  .dxlogo {
    width: 70%;
    max-width: 260px;
    height: auto;
    margin: 30px auto 10px;
  }

  .dxp1 {
    font-size: 17px;
    line-height: 30px;
  }

  /* --- 3F.7 党校培训考试平台 ----------------------------------------- */
  .dangxiao_left {
    float: none;
    width: 100%;
    height: auto;
  }

  .dangright {
    float: none;
    width: 100%;
    height: auto;
    margin: 24px 0;
    padding: 20px;
  }

  .dangh4 {
    font-size: 16px;
    line-height: 28px;
    text-align: center;
  }

  .dangp {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }

  /* 八大核心功能 .heli（300×300 三列 → 单列） */
  .heli {
    float: none;
    width: 100%;
    height: auto;
    padding: 24px 20px;
    margin-bottom: 20px;
  }

  .himg {
    width: 36px;
    height: auto;
  }

  .bah3 {
    font-size: 17px;
    line-height: 30px;
  }

  .bap {
    font-size: 14px;
    line-height: 24px;
  }

  /* --- 3F.8 三大应用系统 .fenzhi_box --------------------------------- */
  .fenzhi_box {
    width: 100%;
  }

  .fenzhi1 {
    width: 100%;
    height: auto;
  }

  .fzh3 {
    font-size: 17px;
    line-height: 30px;
  }

  .fzp {
    font-size: 14px;
    line-height: 24px;
  }

  .xxlc {
    width: 100%;
    height: auto;
  }

  /* --- 3F.9 四大平台特色 .tesli（530×160 两列 → 单列）---------------- */
  .tesli {
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 16px;
    padding: 18px 20px;
  }

  .tsh4 {
    font-size: 17px;
    line-height: 32px;
  }

  .tesp {
    font-size: 14px;
    line-height: 23px;
  }

  /* ======================================================================
     3G. 创新品牌服务
     ====================================================================== */

  /* --- 3G.1 三大业务类型 .pinbox（370px 三列 → 单列）----------------- */
  .pinbox {
    width: 100%;
    margin-bottom: 20px;
  }

  .pincon {
    height: auto;
    padding: 18px 16px 8px;
  }

  .pinli {
    float: left;
    width: 48%;
    margin-right: 2%;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 32px;
  }

  /* --- 3G.2 品牌-企业的门面 .pinleft / .pinright --------------------- */
  .pinleft {
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .pinright {
    float: none;
    width: 100%;
  }

  .pmli {
    float: none;
    width: 100%;
    padding: 12px 0;
  }

  .pmh1 {
    font-size: 16px;
    line-height: 28px;
  }

  .pinp {
    font-size: 14px;
    line-height: 25px;
  }

  .title_h3 {
    font-size: 21px;
    line-height: 36px;
    background: none;
  }

  /* --- 3G.3 营销 .yleft / .yxmid（三栏 → 上下）---------------------- */
  .yleft {
    width: 100%;
  }

  .yxmid {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 20px auto;
  }

  .yli {
    padding: 16px 0;
  }

  .yh3 {
    font-size: 17px;
    line-height: 28px;
  }

  .yp1 {
    font-size: 14px;
    line-height: 24px;
  }

  /* --- 3G.4 新媒体 .sileft / .siright ------------------------------- */
  .sileft {
    float: none;
    width: 100%;
  }

  .siright {
    float: none;
    width: 100%;
    height: auto;
  }

  .sip {
    padding: 14px 0;
    font-size: 14px;
    line-height: 25px;
  }

  /* --- 3G.5 四大特色服务 .sibox（275px 四列 → 单列）----------------- */
  .sibox {
    float: none;
    width: 100%;
    padding: 18px 0;
  }

  .sida {
    width: 100%;
    max-width: 275px;
    height: auto;
    margin: 0 auto;
  }

  .sdtit {
    margin: 14px auto;
  }

  .sdp {
    width: 100%;
    font-size: 14px;
    line-height: 25px;
  }

  /* --- 3G.6 服务保障（中心圆 + 四角绝对定位框 → 竖向排列）------------ */
  .wubian {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 24px auto;
    padding: 44px 0;
    line-height: 1.5;
    font-size: 24px;
  }

  .wubox1,
  .wubox2,
  .wubox3,
  .wubox4,
  .wubox5 {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
    padding: 18px 16px;
  }

  .wuh3 {
    font-size: 16px;
    line-height: 28px;
  }

  .wup {
    padding-left: 0;
    font-size: 14px;
    line-height: 24px;
  }

  .btleft {
    width: 36px;
    height: auto;
    margin: 0 8px;
  }

  /* --- 3G.7 五大核心价值 .wuhbox1-5（181px 圆形五列 → 两列）---------- */
  .wuhbox1,
  .wuhbox2,
  .wuhbox3,
  .wuhbox4,
  .wuhbox5 {
    width: calc(50% - 8px);
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.35;
  }

  /* --- 3G.8 服务案例 ------------------------------------------------ */
  .anpbox {
    width: 100%;
  }

  .anpic1,
  .anpic2 {
    max-width: 100%;
    height: auto;
  }

  /* ======================================================================
     3H. 服务与案例
     ====================================================================== */

  /* --- 3H.1 服务特色 .teseli ---------------------------------------- */
  .teseli {
    width: 100%;
    margin-bottom: 24px;
  }

  .tsimg {
    max-width: 100%;
    height: auto;
  }

  .tsh3 {
    font-size: 17px;
    line-height: 30px;
  }

  .tsp {
    font-size: 14px;
    line-height: 24px;
  }

  /* --- 3H.2 服务理念 .fwbox.fw1-fw7（550px 高绝对定位棋盘 → 单列）----
     PC 端 7 张卡片用 left/top 绝对坐标在 1200×550 画布上错落摆放，
     小屏无法还原，改为顺序竖排。
     --------------------------------------------------------------------- */
  .fuwu {
    height: auto;
    margin: 20px auto;
  }

  .fwbox,
  .fw1,
  .fw2,
  .fw3,
  .fw4,
  .fw5,
  .fw6,
  .fw7 {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    background-position: 92% 16px;
  }

  .fwh1 {
    font-size: 26px;
    line-height: 38px;
  }

  .fwp {
    font-size: 15px;
    line-height: 26px;
  }

  /* --- 3H.3 服务流程 .fwlc（1200×1037 背景图 → 纯文字流程）----------- */
  .fwlc {
    width: 100%;
    height: auto;
    background: none;
    margin: 24px auto;
  }

  .fwlcp1 {
    font-size: 16px;
    line-height: 34px;
    margin-bottom: 18px;
  }

  .leftfw,
  .rightfw {
    width: 100%;
    margin: 0 0 20px;
  }

  .fwlch3 {
    font-size: 21px;
    line-height: 52px;
  }

  .fwlcp2 {
    font-size: 15px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .fwlcp3 {
    font-size: 14px;
    line-height: 24px;
    padding: 8px 0;
    margin-bottom: 16px;
  }

  /* ======================================================================
     3I. 自考网络助学
     ====================================================================== */

  /* --- 3I.1 合作高校 .xxli（六列浮动胶囊 → 两列网格）-----------------
     PC 形态：.xxli 是 float:left + width:calc(100%/6 - 20px) + height:60px
     的胶囊，内部靠 d-flex / d-flex-middle（common.css）让圆形校徽与校名
     水平排列并垂直居中。共 34 所高校，最长校名「湖北国土资源职业学院」10 字。

     踩过的坑（务必保留 grid 方案）：
     最初只把宽度改成 calc(50% - 10px)，但**没有取消 float**。
     float 布局没有「行」的概念，元素逐个向左贴靠；一旦某个校名折成两行
     把卡片撑高，后续元素的换行点就错乱 —— 高卡片占住左列后，后面的元素
     贴不进去就被挤到右列，左列留下空洞（表现为某个校名独占右列、左边空
     一格，整片参差不齐）。

     改用 CSS Grid 后问题从根上消失：
       1. grid item 会**自动忽略 float**，不必担心 PC 的 float:left 残留
       2. 同一行两项默认 align-items:stretch → **自动等高**，不再高矮不齐
       3. grid-auto-rows 给每行兜底最小高度，保证触摸目标足够大
     --------------------------------------------------------------------- */
  .xxbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, auto);
    gap: 10px;
    padding: 16px 0;
  }

  /* 关键：Grid/Flex 容器下必须禁用 clearfix 的伪元素。
     common.css 里 .clearfix 是「micro clearfix」写法：
       .clearfix:before, .clearfix:after { content:''; display:block;
                                           visibility:hidden; clear:both }
     它带 content:''（非 none），所以在 Grid 容器里 :before 与 :after 会
     各自**变成一个占位网格项**——:before 排在最前，直接吃掉左上第一格，
     导致首个校名被挤到右上、左上留一个空位（因为 visibility:hidden，
     肉眼只看到「莫名其妙空一格」，极易误判成 CSS 写错）。
     本元素在 PC 下是 block+float，不需要 clearfix，故直接关掉伪元素。
     选择器写 .xxbox.clearfix 是为了稳定压过 .clearfix:before 的权重。 */
  .xxbox.clearfix::before,
  .xxbox.clearfix::after {
    content: none;
    display: none;
  }

  .xxbox .xxli {
    /* grid item 本身会忽略 float，这里显式声明以免后人困惑 */
    float: none;
    width: auto;
    margin: 0;
    height: auto;
    padding: 8px 10px;
    border-radius: 24px;
    font-size: 12px;
    line-height: 15px;
  }

  .xxbox .xxli img {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    /* 校徽是 flex item，不允许被文字挤压变形 */
    flex-shrink: 0;
  }

  /* 校名：两列下每列内容宽约 110px，10 字（12px × 10 = 120px）放不下一行，
     故把 .txtOver 的单行省略号改成最多两行折行，保证校名完整可读。 */
  .xxbox .xxli p,
  .xxbox .xxli .txtOver {
    flex: 1;
    /* flex item 必须 min-width:0，否则不收缩、会把校徽挤走 */
    min-width: 0;
    width: auto;
    margin: 0;
    text-align: left;
    font-size: 12px;
    white-space: normal;
    text-overflow: clip;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 15px;
  }

  /* --- 3I.2 考核规划：还原 PC 的「分组 ＋ 运算」关系 -------------------
     PC 端 .lctu 是 1200×224 的整幅流程图（lctu.png），图上画的是：
       [视频课程 ▸ 知识点测评 ▸ 阶段测评 ▸ 综合测评] ＋ [统考笔试成绩] ＝ 最终成绩
     蓝色虚线框把前 4 项框成一组，橙色胶囊 30% / 70% 标出两组各自的权重，
     文字靠 margin-top:175px + margin-left:85/130/125px 逐像素对齐到图上。

     缩到 345px 后这套像素定位全部失效。前几版只是把文字改成竖排列表，
     结果成了「6 行字 + 两个孤零零的百分比」——看不出哪几项属于平时成绩、
     也读不出 ＋/＝ 的合成关系，这正是「不如 PC 清楚」的根源。

     移动端改为不依赖图片的语义化呈现：
       顶部  权重总览（平时成绩 30% ／ 统考笔试成绩 70%）
       中部  平时成绩的 4 个组成项（两列浅蓝 chip）
              ＋ 统考笔试成绩（实底蓝块）
              ＝ 最终成绩（橙色强调块）
     --------------------------------------------------------------------- */

  /* grid / flex 容器下必须禁用 clearfix 伪元素 ——
     common.css 里 .clearfix 带 content:'' 的 ::before/::after，
     在 grid 里会各占一个网格项（::before 直接吃掉左上第一格）。
     详见段 3I.1 的完整说明，这里两个区块（考核规划 / 选课流程）一并处理。
     移动端已把所有浮动改成 grid/flex，故不再需要 clearfix。 */
  .kaohe_bg .clearfix::before,
  .kaohe_bg .clearfix::after,
  .xuanke_box .clearfix::before,
  .xuanke_box .clearfix::after {
    content: none;
    display: none;
  }

  /* .kaohe_bg .mid 下有两个子块：[6 个 <p>] 与 [30% 70% 胶囊]。
     纵排 flex 把后者（权重总览）用 order 提到最前：先看比例，再看构成。 */
  .kaohe_bg .mid {
    display: flex;
    flex-direction: column;
  }

  /* PC 的 gh_bg.png 是配合 1200px 宽布局的科技感线条，cover 到 375px 后
     放大 3.2 倍，只剩一堆交错线条从卡片缝隙里透出来，干扰可读性
     （浅紫线正好穿过蓝块上的白字）。移动端只保留底色。 */
  .kaohe_bg {
    background-image: none;
  }

  .kaohe_bg .mid > .clearfix:not(.lctu) {
    order: -1;
    display: flex;
    gap: 10px;
  }

  /* 30% / 70%：由「单行数字胶囊」改为「标签 + 数字」的权重卡，
     否则两个百分比孤悬在外，完全读不出各自代表什么 */
  .bfp1,
  .bfp2 {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 26px;
  }

  .bfp1::before,
  .bfp2::before {
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
    opacity: .92;
  }

  .bfp1::before {
    content: '平时成绩';
  }

  .bfp2::before {
    content: '统考笔试成绩';
  }

  /* 考核规划主体：4 个组成项 + 2 个合成节点，两列网格 */
  .lctu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    margin: 20px 0 0;
    background: none;
  }

  /* 平时成绩的 4 个组成项 → 两列 chip。
     .kaohe_bg 底色本身就是浅蓝 #F2F8FE，chip 若也用浅蓝会糊在一起，
     故改白底 + 浅蓝描边。 */
  .lctp1 {
    float: none;
    margin: 0;
    padding: 12px 8px;
    border: 1px solid #D6E6FF;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: #0066FF;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
  }

  /* 统考笔试成绩 / 最终成绩：各占整行，突出层次 */
  .lctp2,
  .lctp3 {
    position: relative;
    grid-column: 1 / -1;
    float: none;
    margin: 30px 0 0;
    padding: 14px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
  }

  .lctp2 {
    background-color: #0066FF;
  }

  .lctp3 {
    background: linear-gradient(135deg, #FF991C 0%, #FFB84D 100%);
  }

  /* ＋ / ＝ 用伪元素悬浮在块体上方的留白里居中，
     避免被实底背景包成「一块里塞了个加号」 */
  .lctp2::before,
  .lctp3::before {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #0066FF;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
  }

  .lctp2::before {
    content: '＋';
  }

  .lctp3::before {
    content: '＝';
  }

  /* --- 3I.3 选课流程：整图缩略不可读 → 编号步骤条 ---------------------
     PC 端 .xuanke_lc 是 1100×266 的流程图（xuanke_lc.png）：5 个圆形图标
     用折线上下交错相连；下方 5 个 .xuanke_li 靠 :nth-child(2n+1)
     { margin-top:160px } 做上下错位，其水平位置与上方图标一一对应。

     缩到 345px 宽后图标直径只剩约 44px，而两列排布的文字块根本无法
     判断哪个图标配哪段文字（PC 靠水平位置对齐，移动端这个前提不存在），
     视觉上就成了「一排小圆 + 一堆错位文字」。故隐藏整图，
     改用带序号与连接线的纵向步骤条 —— 顺序本身就是流程。
     --------------------------------------------------------------------- */
  .xuanke_box {
    padding: 0;
  }

  .xuanke_lc {
    display: none;
  }

  .xuanke_box .clearfix {
    counter-reset: xkstep;
  }

  .xuanke_li,
  .xuanke_li:nth-child(2n+1) {
    position: relative;
    float: none;
    width: 100%;
    margin: 0 0 20px;
    padding-left: 46px;
    counter-increment: xkstep;
  }

  .xuanke_li:last-child {
    margin-bottom: 0;
  }

  /* 步骤序号圆 */
  .xuanke_li::before {
    content: counter(xkstep);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #0066FF;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
  }

  /* 步骤之间的连接线 */
  .xuanke_li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 34px;
    bottom: -18px;
    left: 14px;
    width: 2px;
    background-color: rgba(0, 102, 255, .16);
  }

  .xkh2 {
    font-size: 16px;
    line-height: 26px;
    text-align: left;
  }

  .xkp {
    font-size: 13px;
    line-height: 21px;
    text-align: left;
  }

  /* --- 3I.4 学习流程 .anli（1200×304 流程图 → 编号步骤条）------------
     PC 端 .anli 是 1200×304 的背景图（xuexi_lc.png）：6 个 01–06 编号圆
     + 6 个不同颜色的大圆 + 箭头，文字（.anp1）用 padding-top:165px
     压在对应圆的正下方。背景图一旦去掉，编号与配色就全丢了，
     只剩 6 行黑字 —— 既没有流程感，也读不出先后顺序。

     移动端改为编号步骤条，并把 PC 的 6 种节点配色保留在序号圆上，
     这样既能看出顺序，又能一眼区分各步（与选课流程的步骤条风格统一）。
     --------------------------------------------------------------------- */
  .anli {
    width: 100%;
    height: auto;
    margin: 24px 0 6px;
    padding: 0 0 0 46px;
    background: none;
    /* 前一版用左侧竖线做列表引导，改成步骤条后由序号圆之间的
       连接线承担，故去掉 */
    border-left: none;
    counter-reset: xxstep;
  }

  .anp1 {
    position: relative;
    display: block;
    width: 100%;
    padding: 8px 0;
    color: #333333;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    vertical-align: baseline;
    counter-increment: xxstep;
  }

  /* 取消步骤文字里的强制换行。
     PC 端 .anli 是 1200×304 的一行图，6 个节点横排、每个只有约 200px，
     所以第 2 步「观看视频课程<br>知识点测评」、第 6 步「获得过程性<br>评价成绩」
     用 <br> 折成两行才排得下。
     H5 改竖排步骤条后，一行可用宽度约 244px（320px 屏），
     最长的一句「观看视频课程知识点测评」(11 字 × 15px ≈ 165px) 完全放得下，
     再保留 <br> 只会让 6 个步骤高矮不一（4 个单行 + 2 个双行）。
     用 display:none 屏蔽 <br> 即可，无需改动业务 HTML。 */
  .anli .anp1 br {
    display: none;
  }

  .anp1::before {
    content: counter(xxstep, decimal-leading-zero);
    position: absolute;
    top: 4px;
    left: -46px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #0066FF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
  }

  /* 连接线：从序号圆底边(4+30=34px)延伸到下一项的圆顶。
     bottom 取负值让它越过本项底边、吃掉上下 padding 形成的 16px 间隙 ——
     若用 bottom:0，单行项（高仅 38px）的线会被压成 4px 甚至消失，
     表现为有的步骤之间有线、有的没有。 */
  .anp1:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 34px;
    bottom: -16px;
    left: -32px;
    width: 2px;
    background-color: rgba(0, 102, 255, .16);
  }

  /* PC 图中 6 个节点各有一色，沿用原配色 */
  .anp1:nth-child(1)::before {
    background-color: #A78BFA;
  }

  .anp1:nth-child(2)::before {
    background-color: #5B9BF5;
  }

  .anp1:nth-child(3)::before {
    background-color: #F0736F;
  }

  .anp1:nth-child(4)::before {
    background-color: #5A6273;
  }

  .anp1:nth-child(5)::before {
    background-color: #46C08A;
  }

  .anp1:nth-child(6)::before {
    background-color: #4FBEF0;
  }

  /* --- 3I.5 下载APP / 关注公众号 .xiaz（上下堆叠 → 一行两个）---------
     PC 是 width:270px 的胶囊，由 .flexbox_center 居中并排。
     移动端 345px 容器放不下 270×2 + 左右各 20px 的 margin，
     段 2.0 的 `flex-wrap: wrap` 便让它们各自换成一行；而 .xiaz 在垂直
     方向没有 margin，两行就紧贴在一起 —— 看上去像一大坨叠着。
     （另：.xiaz 只在 zikaowangluozhuxue.html 使用，gaodengjiaoyuzixuekaoshi
      里那处已被 HTML 注释掉，这里用 .xxbox + .flexbox_center 相邻兄弟
      选择器限定作用域，避免波及全站其它 .flexbox_center。）
     --------------------------------------------------------------------- */
  .xxbox + .flexbox_center {
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 24px;
  }

  /* flex:1 平分整行 —— 两个按钮时各占一半；若将来只剩一个则独占整行，
     不会缩成尴尬的半宽 */
  .xiaz {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 10px;
    border-radius: 23px;
    font-size: 16px;
    line-height: 46px;
  }

  /* 二维码弹层 .gzh：PC 靠 :hover 唤出，触屏没有 hover。
     这里去掉 hover、补 :active / :focus（长按或点击即显示），
     否则「扫码下载 app」这个入口在手机上完全无法触达。
     定位也由 PC 的 left:70px 改为水平居中 —— 弹层外框 150px 宽，
     而按钮只有约 160px，靠左 70px 会向右溢出整屏。 */
  .xiaz .gzh {
    left: 50%;
    top: 100%;
    margin-top: 10px;
    transform: translateX(-50%);
  }

  /* 弹层内二维码 PC 固定 130px，在第 0 段的 box-sizing:border-box 下
     会撑破 padding 区域，改为随容器自适应 */
  .xiaz .gzhimg {
    width: 100%;
    height: auto;
  }

  .xiaz:active .gzh,
  .xiaz:focus .gzh {
    display: block;
  }


  /* ======================================================================
     3J. 教学资源服务（ziyuanfuwu.html）
     本页是全站定宽最重的页面：device 拼图 888px、sanda 卡片 480px、
     zdzcon 364px、shengheli 400px、kcnlc 250px 背景流程图，
     PC 端全靠固定像素 + float + margin 错位拼出来，移动端统一改
     流式宽度 / 单列堆叠，并复位所有错位边距。
     ====================================================================== */

  /* --- 3J.1 资源定制服务 .zdzcon（364×200 三列卡片 → 单列，图文左右）---
     PC 靠 width:364 + margin-right:54 排三列，:nth-child(3) 去右边距、
     :nth-child(4) 再 margin-left:182px 做错位。小屏一律单列并复位。
     --------------------------------------------------------------------- */
  .zdzcon,
  .zdzcon:nth-child(3),
  .zdzcon:nth-child(4) {
    float: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
    padding: 18px 20px;
    border-radius: 18px;
  }

  .zdzcon .lzdz {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .zdzcon .zdzimg {
    float: none;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    margin: 0 0 0 14px;
  }

  .zdzh3 {
    font-size: 17px;
    line-height: 26px;
  }

  .zdzshu {
    font-size: 32px;
    line-height: 38px;
  }

  .zdzheng {
    margin-right: 12px;
    margin-top: 8px;
  }

  .zdzp {
    font-size: 13px;
    line-height: 21px;
  }

  /* --- 3J.2 课程内容制作 .kcnbox1/.kcnbox2（150px 浮动 + 错位边距 → 两列）
     PC 靠 .kcnbox1 .kcnli{margin-left:114px} / :nth-child(1){margin-left:150px}
     把四张卡片错位排列，小屏改等宽两列并清零所有错位边距。
     .kcnbox1/.kcnbox2 是 .clearfix，改 flex 后其 ::after 会变成 flex 项，
     需一并隐藏，避免多出一个占位项。
     --------------------------------------------------------------------- */
  .kcnbox1,
  .kcnbox2 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .kcnbox1::after,
  .kcnbox2::after {
    display: none;
  }

  .kcnbox1 .kcnli,
  .kcnbox1 .kcnli:nth-child(1),
  .kcnbox2 .kcnli,
  .kcnbox2 .kcnli:nth-child(1) {
    float: none;
    width: calc(50% - 8px);
    height: auto;
    margin: 0;
  }

  .kcnh3 {
    font-size: 16px;
    line-height: 30px;
  }

  .kcnp {
    font-size: 13px;
    line-height: 22px;
  }

  /* --- 3J.3 课件制作流程 .kcnlc（250px 背景流程图 + 9 个浮动序号胶囊）----
     PC 用 kcnlc.png 作底，9 个 93×50 胶囊靠 float + margin-right:39 与
     margin-top:180px 交替错位贴合图上节点。小屏去掉背景图，改为三列
     等宽色块网格，序号仍靠 .kcnxu1~9 的背景色区分。
     --------------------------------------------------------------------- */
  .kcnlc {
    background: none;
    height: auto;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 22px;
  }

  .kcnxu,
  .kcnxu:nth-child(2n+2) {
    float: none;
    width: calc(33.33% - 7px);
    height: 46px;
    line-height: 46px;
    margin: 0;
    font-size: 20px;
    border-radius: 8px;
  }

  .kcnxu1 {
    margin-left: 0;
  }

  /* --- 3J.4 内容审核 .shengheli（400px 三列 + 绝对定位白卡 → 单列纵向）--
     PC 白卡 .shengcon 用 left:27/top:94 绝对定位压在图片上；小屏图片
     缩到 100% 后压不住，改回常规文档流：图在上、白卡紧随其后。
     --------------------------------------------------------------------- */
  .shengheli {
    float: none;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 26px;
  }

  .shengimg {
    width: 100%;
    max-width: 266px;
    height: auto;
    margin: 0 auto;
  }

  .shengcon {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 14px;
    padding: 20px;
    border-radius: 12px;
  }

  .shengh3 {
    font-size: 17px;
    line-height: 32px;
  }

  .shengp {
    font-size: 13px;
    line-height: 24px;
  }

  /* --- 3J.5 服务优势 .zyfli（234px 三列 → 单列）----------------------- */
  .zyfli {
    width: 100%;
    margin-bottom: 22px;
  }

  .zyysimg {
    width: 150px;
    height: auto;
    margin: 0 auto 10px;
  }

  .zyysh3 {
    font-size: 18px;
    line-height: 40px;
  }

  .zyysp {
    font-size: 13px;
    line-height: 26px;
  }

  /* --- 3J.6 专业录播设备 .device（652px 定高 + 固定像素拼图 → 纵向堆叠）
     PC 是「左三行小图 + 右两张大图」的 888px 定高拼图，.device-box /
     .device1~4 全是固定像素宽高。小屏改纵向堆叠，宽度用百分比、高度
     auto 保持原始比例。内层包裹 div 带内联 margin-right:10px，需
     !important 覆盖（选择器 .device > div 权重低，且无法靠顺序取胜）。
     --------------------------------------------------------------------- */
  .device {
    flex-direction: column;
    height: auto;
    padding: 0;
  }

  .device > div {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .device-box {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }

  .device1 {
    width: calc(50% - 5px);
    height: auto;
  }

  .device2 {
    width: 100%;
    height: auto;
  }

  .device-r {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .device3,
  .device4 {
    width: calc(50% - 5px);
    height: auto;
  }

  /* --- 3J.7 三大课件体系 .sanda_box1/.sanda_box2（310/480 定宽 → 单列）--
     .sandaimg 用 height + 百分比高子图，父层高度改 auto 后子图 height:100%
     会失效，需同步把 .sandapic 高度改 auto 才能按原始比例渲染。
     --------------------------------------------------------------------- */
  .sanda_box1,
  .sanda_box1.sanda_box2 {
    width: 100%;
    margin: 0 0 30px;
  }

  .sandaimg,
  .sandaimg2 {
    width: 100%;
    height: auto;
    margin: 0 0 14px;
  }

  .sandapic {
    height: auto;
  }

  .sandap {
    font-size: 13px;
    line-height: 22px;
    word-break: break-all;
  }

  .kebq {
    margin: 18px auto;
    font-size: 17px;
  }

  .kep {
    font-size: 14px;
    line-height: 26px;
  }

  /* --- 3J.8 八大课件特色 .babox（280×220 四列 → 两列）----------------
     PC 的 .babox:nth-child(4n+4){margin-right:0} 是四列收尾规则，两列
     要改成 2n+2 收尾；两条同权重（0,2,0），靠 mobile.css 后加载覆盖。
     --------------------------------------------------------------------- */
  .babox {
    float: left;
    width: calc(50% - 8px);
    height: auto;
    margin: 0 16px 16px 0;
    padding: 20px 12px;
  }

  .babox:nth-child(2n+2) {
    margin-right: 0;
  }

  .badaimg {
    width: 62px;
    height: 55px;
    margin: 0 auto 12px;
  }

  .badap {
    font-size: 15px;
    line-height: 26px;
  }


  /* ======================================================================
     3K. 高等学历继续教育 · 核心功能图标格 .gnli（gaoxiaoxuelijiaoyu.html）
     PC 是 width:300px 的浮动格子，1200px 容器正好 4 个一行。
     300px > 移动端 .mid 的内容宽（320 视口时只有 290px），故会溢出 10px；
     375 视口下容器 345px 恰好放得下，所以这个问题只在窄屏（≤ 350px）
     暴露 —— 也是它没在早先 375 档诊断里出现的原因。改为两列。
     ====================================================================== */
  .gnli {
    float: left;
    width: calc(50% - 8px);
    margin: 0 16px 18px 0;
  }

  .gnli:nth-child(2n+2) {
    margin-right: 0;
  }

  .gnimg {
    width: 72px;
    height: 72px;
    margin: 6px auto 8px;
  }

  .gnp {
    font-size: 15px;
    line-height: 34px;
  }

  /* --- 3K.2 技术特点 .jsli（仅 gaoxiaoxuelijiaoyu.html）-----------------
     PC 是 width:280px / height:424px 的定宽卡片 4 列横排（含圆角 + 投影，
     是一张「看得见的卡片」）。移动端 4 张竖排后，280px 落在 .mid 的
     345px 内容宽里 → 右侧空出 65px，卡片整体明显左偏（截图一眼可见）。
     改为通栏卡片：宽度铺满、高度交给内容，插画图同步铺满。
     文案里 PC 专用的 <br>（每行刚好排 14 个字）在通栏后已无必要，
     且会让「系统简洁、移动端扫码」这类句子被硬拆两行，故一并屏蔽。 */
  .jsli {
    width: 100%;
    height: auto;
  }

  .jishu {
    width: 100%;
    height: auto;
  }

  .jsli .jishup br {
    display: none;
  }

  /* --- 3K.3 平台特色 .ftsli（仅 gaoxiaoxuelijiaoyu.html）----------------
     同一页的另一处定宽卡片：PC 是 width:300px（内含 300×300 方图）4 列横排。
     移动端 414 视口下容器内容宽 384px，卡片仍只占 300px → 右侧空 84px，
     塌列检测（宽度 < 容器 75%）直接命中。同样改通栏，方图跟着铺满
     （源图是 600×600，铺到 384 时折合 2x 屏 768px，仅 1.28 倍放大，
     清晰度无损失），并把固定 height:60px 的说明文字交给内容自适应。 */
  .ftsli {
    width: 100%;
  }

  .ftsimg {
    width: 100%;
    height: auto;
  }

  .ftsp {
    height: auto;
    padding: 0 20px 20px 20px;
  }


  /* ======================================================================
     3L. 系统维护页（system-weihu.html）
     该页是独立页面：只引入 mobile.css，没有 common.css / style.css，
     结构就是 <center><img style="width:1000px;height:800px"></center>。
     第 0 段的 `img { max-width:100%; height:auto }` 能压住宽度（max-width
     优先于内联 width），但内联 height:800px 是普通声明、优先级高于
     普通样式表声明，会把图片压成畸形，所以此处必须用 !important。
     ====================================================================== */
  body > center > img {
    width: 100% !important;
    height: auto !important;
  }


  /* ======================================================================
     3M. 合作高校 logo 墙 .hzli（fuwuyuanli / gaodengjiaoyuzixuekaoshi /
     gaoxiaoxuelijiaoyu 三页共用同一套结构，均 18 个院校）
     PC 是 .hzli{float:left;width:200px}，1200px 容器正好 6 个一行。
     移动端容器仅 345px，装不下两个 200px，float 只能逐个换行 → 一行
     一个，18 个院校要滚动很久。改为两列百分比宽度。
     采用 50% + 内部居中（.xxlogo 的 margin:auto / .hzp 的 text-align），
     两列之间不做额外间隙，视觉留白由 logo 居中自然产生。
     ====================================================================== */
  .hzli {
    float: left;
    width: 50%;
    padding-bottom: 18px;
  }

  .xxlogo {
    width: 68px;
    height: 68px;
    /* PC 为 80px，两列后单格仅约 170px，略缩以留出呼吸感 */
    margin: 8px auto;
  }

  .hzp {
    font-size: 14px;
    line-height: 22px;
    /* PC 为 30px 行高，小屏过高会把 logo 推得很散 */
    padding: 0 4px;
  }


  /* ======================================================================
     3N. 两处「PC 多列网格在手机塌成一列」
     由 run-diag.py 的「塌列检测」发现 —— 这类问题既不横向越界也不被压扁，
     越界/压扁两项检测永远报 0，只有该检测或肉眼截图才能抓到。
     ====================================================================== */

  /* --- 3N.1 考试业务流程 .xuli（tongyongjiaokaochanpin.html）------------
     PC：float:left; width:204px; margin-right:45px，
         :nth-child(5n+5) 去掉每行末项的尾距，1200px 容器正好 5 个一行；
         序号圆 .xushu 70px 绝对定位贴在胶囊左端（top:-3px，上下各溢 3px）。
     移动端容器仅 330px，放不下两个 204px → 塌成一列，右侧空掉一大块。
     改两列：奇数项留 14px 间距，使 (50%-7) + 14 + (50%-7) = 100% 正好铺满。
     序号圆同步缩到 44px，padding-left 由 70px 收到 50px —— 320 视口下
     每列仅 138px，扣掉 50px 后文字区 88px，15px 字号可容 5.8 字，
     恰好放下最长的「打印准考证」。
     ====================================================================== */
  .xuli {
    width: calc(50% - 7px);
    margin-right: 0;
    margin-bottom: 14px;
    padding-left: 50px;
    font-size: 15px;
    line-height: 52px;
    border-radius: 26px;
  }

  .xuli:nth-child(odd) {
    margin-right: 14px;
    /* 覆盖 PC 的 :nth-child(5n+5){margin-right:0}：两列后换行位置变了，
       改由奇偶控制，第 5、10 项需要左边距而非零 */
  }

  .xuli:nth-child(even) {
    margin-right: 0;
  }

  .xushu {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    top: 4px;
    /* 胶囊高 52px，圆 44px 垂直居中 —— PC 的 top:-3px 是为 64px 胶囊配的 */
  }

  /* --- 3N.2 试题管理卡片 .stcon（gaodengjiaoyuzixuekaoshi.html）----------
     PC：169×188 定宽卡片放在 .flexbox_between（flex + space-between）里，
         1200px 一行 6 个；:nth-child(2n+2){margin-top:58px} 做上下交错，
         序号圆 .stxu 交替溢出到卡片下边/上边（±24px）—— 正因为交错，
         相邻卡片的序号才不会打架。
     移动端 330px 容器放不下两个 169px（每列只有 165px）→ 塌成一列。
     改两列后【必须同时取消交错并把序号收回卡片内】，
     否则上下相邻卡片的序号会互相重叠。父容器是 flex + space-between，
     所以直接用 50% 宽度让 space-between 分配中间的 16px 间隙即可。
     ====================================================================== */
  .stcon {
    width: calc(50% - 8px);
    height: auto;
    min-height: 150px;
    margin-bottom: 16px;
    padding: 20px 12px;
  }

  .stcon:nth-child(2n+2) {
    margin-top: 0;
    /* 覆盖 PC 的锯齿交错 */
  }

  .stxu {
    left: auto;
    right: 10px;
    top: 10px;
    bottom: auto;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
  }

  .stcon:nth-child(2n+1) .stxu,
  .stcon:nth-child(2n+2) .stxu {
    top: 10px;
    bottom: auto;
    /* 上面两条 PC 规则（上/下交替溢出）权重更高，必须显式覆盖 */
  }

  .stp1 {
    font-size: 13px;
    line-height: 24px;
  }


  /* ======================================================================
     4. 交互细节 —— 步骤 6 实现
     待办：hover 态在触屏失效 → 补 :active / 触摸态
           scrollReveal 滚动动画在小屏易造成内容延迟出现 → 移动端关闭或简化
           表格类内容 → 外层加可横向滚动容器
           正文小于 12px 的文本 → 调至 12px 以上
     ====================================================================== */

}