/* 睡小兔官网智能响应式方案 - 仅移动端生效 */

/* 桌面端保持原样 - 移动端强制响应式 */

/* 移动端检测：仅在屏幕宽度 <= 768px 时生效 */
@media screen and (max-width: 768px) {
    /* 移动端强制响应式设置 */
    * {
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        min-width: 0 !important;
    }

    /* 容器宽度自适应 */
    .cont, .container, .wrapper, .main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        /*padding: 0 10px !important;*/
    }

    /* 横幅图片响应式 */
    .banner, .banner_bg {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .banner_bg img, .banner img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* 移动端图片切换 */
    .show_b {
        display: none !important;
    }
    
    .show_s {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 内容区域优化 */
    .content {
        width: 100% !important;
        max-width: 100% !important;
        /*padding: 15px !important;*/
        margin: 0 auto !important;
    }
    
    .content1 {
        display: none !important;
    }

    /* 标题文字响应式 */
    .banner_title img {
        width: 90% !important;
        height: auto !important;
        max-width: 300px !important;
    }

    /* 按钮响应式 */
    .m-button, .btn, .button {
        width: 90% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        /*display: block !important;*/
        /*padding: 15px 20px !important;*/
        font-size: 16px !important;
    }

    /* 列表布局 */
    .banner1_ul, .banner1_icons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 20px 0 !important;
    }

    .banner1_ul li, .icons_i {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        padding: 10px !important;
    }

    /* 网格布局 */
    .content_report, .report_box {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .report_i {
        width: 100% !important;
        margin: 0 !important;
    }

    .report_i img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }

    /* 字体大小优化 */
    body {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    p { font-size: 14px !important; }

    /* 间距调整 */
    .section-spacing {
        padding: 30px 0 !important;
    }

    /* 移除固定像素宽度 */
    [style*="width:"][style*="px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 弹性布局 */
    .flex-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 表格响应式 */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* 对话框响应式 */
    .el-dialog {
        width: 90% !important;
        max-width: 400px !important;
        margin: 10vh auto !important;
    }

    /* 导航栏优化 */
    .nav, .navbar {
        width: 100% !important;
        padding: 10px !important;
    }

    /* 页脚优化 */
    .footer {
        width: 100% !important;
        padding: 20px 10px !important;
    }
}

/* 平板端优化：768px-1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .cont, .container {
        width: 95% !important;
        max-width: 960px !important;
        margin: 0 auto !important;
    }

    .banner_bg img {
        width: 100% !important;
        height: auto !important;
    }

    .content {
        width: 100% !important;
        padding: 20px !important;
    }
    .content1{
        display: none !important;
    }
}

/* 桌面端：完全保持原样 - 不做任何修改 */
@media screen and (min-width: 1025px) {
    /* 桌面端样式完全不受影响 */
    .show_b {
        display: block !important;
    }
    
    .show_s {
        display: none !important;
    }
}

/* 特殊处理：确保桌面端图片正常显示 */
@media screen and (min-width: 769px) {
    .banner_bg img.show_b {
        display: block !important;
        width: auto !important;
        height: auto !important;
    }
    
    .banner_bg img.show_s {
        display: none !important;
    }
}

/* 防止样式冲突的兜底方案 */
@media screen and (min-width: 769px) {
    /* 重置移动端强制样式 */
    * {
        /*max-width: none !important;*/
    }
    
    .cont, .container, .banner, .banner_bg {
        width: auto !important;
        max-width: none !important;
    }
}