@charset "utf-8";
/* ==========================================================================
   移动端兼容补丁  mobile-fix.css
   --------------------------------------------------------------------------
   原站在窄屏下有三个硬伤：
     1) responsive-nav 的移动断点只有 40em(640px)，768~1200px 之间仍走桌面
        横排导航（固定 1400px 宽），直接把页面撑出横向滚动条；
     2) .logo 是固定 587px 宽的背景图，窄屏必然溢出；
     3) .topTel 是绝对定位 + 28px 大字，窄屏和 logo 叠在一起。
   本文件只在窄屏生效，桌面端（>1200px）样式完全不受影响。
   注意：必须放在 main.css / responsive.css / responsive-nav.css 之后加载。
   ========================================================================== */

/* ---------- 0. 全局：禁止横向滚动、媒体自适应 ---------- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}
/* 长串英文/数字不撑破容器 */
body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

/* ---------- 1. 导航：1200px 以下一律改用汉堡菜单 ---------- */
@media screen and (max-width: 1200px) {
    .js .nav-collapse {
        position: absolute !important;
        max-height: 0;
        width: 100% !important;
        overflow: hidden;
        z-index: 9999;
    }
    .js .nav-collapse.opened {
        max-height: 9999px;
        /* responsive-nav.css 里 clip:rect(0 0 0 0) 只对绝对定位元素生效，
           而窄屏下导航正是 absolute —— 不解除 clip，菜单展开后依然不可见 */
        clip: auto !important;
    }
    .js .nav-collapse.closed {
        width: 100% !important;
    }
    /* 汉堡按钮：原版用图标字体画「≡」，白字落在白色 header 上等于隐形，
       这里改成纯 CSS 画的深蓝底按钮，不依赖字体文件 */
    .nav-toggle {
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        background: #033162;
        border-radius: 4px;
        /* 保持负值以隐藏按钮里的「Menu」文字，只显示图标 */
        text-indent: -999px !important;
        overflow: hidden !important;
        z-index: 10000;
    }
    .nav-toggle:before {
        content: '' !important;
        display: block;
        position: absolute;
        top: 12px;
        left: 7px;
        width: 28px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 8px 0 #fff, 0 16px 0 #fff;
        text-indent: 0 !important;
        font-size: 0 !important;
        line-height: normal !important;
        color: #fff;
    }
    .nav-toggle.active:before {
        top: 20px !important;
        box-shadow: none !important;
        transform: rotate(45deg);
    }
    .nav-toggle.active:after {
        content: '';
        display: block;
        position: absolute;
        top: 20px;
        left: 7px;
        width: 28px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transform: rotate(-45deg);
    }
    .nav-collapse > ul {
        height: auto !important;
        width: 100%;
        display: block;
    }
    .nav-collapse > ul > li {
        width: 100% !important;
        float: none !important;
        display: block;
        line-height: 44px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        background: #033162;
        overflow: visible;
    }
    .nav-collapse > ul > li > a {
        font-size: 16px !important;
        height: 44px !important;
        line-height: 44px !important;
        letter-spacing: 1px;
    }
    .nav-collapse > ul > li > ul {
        display: none !important;
        position: static !important;
    }
    .nav-collapse > ul > li.active > ul,
    .nav-collapse > ul > li.hover > ul {
        display: block !important;
    }
    .nav-collapse > ul > li > ul > li {
        opacity: 1 !important;
        transform: none !important;
        background: rgba(0, 0, 0, .18);
        line-height: 2.2em;
    }
    .nav-collapse > ul > li > ul > li > a {
        color: #fff;
        font-size: 14px;
    }
}

/* ---------- 1b. 1201~1400px：导航仍是横排，但改成自适应宽度 ----------
   原样式 .nav-collapse.closed 写死 1400px，视口不足 1400 时会把页面撑破 */
@media screen and (min-width: 1201px) {
    .js .nav-collapse.closed {
        width: 100% !important;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ---------- 2. 头部 / 横幅 / 内容：768px 以下 ---------- */
@media screen and (max-width: 768px) {
    /* 顶部：logo 与电话并排一行，避免上下堆叠吃掉首屏 */
    .top {
        /* 右侧留出汉堡按钮的位置，避免电话被按钮压住 */
        padding: 1em 58px 1em 0 !important;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .top > div:first-child {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .top > div:last-child {
        width: auto !important;
        flex: 0 0 auto;
    }
    .logo {
        width: 100% !important;
        max-width: 300px;
        height: 46px !important;
        background-size: contain !important;
        background-position: left center !important;
    }
    .topTel {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        background-image: none !important;
        font-size: 15px !important;
        line-height: 1.6;
        text-align: right;
        white-space: nowrap;
    }

    /* 导航容器：改成相对定位，汉堡按钮才能停在头部右侧 */
    .nav_wrap {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        background: #033162;
    }
    .nav-toggle {
        top: -54px !important;
        right: .5em !important;
    }

    /* 首页轮播：桌面 600px 太高，手机上占满屏 */
    .banner .owl-item > div {
        height: 200px !important;
        background-size: cover;
    }
    .banner_cat {
        height: 180px;
        background-size: 170%;
    }
    .banner_cat h1 {
        font-size: 20px !important;
        left: 6% !important;
        top: 26% !important;
    }
    .banner_cat .en {
        font-size: 20px !important;
        left: 6% !important;
        top: 46% !important;
    }

    /* 标题层级缩小 */
    .title1 h1 {
        font-size: 24px !important;
        top: 20px !important;
    }
    .title1 .en {
        font-size: 28px !important;
        top: -18px !important;
    }
    .title1 p {
        font-size: 14px !important;
        padding: 0 1em;
    }

    /* 产品/案例：缩略图必须有高度，否则堆叠后塌成 0 */
    .products_index .-item .-thumb,
    .case_index .items .-item .-thumb,
    .img-list .-item .-thumb {
        min-height: 200px !important;
        height: 200px !important;
        background-size: cover !important;
    }
    .products_index .-item,
    .case_index .items .-item {
        margin-bottom: 1em;
    }
    .product_cat ul li a {
        display: block;
        line-height: 2.6em;
    }

    /* 面包屑与正文 */
    .bread {
        font-size: 13px !important;
        padding-left: 10px !important;
        line-height: 2em;
    }
    .right_content {
        padding: 1em .6em !important;
    }

    /* 底部：二维码居中，版权自动换行 */
    .bottomInfo .qrcode {
        position: static !important;
        top: auto !important;
        margin: 0 auto 1em !important;
        text-align: center;
    }
    .copyright, .icp {
        text-align: center;
        line-height: 1.9em;
        padding: .6em 0;
    }

    /* 触摸友好：链接点击区不小于 40px */
    .news-list a,
    .hasimg-list a,
    .img-list a,
    .case_index a,
    .footer a,
    .bottomMenu a {
        display: block;
        padding: 6px 0;
    }
    .-more {
        margin: 1em auto;
    }

    /* 表单 */
    .msg input[type="text"],
    .msg textarea {
        width: 100%;
        font-size: 16px; /* 低于 16px 时 iOS 会自动放大页面 */
    }
    .msg .layui-col-md1 {
        font-weight: bold;
        line-height: 2em;
    }

    /* layui 悬浮栏：默认 50px 见方，手机上会压住正文和输入框，缩小并贴边 */
    .layui-fixbar {
        right: 5px !important;
        bottom: 62px !important;
    }
    .layui-fixbar li {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 19px !important;
        opacity: .8 !important;
    }

    /* 栏目横幅里的长标题：绝对定位 + 大字号会顶出屏幕，改成可换行并限宽 */
    .banner_cat h1,
    .banner_cat .en,
    .banner_cat p,
    .banner_cat div {
        left: 6% !important;
        max-width: 88% !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
    .banner_cat h1 {
        font-size: 18px !important;
        top: 18% !important;
    }
    .banner_cat .en {
        font-size: 16px !important;
        top: 44% !important;
    }

    /* 留言表单：手机上压缩留白，别让字段隔太远 */
    .msg .layui-col-space20 > div {
        padding: 4px !important;
        margin-bottom: .2em;
    }
    .msg .layui-col-md1 {
        line-height: 1.6 !important;
        font-size: 14px;
    }
    .msg .layui-col-md11,
    .msg .layui-col-md5 {
        width: 100% !important;
    }
    .right_wrap,
    .right_content {
        padding: .8em .5em !important;
    }
}

/* ---------- 2b. 首页主体 / 页脚重设计（≤768px） ----------
   原站这几块在窄屏下的表现：
     · .title1/.title2 的 h1 是 40px 固定大字，英文水印 .en 是 50px + nowrap，
       375px 下必然被挤换行或顶出屏幕（工程案例 / 业绩 会被拆成两行）；
     · .case_index .items 是 2×2 网格 + 一条 25% 宽的竖排 caption，
       手机上 caption 只剩 30 多像素宽，标题被逼成「竖排逐字换行」；
     · .case_index ul 的文字列表和下面的案例卡片内容完全重复；
     · footer 的 .bottomMenu 是 4 列 × 25%，子链接在窄列里挤成一团，
       .bottomInfo 又是 80% 宽 + 右浮动，整体往右偏。 */
@media screen and (max-width: 768px) {

    /* ---- 2b-1 栏目标题：中文不拆行，英文水印收回容器内 ---- */
    .title1 h1,
    .title2 h1 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        top: 14px !important;
    }
    .title1 .en,
    .title2 .en {
        /* 桌面是 50px 的灰色装饰水印（负 top + z-index:-1 压在标题下），
           手机上空间不够，水印会被裁成残字还会和中文标题打架。
           这里改成中文标题下方的一行小号英文副标题。 */
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        white-space: nowrap !important;
        max-width: 100%;
        overflow: hidden;
        letter-spacing: 1px;
        margin-top: .3em;
        color: #b6bac4 !important;
    }
    .title2 {
        margin-bottom: .4em !important;
    }
    .title2 h1 {
        padding-left: 2px;
    }

    /* ---- 2b-2 首页产品区：caption 原本 opacity:0、只有 hover 才显示，
           手机没有 hover，产品名等于永远看不见。改成图片下方的常驻标题 ---- */
    .products_index {
        padding-top: 2em !important;
    }
    .products_index .-item {
        width: 50% !important;
        height: auto !important;
        margin-bottom: .8em !important;
    }
    .products_index .-item .-thumb {
        width: 96% !important;
        height: 150px !important;
        min-height: 150px !important;
        background-size: cover !important;
    }
    .products_index .-item .caption {
        position: static !important;
        opacity: 1 !important;
        background: none !important;
        border: 0 !important;
        padding: .5em .4em 0 !important;
        text-align: center !important;
    }
    .products_index .-item .caption h3 {
        color: #333 !important;
        font-size: 13px !important;
        font-weight: normal !important;
        line-height: 1.5 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .products_index .-item .caption p {
        display: none !important;
    }

    /* ---- 2b-3 中间广告条 ----
       背景图 banner1_bg.jpg 是 1920×300 的宽幅图，左半边写着
       「携手鑫正 · 成就客户 · 共同进步 / 更便捷、更全面、更安全」，
       右半边是三部热线电话。手机上如果按默认的 cover + 居中裁切，
       两边的文字都会被切掉一半（只剩「客户·共同进步」这种残句）。
       这里改成「按高度缩放 + 靠左对齐」，优先保住左侧主文案；
       右侧电话本来在页头和页脚都有，手机上牺牲掉。 */
    .banner1 {
        /* 按高度缩放 + 靠左：视口越宽看到原图越多。
           501~768px 时可见原图 1000~1536px，主副标题（x 232~918）完整。 */
        height: 150px !important;
        margin: 2em 0 3em !important;
        background-size: auto 150px !important;
        background-position: left center !important;
        background-repeat: no-repeat !important;
    }
    /* 罐体是 375×399 的透明 PNG，桌面靠 top:-30% 溢出到横幅上方做视觉。
       手机上横幅只剩 375px 宽，罐体往右挤就会压住主文案
       （「…成就客户·共同进步」被挡掉一半），而这条横幅的价值就在文案上，
       所以手机上直接不显示罐体。 */
    .banner1 img.gbc {
        display: none !important;
    }

    /* ---- 2b-3b 公司简介页（.about_article / .about_icon 为本页独有） ---- */
    /* 桌面是「左图右文」：.about_article 用 padding-left:42% 给左侧背景图让位。
       手机上 42% ≈ 137px，正文被挤到只剩 189px，整段窄成一条、高度翻倍。
       这里改成「上图下文」：配图移到正文上方居中，正文占满宽度。 */
    .about_article {
        padding: 0 !important;
        /* 先给固定值兜底（老浏览器不认 min()），再用 min() 做自适应 */
        background-size: 200px auto !important;
        padding-top: 240px !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        font-size: 15px !important;
        line-height: 1.9 !important;
    }
    @supports (padding-top: min(72%, 312px)) {
        .about_article {
            /* 图宽取「容器 60%」和 260px 的较小值；
               padding-top 按 474:565 的比例同步算，保证任意屏宽都不留空隙 */
            background-size: min(60%, 260px) auto !important;
            padding-top: min(82%, 312px) !important;
        }
    }
    /* 4 个优势图标：桌面一行 25%，手机上每个只有 82px，改成 2×2 */
    .about_icon > div {
        width: 50% !important;
        margin-bottom: .8em;
    }
    .about_icon img {
        max-width: 120px !important;
        margin: 0 auto !important;
    }
    .subTitle1 h1 {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }
    .subTitle1 p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        padding-top: .6em !important;
    }

    /* ---- 2b-4 工程案例·业绩：重做成单列大图卡片 ---- */
    .case_index {
        margin-top: 2.2em !important;
        /* 「了解更多」在原 DOM 里排在案例卡片之前（左右分栏时的左栏），
           手机上垂直堆叠后它就跑到了卡片上方，语义不对。
           这里把容器底部预留一段，再用绝对定位把按钮挪到卡片下方。 */
        position: relative;
        padding-bottom: 76px !important;
    }
    .case_index .layui-col-md4,
    .case_index .layui-col-md8 {
        width: 100% !important;
    }
    /* 这两列自带 position:relative，会把绝对定位的「了解更多」吸到自己身上，
       必须先置为 static，按钮才能相对整个 .case_index 定位 */
    .case_index .layui-col-md4 {
        position: static !important;
    }
    /* 与下方卡片标题完全重复，手机上隐藏，避免「- xxx」孤立短横线 */
    .case_index ul {
        display: none !important;
    }
    .case_index .-more {
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        width: 170px !important;
        height: 44px !important;
        line-height: 44px !important;
        margin: 0 !important;
        border-radius: 3px;
    }
    .case_index .items .-item {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 14px !important;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .13);
    }
    .case_index .items .-item .-thumb {
        height: 190px !important;
        min-height: 190px !important;
        background-size: cover !important;
    }
    .case_index .items .-item .caption {
        position: static !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: .7em 1em !important;
        background: #033162 !important;
        color: #fff !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
    /* 红蓝交替：第 1、3 个深蓝，第 2、4 个红色 */
    .case_index .items .-item:nth-child(even) .caption {
        background: #C7291D !important;
    }
    .case_index .items .-item .caption h3 {
        height: auto !important;
        font-size: 15px !important;
        font-weight: bold !important;
        line-height: 1.5 !important;
        text-align: left !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 桌面上的箭头图标，卡片化后没有意义 */
    .case_index .items .-item .caption img {
        display: none !important;
    }

    /* ---- 2b-5 关于鑫正：按钮撑满，正文行距收紧 ---- */
    .about_index {
        margin-top: 2.5em !important;
        padding: 2em 0 2.5em !important;
    }
    .about_index .companyName {
        font-size: 19px !important;
        line-height: 1.6 !important;
        padding: 0 .5em;
    }
    .about_index .-article {
        font-size: 14px !important;
        line-height: 1.9 !important;
        padding: 0 .8em;
        text-align: justify;
    }
    .about_index .-article p {
        margin-bottom: .6em !important;
    }
    .about_index .btn {
        display: block !important;
        width: 80% !important;
        max-width: 260px;
        height: 44px !important;
        line-height: 44px !important;
        margin: .5em auto !important;
        border-radius: 3px;
    }

    /* ---- 2b-6 页脚：二维码居中、栏目改两列、联系信息左对齐 ---- */
    footer {
        padding: 2em 0 3.5em !important; /* 底部留白，避免被悬浮按钮压住备案信息 */
        line-height: 1.8 !important;
    }
    footer .layui-col-md2,
    footer .layui-col-md6,
    footer .layui-col-md3 {
        width: 100% !important;
    }
    footer .qrcode {
        width: 110px !important;
        height: auto !important;
        display: block;
        margin: 0 auto 1.2em !important;
    }
    /* 按需求：手机上页脚只保留「产品服务」一栏，其余栏目整栏隐藏 */
    .bottomMenu > div {
        display: none !important;
    }
    .bottomMenu > div:nth-child(2) {
        display: block !important;
        width: 100% !important;
        float: none;
        padding: 0 !important;
        box-sizing: border-box;
        margin-bottom: .6em;
        overflow: hidden;
        text-align: center;
    }
    /* 浏览器支持 :has() 时按链接地址认栏目，避免以后栏目顺序变动就选错 */
    @supports selector(:has(*)) {
        .bottomMenu > div:has(> h3 > a[href*="ProductService"]) {
            display: block !important;
            width: 100% !important;
            float: none;
            padding: 0 !important;
            box-sizing: border-box;
            margin-bottom: .6em;
            overflow: hidden;
            text-align: center;
        }
    }
    .bottomMenu > div h3 a {
        font-size: 15px !important;
        line-height: 2.4em !important;
        margin-bottom: .4em !important;
    }
    .bottomMenu > div a {
        font-size: 12.5px !important;
        line-height: 2em;
        padding: 2px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 产品服务的子链接较多，两列排布避免页脚被拉得过长 */
    .bottomMenu > div > a {
        width: 50%;
        float: left;
        padding: 2px 6px;
        box-sizing: border-box;
    }
    /* 源站页脚里「污水沉淀专用罐」连着出现 3 次（article133/132/131，同名），
       手机上只留第一条。若以后页脚增删了子链接，记得回来核对这个序号。 */
    .bottomMenu > div > a:nth-of-type(n+8) {
        display: none !important;
    }
    .bottomInfo {
        float: none !important;
        width: 100% !important;
        clear: both;
    }
    .bottomInfo > div {
        /* 右侧留出悬浮栏（在线留言/微信/回顶）的位置，避免号码被压住 */
        padding: .6em 52px .6em 2.6em !important;
    }
    .bottomInfo > div i {
        font-size: 22px !important;
        top: 12px !important;
        left: 0 !important;
    }
    .bottomInfo > div div {
        width: 100% !important;
        float: none !important;
    }
    /* 版权 / 备案 / 技术支持那一行居中 */
    footer .layui-col-md6 {
        text-align: center;
        padding: 0 .6em;
        box-sizing: border-box;
    }
    footer .layui-col-md6 > a {
        display: inline-block !important;
        padding: 0 .2em !important;
    }
}

/* ---------- 3. 超小屏（≤400px）再收一点 ---------- */
@media screen and (max-width: 400px) {
    .top {
        padding-right: 50px !important;
    }
    .logo {
        max-width: 180px;
        height: 40px !important;
    }
    .topTel {
        font-size: 13px !important;
    }
    .banner .owl-item > div {
        height: 170px !important;
    }
    .title1 h1,
    .title2 h1 {
        font-size: 20px !important;
    }
    .title1 .en,
    .title2 .en {
        font-size: 12px !important;
    }
    .case_index .items .-item .-thumb {
        height: 160px !important;
        min-height: 160px !important;
    }
    .products_index .-item .-thumb {
        height: 130px !important;
        min-height: 130px !important;
    }
}

/* ---------- 4. 手机（≤500px）：中间广告条换成裁掉空白的专用图 ----------
   原图 banner1_bg.jpg 是 1920×300，文字只占 x 232~918 这一小块，
   左右大片是纯色背景和右侧热线电话区。按原图等比缩到 375px 宽时，
   文字会被一起缩到几乎看不清，还会被裁掉尾巴。
   所以另存了一张只含主副标题的裁切图 images/banner1_bg_m.jpg（686×300），
   手机端用它铺满宽度；padding-top 用百分比保持 686:300 的比例，
   这样任意屏宽下图片都完整、不变形。
   （裁切图和生成脚本见 _tools/crop_banner1.py） */
@media screen and (max-width: 500px) {
    .banner1 {
        height: auto !important;
        padding-top: 43.73% !important; /* 300 / 686 */
        background-image: url("../images/banner1_bg_m.jpg") !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        margin: 1.5em 0 2.5em !important;
    }
}