@charset "utf-8";
/* ==========================================================================
   responsive.css — 2026-11-11 P0 可插拔响应式覆盖层
                    2026-11-12 同步到中文站 cn.spfiltra.com
   --------------------------------------------------------------------------
   来源：www.spfiltra.com/Public/Home/css/responsive.css（含 5ca552dd 删掉
   「窄屏手风琴堆叠」规则的改动）。中文站实测基线：<=1024px 时
   scrollWidth=1080 而 clientWidth=375/768/1024，主导航 .navs 被 ipad.css
   隐藏、.djclick 汉堡按钮落在 x=931（手机屏外），与英文站 P0-1 症状一致。
   末尾第 8 节是中文站专属适配，其余规则与英文站保持逐行一致。

   问题：桌面模板固定 1080/1200px（style.css 多处 width:1080px !important），
   而 UA 跳转只写在 Home/IndexController::index() 首页。手机访问列表/详情等
   内页、iPad、iPadOS 伪装 Mac 的情况都会落到桌面模板，浏览器把 1080px 页面
   整体缩小塞进 375px 屏幕（实测 innerWidth=1080），文字极小且无移动导航。
   Mobile 模块只有首页模板，lists/show 等内页模板缺失，直接 302/404，因此
   不扩展 UA 跳转，改用本层让桌面模板在窄屏可读、可导航、URL 保持不变。

   设计约束：
   1) 只在 <=1080px 生效，桌面端渲染完全不受影响（零回归）。
   2) 纯 CSS、零 JS、不改动任何既有 CSS / PHP / 模板结构。
   3) 必须最后加载（放在 base.html 的 ie.css 之后），用 !important 覆盖
      style.css 里的 width:1080px !important 与 ipad.css 的 display:none。
   4) 可回退：删掉 base.html 里这一行 <link> 即恢复原状。
   ========================================================================== */

@media screen and (max-width: 1080px) {

    /* --- 1. 根容器流式化：消除「整页被缩小」的根因 ---------------------- */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .container,
    .w100,
    .con,
    .ftnr,
    .ab_ctss,
    .ry_ss,
    .productList,
    .pd_s_2,
    .prt_1_nr,
    .nrong,
    .yyss,
    .m_center,
    .publicny,
    .m_smallNav,
    .banner,
    .section4,
    .section4 ul,
    .ix_photo,
    .ix_hy,
    .ix_lc,
    .ix_ct,
    .ix_about,
    .navs2,
    .ssssghhh,
    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    img,
    video,
    canvas,
    iframe,
    table {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- 2. 页头：原本 .con 是 fixed 96px，导航换行会盖住正文 ----------- */
    .con {
        position: static !important;
        height: auto !important;
        line-height: normal !important;
    }

    .con > .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        /* 模板内联写了 height:94px，不覆盖会把换行后的导航整行裁掉 */
        height: auto !important;
        min-height: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }

    .logo {
        float: none !important;
        flex: 0 0 auto;
    }

    .logo img {
        max-width: 120px;
        height: auto !important;
    }

    .language {
        margin-left: auto !important;
        margin-top: 0 !important;
    }

    /* ipad.css 在 <=1200px 把 .navs 设为 display:none，但模板里并没有
       .djclick 汉堡按钮（.navs2 永远打不开），窄屏导航等于完全消失。
       这里把主导航改成一行横向可滑动，不依赖任何 JS。 */
    .navs {
        display: block !important;
        order: 3;
        width: 100% !important;   /* 独占一行，避免和 logo / 语言按钮挤在一起 */
        margin-left: 0 !important;
        padding-top: 4px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navs ul {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .navs li {
        float: none !important;
        flex: 0 0 auto;
        margin: 0 16px 0 0 !important;
    }

    .navs ul li a {
        float: none !important;
        height: auto !important;
        line-height: 40px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    /* .navs2（无 JS 触发的备用菜单）、.ssssghhh（JS toggle 的绝对定位搜索浮层）
       在 .con 里是 .container 之外的游离层，窄屏会与横滑主导航叠在一起，直接收掉 */
    .serch,
    .navs2,
    .ssssghhh {
        display: none !important;
    }

    /* --- 3. 首页 hero：已由 hero-carousel.css 统一接管为整幅轮播。
          原「手风琴窄屏堆叠 / 只显示首张」规则移除，仅保留宽度兜底。
          删掉 hero-carousel.css 后若要恢复手风琴，需一并恢复本节。 ---- */
    .section4 ul {
        left: auto !important;
    }

    /* --- 4. 首页 / 内页行业卡片：6 列 16.66% 改成 2 列 ------------------ */
    .ix_photo {
        margin-top: 20px !important;
    }

    .ix_photo ul li {
        width: 50% !important;
        box-sizing: border-box;
    }

    .ix_photo .pt2 {
        padding: 12px 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .ix_photo .bh {
        font-size: 18px !important;
    }

    .ix_photo .bh2 {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* .pt3 是 hover 才滑入的详情层，触屏无 hover，且 absolute 定位会重叠 */
    .ix_photo .bh3,
    .ix_photo .pt3 {
        display: none !important;
    }

    /* --- 4b. 内页行业卡片：figure 两列但 figcaption 固定 340px，导致
       相邻卡片标题互相压叠；窄屏改单列流式 ------------------------------- */
    .m_hangye {
        margin: 24px 0 !important;
    }

    .m_hangye figure {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        margin-bottom: 26px !important;
    }

    .m_hangye figure > div,
    .m_hangye figure figcaption {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
    }

    .m_hangye figure > div {
        text-align: center;
    }

    .m_hangye figure figcaption h3 {
        text-indent: 0 !important;
        text-align: center;
        font-size: 18px !important;
    }

    /* 模板内联写了 height:130px; text-indent:14px，需显式解开 */
    .m_hangye figure figcaption > div {
        height: auto !important;
        overflow: visible !important;
        text-indent: 0 !important;
    }

    .m_hangye figure figcaption li {
        list-style: none;
        line-height: 1.7;
        text-align: center;
    }

    .m_hangye img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* --- 5. 通用降级：左右浮动改竖排、长表格允许横滚 -------------------- */
    .fl,
    .fr {
        float: none !important;
    }

    /* 首页竖排装饰文字「COMPANY PROFILE」，窄屏没有留白空间 */
    .shuli {
        display: none !important;
    }

    /* 首页简介原本 text-align:justify，窄列里会把一个词拆成两行 */
    .ab_rt_1 p,
    .ix_about .ab_rt p {
        text-align: left !important;
    }

    /* 悬浮客服按钮内联写了 top:400px，窄屏会压在正文中部，挪到右下角 */
    div[data-target="#myModal"] {
        top: auto !important;
        bottom: 16px !important;
        right: 8px !important;
        z-index: 20;
    }

    div[data-target="#myModal"] img {
        width: 52px !important;
        height: 52px !important;
    }

    .lcc ul li {
        width: 50% !important;
        box-sizing: border-box;
    }

    .m_smallNav .right.m_address {
        display: none !important;
    }

    .m_smallNav ul.left {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .m_smallNav ul.left li {
        float: none !important;
        margin-right: 16px !important;
        font-size: 14px !important;
    }

    .modal-dialog {
        margin: 10px auto !important;
    }

    table {
        display: block;
        overflow-x: auto;
    }
}

/* 超窄屏：卡片改单列，避免两列时标题折行 */
@media screen and (max-width: 480px) {
    .ix_photo ul li,
    .lcc ul li {
        width: 100% !important;
    }
}

/* ==========================================================================
   8. 中文站专属适配（2026-11-12）
   --------------------------------------------------------------------------
   a) cn 的 .container 桌面端自带 bootstrap 15px gutter（英文站是
      padding:0），hero-carousel.css 的文案盒按 15px 与内容区对齐。
      本层第 1 节把 gutter 覆盖成 12px，会让窄屏文案与正文差 3px，
      这里改回 15px 保持全站一致。
   b) cn 模板多一个 .djclick 汉堡按钮 + .navs2 抽屉菜单（英文站没有
      .djclick）。本层第 2 节已把 .navs2 隐藏、改用横滑主导航 .navs，
      若不隐藏 .djclick，点它会去 slideToggle 一个 display:none !important
      的元素，变成「点了没反应」的死按钮。
   c) 注意：hero-carousel.css 排在本文件之后，<=1080px 的
      .banner{margin-top:0 !important} 由它负责（英文站同）。
      如果删掉本层回退，需把该值改回 96px，否则 banner 会被固定头部遮住。
   d) 「关于品康」：英文站 P0 层只清了 .fl/.fr 的 float，而本站 style.css
      里 .ix_about 固定 height:411px、.ab_lt/.ab_rt 固定 width:50%。
      窄屏竖排后会变成「半宽图文 + 右侧大片空白」，且内容远超 411px，
      实测 375px 时 about 内容到 y=1770 而下方 .ix_photo 从 y=1134 开始，
      文字直接压到下一个板块。这里补成整行流式 + 自适应高度。
      （上一轮刚修好的「图片不盖文字」在窄屏也依赖这一节。）
   ========================================================================== */
@media screen and (max-width: 1080px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .djclick {
        display: none !important;
    }

    .ix_about {
        height: auto !important;
        margin-top: 32px !important;
    }

    .ix_about .ab_lt {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 文字栏留 12px 左右内边距，否则标题「关于品康」会紧贴屏幕边缘 */
    .ix_about .ab_rt {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 24px 12px !important;
    }

    .ix_about .video {
        width: 100% !important;
    }

    .ix_about .video img {
        height: auto !important;
    }
}