@charset "utf-8";
/* ==========================================================================
   solution-mobile.css — 方案/行业「概述页」移动端适配
   --------------------------------------------------------------------------
   2026-09-16 新建。服务页面: solution/travel.html (旅游)
                            solution/lawyer.html (律师)
                            solution/goods.html  (地产园区)
   只有这 3 个页面 <link> 本文件, 共享 CSS (change.css / pro-god.css) 一行未改,
   其他页面零影响。全部规则包在 @media (max-width:768px) 内, 桌面端零影响。

   桌面布局 (pro-god.css):
     .pro-mes     固定 1180px  (左 187px 侧栏 + 右 990px 正文, 双 float)
     .salefeature 890px + padding:10px 50px 40px
     .cell-sale   890px 内 .sale-con padding:50px; .sale-left 浮动图 / .sale-right 440px
     .both-top    margin:50px; .both-jiaoyu 930×480 固定高
     .service_ban 990×540 背景图 + 190px/个 logo 浮块
     .hangye-lb   灰底 123px + 3 个 101×75 按钮底图
     #heig-490    990×490 背景图
   窄屏必然横向溢出 (实测 390px 视口溢出 790px)。

   移动布局: 全通栏色块 + 16px 内边距; 侧栏导航让位给汉堡抽屉;
             所有图片等比自适应; logo 墙 2 列等高; 灰底条改纵向胶囊按钮。
   ========================================================================== */

@media (max-width: 768px) {

  /* ==========================================================================
     0. 容器与盒模型
     --------------------------------------------------------------------------
     .pro-mes 是 1180px 固定宽, 是 790px 横向溢出的**总根源**。
     改成全通栏后由各色块自带 16px 内边距 —— 这样 .cell-sale 的 #fafafa、
     .hangye-lb 的 #EFEFEF、#heig-490 的蓝底都能通栏铺满, 而不是缩成 16px 的窄卡。
     再统一 border-box: 这页大量元素是「固定宽 + padding」, 内容盒模型下
     100% + padding 会撑破视口 (smbcrmpc 那批页面踩过的同一个坑)。
     ========================================================================== */
  .pro-mes,
  .pro-mes * {
    box-sizing: border-box !important;
  }
  .pro-mes {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .pro-right,
  .pro-mes .pro-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .pro-right .pro-two,
  .pro-mes .pro-two {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ==========================================================================
     1. 左侧「行业方案」侧栏 → 隐藏
     --------------------------------------------------------------------------
     187px 固定宽 + 9 个行业链接 + 「若有问题?」两块, 在 390px 屏上变成
     一大条纵向列表把正文挤到看不见。行业切换统一走汉堡抽屉 (mobile-nav.js
     的「方案」一级菜单里就是同一份清单), 页内不再重复一遍。
     ⚠️ 不做成横向胶囊条是为了避免 pro-god.css 里
        `.pro-uli li:nth-child(N).bord-left` 那 9 条彩色左边框规则的特异性战争。
     ========================================================================== */
  .pro-mes .pro-left {
    display: none !important;
  }

  /* ==========================================================================
     2. 顶部「行业名 + 描述」(.salefeature)
     ========================================================================== */
  .pro-one .salefeature {
    width: 100% !important;
    padding: 18px 16px 16px !important;
  }
  .salefeature p {
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }

  /* 通用 h2 (pro-god.css 的 line-height:60% 在窄屏会把行高压塌)
     ⚠️ 必须写在 .pro-one .salefeature h2 之前: 主标题与它同为「行业名/小节标题」,
        让主标题靠较高的特异性 (0,2,1) 稳压通用规则, 而不是靠源码顺序。 */
  .pro-mes h2 {
    font-size: 19px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  /* 主标题 (行业名) */
  .pro-one .salefeature h2 {
    height: auto !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    padding-top: 0 !important;
    margin: 0 0 10px !important;
  }

  /* ==========================================================================
     3. 正文色块 (.cell-sale / .sale-con / 左右两栏)
     ========================================================================== */
  .pro-mes .cell-sale {
    padding: 16px !important;
  }
  .cell-sale .sale-con {
    width: auto !important;
    padding: 0 !important;
  }
  /* 左右两栏全部拆浮动: 图在上、文案在下 (与 DOM 顺序一致) */
  .cell-sale .sale-left,
  .cell-sale .sale-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* 图内联写死的 padding-top:120px/100px/80px 在移动端全是死白 */
  .cell-sale .sale-left {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
  }
  /* 图片等比缩放: 手机截图类竖图 (385×645) 全宽会到 600px 高, 封顶 340px */
  .cell-sale .sale-left img,
  .cell-sale .sale-right img,
  .cell-sale .clear-both img,
  .both-jiaoyu img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 340px !important;
    margin: 0 auto !important;
  }
  /* travel 里给两段文字包了内联 padding:0 50px / padding-top:50px */
  .cell-sale div[style*="padding:0 50px"] {
    padding: 0 !important;
  }
  .cell-sale div[style*="padding-top:50px"] {
    padding-top: 16px !important;
  }

  /* 小标题与正文 */
  .cell-sale .salefont_h2 h2 {
    font-size: 18px !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
  }
  .cell-sale h3,
  .cell-sale .fonttou_h3 h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
  }
  .cell-sale .fonttou_h3 {
    padding-top: 16px !important;
  }
  .cell-sale p,
  .cell-sale .sale-right p,
  .cell-sale .fonttou_h3 p,
  .cell-sale .both-top .tttop-p {
    font-size: 14px !important;
    line-height: 1.78 !important;
    margin: 8px 0 !important;
  }
  .list_messages {
    padding-top: 8px !important;
    margin: 0 !important;
  }
  .list_messages li {
    font-size: 13.5px !important;
    line-height: 1.78 !important;
    padding-top: 4px !important;
    margin-left: 18px !important;
  }

  /* ==========================================================================
     4. 地产园区页的图文块 (.both-top / .both-jiaoyu 业务蓝图 1420×938)
     ========================================================================== */
  .both-top {
    margin: 18px 0 0 !important;
  }
  .both-top h2 {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
  }
  .both-jiaoyu {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* <img height="480px"> 是 HTML 属性, 必须 height:auto !important 才压得住 */
  .both-jiaoyu img {
    width: 100% !important;
    height: auto !important;
  }

  /* ==========================================================================
     5. 客户 logo 墙 (.service_ban + .inner_listlogo)
     --------------------------------------------------------------------------
     原图宽高比横跨 2.12 ~ 5.96 (住百家 552×260 vs 成都建筑 292×49), 且每张
     <img> 都带内联 px 宽高 → 视觉高度差一倍以上。
     处理: 2 列白卡等高 + 高度封顶随视口自适应 ——
           除数 11.92 = 2 列 × 最宽 logo 比例 5.96,
           含义是「让最宽的那张刚好铺满卡片宽, 其余 logo 和它等高」,
           所以每个机型上 6 张 logo 都精确等高, 不用为窄屏写例外。
     ========================================================================== */
  .pro-mes .pro-two .service_ban {
    height: auto !important;
    padding: 16px 12px 18px !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .service_ban h2 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 0 4px !important;
    text-align: center !important;
  }
  .pro-two .service_ban .inner_listlogo {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 14px !important;
  }
  .pro-two .service_ban .inner_listlogo a,
  .pro-two .service_ban .inner_listlogo a[style] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 0 6px !important;
    line-height: normal !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  }
  .pro-two .service_ban .inner_listlogo a img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(30px, calc((100vw - 64px) / 11.92)) !important;
    object-fit: contain !important;
  }

  /* ==========================================================================
     6. 灰底咨询条 (.hangye-lb) → 纵向: 文案 → 电话卡 → 3 个通栏胶囊按钮
     --------------------------------------------------------------------------
     桌面是 123px 定高 + 三个 float 块, 按钮底图只有 101×75 且 <a> 定宽 81px,
     窄屏文字压住电话图标、按钮白块错位。
     ========================================================================== */
  .hangye-lb {
    height: auto !important;
    padding: 18px 16px 20px !important;
  }
  .hangye-l {
    float: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    font-size: 13.5px !important;
    line-height: 1.78 !important;
  }
  .hangye-ph {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    padding: 15px 16px 15px 58px !important;
    background: #fff url("../images/hangye-ph.png") no-repeat 16px center !important;
    background-size: 28px 19px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  }
  .hangye-ph strong {
    font-size: 18px !important;
  }
  .hangye-lbbtn {
    padding: 0 !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
  }
  .hangye-lbbtn li {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 0 8px !important;
  }
  .hangye-lbbtn li a,
  .hangye-lbbtn li a:hover {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 8px !important;
    background: #55adbc !important;
    border-radius: 24px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  .hangye-lbbtn li a p {
    margin: 0 !important;
  }

  /* ==========================================================================
     7. 底部「免费试用」色块 (#heig-490, 页面内联 height:490px + 990×490 底图)
     --------------------------------------------------------------------------
     底图左侧 2/3 是纯蓝、图标在右侧, 所以 cover + 右对齐: 左边裁掉的部分
     本来就是纯色, 右侧图标完整保留, 不会出现拼接缝。
     ========================================================================== */
  #heig-490 {
    height: auto !important;
    padding: 20px 16px 22px !important;
    background-position: right center !important;
    background-size: cover !important;
  }
  #heig-490 .padding-px {
    padding: 0 !important;
  }
  #heig-490 h4 {
    font-size: 19px !important;
    line-height: 1.5 !important;
    margin: 0 0 6px !important;
  }
  #heig-490 .sale-right p {
    margin: 10px 0 !important;
  }
  .free-shi {
    margin-top: 16px !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
  }

  /* ==========================================================================
     8. 装饰/悬浮元素
     ========================================================================== */
  /* 左下角 fixed 二维码 (430px 原图, z-index:999) 必然遮挡正文 → 隐藏 */
  .qr_code_l {
    display: none !important;
  }
  /* 右下角 fixed 返回顶部, 与全站其他已适配页面保持一致地隐藏 */
  #back-to-top {
    display: none !important;
  }
  /* 底部「相关阅读」行: 内联 max-width:960px + 三链接一行 → 允许换行 */
  div[style*="相关阅读"] {
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    line-height: 2 !important;
  }
}
/* end @media (max-width: 768px) */