/* 移动端适配（仅作用于 ≤1024px；桌面端 ≥1025px 完全不加载这些规则）
   独立文件，避免受 common.css 历史未闭合括号影响。
   原则：只在移动端断点内新增规则，绝不修改桌面端现有样式。 */

@media (max-width: 1024px) {

    /* 0. 安全兜底：裁掉任何逃逸出 body 裁切的绝对定位装饰元素 */
    html {
        overflow-x: hidden !important;
    }

    /* 1. 顶部导航：解除 1200px 死宽度 + fixed 溢出，改为静态可堆叠 */
    .header {
        position: static !important;
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #0a1e3c !important;
    }
    .header .header_mid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 12px !important;
    }
    .header .header_mid > .left.site-logo {
        float: none !important;
        text-align: center !important;
    }
    .header .header_mid > .left.site-logo img {
        margin-top: 0 !important;
        max-width: 180px !important;
        height: auto !important;
    }
    .header .header_mid > p {
        float: none !important;
        text-align: center !important;
        margin-top: 6px !important;
        font-size: 15px !important;
    }
    .header .header_mid .tel {
        float: none !important;
        margin-top: 8px !important;
        text-align: center !important;
    }
    .header .header_mid > ul {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }
    .header .header_mid > ul > li {
        float: none !important;
        margin: 0 !important;
        padding: 8px 14px !important;
    }
    .header .header_mid > ul > li > a {
        color: #fff !important;
        font-size: 15px !important;
    }
    /* 隐藏桌面级悬停下拉（移动端无 hover，且绝对定位会溢出） */
    .header .header_mid > ul > li .li_nav4,
    .header .header_mid > ul > li .li_nav5,
    .header .header_mid > ul > li > div[class^="li_nav"] {
        display: none !important;
    }
    .header .header_mid > ul > li > a:before {
        display: none !important;
    }

    /* 2. 内容容器：解除固定宽度，留安全边距 */
    .c,
    .cc,
    .tc {
        max-width: 100% !important;
        width: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 3. 取消浮动，多栏自动单列堆叠 */
    .left,
    .right,
    .fl {
        float: none !important;
        width: 100% !important;
    }

    /* 4. 图片/媒体自适应，杜绝撑破视口 */
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 5. 产品页区块内边距收敛，避免贴边 */
    .pro_list1,
    .pro_list2,
    .pro_list3,
    .pro_list4,
    .pro_list5,
    .pro_list6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .pro_list1_1,
    .tp {
        width: 100% !important;
        float: none !important;
    }

    /* 6. 表格在窄屏可横向滚动，不撑破、不被压成细条 */
    table {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    table td,
    table th {
        white-space: nowrap !important;
    }

    /* 7. 首页轮播(Swiper)：防止相邻/克隆幻灯片横排撑破视口 */
    .swiper-container,
    .banner .swiper-container,
    .swiper-wrapper,
    .banner .swiper-wrapper {
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .swiper-slide,
    .banner .swiper-slide {
        max-width: 100% !important;
    }
    /* 8. 首页装饰箭头动画（纯装饰）在窄屏收敛，避免溢出 */
    .arrow-wrap,
    .arrow-anim {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .header .header_mid > ul > li {
        padding: 7px 10px !important;
    }
    .header .header_mid > ul > li > a {
        font-size: 14px !important;
    }
    .c,
    .cc,
    .tc {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .header .header_mid > .left.site-logo img {
        max-width: 150px !important;
    }
}