/* ============================================================
   移动端排版修复补丁  ·  qz.wlkcy.com  (前台模板)
   作用：覆盖 /skins/css/module7.css 中 @media(max-width:768px) 的错误规则
   部署：把本文件放到站点 /skins/css/ 目录，并在前台模板 <head> 末尾加一行
         <link rel="stylesheet" href="/skins/css/mobile-fix.css">
   （必须放在 module7.css / module8.css 之后；靠 !important 生效）
   ============================================================ */

@media (max-width: 768px) {

  /* —— 根因①：hero 文字被强行下推 300px，造成大片空白 + 错位 ——
        对应 module7.css 第 919 行 .titleM{margin-top:300px} */
  .module7 .rightBanenr .titleM {
    margin-top: 0 !important;
  }

  /* —— 根因②：居中装饰图原本“绝对定位悬浮(top:55px)”，
        但移动端 banner 背景图已隐藏(posiBanner display:none)，
        导致装饰图压住/漂浮在正文之上 —— 改为正常流式、满宽居中 —— */
  .module7 .content .centerPro {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 14px auto 6px !important;
    text-align: center;
  }
  .module7 .content .centerPro img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }

  /* —— hero 文字区：正常堆叠、居中、合理留白 —— */
  .module7 .rightBanenr {
    position: static !important;
    left: auto !important;
    top: auto !important;
    padding: 6px 5% 22px !important;
    text-align: center;
  }
  .module7 .rightBanenr .title {
    text-align: center !important;
    font-size: 22px !important;
  }
  .module7 .rightBanenr .title1 {
    margin-left: 0 !important;
    text-align: center !important;
    display: inline-block;
  }
  .module7 .rightBanenr .title1 img {
    width: 18px !important;
    height: auto !important;
    vertical-align: middle;
  }

  /* —— banner 容器在移动端不再是“背景层”，去掉塌陷/溢出隐患 —— */
  .module7 .banner {
    min-height: 0 !important;
    overflow: hidden;
  }

  /* ============================================================
     新增修复（2026-11-04）：图片溢出 + 右下角浮动图标错乱
     ============================================================ */

  /* —— “我们的优势”板块图片溢出 ——
        图片用未定义的 superimg 类，外层 <a> 是 inline-block 且无宽度，
        图片按原始尺寸(数百px)撑破手机视口。让外层 a 满宽块级、图片 100%。 */
  .module7 .goods .g_lists .i_list > a {
    display: block !important;
    width: 100% !important;
  }
  .module7 .goods .g_lists .i_list img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* —— “合作案例”板块图片溢出 ——
        同样 superimg 问题；且 .topImg img 带 border:5px，
        必须用 box-sizing:border-box 防止“图宽100%+10px边框”导致溢出。
        顺手给 .topImg 加 overflow:hidden，避免桌面 hover 放大时横向溢出。 */
  .module7 .cases ul li .topImg {
    overflow: hidden;
  }
  .module7 .cases ul li .topImg > a {
    display: block !important;
    width: 100% !important;
  }
  .module7 .cases ul li .topImg img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* —— 右下角浮动图标(.xinring_list_box)错乱 ——
        其定位样式写在 /m/skin/css/module8.css，但主域名首页未加载该文件，
        仅在 ≤750px 被设为 display:block 却无任何定位/圆形样式，
        三个图标(电话/留言/返回顶部)裸奔错位。这里补一套正确样式。 */
  .xinring_list_box {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: fixed !important;
    right: 15px !important;
    bottom: 45px !important;
    z-index: 9999999 !important;
  }
  .xinring_list_box > li {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 10px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #4a8bfd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }
  .xinring_list_box > li > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ============================================================
   PC 端（≥769px）“合作案例”板块图片错乱修复
   根因：
     1) 案例图外层 <a> 为 inline-block 且内联 width:****(无效)，
        <a> 被图片原始尺寸撑开，而 Bootstrap 的 img{max-width:100%!important}
        是相对“包含块(<a>)”计算，无法把大图压回 li(30%) 宽 → 原图溢出卡片。
     2) .topImg 无 overflow:hidden，PC 端 .topImg:hover img{scale(1.2)}
        放大时会盖住相邻卡片。
   修复：外层 <a> 与图片都强制满宽；图片统一固定高度 + object-fit:cover
        （保留 5px 蓝边，用 border-box 计入 100%）；.topImg 裁切溢出。
   ============================================================ */
@media (min-width: 769px) {
  .module7 .cases ul li .topImg {
    overflow: hidden;
  }
  .module7 .cases ul li .topImg > a {
    display: block !important;
    width: 100% !important;
  }
  .module7 .cases ul li .topImg img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }
}