/* ==========================================================================
   common/mobile.css  —  手机端适配层（P5）
   --------------------------------------------------------------------------
   加载顺序：必须在 www 的 static/css 下全部样式 **和** common/bridge.css 之后。
   ★ 注释里不要出现「斜杠 + 星号」这两个字符连写（例如写通配路径时）：
     它会被任何「注释配平」自检工具当成注释开头，平白多出一个未闭合的左括号。
   这一层的职责就是「覆盖」：www 的 nav.css / footer.css 几乎没有移动端分支
   （nav.css 全文只有一条 @media (max-width:1440px)），390px 下横向菜单条
   和四联保障条会直接把页面撑出横向滚动条。

   ★ 为什么单独一个文件、而不是去改 www 的原文件：
     本项目对 www 原始资源一律「只覆盖、不改动」（bridge.css 是同一约定），
     www 那边后续升级不会和本地改动打架，也一眼看得出哪些是我们加的。

   ★ 断点沿用 www 既有约定 768 / 992（见 universalComponents.css 与
     pages.css），不另起断点，避免同一屏出现三套宽度。

   ★ 本文件只放「跨页壳层」：导航 / 页脚 / 全局容器 / 悬浮条。
     各业务块的手机端样式仍留在块自己的 CSS 里（pages.css、
     product-blocks.css、news-blocks.css、doc-blocks.css 末尾都有
     @media 段），按块分组比按屏幕分组更好维护 —— 改一个块时不会
     漏掉它在另一个文件里的手机端分支。

   章节：
     0) 全局基线
     1) 导航：汉堡按钮 + 抽屉（DOM 见 public/header.html，交互见 js/mobile-nav.js）
     2) 页脚
     3) 右侧悬浮工具条
   ========================================================================== */

/* ==========================================================================
   0. 全局基线
   ========================================================================== */

/* --------------------------------------------------------------------------
   0-0. 769 ~ 1199px 这段宽度以前是**完全没人管**的
   --------------------------------------------------------------------------
   www 的 universalComponents.css:12 写着
       .comp_container { max-width: 1400px; min-width: 1200px; }
   而唯一的放宽分支是 @media (max-width:768px)。
   于是 769~1199px 之间，每个容器都被钉死 1200px 宽 ——
   实测 800px 视口下**全部 42 个页面** documentElement.scrollWidth = 1200，
   整页能左右拖。

   这不是「手机上不好看」的程度：iPad 竖屏 768 走手机分支没事，
   **iPad 横屏 1024 刚好落进这个真空区**，是真实设备上的真实故障。

   修法是改 --minwidth 这个变量本身（它只被 .comp_container* 三处引用），
   最小改动、也不会波及别处（没有第三个文件依赖它）。
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --minwidth: 0;

    /* ★ 把 --navheight 对齐到手机导航条的真实高度（--wapnavheight，50px）。
       之前这里没改，--navheight 一直是 PC 的 62px，而所有「给顶部让位」的
       规则读的都是它：
         body:not(.has-hero) 的 padding-top（bridge.css）
         .p-anchor 的 sticky top 与 scroll-margin-top（plan-blocks.css）
         .activities 吸顶条 top（activities.css）
       结果手机上处处多出 12px：页头横幅上面一条白带，滚动后吸顶条
       与导航之间又一条白带（白带里还露着横幅的边）。
       改这一处，四处一起归位。 */
    --navheight: var(--wapnavheight, 50px);
  }
}

@media (max-width: 768px) {
  /* 手机端 logo 用 www 变量里已经备好的移动端尺寸，不要用 PC 的 36px */
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-logosize {
    height: var(--MobileLogo, 28px);
    width: auto;
  }

  /* 后台富文本里常见的写死宽高：手机上一律不许比屏宽 */
  img,
  table,
  iframe,
  video {
    max-width: 100%;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 首页「为什么选择我们」四宫格（www 的 .chooseUs-row-a）
     PC 是 2 列，每列 min 宽被内容顶到 187px（padding 64 + gap 32 + 88px 图标），
     2×187 + 42 列间距 = 416 > 390，且不换行 —— 首页 doc=442 就是它。
     手机上改单列并收掉内边距。 */
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a .chooseUs-itme {
    height: auto;
    min-height: 104px;
    padding: 16px 18px;
    gap: 14px;
  }
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a
    .chooseUs-itme .chooseUs-itme-main .chooseUs-itme-title {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 6px;
  }
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a
    .chooseUs-itme .chooseUs-itme-main .chooseUs-itme-desc {
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 8px;
  }
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a
    .chooseUs-itme .chooseUs-itme-icon {
    height: 56px;
    flex: 0 0 auto;
  }
  .chooseUs-container .chooseUs-min-container .chooseUs-row-a
    .chooseUs-itme .chooseUs-itme-icon img {
    width: 56px;
    height: 56px;
  }

  /* 首页「安全防护」动画卡里的标签是 10px（写在 common/banner/index.html
     的内联样式里）。PC 上作为小徽标还行，手机屏上 10px 基本看不清，
     统一提到 12px。 */
  .tpm-portal-introduce__anim-agent-runtime__card-text {
    font-size: 12px !important;
    line-height: 18px;
  }

  /* 整节容器的上下留白在手机上要收一半，否则一屏只能放一块 */
  .p-section {
    padding: 32px 0;
  }
  .p-section__title {
    font-size: 22px;
    line-height: 32px;
  }
  .p-section__desc {
    font-size: 14px;
    line-height: 24px;
  }
}

/* ==========================================================================
   1. 导航：汉堡按钮 + 抽屉
   --------------------------------------------------------------------------
   www 的导航是「一排横向菜单 + 右侧搜索框」，没有手机端方案。
   做窄屏的做法：横向菜单与搜索框整体隐藏，改由汉堡按钮唤出右侧抽屉。
   抽屉里的一级菜单带子项时展开为手风琴（PC 是 hover 下拉，
   窄屏没有 hover，必须改成点击）。

   ★ 这一节的断点是 1200px，不是 768px。
     实测桌面导航条的自然宽度约 1549px（logo + 一排菜单 + 574px 搜索框，
     见 .workbuddy/tools 里量过的那组数）。1200px 以下它本来就会被
     overflow:hidden 裁掉一截尾巴，用户看到的是一排「点不到的菜单项」。
     与其让它带病显示，不如在这个宽度就换成汉堡菜单。
     1200px 也正好是 --minwidth 失效的那个点（见上面 0-0 节），
     两个「壳层宽度闸门」对齐，不用记两个数字。
   ★ 第 0 节的内容密度规则仍留在 768px：那些是「卡片该不该换行」，
     和壳层宽度是两回事，不必一起动。
   ========================================================================== */

/* 汉堡按钮：PC 不出现 */
.nav-toggle {
  display: none;
}

/* 手机端右侧登录图标：PC 一律不渲染。
   ★ 隐藏写在**外层盒子**上，绝不写在 .m-head-user 上 ——
     bridge.js 用 jQuery 的 .show() 切登录态，jQuery 对「被样式表
     display:none 隐藏」的元素会把 inline display 写成标签默认值（a → inline），
     而行内值压过本文件媒体查询里的 display:flex。一旦在桌面宽度下写出这个
     行内值，再把窗口拖宽到 ≤1200：flex 只会坍成 block，svg 贴到盒子左上角，
     图标上移 8px、左移 4px（真机打开时元素本就不是 none，jQuery 不写行内值，
     所以只有「PC 拉窄」才错位）。
     现在：盒子管尺寸与显隐（媒体查询独占，永远没有行内 display），
     盒内两个 a 的 display 恒为 flex，jQuery 拿到的默认值也是 flex，
     不会再写出 inline。 */
.m-head-user-box {
  display: none;
}
.m-head-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 44px;
  /* 2026-10-23：原来靠「44 宽盒子 + 8 右内距」把图形推到距边 16。
     现在外层内距改成源站的 20px，盒子收成与图形同宽的 30px，
     右侧不再额外留内距 → 图标右缘距屏幕边正好 20，与源站一致
     （源站 .menu-user-icon 30×30，右内距 20）。 */
  padding: 0;
  color: var(--tc-ink, #16181a);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 抽屉：PC 不渲染（display:none 而非 visibility，避免它参与无障碍树） */
.m-nav-drawer,
.m-nav-mask {
  display: none;
}

@media (max-width: 1200px) {
  /* ---------- 1-1. 关掉桌面导航 ----------
     ★ 选择器必须比 nav.css 更具体，否则压不住：
       nav.css:169 写的是
         .horizontal-menu-navbar .horizontal-menu-navbar-container
           .horizontal-container-navbar { display:flex }   —— 0,3,0
       而 mobile.css 加载更晚但只有 0,2,0，按 CSS 规则 specificity 优先于
       顺序，结果菜单容器压根没被隐藏，只是在 overflow:hidden 里被裁掉，
       表现是「手机上还留着一条被切掉一半的横向菜单」。
       所以下面一律写到 0,4,0 / 0,3,0，把 nav.css 顶掉。 */
  /* ★ 外层 .horizontal-menu-navbar-container 必须一起隐藏：
     只隐藏内层 .horizontal-container-navbar 时，外层仍是 block 且带内边距，
     实测在 390 宽下占到 135px（4~139），把汉堡顶到屏幕中间，
     三栏布局怎么调都歪。 */
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container,
  .nav-layoutcontainer .horizontal-menu-navbar
    .horizontal-menu-navbar-container .horizontal-container-navbar,
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search {
    display: none;
  }

  /* .underline 是 nav.js 动态定位的下划线，菜单隐藏后它会停在旧坐标上，
     继续参与布局计算（实测就是它把 nav 撑出横向滚动条的元凶之一）。 */
  .nav-layoutcontainer .horizontal-menu-navbar .underline {
    display: none !important;
  }

  /* PC 的下拉面板（hover 触发）在手机上永远不该出现 */
  .nav-layoutcontainer .menu-dropdown-container {
    display: none !important;
  }

  /* ---------- 1-2. 顶栏三栏：菜单在左、logo 居中、登录在右 ----------
     原来靠 justify-content:space-between 排「logo 左 + 汉堡右」，
     现在用 order 明确三段：1 汉堡 / 2 logo / 3 登录。
     左右两个按钮都是 44px（可点区下限）+ 相同外边距，
     logo 容器吃掉中间剩余宽度并居中 —— 这样不管 logo 多宽，中线都在屏幕正中；
     若只给 logo 加 margin:auto，两侧差 1px 就会歪。 */
  .nav-layoutcontainer .horizontal-menu-navbar {
    height: var(--wapnavheight, 58px);
    /* 2026-10-23 对齐源站 nav_b 版态：`.nav-head-m.nav_b .nav-head{padding:0 20px}`。
       原来写 4px，是为了让 44px 的汉堡盒子把三条线推到距边 16px；
       现在按源站的 20px 算：汉堡盒子 32 宽 + 12 内距 = 线左缘落在 20px，
       与源站实测（菜单图标 x=20、用户图标右缘距边 20）完全一致。 */
    padding: 0 20px;
    justify-content: flex-start;
  }
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-logo {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: transparent;
  }
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-logo a {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-logo .horizontal-logosize {
    margin: 0;
  }
  /* 盒子进 flex 流：order 3（汉堡 1 / logo 2 / 我的 3）。
     尺寸交给盒内的 a，盒子只做占位，见 1-1 上方那段注释。 */
  .m-head-user-box {
    order: 3;
    display: flex;
    flex: 0 0 auto;
  }
  .m-head-user svg {
    display: block;
    /* 2026-10-23：源站 .menu-user-icon 是 30×30（m_index.css:51），原来 28 略小一号 */
    width: 30px;
    height: 30px;
  }
  /* 首页顶部（透明导航压在 Hero 上）与下拉展开的白底态：图标跟随文字色 */
  body.has-hero .nav-layoutcontainer:not(.is-scrolled) .m-head-user {
    color: var(--tc-ink, #16181a);
  }

  /* ---------- 1-2. 汉堡按钮 ----------
     2026-10-23 对齐源站（m_index.css:70-90）：
       源站 .menu-menu-icon 高 30、宽 24，内部三条 24×2 的 i，纵向 space-evenly
       → 三条线实际间距 8px（上线 y=60、中线 69、下线 78，条高 2）。
       原来是 44 盒子 + 20×2 线 + ±6px 偏移，比源站细一号也窄 4px。
     现改为：点击区仍是 32×44（可点区够大），线 24×2，偏移 ±8。 */
  .nav-toggle {
    position: relative;        /* 三条线是绝对定位，必须有个定位父级 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 32 = 24(线宽) + 8(右内距)，配合外层 padding 20px，线左缘正好落在 20，
       与源站菜单图标 x=20 对齐；高度 44 保留可点击区。 */
    width: 32px;
    height: 44px;
    order: 1;                  /* 排到 logo 前面 */
    margin-left: 0;
    margin-right: 0;
    padding: 0 8px 0 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
  }
  /* 三条横线：用 currentColor，跟着主题色走（24×2、偏移 ±8，对齐源站） */
  .nav-toggle i,
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--tc-ink, #16181a);
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
  }
  .nav-toggle::before {
    position: absolute;
    transform: translateY(-8px);
  }
  .nav-toggle::after {
    position: absolute;
    transform: translateY(8px);
  }
  .nav-toggle i {
    position: absolute;
  }
  /* 抽屉打开时变成叉 */
  body.m-nav-open .nav-toggle::before {
    transform: translateY(0) rotate(45deg);
  }
  body.m-nav-open .nav-toggle::after {
    transform: translateY(0) rotate(-45deg);
  }
  body.m-nav-open .nav-toggle i {
    opacity: 0;
  }

  /* ---------- 1-4. 抽屉打开时导航条**保持原样**（2026-10-23 用户要求） ----------
     源站实测：点开菜单后 `.nav-head` 只多一个 `active` 类，
     底色仍是 `rgba(0,0,0,0)`（var(--wapnavColor) 注入 transparent）+ `blur(10px)`，
     投影也不变 —— 也就是说**源站点开菜单导航条完全不变色**，banner 照旧透过去。
     我们原先在 body.m-nav-open 时把导航条按成不透明白 + 去模糊，
     点一下整条就变成纯白，和源站相反，这条规则已整条删除。
     ★ 文章页（body.nav-solid）本来就是白底，走 bridge.css B-3，不受影响。 */

  /* ---------- 1-3. 抽屉：源站 menuB 版式（左栏目录 + 右栏内容） ----------
     规格来源：源站 www/static/css/m_index.css
       .nav-head-m .nav-list                 127~198   （左栏宽度、分色、滚动）
       .nav-head-m .nav-list .list-itemB     224~299   （一级项、展开态、蓝竖条）
       .nav-head-m .nav-list .list-label-1   300~348   （右栏标题与二级行）
     量参考图（393×852）得到的实测值：
       左栏 136px、右栏 255px、分割线 3px #c9cdd4、
       一级行高 50px、右栏标题行 50px、右栏二级行 46px、左栏底色 #e9f1ff / #f4f8ff 交替。

     ★ 分色只有两层，别照参考图目测成「隔行变色」：
       源站 .nav-list-left 是 --wapnavleft_color，展开那一组的所有行再叠一层
       rgba(29,120,255,0.05)。参考图里看到的 #e9f1ff 与 #f4f8ff 就是这两层叠出来的，
       所以「最新活动(单独一条)」和「产品服务的子项」颜色不同，不是随机条纹。 */
  /* ★ 遮罩按源站取消。
     源站 `m_index.css` 里**没有任何 mask / overlay 规则**（我把整份样式表搜过了，
     只有零散的 box-shadow）—— 手机菜单是直接盖住整屏的，没有半透明黑幕。
     早先我们加的这层遮罩会额外做 0.25s 淡入，视觉上就成了「从左往右推 + 背后渐暗」，
     与源站「一下子出现」完全不同。
     这里保留 DOM（JS 里的 data-mnav-close / 点击关闭逻辑还要用它），
     但让它完全透明且不参与任何过渡 —— 只作为点击关闭的透明热区。
     位置也从 inset:0 收到导航条以下：源站菜单只占导航条以下的部分，
     导航条本身（logo / 关闭叉 / 头像）必须始终可见、可点。 */
  .m-nav-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99995;
    background: transparent;
    opacity: 0;
    visibility: hidden;
  }
  body.m-nav-open .m-nav-mask {
    opacity: 1;
    visibility: visible;
  }

  .m-nav-drawer {
    display: none;          /* ★ 源站做法：display:none ↔ flex，没有位移动画 */
    flex-direction: column;
    position: fixed;
    /* ★ 从导航条下沿开始，而不是 top:0。
       参考图里抽屉的第一行（「最新活动」）就贴在导航条正下方，
       导航条自己带 logo/关闭叉/头像，抽屉再盖上去就会盖掉它们。
       --mnav-top 由 js/mobile-nav.js 的 syncDrawerTop() 在每次打开时实测写入
       （导航条会被公告条往下推、公告条又会随滚动收起，这个值不能写死）；
       兜底值取导航高度本身，JS 没跑到时也不会盖住整条导航。 */
    top: var(--mnav-top, var(--wapnavheight, 50px));
    right: 0;
    bottom: 0;
    z-index: 99996;   /* 见上方 .m-nav-mask 的注释 */
    width: 100%;
    background: #fff;
    /* 顶边细分隔线：导航条与菜单面板之间的一条界线。
       ★ 源站是 2px #e4e4e4，但那条是按源站导航条厚度配的，压在我们这边偏粗偏重，
         用户要求「稍微细一点」→ 1px + 更浅的 #ececf0，仍能分块但不抢眼。 */
    border-top: 1px solid #ececf0;
    /* ★ 不加 box-shadow：源站没有。它属于导航区内部（z-index 99），
       不是浮层，没有投影。 */
  }
  /* ★ 打开 = 直接 display:flex，**不做位移 / 不做淡入**。
     源站的 `.nav-list{display:none}` + `.nav-list.active{display:flex}`
     配 `transition:all .1s` —— 而 transition 对 display 不生效，
     所以真实效果是「瞬间出现」。这才是要仿的行为。
     为什么不能用 translateX 侧滑：
       1) 方向不对（我们原来是从右往左推，源站是整块直接出现）；
       2) display 与 transform 无法同时过渡，硬要做得再加 visibility/
          双 rAF，徒增复杂度，且与源站的观感不一致。 */
  body.m-nav-open .m-nav-drawer {
    display: flex;
  }

  /* ★ 抽屉**没有自己的头部**：参考图里抽屉是紧贴顶部导航条下沿开始的，
     导航条本身（.horizontal-menu-navbar，顶部 fixed）已经提供了 logo、关闭叉和头像。
     早先版本在抽屉里又镜像了一条 .m-nav-drawer__head，结果整屏出现两条 logo 行。
     抽屉只需从导航条下沿铺到底，所以 top 取导航高度。 */
  .m-nav-drawer__body {
    flex: 1 1 auto;
    min-height: 0;              /* ★ flex 子项默认 min-height:auto，不归零就滚不动 */
    display: flex;
  }

  /* 主体两栏 */
  .m-nav-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    width: 100%;
  }

  /* ---- 左栏 ----
     底色与 3px 分割线就写在这个滚动容器上（与源站 .nav-list-left 一致，
     源站也是 background + overflow-y:auto 同一个元素）。
     ★ 之前把它们挪到外层再画 ::after 是为了「返回首页」做定位容器；
       现在按钮已提升为 .m-nav-list 的直接子节点（源站结构），外层没用了，
       底色回到这里，滚动时色块与竖线始终铺满整栏。 */
  .m-nav-list__left {
    flex: 0 0 136px;
    width: 136px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #e9f1ff;
    /* ★ 不画两栏之间的竖分割线（源站是 inset -3px 0 0 #c9cdd4）：
       用户要求去掉。左右栏底色本来就不同（浅蓝 / 白），边界已经很清楚，
       再加一条 3px 灰线反而显堵。
       ⚠️ 若将来要恢复，记得同步补 .m-nav-home::after 那条（返回首页那块
          有独立底色，盖住了左栏，必须自己再画一条竖线才连得上）。 */
    /* ★ 源站 menuB 是 padding-bottom:100px（`.nav-list.menuB .nav-list-left`）：
       给底部「返回首页」让位。按钮占 20+26+20 = 66px，
       留 100px 后滚到底时最后一项与按钮之间还有 34px 空隙，不会顶在一起。
       ★ 顶部 14px 也是源站的（`.nav-list.active .nav-list-left{padding:14px 0 64px}`）：
       没有它第一项会紧贴导航条下沿，参考图里是明确留了一截空白的。 */
    padding: 14px 0 100px;
  }

  /* 一级项的外壳。展开时整组叠一层淡蓝（源站 .active.has-children 的做法） */
  .m-nav-group {
    display: block;
  }
  .m-nav-group.is-open {
    background: #f4f8ff;
  }

  .m-nav-item,
  .m-nav-subitem,
  .m-nav-sub3item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 24px 0 10px;     /* 右内距留给箭头，左 10 是参考图文字起点 */
    font-size: 14px;
    line-height: 20px;
    color: var(--tc-ink, #16181a);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* 文字 + 角标同一行的容器。
     ★ 用 flex 而不是纯文本节点：文字和角标是两个独立盒子时，才能做到
       「文字被省略、角标完整保留」。纯 inline 流里「精选推荐 HOT」在 136px 左栏
       正好卡在临界上会折行，那一行高度就从 50 变 60，整列行高不齐（实测）。
     ★ 不要在外层 .m-nav-item 上加 overflow:hidden —— 角标会被一起裁掉。
       省略交给这里的 .m-nav-item__txt，角标 flex:none 保宽度。 */
  .m-nav-item__t {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .m-nav-item__txt {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 有子项的一级项：右侧箭头。
     ★ 源站写的是 `content:"\e695"; font-family:develop`，但源站**没有任何一处
       定义 develop 这个字族**（我把全部 css 的 @font-face 都扫过了，只有 sk /
       iconfont / bodrum 等，没有 develop）。也就是说源站那个箭头其实是渲染不出来的，
       看不到字形。所以这里不能「照抄源站」，只能按参考图（一个细 V 形）自己做。
     做法：两条边拼的 V，`border` 1.5px `#959cad`，用 transform-origin:center 旋转。
     收起 = 尖端朝下（rotate 45deg）；展开 = 尖端朝上（rotate -135deg）。
     ★ 不要用 top:50% + margin-top 微调 —— 旋转后盒子的视觉中心会偏，
       不同字号下偏移量还不一样。这里用 `top:50%` + `translateY(-50%)` 再叠旋转，
       旋转中心就是盒子中心，收起/展开两个状态切换时不会「跳一下」。 */
  .m-nav-item--parent {
    padding-right: 28px;
  }
  .m-nav-item--parent::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;          /* 盒子自身中心对到 50% */
    border-right: 1.5px solid #959cad;
    border-bottom: 1.5px solid #959cad;
    transform: rotate(45deg);    /* 尖端朝下 = 未展开 */
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  .m-nav-group.is-open > .m-nav-item--parent::after {
    transform: rotate(-135deg);  /* 尖端朝上 = 已展开 */
  }
  /* ★ 纯二级栏目（组里没有三级）不显示这个 V 箭头：
     它点下去左栏根本不展开（右栏直接列二级），箭头暗示的「展开」并不存在。
     .m-nav-group--flat 由 mobile-nav.js 在初始化时按实际数据打上，
     不在模板里判断 —— 模板要探测「孙子层」得再套一层循环，容易写错。 */
  .m-nav-group--flat > .m-nav-item--parent {
    padding-right: 24px;         /* 回到通用右内距，不留箭头的位置 */
  }
  .m-nav-group--flat > .m-nav-item--parent::after {
    content: none;
  }

  /* 二级子项的滑动容器。
     ★ 源站的展开是 jQuery `.slideDown()`：display:none → block，然后用内联 height
       从 0 长到内容高（overflow:hidden），400ms、swing 缓动，结束后清掉内联样式。
       height 动画只能作用在单个元素上，所以子项外面必须包这一层，
       否则逐个动画 .m-nav-subitem 会变成「一条一条往下蹦」。
     ★ display 由 js/mobile-nav.js 控制：展开时置 block，收起动画结束后置 none。
       这里默认 none 只是兜底 —— 脚本没跑起来时二级不会全裸露在左栏。 */
  .m-nav-subwrap {
    display: none;
  }

  /* 二级：靠容器的显隐控制可见性，自身**常驻 display:flex**（不受 .is-open 影响）。
     ★ 三级（.m-nav-sub3item）不在左栏显示 —— 三级内容在右栏面板里
       （与源站 menuB 一致，右栏面板的粒度是二级项）。
       左栏那一层 DOM 仍保留：它承载链接与角标，删了反而要重写数据来源。 */
  .m-nav-subitem {
    padding-left: 20px;
    color: var(--tc-ink, #16181a);
  }
  /* ★ 二级项右侧**不再放箭头**（用户要求去掉）：左栏只用「选中态」表达当前项，
     带不带三级不再用箭头区分 —— 点了才知道，右栏会给出内容。
     同时把为箭头预留的 padding-right 一起清掉，否则文字右边的留白会偏大。 */
  .m-nav-subitem--has3 {
    position: relative;
  }
  /* 三级项在左栏一律不显示（只作为数据载体，内容由右栏面板渲染）。
     用 display:none 而不是删 DOM：三级的面板由模板单独循环生成，
     左栏这份不影响渲染，留着还便于将来要做「左栏内联展开」时复用。 */
  .m-nav-sub3item {
    display: none;
  }

  /* 选中态：蓝竖条 + 蓝字 + 加粗（源站 .active 的样子）。
     竖条 4px 贴在左栏最左，垂直居中 20px 高。 */
  .m-nav-item.is-active,
  .m-nav-subitem.is-active,
  .m-nav-sub3item.is-active {
    font-weight: 700;
    color: #0052d9;
    background: #fff;
  }
  .m-nav-item.is-active::before,
  .m-nav-subitem.is-active::before,
  .m-nav-sub3item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #0052d9;
  }

  /* ---- 右栏 ----
     ★ 内距跟源站 `.nav-list.active .nav-list-right{padding:10px 20px 100px}`：
       顶部 10px 让第一块内容不贴顶，底部 100px 与左栏一致
       （右栏内容也可能很长，底部留白避免最后一行紧贴屏幕边）。 */
  .m-nav-list__right {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding: 10px 20px 100px;
  }
  .m-nav-panel {
    display: none;
  }
  .m-nav-panel.is-active {
    display: block;
  }
  /* 右栏标题：源站 .list-label-1 .segmentation 是 14px/300 浅灰 + 下边框。
     ★ 默认**保留**下边框 —— 有二级/三级的栏目标题下面靠这条线跟内容分开。
       只有「单页入口」那种面板不画（见下面 .m-nav-panel--single 那条）：
       它下面只有一个同名链接，标题和链接是同一件事，中间夹一条线反而像表头。 */
  .m-nav-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: var(--tc-ink, #16181a);
    text-decoration: none;
    border-bottom: 1px solid #ebecf0;
  }
  .m-nav-panel__title.is-plain {
    color: #8b8fa8;
    font-weight: 300;
  }
  /* 单页入口面板：标题下面不画分割线。
     .m-nav-panel--single 由模板在「一级项无子项」那个分支上下发。 */
  .m-nav-panel--single .m-nav-panel__title {
    border-bottom: 0;
  }
  /* 单页项的标题后面跟一个「>」 */
  .m-nav-panel__arrow {
    width: 7px;
    height: 7px;
    margin-top: -2px;
    border-right: 1.5px solid #959cad;
    border-bottom: 1.5px solid #959cad;
    transform: rotate(-45deg);
  }
  /* 右栏条目（产品 / 栏目）：**项与项之间不要分隔线**，只留间距（用户要求，
     原来只有精选推荐面板是这样，现在统一到所有面板）。
     做法：去掉 border-bottom，行高 46 → 40，相邻项 margin-top:10 ——
     视觉上是「几条并列的条目」而不是「一张表格」，整体高度与原来接近。 */
  .m-nav-panel__subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    font-size: 14px;
    color: #16181a;
    text-decoration: none;
    border-bottom: 0;
  }
  .m-nav-panel__subitem + .m-nav-panel__subitem {
    margin-top: 10px;
  }
  /* 源站 .label-tag：红框红字、直角、codeB 字体。这里用等宽兜底，
     保证「高防CDN」这类英文标签不会因为字重差看着比中文大一号。 */
  .m-nav-panel__tag {
    padding: 1px 5px;
    border: 1px solid #eb262d;
    color: #eb262d;
    font-size: 12px;
    line-height: 15px;
    font-family: "codeB", ui-monospace, Consolas, monospace;
    white-space: nowrap;
  }
  /* 右栏条目右侧的「＞」已按用户要求去掉（原来是 .m-nav-panel__more 画的箭头）。
     保留这个类名但不给任何可见装饰：模板里那个 <span> 还挂着，
     删 DOM 要动模板且没有收益，直接让它 display:none 最省事。 */
  .m-nav-panel__more {
    display: none;
  }

  /* 角标（HOT 之类）在抽屉里跟在文字后面。
     ------------------------------------------------------------------
     nav.css 那套是给桌面写的「10px 字 + 左下角切平」，在手机抽屉里
     （抽屉不在 .horizontal-menu-navbar 内，部分规则根本不匹配）会退化成
     「深色小字 + 红底 + 全直角」，看着像一块没排好的色块。
     参考图是完整圆角的红色胶囊、白字、粗体，与文字几乎同高 —— 这里重写。
     用 body + 三级别名把权重抬到 0,4,1：抽屉 DOM 结构以后若被放进导航容器，
     也不会被 nav.css 的 0,8,1 规则按回去（关键视觉值再加 !important 兜底）。 */
  body .m-nav-drawer .m-nav-item__t .navbar-menu-tag {
    display: inline-flex;
    align-items: center;
    /* ★ flex:none —— 默认 flex-shrink:1，左栏只有 136px 宽，
       文字 + 角标一挤，角标会被压扁成一条竖线。 */
    flex: 0 0 auto;
    margin-left: 6px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    /* 文字换行时角标不要被拉到第二行中间 */
    align-self: center;
  }
  body .m-nav-drawer .m-nav-item__t .navbar-menu-tag i {
    /* ★ 必须 inline-block（nav.css 里就是），不能删：
       改成 inline 后 line-height 参与行盒计算，角标盒高会从 17px 变 14px，
       红色块被压成一条窄胶囊。17px = 1px 上边框 + 15px 行高 + 1px 下边框。 */
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    border-bottom-left-radius: 6px;   /* nav.css 单独把左下角切平，必须单独覆盖 */
    background-color: #ff2626;
    color: #fff !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    /* ★ 盒高必须是 17px：写 16px 时实测出来是 16，比参考图矮 1px；
       13px 行高 + 2px 内距 = 17px，与桌面端 HOT 角标同一套尺寸。 */
    line-height: 13px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* ★ 一级项是 flex 容器：文字 + 角标必须同一行。
     左栏只有 136px，「精选推荐 HOT」这类「4 字 + 角标」正好卡在临界上，
     一旦换行，这一行的高度就从 50 变成 60，整列行高不齐（实测）。
     ★ 外层不要 overflow:hidden —— 会把角标一起裁掉，
     省略只发生在 .m-nav-item__txt 上（见上方 .m-nav-item__t 的注释）。 */
  body .m-nav-drawer .m-nav-item,
  body .m-nav-drawer .m-nav-subitem,
  body .m-nav-drawer .m-nav-sub3item {
    flex-wrap: nowrap;
    gap: 0;
  }
  body .m-nav-drawer .m-nav-item__t {
    flex: 0 1 auto;
    min-width: 0;
  }
  body .m-nav-drawer .m-nav-item__t .navbar-menu-tag {
    margin-left: 4px;
  }
  /* ★ 左栏所有项的文字左缘统一到 10px —— 与一级项（.m-nav-item padding-left:10）一致。
     原来二级项是 20（继承旧的「缩进一级」层级设计），带角标的收到 12，
     于是同一条左栏里出现 10 / 12 / 20 三种左缘，参差不齐。
     现在三级内容已经改到右栏显示，左栏就是一个**平铺列表**，
     没有任何缩进的语义了，所以一律 10。
     ★ 用 body + 三层选择器压过基础规则（基础那条是 .m-nav-subitem 单类）。 */
  body .m-nav-drawer .m-nav-list__left .m-nav-subitem {
    padding-left: 10px;
  }
  /* 带角标的行保持 10px 左缘即可：136px 栏宽下「精选推荐 + HOT」
     靠文字容器 flex + 省略号解决溢出，不靠压左内距腾空间了。 */

  /* ---------- 1-5. 左栏底部「返回首页」 ----------
     源站真源：`menuB.html` 的 `.returnToHomepage` + `m_index.css:163-188`。
       · 外壳：absolute bottom:0 left:0，宽 = 左栏宽（--wapnavleft_height），
         底色同左栏（--wapnavleft_color）。
       · 按钮：1px 蓝框、蓝字、`padding:4px 8px`、`margin:20px 0 20px 10px`、
         图标 24（字形墨迹约 16）、文字 14、`white-space:nowrap`。
     ★ 结构：`.m-nav-home` 是 `.m-nav-list` 的**直接子节点**（与左右栏并列），
       不是左栏的子元素。理由与源站一致：
         - 放进 `.m-nav-list__left`（overflow-y:auto）→ absolute 跟着内容滚走；
         - 放进左栏外层再靠 padding 让位 → 按钮没有自己的实底，
           展开很长的菜单滚到底会**从按钮底下透出来**（就是这次报的重叠）。
       现在按钮自带不透明背景，且与滚动区分属两个节点，天然盖住滚上来的内容。

     ★ 必须有实底色：`.m-nav-home` 铺 `--wapnavleft_color` 不透明色，
       不能留透明 —— 源站也是给了 background 才敢 absolute 压在列表上。
       ★ 高度不能只包住按钮：还要加 `padding` 吸收安全区，
         否则 iPhone 底部横条处会露出一条左栏内容。 */
  .m-nav-list {
    position: relative;   /* 「返回首页」的定位上下文 */
  }
  .m-nav-home {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 136px;         /* 与 .m-nav-list__left 同宽，不多占右栏 */
    /* ★ 实底：颜色与左栏一致。它压在滚动区之上，
       所以滚上来的菜单项到这条边界就被完全挡住，不会与按钮文字重叠。 */
    background: #e9f1ff;
    /* 上边缘一条羽化阴影：让「列表被截断」看起来是刻意的，
       而不是像内容莫名其妙消失。很浅，只在滚到底时才明显。 */
    box-shadow: 0 -8px 12px -8px rgba(22, 24, 26, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 2;
  }
  /* ★ 这里原来有一条 3px 竖线（.m-nav-home::after），用来把被底色块切断的
     左栏分割线接到底。现在两栏之间的竖线整体取消，这条也一并去掉。 */
  .m-nav-home__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* ★ 固定 110×30（用户 2026-10-23 指定），左右各留 13 居中于 136 的左栏。
       原来写的是 width:calc(100% - 10px)（=126）+ padding 撑高（≈25），
       现在宽度写死、高度用 height 定，box-sizing:border-box 保证含边框正好 30。 */
    margin: 20px auto;
    width: 110px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--Original, #0056ff);
    color: var(--Original, #0056ff);
    /* ★ 按钮自身不做白底（原来是 #fff）：白底会在左栏那块浅蓝上贴一个白色色块，
       很跳。改用透明，让左栏的 #e9f1ff 透上来，只保留蓝色描边。 */
    background: transparent;
    font-size: 14px;
    line-height: 15px;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-home__icon {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    /* 源站图标字体 24px，但字形墨迹只有 ~16px；
       内联 SVG 的 viewBox 撑满盒子，写 24px 会比源站大一整圈。 */
    color: currentColor;
  }

  /* 抽屉底部按钮（控制台 / 登录 / 免费注册）已按用户要求移除，
     位置交给左栏的「返回首页」。相关规则一并删掉，避免留下孤儿样式。 */
  /* 抽屉打开时锁滚动：不锁的话手指在抽屉上划会带着整页一起滚 */
  body.m-nav-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   2. 页脚
   --------------------------------------------------------------------------
   断点同样取 1200px：页脚 PC 版是「5 列菜单 + 258px 联系信息栏」，
   且 .footerInfo 带 white-space:nowrap，1200px 以下排不开。
   ========================================================================== */
@media (max-width: 1200px) {
  /* ---------- 2-1. 四联保障条（横向滚动元凶之一） ----------
     PC 是 flex + space-between + 每项 80px 左外边距，390px 下四块排不开
     又不换行，直接把 footer 撑到 453px。改成 2×2 网格。 */
  .footerContainer .footerContainer_center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    height: auto;
    padding: 20px 0;
  }
  .footerContainer .footerItem {
    margin-left: 0;
    justify-content: flex-start;
  }
  .footerContainer .footerItem img {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
  }
  .footerContainer .footerText {
    margin-left: 10px;
  }
  .footerContainer .footerText div:first-child {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
  }
  .footerContainer .footerText div:nth-child(2) {
    font-size: 12px;
    line-height: 18px;
  }

  /* ---------- 2-2. 菜单区：五列并排 → 两列 ---------- */
  .footerContainer .footerContainernav {
    display: block;
    margin-top: 20px;
    padding-bottom: 8px;
  }
  .footerContainer .footerMenuscontainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 12px;
  }
  .footerContainer .footerMenuColumn {
    padding: 8px 0 12px;
  }
  .footerContainer .footerMenuHeading {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .footerContainer .footerMenuItem {
    margin-bottom: 8px;
    font-size: 13px;
  }

  /* ---------- 2-3. 联系信息：去掉写死的 258px 宽与竖分割线 ---------- */
  .footerContainer .footerInfo {
    width: 100%;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #eee;
    padding-top: 16px;
    /* PC 上 white-space:nowrap 是为了不让热线换行，
       手机上容器本来就窄，nowrap 反而会撑出去。 */
    white-space: normal;
  }
  .footerContainer .footerQRCode {
    grid-template-columns: repeat(3, 1fr);
    width: auto;
  }
  .footerContainer .footerQRCode .qrcode_content {
    padding: 8px 10px;
  }

  /* ---------- 2-4. 版权 + 友情链接 ---------- */
  .footerContainer .footerContainercopy {
    display: block;
  }
  .footerContainer .footerCopyleft {
    width: 100%;
    padding: 12px 0 0;
  }
  /* 友情链接弹层：PC 是绝对定位浮在上方，手机上弹层宽 225px 会顶出屏，
     改成贴着按钮下方、宽度跟容器走。 */
  .footerContainer .footerCopyleft .footerCopyleftcontainer {
    width: 100%;
    left: 0;
    right: auto;
    bottom: 46px;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   3. 右侧悬浮工具条
   ========================================================================== */
@media (max-width: 1200px) {
  /* 手机端：头像 + 菜单**一直显示**（不再点一下才展开），只是整体缩一号，
     避免 48px 宽、300px 高的原版把右侧正文压掉。尺寸按参考图定：
       头像 42、胶囊 44×(自适应)、图标 18、文字 11、项间距 18。
     点条目仍然弹它自己的面板（.item-open），点空白处收面板（bridge.js 4-2）。 */
  .online_Nav {
    right: 10px;
    bottom: 84px;
  }

  .online_Nav .online_body {
    display: flex;
    width: 44px;
    margin-top: 8px;
    padding: 12px 8px;
    border-radius: 22px;
  }

  .online_Nav .consultation-image {
    width: 42px;
    height: 42px;
    border-width: 2px;
  }

  /* 分隔线跟着间距走：线落在两个条目正中（-间距/2） */
  .online_Nav .online_navItem:not(:first-child) {
    margin-top: 18px;
  }

  .online_Nav .online_navItem:not(:first-child)::before {
    top: -9px;
    width: 18px;
  }

  .online_Nav .onlineService {
    width: 22px;
  }

  .online_Nav .onlineService i.develop,
  .online_Nav .onlineService .onlineService_icon,
  .online_Nav .onlineService .onlineService_icon_img {
    width: 22px;
    height: 22px;
    padding: 2px;
    font-size: 18px;
  }

  .online_Nav .onlineService .onlineService_icon svg {
    width: 18px;
    height: 18px;
  }

  .online_Nav .onlineService .onlineService_text {
    margin-top: 4px;
    font-size: 11px;
  }

  /* 回到顶部跟着缩小，和胶囊同宽，竖着看是一条线 */
  .online_Nav .onlineTop {
    width: 40px;
    height: 40px;
    margin-top: 12px;
    border-radius: 20px;
  }

  /* 手机上没 hover：点条目才开它自己的面板 */
  .online_Nav .online_navItem.item-open > .hoverWindow {
    display: block;
  }

  .online_Nav .hoverWindow {
    max-width: 72vw;
  }

  /* 手机端「建议」面板：官方公众号 / 客服二维码。
     PC 上两张是横排的（108px），到手机上被 flex 挤成 12×12 的小方块、
     说明文字也折成竖排一列 —— 所以这里改成**竖着排 + 放大**，
     一张占满一行，宽度用 vw 兜底（小屏也不会顶出屏幕）。 */
  .online_Nav .hoverWindow .onlineService_Body.officialAccount {
    min-width: 0;
    min-height: 0;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .online_Nav .hoverWindow .onlineService_Body.officialAccount .onlineservice_content {
    margin-right: 0;
  }

  .online_Nav .hoverWindow .onlineService_Body.officialAccount .qrCode {
    width: 118px;
    max-width: 42vw;
    height: auto;
  }

  .online_Nav .hoverWindow .onlineservice_content .onlineService_Close {
    margin-top: 8px;
    line-height: 1.4;
    white-space: nowrap;
    justify-content: center;
  }

  /* 二维码左侧那个空的图标占位会把说明文字顶偏，直接去掉 */
  .online_Nav .hoverWindow .onlineService_Body.officialAccount .onlineService_Title_Icon {
    display: none;
  }

  .online_Nav .hoverWindow .onlineService_Title_Text {
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .online_Nav .hoverWindow::before {
    display: none;
  }
}

/* ==========================================================================
   4. cooperation 两页（aff / partner）的版式补丁
   --------------------------------------------------------------------------
   这两页走的是 www 的 aff.css / partner.css，跟前面 P4 用的 p-* 块不是一套，
   所以需要单独几条。三条改动：
     4.1 装饰球（.blue-large / .red-small）在 www 原版里 right:-50px，
         而 .comp_containerrelative 压根没设 position:relative —— 坐标基准
         落到视口上，任何宽度都会伸出屏幕。它们的背景图指向 jd.com 的外链，
         本主题里取不到、本来就不显示，所以直接隐藏，顺带把死链依赖去掉。
         这里是 hide 而不是给父级加 overflow:hidden —— 后者会把正常内容一起裁掉，
         审计工具的 SCROLL 项会当成「内容够不着」报警告。
     4.2 推广流程在 992 以下从 4 列降到 2 列、768 以下降到 1 列。
     4.3 伙伴等级表是 7 列的 div 表格，手机上不可能并排。做法是给外层容器
         开内部横向滚动（比压成一坨看不清要好），并把最小宽度钉住，
         让它稳定地滚而不是随屏宽挤压变形。
         ★ 父级 .comp_container.overflow_tab 自身是 overflow:hidden，
           而 .requirement 是它的子元素 —— CSS 没有父选择器，
           所以滚动必须靠新增的 .et-table-scroll 这一层，不能写父级选择器。
     4.4 页签条：去掉 www 给它留的 50px 右内边距，并收窄间距与字号。

   ★ 本节的每条都要带 body 前缀提权，不是随手写的：
     aff.css / partner.css 是这两个页面在自己的模板里 link 的，而页面的内容在
     header.html 之后 —— 也就是排在 mobile.css **后面**。同权重的情况下后来居上，
     mobile.css 里写 `.flow .flow-content-item` 会被 aff.css 的同名规则按回去，
     表现为「改了没生效」。前面几节覆盖的是 nav.css / footer.css / global.css，
     那些都在 head 里先加载，所以不需要提权。
   ========================================================================== */

/* --- 4.1 装饰球：背景图是取不到的外链，本就不显示，直接隐藏 --- */
body .blue-large,
body .red-small {
  display: none;
}

@media (max-width: 992px) {
  /* --- 4.2 推广流程 --- */
  body .flow .flow-content {
    flex-wrap: wrap;
  }
  body .flow .flow-content-item {
    width: calc(50% - 20px);
    margin-right: 40px;
    margin-bottom: 24px;
  }
  body .flow .flow-content-item:nth-child(2n) {
    margin-right: 0;
  }
  body .flow .flow-content-item:last-child {
    margin-bottom: 0;
  }
  /* 步骤之间的连接箭头是 absolute + right:-32px 的伪元素，
     只在「四个卡片排成一行」时才落到两卡之间的空隙里。
     一降到两列/单列，「下一张」就不在右边了，箭头一律指向容器外：
     992 档撑出 11px、768 档撑出 15px，都是它。
     ★ 用 ::after 与 aff.css 保持一致（两条写法等价，但写成不同字符串
       就会被认为是另一条规则，容易在排查时看走眼）。 */
  body .flow .flow-content-item::after {
    display: none;
  }

  /* --- 4.3 伙伴等级宽表：改内部滚动（靠新增的 .et-table-scroll 这一层） --- */
  .et-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body .requirement .partner_table {
    min-width: 720px;
  }

  /* --- 4.4 页签条：www 给它留了 50px 右内边距，
         手机上演变成最后一个页签被挤出屏幕 —— 而容器又是 overflow:hidden，
         用户够不到它，「常见问题」在小屏上等于没有。
         去掉这 50px 就都放得下了；再留 auto 兜底，将来加页签也不会被砍。 --- */
  .et-container .overflow_tab {
    padding-right: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 光去掉内边距还不够：每 32px 的左右外边距下，5 个四字页签总宽约 384px，
     加上容器自身的左内边距仍然超出 390。这里把间距收到 10px。 */
  .et-container .et-hero-tabs-container .et-hero-tab {
    margin: 0 10px;
    flex: 0 0 auto;            /* 别让 flex 把 li 压得比文字还窄：
                                实测 li 内容 69px、盒子被压到 56px，
                                多出来的 13px 是画在盒子外面的 —— 正因为如此，
                                容器 overflow 是 visible 的页签会把横向滚动条撑出来，
                                而逐元素量 getBoundingClientRect 又全都「不越界」，
                                查起来特别容易怀疑人生。 */
  }
  .et-container .et-hero-tabs-container .et-hero-tab a {
    font-size: 13px;           /* 原 16px；5 个四字页签要排进 390 */
    line-height: 56px;         /* 原 72px，条太高占首屏 */
  }
  .et-container .et-hero-tabs-container .et-hero-tab:first-child {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  body .flow .flow-content-item {
    width: 100%;
    margin-right: 0;
    padding: 20px 24px 32px;   /* 原版左右各 40px，手机上太占宽度 */
  }
  body .requirement .partner_table {
    min-width: 640px;          /* 7 列挤到比这还窄就只剩数字了 */
  }
}