/* ============================================================
   万洁环保 · 迅睿CMS上线版 手机自适应样式
   放置路径：网站根目录 /Skins/Default/responsive.css
   并在每个模板页面的 <head> 里引入：
     <link rel="stylesheet" type="text/css" href="/Skins/Default/responsive.css" />
   PC 端（>1024px）样式完全不受影响，仅小屏幕生效。
   ============================================================ */

/* ---------- 全局：图片/媒体不溢出 ---------- */
img, embed, object, video {
    max-width: 100% !important;
    height: auto !important;
}

/* ---------- 平板 ≤1024px ---------- */
@media screen and (max-width: 1024px) {

    .header, .content, .footer {
        width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* 1920px 通栏背景强制流式 */
    .banner, .fullSlide, .sb_xt, .cp_z, .cp_y, .cp_xx {
        width: 100% !important;
    }
    .sb_xt em img, .cp_xx img {
        width: 100% !important;
        height: auto !important;
    }

    /* 左右栏堆叠 */
    .left, .left2, .left3, .right, .right2, .right3,
    .right_main, .right2_main, .left2_main,
    .pl, .pr, .m_left, .m_right {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* 头部通栏背景压缩 */
    .dt_tb {
        height: auto !important;
        background-size: cover !important;
    }
    .top {
        height: auto !important;
        padding: 10px 0 !important;
    }
    .top em, .top p {
        width: 100% !important;
        text-align: left !important;
        margin-top: 10px !important;
    }

    /* 推荐产品等多列改两列 */
    .n_info_tjcp dl, .n_info_tjcp dt {
        width: 48% !important;
        box-sizing: border-box;
    }
    .hz_g li {
        width: 48% !important;
        box-sizing: border-box;
    }

    /* 产品列表项两列 */
    .pd_lists {
        width: 48% !important;
        box-sizing: border-box;
        margin: 0 1% 20px 0 !important;
        float: left !important;
    }

    /* 搜索框自适应 */
    .topsearch, .leftsearch {
        width: 100% !important;
        box-sizing: border-box;
    }
    .leftsearch select {
        width: 40% !important;
    }
}

/* ---------- 手机 ≤768px ---------- */
@media screen and (max-width: 768px) {

    body {
        font-size: 14px !important;
    }

    .header, .content, .footer {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 导航横向滚动 */
    .nav {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .nav a, .nav li {
        display: inline-block !important;
        float: none !important;
    }

    /* 所有固定宽度容器 100% */
    .nrcs, .age_con_key, .info_key, .info_b, .info_b2,
    .comments dl dd, .comments dl .huifu, .n_info_con2,
    .news_random ul, ul.news_ul li .a_2,
    ul.p_list_ul li, ul.p_list_ul2 li,
    .pd_lists, .news_con, .show_box, .page_content,
    .plc, .guestbook, .faq_list, .tech_list, .case_list,
    .album_list, .honor_list, .partner_list, .news_list_box {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 产品/推荐项单列 */
    .n_info_tjcp dl, .n_info_tjcp dt, .n_info_tjcp dt img,
    .hz_g li, .hz_g li img, .pd_lists {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    /* 产品列表图自适应 */
    .pd_lists dt img, .pd_lists dd {
        width: 100% !important;
    }
    .pd_lists dt {
        text-align: center !important;
    }

    /* 新闻列表单列 */
    .news_random ul li, .news_item {
        width: 100% !important;
        float: none !important;
    }

    /* 产品列表项全宽 */
    ul.p_list_ul li, ul.p_list_ul2 li {
        display: block !important;
        margin-left: 0 !important;
    }

    /* 案例/相册/荣誉/合作伙伴项两列 */
    .case_item, .album_item, .honor_item, .partner_item {
        width: 48% !important;
        margin: 0 1% 20px 0 !important;
        display: inline-block !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }
    .case_item img, .album_item img, .honor_item img, .partner_item img {
        width: 100% !important;
        height: auto !important;
    }

    /* 页脚链接纵向 */
    .footer a, .footer li {
        display: block !important;
        float: none !important;
        line-height: 1.8 !important;
    }
    .db_nav, .db_dz, .db_y {
        text-align: center !important;
    }
    .db_logo, .db_dh, .db_wx {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
    }

    /* 表格横向滚动 */
    table {
        display: block;
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* 表单元素全宽 */
    input, textarea, select, button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 产品详情页参数表、详情内容内联图片自适应 */
    .show_content img, .page_content img, .news_con img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 正文段落内换行处理 */
    .show_content p, .page_content p {
        word-wrap: break-word !important;
        line-height: 1.8 !important;
    }

    /* 隐藏装饰性大图背景（手机流量） */
    .cp_l h4 a, .cp_l h5 a, .cp_l p, .sb_xt p {
        background: none !important;
    }

    /* 详情标题/元信息自适应 */
    .show_title, .page_title {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    .show_meta {
        font-size: 12px !important;
    }
}

/* ---------- 小屏手机 ≤480px ---------- */
@media screen and (max-width: 480px) {

    /* 案例/相册/荣誉/合作伙伴单列 */
    .case_item, .album_item, .honor_item, .partner_item {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }

    /* logo 和标语堆叠居中 */
    .top h1, .top em {
        display: block !important;
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }
    .top p.fr {
        float: none !important;
        text-align: center !important;
    }
    .top p b.rx {
        display: inline-block !important;
    }
}
/* ============================================================
   万洁环保官网首页 —— 轮播区块布局兜底修复
   站点：http://43.142.18.126:39003   （迅睿CMS / 模板 pc/default/home）
   生成时间：2026-11-05
   ------------------------------------------------------------
   背景：
     首页「他们都是万洁的长期合作伙伴」(.hz_g) 与「万洁相册」(.wj_xc)
     这两块的横向滚动是由 /JS/rollup.min.js 里的
        $(".plug[data-src]").each(...)  →  jQuery.fn.slide(SuperSlide)
     初始化的。SuperSlide 初始化后会把 <ul> 放进一个 div.tempWrap 里，
     并给 <ul> 写入行内宽度（4575px 之类），列表这才保持单行横向排列。

     一旦这段脚本没有跑到（脚本被浏览器拦截、缓存了旧版脚本、加载次序
     异常、或中途出现 JS 报错），<ul> 就没有行内宽度，<li> 按普通浮动
     在 1200px 版心里自动折行 —— 合作伙伴变成 3 列 × 4 行、相册变成
     3 列 × 2 行，竖向撑高后与下方「万洁环保」横幅重叠，这就是页面上
     看到的“样式错乱”。

   本文件的思路：
     不依赖 JS，只在"脚本没初始化"的状态下接管布局 ——
       · 选择器用 .hz_g > ul（直接子元素）；脚本正常时 <ul> 在
         div.tempWrap 内部，不是直接子元素，规则一条都不命中，
         不影响原有滑动效果；
       · 脚本失效时 <ul> 是直接子元素，规则生效：flex 单行不换行 +
         宽度锁 100% + overflow:hidden 裁切，恢复成“一行展示、超出
         部分裁切”的正常观感，且不再撑高、不再与下方横幅重叠。

   实测（1920 / 1050 两档视窗，浏览器内注入验证）：
       · 模拟失效态：.hz_g 行数 5 行 → 注入后 1 行，页面总宽 4966px → 1920px
       · 正常态注入：.hz_g > ul 命中 0 个元素，轮播照常工作，页面总宽仍 1920
   ============================================================ */

/* ---- 合作伙伴（.hz_g） ---- */
.hz_g > ul,
.wj_xc .content > ul,
.qy_zs > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
}

.hz_g > ul > li,
.wj_xc .content > ul > li,
.qy_zs > ul > li {
    flex: 0 0 auto !important;
    float: none !important;
    display: block !important;
    vertical-align: top;
}

/* ---- 老版本浏览器（不支持 flex）的兜底：至少先禁止换行 ---- */
.hz_g > ul,
.wj_xc .content > ul,
.qy_zs > ul {
    white-space: nowrap;
}