/* 移动端修复样式 - 专门解决移动端显示问题 */
/* 创建时间：2024-08-26 */

/* ============================================
   1. 轮播图移动端完整显示修复
   ============================================ */
@media all and (max-width: 768px) {
    /* 隐藏所有Swiper分页器（小圆点） */
    .swiper-pagination,
    .swiper-pagination-2,
    .swiper-pagination-bullets {
        display: none !important;
        pointer-events: none !important;
    }
    /* 修复轮播图容器高度 */
    .hero-banner-section {
        height: auto !important;
        min-height: 300px !important;
        max-height: 400px !important;
    }
    
    /* 修复轮播图背景显示 */
    .hero-banner-section .slide-bg {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 确保Swiper容器正确显示 */
    .hero-banner-section .swiper-container {
        height: 100% !important;
    }
    
    .hero-banner-section .swiper-slide {
        height: 100% !important;
    }
    
    /* 调整轮播内容区域 */
    .hero-banner-section .hero-slide {
        min-height: 300px !important;
        max-height: 400px !important;
    }
}

/* ============================================
   2. g-in clearfix 移动端4x2布局修复 - 终极强制版本
   ============================================ */
@media all and (max-width: 768px) {
    /* 关于我们模块的统计数据布局 - 强制4x2布局 */
    body .b-1 ul.g-in.clearfix,
    .b-1 ul.g-in.clearfix,
    .b-1 .g-in.clearfix {
        /* 强制使用Grid布局，4列2行 */
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-gap: 3px !important;
        padding: 0 5px !important;
        margin: 20px auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* 清除所有flex相关属性 */
        flex-wrap: unset !important;
        flex-direction: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
        gap: unset !important;
    }
    
    body .b-1 ul.g-in.clearfix li,
    .b-1 ul.g-in.clearfix li,
    .b-1 .g-in.clearfix li {
        /* 强制Grid子元素样式 */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 55px !important;
        
        /* 彻底移除所有边框 */
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
        outline: none !important;
        
        /* 强制覆盖calc宽度 */
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex: unset !important;
        flex-basis: unset !important;
        
        /* 基础样式 */
        box-sizing: border-box !important;
        padding: 8px 1px !important;
        margin: 0 !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        background: #f9f9f9 !important;
        border-radius: 3px !important;
        position: relative !important;
    }
    
    /* 强制覆盖所有可能的nth-child选择器 */
    body .b-1 ul.g-in.clearfix li:nth-child(n),
    .b-1 ul.g-in.clearfix li:nth-child(n) {
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 确保所有伪类的边框也被移除 */
    .b-1 ul.g-in.clearfix li:first-child,
    .b-1 ul.g-in.clearfix li:last-child,
    .b-1 ul.g-in.clearfix li:nth-child(1),
    .b-1 ul.g-in.clearfix li:nth-child(2),
    .b-1 ul.g-in.clearfix li:nth-child(3),
    .b-1 ul.g-in.clearfix li:nth-child(4),
    .b-1 ul.g-in.clearfix li:nth-child(2n),
    .b-1 ul.g-in.clearfix li:nth-child(2n+1),
    .b-1 ul.g-in.clearfix li:nth-child(odd),
    .b-1 ul.g-in.clearfix li:nth-child(even) {
        border: 0 !important;
        border-width: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-top: 0 !important;
    }
    
    /* 调整数字和文字样式 - 适应4x2布局 */
    body .b-1 ul.g-in.clearfix li h3,
    .b-1 ul.g-in.clearfix li h3 {
        font-size: 20px !important;
        margin: 0 0 2px 0 !important;
        line-height: 1 !important;
        font-weight: normal !important;
    }
    
    body .b-1 ul.g-in.clearfix li p,
    .b-1 ul.g-in.clearfix li p {
        font-size: 9px !important;
        margin: 0 !important;
        line-height: 1.1 !important;
        padding: 0 !important;
    }
}

/* ============================================
   3. 小屏幕设备进一步优化
   ============================================ */
@media all and (max-width: 480px) {
    /* 轮播图高度调整 */
    .hero-banner-section {
        min-height: 200px !important;
        max-height: 300px !important;
    }
    
    .hero-banner-section .hero-slide {
        min-height: 200px !important;
        max-height: 300px !important;
    }
    
    /* g-in clearfix 更小屏幕优化 - 保持4x2布局但调整大小 */
    .b-1 ul.g-in.clearfix {
        padding: 0 5px !important;
        grid-gap: 3px !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 保持4列 */
    }
    
    .b-1 ul.g-in.clearfix li {
        width: 100% !important;
        padding: 8px 2px !important;
        min-height: 50px !important; /* 更小的最小高度 */
        /* 移除边框 */
        outline: none !important;
    }
    
    .b-1 ul.g-in.clearfix li h3 {
        font-size: 18px !important; /* 更小屏幕上的字体 */
    }
    
    .b-1 ul.g-in.clearfix li p {
        font-size: 9px !important; /* 更小屏幕上的字体 */
    }
}

/* ============================================
   4. 确保PC端不受影响
   ============================================ */
@media all and (min-width: 769px) {
    /* PC端保持原有样式 */
    .b-1 ul.g-in.clearfix {
        display: block !important;
    }
    
    .b-1 ul.g-in.clearfix li {
        width: 25% !important;
        float: left !important;
    }
    
    /* 轮播图PC端保持原样 */
    .hero-banner-section .slide-bg {
        background-size: cover !important;
    }
}

/* ============================================
   5. 新闻标题移动端显示修复
   ============================================ */
@media all and (max-width: 768px) {
    /* 修复新闻动态模块 - 主新闻项 */
    .b-2 .bd-y dl dt {
        display: block !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #dcdcdc !important;
    }
    
    /* 日期部分在移动端是隐藏的，保持原设计 */
    .b-2 .bd-y dl dt .dt-z {
        display: none !important;
    }
    
    /* 标题内容区域 */
    .b-2 .bd-y dl dt .dt-y {
        width: 100% !important;
        float: none !important;
        padding-top: 0 !important;
    }
    
    /* 确保主标题显示 */
    .b-2 .bd-y dl dt .dt-y h3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        height: auto !important;
        text-align: left !important;
    }
    
    .b-2 .bd-y dl dt .dt-y h3 a {
        display: block !important;
        visibility: visible !important;
        color: #333 !important;
        text-decoration: none !important;
        font-weight: normal !important;
        /* 限制为2行显示 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-word !important;
    }
    
    /* 日期段落 */
    .b-2 .bd-y dl dt .dt-y p {
        display: block !important;
        font-size: 12px !important;
        color: #999 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 描述内容 */
    .b-2 .bd-y dl dt .dt-y .i {
        display: block !important;
        color: #666 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding-top: 5px !important;
        /* 限制为3行显示 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* 新闻列表项 */
    .b-2 .bd-y dl dd {
        display: block !important;
        font-size: 14px !important;
        height: auto !important;
        line-height: 1.5 !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        position: relative !important;
    }
    
    /* 列表项小圆点 */
    .b-2 .bd-y dl dd em {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        background: #d0d0d0 !important;
        border-radius: 50% !important;
        float: left !important;
        margin: 8px 8px 0 0 !important;
    }
    
    /* 列表项标题链接 */
    .b-2 .bd-y dl dd a {
        display: block !important;
        float: none !important;
        margin-left: 20px !important;
        margin-right: 60px !important;
        color: #333 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        /* 单行显示，超出省略 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* 列表项日期 */
    .b-2 .bd-y dl dd span {
        position: absolute !important;
        right: 0 !important;
        top: 8px !important;
        float: none !important;
        font-size: 12px !important;
        color: #999 !important;
    }
    
    .b-2 .bd-y dl dd a:hover {
        padding-left: 0 !important;
        color: #0055a2 !important;
    }
}

/* ============================================
   6. 企业门类移动端2x2布局修复 - 加强版
   ============================================ */
@media all and (max-width: 768px) {
    /* 企业门类模块容器 - 使用Grid布局确保2x2 */
    .b-3 ul,
    .b-3 ul.clearfix {
        /* 使用Grid布局，更加精确控制 */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: 0 !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* 清除flex相关样式 */
        flex-wrap: unset !important;
        justify-content: unset !important;
    }
    
    /* 企业门类列表项 - 覆盖所有其他样式 */
    .b-3 li,
    .b-3 ul li,
    .b-3 ul.clearfix li {
        /* Grid子元素自动占据一个格子 */
        width: 100% !important;
        max-width: 100% !important;
        flex: unset !important;
        float: none !important;
        display: block !important;
        position: relative !important;
        height: 200px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #0154a4 !important;
    }
    
    /* 强制覆盖nth-child选择器 */
    .b-3 li:nth-child(1),
    .b-3 li:nth-child(2),
    .b-3 li:nth-child(3),
    .b-3 li:nth-child(4),
    .b-3 li:nth-child(n) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 内容包装器样式 */
    .b-3 li .se {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        display: block !important;
    }
    
    /* 链接样式调整 - 使用正确的padding-top值 */
    .b-3 li a,
    .b-3 li .se a {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        color: #fff !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        padding-top: 22% !important; /* 使用原始CSS中的移动端设置 */
        z-index: 2 !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    
    /* 标题样式 */
    .b-3 li h3,
    .b-3 li a h3,
    .b-3 li .se a h3 {
        font-size: 18px !important; /* 使用原始CSS中的移动端字体大小 */
        line-height: 1.3 !important;
        color: #fff !important;
        font-weight: normal !important;
        margin: 0 0 5px 0 !important;
        padding: 0 5px !important;
        text-align: center !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* 英文描述样式 */
    .b-3 li p,
    .b-3 li a p,
    .b-3 li .se a p {
        font-size: 14px !important; /* 使用原始CSS中的移动端字体大小 */
        font-family: Arial !important;
        line-height: 1.3 !important;
        color: #fff !important;
        margin-bottom: 10% !important; /* 使用原始CSS中的移动端设置 */
        padding: 0 5px !important;
        padding-top: 6px !important;
        height: auto !important;
        text-align: center !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* 图片样式 - 确保图片正确显示 */
    .b-3 li img,
    .b-3 li > img,
    .b-3 li .se img,
    .b-3 li .se .image-container img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }
    
    /* 图片容器样式 */
    .b-3 li .image-container,
    .b-3 li .se .image-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 遮罩层样式 */
    .b-3 li .overlay,
    .b-3 li .se .overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2 !important;
        background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%) !important;
    }
    
    /* 移除hover动画效果 */
    .b-3 li:hover .se {
        -webkit-animation: none !important;
        animation: none !important;
    }
}

/* 更小屏幕的优化 */
@media all and (max-width: 480px) {
    .b-3 li {
        height: 150px !important;
    }
    
    .b-3 li h3 {
        font-size: 14px !important;
    }
    
    .b-3 li p {
        font-size: 11px !important;
    }
}

/* ============================================
   7. 通用优化和兼容性处理
   ============================================ */
/* 清除浮动 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* 确保box-sizing正确 */
.b-1 ul.g-in.clearfix,
.b-1 ul.g-in.clearfix li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
    .b-1 ul.g-in.clearfix li {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        cursor: pointer;
    }
}
/* ============================================
   8. 工程案例标题移动端样式优化
   ============================================ */
@media all and (max-width: 768px) {
    /* 工程案例模块的标题区域 - 更紧凑的布局和黑色字体 */
    .b-5 .hd {
        padding: 15px 0 10px 0 !important; /* 减少上下内边距 */
        margin: 0 !important;
        text-align: center !important;
        background: transparent !important;
    }
    
    .b-5 .hd h2 {
        font-size: 24px !important; /* 适当减小字体 */
        color: #333 !important; /* 改为黑色 */
        font-weight: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important; /* 覆盖原有的padding-top */
        line-height: 1.2 !important;
    }
    
    .b-5 .hd p {
        font-size: 14px !important; /* 减小英文字体 */
        font-family: Arial !important;
        color: #999 !important; /* 灰色英文，与其他模块保持一致 */
        text-transform: uppercase !important;
        margin: 5px 0 0 0 !important; /* 减少与标题的间距 */
        padding: 0 !important;
        line-height: 1 !important;
        opacity: 1 !important; /* 移除原有的透明度 */
        font-weight: normal !important; /* 移除粗体 */
    }
    
    /* 同样应用到其他使用.hd标题的模块，保持一致性 */
    .b-1 .hd,
    .b-2 .hd,
    .b-3 .hd,
    .b-4 .hd,
    .b-6 .hd,
    .b-7 .hd {
        padding: 15px 0 10px 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .b-1 .hd h2,
    .b-2 .hd h2,
    .b-3 .hd h2,
    .b-4 .hd h2,
    .b-6 .hd h2,
    .b-7 .hd h2 {
        font-size: 24px !important;
        color: #333 !important;
        font-weight: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }
    
    .b-1 .hd p,
    .b-2 .hd p,
    .b-3 .hd p,
    .b-4 .hd p,
    .b-6 .hd p,
    .b-7 .hd p {
        font-size: 14px !important;
        font-family: Arial !important;
        color: #999 !important;
        text-transform: uppercase !important;
        margin: 5px 0 0 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        opacity: 1 !important;
        font-weight: normal !important;
    }
}
/* ============================================
   9. 移动端隐藏Swiper轮播按钮
   ============================================ */
@media all and (max-width: 768px) {
    /* 隐藏工程案例模块的左右切换按钮 */
    .b-5 .swiper-button-next,
    .b-5 .swiper-button-prev,
    .b-5 .bd .swiper-button-next,
    .b-5 .bd .swiper-button-prev {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 隐藏所有Swiper容器的导航按钮 - 移动端通常使用滑动操作 */
    .swiper-container .swiper-button-next,
    .swiper-container .swiper-button-prev,
    .swiper-container-3 .swiper-button-next,
    .swiper-container-3 .swiper-button-prev {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 确保主轮播图的导航按钮也被隐藏 */
    .hero-banner .swiper-button-next,
    .hero-banner .swiper-button-prev,
    .hero-banner .hero-next,
    .hero-banner .hero-prev {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
/* ============================================
   10. 修复f-y社交图标移动端4x2布局
   ============================================ */
@media all and (max-width: 768px) {
    /* 修复页脚社交图标布局 - 强制4x2网格 */
    .f-y ul.clearfix,
    .f-y ul,
    body .f-y ul.clearfix {
        /* 使用Grid布局实现4x2 */
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: 8px !important;
        flex-direction: unset !important; /* 清除column方向 */
        justify-content: center !important;
        align-items: unset !important;
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
    }
    
    /* 确保每个社交图标占据一个格子 */
    .f-y ul.clearfix li,
    .f-y ul li,
    body .f-y ul.clearfix li {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        float: none !important;
    }
    
    /* 保持图标大小 */
    .f-y ul li.social-item,
    .f-y ul.clearfix li.social-item {
        width: 36px !important;
        height: 36px !important;
    }
    
    .f-y ul li.social-item .social-icon,
    .f-y ul.clearfix li.social-item .social-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

@media all and (max-width: 480px) {
    /* 更小屏幕上也保持4x2布局 */
    .f-y ul.clearfix,
    .f-y ul,
    body .f-y ul.clearfix {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        gap: 6px !important;
        max-width: 200px !important;
    }
    
    /* 调整图标大小 */
    .f-y ul li.social-item,
    .f-y ul.clearfix li.social-item {
        width: 32px !important;
        height: 32px !important;
    }
    
    .f-y ul li.social-item .social-icon,
    .f-y ul.clearfix li.social-item .social-icon {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================
   11. 修复slide-bg被导航栏遮挡的问题
   ============================================ */
/* 由于导航栏是固定定位的，需要给页面主体添加顶部间距 */
/* 导航栏总高度 = top-info-bar(40px) + main-navbar(80px) = 120px */

/* 保留导航相关补丁为空，避免旧版本干扰 */