/* ============================================================
   移动端顶部导航栏优化（d.xinhandan.net）
   ------------------------------------------------------------
   需求：
   1. 手机版打开页面：导航栏固定在屏幕顶部，背景从上到下
      由现有颜色 #7A2930 渐变至透明，直接透出下方幻灯片画面
   2. 导航栏位置：悬浮在下面幻灯片的上方（幻灯片从页面
      最顶部开始，导航栏盖在幻灯片顶部区域）
   3. 导航栏统一高度（手机 / 平板均为同一高度）
   4. 点击按钮展开的导航菜单：背景改为与导航栏相同的
      红色渐变（#7A2930 → 透明）
   5. 手机端幻灯片图片加高（51.3% → 70%）
   6. 手机端去掉幻灯片上的搜索框
   7. 导航顶部加载进度横线（渐变红色，按加载进度填充；
      加载完成走满 100% 后一直显示，不消失；
      需配合 page-progress.js 使用，全宽度生效）
   8. 弹出菜单内所有残留蓝色元素统一改为页面顶部红色 #7A2930
   现有颜色：
     - 顶部导航栏：#7A2930（.header .top 的背景色）
     - 展开菜单原蓝色：rgba(12,73,148,.95) / #2b6dbf /
       #446c9d / #3478cc / #2c4780
   仅移动端生效（≤1100px），电脑端保持原样。
   ------------------------------------------------------------
   使用方式（二选一）：
   A. 把本文件内容追加到 /skin/sgtj/css/common.css 末尾并上传；
   B. 将本文件上传到 /skin/sgtj/css/mobile-nav-fixed.css，
      替换原文件（页面 <head> 中已通过
      <link rel="stylesheet" href="/skin/sgtj/css/mobile-nav-fixed.css">
      引入，直接覆盖即可）。
   ============================================================ */

@media screen and (max-width:1100px){

  /* 1. 顶部导航栏固定：页面滚动时始终停留在屏幕顶部 */
  .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
  }

  /* 2. 导航栏统一高度（手机 / 平板一致）+ 渐变透明背景 */
  .header .top{
    display: flex;
    align-items: center;
    height: 56px;
    line-height: 56px;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #7A2930 0%, rgba(122,41,48,.85) 25%, rgba(122,41,48,.5) 55%, rgba(122,41,48,0) 100%);
    background: -webkit-linear-gradient(top, #7A2930 0%, rgba(122,41,48,.85) 25%, rgba(122,41,48,.5) 55%, rgba(122,41,48,0) 100%);
    background: -moz-linear-gradient(top, #7A2930 0%, rgba(122,41,48,.85) 25%, rgba(122,41,48,.5) 55%, rgba(122,41,48,0) 100%);
    background: -o-linear-gradient(top, #7A2930 0%, rgba(122,41,48,.85) 25%, rgba(122,41,48,.5) 55%, rgba(122,41,48,0) 100%);
  }

  /* 3. 幻灯片从页面最顶部开始：导航栏悬浮于幻灯片上方，
        渐变透明部分直接透出幻灯片画面，无白色空隙 */
  body{
    padding-top: 0;
  }

  /* 4. 点击按钮展开的移动端菜单：背景改为与导航栏相同的红色渐变，
        从上到下，由 #7A2930 渐变至透明（覆盖 common.css 里的蓝色背景） */
  .mobile-inner-nav{
    background-color: #7A2930;
    background: linear-gradient(to bottom, rgba(122,41,48,.98) 0%, rgba(122,41,48,.9) 25%, rgba(122,41,48,.6) 55%, rgba(122,41,48,.3) 75%, rgba(122,41,48,0) 100%);
    background: -webkit-linear-gradient(top, rgba(122,41,48,.98) 0%, rgba(122,41,48,.9) 25%, rgba(122,41,48,.6) 55%, rgba(122,41,48,.3) 75%, rgba(122,41,48,0) 100%);
    background: -moz-linear-gradient(top, rgba(122,41,48,.98) 0%, rgba(122,41,48,.9) 25%, rgba(122,41,48,.6) 55%, rgba(122,41,48,.3) 75%, rgba(122,41,48,0) 100%);
    background: -o-linear-gradient(top, rgba(122,41,48,.98) 0%, rgba(122,41,48,.9) 25%, rgba(122,41,48,.6) 55%, rgba(122,41,48,.3) 75%, rgba(122,41,48,0) 100%);
  }

  /* 5. 手机端：导航栏下方的幻灯片图片高度增加
        （原 51.3% → 70%；选择器加前缀提高优先级，确保覆盖 index.css） */
  .wrap_banner .Banner .swiper-wrapper,
  .wrap_banner .Banner .swiper-slide-active .slick-img,
  .wrap_banner .Banner .slick-img{
    padding-bottom: 70%;
  }

  /* 6. 手机端：去掉幻灯片上的搜索框 */
  .wrap_banner .banner_ser{
    display: none;
  }

  /* ============================================================
     7. 弹出菜单内所有残留蓝色 → 页面顶部红色 #7A2930
     （下面这些蓝色原来自 common.css，之前只改了菜单大背景，
       子菜单、悬停高亮、分隔线、箭头、搜索框仍是蓝色）
     ============================================================ */

  /* 7.1 菜单项底部分隔线：蓝 #446c9d → 半透明白（红底上清晰、不带蓝调） */
  .mobile-inner-nav a{
    border-bottom: solid 1px rgba(255,255,255,.15);
  }

  /* 7.2 当前/点击高亮项背景：蓝 #2b6dbf → 亮红 #aa2b37 */
  .mobile-inner-nav li.on{
    background-color: #aa2b37;
  }
  .mobile-inner-nav li.on a{
    color: #fff;
  }

  /* 7.3 右侧展开/收起箭头图标颜色：深蓝 #2c4780 → 白色 */
  .mobile-inner-nav li strong{
    color: rgba(255,255,255,.9);
  }

  /* 7.4 展开的子菜单面板背景：蓝 #2b6dbf → 不透明红色 */
  .mobile_subNav{
    background: rgba(122,41,48,.95);
  }

  /* 7.5 菜单顶部“注册 / 登录 / 网络课程”之间的竖分隔线：蓝 #446c9d → 半透明白 */
  .mobile_topNav a{
    border-right: rgba(255,255,255,.2) 1px solid;
  }

  /* 7.6 菜单内搜索框：蓝 #3478cc（下划线 + 搜索按钮底色）→ 红色 #7A2930 */
  .mobile_search .search{
    border-bottom: #7A2930 2px solid;
    background: #fff;
  }
  .mobile_search input.notxt1{
    background: url(../images/search.png) no-repeat center #7A2930;
    font-size: 0;          /* 隐藏按钮上的 "Search" 文字，只留放大镜图标 */
    text-indent: -9999px;  /* 兜底：旧浏览器也不显示文字 */
    color: transparent;
  }

  /* 7.7 右上角搜索浮层：手机端自适应宽度
        （common.css 把搜索框写死成 500px，窄屏左右溢出、按钮跑出屏幕，看着是乱的） */
  .search_box .ser{
    width: auto;
    left: 15px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .search_box .ser .search{
    width: 100%;
    right: 0;
  }
  .search_box .close{
    right: 15px;
    top: 64px;            /* 刚好在 56px 固定导航栏下方，不跟导航上的搜索图标重叠 */
    width: 44px;
    height: 44px;
  }

  /* 7.8 菜单项文字强制用固定像素，防止内页根字号把字撑爆
        （aboutnew.css 在 ≤1000px 把 html 根字号设成 100px，
          菜单用的 1.4rem/1.5rem 会变成 140/150px，字巨大；
          改回 px 后首页、内页字号一致） */
  .mobile-inner-nav a{ font-size: 16px; }
  .mobile-inner-nav dd a{ font-size: 15px; }
  .mobile_topNav a{ font-size: 13px; }
  .mobile_search input.notxt{ font-size: 14px; }
  .mobile-inner-nav li strong{ font-size: 16px; }   /* 右侧展开箭头图标，原 1.4rem 被撑成 140px */

  /* 7.9 手机版顶部 LOGO（.gp_m_logo）垂直居中
        原 <a> 继承了导航栏 line-height:56px，LOGO 图又是 inline 按基线对齐，
        被顶到上方、看着没居中；改成 flex 居中并复位 line-height */
  .gp_m_logo{
    display: flex !important;
    align-items: center !important;
  }
  .gp_m_logo a{
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    line-height: 1 !important;
  }
  .gp_m_logo img{
    display: block !important;
    margin-top: 8px;        /* 再整体往下挪（居中后共下移 8px） */
  }
  
.site-footer{
  background: #1a1a1a !important;
  
}
.site-footer .wrap{
  text-align: center !important;
  padding: 0 10px !important;
}
.site-footer p{

 
  line-height: 1.6 !important;
  margin: 0 !important;
  color: #b9ab90 !important;
}

.site-footer p a{
  color: #e9dcc0 !important;
  text-decoration: none !important;
}


}

/* ============================================================
   8. 导航顶部加载进度横线（渐变红色，全宽度生效）
   - 页面加载时从左向右按进度填充
   - 加载完成时横线走满 100%，并一直显示（不消失）
   对应 JS：page-progress.js（需在页面中引入）
   ============================================================ */
#page-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(to right, #7A2930 0%, #AA2B37 55%, #E2574C 100%);
  background: -webkit-linear-gradient(left, #7A2930 0%, #AA2B37 55%, #E2574C 100%);
  background: -moz-linear-gradient(left, #7A2930 0%, #AA2B37 55%, #E2574C 100%);
  background: -o-linear-gradient(left, #7A2930 0%, #AA2B37 55%, #E2574C 100%);
  z-index: 10000;
  box-shadow: 0 0 6px rgba(170, 43, 55, .55);
  border-radius: 0 2px 2px 0;
  transition: width .3s ease;
}

/* ============================================================
   9. 页面底部版权栏（京ICP备2023021691号-6 · 溯古通今书法工程）
      墨黑背景：#1a1a1a（电脑端 / 手机端一致）
   ============================================================ */
.site-footer{
  background: #1a1a1a !important;
}

/* ============================================================
   10. 首页「名家题词」手机版改为左右滑动（横向轮播）
      仅手机 ≤640px：列表不换行、横向可滑动、scroll-snap 吸附；
      每张卡占 46%，一屏两张并露出下一张边缘；隐藏滚动条。
   ============================================================ */
@media screen and (max-width:640px){
  .wrap_mode01{padding:10px 0; }
  .index_title {  margin-bottom:1px;}  
  
  .tici_list{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 !important;
    padding: 0 0 10px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tici_list::-webkit-scrollbar{ display: none; }
  .tici_list li{
    flex: 0 0 44% !important;
    width: 44% !important;
    margin: 0 3% !important;          /* 一屏两张、左右对称留白，整体居中 */
    scroll-snap-align: center;
  }

  /* 10.2 左右切换箭头按钮（红色圆形，由 tici-nav.js 生成） */
  .index_tici{ position: relative !important; }
  .tici-nav-arrow{
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #aa2b37;
    color: #fff;
    border: 2px solid #fff;
    font-size: 24px;
    line-height: 38px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(170,43,55,.6);
    z-index: 20;
    cursor: pointer;
    padding: 0;
  }
  .tici-nav-left{ left: 6px; }
  .tici-nav-right{ right: 6px; }

  /* ============================================================
     11. 「第六期溯古通今书法高研班剪影」手机版适配
        桌面是 4 列不规则网格 + aspect-ratio:1200/445，窄屏被压得很小；
        手机改成两列等宽、4:3 照片，标题/内边距缩小。
     ============================================================ */
  .sjgl-title{
    font-size: 24px !important;
    letter-spacing: 2px !important;
    margin: 0 0 46px !important;
  }
  .sjgl-box{
    padding: 24px 12px 30px !important;
  }
  .sjgl-list{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    aspect-ratio: auto !important;
    gap: 6px !important;
  }
  .sjgl-list li{
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
  }
  .sjgl-list .list-title-1{
    min-height: 40px !important;
    padding: 18px 8px 6px !important;
  }
  .sjgl-list .list-title-1 span{
    font-size: 12px !important;
    line-height: 17px !important;
  }

  /* ============================================================
     12. 「第二届溯古通今书法展现场剪影」手机版：
        标题随屏宽自动缩放（clamp）；7 张图改横向滑动轮播，
        左右带红色切换按钮（由 tici-nav.js 生成）。
        （原 ≤640px 只显示第 1 张、其余 display:none）
     ============================================================ */
  .mode5 .tici_title .channel_title{
    font-size: clamp(20px, 6vw, 32px) !important;
    letter-spacing: 2px !important;
  }
  .mode5bot{ position: relative !important; }
  .mode5Ul{
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin: 0 !important;
    padding: 0 0 10px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mode5Ul::-webkit-scrollbar{ display: none; }
  .mode5Ul li{
    display: block !important;
    flex: 0 0 82% !important;
    width: 82% !important;
    margin: 0 9% !important;          /* 左右各留 9%，让当前图在屏幕水平居中 */
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: center;       /* 吸附时以卡片中心对齐屏幕中心 */
  }
  /* 7 张图统一大小（桌面 CSS 对 li1/li2/li4 设了不同高度，这里覆盖成一致的横版比例） */
  .mode5Ul li.li1 .img, .mode5Ul li.li2 .img, .mode5Ul li.li3 .img,
  .mode5Ul li.li4 .img, .mode5Ul li.li5 .img, .mode5Ul li.li6 .img,
  .mode5Ul li.li7 .img{
    padding-bottom: 60% !important;
  }
  /* 「第二届溯古通今书法展新闻报道」标题同样随屏宽缩放 */
  .wrap_mode03 .channel_title{
    font-size: clamp(20px, 6vw, 32px) !important;
    letter-spacing: 2px !important;
  }
  .mode5-nav-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #aa2b37;
    color: #fff;
    border: 2px solid #fff;
    font-size: 24px;
    line-height: 38px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(170,43,55,.6);
    z-index: 20;
    cursor: pointer;
    padding: 0;
  }
  .mode5-nav-left{ left: 6px; }
  .mode5-nav-right{ right: 6px; }

  /* ============================================================
     13. 「名家题词」「导师介绍」标题随屏宽缩放，上下边距同步
     ============================================================ */
 .wrap_tici { padding-top: 20px;  }
  .wrap_tici .tici_title{
    margin-bottom: 40px !important;  /* 名家题词标题距下面 20px */
  }
  .wrap_daoshi .tici_title{
    margin-bottom: clamp(16px, 4.5vw, 30px) !important;
  }
  .wrap_tici { padding: 20px 0 20px;}
  .wrap_tici .tici_title .channel_title,
  .wrap_daoshi .tici_title .channel_title{
    font-size: clamp(20px, 6vw, 32px) !important;
    letter-spacing: 2px !important;
  }
 .wrap_daoshi{padding: 20px 0 1px;}
 .mode5con{padding:1px 0;}
 
 
}

@media screen and (max-width:640px){
  .wrap_mode05 .index_05a{ text-align: center !important; }
  .wrap_mode05 .slick-list{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wrap_mode07{ display: none !important; }
  .x-footer{ padding: 0 !important; }
  .x-footer .bg2{
  height: 50% !important;
  background-size: 280% 100% !important;   /* 横向拉宽，中间空白变大 */
}
  .x-footer .cont{ width: 100% !important; }

/* 用更高优先级选择器，覆盖站点自带的 width:150px 规则 */
.x-footer .cont > div:first-child img[src*="ticibai"]{
  width: 80% !important;
  max-width: none !important;
  height: auto !important;
}
.site-footer p {height: 25px; line-height:25px;}
.site-footer { padding: 5px 0;}

  .x-footer .cont > div[style*="text-align"]{ margin: 3vw auto 0 !important; }
  .x-footer .cont{
  width: 100% !important;
  transform: translateY(-18%) !important;
}
.x-footer .cont {padding:80px 0 0 0;}
  .x-footer .foot_logo{ padding-top: 30px !important; margin: 0 auto !important; }
  .x-footer .foot_logo img{ width: 100% !important; height: auto !important; }
  .x-footer .info{ display:none;}
  .x-footer .wx{ margin-top: 2vw !important; }
  .x-footer .wx .t{ font-size: 2.1vw !important; }
  .x-footer .wx .icon img{ width: 4vw !important; height: auto !important; }
  .x-footer .wx .sub img{ width: 8.5vw !important; height: auto !important; }
  .x-footer .bg2{ background: none !important; }

 
}