/* ===================================================================
 * 红师教育官网 — H5 响应式适配样式
 * -------------------------------------------------------------------
 * 项目：红师教育官网迭代升级（H5 + SEO + GEO）
 * 文件：/Public/newfan/css/responsive.css
 * 建立：2026-10-08  WorkBuddy
 * -------------------------------------------------------------------
 * 设计原则（增量覆盖策略）：
 *   1. 本文件不改动任何原有 CSS，全部通过 @media 覆盖实现响应式
 *   2. 桌面端（≥1200px）零影响 —— 所有规则均包裹在媒体查询内
 *   3. 回滚方式：删除 HTML 中引用本文件的 <link> 一行即可
 *   4. 原站布局技术：float + 硬编码 width:1200px
 *
 * 断点体系：
 *   ≥1200px      桌面端（原样，不干预）
 *   992–1199px   小桌面 / 大平板横屏
 *   768–991px    平板竖屏
 *   ≤767px       手机（主要目标）
 *   ≤480px       小屏手机
 * =================================================================== */


/* ===================================================================
 * 一、全局基础（≤767px 手机端）
 * =================================================================== */
@media screen and (max-width: 767px) {

  /* ---------- 1.1 全局重置 ---------- */
  html {
    /* 防止 iOS 横屏时自动放大字号 */
    -webkit-text-size-adjust: 100%;
    /* 防止横向溢出 */
    overflow-x: hidden;
  }

  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
    font-size: 14px;
  }

  /* 所有硬编码固定宽度容器改为全宽
   * 原站骨架（实测提取）：
   *   .topMin{width:1200px}  .nav{width:1200px}  .logo{width:1200px}
   *   .footLink{width:1200px}  .logo_search{width:1200px}
   *   #navActive{width:1000px}  .wrap{width:980px}
   *   .homeTop{width:1200px}   .content{width:1200px} */
  .topMin,
  .homeTop,
  .top_wrap,
  .wrap,
  .container,
  .w1200,
  .content,
  .footLink,
  .logo_search,
  .nav_wrap .nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }

  /* 图片自适应，防止溢出 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 表格自适应（课程表等） */
  table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}

/* ===================================================================
 * 二、顶部工具条（.top2 / .topMin / .topNav）
 * =================================================================== */
@media screen and (max-width: 767px) {

  /* 顶部灰条：原为 height:35px，移动端简化处理 */
  .top2 {
    width: 100% !important;
    height: auto !important;
    min-height: 32px;
    padding: 4px 0;
  }

  .topMin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto !important;
  }

  .topMin > span {
    line-height: 24px !important;
    font-size: 12px;
    flex: 1 1 auto;
  }

  /* 社交图标组：解除 float，改为横向排列 */
  .topNav {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto !important;
  }

  .topNav a {
    float: none !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-right: 0 !important;
    /* 触控友好尺寸：≥44px 是移动端可点击标准 */
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .topNav img {
    width: 20px !important;
    height: 20px !important;
  }

  /* 隐藏悬浮二维码弹层（移动端无 hover，且易误触） */
  .indexWxBox,
  .indexQwBox,
  .indexWbBox {
    display: none !important;
  }

  /* 隐藏购物车文字，保留图标 */
  .topNav .topShopping {
    width: auto !important;
    padding-left: 32px !important;
    background-size: 16px 16px !important;
    font-size: 12px;
  }

}

/* ===================================================================
 * 三、主导航（.header / .nav / .logo）
 * 说明：原站为横向导航条，移动端改为可横向滚动的紧凑布局
 *       真正的汉堡菜单需配合 JS，此处先做纯 CSS 可用化处理
 * =================================================================== */
@media screen and (max-width: 767px) {

  .header {
    width: 100% !important;
    height: auto !important;
    /* flex 布局：logo 左侧，导航右侧 */
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px !important;
    box-sizing: border-box;
    position: relative;
  }

  /* Logo 缩小
   * 原 CSS: .logo{ width:1200px; height:80px; margin:0 auto; text-indent:-999em }
   * 注意：原站 logo 用 text-indent:-999em 藏文字、背景图显示 logo */
  .header .logo,
  .logo {
    float: none !important;
    width: 120px !important;
    max-width: 40vw !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    background-size: contain !important;
    background-position: left center !important;
  }

  /* 导航容器：占满剩余宽度 */
  .nav {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    order: 3;
    margin-top: 8px;
  }

  /* 导航项横向滚动，避免换行导致的布局错乱
   * 关键：原 CSS 为 #navActive{ width:1000px; margin:auto }，
   *      必须覆盖宽度，否则容器本身就会撑破移动端视口 */
  #navActive {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    line-height: normal !important;
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }

  #navActive::-webkit-scrollbar {
    display: none;
  }

  /* 原 CSS: #navActive>a{ float:left; margin-right:20.4px }
   * 移动端解除 float，改为 flex 项 */
  #navActive > a {
    float: none !important;
    flex: 0 0 auto;
    padding: 8px 12px !important;
    margin: 0 4px 0 0 !important;
    font-size: 14px !important;
    line-height: normal !important;
    white-space: nowrap;
    /* 触控友好 */
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* 导航下划线指示器：移动端隐藏（横滚布局下位置会错乱） */
  #navActive i {
    display: none !important;
  }

  /* 导航角标（如"热"字标签）缩小 */
  .nav_tip {
    font-size: 10px !important;
    line-height: 14px !important;
    width: 22px !important;
    top: -4px !important;
    right: -8px !important;
  }

  /* 二级悬浮菜单：移动端隐藏（无 hover 场景） */
  .homeJikao {
    display: none !important;
  }

}

/* ===================================================================
 * 四、首页顶部区（.homeTop / .verticalNav）
 * =================================================================== */
@media screen and (max-width: 767px) {

  /* 原为 height:22px; width:1200px，移动端改为自动高度 */
  .homeTop {
    height: auto !important;
    min-height: 32px;
    margin: 8px auto !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  .verticalNav {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  .verticalNav i {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
  }

}

/* ===================================================================
 * 五、轮播与 Banner（.bannerImg / .bannerBox / .banLeft / .banCont）
 * 说明：swiper 轮播需等比缩放，移动端改纵向堆叠
 * =================================================================== */
@media screen and (max-width: 767px) {

  /* Banner 容器全宽 */
  .bannerImg,
  .bannerBox {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 左侧分类栏：移动端改为全宽，取消浮动 */
  .banLeft {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px;
  }

  /* 轮播区全宽 */
  .banCont {
    float: none !important;
    width: 100% !important;
    height: auto !important;
  }

  /* swiper 容器等比 */
  .swiper-container.banner {
    width: 100% !important;
    height: auto !important;
    /* 移动端按 16:9 左右比例 */
    aspect-ratio: 16 / 9;
  }

  .swiper-container.banner .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }

  /* 原站 .banner img 为 width:1920px + left:50% + margin-left:-960px（居中裁切黑边）
     小屏必须同时复位 width/left/margin-left，否则图片被推到屏幕外只剩黑底 */
  .swiper-container.banner .swiper-slide img,
  .banner img {
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    position: static !important;
    object-fit: cover;
    display: block;
  }

  /* 缩略图轮播（顶部 verticalNav 内）等比 */
  .swiper-container:not(.banner) {
    width: 100% !important;
    height: auto !important;
  }

  .swiper-slide {
    height: auto !important;
  }

  /* 轮播左右箭头：移动端隐藏（改用手势滑动） */
  .banner-button-prev,
  .banner-button-next {
    display: none !important;
  }

  /* 侧边悬浮广告等：移动端隐藏，避免遮挡内容
     注意：严禁使用 `.leyu_close ~ *` 这类通配兄弟选择器——
     .leyu_close 与 .content / .footer-nav 是同级元素，会导致整页内容被隐藏 */
  .side-ad,
  .float-ad,
  .leyu_close {
    display: none !important;
  }

}

/* ===================================================================
 * 六、主内容区（.content / .left / .right / .city）
 * 说明：原站左右两栏 float 布局，移动端改为单列堆叠
 * =================================================================== */
@media screen and (max-width: 767px) {

  .content {
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    /* 清除浮动 */
    overflow: hidden;
  }

  /* 左侧主栏：取消 float，全宽 */
  .content .left,
  .content .fl.left,
  .left_list {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
  }

  /* 右侧栏：取消 float，全宽 */
  .content .right,
  .content .fr.right,
  .right_list,
  .fr1 {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
  }

  /* 通用 float 工具类在移动端全部解除 */
  .fl,
  .fr {
    float: none !important;
  }

  /* 城市选择区：原 height:230px 固定高，移动端自适应 */
  .city {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 10px;
  }

  /* 各内容模块 */
  .policy,
  .knowledge,
  .news_tab,
  .news,
  .box {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-bottom: 15px !important;
  }

  /* 模块内标题栏 */
  .knowledge .hd,
  .knowledge .bd,
  .news_tab .hd,
  .news_tab .bd {
    float: none !important;
    width: 100% !important;
  }

}

/* ===================================================================
 * 七、列表与卡片
 * =================================================================== */
@media screen and (max-width: 767px) {

  /* 课程/资讯列表项：触控友好 */
  .left_list li,
  .right_list li,
  .news_tab li,
  .list li {
    min-height: 44px;
    line-height: 1.6 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }

  /* 列表文字截断，防止溢出 */
  .left_list li a,
  .right_list li a,
  .news_tab li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 最多两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
  }

}

/* ===================================================================
 * 八、页脚（.footer-*）
 * =================================================================== */
@media screen and (max-width: 767px) {

  .footer-wrapper,
  .footer-nav,
  .footer-nav-menus,
  .footer-nav-submenus,
  .footer-nav-submenus-inner,
  .footer-copyright-wrapper,
  .footer-copyright-container,
  .footer-link,
  .footer-law {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  /* 页脚导航：改为两列网格 */
  .footer-nav-menus {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .footer-nav-submenus {
    margin-bottom: 12px;
  }

  .footer-nav-submenus-link {
    display: block;
    line-height: 1.8;
    font-size: 13px;
  }

  /* 二维码区域居中 */
  .footer-nav-submenus-qr {
    text-align: center;
    margin: 10px 0;
  }

  .footer-nav-submenus-qr img {
    width: 100px !important;
    height: 100px !important;
  }

  /* 页脚图标 */
  .footer-icon-weibo,
  .footer-icon-zhihu {
    display: inline-block;
    margin: 0 6px;
  }

  /* 版权信息 */
  .footer-copyright {
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
    padding: 10px;
    word-break: break-all;
  }

  .footer-record {
    text-align: center;
    font-size: 12px;
    padding-bottom: 10px;
  }

  /* 联系方式的电话链接可点击 */
  .footer-nav-contact-phone {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    font-size: 15px;
  }

}

/* ===================================================================
 * 九、表单（报名 / 咨询 / 登录）
 * =================================================================== */
@media screen and (max-width: 767px) {

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box;
    /* 防止 iOS 聚焦时自动放大（字号需 ≥16px） */
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }

  /* 提交按钮：移动端全宽，便于点击 */
  button,
  input[type="submit"],
  .btn,
  .btn-submit {
    min-height: 44px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 表单行改为单列 */
  .form-row,
  .form-item {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px;
  }

}

/* ===================================================================
 * 十、平板竖屏（768–991px）—— 中间过渡态
 * 说明：此区间需同时处理「1200px 容器」与「1000px 导航」两类硬编码宽度
 * =================================================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {

  body {
    overflow-x: hidden;
  }

  /* 容器保持原宽但允许收缩 */
  .topMin,
  .homeTop,
  .content,
  .footLink,
  .logo_search,
  .wrap,
  .nav_wrap .nav,
  .top_wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* 关键：导航容器 1000px 必须覆盖，否则撑破视口 */
  .nav {
    height: auto !important;
    overflow: visible !important;
  }

  #navActive {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: auto !important;
    line-height: normal !important;
  }

  #navActive > a {
    float: none !important;
    margin: 0 8px 0 0 !important;
    padding: 6px 4px !important;
    font-size: 15px !important;
    white-space: nowrap;
  }

  /* Logo 收窄 */
  .logo,
  .header .logo {
    width: 200px !important;
    max-width: 200px !important;
  }

  /* 中屏下左右栏适当收窄，保持并排 */
  .content .left,
  .content .fl.left {
    width: 62% !important;
    float: left !important;
  }

  .content .right,
  .content .fr.right {
    width: 34% !important;
    float: right !important;
  }

  /* 轮播与 Banner 容器同样存在 1200px 硬编码，平板需一并覆盖 */
  .bannerImg,
  .bannerBox,
  .banLeft,
  .banCont,
  .swiper-container,
  .swiper-container.banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    box-sizing: border-box;
  }

  .swiper-container.banner {
    aspect-ratio: 16 / 7;
  }

  /* 原站 .banner img 为 width:1920px + left:50% + margin-left:-960px（居中裁切黑边）
     小屏必须同时复位 width/left/margin-left，否则图片被推到屏幕外只剩黑底 */
  .swiper-container.banner .swiper-slide img,
  .banner img {
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    position: static !important;
    object-fit: cover;
    display: block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

}

/* ===================================================================
 * 十一、小桌面 / 大平板横屏（992–1199px）
 * 说明：1024px 在此区间，同样需覆盖 1200px 与 1000px 硬编码
 * =================================================================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {

  body {
    overflow-x: hidden;
  }

  .topMin,
  .homeTop,
  .content,
  .footLink,
  .logo_search,
  .wrap,
  .nav_wrap .nav,
  .top_wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* 导航容器 1000px 覆盖 */
  #navActive {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    height: auto !important;
    line-height: normal !important;
  }

  #navActive > a {
    float: none !important;
    margin: 0 10px 0 0 !important;
    padding: 6px 4px !important;
    white-space: nowrap;
  }

  .logo,
  .header .logo {
    width: 260px !important;
    max-width: 260px !important;
  }

  /* 轮播与 Banner 容器 1200px 硬编码覆盖（与平板断点保持一致） */
  .bannerImg,
  .bannerBox,
  .banLeft,
  .banCont,
  .swiper-container,
  .swiper-container.banner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    float: none !important;
    box-sizing: border-box;
  }

  .swiper-container.banner {
    aspect-ratio: 16 / 7;
  }

  /* 原站 .banner img 为 width:1920px + left:50% + margin-left:-960px（居中裁切黑边）
     小屏必须同时复位 width/left/margin-left，否则图片被推到屏幕外只剩黑底 */
  .swiper-container.banner .swiper-slide img,
  .banner img {
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    position: static !important;
    object-fit: cover;
    display: block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

}

/* ===================================================================
 * 十二、小屏手机（≤480px）—— 进一步压缩
 * =================================================================== */
@media screen and (max-width: 480px) {

  body {
    font-size: 13px;
  }

  .header .logo {
    height: 34px !important;
    line-height: 34px !important;
    font-size: 16px !important;
  }

  .topMin > span {
    font-size: 11px;
  }

  #navActive > a {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* 页脚改为单列 */
  .footer-nav-menus {
    grid-template-columns: 1fr;
  }

  /* 轮播改用更方的比例 */
  .swiper-container.banner {
    aspect-ratio: 4 / 3;
  }

}


/* ===================================================================
 * 十三、触摸设备优化（不依赖具体宽度）
 * =================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* 触摸设备上取消 hover 效果，避免点击后样式残留 */
  .topNav a:hover,
  #navActive > a:hover {
    /* 保持原样，不添加 hover 变化 */
  }

  /* 增大可点击区域 */
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }

}


/* ===================================================================
 * 十四、打印样式（避免打印时出现移动端布局）
 * =================================================================== */
@media print {

  .top2,
  .header .nav,
  .bannerImg,
  .footer-nav,
  .side-ad {
    display: none !important;
  }

}