/* ============================================================
   smbcrmpc 行业概览页 · 移动端适配样式
   适用范围：manufacturing / IT-page / finance / medical-care
            （Template A）+ Education&Training（Template B）
   规则全部收束在 @media(max-width:768px)，桌面端零影响。
   优先级统一用 !important 覆盖页面内联 width:1200px 等。
   ============================================================ */

@media (max-width: 768px) {

  /* 0. 统一盒模型为 border-box —— 这是消除“width:100%+padding 撑破视口”
        类变形的根本修复（之前仅个别规则带 border-box，导致 banner 内层
        在 content-box 下 100%+padding=422px 被裁切） */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 安全兜底：禁止整页横向滚动 */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 所有图片自适应，自动消除因固定 width/height 引起的溢出 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ----------------------------------------------------------
     通用：把显式 width:1200px / 1060px / 600px 的容器收成 100%
     （覆盖 .background 内联 banner、logo 墙、.Pain 内包装、
       .xifen 区、hangye-lb 内联宽度等）
     ---------------------------------------------------------- */
  div[style*="width: 1200px"],
  div[style*="width:1200px"],
  div[style*="width: 1060px"],
  div[style*="width: 600px"] {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ----------------------------------------------------------
     Template A — Banner 区（外层 .background 仅作浅蓝底块，
     真正内容在内部两个 div：首个=banner 文案+图，末个=logo 墙）
     ---------------------------------------------------------- */
  .background {
    width: 100% !important;
    height: auto !important;
  }

  /* Banner 文案+图 内层 div（顶部留白收紧，但保留 18px 呼吸空间，避免贴顶） */
  .background > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    padding: 18px 16px 8px !important;
    text-align: left !important;
  }

  /* Banner 右图块（.banner-div）取消浮动并居中
     关键修复：index.css 里 .banner-div{height:360px;background:#999}
     图片缩放后 187px 灰底外露 —— 高度改 auto、背景置透明 */
  .banner-div {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
  }

  /* 左文区 .left-p（清掉页面内嵌样式的 margin-top:55px 空白） */
  .left-p {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .pp {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 22px !important;
    margin-top: 8px !important;
    text-align: left !important;
  }

  /* 标题字号收敛（移动端整体减小一档） */
  .text-h2 { font-size: 18px !important; line-height: 1.45 !important; }
  .h2 { font-size: 18px !important; line-height: 1.45 !important; margin-bottom: 20px !important; }
  .hh { font-size: 19px !important; line-height: 1.4 !important; margin-top: 0 !important; }

  /* logo 墙（带 background-color:#eaedff 的内联 div） */
  div[style*="background-color: #eaedff"],
  div[style*="background-color:#eaedff"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  .anli {
    width: 30% !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 6px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ----------------------------------------------------------
     Template A — .Pain 痛点/框架区
     外层 padding 收敛；内部 1200px 包装已收成 100%；
     内部 flex 行（display:flex）纵向堆叠；卡片全宽
     ---------------------------------------------------------- */
  .Pain {
    padding: 16px 16px !important;
  }
  .Pain > .text-h2 { margin: 0 !important; }
  .Pain > div[style*="width: 1200px"],
  .Pain > div[style*="width:1200px"] {
    width: 100% !important;
  }
  /* 标题→内容的内联 margin-top:30px 收成 12px（保留呼吸空间） */
  .Pain > div[style*="margin-top: 30px"],
  .Pain > div[style*="margin-top:30px"] {
    margin-top: 12px !important;
  }
  /* 注：用 :not(:has(> .Pain-left)) 排除“行业现状”两块 flex 行，
     避免与下方 2 列网格规则竞争；其余 .Pain 内 flex 行仍纵向堆叠 */
  .Pain div[style*="display: flex"]:not(:has(> .Pain-left)),
  .Pain div[style*="display:flex"]:not(:has(> .Pain-left)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
  }
  /* 行业现状 6 卡片 → 2 列网格（每行 2 个）：
     把两个内联 flex 行用 display:contents 压平，wrapper 变为 flex-wrap 容器，
     卡片 48% 宽实现 2 列。.Pain-left 仅出现在本区块，作用域安全 */
  .Pain > div:has(.Pain-left) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
  }
  .Pain div:has(> .Pain-left) {
    display: contents !important;
  }
  .Pain-left {
    width: 48% !important;
    height: auto !important;
    min-height: 120px !important;
    padding: 14px !important;
    margin: 6px 0 !important;
  }
  /* 痛点卡片字号减小；文本简化：2 行截断（移动端小卡不放长文） */
  .font  { font-size: 16px !important; line-height: 24px !important; }
  .font2 {
    font-size: 12px !important;
    line-height: 19px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .tit   { height: auto !important; margin-bottom: 8px !important; }
  .line2 { height: 16px !important; width: 5px !important; }

  /* ----------------------------------------------------------
     Template A — 细分领域卡片 .xifen
     ---------------------------------------------------------- */
  .xifen { padding: 0 16px 6px !important; margin-top: 12px !important; }
  /* 收紧 logo墙→标题、副标题→卡片 的空隙 */
  .xifen .text-h2 { margin-top: 0 !important; }
  .xifen-p { font-size: 13px !important; line-height: 22px !important; margin-bottom: 10px !important; }
  .xifen-ul {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
  .xifen-ul a { width: 46% !important; margin: 6px !important; }
  /* 细分领域四卡片：移动端 2×2 网格，缩小高度 */
  .xifen-li {
    width: 48% !important;
    height: 60px !important;
    margin: 5px 0 !important;
  }
  .xifen-p2 { font-size: 15px !important; line-height: 60px !important; }
  /* finance 的 .gezi 卡片（特异性需压过 .xifen-ul li） */
  .xifen-ul .gezi {
    width: 100% !important;
    height: auto !important;
    padding: 18px 10px !important;
  }
  .gezi {
    width: 100% !important;
    height: auto !important;
    padding: 18px 10px !important;
  }
  .xifen-pp { margin: 12px 0 !important; font-size: 20px !important; }

  /* ----------------------------------------------------------
     Template A — 图文混排（.div-big / .pic / .text-table）
     关键：内部 display:flex 行必须改纵向，否则 图文并排 200% 溢出
     ---------------------------------------------------------- */
  .div-big { width: 100% !important; margin-top: 30px !important; }
  .div-big > div[style*="display: flex"],
  .div-big > div[style*="display:flex"],
  .Pain > div > div[style*="display: flex"]:not(:has(> .Pain-left)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .pic { width: 100% !important; text-align: center !important; }
  .text-table { width: 100% !important; padding: 0 4px !important; }
  .text-title {
    position: relative !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #19355e !important;
    line-height: 1.4 !important;
    padding: 2px 0 10px 13px !important;
  }
  .text-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    width: 4px !important;
    height: 15px !important;
    background: #0564F5 !important;
    border-radius: 2px !important;
  }
  .text-small { padding-left: 0 !important; font-size: 13px !important; line-height: 22px !important; margin-top: 8px !important; }

  /* 内联 font-size:24px/30px 的大段落（发展趋势/蓝图说明/客户证言标题）压到移动端合适字号 */
  p[style*="font-size: 24px"] { font-size: 15px !important; line-height: 24px !important; }
  p[style*="font-size: 30px"] { font-size: 18px !important; }

  /* 框架/蓝图大图 IT-pic 收成全宽 */
  .IT-pic { width: 100% !important; height: auto !important; }

  /* 内联 margin-left:80px 的段落/按钮（框架/蓝图/痛点文案）在小屏归零 */
  div[style*="margin-left: 80px"],
  p[style*="margin-left: 80px"] { margin-left: 0 !important; }

  /* ----------------------------------------------------------
     Template A — 客户证言轮播 #silder
     移动端直接纵向堆叠三张，彻底消除横向溢出
     ---------------------------------------------------------- */
  .all {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 16px auto !important;
  }
  /* 关键修复：基础 CSS 的 #silder ul 是 position:absolute（JS 靠它做 left 动画），
     此前容器 height:auto 导致绝对定位 ul 不占高 → 容器塌陷 0 高、图片全被裁掉。
     移动端恢复真轮播：容器高度按图片比例 (1104x388 → 0.3515) 计算，li 宽=容器宽 */
  #silder, .silder {
    width: 100% !important;
    height: calc((100vw - 32px) * 0.3515) !important;
    overflow: hidden !important;
    position: relative !important;
  }
  #silder ul, .silder ul {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: calc((100vw - 32px) * 4) !important;
    height: 100% !important;
    display: block !important;
  }
  #silder li, .silder li {
    width: calc(100vw - 32px) !important;
    height: auto !important;
    float: left !important;
    margin: 0 !important;
  }
  #silder li img, .silder li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ----------------------------------------------------------
     免费试用按钮：仅隐藏 banner 区（.left-p / .background 内的 .Button）
     顶部导航栏的“免费试用”胶囊由 mobile-hf.css 全局管理，保持显示
     ---------------------------------------------------------- */
  .Button { display: none !important; }

  /* ============================================================
     Template B — Education&Training.html
     ============================================================ */

  /* Banner 区 */
  .banner {
    height: auto !important;
    padding: 50px 16px !important;
  }
  .content-top {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
  }
  .content-top h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: 1px !important;
  }
  .content-top h2 {
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }
  .content-top .bg-phone { display: none !important; }
  .free-shi {
    display: inline-block !important;
    margin-top: 20px !important;
  }

  /* con1 四大块 + 行业标准版 works 卡片 */
  .con1 { width: 100% !important; overflow: hidden !important; }
  .con1-cen {
    width: 100% !important;
    padding: 0 16px !important;
  }
  .con1-title,
  .con1-th2 {
    font-size: 22px !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin-top: 30px !important;
    margin-bottom: 24px !important;
  }
  .con1-item {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    padding-bottom: 30px !important;
  }
  .con1-item dl {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 12px 0 !important;
    background: #fff;
    border-radius: 4px;
  }
  .con1-item dl dt { height: auto !important; padding-bottom: 10px; }

  .works {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .works li {
    width: 46% !important;
    height: auto !important;
    float: left !important;
    margin: 8px 2% !important;
    padding-bottom: 10px;
    list-style: none !important;
  }
  .works li > a {
    display: block !important;
    width: 100% !important;
  }
  .works li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 客户 logo 墙 service_ban / inner_listlogo */
  .pro-two {
    height: auto !important;
    padding: 30px 16px !important;
  }
  .service_ban { width: 100% !important; height: auto !important; }
  .service_ban h2 {
    line-height: 1.4 !important;
    font-size: 20px !important;
    padding: 20px 0 !important;
  }
  .inner_listlogo {
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .inner_listlogo a {
    width: 30% !important;
    height: auto !important;
    float: none !important;
    margin: 8px 1.5% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* hangye-lb 咨询条 */
  .hangye-lb > div {
    width: 100% !important;
    height: auto !important;
    padding: 20px 16px !important;
  }
  .hangye-l,
  .hangye-ph {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
  }
  .hangye-lbbtn {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 16px !important;
  }
  .hangye-lbbtn li {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  .hangye-lbbtn li a {
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
  }

  /* 原生 footer .content8 */
  .content8 {
    height: auto !important;
    padding: 30px 16px !important;
  }
  .content8 .con8-d1 {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 0 !important;
  }
  .content8 .con8-d4 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  .content8 .con8-d4 div {
    float: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 12px !important;
  }
  .content8 .con8-d3 {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 20px 0 !important;
  }
  .content8 .con8-d3 a { transform: none !important; }
  .bquan {
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

}