/* ============================================================
   移动端响应式样式层 (meiattain.com / /cn)
   说明：本文件只包含 @media 规则。桌面端(>1199px)零改动、零回归。
   引入方式：在 top.php 的 css.css 之后 <link rel="stylesheet"
   href="/static_mzwt/css/responsive.css?v=20260918e">
   ============================================================ */

/* 更新记录：
   - 20260918e：补首页"关于我们"手机端重排（.meizhen1box_right 是 position:absolute;
     right:-260px 的出血图，只改宽度压不掉绝对定位 → 图片压字；改为 static + 回到文档流、
     图片等比缩放，卖点小列 230px*3 改纵向堆叠）
   - 20260918d：补首页 CASES 分类标签行手机端重排（ul padding-left 250/450px +
     li 锁高 20px 导致文字折行后互相重叠 → 取消缩进/解开锁高/改 inline-block）
   - 20260918c：补首页 FEEDBACK 留言表单手机端重排（输入框 400/文本域 1223/按钮 550/区块高 650 → 全部 100%）
   - 20260918b：补手机端页脚重排（放开 box1_left 501px / box2 padding 180px /
     box3_left li 锁高 22px / span 480px / #copy_l 600px 等固定值，文字自动换行不裁切）
   - 20260918a：首屏轮播手机端改用 photo_wap 独立等比轮播 */

/* 手机端专用轮播：桌面端完全隐藏（<=1199px 时由样式接管显示） */
.m_hd_slider { display: none; }

/* 汉堡按钮：桌面隐藏，移动显示 */
.nav_toggle {
    display: none;
    position: absolute;
    top: 22px;
    right: 14px;
    width: 30px;
    height: 22px;
    z-index: 10001;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.nav_toggle span {
    display: block;
    height: 3px;
    background: #333;
    margin: 4px 0;
    border-radius: 2px;
    transition: .3s;
}

/* ===================== 平板 / 手机 (<=1199px) ===================== */
@media screen and (max-width: 1199px) {

    html, body {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; }
    * { box-sizing: border-box; }

    /* 解除所有 1400px 固定宽度容器（含 css.css / en.css 内全部） */
    .main, .meizhen1box, .meizhen4, .bottom, #copy, #sub11, .dibubox,
    #top_zone1, #top_zone2, #header_zone, #nav_zone, #copy_zone, .wz_zone,
    .header_zone, .footer_zone, .zone, .ny_banner, #ny_zlm_zone, .banner,
    .bxslider, #applicationpic, #huandeng {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* 允许横幅/首屏区块自适应高度 */
    .banner, .meizhen1box, .ny_banner { height: auto !important; }
    /* 仅裁剪轮播/横幅，头部保持 visible 以免移动端菜单被截断 */
    .zone, #huandeng, .ny_banner, .banner { overflow: hidden; }

    /* 头部 */
    .header {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        padding: 10px 15px;
        position: relative;
    }
    .logo {
        float: none !important;
        height: auto !important;
        display: inline-block;
    }
    .logo img { max-height: 56px; width: auto; }

    /* 汉堡显示 */
    .nav_toggle { display: block !important; }

    /* 导航 -> 顶部下拉面板 */
    .nav {
        float: none !important;
        margin-left: 0 !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        display: none;
        z-index: 9999;
        box-shadow: 0 8px 22px rgba(0,0,0,.14);
        max-height: 82vh;
        overflow-y: auto;
    }
    .nav.open { display: block; }
    .nav .nLi {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        border-bottom: 1px solid #eee;
    }
    .nav .nLi h3 { margin: 0; line-height: normal; }
    .nav .nLi h3 a {
        display: block;
        padding: 13px 18px;
        font-size: 15px;
        color: #333;
    }
    /* 移动端子菜单常驻展开 */
    .nav .sub {
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: #f7f7f7 !important;
        top: auto !important;
        box-shadow: none;
    }
    .nav .sub li a {
        color: #555 !important;
        padding: 10px 34px !important;
        display: block;
        font-size: 14px;
    }
    .nav .sub .clear { display: none; }

    /* 语言 / 搜索 收进顶栏右侧，与汉堡并排 */
    #other {
        position: absolute;
        top: 20px;
        right: 100px;
        margin: 0 !important;
        z-index: 10000;
    }
    #so {
        position: absolute;
        top: 22px;
        right: 56px;
        z-index: 10000;
    }
    #search_box {
        position: absolute;
        top: 52px;
        right: 14px;
        width: 220px;
        z-index: 10000;
    }

    /* 内容两栏堆叠 */
    .left_wrap, .right_wrap,
    .meizhen1box_left, .meizhen1box_right,
    .meizhen61box3_left, .meizhen61box3_center, .meizhen61box3_right {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .right_wrap { margin-top: 20px; }
    .meizhen1box_left, .meizhen1box_right { margin-bottom: 18px; }
    .meizhen1box { height: auto !important; }

    /* 关于我们 ABOUT US（手机端）
       坑：.meizhen1box_right 桌面端是 position:absolute; top:0; right:-260px 的出血大图(850x650)，
       只改 width 压不掉绝对定位 → 图片仍浮在左侧文字上层，造成"图片压住文字"。
       必须显式 static + right:auto 让它回到文档流、落到文字下方，并等比缩放不裁切。 */
    .meizhen1 { padding: 26px 0 !important; }
    .meizhen1box_right {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 0 !important;
    }
    .meizhen1box_right img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
    }
    .meizhen1box_left1 h2 { font-size: 26px; line-height: 44px; }
    .meizhen1box_left1 h1 { font-size: 19px; line-height: 30px; }
    .meizhen1box_left1 h3 { font-size: 14px; line-height: 26px; margin-top: 12px; }
    /* 三个卖点小列：桌面 230px*3 并排，手机端改整宽纵向堆叠 */
    .meizhen1box_left2 { margin-top: 16px; }
    .meizhen1box_left2 ul {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    .meizhen1box_left2 ul li span { margin-left: 10px; }

    /* 产品网格 4 -> 2（同时压掉 custom.js 对内层列表设置的内联宽度） */
    .tulist, .tulist_02 { width: 100% !important; max-width: 100% !important; }
    .tulist li { width: 50% !important; }
    .tulist li .pic img { width: 100%; }

    /* 案例网格 3 -> 2（同时压掉 custom.js 对 .tuwenlist2 设置的 +20px 内联宽度） */
    .tuwenlist2 { width: 100% !important; max-width: 100% !important; }
    .tuwenlist2 li {
        width: calc((100% - 20px) / 2) !important;
        height: auto !important;
    }
    .tuwenlist2 li:nth-child(3n) { margin-right: 20px; }
    .tuwenlist2 li:nth-child(2n) { margin-right: 0 !important; }

    /* ==========================================================
       首屏轮播（手机端）
       电脑端 jssor 固定 1920x800 且缩放逻辑会走 cover 策略，
       手机上无法等比缩小（实测渲染仍为 1920x800，只露出左上角）。
       故手机端直接隐藏 jssor，改用后台"手机端轮播图"(photo_wap)，
       按图片原始比例等比缩放，不裁切。
       ========================================================== */
    #jssor_1 { display: none !important; }
    #huandeng { height: auto !important; overflow: hidden !important; }

    .m_hd_slider {
        display: block;
        position: relative;
        width: 100%;
        background: #f2f2f2;
        line-height: 0;
    }
    .m_hd_track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .m_hd_track::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .m_hd_slide {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .m_hd_slide a { display: block; }
    /* 关键：等比缩放，完整显示不裁切 */
    .m_hd_slide img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }
    /* 圆点指示 */
    .m_hd_dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        z-index: 5;
        text-align: center;
        line-height: 0;
    }
    .m_hd_dots i {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin: 0 4px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .55);
        box-shadow: 0 0 3px rgba(0, 0, 0, .35);
        cursor: pointer;
    }
    .m_hd_dots i.on { background: #fff; }

    /* 联系页内联双栏 -> 堆叠 */
    [style*="width:650px"], [style*="width:500px"] {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    /* ==========================================================
       页脚（手机端重排）
       原布局为固定宽浮动：#meizhen6 高 462px、box1_left 501px、
       box2 ul padding-left 180px、box3_left 700px、
       box3_left li 锁高 22px、其 span 固定 480px 浮左 → 长文字超出被裁。
       这里全部放开宽度/高度、去掉浮动，让文字自动换行、完整显示。
       ========================================================== */
    .meizhen6 { height: auto !important; padding: 24px 0 12px; }

    /* 第一行：logo + 快速联系方式 */
    .meizhen61box1 { height: auto !important; }
    .meizhen61box1_left {
        width: 100% !important;
        float: none !important;
        padding: 0 14px !important;
        text-align: center;
    }
    .meizhen61box1_left img {
        max-width: 84% !important;
        height: auto !important;
        display: inline-block;
    }
    .meizhen61box1_right { width: 100% !important; float: none !important; }
    .meizhen61box1_right ul { padding-top: 10px !important; text-align: center; }
    .meizhen61box1_right ul li {
        float: none !important;
        display: inline-block;
        line-height: 24px !important;
        margin-left: 0 !important;
        padding: 0 8px;
        font-size: 13px;
    }

    /* 第二行：页脚导航（原 padding-left:180px + li padding 0 55px 会挤爆） */
    .meizhen61box2 {
        height: auto !important;
        line-height: normal !important;
        padding: 12px 6px;
    }
    .meizhen61box2 ul { padding-left: 0 !important; text-align: center; }
    .meizhen61box2 ul li {
        float: none !important;
        display: inline-block;
        padding: 5px 10px !important;
        background: none !important;
        font-size: 14px;
        line-height: 1.6;
    }

    /* 第三行：联系信息 —— 放开固定 480px 与锁死高度 */
    .meizhen61box3_left {
        width: 100% !important;
        float: none !important;
        padding: 0 14px !important;
        text-align: left;
    }
    .meizhen61box3_left ul { padding-top: 16px !important; }
    .meizhen61box3_left ul li {
        height: auto !important;
        line-height: 20px !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
    }
    .meizhen61box3_left ul li span {
        width: auto !important;
        float: none !important;
        display: block !important;
        margin-left: 42px;                 /* 让出左侧圆形图标位 */
        font-size: 13px;
        line-height: 20px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .meizhen61box3_left ul li font {
        float: left !important;
        width: 22px; height: 22px; line-height: 22px;
        margin-right: 20px;
    }

    /* 二维码 */
    .meizhen61box3_center {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        text-align: center;
    }
    .meizhen61box3_center dl { margin-top: 12px; }
    .meizhen61box3_center dl dt {
        display: inline-block;
        height: auto !important;
        background: none;
        padding: 0;
    }
    .meizhen61box3_center dl dt img { max-width: 150px; height: auto; }

    /* 客服热线 + 社交 */
    .meizhen61box3_right {
        width: 100% !important;
        float: none !important;
        text-align: center;
        padding-top: 14px;
    }
    .meizhen61box3_right h2 { text-align: center; }
    .meizhen61box3_right h2 font {
        float: none !important;
        display: inline-block;
        width: auto !important;
        margin-right: 6px;
    }
    .meizhen61box3_right h2 span {
        display: inline !important;
        width: auto !important;
        float: none !important;
    }
    .meizhen61box3_right h3 { font-size: 22px; line-height: 40px; }

    /* 版权行（#copy_l 原 600px 浮左） */
    #copy_zone {
        height: auto !important;
        min-width: 0 !important;
        padding: 10px 0;
    }
    #copy_l, #copy_r {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        line-height: 22px !important;
        padding: 0 14px;
    }
    #copy_l { font-size: 12px; }

    /* ==========================================================
       首页「FEEDBACK」留言表单（原固定宽：.meizhen5 高 650、
       .meizhen5box 宽 1233、.indexitext 输入框 400、
       .indexitext2 文本域 1223、.indexfbtn 按钮 550）
       → 手机上全部拉满，输入框纵向堆叠。
       ========================================================== */
    .meizhen5 {
        height: auto !important;
        padding: 30px 15px 40px;
        background-size: cover;
    }
    .meizhen5box { width: 100% !important; max-width: 100% !important; }
    .meizhen5box h2 { font-size: 26px; line-height: 44px; margin-bottom: 16px; }
    .meizhen5box ul li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
    .indexitext { width: 100% !important; }
    .indexitext2 { width: 100% !important; height: 140px !important; }
    .indexfbtn { width: 100% !important; }
    .meizhen5box h3 { margin-top: 12px; }

    /* ==========================================================
       首页「CASES」分类标签行（.slideBox2 .hd .hd ul li）
       原样式（css.css + en.css / zh_cn.css）：
         ul{padding-left:250px（EN）/ 450px（CN）}
         li{float:left; height:20px; line-height:20px;
            font-size:18px; padding:0 30px 0 30px}
       → 375 屏扣掉 250px 左缩进只剩 125px，而单个标签自身就 150px+，
         文字被迫折行，但 li 高度被锁死 20px，溢出的第二行字直接压到
         下一个标签上 → 就是"CASES 下面文字重叠"。
       → 手机上取消左缩进、解开锁高、标签改 inline-block 自适应换行。
       仅首页使用（productshow 用的是 .slideBox20，不受影响）。
       ========================================================== */
    .slideBox2 .hd {
        height: auto !important;
        overflow: visible !important;
    }
    .slideBox2 .hd ul {
        padding-left: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        text-align: center;
        font-size: 0;                 /* 消除 inline-block 之间的空白间隙 */
    }
    .slideBox2 .hd ul li {
        float: none !important;
        display: inline-block;
        vertical-align: top;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.7 !important;
        font-size: 14px !important;
        padding: 3px 8px !important;
        margin: 3px 2px !important;
        white-space: nowrap;
    }
    .slideBox2 .hd ul li a { display: inline-block !important; }
    .slideBox2 .on:after { display: none !important; }   /* 手机端去掉选中三角，避免错位 */

    /* 隐藏次要装饰 */
    .side, .sidetop, .sidebox { display: none !important; }
}

/* ===================== 手机 (<=640px) ===================== */
@media screen and (max-width: 640px) {

    .header { padding: 8px 12px; }
    .nav_toggle { top: 18px; right: 12px; }
    #other { top: 16px; right: 64px; }
    #so { top: 18px; right: 38px; }
    #search_box { width: 180px; top: 48px; }

    .left_wrap, .right_wrap,
    .meizhen1box_left, .meizhen1box_right,
    .meizhen61box3_left, .meizhen61box3_center, .meizhen61box3_right {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 产品 2 -> 1 */
    .tulist li { width: 100% !important; }

    /* 案例 2 -> 1 */
    .tuwenlist2 li {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .tuwenlist2 li:nth-child(3n) { margin-right: 0; }

    .ny_banner { min-height: 120px; }
}