/* ============================================================
   移动端 + PC 端 排版修复补丁  ·  适用于 wlkcy 系列站点
   作用：覆盖 /skins/css/module7.css 中错误的移动端规则
   部署：放到站点 /skins/css/mobile-fix.css，并在前台模板 <head>
         末尾加 <link ... href=".../skins/css/mobile-fix.css?v=20261105">
         （必须放在 module7.css / module8.css 之后；靠 !important 生效）
   ============================================================ */

@media (max-width: 768px) {

  /* —— 全局安全网：所有盒子用 border-box，padding 不再撑大宽度 —— */
  * {
    box-sizing: border-box !important;
  }

  /* —— 全局图片兜底：任何图片都不允许超出容器（含动态注入的图） —— */
  img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* —— 兜底：禁止任何元素导致的横向滚动 —— */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ============================================================
     一、HERO 区
     ============================================================ */

  /* 根因：第二个移动端媒体查询里 .titleM{margin-top:300px} → 大片空白错位 */
  .module7 .rightBanenr .titleM {
    margin-top: 0 !important;
  }

  /* 居中装饰图原本绝对定位悬浮(top:55px)，banner 背景隐藏后压住正文 → 改为流式满宽 */
  .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%;
  }

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

  .module7 .banner {
    min-height: 0 !important;
    overflow: hidden;
  }

  /* ============================================================
     二、“我们的优势”板块（图片 + 文字溢出/错位）
     根因：
       - .content 文字块 width:100% + 左右各 padding:50px 且 box-sizing 被注释
         → 比视口宽 100px，整块被推出屏幕（表现为排版乱/溢出）；
       - .i_list(图) 与 .t_list(文) 残留 float，需强制 float:none 纵向堆叠。
     ============================================================ */
  .module7 .goods .g_lists .i_list {
    width: 100% !important;
    float: none !important;
  }
  .module7 .goods .g_lists .t_list {
    width: 100% !important;
    float: none !important;
  }
  .module7 .goods .g_lists .list {
    overflow: hidden !important;
  }
  /* 文字块：去掉固定高度、压缩左右内边距、开启 border-box */
  .module7 .goods .g_lists .list div.content {
    height: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px !important;
    box-sizing: border-box !important;
  }
  /* 图片：外层 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;
  }

  /* ============================================================
     三、“合作案例”板块（图片溢出）
     根因：.topImg img 仅 border:5px，无 width/max-width，按原始尺寸撑破；
           border 必须 box-sizing:border-box 才不溢出。
     ============================================================ */
  .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，hover 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;
  }
}