/* ============================================================
   sale-cloud/salecloud.html 移动端适配
   作用域: 仅 @media (max-width: 768px) 生效, 桌面端零影响
   目标: 接入共享移动端头 (mobile-hf.css + mobile-nav.js) 后,
        对主体内容做重排版 —— 两栏堆叠、固定宽图自适应、字号收敛

   与 product.html 同属一套模板 (change.css + pro-god.css + 共享头尾 JS),
   故通用段落沿用 product-mobile.css 的已验证写法; 本页独有区块
   (.ser_report 新闻报道条 / .service_ban 方案条 / .sale_title 图标标题 /
    .more_sales 文字链接 / #show 视频弹窗) 单独处理。
   ============================================================ */

/* ---- 页内导航条 (概述 / 功能 / 价格) ----
   2026-09-11 第一版: 做成 sticky 胶囊条吸附在顶部导航下;
   2026-09-11 第三版(用户): 该行整体隐藏 (移动端/桌面端均不显示),
   页内导航职责交回层级导航条「产品概览 › 销售云」的 sticky 吸附。
   HTML 中 sale-subnav 节点保留但 display:none, 零可见影响。 */
.pro-mes .sale-subnav { display: none; }

@media (max-width: 768px) {

  /* ---- 容器: 1180px 固定宽 → 整宽自适应 ---- */
  .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-left 187px 浮动) → 移动端整块隐藏 (含「销售云」标题)
         第一版(2026-09-11 上午): 只隐藏红框内容 (概述 / 功能 / 价格 /「若有问题?」),
         保留「销售云」标题;
         第二版(用户要求): 标题也去掉 —— 页首已由层级导航条「产品概览 › 销售云」
         交代位置, 标题是重复信息, 还白占首屏 45px。
         移动端导航由汉堡抽屉承担, 页内子导航整体冗余 → 直接 display:none,
         连同那条 border-bottom 分隔线一起去掉 ---- */
  .pro-mes .pro-left { display: none !important; }

  /* ---- 层级导航条「产品概览 › 销售云」吸附条 (2026-09-11 第三版, 用户要求) ----
     变更: 「概述 / 功能 / 价格」页内导航条(sale-subnav)移动端不再显示,
           改由其上方的层级导航条 sticky 吸附 —— 页面滚动时钉在固定头下方.
     行为: sticky + top:64px (#header 高 / z-index 9990), 本层 9960 低于 header.
     形态: 吸附时白底 + 底部分隔线 + 投影, 负 margin 抵消 .pro-mes 左右 12px
           padding, 撑满屏宽.
     ⚠️ sticky 生效前提: 祖先链不能有 overflow≠visible —— .pro-mes / .pro-right /
        .pro-two / .cell-sale 本文件均已强制 visible, 故可正常吸附.
     (页内导航条仅保留基础 .pro-mes .sale-subnav{display:none}, 见 @media 外) */
  .pro-mes .sale-crumb.sale-crumb--single {
    position: sticky !important;
    top: 64px !important;             /* = #header 高, 见 mobile-hf.css */
    z-index: 9960 !important;         /* < #header 9990; > .pro-ding 的 11 */
    width: calc(100% + 24px) !important;  /* 抵消 sale-crumb.css 基类 width:100%,
                                             配合负 margin 才能真正撑满屏宽 */
    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;
  }
  /* ---- 右侧内容区 (.pro-right 990px 浮动) → 整宽
         并关掉左侧那条 3px 蓝线 (见 salecloud.html: 原为内联 !important,
         本次等价重构为 .sale-border-l 专属 class 才能在媒体查询里覆盖) ---- */
  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 10px !important;   /* 2026-09-11 用户要求收高度: 16 -> 10px */
  }
  .pro-mes .pro-right.sale-border-l { border-left: none !important; }

  /* ---- 容器链整宽 (桌面 .pro-two 写死 990px, 会把子元素全撑宽,
         导致图片 max-width:100% 解析到 990 而非容器实宽) ---- */
  .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 990px / 产品图 520px / 442px) ---- */
  .pro-mes img {
    max-width: 100% !important;
    height: auto !important;
  }
  .pro-mes .pro-one > div:first-child img { width: 100% !important; max-width: 100% !important; }

  /* ---- 顶部 banner 大图 + 浮层文字
         桌面: .pro-ding 绝对定位贴图片底部, 但写死 height:175px, 文字从 top:30px 起.
         手机: 图片只缩到 ~170px 高, 这条 175px 的带子反而比图片还高 (还高出 6px),
         文字就落在了图片上半部. 用户要求 → 文字和按钮贴图片底部.
         改法: 带子高度改自适应 + .back-bg 绝对铺满, .back-con 回到正常流,
               于是「带子高度 = 内容高度」且整条带子贴住图片下沿 ---- */
  .pro-mes .pro-right .pro-ding {
    width: 100% !important;
    height: auto !important;
    bottom: 0 !important;
    padding: 14px 0 12px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-ding .back-bg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .pro-mes .pro-ding .back-con {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 16px !important;
  }
  .pro-mes .pro-ding .back-con h3 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }
  /* banner 里三个按钮 (免费试用 / 视频演示 / 下载白皮书) 桌面靠内联 margin 挤在一行 */
  .pro-mes .pro-ding .back-con p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
  }
  /* 用户要求: banner 里的「免费试用」与顶部固定头的「免费试用」重复 → 隐藏.
     它是 p 里第一个 <a> (其后为 视频演示 / 下载白皮书) */
  .pro-mes .pro-ding .back-con p > a:first-child { display: none !important; }

  /* ---- 各部分之间补间距 + 内容不贴边 ----
     桌面每块 .cell-sale 都是 margin:0 紧贴下一块 (靠 #fafafa/#fff 交替底色假装分区),
     移到手机上整页糊成一片 → 每块留 18px 呼吸; 桌面 .sale-con/.sale-right
     左右内边距分别只有 14px / 4px, 文字几乎贴着色块边缘, 统一由 .cell-sale 给 */
  .pro-mes .cell-sale {
    padding: 22px 16px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
  }
  /* .padding-px 桌面是 50px 50px 10px !important, 手机上过于空旷 */
  .pro-mes .padding-px { padding: 16px 16px 8px !important; }

  /* ---- 新闻报道条 .ser_report (桌面 width:890px + padding:40px 50px,
         HTML 还写死了内联 height:160px → 手机上会留一大块空白) ---- */
  .ser_report {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
  }
  .ser_report .report_L,
  .ser_report .report_R {
    width: 100% !important;
    float: none !important;
    line-height: 1.6 !important;
  }
  .ser_report .report_L { font-size: 14px !important; }
  /* 中间那条 <p> 在 HTML 里写了内联 font-size:16px —— 内联样式优先级高于
     本节所有非 !important 规则, 只压容器压不住它, 会三行两号字不齐 → 单独覆盖 */
  .ser_report .report_L p { font-size: 14px !important; margin: 6px 0 !important; }
  .ser_report .report_R { margin-top: 12px !important; text-align: left !important; }
  .ser_report .report_R .btn-block { margin-top: 0 !important; }

  /* ---- 产品行: sale-left / sale-right 单列堆叠 ---- */
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 18px !important;      /* 左右内边距交给 .cell-sale, 避免重复叠加 */
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-float,
  .no-potion {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* 桌面 .sale-left 有 HTML 内联 margin-top:50px / 图片内联 margin-top:30px */
  .cell-sale .sale-left { margin-top: 0 !important; line-height: 0 !important; }
  .cell-sale .sale-left img { width: 100% !important; max-width: 100% !important; height: auto !important; margin-top: 0 !important; }
  .cell-sale .sale-right { padding: 0 !important; }
  .clear-both { overflow: visible !important; }

  /* ---- 块标题 h4 ---- */
  .cell-sale .sale-con h4,
  .cell-sale h4 {
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 17px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  /* ---- .sale_title: 桌面 height/line-height 写死 50px + 左侧 sprite 图标
         (sale_h.png 52×232, 4 个图标, background-position 0/-52/-111/-172px).
         手机上文字可能换行, 固定 50px 行高会让行距巨大 → 高度改自适应,
         但保持 padding-left:60px (= 图标 52px + 间隙) 与 background-position 不变,
         否则图标会错位.
         另: 原文字贴盒顶 (实测 文字中心 18px vs 图标中心 32px, 差 14px),
         视觉上"文字偏上、没跟图标居中" → 改 flex + align-items:center,
         文字相对图标垂直居中; min-height 64px 使图标(6~58px)中心正好落在盒中心 ---- */
  .sale-right .top-shou .sale_title {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 64px !important;
    line-height: 1.45 !important;
    padding: 0 0 0 60px !important;
    font-size: 15px !important;
  }

  /* ---- 字号/间距收敛 (2026-09-11 用户要求移动端「字号减小」: 整体下调约一档,
         标题降幅 12~16%, 正文降 7%, 层级关系保持不变; 桌面端不受影响) ---- */
  .pro-mes h3 { font-size: 16px !important; }
  .cell-sale h3 { font-size: 15px !important; margin: 14px 0 6px !important; }
  .cell-sale .sale-right p,
  .cell-sale p { font-size: 13px !important; line-height: 22px !important; }
  .cell-sale .top-shou h3 { font-size: 15px !important; }
  .cell-sale .top-shou p { font-size: 13px !important; line-height: 22px !important; }

  /* ---- .service_ban「最佳方案」条 (.back_chages 覆盖背景为 sale_02.jpg)
         桌面 height 写死 250px + 背景图 no-repeat 无 size → 手机上会被裁;
         改高度自适应 + 背景 cover. 文字色 #0f2444 落浅蓝云底上本就清晰, 不动 ---- */
  .pro-mes .pro-two .service_ban {
    width: 100% !important;
    height: auto !important;
    padding: 24px 18px 28px !important;
    margin-bottom: 18px !important;   /* 桌面两色带紧贴; 手机上留出呼吸 */
    background-size: cover !important;
    background-position: center !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-two .service_ban h3 {
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    width: 100% !important;
  }
  .pro-mes .pro-two .service_ban p { margin: 14px 0 0 !important; }

  /* ---- 按钮统一 AI 风格: 渐变胶囊 + 柔光投影 ----
     采用全站 AI Design Tokens 的品牌渐变 #0564F5 → #4a7bff → #06bcd4,
     与首页 .all_btn / product.html 移动端保持同一套视觉语言.
     覆盖桌面: .free-shi 的白底灰边、.free-video 的实色蓝、.btn-block 的直角实蓝、
               .more_sales 的纯文字链接 ---- */
  .pro-mes .free-shi,
  .pro-mes .free-video,
  .pro-mes .btn-block,
  .pro-mes .more_sales {
    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-top-20 / .margin-right-30 与内联 margin-right,
     手机上已用 flex + gap 排版 → 清掉外边距 */
  .pro-mes .free-shi,
  .pro-mes .free-video { margin: 0 !important; }

  /* ---- 「免费试用吧」区: .bgcolor-action 亮蓝底 #5eb4ff + 白字, 对比度不足;
         加深为品牌青蓝, 保证可读 (桌面不动) ---- */
  .pro-mes .cell-sale.bgcolor-action { background: #00a1e0 !important; }
  .pro-mes .cell-sale.bgcolor-action .font-color,
  .pro-mes .cell-sale.bgcolor-action .sale-con h4,
  .pro-mes .cell-sale.bgcolor-action .top-shou p { color: #ffffff !important; }
  /* 该区按钮落在青蓝底上, 蓝渐变对比不足 → 反白胶囊 */
  .pro-mes .cell-sale.bgcolor-action .free-shi {
    background: #ffffff !important;
    color: #0564F5 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  /* ---- 底部 Tab 轮播区 (.div-dian: 桌面 #content 1000×270 + hover 翻页)
         2026-09-11 用户要求: 该部分移动端整体隐藏.
         实测移动端这一块 (5 个 SEO 长文面板 + 分页圆点) 高 3666px, 占整页
         8746px 的 42%, 且桌面那套 hover 翻页在触屏上本来就不可用.
         注: 仅移动端隐藏, 桌面端 #content / #footer 原样保留 ---- */
  .div-dian { display: none !important; }

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

  /* ---- 视频演示弹窗: 桌面依赖的 moni.css 在本页被注释掉, #show 只有内联
         display:none + left/top 50%, iframe 写死 820×418 → 手机上会横向溢出.
         移动端改为相对视口居中 + 宽度自适应 + 16:9 画布 ---- */
  #show {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
  }
  #showz1 { width: 100% !important; }
  #moiveys.dispmovie {
    width: 100% !important;
    max-width: 100% !important;
    height: 52vw !important;      /* 92vw × 9/16 ≈ 51.8vw */
    margin: 0 !important;
  }
  /* 关闭按钮由 show() 动态创建 (#addXImg, 内含 guanbi.png) */
  #show #addXImg {
    position: absolute !important;
    top: -36px !important;
    right: 0 !important;
    cursor: pointer !important;
  }
  /* 遮罩: moni.css 未加载时只是个无样式空 div, 补上覆盖视口的半透明层 */
  #bgbox {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 9998 !important;
  }
}
/* end @media (max-width: 768px) */