/* 
   HYCXPCBA 网站手机端自适应 CSS 优化方案
   适用范围：屏幕宽度小于 768px 的移动设备
*/

/* 1. 基础视口与容器重置 */
@media screen and (max-width: 767px) {
    /* 强制重置所有固定宽度的容器 */
    .max-header, 
    .indexbox, 
    .footer, 
    .w1180, 
    .w1200, 
    .w1300, 
    .nav-info, 
    .top-nav, 
    .menubox, 
    .index-item,
    .container1,
    .hyperchannel {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* 清除浮动布局，改为块级或 Flex 布局 */
    .nav-left, .nav-items, .one-menu li, .index-item > div, .footer-cont > div {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    /* 2. 头部导航优化 */
    .nav-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .nav-items {
        margin-top: 10px;
    }
    
    .nav-items li {
        display: inline-block;
        margin: 5px;
    }

    /* 隐藏 PC 端复杂的菜单，显示移动端适配内容 */
    .menubox {
        overflow-x: auto; /* 允许横向滚动菜单 */
        -webkit-overflow-scrolling: touch;
    }
    
    .one-menu {
        display: flex !important;
        white-space: nowrap;
        width: auto !important;
    }
    
    .one-menu li {
        display: inline-block !important;
        width: auto !important;
        padding: 0 15px !important;
    }

    /* 3. Banner 与 报价区域 */
    .pc_show {
        display: none !important;
    }
    
    .pc_hide {
        display: block !important;
    }

    .banner {
        height: auto !important;
    }

    /* 4. 内容板块优化 (Index Items) */
    .index-item {
        display: flex;
        flex-direction: column;
    }

    /* 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 5. 表格自适应处理 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 6. 页脚优化 */
    .footer-cont {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom {
        padding: 20px 10px !important;
    }

    /* 7. 针对特定 ID 或复杂结构的微调 */
    #QuoteNow {
        width: 100% !important;
        margin-top: 15px;
    }
    
    .quote-box {
        padding: 15px !important;
    }
}

/* 补充：确保 Meta 标签存在 (需在 HTML 中添加) */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> */