@charset "utf-8";
/* ============================================================
   pro/Project.html (项目云 · 概述) 移动端适配
   2026-09-15 —— 参考 sale-cloud/spot.html + prm-cloud/prmfeatures.html
   ------------------------------------------------------------
   基础 CSS: change.css + pro-god_sub.css (注意: 本页用 *_sub* 版本,
   该文件**没有** .sale_title 的 sprite 底图定义 → 本页标题无图标, 无对齐问题)

   本页独有:
     1) banner 是「整图 + .pro-ding 文字块」: 图 990×300 (内联 height:300px),
        .back-bg 内联 height:250px + background:none → 桌面靠它当空占位,
        手机端必须 display:none, 否则多出 250px 死白
        2026-09-15 ⑩: 手机端改为**与 PC 同构的「一个区域」** —— 图绝对定位成
        背景层贴区域右下角, 文字回到正常流排最上面 (区域 padding-bottom 预留图高)
     2) 「项目管理角色的需求背景」= .market_gongneng 三张白卡
        (.top-shou.market_aa, 桌面 260px 宽 float:left)
        2026-09-15 内联 `min-height:260px !important` 改为类 `.card-minh`
        (桌面用 @media(min-width:769px) 原样补回), 移动端 min-height:auto
        ⇒ 卡片由 260px 收到内容实际高 215~237px (三张共省 91px)
     2b) ⚠️ pro-god_sub.css:288 `.cell-sale .sale-right{min-height:350px}` 是为
        桌面左右并排拉平两栏高度 —— 单列堆叠后右栏内容仅 141~163px,
        6 块合计白撑约 1156px。移动端必须 `min-height:auto`。
     3) 「我们正在使用项目云」客户 logo 墙: 容器是**内联 width:990px** 的 div,
        行内 4 个 .pir (固定 245×160) + 3 个 1px 竖线 <table>
     4) 多处内联固定宽 (990px / 550px / 530px / 500px 图) 需整宽化
     5) 「项目管理核心特色」6 个文字块原带**内联 `margin-top:100px !important`**
        (1 个是 60px) —— 内联 !important 样式表压不动, 手机端会留出 100px 死白。
        2026-09-15 改为类 `.topshou-gap` / `.topshou-gap-60`,
        桌面数值用下方 @media (min-width:769px) 原样补回 → PC 零视觉变化。

   ⚠️ 内联 width(非 !important) 可被样式表 width:100% !important 覆盖;
      内联 width !important 则不能 —— 本页未出现后者。
   作用域: 主体规则在 @media (max-width: 768px) 内, 桌面端零影响。
   ============================================================ */

/* ---------- 角色卡描述: 桌面端显示原长文案, 移动端改显示 .m-only 短句 ----------
   沿用站内既有约定 (见 services-cloud-mobile.css / market-cloud-mobile.css):
   短句写在 <p> 开头的 <span class="m-only"> 里, 桌面端整体隐藏 (不影响原长文案),
   移动端把 <p> 的 font-size 归零、只把 .m-only 显示出来。 */
.pro-mes .market_gongneng .top-shou p .m-only { display: none !important; }

/* ---------- 桌面端: 原内联 margin-top (已改写为类) 的等效补回 ----------
   ⚠️ 必须用 min-width:769px 独立门控 —— 与下方移动端规则互为互斥区间,
      避免依赖书写顺序。数值与原内联 100px / 60px 完全一致。 */
@media (min-width: 769px) {
  .pro-mes .cell-sale .sale-right > .top-shou.topshou-gap { margin-top: 100px !important; }
  .pro-mes .cell-sale .sale-right > .top-shou.topshou-gap-60 { margin-top: 60px !important; }
  /* 三张角色卡原内联 min-height:260px !important (已改写为 .card-minh) → 原样补回 */
  .pro-mes .market_gongneng .top-shou.card-minh { min-height: 260px !important; }
}

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

  /* ---------- 右侧内容区 (990px 浮动) → 整宽; 去掉 #8b2ecd 左竖线 ----------
     ⚠️ 同时 box-sizing:border-box —— .pro-right 默认 content-box,
        保留 3px 边框会让 100% 宽多出 3px 横向溢出 */
  .pro-mes .pro-right {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right.bg_zistwo { border-left: none !important; }

  /* ---------- 容器链整宽 + 解除 overflow:hidden ---------- */
  .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: 与 PC 同样的「一个区域」—— 文字在上, 图作背景贴右下角 ----------
     桌面 (990×300): 图整幅铺满区域; 550px 文字块绝对定位压在图的左半部;
                     .back-bg (250px 空占位) 负责把文字推到图的下半部。
     手机端: 把图改成**绝对定位的背景层**锚定在区域右下角, 文字回到正常流排在最上面。
             DOM 里图在前、文字在后 —— 图一旦脱离文档流, 文字自然落回区域顶部, 无需换序。
     区域高度: padding-bottom = 背景图**实际渲染高**(随宽度等比), 于是文字底边
               恰好接上图的顶边 —— 文字"压"在图上、中间不留缝。
       推算: 图容器宽 100% ⇒ 图元素宽 100%×159.94% ; 图高 = 图元素宽×300/990
             = 1.0×1.5994×0.30303 = 48.47% (占区域宽) → 取 48.5%。
     ⚠️ 2026-09-15 ⑬ 用户反馈「电脑没居中显示 / 空白有点大」——
        原先把图**贴右下角**(width:80%)时, 左侧会留 73px 宽的白条, 且插画整体偏右;
        改成**整宽**(100%)后: 左/右/下都贴满区域, 白条消失, 插画天然居中。 */
  .pro-mes .pro-one {
    position: relative !important;          /* PC 已有, 显式写一遍防被覆盖 */
    width: 100% !important;
    box-sizing: border-box !important;      /* 不写会 366+32 = 398 → 横向溢出 */
    padding: 16px 16px 48.5% !important;    /* 底部 = 图高 (见上方推算) */
    overflow: hidden !important;            /* 兜底: 图贴缘不撑出滚动条 */
  }
  /* 背景图容器: 铺满区域的下半部 (绝对定位的包含块是 .pro-one 的 padding box,
     所以 left/right/bottom:0 就是区域的视觉左/右/下边缘, 16px 内边距不参与) */
  .pro-mes .pro-one > div:first-child {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;        /* 覆盖内联 height:300px */
    margin: 0 !important;           /* 覆盖内联 margin-top:10px */
    padding: 0 !important;
    text-align: left !important;
    line-height: 0 !important;
    overflow: hidden !important;    /* 裁掉插画左侧 371px 透明区, 见下条 img 规则 */
    z-index: 1 !important;
    pointer-events: none !important;
  }
  /* hero 图 project-banner.png (990×300): 插画本体只占 x=371..989 (alpha 实测 619px),
     左侧 371px **全透明** —— 桌面上那正是 550px 文字块(项目云 + 简介)的位置,
     手机端文字已挪到区域顶部, 那段透明区只会变成多余留白 → 放大后由容器裁掉:
       图元素宽 990/619 = 159.94% ; 左移 371/990 × 159.94% = 59.94% (按容器宽算)
     插画实际渲染宽 = 容器宽的 80% ⇒ 仍是缩小, 无画质损失。
     ⚠️ max-width 必须显式 none: 文件后面还有 .pro-mes img{max-width:100%!important}。 */
  .pro-mes .pro-one > div:first-child img {
    width: 159.94% !important;
    max-width: none !important;
    height: auto !important;
    margin-left: -59.94% !important;
    display: block !important;
  }
  .pro-mes .pro-right .pro-ding {
    /* ✦ 相对定位 + z-index 保证文字层压在背景图之上 */
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    bottom: auto !important;
    background: none !important;
    padding: 0 !important;
  }
  /* 内联 height:250px 的空占位色块 (桌面用来把文字推到图下半部) → 隐藏 */
  .pro-mes .pro-right .pro-ding .back-bg { display: none !important; }
  /* 内联 width:550px 的文字块 → 整宽 */
  .pro-mes .pro-right .pro-ding .back-con {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;          /* 原 12px: 文字底边要正好接上图顶边 */
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .pro-mes .pro-right .pro-ding .back-con h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    color: #1c3d7a !important;
    text-shadow: none !important;
  }
  .pro-mes .pro-right .pro-ding .back-con h4 {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    color: #5b6270 !important;
  }
  /* 「观看演示」视频弹窗容器 (内含 820×418 的 #show + iframe) → 隐藏 */
  .pro-mes .pro-right .pro-ding .banyou2,
  .pro-mes #show,
  .pro-mes #moiveys { display: none !important; }

  /* ---------- 各内容块 .cell-sale ---------- */
  .pro-mes .cell-sale {
    /* 桌面四边 16px; 手机端底部收到 2px —— 与自身 margin-bottom:10px +
       下一块的 padding-top:16px 一起, 让「上一块文字 → 下一张图」的组间空隙 ≈ 36px
       (改前是 100px, 其中 50px 来自 .top-shou 的 padding-bottom, 见下方规则)
       2026-09-15 ⑨: 底部再收到 0 —— 电脑图改贴区域右下角后, 需要它压住卡片底边 */
    padding: 16px 16px 0 !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;   /* 保险: 图贴右缘时若差 1px 不撑出横向滚动条 */
  }
  .pro-mes .cell-sale .clear-both { margin-top: 0 !important; }
  .cell-sale .sale-con {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 产品行: 「一个区域」布局 —— 文字压在上方, 电脑图贴右下角 ----------
     桌面: .sale-left 配图 (float:left, 或 .no-potion 绝对定位 right:40px/top:40px)
           与 .sale-right 文字左右并排, 共同构成一张白卡。
     手机: 用 flex 纵向容器把两者收进**同一个区域** —— DOM 里图在前、文字在后,
           靠 order 把文字提到第 1 位, 图排第 2 位 + align-self:flex-end 贴右下角。
     ⚠️ 旧版把图放大 122.5% 再用 overflow:hidden 裁掉图片自带的左右透明边,
        结果**笔记本底座两侧被切掉**(实测图宽 409px 塞进 334px 容器, 左右各溢 38px),
        就是用户反馈的「电脑图片溢出了」。本次改回**不裁切**: 按原始比例摆放,
        图片自带的 ~9% 透明边落在白卡上, 视觉上就是留白 (与 PC 端观感一致)。
     容器高度由内容自然撑开 (flex 列), 不再需要固定 padding 预留图高。 */
  .pro-mes .cell-sale .clear-both {
    display: flex !important;
    flex-direction: column !important;
  }
  .cell-sale .sale-left,
  .cell-sale .sale-right,
  .no-potion,
  .no-float {
    float: none !important;
    box-sizing: border-box !important;
  }
  .cell-sale .sale-right {
    order: 1 !important;               /* 文字 = 上层, 排在最前 */
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    /* ⚠️ pro-god_sub.css 给 .sale-right 写了 min-height:350px (为桌面左右并排
       拉平两栏高度)。单列堆叠后右栏内容仅 141~163px → 每块白撑 141~209px,
       6 块合计约 1156px 死白。必须重置。 */
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .cell-sale .sale-left,
  .cell-sale .sale-left.no-potion {
    order: 2 !important;               /* 图 = 背景层, 排到文字下面 */
    align-self: center !important;     /* ✦ 水平居中 (2026-09-15 ⑫ 用户: 「电脑没居中显示」) */
    position: static !important;       /* 覆盖 .no-potion 的 absolute */
    left: auto !important;
    right: auto !important;
    top: auto !important;              /* 覆盖内联 top:72px */
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    /* 上边距 -2px = 与正文之间不留缝 —— 文字紧"压"在图上。
       ⚠️ 2026-09-15 ⑫ 用户反馈「电脑没居中显示」: 改前是 flex-end + margin-right:-16px
          (抵掉卡片内边距贴右缘) —— 但图片自带 ~9% 透明右边距, 视觉上笔记本被推到偏右、
          左侧留一大块白。改成占满卡片内容宽 + 居中, 两侧留白对称。 */
    margin: -2px 0 0 !important;
    line-height: 0 !important;
    overflow: visible !important;      /* ✦ 不再裁切 (旧版为了裁透明边写了 hidden) */
  }
  /* 截图 (project-1/2/3/5/6/8.png, 均 980×575) 按原始比例整幅显示 ——
     不再放大裁剪, 笔记本底座/两侧都完整; 图片自带 90px 透明边在白卡上即留白。
     ⚠️ max-width 必须显式 100%: base 里有 .cell-sale .sale-left img{filter:FlipH},
        而文件末尾还有 .pro-mes img{max-width:100%!important}。 */
  .cell-sale .sale-left img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }
  /* 「项目管理核心特色」各条文字上方的内联 margin-top:60/100px → 收起
     ⚠️ 同一选择器还要清掉桌面 `.cell-sale .top-shou{padding-bottom:50px}`
        (pro-god_sub.css:308) —— 那是给桌面「左图右文并排」做行距用的,
        单列堆叠后每块尾部白撑 50px, 6 块 = 300px 死白。 */
  .cell-sale .sale-right .top-shou {
    margin-top: 0 !important;
    padding-bottom: 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;
  }
  /* 内联 26px 的段落大标题 → 收敛并去掉 40px 左缩进 */
  .pro-mes .pro-right h4[style*="26px"] {
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    margin: 0 0 6px !important;
  }
  .pro-mes .pro-right > div[style*="margin-top: 30px"],
  .pro-mes .pro-right > div[style*="margin-top: 45px"] {
    margin-top: 8px !important;
  }

  /* ---------- 内联固定宽 (990px) 的整幅区块 → 整宽 ---------- */
  .pro-mes .pro-right div[style*="990px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 「项目管理角色的需求背景」标题: 上下空白收敛 ----------
     2026-09-15 ⑬ 用户: 「空白去掉。太大了。」
     标题外层 <div style="margin-top: 30px;margin-bottom: 24px;"> 是**桌面**用来
     把标题从 hero 图和下面三张卡之间拉开的 (内联、非 !important → 样式表可压)。
     手机端实测: 上方 = 30px(外层 margin-top) + 16px(.cell-sale padding-top) = 46px;
                下方 = 24px(外层 margin-bottom) + 6px(h4 自带 margin-bottom, 含在外层高度内) = 30px。
     收敛为: 上方只留 .cell-sale 的 16px 内边距; 下方 6px + h4 的 6px = 12px。
     ⚠️ 页面内该内联样式**只出现一次** (第 148 行, 已用 grep 确认), 故可直接用属性选择器;
       外层不是 .pro-right 的直接子级 → 上面的 `div[style*="margin-top: 30px"]` 规则
       (第 303 行) 匹配不到它, 必须另写一条。 */
  .pro-mes .pro-two .cell-sale > .clear-both > div[style*="margin-top: 30px"] {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  /* ---------- 「项目管理角色的需求背景」三张角色卡 ----------
     2026-09-15 ⑪: 手机端由「三张竖排整宽」改成**一行三张** —— 手机屏窄,
     竖排时每张卡只有一行字却要占满整宽, 显得又高又空。改用 flex 三等分。 */
  .pro-mes .market_gongneng {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .pro-mes .market_gongneng .top-shou {
    float: none !important;
    flex: 1 1 0 !important;        /* 三等分; 不写 flex-basis:0 会按内容宽度分配 */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;       /* ⚠️ 缺这条 flex 项会被 min-content 顶宽 → 溢出 */
    /* ⚠️ 两处 min-height 要压: ① HTML 内联 260px !important (已改为 .card-minh,
       移动端不定义即失效); ② pro-god_sub.css:323 的 .market_gongneng .top-shou
       min-height:315px (非 !important, 需显式重置) */
    min-height: auto !important;
    margin: 0 !important;
    padding: 12px 6px !important;
    box-sizing: border-box !important;
  }
  .pro-mes .cell-sale .top-shou .market_centr {
    padding: 4px 0 6px !important;
    text-align: center !important;
    font-size: 13px !important;
  }
  .pro-mes .team_img {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 6px !important;
  }
  .pro-mes .team_img img {
    width: 100% !important;
    height: auto !important;
  }
  /* 卡片描述: 长文案归零, 只显示 .m-only 短句 (整段居中, 三张卡行数一致) */
  .pro-mes .market_gongneng .top-shou p {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .pro-mes .market_gongneng .top-shou p .m-only {
    display: inline !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #5b6270 !important;
  }

  /* ---------- 「我们正在使用项目云」客户 logo 墙 ----------
     ⚠️ 容器那个内联 width:990px;height:340px 的 div 是 **.pro-two 的子级**
        (不是 .pro-right 的直接子级) → 选择器必须用后代而不能用 `>`
     容器内联 margin-left:65/70/100px; 行内 4 个 .pir (245×160)
     放在一个内联 display:flex 的 div 里 */
  .pro-mes .pro-right div[style*="340px"] {
    height: auto !important;
    margin-top: 14px !important;
    padding-bottom: 20px !important;
    text-align: center !important;
  }
  .pro-mes .pro-right div[style*="340px"] > h2 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    padding: 0 12px !important;
  }
  /* 两条 990×1px 灰分隔线 (内联 margin-left:70px) */
  .pro-mes .pro-right div[style*="340px"] > div[style*="height: 1px"],
  .pro-mes .pro-right div[style*="340px"] > div[style*="height:1px"] {
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* 内联 display:flex 的 logo 行: 4 格固定 245px 会溢出 → 允许换行, 每行 2 个 */
  .pro-mes .pro-right div[style*="340px"] > div[style*="flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 6px !important;
  }
  .pro-mes .pir {
    position: relative !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
    margin-left: 0 !important;     /* 首个 .pir 内联 margin-left:65px → 会独占一行 */
    padding: 12px 4px !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 4 张 logo 长宽比不同 → 限宽 + 限高, 视觉重量拉齐 */
  .pro-mes .pir img {
    max-width: 74% !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
  }
  /* 1px×80px 的 <table> 分隔线: <table> 的默认 border-spacing 会让它渲染成约 4px,
     且 flex 居中会把它贴到 logo 右侧 → 隐掉, 用伪元素在左列右缘画细线 */
  .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: #e2e5ea !important;
  }

  /* 「我要咨询」按钮 (内联 margin-top:40px !important + margin-left:100px) */
  .pro-mes .pro-right a.a {
    margin-left: 0 !important;
    margin-top: 18px !important;
    padding: 9px 22px !important;
    height: auto !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0564F5 !important;
    background: #eef3ff !important;
    border: 1px solid #c9ddff !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }

  /* ---------- 按钮统一渐变胶囊 ---------- */
  .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;
  }

  /* ---------- 隐藏固定悬浮 ---------- */
  #back-to-top { display: none !important; }
  .qr_code_l { display: none !important; }
}

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