@charset "utf-8";
/* ============================================================
   晨曦导航极速版 dh189.com · 移动端自适应增强层 (mobile.css)
   ------------------------------------------------------------
   原则:
   1. 纯增量补丁, 不改动 jj.css 原文件;
   2. 全部规则包裹在 @media (max-width:1200px) 内,
      PC 端(视口 > 1200px)完全不受影响, 原有行列布局一字不变;
      断点取 1200px: 覆盖手机/平板/小窗浏览器与预览面板等窄容器场景;
   3. 移动端只做「自动换行 + 自适应屏幕」:
      不增删任何链接、分组与配色, 交互与视觉沿用原风格。
   ============================================================ */

/* 预览面板等 iframe 环境: 由 responsive.js 将本表 media 改为 all 并加 force-mobile 类,
   内容限宽 760px 居中, 呈现与手机一致版式; 直接打开时无此类, 不受影响 */
html.force-mobile body{ max-width:760px; margin-left:auto; margin-right:auto; }


  /* ---------- 全局 ---------- */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  html, body{ max-width:100%; overflow-x:hidden; }

  /* 顶部淡蓝渐变装饰带随屏宽伸缩, 保持原风格 */
  body{
    background-position:top center;
    background-size:100% auto;
    background-repeat:no-repeat;
  }

  /* 四大区块: 固定 990px → 流式收缩 */
  .head, .search, .wrap, .foot{
    width:100%;
    max-width:990px;
    box-sizing:border-box;
    padding-left:8px;
    padding-right:8px;
  }

  /* ---------- 头部: logo + 日期 + 版本/邮箱 折行 ---------- */
  .head{
    height:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding-top:6px;
    padding-bottom:6px;
  }
  .head span{ height:auto; line-height:normal; padding-top:0; }
  .head a.logo{ order:1; flex:0 0 auto; }
  .head a.logo img{ float:none; margin:0; display:block; }
  .head span.date{ order:2; float:none; flex:1 1 auto; text-align:right; padding-right:10px; }
  .head span.down{ order:3; float:none; margin-left:6px; }
  .head .down b{ margin-top:0; }
  /* 精灵图定宽按钮在窄屏会文字折行, 改为自适应纯文字按钮 */
  .head .down b.width_63,
  .head .down b.width_78,
  .head .down b.width_99{ width:auto !important; background:none !important; }
  .head .down b a.drop{ white-space:nowrap; height:28px; line-height:28px; padding:0 10px; }
  .head .down ul{ top:27px; }
  /* 原站 .sug1(搜索框) z-index:199 > 下拉菜单 b 的 99, PC 端互不重叠无影响;
     手机端头部折行后「邮箱·银行」与搜索区上下相邻, 下拉会被搜索框盖住,
     故窄屏将下拉层级提到搜索框之上 */
  .head .down b{ z-index:300; }
  .head .down ul{ z-index:300; }
  .head span.headline{ display:none; }        /* 竖分隔线在折行布局中隐藏 */
  .head .wea{                                  /* 天气条: 空间够则同行, 不够自动换行 */
    order:5; flex:1 1 auto; width:auto !important; min-width:0;
    height:26px; line-height:26px; padding:0;
    margin-top:5px; text-align:center; overflow:hidden;
  }
  .head .wea iframe{
    width:280px !important; max-width:100%;
    height:25px !important;
  }

  /* ---------- 搜索区 ---------- */
  .search{ height:auto; padding-top:10px; padding-bottom:4px; border-top:none; }
  #nv{
    margin-left:0;
    height:auto; line-height:normal;
    display:flex; flex-wrap:wrap; justify-content:center;
  }
  #nv a{
    float:none; width:auto; min-width:50px;
    padding:0 5px; box-sizing:border-box;
    height:24px; line-height:24px;
  }
  #nv a.active, #nv a.actived{ margin-bottom:0; }
  .fm_w{ width:100%; }
  #fm{ width:100%; box-sizing:border-box; height:38px; padding:2px 4px 0 4px; display:flex; }
  /* 输入框在 form 内: form 拉伸占满 #fm, form 内部再用 flex 分配 sug1(输入框)与按钮 */
  #fm form{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
  #fm span{ float:none; display:block; }
  #inbox{
    display:block; width:100%; min-width:0;
    height:31px; line-height:31px;
    background-size:100% 31px;                 /* 输入框底图随宽度拉伸, 保持圆角描边风格 */
  }
  #btn{ flex:0 0 80px; margin-top:0; }
  .sug1{ flex:1 1 auto; width:auto !important; min-width:0; position:relative; }
  #sug{ width:100% !important; max-width:100%; top:32px; }
  #sug table{ width:100%; }
  .soption{
    padding-left:0; height:auto; line-height:24px;
    display:flex; flex-wrap:wrap; justify-content:center;
  }
  .soption input{ margin:0 4px 0 2px; }

  /* ---------- 我的定制 ---------- */
  .my2345{ width:auto; margin:12px 8px 0; }
  .my2345tb{ display:flex; flex-wrap:wrap; align-items:center; }
  .my2345tb b{ float:none; width:auto; flex:0 0 auto; }
  .myLike{ float:none; width:auto; flex:1 1 auto; display:flex; flex-wrap:wrap; }
  .myLike li{ float:none; margin:0 14px 0 0; white-space:nowrap; }

  /* ---------- 主导航 .mz: PC 每行 7 个 → 按屏宽自动排 6/4/3/2 个, 换行不截断 ---------- */
  .mz{ padding:4px 2px 2px 0; }
  .mz ul{ display:flex; flex-wrap:wrap; overflow:visible; }
  .mz li{
    float:none;
    width:auto;
    flex:1 1 16.666%;
    box-sizing:border-box;
    padding-left:10px;
    height:38px; line-height:38px;
    overflow:hidden; white-space:nowrap;
  }

  /* ---------- 展开区 .bd2: 左右双栏 → 上下单栏, 每行仍 4 个链接, 放不下才换行 ---------- */
  /* 窄屏下该区始终展开显示:
     - 原站 HTML 上写着 style="display:none", 靠脚本折叠;
       若脚本未执行(如预览沙箱)整块会永久消失, 故强制显示;
     - 同时展开/收起动画写入的内联固定高度(按PC的265px)会裁掉内容,
       用 !important 压过, 保证单栏内容完整可见。 */
  .bd2{ display:block !important; height:auto !important; }
  .fold{ display:none; }                    /* 窄屏始终展开, 无需展开/收起开关 */
  .bd2_inner{ height:auto !important; }
  .bd2_left{ float:none; width:100%; border-right:none; border-bottom:1px dotted #91c4f7; padding-bottom:4px; }
  .bd2_right{ float:none; width:100%; overflow:visible; }
  .bd2 dl{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    height:auto; min-height:0; padding:2px 6px;
    /* 分类名与链接、链接与链接之间统一 12px 间距(与电脑端 18px 观感相似),
       链接按内容自然排列, 一行放不下才自动换行, 不再做等分拉伸 */
    column-gap:12px; row-gap:2px;
  }
  .bd2 dl dt{ float:none; flex:0 0 auto; white-space:nowrap; }  /* 分类名 + » 同行, 宽度自适应 */
  .bd2 dl dt strong{ float:none; width:auto; margin-right:0; }
  .bd2 dl dt a{ width:auto; margin:4px 0; height:20px; line-height:20px; padding-top:0; }
  .bd2 dl dt i{ float:none; width:auto; }
  .bd2 dl dt i a{ line-height:20px; }
  .bd2 dl dd{
    float:none; width:auto;
    flex:0 0 auto;                    /* 按内容宽度, 间距由 column-gap 统一 */
    margin:3px 0;
  }
  .bd2 dl dd a{
    /* dd 内可能有多个链接, 保持行内排列, 放不下时在 dd 内自动折行 */
    display:inline-block; white-space:nowrap;
  }

  /* ---------- 页脚 ---------- */
  .foot{
    height:auto; line-height:22px; margin-top:16px;
    display:flex; flex-wrap:wrap; justify-content:center;
  }
  .foot i{ display:none; }
  .foot a{ padding:0 3px; }

  /* ---------- 首页提示条 ---------- */
  /* 窄屏下该浮层为绝对定位, 会遮挡天气与搜索区; 且本地/移动端"设为主页"无意义, 直接隐藏 */
  .fn_tip_grid{ display:none !important; } /* JS 以内联样式将其置为 block, 需 !important 覆盖 */

  /* ---------- 我的定制弹窗 ---------- */
  .filter{ position:fixed; height:100vh; }
  .pop{ width:auto; left:8px; right:8px; margin-left:0; top:60px; box-sizing:border-box; }
  .pop_cnt{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pop_cnt table{ min-width:640px; }

  /* ---------- 触屏点按反馈(替代 hover), 由 responsive.js 添加类 ---------- */
  .is-touch .mz li a:active,
  .is-touch .bd2 dl a:active,
  .is-touch .myLike li a:active,
  .is-touch .foot a:active{ background:#85afec; color:#0016C8; text-decoration:none; }
  .is-touch .mz li a:active{ background:none; color:#f00; }

/* 分级列数: 保证不同屏宽下行列自然, 不出现空荡或挤压 */
@media screen and (max-width: 900px) {
  .mz li{ flex:1 1 25%; }        /* 4 列 */
}
@media screen and (max-width: 600px) {
  .mz li{ flex:1 1 33.333%; }    /* 3 列 */
}
/* 超窄屏(<=360px): 主导航自动降为 2 列, 避免文字挤压 */
@media screen and (max-width: 360px) {
  .mz li{ flex:1 1 50%; }
}