@charset "utf-8";
/* ==========================================================================
   responsive.css — 2026-11-11 P0 可插拔响应式覆盖层
   --------------------------------------------------------------------------
   问题：桌面模板固定 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;
    }
}