@charset "utf-8";
/*
 * 手机 / 窄屏适配（≤1023px 生效，桌面不受影响）。
 *
 * 本文件在 functions.php 里排在 assets/css/* 之后入队，但 @media 不提高特异性：
 * 老表里的 id 规则（#content / #banner / #columnB …）和三层类选择器（.slideBox .bd .pic）
 * 仍然会赢，所以每条覆盖都按原结构加 body 前缀提权。
 *
 * 唯一一处不动特异性的是首页栏目块的 490px 内联宽度：内联 style 只能被 !important 盖，
 * 但 max-width 是另一个属性，内联 width 拿它没办法，所以用 max-width:100% 顶掉，不必动 !important。
 *
 * 已知取舍：二级菜单靠 nav.js 的 slideDown 写内联 display，纯 CSS 打不开，这里只保证一级项可点。
 */

@media (max-width:1023px) {

/* 1. 全局框架：1002 / 1010 定宽 → 视口宽。 #wrap 的 overflow:hidden 顺带兜住残余溢出 */
body #wrap{ width:auto; }
body #content{ width:auto; background:none; }
/* 内容区底部那张 1021×47 的收边图在窄屏只能显示左半截，直接不显示 */
body #maindd{ display:none; }
body #footer{ width:auto; line-height:1.8; }
body .searchBar{ width:auto; }
/* #search 是 210 定宽右浮动，窄屏铺满整条更好点 */
body .searchBar #search{ float:none; width:auto; }
body .searchBar .keyWord{ float:left; width:calc(100% - 46px); box-sizing:border-box; }

/* 2. 头部 + 导航：8 个一级项折成多行 */
/* 头部装饰图 top_bg.png 是 1280 宽，窄屏裁出来是一片碎图，换成朴素的 logo 居中 */
body #header{ padding-top:10px; background:none; }
body #logo{ position:static; display:block; margin:0 auto 8px; }
body #logo img{ max-width:100%; height:auto; }
body .mainNav{ width:auto; height:auto; padding:0; line-height:36px; background:none; }
/* 高度改 auto 后要包住浮动的 li1，用 clearfix 而不是 overflow:hidden（后者会剪掉二级菜单） */
body .mainNav::after{ content:""; display:block; clear:both; }
body .mainNav .li1{ width:auto; }
body .mainNav .li1 .a1,
body .mainNav .first11 .a1,
body .mainNav .last11 .a1{ padding:0 12px; }
/* 折行后 3px 的竖线分隔符会飘在行首，隐藏 */
body .mainNav .spe{ display:none; }
/* navbg.png / navon.png 是 1000×46 的整条切图，多行排布下只够铺第一行 */
body .mainNav .on1{ background:none; }
body .mainNav .ul1{ top:100%; left:0; width:auto; min-width:110px; }

/* 3. banner：996×308 定宽定高 → 按视口缩放 */
body #banner{ width:auto; max-width:100%; height:auto; padding:2px; background-size:100% 100%; background-position:0 0; }
body #banner img{ width:100%; height:auto; }
/* 308 定高会让 topLoop 拿错每屏高度，三处都要放成 auto */
body .slideBox{ height:auto; }
body .slideBox .bd .pic{ height:auto; }
body .slideBox .hd{ bottom:6px; right:6px; }

/* 4. 首页四区块 + 内页两栏：定宽定高全部放开，两列改单列 */
body .mainContent{ width:auto; float:none; background:none; min-height:0; }
body .side{ width:auto; float:none; background:none; min-height:0; }
/* 内页/首页栏目标题区：侧栏排到内容下方（DOM 里 side 在前，用 order 换位，不改 PHP） */
body #content,
body #columnB{ display:flex; flex-wrap:wrap; }
body #content > .mainContent,
body #columnB > .mainContent{ order:1; flex:1 0 100%; }
body #content > .side,
body #columnB > .side{ order:2; flex:1 0 100%; }
body #columnB{ height:auto; }
body .focusPic,
body .indTab{ float:none; width:auto; }
/* 焦点图保持 290×210 的裁切比例（style.css 已给 object-fit:cover），否则方图会撑成大方块 */
body .focusPic .bd li .pic img{ width:100%; height:auto; aspect-ratio:290/210; }
/* 焦点图下方 40px 的两行摘要，窄屏一行只放得下 ~29 字，放成 auto 免得压到下面的列表 */
body .topicList .t .intro{ height:auto; }
/* 两行四栏目块：.box 的 490px 内联宽度只能用 max-width 顶（见文件头） */
body .mainContenta{ width:auto; float:none; }
body #columnD .box,
body #columnE .box{ float:none; max-width:100%; margin:0 auto 10px; }
body #columnD .box .bd,
body #columnE .box .bd{ height:auto; }
/* 栏目块内部：左侧图片列 + 右侧文字列 → 上下堆叠 */
body .p_list,
body .t_list{ float:none; width:auto; }
/* p_list 的 li 是浮动的，容器不放高就会跟下面的 .t_list 叠在一起 */
body .p_list{ overflow:hidden; }
body .p_list li{ float:left; margin:0 8px 8px 0; }
/* 精彩活动 tab 条是 6 条 166px 的切图，窄屏放不下，去掉切图让它折行 */
body .box1 .hd{ height:auto; }
body .box1 .hd ul{ float:none; height:auto; }
body .box1 .hd ul li,
body .box1 .hd ul li.on{ width:auto; background:none; }
body #jchd .bd{ height:auto; }
body #jchd .bd ul li{ width:auto; }

/* 5. 分类页：定宽 235 / 754 放开，侧栏菜单收窄 */
body .case_list{ padding:0; }
body .case_list ul li{ width:auto; height:auto; margin:0 6px 10px; }
body .case_list ul li .photo{ width:auto; height:auto; padding:0; background:none; }
body .case_list ul li .photo img{ max-width:100%; height:auto; }
body .job_list{ width:auto; }
body .job_list .box{ padding:10px; }
body .mainBoxA .maBd,
body .mainBoxK .maBd{ padding:10px; }
/* 标题栏里的面包屑窄屏折行，栏高要放开 */
body .mainBoxA .maHd,
body .mainBoxK .maHd{ height:auto; padding:0 10px; }
body .mainBoxA .maHd .path,
body .mainBoxK .maHd .path{ float:none; display:block; height:auto; line-height:1.8; }
/* 侧栏栏目树：bg_left.jpg 是 221×551 的整列切图（红标题条 + 竖底纹），窄屏铺不满就剩半截，
   改成纯色标题条 + 普通列表行；200px 定宽的行与 93px 缩进一起放开 */
body #sideMenu{ background:none; }
body #sideMenu .hd{ height:auto; background:#c00; text-align:left; }
body #sideMenu .hd h3{ height:auto; line-height:2.2; padding:0 12px; }
body #sideMenu .bd{ padding-bottom:0; background:none; }
body #sideMenu .bd ul,
body #sideMenu .bd .h1{ width:auto; }
body #sideMenu .bd li{ padding-left:0; background:none; }
body #sideMenu .bd .h1{ height:auto; line-height:2.4; text-align:left; padding:0 12px; border-bottom:1px solid #eaeaea; }
body #sideMenu .bd .h1 .a1,
body #sideMenu .bd .on1 .a1{ padding-left:0; background:none; }
body #sideMenu .bd .h1 em{ display:none; }
body #sideMenu .bd .ul1{ margin-left:0; padding:0 0 4px 12px; }
body #sideMenu .bd .ul1 .li2{ padding-left:0; }

/* 6. 详情页 / 单页：正文里的表格给横向滚动，别把版面撑出去 */
body .articleCon{ padding:15px 8px; }
/* Word 粘来的表格多数带内联 width:689px 之类，只能靠 max-width 收进视口（同首页栏目块），
   收进来以后表格自己横向滚动，不然 #fontzoom 的 overflow:hidden 会把右半截切掉 */
body .articleCon .conTxt #fontzoom table{ display:block; max-width:100%; overflow-x:auto; }

}