@charset "utf-8";

/* ============================================================
   嵌套页面(在 GK-主动公开.html 的 iframe 中加载)响应式样式
   适用:
     - Q-嵌套-主动公开单篇文章.html  (依赖 gk-article-detail.css)
     - Q-嵌套-主动公开资讯列表.html  (依赖 gk-dynamic.css)
     - Q-嵌套-基础信息.html          (依赖 gk-base-info.css)
   加载: 在每个嵌套页面的原 CSS 之后单独引入本文件
   断点:
     - 手机 <= 767px   取消固定 720/740 宽,改 100% 流体布局
     - 小屏 <= 480px   进一步压缩字号 / padding
   说明: 媒体查询基于 iframe 内部视口宽度,父窗口缩窄时 iframe 变窄,
         内部 @media 自然触发
   ============================================================ */

/* =========================================================
   通用:避免嵌套页面在窄屏 iframe 中出现横向滚动条
   ========================================================= */
html, body {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   1) 单篇文章  (Q-嵌套-主动公开单篇文章.html)
   桌面: .cont_tit 740px / 32px ; .xxgk-box 740×740 ; .contM 740×740 + overflow scroll
   ========================================================= */
@media (max-width: 745px) {
    /* 取消 body 固定高度,让内容自然撑开 */
    body {
        height: auto !important;
    }

    /* 文章标题: 满宽 + 字号缩 */
    .cont_tit {
        width: 100%;
        font-size: 22px;
        line-height: 1.5;
        padding: 0 8px 16px;
        box-sizing: border-box;
    }

    /* 文章外层容器: 流体 + 自适应高 */
    .xxgk-box {
        width: 100% !important;
        height: auto !important;
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* 正文区: 取消固定高 + 内部滚动,改为流式 */
    .contM {
        margin-left: 0;
        padding-right: 0;
        height: auto !important;
        overflow: visible !important;
    }

    /* 附件: 压缩 padding,字号不变 */
    .pager {
        padding: 12px 0;
        line-height: 30px;
    }
}

@media (max-width: 480px) {
    .cont_tit {
        font-size: 18px;
        line-height: 1.4;
        padding-bottom: 10px;
    }
    .pager {
        font-size: 13px;
    }
}

/* =========================================================
   2) 资讯列表  (Q-嵌套-主动公开资讯列表.html)
   桌面: body height 1050px ; .xxgk-xxbox 720px ; 行 50px(标题 600 + 日期 100, float)
   ========================================================= */
@media (max-width: 745px) {
    body {
        height: auto !important;
    }

    /* 容器: 流体,去掉内联固定宽 */
    .xxgk-xxbox {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .right {
        width: 100%;
        margin: 0 0 12px;
    }
    .right_tit,
    .tab {
        width: 100%;
    }

    /* 列表高度容器: 流体 */
    #heightbox {
        width: 100%;
    }

    /* 列表行: 改为 flex,标题与日期换行显示(日期移到第二行) */
    .xxgk-comm-line {
        width: 100%;
        height: auto;
        padding: 8px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        box-sizing: border-box;
        border-bottom: 1px dashed #eee;
    }
    .xxgk-comm-line span,
    .xxgk-comm-line span a {
        line-height: 1.5;
        white-space: normal;
    }
    /* 标题占满第一行,字号缩,超出省略号(单行) */
    .xxgk-line-comtit {
        width: 100%;
        float: none;
        order: 1;
        font-size: 15px;
        white-space: nowrap !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    /* 日期换到第二行,小字灰色 */
    .xxgk-line-comdate {
        width: auto;
        float: none;
        order: 2;
        font-size: 12px;
        color: #888;
        margin-top: 4px;
        white-space: nowrap !important;
    }

    /* 翻页: 压缩按钮 */
    .page_div {
        margin: 16px 0;
    }
    .page_div button {
        min-width: 28px;
        height: 28px;
        line-height: 24px;
        font-size: 12px;
        margin: 0 2px;
    }
    #firstPage, #lastPage, #nextPage, #prePage, #jump {
        width: 44px;
    }
    #nextPage, #prePage {
        width: 60px;
    }

    /* 窄屏隐藏: 跳转输入框 / 跳转按钮 / 总记录数
       移动端不暴露精确翻页与总数,只保留翻页按钮组 */
    #jumpV,
    #jump,
    .totalList {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .xxgk-line-comtit {
        font-size: 14px;
    }
    .xxgk-line-comdate {
        font-size: 11px;
    }
    .xxgk-comm-line {
        padding: 6px 0;
    }
    .page_div button {
        min-width: 24px;
        height: 24px;
        line-height: 20px;
        font-size: 11px;
        margin: 0 1px;
    }
}

/* =========================================================
   3) 基础信息  (Q-嵌套-基础信息.html)
   桌面: .xxgk-xxbox 720×740 ; .jgszcon 740 高 ; #heightbox1 740 + overflow scroll
   ========================================================= */
@media (max-width: 745px) {
    .xxgk-xxbox {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .jjsz_main_con {
        padding: 12px 0;
    }

    /* Tab 标签: 改为 flex,允许多个标签换行 */
    .nc_mid_top {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        line-height: 1.4;
        padding: 0;
    }
    .nc_mid_top span {
        float: none;
        font-size: 14px;
        margin: 0 6px 6px 0;
    }

    /* 内容区: 流体 + 自适应高(关键: 取消写死的 740px,让 tab 切换真正改变高度) */
    .jgszcon {
        height: auto !important;
        margin-top: 12px;
    }
    #heightbox1, #heightbox2, #heightbox3, #heightbox4 {
        height: auto !important;
        overflow: visible !important;
        padding-right: 0;
    }
}

/* 平板 (746~991px) 同样去掉 .jgszcon 的 740px 锁
   否则切 tab 时容器尺寸永远不变,iframe 高度不会跟着更新 */
@media (min-width: 746px) and (max-width: 991px) {
    .jgszcon {
        height: auto !important;
        margin-top: 16px;
    }
    #heightbox1, #heightbox2, #heightbox3, #heightbox4 {
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    .nc_mid_top span {
        font-size: 13px;
        padding: 3px 8px;
    }
    .jgszcon {
        margin-top: 8px;
    }
}