@charset "utf-8";
/* ============================================================
   sale-cloud/spot.html (现场服务云 · 概述) 移动端适配
   2026-09-15
   ------------------------------------------------------------
   基础 CSS: change.css + pro-god.css —— 与 salecloud.html 同模板,
   故通用段落 (容器整宽 / 左栏隐藏 / .cell-sale 单列堆叠 / 字号收敛)
   沿用 salecloud-mobile.css 的已验证写法。本页独有区块单独处理:

     1) banner 文字块在 HTML 里是**内联绝对定位** (不是 .pro-ding)
        → 移动端让它回正常流, 排在首图下方整宽
     2) 顶部 3 个 Tab (.topart → .part_1/2/3) —— 切换靠 jQuery mouseenter,
        实测触屏 tap 时浏览器会合成 mouseenter, **无需补 JS**;
        2026-09-16 起整块移出 .pro-one 成为 .pro-right 直属子级 (.spot-tabs),
        改为 sticky 吸附条 (见文件内该段注释)
     3) 客户 logo 墙 (.pir) —— 容器是**没有 class 的** 990×500 内联 div,
        行内 8 个 .pir 固定 245×160 + 1px 竖线 table
     4) #item_end「免费试用吧」—— .bgcolor-blue 底色被注释掉但 .font-color
        白字还在 (桌面端同样不可读), 移动端补回品牌蓝底

   ⚠️ 内联 !important 无法被样式表 !important 覆盖 (CSS Cascade 规则:
      同为 author !important 时, 内联声明的特异性高于任何选择器)。
      本页 HTML 给 12 个 .sale-right 写了内联 width:280px/287px !important,
      因此**不能用 width 改宽** —— 改用 min-width:100% (min-width 在
      used-value 阶段恒压过 width), 配合 box-sizing:border-box 拿回整宽。

   作用域: 全部规则在 @media (max-width: 768px) 内, 桌面端零影响。
   ============================================================ */

@media (max-width: 768px) {

  /* ------------------------------------------------------------
     容器: 1180px 固定宽 → 整宽自适应
     原 overflow:hidden 必须解开 —— 否则层级导航条的 sticky 不生效
     ------------------------------------------------------------ */
  .pro-mes {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  /* 左侧子导航 (现场云 / 概述 / 价格 / 若有问题? + 电话) → 整块隐藏。
     定位改由层级导航条承担, 移动端导航由汉堡抽屉承担 */
  .pro-mes .pro-left { display: none !important; }

  /* ------------------------------------------------------------
     层级导航条「产品概览 › 现场服务云」: sticky 吸附在固定头下方
     条高 ≈43px, 故吸附位置给区块留出 top:64 + 43 的视觉结果由浏览器
     自动处理 (sticky 元素自身高度由 crumb 决定, 后续内容自然错开)
     ------------------------------------------------------------ */
  .pro-mes .sale-crumb.sale-crumb--single {
    position: sticky !important;
    top: 64px !important;                 /* = #header 高 (见 mobile-hf.css) */
    z-index: 9960 !important;             /* < #header 9990 */
    width: calc(100% + 24px) !important;  /* 抵消 sale-crumb.css 基类 width:100% */
    margin: 0 -12px 10px !important;      /* 负 margin 抵消 .pro-mes 的 12px padding */
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f4 !important;
    box-shadow: 0 8px 16px -10px rgba(16, 42, 90, 0.22) !important;
  }

  /* ------------------------------------------------------------
     右侧内容区 (990px 浮动) → 整宽
     .bg_saleaction{border-color:#5eb4ff!important} 只改色不改宽,
     实际那 3px 左竖线来自 pro-god.css .pro-right{border-left:3px solid #00a1e0}
     ------------------------------------------------------------ */
  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 10px !important;
  }
  .pro-mes .pro-right.bg_saleaction { border-left: none !important; }

  /* ------------------------------------------------------------
     容器链整宽 + 解除 overflow:hidden
     (pro-god.css: .pro-right .pro-two{overflow:hidden} /
      .cell-sale{overflow:hidden} / .clear-both{overflow:hidden}
      —— 不清掉会把子元素截断, 也会破坏 sticky)
     ------------------------------------------------------------ */
  .pro-right .pro-two,
  .pro-mes .cell-sale,
  .clear-both {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------
     顶部 banner —— 文字压在图片**之上**, 整块读作「一个区」
     原图 xianchangyun.png (1980×600): 整幅左侧纯白, 插画(地球+聊天气泡+
     定位点)集中在 x 1138~1754 (=57.5%~88.6%) / y 27~563, 四周均为空白。
     手机构图 (按用户要求「文字区压在图片区上面, 是一个区」):
       ① 画布 340px —— **比上一版(400px)收矮**, 消掉文字与插画之间那条
          55px 白色空隙 (空隙让两者读成上下两块: 白底文字块 + 白色里的插画)
       ② 插画放大到 190% 并钉在右下角, 可视内容顶边上提到 y152 ——
          文字块底边 (y198) 正好搭在插画上, 两区**物理重叠**成一体
       ③ 文字仍贴顶 (flex-start), 重叠处只有底部那颗「下载白皮书」实心按钮,
          段落文字完全落在插画上方, 可读性不受影响
       ④ ::before 保留一层由白到透明的柔化层, 让「文字区→插画区」过渡自然,
          而不是一条硬边 (也兜住任何取景下的文字对比度)
     实测: 文字块底 198 / 插画顶 152 → 重叠 46px (上一版是 62px 空隙)
     ------------------------------------------------------------ */
  .pro-mes .pro-one > div:first-child {
    position: relative !important;
    height: 340px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    text-align: right !important;
    line-height: 0 !important;
    background: #ffffff !important;
  }
  /* 插画钉死在画布**右下角**并按 190% 放大 ——
     原图 (1980×600) 可视内容包围盒 x 1138~1754 (57.5%~88.6%) / y 27~563,
     其余为纯白 (左侧 57%、右侧 11%、底部 6%)。
     用 `right:-79px / bottom:-13px` 把原图右侧 11% 与底部 6% 的空白推出画布,
     可视内容右缘 (x1754) 与下缘 (y563) 正好落在画布右下两条边上。
     放大到 190% 后可视内容约 217×188, 顶边落在画布内 y152, 与文字块底部重叠。
     ⚠️ 画布高度 340 与下方文字层的 margin-top:-340px 是一对, 改一个必须同步改另一个。
     ⚠️ 量包围盒时阈值取「肉眼可见」档 (RGB 和 < 700); 放宽到 735 会多出 86px 几乎
        看不见的淡尾, 据此定位会把插画推出画布右侧。
     ⚠️ 负偏移 = -(原图空白边距 × 缩放比): 226×0.351≈79, 37×0.351≈13。 */
  .pro-mes .pro-one > div:first-child img {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: -79px !important;
    bottom: -13px !important;
    width: 190% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* 首图与文字之间那条 40px 半透明空占位 (桌面用来把 240px 图垫到 280px) → 隐藏 */
  .pro-mes .pro-one > div:nth-of-type(2) > div:first-child { display: none !important; }

  /* 文字块的父容器 (HTML 里带内联 `background:none !important;height:auto`)
     上移 340px **压在画布上面** (与画布高度同值) —— 文字与插画同处一块区域,
     不再是一上一下两个块。文字贴顶, 底部按钮与插画顶边重叠 46px。
     ⚠️ 蒙版**不能写在这个元素上**: 内联 `background:none !important` 与样式表的
        `background:...!important` 同为 author !important, 内联声明必定胜出
        (已实测: 写在这里的渐变完全不生效)。故改由 `::before` 伪元素承担 ——
        伪元素没有内联样式可选, 样式表必然命中。 */
  .pro-mes .pro-one > div:nth-of-type(2) {
    position: relative !important;
    z-index: 2 !important;
    height: 340px !important;
    margin-top: -340px !important;
    padding: 16px 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  /* 白→透明的柔化层: 上段纯白护住文字, 下段渐隐让插画透出来 —— 两区之间没有硬边。
     高度 245px: 段落文字 (止于 y147) 完全落在纯白段内, 底部按钮 (y155~190) 处在
     半透段, 插画主体 (y200 以下) 基本不受影响。 */
  .pro-mes .pro-one > div:nth-of-type(2)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: 245px !important;
    z-index: 0 !important;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 45%,
      rgba(255, 255, 255, 0.55) 72%,
      rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
  }
  /* 内联绝对定位的文字块 → 回正常流整宽, 并用 z-index:1 盖在 ::before 蒙版之上
     (两者都是定位元素, 必须显式抬层, 否则蒙版会盖住文字) */
  .pro-mes .pro-one > div:nth-of-type(2) > div:last-of-type {
    position: relative !important;
    z-index: 1 !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-sizing: border-box !important;
  }
  /* 内联 font-size:26px / 18px → 收敛一档; 文字已挪到白底上, 原 #333 保持可读 */
  .pro-mes .pro-one > div:nth-of-type(2) h2 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
  }
  .pro-mes .pro-one > div:nth-of-type(2) p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 0 8px !important;
  }

  /* ------------------------------------------------------------
     顶部 3 个 Tab (提供主动式服务 / 智能排期与派工 / 自我完善型服务组织)
     → 吸附条: 随屏幕滚动钉在层级导航条正下方 (2026-09-16 用户要求,
       对齐 servicesfeatures1.html 的 .sale-func-grid 效果: sticky top107 / z9950)

     ⚠️ HTML 侧配合改动: 该 Tab 块原在 .pro-one **内部**, 但 sticky 的约束矩形
        受 containing block 限制 —— Tab 之后 .pro-one 立即结束, 吸附距离 ≈ 0
        等于不生效。故整块移出 .pro-one (视觉位置不变, 仅归属层级上移一级),
        成为 .pro-right 的直属子级, 吸附范围覆盖整个内容区直到 #item_end 结束。
     ⚠️ 移出后必须带 class (spot-tabs): .pro-right 下「无 class 的 div」被 logo 墙
        独占 (见本文件 .pro-mes .pro-right > div:not([class]) 那组规则),
        不带 class 会被当 logo 墙重排。
     ⚠️ 原 .pro-one > div:nth-of-type(3) 那两条规则随节点迁移改写到此处。

     桌面 (不受本文件影响): flex + space-around, 图标 100px (页面内联 <style>
          的 .tubiao), 文字 17px
     手机: 三等分, 图标 40px, 文字 12px 允许折行, 整块居中
     ------------------------------------------------------------ */
  .pro-mes .pro-right > .spot-tabs {
    padding: 4px 12px 8px !important;
    position: sticky !important;
    top: 107px !important;                 /* = 固定头 64 + 层级导航条 43 */
    z-index: 9950 !important;              /* < crumb 9960 < #header 9990 */
    width: calc(100% + 24px) !important;   /* 负 margin 撑满屏宽, 抵消 .pro-mes 的 12px padding */
    margin: 0 -12px 10px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f4 !important;
    box-shadow: 0 8px 16px -10px rgba(16, 42, 90, 0.22) !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right > .spot-tabs > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .pro-mes .topart {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 0 10px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .pro-mes .topart > div {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-bottom: 8px !important;
  }
  .pro-mes .topart img.tubiao,
  .pro-mes .tubiao { width: 40px !important; }
  .pro-mes .topart .yun {
    display: block !important;
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #333333 !important;
    word-break: break-word !important;
  }
  /* 当前选中 Tab (页面内联 .Partially): 文字与下划线同为品牌蓝。
     页面内联 `.Partially p.yun{color:#0564f5}` 特异性低于上面这条 !important,
     不补回来选中态会失去蓝色 → 与桌面端表现不一致 */
  .pro-mes .topart.Partially .yun { color: #0564f5 !important; }

  /* ------------------------------------------------------------
     Tab 面板: .part_1 默认显示, .part_2/.part_3 靠 jQuery 切换
     三段结构一致 (若干 .cell-sale), 无需额外处理, 仅确认整宽
     ------------------------------------------------------------ */
  .pro-mes .parts { width: 100% !important; }

  /* ------------------------------------------------------------
     各内容块 .cell-sale
     桌面每块靠 #fafafa / #fff 交替底色假装分区且 margin:0 紧贴;
     手机上加呼吸 + 消除内联 padding-top:60px (非 !important, 可覆盖)
     ------------------------------------------------------------ */
  .pro-mes .cell-sale {
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
  /* Tab 条与首个内容图之间的空白: .clear-both 带内联 margin-top:46px / 60px
     (桌面用来把首图往下推) → 移动端清零, 只保留 cell-sale 自身 16px 内边距 */
  .pro-mes .cell-sale .clear-both { margin-top: 0 !important; }
  /* .cell-sale .sale-con 桌面 width:890px + padding:50px */
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* .padding-px 桌面 padding:50px 50px 10px !important (需更高特异性压) */
  .pro-mes .cell-sale .padding-px { padding: 14px 0 10px !important; }

  /* ------------------------------------------------------------
     产品行 .sale-left / .sale-right 单列堆叠
     ⚠️ .sale-right 有内联 width:280px/287px !important → 改用 min-width:100%
        (min-width 在 used-value 阶段恒压过 width); 左右内边距内联 (40px/100px)
        非 important, 可直接清零, 否则 280+50+100=430px 会横向溢出
     ------------------------------------------------------------ */
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-potion,
  .no-float {
    float: none !important;
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  .cell-sale .sale-left img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .cell-sale .sale-right {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 所有固定宽图自适应 (内容图内联 width:500~600px) */
  .pro-mes img { max-width: 100% !important; height: auto !important; }

  /* ------------------------------------------------------------
     字号 / 间距收敛 (与 salecloud-mobile.css 同档:
     h3 20→15 / p 16→13 / h4 30→18)
     ------------------------------------------------------------ */
  .cell-sale h3,
  .cell-sale .top-shou h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 10px 0 8px !important;
    padding-top: 0 !important;
    color: #1c3d7a !important;
  }
  .cell-sale .sale-right p,
  .cell-sale p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 0 8px !important;
  }
  .cell-sale h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }

  /* ------------------------------------------------------------
     客户 logo 墙「我们正在使用现场服务云实现转型」
     容器是 .pro-right 下唯一**没有 class 的 div** (内联 990×500)
     ------------------------------------------------------------ */
  .pro-mes .pro-right > div:not([class]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 14px !important;
    padding: 16px 0 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .pro-mes .pro-right > div:not([class]) > h2 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    padding: 0 16px !important;
  }
  /* 直接子元素: 两条 990×1px 分隔线 + 两个 display:flex 行 (内联 margin-left:65/70px) */
  .pro-mes .pro-right > div:not([class]) > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right > div:not([class]) > div[style*="display: flex"],
  .pro-mes .pro-right > div:not([class]) > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }
  /* 单个 logo 格: 桌面 245×160 固定、4 个一行 → 手机每行 2 个, 高度自适应。
     ⚠️ 第一个 .pir 带内联 margin-left:65px —— 不清掉它会一个人占满一行
        (65+183=248 > 行宽 183), 换行被撑乱 */
  .pro-mes .pir {
    position: relative !important;
    width: 50% !important;
    height: auto !important;
    margin-left: 0 !important;
    line-height: 0 !important;
    padding: 12px 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 8 张 logo 长宽比差异极大 (dq2.png 是 1.75 的方图, 其余约 3.2~4.6 的横图),
     只限宽会让 dq2 比邻居高出近一倍 → 同时限高 52px, 视觉重量拉齐 */
  .pro-mes .pir img {
    max-width: 76% !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
  }
  /* 分隔竖线: 原写法是每格内一个 1px×80px 的 <table> (float:right)。
     ⚠️ <table> 的默认 `border-spacing` 会让 1px 的表渲染成约 4px 粗,
        且 flex 居中会把线拉贴在 logo 右侧而不是两列之间。
     故直接把 <table> 隐掉, 改用伪元素在**奇数格**右边缘画 1px 竖线
     (每个 HTML 行内 4 格, 第 4/8 格本就没有线 → 折成 2 列后
      奇数格恰好是左列, 偶数格是右列, 无需再单独处理行尾) */
  .pro-mes .pir table { display: none !important; }
  .pro-mes .pir:nth-child(odd)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 34px !important;
    background: #cccccc !important;
  }

  /* ------------------------------------------------------------
     #item_end「免费试用吧」—— 与 salefeatures.html 是**同款区块**,
     直接沿用 salefeatures-mobile.css 已上线验证的处理:
     ⚠️ 既有缺陷 (桌面端同样存在): pro-god.css:380 把
        .bgcolor-blue{background:#00a1e0} 注释掉了, 而
        .font-color{color:#fff !important} 还在 → 白字落在浅底上,
        整块基本看不见。移动端补回蓝底保证可读;
        桌面端按「零影响」原则不动 (待用户确认后再统一处理)。
     ------------------------------------------------------------ */
  .pro-mes .cell-sale.bgcolor-blue { background: #00a1e0 !important; }
  .pro-mes .cell-sale.bgcolor-blue .font-color,
  .pro-mes .cell-sale.bgcolor-blue .sale-con h4 { color: #ffffff !important; }
  /* 装饰图 bg-close-img-hi2.png (442×450, 内容行 81~399, 上下共 131px 透明留白)。
     这张图被 50+ 页面按 442×450 硬编码引用, 原图绝不能改 → 用 object-fit
     按内容区开窗 (object-position 62% = 81/131), 只显示有内容的那一段,
     避免手机上多出 131px 空蓝带 */
  .pro-mes .cell-sale.bgcolor-blue .sale-left img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 442 / 319;
    object-fit: cover;
    object-position: center 62%;
  }
  .pro-mes #item_end .top-shou { margin: 0 0 10px !important; }
  .pro-mes #item_end .top-shou > div {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
  }
  .pro-mes #item_end .top-shou p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------------
     按钮统一 AI 风格: 渐变胶囊 + 柔光投影
     (覆盖 change.css .free-shi 的白底灰边 + 内联 margin-right:20px)
     ------------------------------------------------------------ */
  .pro-mes .free-shi {
    display: inline-block !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(5, 100, 245, 0.28) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  /* 蓝底上的按钮反白, 保证对比度 (该区按钮落在青蓝底上, 蓝渐变对比不足) */
  .pro-mes .cell-sale.bgcolor-blue .free-shi {
    background: #ffffff !important;
    color: #0564F5 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  /* ------------------------------------------------------------
     logo 墙下方那条 990×1px 灰分隔线 与 「我要咨询」按钮之间加间距
     原状: 分隔线 → 按钮 margin 为 0, 按钮紧贴灰线。
     ⚠️ 选择器必须写到 (0,4,0) 才能压过上面 `.pro-mes .free-shi{margin:0!important}`:
        :not([class]) 记一个属性选择器, 合计 .pro-mes + .pro-right + [class] + .free-shi
     按钮是 inline-block, margin-top 生效。
     ------------------------------------------------------------ */
  .pro-mes .pro-right > div:not([class]) > a.free-shi {
    margin-top: 26px !important;
  }

  /* ------------------------------------------------------------
     底部 SEO 长文 Tab 轮播区 (.div-dian: #content 5 个长文面板 + #footer 分页圆点)
     与 salecloud.html / salefeatures.html 同款处理: 移动端整体隐藏。
     理由: 桌面那套 hover 翻页在触屏上不可用 (页面依赖 jQuery 3.2.1 已移除的
           $.size(), 该区脚本本就抛 "$(...).size is not a function"),
           且体量占整页近半 —— 隐藏后移动端反而少一个 JS 报错。
     ⚠️ #footer 是**那个 Tab 轮播的分页圆点** (在 .div-dian 内), 不是页面页脚 ——
        真实页脚是 footer_sub.js 生成的 <footer class="cloud_footer_box">,
        不受这条规则影响 (已实测核对)。
     ⚠️ 这条不能用 `.pro-mes #footer` 前缀: .div-dian 在 .pro-mes **之外**。
     桌面端 #content / #footer 原样保留。
     ------------------------------------------------------------ */
  .div-dian { display: none !important; }
  #footer { display: none !important; }

  /* 右侧悬浮「返回顶部」(fixed) 会一直压住正文 → 隐藏 */
  #back-to-top { display: none !important; }
  /* 左下角固定「订阅号」二维码 (fixed, z-index:999) 在 390px 屏必然遮挡正文,
     且与汉堡抽屉层级冲突 → 隐藏 */
  .qr_code_l { display: none !important; }
}
/* end @media (max-width: 768px) */