@charset "UTF-8";
/* ==========================================================================
   sctcm.sc.gov.cn 首页移动端自适应补丁
   --------------------------------------------------------------------------
   使用方法（二选一）：
     A. 外部文件：把本文件传到服务器（如 /sctcm/xhtml/css_zgj/ 下），
        在首页模板 <head> 中【全部原有 link 之后】加一行：
        <link rel="stylesheet" href="/sctcm/xhtml/css_zgj/home-mobile.css">
     B. 内联：把本文件内容整段粘进首页模板 <head> 末尾的 <style> 里
        （粘的时候删掉第一行 @charset，其余不变）。
   断点只用 768 / 480，与站点既有约定一致；桌面端（>768px）一行不动。
   每一节都可整段删除回滚，节首注释写明了这一节在解决什么问题。
   注意：注释里永远不会出现样式块结束标签字面量，避免截断页内样式。
   ========================================================================== */

/* ==========================================================================
   §0 全局底层（≤768px）
   根因：default.css 第 5 行 html,body{min-width:1440px} 是旧版遗留的
   「幽灵宽度」——任何视口下文档都被撑到 1440px；实测 1200px 视口横向
   溢出 240px、390px 视口溢出 1050px（补丁前基线数据）。
   min-width:0 的兜底另见 §6 的 769–1439 段。
   ========================================================================== */
@media (max-width: 768px) {

    html body { min-width: 0; }

    /* 站内全局没有 box-sizing:border-box，页内补丁统一补上，
       否则「width:100% + padding」的组合会互相挤出滚动条 */
    * { box-sizing: border-box; }

    /* 图片兜底：专题图(533x101)、分隔线(590x6)等未设 CSS 尺寸的图
       都不允许超出容器；已由类选择器定好尺寸的图不受影响 */
    img { max-width: 100%; height: auto; }

    /* ======================================================================
       §1 顶栏（.top）
       原结构：.des 绝对定位 left:20px、.features 绝对定位 right:0，
       在 1200px 里并排；窄屏下 features 的 8 个入口（约 460px）会互相
       压盖。改为 flex 两端对齐、允许换行，两个子块都回归文档流。
       ====================================================================== */
    .top {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 3px 10px;
    }
    .des, .features { position: static; margin: 0; }
    .features li { padding: 0 3px; }
    .des a, .features li a { font-size: 13px; }

    /* ======================================================================
       §2 标识区 + 搜索（.title）
       原结构：.icontitle(logo 550px) 与 .search(340px float:right) 同行。
       窄屏放不下，改为上下两行：logo 居中自适应，搜索框独占一行全宽。
       ====================================================================== */
    .title {
        width: 100%;
        height: auto;
        margin: 14px auto;
        padding: 0 12px;
        text-align: center;
    }
    .icontitle { display: block; height: auto; }
    .icontitle img { width: 100%; max-width: 550px; height: auto; }
    .search {
        float: none;
        display: block;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 10px auto 0;
        padding: 0;
    }
    .navSer, .navSer ul, .navSer li { width: 100%; }
    .navSer li { display: block; }
    #searchWord {
        width: calc(100% - 72px);
        height: 45px;
        box-sizing: border-box;
        font-size: 16px;
    }
    #submit { width: 55px; height: 45px; margin-left: 10px; }

    /* ======================================================================
       §3 主导航（table.navlist）
       原结构：table 带 width="1200px" 属性 + 背景图 nav_bg.png(1201x57)，
       8 个一级栏目 li float:left 各 148px。
       移动端：表格全宽 + table-layout:fixed（防止表格按浮动内容自动撑宽），
       背景图拉伸铺满；li 宽度不变，靠 float 自然换行（390px 每行 2 个）。
       二级下拉是 li 内 position:absolute，换行后照样挂在各自一级项下方。
       为什么不用汉堡菜单：站点约定新增交互用 vanilla JS，但导航折叠需要
       JS；本补丁保持零 JS 依赖，横滑/换行在政府网站老年用户场景更好用。
       ====================================================================== */
    table.navlist {
        width: 100% !important;
        height: auto;
        table-layout: fixed;
        background-size: 100% 100%;
    }
    .navlist td { width: 100%; }
    #navul { width: 100%; }
    #navul li ul { min-width: 150px; }

    /* ======================================================================
       §4 焦点轮播（.swiperContainer）
       原结构：swiperx.js 第 2 行硬编码 var width = 590，逐帧把
       .swiperWrapper 的 left 平移 590 的整数倍；.swiperContainer 还带
       行内 style="width:590px"。
       移动端容器变成 100% 后轮播必然错位 → 这里把轮播「降级」成原生
       横滑：wrapper 改 position:static（行内 left 失去作用，JS 不报错）、
       flex 横排 + scroll-snap，每张幻灯片占满一屏，手指左右滑切换。
       JS 仍在跑，但 style.left 对 static 元素无效，互不干扰。
       ====================================================================== */
    .swiperContainer { width: 100% !important; height: auto; }
    .swiperWrapper {
        position: static !important;
        display: flex;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .swiperSlider {
        position: relative;
        float: none;
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        scroll-snap-align: start;
    }
    .swiperSlider a { width: 100%; height: 100%; }
    .swiperSlider img { width: 100%; height: 200px; }
    .swipertitle { height: auto; min-height: 52px; padding-top: 6px; }
    .swipertitle p:nth-of-type(1) { font-size: 17px; margin-top: 4px; }
    .bottomdes { width: 100%; font-size: 14px; }
    /* 圆点按钮依赖 JS 的 left 平移，横滑后失去意义，隐藏 */
    .swiperButtons { display: none; }

    /* ======================================================================
       §5 区块级定宽全部解除
       content.css / topcss.css / interactive.css / footer.css 里
       .info_navlist/.gov_navlist/.specialcolumn/.interactive/.services/
       #ztrk/.link 等一长串 1200px 定宽，以及 .gov(830)/.gov_columns(360)/
       .dynamic/.gov_info(590)/.specialtitle/.special_container(1100)，
       在窄屏统一改为 100%；两栏/三栏布局由 §10/§11 负责堆叠。
       ====================================================================== */
    .top, .title, .info_navlist, .gov_navlist, .govjd_navlist,
    .specialcolumn, .interactive, .services, #ztrk, .link,
    .content, .contentb, .footer {
        width: 100%;
    }

    /* 两栏块（要闻动态 / 省政府信息 / 政府文件 / 公开专栏）上下堆叠 */
    .dynamic, .dynamic2, .yqfk_info, .jydhmic, .gov_info,
    .gov, .govjd, .govztjy, .gov_columns {
        display: block;
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    .line, .loneline, .lonelineztjy { width: 100%; }
    .line img, .loneline img { width: 100%; height: auto; }

    /* 面板定高会裁列表，全部放开（桌面端 280/300px 只显示约 6 条） */
    .dynamic_contents .dynamic_content,
    .newscontents .newscontent,
    .newscontents .govnewscontent {
        width: 100%;
        height: auto;
    }

    /* ======================================================================
       §6 tab 标签栏（各 _tab）
       .gov_tab ul li 宽 176px x 4 个 = 704px，390px 屏放不下。
       改为 flex 自动换行，li 宽度自适应、字号降到 17px，选中态胶囊
       背景（.on）会随内容收缩，视觉保持。
       ====================================================================== */
    [class$="_tab"] ul { display: flex; flex-wrap: wrap; }
    [class$="_tab"] ul li {
        float: none;
        width: auto;
        height: 40px;
        margin: 3px 4px;
    }
    [class$="_tab"] ul li a:nth-of-type(1) {
        width: auto;
        padding: 0 14px;
        font-size: 17px;
        white-space: nowrap;
    }
    [class$="_tab"] ul li a:nth-of-type(2) { font-size: 14px; width: auto; padding: 0 6px; }

    /* ======================================================================
       §7 新闻列表行（标题 + 日期）
       原结构：li 内 <a> 标题 + <span> 日期 float:right。
       390px 下标题会把日期顶跑、折行后日期孤悬。
       改为 flex-wrap 行：标题自由换行占满，日期 flex 收尾——
       一行放得下就同行右侧，放不下自动落到第二行右对齐（12px 灰字）。
       覆盖 .newscontents 内 CMS 列表与 szfxx.js 运行时注入的省政府信息
       列表（那个列表由外部脚本 document.write 注入，类名 .szfxx_list，
       content.css 里写死 width:566px/height:230px/overflow:hidden，
       必须一并解除，否则手机上和桌面一样只露得到 5 条）。
       ====================================================================== */
    .newscontents .list li,
    .szfxx_list li,
    .letterlist {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        width: 100%;
        height: auto;
    }
    .newscontents .list li > a,
    .szfxx_list li > a,
    .letterlist > a {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        white-space: normal;
        word-break: break-word;
        line-height: 1.5;
    }
    .newscontents .list li > span,
    .szfxx_list li > span,
    .letterlist > span:nth-of-type(2) {
        float: none;
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 10px;
        font-size: 12px;
        color: #999;
    }
    .szfxx_list { width: 100%; height: auto; overflow: visible; }
    .letterlist { line-height: 1.5; padding: 7px 0; }
    .letterlist span:nth-of-type(1) { margin-right: 8px; }

    /* ======================================================================
       §8 政府信息公开专栏（.gov_columns）
       .column_top(364px) / .columns(330px) / .column_footer(364px) 定宽，
       内含两个 140px 的 ul 和两个 170px 的入口块。全部改百分比，
       两个 ul 与两个入口块在窄屏并排为两列（46%/48%）。
       ====================================================================== */
    .column_top {
        width: 100%;
        height: auto;
        min-height: 210px;
        background-size: 100% 100%;
    }
    .columns { width: 100%; height: auto; }
    .columns ul { width: 46%; margin: 0 1%; }
    .columns ul li { width: 100%; }
    .column_footer { width: 100%; height: auto; }
    .column_footer ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .column_footer ul li { width: 48%; height: 110px; }
    .column_footer ul li:nth-of-type(2) { margin-left: 0; }
    .columnfooterbg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }
    .columnfooterbg a { width: 100%; height: 100%; }
    .columnfooterbg span { font-size: 16px; }

    /* ======================================================================
       §9 专题专栏（.specialcolumn）
       原结构：卷轴背景图(1199x267) + .specialtitle 绝对定位在 top:40px、
       内含 span 也绝对定位；两个专题图(533x101) float 各 550px。
       移动端：标题改为文档流居中（specialtitle 保持 relative，
       否则里面绝对定位的 span 会跑到整个区块上去），
       两个专题图堆叠、宽度 100% 由全局 img 规则接管。
       ====================================================================== */
    .specialcolumn {
        width: 100%;
        height: auto;
        min-height: 0;
        background-size: 100% 100%;
    }
    .specialtitle {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 38px;
        margin: 16px auto 0;
        background-size: 100% 100%;
    }
    .specialtitle span {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        display: block;
        text-align: center;
        line-height: 38px;
        font-size: 18px;
    }
    .special_container { width: 100%; padding-top: 16px; }
    #xxyd .bd ul li { float: none; width: 100%; margin: 6px 0; }
    #xxyd .bd ul li img { display: block; margin: 0 auto; }

    /* ======================================================================
       §10 互动交流（.interactive）
       原结构：互动交流边框背景图(1199x407) + 三栏 350/420/370px。
       移动端：边框图 100% 纵向拉伸跟随内容高度（角纹轻微变形可接受），
       三栏堆叠；.morefun 的 4 个按钮原为绝对定位两格，改 flex 两列。
       ====================================================================== */
    .interactive { height: auto; background-size: 100% 100%; }
    .interactive .inter_content { width: 100%; height: auto; padding-top: 36px; }
    /* 基样式表用 :nth-of-type(1/2/3) 写死三栏宽度，特异性高于普通类
       选择器，这里必须 !important 才能压住（删除本节即恢复桌面行为） */
    .interactive .inter_content li {
        display: block !important;
        width: 100% !important;
        height: auto;
        margin: 14px 0;
    }
    .mailbox {
        width: 100%;
        max-width: 363px;
        height: 130px;
        margin: 0 auto;
        background-size: 100% 100%;
    }
    .morefun {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .morefun .fun {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 48%;
        height: 50px;
        margin: 5px 0;
    }
    .morefun .fun a { left: 0; top: 0; width: 100%; height: 100%; }
    .fun span { font-size: 15px; }
    .lettersfrom, .lettertitle { width: 100%; }
    .interview, .interviewtitle { width: 100%; }
    .newsimg { width: 100%; height: 190px; }

    /* ======================================================================
       §11 政务服务（.services）
       原结构：政务服务边框背景图(1199x407) + 三栏 24%/50%/24%，
       左边 4 个查询入口、中间一网通办(520px)、右边 3 个数据开放按钮。
       移动端：边框图拉伸跟随高度，三栏堆叠；一网通办面板 width:100%
       背景 cover；数据开放按钮 270px 居中（宽度本就不超，无需再动）。
       ====================================================================== */
    .services { height: auto; background-size: 100% 100%; }
    .services .services_content { width: 100%; height: auto; padding-top: 36px; }
    .services .services_content li {
        display: block !important;
        width: 100% !important;
        height: auto;
    }
    .infoselect { width: 100%; }
    .infoselect a { font-size: 16px; }
    .servicenetwork { width: 100%; height: 255px; background-size: cover; }
    .dateopen { width: 270px; margin: 12px auto 0; }
    .dateopen span, .dateopen div { font-size: 18px; }

    /* ======================================================================
       §12 专题入口（#ztrk，ZPIndex.css 的 flex 五联）
       原结构：flex-wrap:nowrap，5 个 .category_item 各 24%，
       窄屏必然横向挤出。改为允许换行 + 每项 48%（两列），
       图标 70px 缩到 60px 保持触控区。
       ====================================================================== */
    #ztrk { width: 100%; padding: 12px 10px; }
    .category_list { flex-wrap: wrap; }
    .category_list > .category_item {
        width: 48%;
        height: 76px;
        margin: 6px 1%;
    }
    .category_item > .category_icon > img { height: 60px; width: 60px; }
    .category_name { font-size: 16px; }

    /* ======================================================================
       §13 页脚（.link + .beiantable）
       .link 1200px/25px 字；备案表 width="1107" 属性 + 5 格
       （3 个图标格 + 1 个 585px 文本格 + 1 个 145px 图标格）。
       备案表固定布局在 390px 下文本格只剩约 150px，地址文字会折成
       四五行。这里把表格拆成块级 flex 行：图标三格一行、文本独占一行、
       二维码独占一行。
       ====================================================================== */
    .link {
        width: 100%;
        height: auto;
        padding: 10px;
        line-height: 1.8;
        font-size: 16px;
    }
    .link select { max-width: 100%; }
    .beiantable { display: block; width: 100%; max-width: 720px; height: auto; }
    .beiantable tbody { display: block; width: 100%; }
    .beiantable tr { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
    .beiantable td { display: block; width: auto; padding: 6px 8px; }
    .beiantable td:nth-of-type(1),
    .beiantable td:nth-of-type(2),
    .beiantable td:nth-of-type(3) { flex: 0 0 auto; }
    .beiantable td:nth-of-type(4) { flex: 1 1 100%; }
    .beiantable td:nth-of-type(5) { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================================
   §14 769–1439px 段（笔记本 / 平板横屏）
   只做一件事：解除 default.css 的 html,body{min-width:1440px}。
   实测 1366px 笔记本视口下补丁前文档宽 1440px，多出 74px 横向滚动条；
   解除后 1200px 桌面布局原样居中显示，零改动、零风险。
   （1024px 及以下窗口里 1200px 定宽内容仍会横向溢出，
     留待二期：把 §5–§12 的堆叠规则复制进 769–1200 段即可，
     焦点轮播硬编码 590 的问题已由 §4 的横滑降级方案一并解决。）
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1439px) {
    html body { min-width: 0; }
}

/* ==========================================================================
   §15 ≤480px 精调（小屏手机）
   ========================================================================== */
@media (max-width: 480px) {
    .content_title, .contentb_title { font-size: 24px; letter-spacing: 4px; }
    .swiperSlider img { height: 180px; }
    .swipertitle p:nth-of-type(1) { font-size: 16px; }
    .mailbox { height: 110px; }
    .interactive .inter_content, .services .services_content { padding-top: 30px; }
    .specialtitle { height: 34px; }
    .specialtitle span { font-size: 16px; line-height: 34px; }
    .category_name { font-size: 15px; }
    .link { font-size: 14px; }
    .dateopen { width: 100%; max-width: 280px; }
    .newsimg { height: 170px; }
    .des a, .features li a { font-size: 12px; }
}