/* 响应式设计样式 - 全面优化 */
/* 媒体查询适配不同屏幕尺寸 */
/* 基础响应式设置 */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 移动端优先的响应式设计 */
/* 汉堡菜单样式 - 移动设备 */
.hamburger-menu {
    display: block;
    width: 44px;
    height: 44px;
    background: #333;
    color: white;
    text-align: center;
    line-height: 44px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    position: fixed;
    top: 10px;
    right: 10px;
}

/* 移动端优先的响应式设计 */
@media screen and (max-width: 768px) {
    /* 显示汉堡菜单 */
    .hamburger-menu {
        display: block;
    }

    /* 默认隐藏导航菜单 */
    .navMain ul {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        background: #333;
        z-index: 999;
    }

    /* 菜单展开时显示 */
    .navMain ul.active {
        display: block;
    }
    /* 调整容器宽度 */
    .w {
        width: 100% !important;
        padding: 0 10px;
        margin: 0 !important;
    }
    
    /* 调整导航 */
    .navMain {
        position: relative !important;
        width: 100% !important;
        padding-left: 0 !important;
        background: #333 !important;
        height: 64px !important;
    }

    .navMain .navBox {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .menu_nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background: #333;
        flex-direction: column;
        z-index: 999;
    }

    .menu_nav.active {
        display: flex;
    }
    
    .menu_nav dl {
        width: 100% !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .menu_nav dt, .menu_nav dd {
        padding: 15px 10px !important;
    }

    .menu_nav a {
        color: white !important;
        text-decoration: none;
    }
    
    /* 调整轮播图高度 */
    .adTop {
        height: auto !important;
    }
    
    .ad_banner {
        height: auto !important;
        max-height: 300px;
        overflow: hidden;
    }
    
    .ad_banner img {
        max-width: 100%;
        height: auto;
    }
    
    .ad_banner .adBox {
        position: relative !important;
    }
    
    .ad_banner li {
        float: none !important;
    }
    
    .adBtn {
        top: auto !important;
        bottom: 10px;
        width: 100% !important;
        text-align: center;
    }
    
    /* 调整服务项目布局 */
    .serverObject .bd dl {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 20px;
    }
    
    /* 调整关于我们区域 */
    .newsAbout,
    .usAbout {
        float: none !important;
        width: 100% !important;
    }
    
    .usAbout {
        border-left: none !important;
        padding-left: 0 !important;
        padding-top: 20px;
        border-top: 1px dashed #ccc;
        background-image: none !important;
    }
    
    /* 调整新闻列表 */
    .newsAbout li {
        width: 100% !important;
        padding-left: 60px !important;
    }
    
    /* 隐藏一些不适合移动端的元素 */
    .search,
    .browserTips {
        display: none !important;
    }
    
    /* 调整图片大小 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 调整页脚 */
    .container_f .copyRight {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        text-align: center;
        padding: 10px 0;
    }
    
    /* 调整浮动元素 */
    .fl,
    .fr {
        float: none !important;
        display: block;
    }
    
    /* 调整按钮样式 */
    .newsAbout .btn {
        top: auto !important;
        bottom: 10px;
    }
}

/* 平板设备 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .w {
        width: 100% !important;
        padding: 0 20px;
        margin: 0 auto !important;
    }
    
    /* 调整服务项目布局 */
    .serverObject .bd dl {
        width: 45% !important;
        margin-left: 3.33% !important;
    }
    
    .serverObject .bd dl:nth-child(odd) {
        margin-left: 0 !important;
    }
    
    /* 调整轮播图高度 */
    .adTop {
        height: 350px !important;
    }
    
    .ad_banner {
        height: 350px !important;
    }
    
    .ad_banner img {
        max-width: 100%;
        height: auto;
    }
}

/* 大屏幕设备 */
@media screen and (min-width: 1025px) {
    .w {
        width: 960px !important;
        max-width: 100%;
    }
}

/* 通用响应式调整 */
.clearboth {
    clear: both;
}

/* 优化图片加载 */
img {
    max-width: 100%;
    height: auto;
}

/* 调整滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 适配高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 可以在这里添加高分辨率屏幕的特定样式 */
    .icon,
    .iconService {
        background-size: 200px 400px; /* 示例：将图标尺寸调整为原来的两倍 */
    }
}

/* 确保在所有设备上内容可读性 */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* 触摸友好的按钮大小 */
button,
.btn,
.aSubmit {
    min-height: 44px;
    min-width: 44px;
}

/* 响应式表格（如果网站有表格） */
table {
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 768px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        margin: 0 0 1rem 0;
    }
    
    tr:nth-child(odd) {
        background: #f9f9f9;
    }
    
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        position: absolute;
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
}