/* ============================================================
   手机端补救样式（mobile-fix.css）
   作用范围：仅当屏幕宽度 <= 767px 时生效。
   PC 端样式与其他页面原有样式完全不受影响。
   说明：原站点手机访客会被跳到「动态手机版」，改为纯静态后
         该跳转已移除，手机改用响应式主题，此文件用于修补
         窄屏下的头部重叠、产品按钮溢出等排版问题。
   ============================================================ */
@media screen and (max-width: 767px) {
    /* 1. 禁止横向溢出，图片不撑破屏幕 */
    html, body {
        overflow-x: hidden;
    }
    img {
        max-width: 100%;
    }
    .container, .rowFluid {
        max-width: 100%;
    }

    /* 2. 头部：取消固定高度与固定定位，电话信息不再压住首屏标题 */
    .header {
        position: relative !important;
        height: auto !important;
        line-height: 1.5 !important;
        padding-bottom: 4px;
    }
    .header .span2, .header .span7, .header .span3 {
        width: 100% !important;
        float: none !important;
    }
    .header .logo {
        margin: 0 !important;
        padding: 8px 0;
        text-align: center;
        line-height: 0;
    }
    .header .logo img {
        max-height: 46px;
        width: auto;
    }
    .header .tel {
        height: auto !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        text-align: center;
        padding: 2px 10px 8px;
        white-space: normal;
    }

    /* 3. 首页「产品中心」分类按钮：原为固定 999px 宽，改为自适应两列 */
    .proclass {
        width: 100% !important;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .proclass dl {
        width: 50% !important;
    }
    .proclass dl dt {
        height: auto;
        min-height: 32px;
        padding-right: 6px;
        box-sizing: border-box;
    }
    .proclass li {
        height: auto !important;
        min-height: 32px;
        padding-right: 6px;
        box-sizing: border-box;
    }
    .proclass dl dt a, .proclass li a {
        display: block;
        padding: 5px 8px;
        text-align: center;
    }

    /* 4. 产品列表页：原为 1000px 定宽 + 左右分栏，改为竖排、两列产品 */
    .nymain, .posweizhi {
        width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    ul.w_list {
        float: none !important;
        width: 100% !important;
    }
    .w-product {
        float: none !important;
        width: 100% !important;
    }
    ul.w-product-list li.w-pl-unit {
        width: 48.5% !important;
        margin-right: 3% !important;
        box-sizing: border-box;
    }
    ul.w-product-list li.w-pl-unit:nth-child(2n) {
        margin-right: 0 !important;
    }
    ul.w-product-list li.w-pl-unit:nth-child(4n) {
        margin-right: 3% !important;
    }
    .w-pl-unit a .w-pl-pic {
        width: 100% !important;
        height: auto !important;
        line-height: 0 !important;
        padding: 10px 0;
    }
    .w-pl-unit a .w-pl-pic img,
    .w-pl-unit a img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* 5. 产品/文章详情页：侧栏与正文改为上下排列，正文不再被挤出屏幕 */
    .nyleft {
        float: none !important;
        width: 100% !important;
    }
    .textshow {
        float: none !important;
        width: 100% !important;
        padding: 0 6px;
        box-sizing: border-box;
    }
    .textshow .content {
        padding: 10px 4px;
    }
    .textshow .content img,
    .textshow .content table {
        max-width: 100% !important;
        height: auto !important;
    }
    #view_text_21_10_txt {
        width: 100% !important;
        padding: 10px 8px !important;
        line-height: 1.8 !important;
        box-sizing: border-box;
    }
}