/* ===================== 响应式样式总览 ===================== */
/* 1. 移动端 (≤767px)：核心布局+各模块样式适配 */
/* 2. 平板小屏 (≤991px)：弹窗/内容模块适配 */
/* 3. PC端 (≥768px)：隐藏移动端元素+基础布局 */
/* 4. 不同PC宽度区间：导航数量控制+证书图片高度适配 */

/* ===================== 1. 移动端适配 (max-width: 767px) ===================== */
@media (max-width: 767px) {
    /* 头部导航：logo居中 + 搜索/菜单按钮固定定位 */
    .layui-header .layui-container {
        justify-content: center !important; /* 强制logo居中 */
        position: relative; /* 作为子元素绝对定位容器 */
    }
    .logo {
        margin-right: 0 !important; /* 清空PC端margin，确保居中 */
    }
    #header-nav-pc {
        display: none; /* 隐藏PC端导航 */
    }
    #header-more-pc {
        display: none !important; /* 隐藏PC端更多按钮 */
    }

    /* 移动端搜索按钮 */
    #header-search {
        display: block !important;
        position: absolute;
        top: 50%;
        right: 20px; /* 给菜单按钮预留空间 */
        transform: translateY(-50%);
        margin-left: 0;
    }

    /* 移动端菜单按钮 + 下拉菜单 */
    #header-more-mob {
        display: block !important;
        position: absolute; /* 脱离文档流，不影响logo居中 */
        top: 50%;
        left: 20px;
        transform: translateY(-50%); /* 垂直居中 */
        font-size: 20px;
        cursor: pointer;
        z-index: 10000;
    }
    #header-menu-mob {
        display: none;
        position: fixed;
        top: 60px; /* 与header高度对齐，贴在下方 */
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e6e6e6;
        padding: 10px;
        z-index: 9999;
    }

    /* 头部层级：避免被遮挡 */
    .layui-header {
        z-index: 999999999 !important;
    }

    /* 产品模块适配 */
    main .product-tit {
        font-size: 12px !important;
        line-height: 20px !important;
        width: 350px !important;
    }
    main .product-tit-big {
        font-size: 25px;
    }
    product-box .layui-tabs-header img {
        width: 60px !important;
    }
    product-box .layui-tabs-header {
        height: 100px !important;
    }
    product-box .layui-tabs-header li {
        font-size: 14px !important;
        color: #a9a9b3 !important;
    }
    product-box .layui-tabs-header .layui-this,
    product-box .layui-tabs-header li:hover {
        font-size: 14px !important;
        color: #1e429f !important;
    }
    product-box .layui-tabs-body h3 {
        font-size: 16px !important;
    }
    product-box .layui-tabs-body img {
        max-height: 120px !important;
    }

    /* 专家模块适配 */
    expert-box h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    expert-box li div {
        display: -webkit-box !important;
        -webkit-line-clamp: 6 !important; /* 限制显示6行 */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important; /* 隐藏超出内容 */
        text-overflow: ellipsis !important; /* 显示省略号 */
    }
    expert-box li img {
        width: 80% !important;
    }

    /* 新闻模块适配 */
    news-box .layui-tabs-body .layui-col-xs2 {
        width: 25% !important;
    }
    news-box .layui-tabs-body .layui-col-xs10 {
        width: 75% !important;
    }
	news-box .layui-tabs-header {
	    text-align: center !important;
	}
    news-box .layui-tabs-header li {
		font-size: 16px  !important;
    }
	news-box .layui-tabs-header li:hover {
	    color: #1e429f;
	    font-size: 16px;
	}
	

    /* 公共模块：PC/移动端元素切换 */
    .cf-pc,
    .footer-pc,
    .product-show-pc {
        display: none !important;
    }
    .cf-mob,
    .footer-mob,
    .product-show-mob {
        display: block !important;
    }

    /* 证书模块适配 */
    cert-box li img,
    .cert img {
        height: 200px !important;
    }
    cert-box .cert {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    /* 标语模块适配 */
    slogan-box {
        height: 120px !important;
    }
    slogan-box h2 {
        font-size: 20px !important;
    }
    slogan-box p {
        font-size: 12px !important;
        margin-top: 5px !important;
    }

    /* 表格适配 */
    .layui-table {
        width: 100% !important;
        position: static !important;
    }
}

/* ===================== 2. 平板小屏适配 (max-width: 991px) ===================== */
@media (max-width: 991px) {
    /* 弹窗iframe样式：取消圆角 */
    .layui-layer-iframe,
    .layui-layer-iframe .layui-layer-content iframe,
    .layui-layer-iframe .layui-icon {
        border-radius: 0;
    }

    /* 内容模块：PC/移动端元素切换 */
    content-box .news-pc,
    content-box .jm-pc {
        display: none !important;
    }
    content-box .new-mob,
    content-box .jm-mob {
        display: block !important;
    }

    /* 证书模块边距适配 */
    content-box .cert {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* ===================== 3. PC端基础样式 (min-width: 768px) ===================== */
@media (min-width: 768px) {
    /* 隐藏移动端元素 */
    #header-more-mob,
    #header-menu-mob {
        display: none !important;
    }

    /* 确保PC端搜索入口显示 */
    #header-search {
        display: block !important;
    }

    /* 标语模块高度 */
    slogan-box {
        height: 400px !important;
    }
}

/* ===================== 4. PC端不同宽度区间适配 ===================== */
/* 4.1 1200px ≤ 宽度 < 1400px：显示7个导航，隐藏第8个及以后 */
@media (max-width: 1399px) and (min-width: 1200px) {
    #header-nav-pc .layui-nav-item:nth-child(n+8) {
        display: none;
    }
    #header-more-pc {
        display: block;
    }
    cert-box li img,
    .cert img {
        height: 350px !important;
    }
}

/* 4.2 992px ≤ 宽度 < 1200px：显示5个导航，隐藏第6个及以后 */
@media (max-width: 1199px) and (min-width: 992px) {
    #header-nav-pc .layui-nav-item:nth-child(n+6) {
        display: none;
    }
    #header-more-pc {
        display: block;
    }
    cert-box li img,
    .cert img {
        height: 300px !important;
    }
}

/* 4.3 768px ≤ 宽度 < 992px：显示3个导航，隐藏第4个及以后 */
@media (max-width: 991px) and (min-width: 768px) {
    #header-nav-pc .layui-nav-item:nth-child(n+4) {
        display: none;
    }
    #header-more-pc {
        display: block;
    }
    cert-box li img,
    .cert img {
        height: 200px !important;
    }
}

/* 4.4 宽度 ≥1400px：显示8个导航，隐藏第9个及以后 */
@media (min-width: 1400px) {
    #header-nav-pc .layui-nav-item:nth-child(n+9) {
        display: none;
    }
    #header-more-pc {
        display: block; /* 保持显示逻辑，可按需调整 */
    }
    cert-box li img,
    .cert img {
        height: 400px !important;
    }
}