@charset "utf-8";
/* ============================================================================
   惠德培训 · 移动端适配层   css/mobile.css
   v1.0   2026-10-30
   
   加载位置：必须紧跟在 css/style.css 之后（见 UserControl/IncStyle.ascx）
   生效范围：@media screen and (max-width:1023px)
             桌面端（>=1024px）完全不受影响，所有规则都在媒体查询内
   
   设计原则：
     1. 只做 CSS 覆盖，不改任何 DOM，不碰 .cs —— 回滚 = 删掉本文件 + 还原 IncStyle.ascx
     2. 覆盖规则的优先级 >= style.css 原规则，靠「同优先级后置」取胜，不滥用 !important
        （仅在对抗 HTML 内联样式时使用）
     3. body 加 overflow-x:hidden 兜底，防止个别遗漏元素撑出横向滚动条
     4. 断点 1023px 而非 768px：桌面版是 1002px 定宽，低于 1002px 就必须换布局
   ========================================================================== */


/* ============================================================================
   一、全局重置与容器
   ========================================================================== */
@media screen and (max-width:1023px){

  html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

  body{
    overflow-x:hidden;
    font-size:15px;
    line-height:1.6;
    /* 原 12px 宋体在手机上过小且发虚，换系统字体栈 */
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",
                "Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  }

  a{ -webkit-tap-highlight-color:rgba(0,0,0,.08); }
  img{ max-width:100%; height:auto; }
  table{ max-width:100%; }
  td,th{ word-wrap:break-word; word-break:break-word; }
  /* .outwidth 是全站唯一主宽度（1002px），改为流式 */
  .outwidth{
    width:auto;
    max-width:1002px;
    margin-left:auto;
    margin-right:auto;
    padding-left:8px;
    padding-right:8px;
    box-sizing:border-box;
  }

  /* 通栏浮动栅格改为块级堆叠 */
  .fl,.fr{ float:none; }

  /* .outheight 原为 min-height:650px，手机上会留大量空白 */
  .outheight,.minheight{ height:auto; min-height:0; }


/* ============================================================================
   二、页头：123px 绝对定位布局 → 文档流
   原布局所有子元素都 position:absolute 且用固定像素偏移（最高到 left:763px）
   ========================================================================== */

  .header{
    height:auto;
    padding:10px 8px 0;
  }

  /* Logo */
  .header .logo{
    position:static;
    display:block;
    text-align:center;
    margin:0 0 8px;
  }
  .header .logo img{ max-width:140px; }

  /* 登录/注册/邮件订阅 */
  .header .uplink{
    position:static;
    text-align:center;
    font-size:13px;
    margin:0 0 8px;
  }

  /* 电话行。原 HTML 里"在线报名"图带了内联绝对定位，需 !important 才能压住 */
  .header .uptel{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    padding:0;
    text-align:center;
    font-size:13px;
    line-height:1.9;
    margin:0 0 8px;
  }
  .header .uptel a{
    position:static !important;
    display:inline-block !important;
    width:auto !important;
    height:auto !important;
    margin-bottom:6px;
  }
  .header .uptel a img{ max-width:110px; }

  /* 站内搜索：原为整张 sear01.jpg 精灵图 + 32px 左内边距 */
  .header .upsear{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    background:none;
    padding:0;
    margin:0 0 10px;
    display:flex;
  }
  .header .upsear .seark01{
    float:none;
    width:auto;
    flex:1 1 auto;
    height:34px;
    line-height:34px;
    border:1px solid #ccc;
    background:#fff;
    box-sizing:border-box;
    padding-left:8px;
    font-size:14px;
  }
  .header .upsear .searbut01{
    float:none;
    flex:0 0 60px;
    width:60px;
    height:34px;
    border:0;
    /* 原按钮文字是一个空格，这里直接用内联 SVG 画放大镜，避免空白按钮 */
    background:#006b9d
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E")
      no-repeat center center;
    background-size:18px 18px;
    color:#fff;
    font-size:0;          /* 原按钮文本是空格，隐藏掉 */
    cursor:pointer;
  }


/* ============================================================================
   三、主导航：10 个精灵图按钮 → 文字网格
   原 HTML 的 <a> 是空的，标题只存在 title 属性里（图在 background-image）
   这里用 content:attr(title) 把文字取出来，无需改 HTML
   ========================================================================== */

  .header #nav{
    position:static;
    top:auto;
    left:auto;
    display:flex;
    flex-wrap:wrap;
    margin:0 -8px;
    background:#f7f7f7;
    border-top:1px solid #e5e5e5;
  }
  /* 按内容自适应宽度：短标签与长标签自然混排，10 项在 390px 下约 2 行，
     不会出现「最后一行只剩 1 个」的孤行 */
  .header #nav li{
    float:none;
    position:static;
    flex:1 1 auto;
    min-width:0;
    max-width:none;
  }
  .header #nav li strong{ display:block; }

  /* 选择器加 [class] 提升到 (1,2,3)，压过 .header #nav li .navN 的 (1,2,1)
     这样除 width/background 外不必动用 !important */
  .header #nav li strong a[class]{
    float:none;
    display:flex;
    align-items:center;
    justify-content:center;
    height:44px;                       /* >=44px 满足移动端点击热区 */
    width:auto !important;             /* 压过 .navN 的定宽 */
    background-image:none !important;   /* 去掉精灵图 */
    background-color:transparent !important;
    border-right:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
    box-sizing:border-box;
    padding:0 10px;
    font-size:13px;
    color:#333;
    text-align:center;
    line-height:1.2;
    white-space:nowrap;
  }
  .header #nav li strong a[class]::after{ content:attr(title); }
  .header #nav li strong a[class]:hover{
    background-color:#e8f2f8 !important;
    color:#006b9d;
  }


/* ============================================================================
   四、首页轮播：1002x301 固定尺寸 → 等比自适应
   用 padding-bottom 撑出 301/1002 = 30.04% 的高度，保持绝对定位子元素的
   百分比高度基准正确（绝对定位子元素以 padding box 为基准）
   ========================================================================== */

  #player{ height:auto; }

  #player .Limg{
    height:0;
    padding-bottom:30.04%;
    overflow:hidden;
  }
  #player .Limg li{ height:100% !important; }  /* 压过 JS 可能写入的内联高度 */
  #player .Limg li img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    display:block;
  }

  /* 分页圆点：原 top:286px 固定值，改为贴底居中 */
  #player .Nubbt{
    top:auto;
    bottom:10px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
  }
  #player .Nubbt span{ float:none; }


/* ============================================================================
   五、首页滚动公告条 / 三栏区块
   ========================================================================== */

  .newsScrollbox{
    width:auto;
    margin:0 8px 5px;
    position:relative;
  }
  .newsScrollbox .newsScroll{
    left:46px;
    right:10px;
    width:auto;      /* 原 width:800px */
  }

  /* .box01 三栏（290 / 340 / 285）→ 纵向堆叠，背景图是 1002px 装饰底图，去掉 */
  .box01{
    height:auto;
    background:none;
    padding:10px 0;
    overflow:visible;
  }
  .box01 .hddtbox,
  .box01 .zjkcbox,
  .box01 .hyzxbox{
    width:auto;
    padding:0;
    margin:0 0 18px;
  }
  .box01 .hyzxbox{ margin-bottom:0; }

  /* .box02 快捷入口 */
  .box02{
    height:auto;
    background:none;
    padding:10px 0;
  }
  .box02 .FastTrack01{
    height:auto;
    padding:0;
  }
  .box02 .FastTrack01 a{
    float:none;
    display:block;
    width:auto;
    height:auto;
    padding:0;
    margin:0 0 10px;
  }

  /* 底部合作 logo 横向滚动条 */
  .LinkScroll01{
    width:auto;
    left:0;
    height:auto;
    padding:0 8px;
    margin-top:8px;
  }
  .LinkScroll01 .left_01,
  .LinkScroll01 .right_01{ display:none; }
  .LinkScroll01 #demo{
    width:auto;
    margin:0;
  }


/* ============================================================================
   六、内页两栏（197px 侧栏 + 796px 正文）→ 单栏，正文优先
   .main 的原背景是 mlbg.gif 竖线，手机上去掉
   ========================================================================== */

  .main{
    background:none;
    display:flex;
    flex-direction:column;
    margin-bottom:10px;
  }
  .main .mlnr,
  .main .mrnr{
    float:none;
    width:auto;
  }
  .main .mrnr{ order:1; }   /* 正文在前 */
  .main .mlnr{ order:2; }   /* 栏目导航在后 */
  .main .clear{ order:3; }

  /* 内容区顶部 banner（796x151） */
  .banner{ height:auto; }
  .banner img{
    display:block;
    width:100%;
    height:auto;
  }

  /* 面包屑 */
  .location{
    height:auto;
    line-height:1.9;
    padding:8px 10px;
    font-size:13px;
  }


/* ============================================================================
   七、标题与正文容器：桌面版大量使用 40~50px 的上内边距，手机上要收紧
   ========================================================================== */

  .title01{
    padding:20px 0 10px;
    margin:0 12px;
    font-size:16px;
  }
  .title02{
    padding:18px 0 10px;
    margin:0 12px;
    font-size:16px;
    line-height:1.5;
  }
  .title03{
    padding:12px 0 0;
    height:auto;
  }
  .title04{
    height:auto;
    padding:20px 0 10px;
    font-size:16px;
  }
  .title04 strong{
    font-size:20px;
    padding-right:12px;
  }

  .confont01{ padding:14px 12px 24px; }
  .confont02{ margin:0 12px; }
  .confont03{ margin:0 12px; }
  .confont04{ margin:0 12px 30px; }
  .confont05{ padding:14px 12px; }
  .confont06{
    height:auto !important;
    min-height:0;
    padding:0 12px 20px;
  }
  .confont07{ padding:14px 12px 30px; }
  .confont08{ margin:0 12px 12px; }

  /* .confont09 是「图左文右」：213px 图 + 240px 左内边距 */
  .confont09{
    height:auto !important;
    min-height:0;
    margin:0 12px;
    padding:14px 12px !important;
  }
  .confont09 img{
    position:static;
    width:100%;
    max-width:213px;
    height:auto;
    margin:0 0 10px;
  }

  .date01{
    margin:0 12px;
    height:auto;
    font-size:12px;
    line-height:1.9;
    padding:5px 0;
  }
  .Back{ margin:0 12px; }


/* ============================================================================
   八、列表 / 表格类
   ========================================================================== */

  /* 新闻列表：日期原为绝对定位，手机改为另起一行 */
  .newslist01 li{
    height:auto;
    line-height:1.9;
    padding:5px 0 5px 14px;
  }
  .newslist02 li{
    height:auto;
    font-size:14px;
    line-height:1.8;
    padding:6px 0;
  }
  .newslist03 li,
  .newslist04 li{
    height:auto;
    line-height:1.8;
    padding:8px 0;
  }
  .newslist02 li span,
  .newslist03 li span,
  .newslist04 li span{
    position:static;
    display:block;
    font-size:12px;
    line-height:1.6;
  }
  .newslist02{ padding:16px 12px 6px; }
  .newslist03{ padding:0 12px 16px; }
  .newslist04{ padding:12px; }

  /* 课程表行：dt 470px + dd 263px → 纵向 */
  .kctclist{
    height:auto;
    margin:0 12px;
  }
  .kctclist dt{
    width:auto;
    float:none;
    padding-left:0;
  }
  .kctclist dd{
    width:auto;
    float:none;
    height:auto;
    margin-top:8px;
    padding:12px;
  }

  /* 案例列表：117px 缩略图 + 132px 左内边距 */
  .prolist01{ padding:0 10px 8px; }
  .prolist01 li{
    height:auto;
    min-height:0;
    padding:16px 10px 16px 104px;
  }
  .prolist01 li img{
    left:0;
    top:16px;
    width:92px;
    height:auto;
  }

  /* 双列卡片 368px → 单列 */
  .prolist02 li{
    float:none;
    width:auto;
    height:auto;
    padding:0 0 14px;
  }
  .prolist02 li .libg01{
    width:auto;
    height:auto;
  }

  /* 讲师/人物：图左文右 545px 定宽 */
  .dlcon01 dt{
    float:none;
    padding:0;
  }
  .dlcon01 dd{
    float:none;
    width:auto;
    padding:12px 0 0;
    border-top:1px solid #ddd;
  }
  .dlcon01{ margin:0 12px; }

  .dlcon02{
    height:auto;
    margin:0 12px;
    padding:0;
  }
  .dlcon02 dt{
    width:auto;
    float:none;
  }
  .dlcon02 dd{ float:none; }
  .dlcon02 dd img{
    width:100%;
    max-width:216px;
    height:auto;
  }

  /* 表单类：定宽输入框改满宽 */
  .formbox01{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    margin:10px 0;
  }
  .wbk01,.wbk02,.wbk03,.wbk04{
    width:100%;
    box-sizing:border-box;
    height:32px;
    line-height:32px;
  }
  .but01,.but02,.but03{ height:34px; }

  /* 公开课「全年课表」：13 列（课程/天数/价格 + 12 个月）在手机上无法压缩。
     .tab01 本身是包裹表格的 div，让它横向滚动，表格保持 772px 原宽，
     否则列会被压成一字一行。
     注意：overflow-x 会让它成为 BFC，从而去避让上方的浮动标签条，
     必须同时 clear:both，否则宽度会被挤成几十像素 */
  .tab01{
    clear:both;
    margin:0 8px;
    padding-bottom:20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tab01 table{ max-width:none; }

  .tab02{ margin:0 12px; }
  .tab03{ margin:0 12px; }

  /* 页内标签条 */
  .bthdm02{ margin:0 8px; height:auto; }
  .bthdm02 .bthdm02ri{ position:static; margin-top:6px; }
  .bthdm03{ margin:0 10px; height:auto; padding-top:10px; }
  .bthdm04{ margin:0 10px; }

  /* FAQ */
  .faqlist01{ padding:8px 12px; }
  .faqlist02{ padding:16px 12px 0; }

  /* 分页 */
  .page_01{
    height:auto;
    margin:10px 12px;
    text-align:center;
    line-height:2.4;
  }

  /* 友情链接 */
  .linkul{ padding:16px 0 0; }
  .linkul li{
    float:none;
    display:inline-block;
    vertical-align:top;
    width:49%;
    height:auto;
    padding:0 0 10px;
    box-sizing:border-box;
  }
  .linkul li img{
    width:100%;
    max-width:141px;
    height:auto;
  }

  /* 富文本正文里的图片、表格（后台编辑器输出，可能带固定宽高） */
  .liblock img{ max-width:100%; height:auto; }
  .liblock table{ width:100% !important; }
  .tc25{ padding:0 12px; }
  .gao40{ height:16px; }


/* ============================================================================
   九、页脚：994px + 两侧绝对定位 → 居中堆叠
   ========================================================================== */

  .footer{
    width:auto !important;
    height:auto !important;
    position:static;
    padding:16px 10px !important;
    background:#f5f5f5 !important;
    text-align:center;
    line-height:1.9;
    font-size:13px;
  }
  .footer .footle,
  .footer .footri{
    position:static;
    height:auto;
    padding:0;
    background:none;
    text-align:center;
  }
  .footer img{ max-width:100%; height:auto; }

}


/* ============================================================================
   十、小屏手机（<=480px）：进一步压缩留白、放大点击区
   ========================================================================== */
@media screen and (max-width:480px){

  body{ font-size:14px; }

  /* 小屏窄，导航标签字号微调，保持单行不折 */
  .header #nav li strong a[class]{
    font-size:12px;
    padding:0 7px;
  }

  .header .logo img{ max-width:126px; }
  .header .uplink{ font-size:12px; }
  .header .uptel{ font-size:12px; }

  .title01,.title02{ margin:0 8px; }
  .confont01,.confont05,.confont07{ padding-left:8px; padding-right:8px; }
  .confont02,.confont03{ margin:0 8px; }
  .confont09{ margin:0 8px; padding-left:8px !important; padding-right:8px !important; }

  .title04{ font-size:15px; }
  .title04 strong{ font-size:17px; }

  .prolist01 li{ padding-left:84px; }
  .prolist01 li img{ width:74px; }

  .linkul li{ width:100%; }

  .page_01 a,.page_01 span{ padding:4px 5px; }
}


/* ============================================================================
   十一、打印（保持桌面版式，避免打印出手机样式）
   ========================================================================== */
@media print{
  .header #nav,
  .header .upsear{ display:none; }
}