@charset "utf-8";
/* ============================================================
   platform-cloud/platformcontent.html (云平台 · 平台内容) 移动端适配
   2026-09-15 —— 参考 sale-cloud/spot.html + prm-cloud/prmfeatures.html
   ------------------------------------------------------------
   基础 CSS: change.css + pro-god.css

   本页独有:
     · 顶部 .pro-one > .salefeature 纯文字块 (无 banner 图)
     · 正文主体是「左窄右宽」经典两栏 .pro-two-1:
         .left  → 一个 .cell-sale (内联 width:440px) 内 10 个 .platform_font 功能条
         .right → 两张长截图 (plat_img.png 1000×1328 / platform_content.png
                  1060×2997, 内联 width:500/530px) + 内联 margin-top:120px
       ⇒ 手机端必须**竖排: 先文字条、后长图**, 否则长图会把文字挤到看不见
     · .platform_font 桌面 450×400 固定 + padding:50px;
       .pro-two-1 .platform_font 被覆写为 width:390px / padding-left:50px
     · 收尾 CTA 块 .cell-sale.font-color.border-no.bg_dullblue (#00267f 深蓝)
     · .pro-right 左边框来自类 .border_dullblue (#00267f) → 可覆盖

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

/* ---------- 移动端图文分组的「切图容器」----------
   2026-09-15 按用户要求「图片和文字分开放, 一组一组的」：
   原右栏两张长图 (plat_img.png 1000×1328 / platform_content.png 1060×2997)
   在 PC 上是「左窄文字栏 + 右宽长图栏」并排；手机端单列后就变成
   「10 条功能文字跑完 → 底部再堆两大张长图」，图文完全脱节。

   处理 = 按图片**自身的透明分带**把它切开，插到对应功能条之后：
     plat_img.png         → plat_img_1 (笔记本·页面布局) / plat_img_2 (手机·移动端)
     platform_content.png → _1 报表视图 / _2 共享设置 / _3 批量邮件 / _4 数据导入
   （切点取自 alpha 通道全透明的横带: 598~673 / 668~847 / 1408~1586 / 2148~2326）

   ⚠️ 这些容器 **PC 端恒为 display:none** → PC 两栏布局与数值零影响；
      原始两张长图仍留在 .right 里供 PC 使用，手机端把整栏隐藏。
   ⚠️ 切图**保留了原始整幅宽度**（只按横带裁高度），这样万一以后要在 PC 用，
      按原 width 渲染也能与切图前逐像素一致。 */
.pc-gsplit { display: none; }

@media (max-width: 768px) {

  .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; }

  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }
  /* 去掉 .border_dullblue 的深蓝左竖线 */
  .pro-mes .pro-right.border_dullblue { border-left: none !important; }

  .pro-right .pro-two,
  .pro-mes .cell-sale,
  .clear-both,
  .pro-two-1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ---------- 顶部介绍块 .salefeature (原 width:890px) ---------- */
  .pro-mes .pro-one { width: 100% !important; }
  .pro-mes .pro-one .salefeature {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 0 6px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-one .salefeature h2 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    height: auto !important;
    margin: 0 0 8px !important;
    color: #1c3d7a !important;
  }
  .pro-mes .pro-one .salefeature p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
  }

  /* ---------- .pro-two-1 两栏 → 竖排 (文字条在上, 长截图在下) ----------
     ⚠️ 实测: 页面 div 嵌套比源码看上去多一层 `</div>`, 浏览器把 `.right`
        (两张长截图那一栏) 解析成 `.pro-two-1` 的**兄弟节点** (父级是 .pro-right),
        所以 `.pro-two-1 .right` 根本选不中 —— 此时它保留内联
        `float:right;width:500px`, 左边界被推到 -122px, 长截图左侧整条被裁掉
        (且 documentElement.scrollWidth 不计算负向左溢出, 溢出检测查不出来)。
        必须同时用 `.pro-right > .right` 兜住。 */
  .pro-mes .pro-two-1,
  .pro-mes .pro-two-1 .left,
  .pro-mes .pro-two-1 .right,
  .pro-mes .pro-right > .left,
  .pro-mes .pro-right > .right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 右栏长截图 (内联 margin-top:120px → 收到 14px) */
  .pro-mes .pro-two-1 .right,
  .pro-mes .pro-right > .right {
    margin-top: 14px !important;
    padding-top: 0 !important;
  }
  .pro-mes .pro-two-1 .right p,
  .pro-mes .pro-right > .right p { margin: 0 0 12px !important; }
  .pro-mes .pro-two-1 .right p[style*="margin-top"],
  .pro-mes .pro-right > .right p[style*="margin-top"] { margin-top: 12px !important; }
  .pro-mes .pro-two-1 .right img,
  .pro-mes .pro-right > .right img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* 左栏容器: .pro-two-1 .cell-sale 桌面写死 width:390px + 内联 440px → 整宽白卡 */
  .pro-mes .pro-two-1 .cell-sale {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-two-1 .cell-sale .clear-both { margin-top: 0 !important; }

  /* 功能条 .platform_font (桌面 450×400 固定 + padding:50px) → 整宽自适应 */
  .pro-mes .pro-two-1 .platform_font {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* 页面内联 <style> 里 .margin-top-20{padding-top:40px} → 收到 16px (块间距) */
  .pro-mes .pro-two-1 .platform_font.margin-top-20 { padding-top: 16px !important; }
  .pro-mes .pro-two-1 .platform_font h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding-bottom: 6px !important;
    color: #1c3d7a !important;
  }
  .pro-mes .pro-two-1 .platform_font p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
  }
  .pro-mes .pro-two-1 .clear { clear: both !important; }

  /* ---------- 图文分组: 右栏两张长图在手机端隐藏, 视觉交给切图 ---------- */
  .pro-mes .pro-right > .right { display: none !important; }

  /* 切图容器: 出现在对应功能条之后, 与上一条文字留 14px、与下一条标题留 4px */
  .pro-mes .pc-gsplit {
    display: block !important;
    margin: 14px 0 4px !important;
    overflow: hidden !important;          /* 裁掉图片左右的透明留白 */
    line-height: 0 !important;
  }
  /* ⚠️ 必须带 .pro-mes 前缀: 文件后面还有一条 `.pro-mes img{max-width:100%!important}`
     (特异性同为 0,1,1 但位置更靠后), 不加前缀会把 max-width:none 压回去,
     放大失效 → 图片仍是 100% 宽, 两侧透明留白去不掉。 */
  .pro-mes .pc-gsplit img {
    display: block !important;
    height: auto !important;
    max-width: none !important;
  }
  /* 放大 + 负外边距 => 用内容区铺满容器, 去掉两侧透明留白 (图片更"满")
       plat_img.png         内容 x=40..959   (920/1000) → 放大 1.0870
       platform_content.png 内容 x=51..1007  (957/1060) → 放大 1.1076
       platform_04.png      内容 x=117..967  (851/1000) → 放大 1.1751
     放大后内容区宽度恰好等于容器宽, 左右各溢出由 overflow 裁掉
     ⚠️ 负左边距 = -（内容左边界/图片宽）× 放大倍率 ×100%，不是简单的 -(z-1)/2
        （只有内容水平居中时才等价；platform_04 左透明 117 / 右透明 32 不对称） */
  .pro-mes .pc-gsplit--plat img { width: 108.70% !important; margin-left: -4.35% !important; }
  .pro-mes .pc-gsplit--cont img { width: 110.76% !important; margin-left: -5.38% !important; }
  /* 2026-09-15: 用户指定放在「云平台应用开发自动化」上方的 platform_04.png
     (1000×895)。这张图的透明留白四边都有（内容 x=30..967 / y=121..781），
     不像切图那样只裁一条横带 → 四边一起裁：
       水平 106.61% + margin-left -3.20%   (1000/938)
       垂直 margin-top -12.90% / margin-bottom -12.05%   (按渲染高 0.9542×容器宽 折算)
     ⇒ 容器可见高由 341px 收到 235px，无死白 */
  .pro-mes .pc-gsplit--p04 img {
    width: 106.61% !important;
    margin-left: -3.20% !important;
    margin-top: -12.90% !important;
    margin-bottom: -12.05% !important;
  }
  /* 2026-09-15: 用户反馈 platform_04.png 上下各余一条空白带, 要求去掉。
     先把空白拆开 (390px 实测: .salefeature 底 311 → 容器顶 361 → 容器底 596 → h3 顶 642):
       上方 50px = .pro-two-1 margin-top 20 + .cell-sale padding-top 16 + .pc-gsplit margin-top 14
       下方 34px = .pc-gsplit margin-bottom 4  + .platform_font margin-top 20 + h3 margin-top 10
     → **不动那些通用类** (.cell-sale 的 padding-top 与 .platform_font.margin-top-20
       被这一页所有功能块共用, 改了会把整页间距一起带窄);
       只给 p04 容器自身加负外边距, 把这两段各收到 ≈14px / ≈12px。
     特异性: `.pro-mes .pc-gsplit--p04` 与上面的 `.pro-mes .pc-gsplit` 同为 0,2,0,
     本条位置更靠后 → 胜出。
     ⚠️ 负值上限: 上方共 50px, 取 -22 后仍余 28px, 不会压到上一段文字。 */
  .pro-mes .pc-gsplit--p04 {
    margin-top: -22px !important;
    margin-bottom: -32px !important;
  }

  /* ---------- 各内容块 .cell-sale ---------- */
  .pro-mes .cell-sale {
    padding: 16px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .pro-mes .cell-sale .padding-px { padding: 14px 0 10px !important; }

  /* ---------- 产品行单列堆叠 ----------
     ⚠️ .no-potion 桌面 position:absolute;right:40px;top:40px → 必须回正常流 */
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-potion,
  .no-float {
    float: none !important;
    box-sizing: border-box !important;
  }
  .cell-sale .sale-left {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  .cell-sale .sale-left.no-potion {
    position: static !important;
    right: auto !important;
    top: auto !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;
  }

  .pro-mes img { max-width: 100% !important; height: auto !important; }

  /* ---------- 字号 / 间距收敛 ---------- */
  .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;
  }
  .cell-sale .top-shou { padding-bottom: 18px !important; }

  /* ---------- 收尾 CTA 块 (.cell-sale.font-color.border-no.bg_dullblue) ---------- */
  .pro-mes .cell-sale.bg_dullblue { background: #00267f !important; }
  .pro-mes .cell-sale.bg_dullblue .font-color,
  .pro-mes .cell-sale.bg_dullblue .sale-con h4,
  .pro-mes .cell-sale.bg_dullblue .top-shou p { color: #ffffff !important; }
  /* 装饰图 bg-close-img-hi2.png (442×450, 内容行 81~399, 上下共 131px 透明留白)
     → object-fit 按内容区开窗 */
  .pro-mes .cell-sale.bg_dullblue .sale-left img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 442 / 319;
    object-fit: cover;
    object-position: center 62%;
  }

  /* ---------- 按钮统一渐变胶囊 ---------- */
  .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.bg_dullblue .free-shi {
    background: #ffffff !important;
    color: #00267f !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  }

  /* ---------- 隐藏固定悬浮 / 底部 SEO 长文 Tab 轮播 ----------
     ⚠️ #footer 是那个轮播的分页圆点 (在 .div-dian 内), 不是页面页脚 */
  .div-dian { display: none !important; }
  #footer { display: none !important; }
  #back-to-top { display: none !important; }
  .qr_code_l { display: none !important; }
}

/* end @media (max-width: 768px) */