/* ============================================================
   mobile-fix.css — 手机端适配补充（桌面端零影响）
   原站 responsive.css 已覆盖大部分区块；本文件只做三件事：
   1) 手机端导航：汉堡按钮 + 下拉菜单（原站缺失对应 DOM，这里补齐样式）
   2) 首页"产品中心"：原 responsive.css 将 .sy_acs4 整块隐藏，改为正常展示
   3) 内页细节兜底：图片不超宽、子导航间距、链接换行等
   所有规则都在 @media (max-width:768px) 内，>768px 完全不生效。
   ============================================================ */

@media all and (max-width: 768px) and (min-width: 0px) {

    /* ---------- 0. 移动端搜索框（嵌在蓝色导航条内，与蓝底同风格；桌面端由文件末尾规则隐藏） ---------- */
    header .m_search {
        display: block !important;
        position: absolute;
        left: 12px;
        top: 5px;
        width: 62%;
        max-width: 260px;
        height: 32px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 16px;
    }
    header .m_search input[type="text"] {
        width: 76%;
        height: 30px;
        padding: 0 0 0 14px;
        background: none;
        border: 0;
        outline: 0;
        color: #fff;
        font-size: 14px;
        vertical-align: top;
        box-sizing: border-box;
    }
    header .m_search input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.72); }
    header .m_search input[type="submit"] {
        width: 38px;
        height: 30px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.6' y1='15.6' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat center / 17px 17px;
        border: 0;
        cursor: pointer;
        vertical-align: top;
    }

    /* ---------- 0.1 头部 logo 居中放大 ---------- */
    .headTop .head_left { float: none !important; text-align: center; }
    .headTop .head_left img {
        display: inline-block;
        width: 310px !important;
        max-width: 86% !important;
        height: auto !important;
    }

    /* ---------- 1. 手机端导航 ---------- */
    header .header_wrapper {
        position: relative !important;
        top: 0 !important;
        height: 42px;
        background: #172a88;
        border-top: 0;
    }
    a.menu_toggler {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        border: 0;
        width: 26px;
        height: 22px;
        display: block !important;
        background: url("menu_btn.png") no-repeat 0 0;
    }
    a.menu_toggler.on { background-position: 0 -22px; }
    header .mobile_menu_wrapper {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 42px;
        z-index: 999999;
        background: #172a88;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
        max-height: 72vh;
        overflow-y: auto;
    }
    header .mobile_menu_wrapper.open { display: block !important; }
    header .mobile_menu { margin: 0 !important; padding: 0 !important; list-style: none; }
    header .mobile_menu li { border-bottom: 1px solid rgba(255, 255, 255, .14); width: 100% !important; }
    header .mobile_menu li a {
        display: block;
        padding: 11px 14px !important;
        text-align: left !important;
        color: #fff !important;
        line-height: 20px !important;
        font-size: 14px !important;
        text-decoration: none;
    }
    header .mobile_menu li a:hover,
    header .mobile_menu li a.current { background: #0d8ad2 !important; color: #fff !important; }
    header .mobile_menu .sub-menu {
        display: block !important;
        visibility: visible !important;
        list-style: none;
        margin: 0;
        padding: 0 0 6px;
        background: #101f66;
    }
    header .mobile_menu .sub-menu li { border-bottom: 0; }
    header .mobile_menu .sub-menu li a {
        padding: 8px 14px 8px 30px !important;
        font-size: 13px !important;
        color: #cdd6f4 !important;
    }
    header .mobile_menu .sub-menu li a:hover { color: #fff !important; }
    header .mobile_menu li.mm-langs {
        padding: 10px 14px;
        text-align: left;
        color: #cdd6f4;
        font-size: 13px;
        border-bottom: 0;
    }
    header .mobile_menu li.mm-langs a {
        display: inline;
        padding: 0 6px 0 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    /* ---------- 2. 首页"产品中心"（原 responsive.css 隐藏了整块） ---------- */
    .sy_acs4 {
        display: block !important;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 14px 0 8px;
        overflow: hidden;
    }
    .sy_acs4 .mainWarp { width: 100%; padding: 0 12px; box-sizing: border-box; }
    .sy_acs4 h3 { margin-bottom: 4px; }
    .pc-tabs { padding: 2px 0 12px; }
    .pc-tabs a { margin: 0 10px 6px 0; font-size: 14px; white-space: nowrap; }
    .pc-tabs a:last-child { margin-right: 0; }
    .piclist0 { margin: 0 auto; text-align: center; overflow: hidden; }
    .piclist0 li {
        display: inline-block;
        float: none !important;
        width: 46% !important;
        padding: 0 5px 16px;
        box-sizing: border-box;
        vertical-align: top;
    }
    .piclist0 li a { display: block; }
    .piclist0 li img { width: 100% !important; height: auto !important; max-width: 220px; }
    .piclist0 p { width: 100% !important; height: auto !important; padding: 6px 0 0; }
    .pc-allimg { padding: 2px 0; }
    .pc-allimg img { max-width: 100%; height: auto; }
    .pc-noimg { width: 100% !important; max-width: 220px; }
    .sy_acs4 .btn_mr { margin: 0 auto 14px; }

    /* ---------- 4. 首页轮播图（原 responsive.css 在手机端隐藏了整块，这里恢复并压缩高度） ---------- */
    .banner {
        display: block !important;
        width: 100%;
        height: 190px !important;
        margin: 10px auto 0 !important;
        overflow: hidden;
    }
    .banner ul, .banner ul.flicks { width: 10000%; height: 100%; margin: 0; padding: 0; }
    .banner li {
        background-size: cover !important;
        background-position: center !important;
        height: 100% !important;
    }

    /* ---------- 3. 内页细节兜底 ---------- */
    /* logo 尺寸统一由第 0.1 节控制（此处原 200px 规则已并入） */
    /* 搜索框已移入蓝色导航条（.m_search），头部原搜索框隐藏 */
    .headTop .head_search { display: none !important; }
    /* 内页顶部横幅（lv_tree_bg*）：固定 408px 高改为自适应高度 */
    [class*="lv_tree_bg"] {
        height: 150px !important;
        background-size: cover !important;
        background-position: center !important;
        margin: 10px 0 !important;
    }
    /* 产品列表页顶部分类行：去掉固定左缩进，改为可换行 */
    .mypage h3 { padding: 0 12px; box-sizing: border-box; height: auto !important; overflow: visible; line-height: 26px; }
    .mypage h3 a { margin-left: 0 !important; margin-right: 14px; display: inline-block; white-space: nowrap; }
    /* 通用：正文图片不超宽 */
    .pageRight img { max-width: 100%; height: auto; }
    .pageRight .inf { width: 100% !important; margin-left: 0 !important; box-sizing: border-box; padding-top: 10px; }
    /* 电驱轮列表：tab 行可换行、产品图满宽 */
    .edrive-tabs a { margin: 0 10px 6px 0; }
    .edrive-row img { max-width: 100%; height: auto; }
    /* 联系我们两栏信息改单列 */
    .pageRight .contact .item { width: 100% !important; margin: 0 0 16px !important; float: none; }
    .pageRight .contact .item2 { width: 100% !important; }
    /* 荣誉/专利图网格自适应 */
    .pageRight .rongyu li, .pageRight .rongyu2 li { width: 46% !important; margin: 0 4px 16px !important; box-sizing: border-box; }
    .pageRight .rongyu li img, .pageRight .rongyu2 li img { width: 100% !important; height: auto !important; }
    /* 富文本表格不撑破 */
    .pageRight table { max-width: 100%; overflow-x: auto; display: block; }
}

/* 移动端专用导航条搜索框：桌面端（>768px）始终隐藏 */
header .m_search { display: none; }