/*
 * 正凯集团官网移动端适配CSS
 * 创建时间: 2026-03-09
 * 更新时间: 2026-03-10
 * 说明: 响应式设计，支持移动端、平板和桌面端（阶段一：基础适配）
 * 参考恒力集团移动端适配方案
 */

/* ==================== 阶段一：基础设置 ==================== */

/* 全局盒模型与触摸 */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* HTML 基础 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Body 基础 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 320px;
    color: #444;
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif, Arial, '宋体';
    line-height: 1.6;
    word-wrap: break-word;
}

/* 图片响应式（不改变原有 inline 的用图场景） */
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}

/* 链接基础 */
a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* 列表基础 */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 清除浮动 */
.clearfix2::after {
    content: "";
    display: block;
    clear: both;
}

/*
 *颜色通用
  橙色：#f08200
  灰色：#898989  
*/
.orange { color: #f08200; }
.gray { color: #898989; }

.fl { float: left; }
.fr { float: right; }
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }

/* ==================== 阶段一：响应式断点（根字号与主容器） ==================== */

/* 超小屏（如 iPhone 5/SE 等 320px） */
@media (max-width: 375px) {
    html {
        font-size: 13px;
    }
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 小屏手机（如 iPhone 6/7/8 等 375px） */
@media (min-width: 376px) and (max-width: 414px) {
    html {
        font-size: 14px;
    }
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 中屏手机（如 iPhone Plus 等） */
@media (min-width: 415px) and (max-width: 767px) {
    html {
        font-size: 15px;
    }
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 平板竖屏（如 iPad 768px） */
@media (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 16px;
    }
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 平板横屏 / 小笔记本（1024px ~ 1199px） */
@media (min-width: 1024px) and (max-width: 1199px) {
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 标准桌面（1200px ~ 1439px） */
@media (min-width: 1200px) and (max-width: 1439px) {
    .w_1200 {
        width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 大屏桌面（1440px+） */
@media (min-width: 1440px) {
    .w_1200 {
        width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 移动端浮动与布局补充（小屏下取消浮动便于垂直堆叠） */
@media (max-width: 767px) {
    body {
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
    .fl,
    .fr {
        float: none;
    }
    .clearfix2 {
        display: block;
    }
}

/* ==================== 移动端导航栏 ==================== */

@media (max-width:  767px) {
    /* 头部容器适配（压低高度） */
    .header {
        min-width: 100% !important;
        padding: 6px 15px;
        height: auto !important;
        min-height: 44px;
    }

    .header .w_9 {
        width: 100% !important;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        min-height: 32px;
    }

    /* Logo 适配（缩小） */
    .header .logo {
        width: 100px;
        height: auto;
        max-height: 36px;
        padding: 0;
    }

    .header .logo img {
        max-width: 100%;
        max-height: 36px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .logo_th {
        display: none;
    }

    /* 移动端菜单按钮（靠右、缩小） */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 28px;
        position: relative;
        cursor: pointer;
        z-index: 1000;
        margin-left: auto;
        flex-shrink: 0;
        color: #f08200;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

    .mobile-menu-btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #f08200;
        border-radius: 1px;
        transition: opacity 0.25s ease;
    }

    .mobile-menu-btn span:nth-child(1) {
        top: 6px;
    }

    .mobile-menu-btn span:nth-child(2) {
        top: 13px;
    }

    .mobile-menu-btn span:nth-child(3) {
        top: 20px;
    }

    /* 展开时隐藏三条线，显示标准关闭符 × */
    .mobile-menu-btn.active span {
        opacity: 0;
        pointer-events: none;
    }

    .mobile-menu-btn::after {
        content: '×';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.2s ease;
        color: #f08200;
        font-size: 34px;
        font-weight: 300;
        line-height: 1;
    }

    .mobile-menu-btn.active::after {
        opacity: 1;
    }

    /* 隐藏桌面导航与右侧区域，使菜单按钮位于最右侧 */
    .header .nav,
    .header .header_r {
        display: none !important;
    }

    /* 移动端固定头部高度（与 header_fixed 联动时保持 44px 区域） */
    .header.header_fixed {
        height: auto !important;
        min-height: 44px;
        padding: 6px 15px;
    }

    /* 移动端导航：悬浮在页面之上，不挤压下方轮播图；子菜单手风琴式展开/收起 */
    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 52px;
        z-index: 9998;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: max-height 0.35s ease, visibility 0.2s ease;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav.active {
        max-height: 75vh;
        overflow-y: auto;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav .item_li {
        border-bottom: 1px solid #f0f0f0;
    }

    /* 招采平台、廉洁举报：小于 768px 时在侧栏中隐藏，≥768px 时由下方媒体查询显示 */
    .mobile-nav .nav_show_at_768 {
        display: none !important;
    }

    .mobile-nav .item_a {
        display: block;
        padding: 15px 40px 15px 20px;
        color: #333;
        font-size: 15px;
        position: relative;
        outline: none;
        border: none;
        box-shadow: none;
    }
    .mobile-nav .item_a:focus,
    .mobile-nav .item_a.active,
    .mobile-nav .dropdown-menu a:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 仅「有子菜单」的项显示箭头：收起为向下 ▼，展开为向上 ▲ */
    .mobile-nav .item_li.has-dropdown .item_a:after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -3px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #666;
        transition: transform 0.25s ease;
    }

    .mobile-nav .item_li.has-dropdown .item_a.active:after {
        transform: rotate(180deg);
        margin-top: -9px;
    }

    /* 无子菜单的项不显示箭头，保持可点击跳转；覆盖 css.css 的 .dropdown-menu { display:none } */
    .mobile-nav .dropdown-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: #f8f8f8;
        padding-left: 0;
        margin: 0;
        list-style: none;
        transition: max-height 0.3s ease;
        position: static;
        border: none;
        box-shadow: none;
    }

    .mobile-nav .dropdown-menu.active {
        max-height: 500px;
    }

    .mobile-nav .dropdown-menu li {
        border-bottom: 1px solid #eee;
    }

    .mobile-nav .dropdown-menu a {
        display: block;
        padding: 12px 20px 12px 32px;
        font-size: 14px;
        color: #666;
    }

    /* 头部右侧区域适配 */
    .header_r_r {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* 移动端隐藏语言切换 EN */
    .eng_a {
        display: none !important;
    }
}

@media (min-width:  768px) {
    .mobile-menu-btn {
        display: none;
    }

    .mobile-nav {
        display: none;
    }

}

/* 招采平台、廉洁举报：视口 ≥768px 时显示（移动端侧栏 768~1024px 显示；桌面端导航由默认样式显示） */
@media (min-width: 768px) {
    .mobile-nav .nav_show_at_768 {
        display: list-item !important;
    }
}

/* ==================== 阶段三：Banner 轮播（PC/移动端两套 HTML 显隐） ==================== */

/* 桌面端：只显示 PC banner，隐藏移动端 */
@media (min-width:  768px) {
    .banner_m {
        display: none !important;
    }
}

/* 移动端：只显示移动端 banner，隐藏 PC */
@media (max-width:  767px) {
    .banner_pc {
        display: none !important;
    }
}

/* 移动端 Banner：初始单屏 + 不覆盖 SuperSlide 的 li 宽度，避免第三张空白 */
@media (max-width:  767px) {
    .banner_m .ibn {
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    /* 仅插件初始化前生效；插件运行后由 inline 样式控制，勿用 !important 覆盖 li 的 width */
    .banner_m .ibn .bd:not([style*="left"]) {
        display: flex;
        flex-wrap: nowrap;
        width: 300%;
    }
    .banner_m .ibn .bd:not([style*="left"]) li {
        flex: 0 0 33.333333%;
        width: 33.333333%;
    }
}

/* 移动端 Banner 容器宽度（便于 leftLoop 水平滑动） */
@media (max-width: 1023px) {
    .banner_m .ibn {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* 移动端 banner（.banner_m .ibn）各断点高度 */
@media (max-width: 375px) {
    .banner_m .ibn { height: auto !important; min-height: 260px; }
    .banner_m .ibn .bd { height: auto !important; }
    .banner_m .ibnitem { height: auto !important; min-height: 260px; background-size: cover !important; background-position: center !important; }
    .banner_m .ibn .hd { display: none !important; }
    .banner_m .ibn .btn { display: none !important; }
}
@media (min-width: 376px) and (max-width: 414px) {
    .banner_m .ibn { height: auto !important; min-height: 260px; }
    .banner_m .ibn .bd { height: auto !important; }
    .banner_m .ibnitem { height: auto !important; min-height: 260px; background-size: cover !important; background-position: center !important; }
    .banner_m .ibn .hd { display: none !important; }
    .banner_m .ibn .btn { display: none !important; }
}
@media (min-width: 415px) and (max-width: 767px) {
    .banner_m .ibn { height: auto !important; min-height: 260px; }
    .banner_m .ibn .bd { height: auto !important; }
    .banner_m .ibnitem { height: auto !important; min-height: 260px; background-size: cover !important; background-position: center !important; }
    .banner_m .ibn .hd { display: none !important; }
    .banner_m .ibn .btn { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .banner_m .ibn { height: auto !important; min-height: 350px; }
    .banner_m .ibn .bd { height: auto !important; }
    .banner_m .ibnitem { height: auto !important; min-height: 350px; background-size: cover !important; background-position: center !important; }
    .banner_m .ibn .hd { display: none !important; }
    .banner_m .ibn .btn { display: none !important; }
}

/* PC banner（.banner_pc .ibn）桌面保持原样 */
@media (min-width:  768px) {
    .banner_pc .ibn { height: 850px; }
    .banner_pc .ibn .bd { height: 850px; }
    .banner_pc .ibnitem { height: 850px; }
}

/* 新闻区域已拆分为 PC(.news_center_pc) / 移动(.news_center_m)，样式见 mobile-news.css */

/* 关于正凯已拆分为 PC(.about_pc) / 移动(.about_m)，样式见 mobile-about.css */

/* ==================== 底部适配 ==================== */

/* 桌面端：显示 PC 底部 iframe，隐藏移动端 */
@media (min-width:  768px) {
    .footer_iframe_m {
        display: none !important;
    }
}

/* 移动端：隐藏 PC 底部 iframe，显示移动端 foot-mobile.html */
@media (max-width:  767px) {
    .footer_iframe_pc {
        display: none !important;
    }

    .footer_iframe_m {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* 原 footer.html 在 iframe 内，以下仅当页面内存在 .footer 时生效 */
    .footer {
        padding: 30px 15px;
    }

    .footer .w_1200 {
        width: 100% !important;
        padding: 0;
    }
}

/* ==================== 通用组件适配 ==================== */

@media (max-width: 768px) {
    /* 容器宽度适配 */
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding: 0 15px;
        margin: 0 auto;
    }

    /* 间距适配 */
    .box_p50 {
        padding: 30px 0 0;
    }

    .box_m50 {
        margin: 30px 0;
    }

    /* 文字大小适配 */
    h4 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    p, .t_d {
        font-size: 14px;
        line-height: 1.8;
    }

    /* 按钮适配 */
    .white_more_a,
    .gray_more_a {
        display: inline-block;
        padding: 8px 20px;
        font-size: 14px;
    }

    /* 返回顶部按钮：移动端隐藏 */
    .ftool_top {
        display: none !important;
    }
}

/* ==================== 平板端适配 ==================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .w_1200,
    .w_9 {
        width: 100% !important;
        padding: 0 30px;
    }

    .header .w_9 {
        padding: 0 30px;
    }
}

/* ==================== 触摸优化 ==================== */

@media (max-width: 768px) {
    /* 增加触摸区域 */
    a, button, .pro_mune li {
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav a,
    .dropdown-menu a,
    .mobile-nav a {
        padding: 12px 15px;
    }

    /* 移除hover效果，优化触摸体验 */
    .transition_a {
        transition: transform 0.2s ease;
    }

    .transition_a:active {
        transform: scale(0.98);
    }
}

/* ==================== 性能优化 ==================== */

@media (max-width: 768px) {
    /* 减少动画效果 */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }

    /* 隐藏不必要的元素 */
    .hide6,
    .hide9 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

/* ==================== 横屏适配 ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    .mobile-nav.active {
        max-height: 70vh;
    }

    .header {
        padding: 5px 15px;
    }
}

/* ==================== 高分辨率屏幕优化 ==================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        -webkit-font-smoothing: antialiased;
    }
}

/* ==================== 无障碍优化 ==================== */

@media (max-width: 768px) {
    /* 增加对比度（排除移动端导航内链接，避免点击时出现橙色边框） */
    a:focus,
    button:focus {
        outline: 2px solid #f08200;
        outline-offset: 2px;
    }
    .mobile-nav a:focus,
    .mobile-nav .item_a:focus,
    .mobile-nav .item_a.active,
    .mobile-nav .dropdown-menu a:focus {
        outline: none !important;
        border: none !important;
    }

    /* 改善文字可读性 */
    body {
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
}