/**
 * 文章/内容页响应式样式 (参考70ka.com方案)
 * 核心思路：Flexbox布局 + 1200px断点 + 移动端汉堡菜单 + 清除min-width
 */

/* ============================================
  全局关键修复
  ============================================ */
@media screen and (max-width: 1200px) {
    /* 全局 border-box，根治 width:100% + padding 溢出 */
    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }

    body {
        min-width: initial !important;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    a, div, span, li, article, nav {
        -webkit-tap-highlight-color: transparent;
    }

    /* 头部容器 */
    .index-header {
        min-width: initial !important;
    }

    /* 底部 */
    .pls-footer-inner {
        min-width: initial !important;
    }

    /* 固定宽度容器 */
    .w1400 {
        width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .my1400 {
        width: 100% !important;
    }

    /* 页面主体 */
    .page_abhout {
        margin-bottom: 20px;
        padding: 0;
        margin-top: 0;
    }
}

/* ============================================
  移动端头部 (参考70ka .header-mini)
  ============================================ */
.header-mobile {
    display: none;
}
.mobile-nav, .mobile-nav-mask {
    display: none;
}

@media screen and (max-width: 1200px) {
    /* PC头部 + 广告栏 */
    .index-banner,
    .header .warning {
        display: none !important;
    }

    /* 移动端头部 */
    .header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 12px;
        background: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .hamburger {
        font-size: 24px;
        cursor: pointer;
        color: #333;
        padding: 4px;
        width: 32px;
        text-align: center;
        user-select: none;
    }

    .hamburger.open {
        color: #007dfe;
    }

    .mobile-logo img {
        vertical-align: middle;
    }

    .mobile-login a {
        font-size: 13px;
        padding: 5px 10px;
        border: 1px solid #007dfe;
        border-radius: 4px;
    }

    /* 移动端导航抽屉 */
    .mobile-nav-mask {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 998;
    }

    .mobile-nav-mask.show {
        display: block;
    }

    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: -70%;
        width: 70%;
        max-width: 280px;
        height: 100%;
        background: #fff;
        z-index: 999;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.15);
    }

    .mobile-nav.show {
        left: 0;
    }

    /* 关闭按钮 */
    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
        background: #f8faff;
    }
    .mobile-nav-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
    .mobile-nav-close {
        font-size: 22px;
        color: #999;
        cursor: pointer;
        padding: 4px 8px;
        user-select: none;
    }
    .mobile-nav-close:hover {
        color: #333;
    }

    .mobile-nav ul {
        padding: 20px 0;
    }

    .mobile-nav ul li {
        border-bottom: 1px solid #f5f5f5;
    }

    .mobile-nav ul li a {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
        color: #333;
    }

    .mobile-nav ul li a:hover {
        background: #f8faff;
        color: #007dfe;
    }

    /* 右侧浮动工具栏 - 移动端隐藏 */
    .right-bar {
        display: none !important;
    }
}

/* ============================================
  移动端底部固定按钮：我要回收
  ============================================ */
.mobile-recycle-btn {
    display: none;
}
@media screen and (max-width: 1200px) {
    .mobile-recycle-btn {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 997;
        padding: 12px 16px;
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
        text-align: center;
        text-decoration: none;
    }
    .mobile-recycle-btn span {
        display: block;
        color: #fff;
        height: 42px;
        line-height: 42px;
        background: #007dfe;
        border-radius: 21px;
    }
    /* 页面底部留白，防止按钮遮挡内容 */
    .main-news {
        padding-bottom: 60px !important;
    }
}

/* ============================================
  左侧菜单 → 移动端横向标签式导航
  ============================================ */
@media screen and (max-width: 1200px) {
    .about_le {
        display: none !important;
    }

    .about_le h3 {
        display: none;
    }

    .about_le ul {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        gap: 4px;
    }

    .about_le ul li {
        height: auto !important;
        line-height: 1 !important;
        margin: 0 !important;
        background: none !important;
    }

    .about_le ul li a {
        display: inline-block;
        font-size: 13px;
        padding: 6px 10px;
        height: auto !important;
        background: #F2F2F2;
        border-radius: 4px;
        color: #666;
        border: 1px solid transparent;
    }

    .about_le ul li.current a {
        background: #ECF5FB;
        color: #1996F2 !important;
        border-color: #1996F2;
        font-weight: normal !important;
    }
}

@media screen and (max-width: 480px) {
    .about_le ul {
        gap: 2px;
    }
    .about_le ul li a {
        font-size: 12px;
        padding: 5px 7px;
    }
}

/* ============================================
  右侧内容区
  ============================================ */
@media screen and (max-width: 1200px) {
    .about_ri {
        width: 100% !important;
        float: none !important;
        padding: 4% !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        min-height: auto !important;
        background: #fff;
    }

    .page_h3 h3 {
        font-size: 18px;
        padding-bottom: 10px;
    }
}

/* ============================================
  行业资讯列表 (zixun.html)
  ============================================ */
@media screen and (max-width: 1200px) {
    .timeline-listing li {
        height: auto !important;
        line-height: 1.5 !important;
        padding: 12px 0;
        flex-direction: column;
        gap: 4px;
    }
    .article-info {
        gap: 2px;
    }    
    .timeline-main h5 {
        line-height: 1.5 !important;
        font-weight: 700 !important;
    }
    .page_h3 {
        padding: 0 0 20px 0;
        font-weight: 700;
    }
    .timeline-main {
        padding-left: 20px !important; 
    }    
    .timeline-listing li span a {
        font-size: 15px;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .timeline-listing li span:nth-child(2) {
        float: none !important;
        right: auto !important;
        font-size: 12px;
        color: #999;
    }
}

/* ============================================
  公告列表时间线 (helpfaq/index.html)
  ============================================ */
@media screen and (max-width: 1200px) {
    .timeline-line { left: 40px; }
    .timeline-date { width: 30px; font-size: 13px; padding-right: 20px; }
    .timeline-date span { font-size: 11px; }
    .timeline-main { padding-left: 16px; font-size: 14px; }
    .timeline-main h5 { font-size: 16px !important; }
    .timeline-item { padding-bottom: 25px !important; }
}

/* ============================================
  文章详情页 - 标题层级 (PC + 移动端通用)
  ============================================ */
/* PC端：确保 H1 > H2 > H3 > H4 层级分明 */
.cur-pos {
    padding: 20px 0;
}  
.dyquick-link p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}
.news-content p img {
    border-radius: 15px;
}
.news-content .title {
    font-size: 28px;
    line-height: 1.4;
    color: #333;
}
.details-content h2 {
    font-size: 22px;
    line-height: 1.5;
    color: #222;
}
.details-content h3 {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
}
.details-content h4 {
    font-size: 16px;
    line-height: 1.5;
    color: #444;
}

/* ============================================
  文章详情页 (show_zixun.html)
  PC端保持原有float布局不变，移动端覆盖为flex
  ============================================ */
@media screen and (max-width: 1200px) {
    .main-news {
        display: flex;
        flex-direction: column;
        padding: 0 0 20px 0;
        gap: 0;
    }

    .main-news .news-content {
        width: 100% !important;
        float: none !important;
        margin-bottom: 0;
        box-shadow: none !important;
        border-radius: 8px !important;
    }

    .news-content .title {
        font-size: 22px;
        line-height: 1.4;
        padding-bottom: 10px;
        color: #333;
    }

    .zixun-bottom .abs {
        font-size: 12px !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid #eee !important;
    }

    .news-content .details-content {
        font-size: 15px;
        line-height: 1.8;
        color: #333;
    }

    .detail p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    /* 文章内标题层级：H1(22px) > H2(19px) > H3(17px) > H4(15px) */
    .details-content h2 {
        font-size: 19px;
        line-height: 1.5;
        color: #222;
    }
    .details-content h3 {
        font-size: 17px;
        line-height: 1.5;
        color: #333;
    }
    .details-content h4 {
        font-size: 15px;
        line-height: 1.5;
        color: #444;
    }

    /* 侧边栏 → 文章下方 */
    .main-news .sidebar {
        width: 100% !important;
        min-width: auto !important;
        float: none !important;
        margin-top: 8px;
    }

    .partt {
        padding: 15px !important;
        box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .11);
        border-radius: 8px !important;
        border: 1px solid #eee;
        margin: 0 4% 6%;
    }

    .partt .bt { font-size: 18px; padding: 8px 5px 12px; }
    .dylist { padding: 2% !important; }
    .dylist ul li a { font-size: 14px; }

    .dyquick-link {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding-top: 14px;
    }

    .avoid {
        font-size: 12px !important;
        line-height: 1.6;
        margin-top: 15px;
    }
}

@media screen and (max-width: 480px) {
    .news-content .title { font-size: 20px; }
    .details-content h2 { font-size: 17px; }
    .details-content h3 { font-size: 15px; }
    .details-content h4 { font-size: 14px; }
}

/* ============================================
  文章内容通用适配 - 图片/表格/代码
  ============================================ */
@media screen and (max-width: 1200px) {
    .news-content img,
    .page_body img,
    .details-content img,
    .about_ri img,
    .timeline-main img {
        max-width: 100% !important;
        height: auto !important;
    }

    .news-content table,
    .page_body table,
    .details-content table,
    .about_ri table {
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .news-content pre,
    .page_body pre,
    .details-content pre,
    .about_ri pre {
        max-width: 100% !important;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 13px;
    }

    .page_body {
        font-size: 15px;
        line-height: 1.8;
    }

    .page_body p {
        font-size: 14px !important;

    }
    
    .page_body p>time {
        font-size: 13px;

    }   
    
    .about_ri .page_body {
        margin: 0;
        box-sizing: unset;
    }
}

/* ============================================
  帮助页面
  ============================================ */
@media screen and (max-width: 1200px) {
    .help-cont { font-size: 15px; }
    .help-main h2 { font-size: 20px; padding: 8px 0 15px 0; }
    .help-cont h3 { font-size: 17px; }
    .help-cont .stepflow-group li {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
        height: auto !important;
    }
}

/* ============================================
  面包屑导航 (仅在移动端做截断处理)
  ============================================ */
@media screen and (max-width: 1200px) {
    .cur-pos {
        padding: 3%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #eee;
    }
}

/* ============================================
  页脚 - 移动端隐藏
  ============================================ */
@media screen and (max-width: 1200px) {
    #qcportal-kit-footer,
    .copyright,
    .back-top {
        display: none !important;
    }

    .pls-footer-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .pls-footer-service-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pls-footer-service-list li {
        width: 50%;
        margin-bottom: 8px;
    }

    .pls-footer-website-columns {
        display: flex;
        flex-direction: column;
    }

    .pls-footer-website-columns > li {
        width: 100% !important;
        margin-bottom: 16px;
    }

    .pls-footer-website-contact {
        width: 100% !important;
        text-align: center;
    }

    .pls-footer-website-hotline-phone span { font-size: 16px; }

    .copyright {
        font-size: 12px;
        padding: 15px 10px;
        line-height: 1.8;
    }

    .copyright > div {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media screen and (max-width: 480px) {
    .pls-footer-service-list li { width: 50%; }
    .pls-footer-website-title { font-size: 14px; }
    .pls-footer-website-list li a { font-size: 12px; }
    .pls-footer-website-hotline-phone span { font-size: 14px; }
}

/* ============================================
  PC端(>1200px)：隐藏移动端元素
  ============================================ */
@media screen and (min-width: 1201px) {
    .header-mobile,
    .mobile-nav,
    .mobile-nav-mask {
        display: none !important;
    }
}