@charset "utf-8";
/* ==========================================================================
   创智云在线教育 · 首页视觉改版 (cz_home_v2.css)
   --------------------------------------------------------------------------
   作用域：本文件仅由 apps/classroom/Tpl/default/Index/theme_x7.html 引入，
           因此其中所有选择器天然只作用于首页，不会影响其他页面。
   原则：只覆盖视觉，不改动任何业务逻辑 / DOM 结构 / 事件钩子。
        所有 swiper / slick / lazyload / reg_login 依赖的类名保持原样。

   设计令牌
     底色   冷调近白，不取暖米色
     强调色 单一品牌蓝 #1668E3（取自站点 logo 的立方体蓝）
     圆角   卡片 16px · 按钮/输入 10px · 标签全圆角（统一规则，全站遵守）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 面 */
  --cz-bg: #f6f8fb;
  --cz-surface: #ffffff;
  --cz-surface-2: #f1f4f9;
  --cz-surface-3: #e8eef7;

  /* 线 */
  --cz-line: #e6ebf2;
  --cz-line-strong: #d5dde9;

  /* 字 */
  --cz-ink: #0c1420;
  --cz-ink-2: #4a5769;
  --cz-ink-3: #8393a8;

  /* 品牌（单一强调色，全页统一） */
  --cz-brand: #1668e3;
  --cz-brand-hover: #1259c7;
  --cz-brand-ink: #0b3e8f;
  --cz-brand-tint: #edf3fe;
  --cz-brand-tint-2: #dbe7fd;

  /* 语义色（仅用于「免费」与「直播中」，不作为装饰） */
  --cz-free: #0b9b6b;
  --cz-live: #e8542f;

  /* 圆角体系：卡片 16 · 控件 10 · 标签全圆角 */
  --cz-r-card: 16px;
  --cz-r-ctl: 10px;
  --cz-r-pill: 999px;

  /* 阴影：一律带底色冷调，不用纯黑投影 */
  --cz-sh-sm: 0 1px 2px rgba(12, 20, 32, .05), 0 0 0 1px rgba(12, 20, 32, .03);
  --cz-sh-md: 0 4px 14px -2px rgba(12, 20, 32, .08), 0 2px 5px -2px rgba(12, 20, 32, .04);
  --cz-sh-lg: 0 18px 44px -12px rgba(12, 20, 32, .16), 0 4px 12px -4px rgba(12, 20, 32, .06);
  --cz-sh-brand: 0 8px 22px -8px rgba(22, 104, 227, .5);

  /* 节奏 */
  --cz-container: 1280px;
  --cz-gutter: 24px;
  --cz-section-gap: 84px;

  --cz-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. 页面基底与排版
   -------------------------------------------------------------------------- */
body {
  background: var(--cz-bg) !important;
  color: var(--cz-ink);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 数字统一等宽，价格 / 统计数字不跳动 */
.cz-num,
.body01-content li .title span strong,
.share-date li strong,
.newCurrContlist .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 全站统一容器 */
.header_new2,
.body01,
#swpcontent,
.settled-shcool,
.share-date,
.post-service .other-service,
.copyright-box {
  max-width: var(--cz-container) !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cz-gutter) !important;
  padding-right: var(--cz-gutter) !important;
  box-sizing: border-box !important;
}

.body01 {
  display: block !important;
  margin-top: var(--cz-section-gap) !important;
  margin-bottom: var(--cz-section-gap) !important;
  position: relative;
}

/* 区块标题：标题左、动作右；不使用 eyebrow 小标签 */
.body01 h1,
.body01 h1.titleh1 {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 22px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
  color: var(--cz-ink) !important;
  text-align: left !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
}

.body01 h1 .look-all,
.body01 h1 a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cz-ink-3) !important;
  transition: color .2s var(--cz-ease);
  white-space: nowrap;
}
.body01 h1 .look-all:hover,
.body01 h1 a:hover {
  color: var(--cz-brand) !important;
}
.body01 h1 .look-all i {
  font-size: 12px;
  margin-left: 2px;
  transition: transform .2s var(--cz-ease);
}
.body01 h1 .look-all:hover i {
  transform: translateX(3px);
}

/* 通用卡片表面 */
.cz-surface {
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
}

/* --------------------------------------------------------------------------
   3. 顶部导航
   -------------------------------------------------------------------------- */
.top {
  position: sticky !important;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--cz-line);
}

.header_new2 {
  display: flex !important;
  align-items: center;
  gap: 16px;
  height: 64px;
  float: none !important;
}
/* 说明：.top3 是 flex:0 0 auto（搜索 + 登录注册 + 机构入驻，实占 655px），
   导航 li 是 nowrap 的 flex 项、min-width:auto 不会收缩。
   两者相加曾经比容器宽 11px，多出来的部分正好是最后一项「更多」——
   它被 .top3 的搜索框盖住，线上只显示成「更」。
   下面的尺寸就是照着实测宽度配的，改动导航项数量时记得重量一遍。 */

/* 右侧功能区：旧样式下 .top3 是块级容器，会把搜索/账号/入驻竖着堆叠并溢出导航条，
   这里统一拉成一行并右对齐。 */
.header_new2 > .top3,
.header_new2 .top3 {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 8px;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
}
.top3 > .search_index {
  margin-right: 4px;
}
/* .top1 用 display:contents 让 logo 与导航直接参与 .header_new2 的 flex 布局 */
.header_new2 .top1 > .top1img,
.header_new2 .top1 > .nav {
  align-self: center;
}

/* 3.1 品牌 */
.top1 {
  display: contents !important;
}
.top1img {
  flex: 0 0 auto;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
.top1img img {
  height: 34px;
  width: auto !important;
  display: block;
}

/* 3.2 主导航 */
.nav {
  flex: 1 1 auto;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
}
.nav > ul {
  display: flex !important;
  align-items: center;
  gap: 0;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 下面几条都带 .top 前缀是有原因的：旧样式用的是
     .top .nav ul li a          (0,1,4)
     .top .nav ul li span       (0,1,4)
     .top .nav ul .course-class a:hover (0,2,3)
   只写 .nav > ul > li > a（0,1,3）会输给它们——表现为「字号/内边距改不动」
   和「下拉菜单掉到导航条下方 24px」。前缀抄全到 (0,2,n) 才压得住。 */
.top .nav > ul > li {
  position: relative;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  border-bottom: none !important;
  line-height: 64px;
}
.top .nav > ul > li > a {
  display: block;
  padding: 0 11px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 64px;
  color: var(--cz-ink-2) !important;
  text-decoration: none;
  transition: color .18s var(--cz-ease);
  white-space: nowrap;
}
.top .nav > ul > li > a:hover {
  color: var(--cz-ink) !important;
}
/* 当前项：字色加深 + 底部 2px 品牌色下划线 */
.top .nav > ul > li.active > a {
  color: var(--cz-ink) !important;
  font-weight: 600;
}
.top .nav > ul > li.active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cz-brand);
}

/* 二级下拉 */
.top .nav ul li .course-class {
  position: absolute;
  top: 100% !important;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 148px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  box-shadow: var(--cz-sh-lg) !important;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--cz-ease), transform .18s var(--cz-ease), visibility .18s;
  z-index: 30;
}
.top .nav > ul > li:hover .course-class {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.top .nav ul li .course-class a {
  padding: 9px 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--cz-ink-2) !important;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.top .nav ul li .course-class a:hover {
  background: var(--cz-brand-tint) !important;
  color: var(--cz-brand) !important;
}

/* 3.3 搜索 */
.search_index {
  flex: 0 0 240px;
  display: flex !important;
  align-items: center;
  height: 40px;
  padding: 0 6px 0 14px;
  background: var(--cz-surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--cz-r-pill) !important;
  transition: border-color .18s, background .18s, box-shadow .18s;
  position: relative;
}
.search_index:focus-within {
  background: var(--cz-surface) !important;
  border-color: var(--cz-brand) !important;
  box-shadow: 0 0 0 3px rgba(22, 104, 227, .14);
}
.search_index .bd_right {
  display: none !important;
}
.search_index_val {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}
.search_index_val > div {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.search_index_val > div p {
  margin: 0;
  font-size: 13px;
  color: var(--cz-ink-2);
  white-space: nowrap;
}
.search_index_val > div i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--cz-ink-3);
}
.search_index_val > span {
  display: none;
  position: absolute;
  top: 28px;
  left: -8px;
  padding: 6px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 12px;
  box-shadow: var(--cz-sh-lg);
  white-space: nowrap;
}
.search_index_val:hover > span {
  display: block;
}
.search_index_val > span a {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--cz-ink-2);
  border-radius: 7px;
}
.search_index_val > span a:hover {
  background: var(--cz-brand-tint);
  color: var(--cz-brand);
}
#search_combo_input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px;
  color: var(--cz-ink);
  padding: 0 8px;
  font-family: inherit;
}
#search_combo_input::placeholder {
  color: var(--cz-ink-3) !important;
}
#btn_search_site {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cz-r-pill);
  background: var(--cz-brand);
  color: #fff !important;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
#btn_search_site:hover {
  background: var(--cz-brand-hover);
}
#btn_search_site:active {
  transform: scale(.94);
}

/* 3.4 账号区 */
.nav1 {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 4px;
  float: none !important;
  margin: 0 !important;
  position: relative;
}
/* 二维码浮层：保留功能，弱化视觉 */
.look_scanning {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cz-r-ctl);
  color: var(--cz-ink-3);
  transition: background .18s, color .18s;
}
.look_scanning:hover {
  background: var(--cz-surface-2);
  color: var(--cz-ink);
}
.look_scanning > i {
  font-size: 17px;
}
.look_scanning .ewm {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  padding: 14px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  box-shadow: var(--cz-sh-lg);
  text-align: center;
}
.look_scanning:hover .ewm {
  display: block !important;
}
.look_scanning .ewm img {
  border-radius: 8px;
}
.look_scanning .ewm p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--cz-ink-3);
}

.page_header_adiv {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.page_header_adiv > li {
  float: none !important;
  line-height: 1 !important;
  font-size: 0;
}
.page_header_adiv > li > a {
  display: inline-flex !important;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1 !important;
  color: var(--cz-ink-2) !important;
  border-radius: var(--cz-r-ctl);
  transition: color .18s, background .18s;
}
.page_header_adiv > li > a:hover {
  color: var(--cz-ink) !important;
  background: var(--cz-surface-2);
}
/* 旧模板用一个 <li style="line-height:80px">丨</li> 当分隔符，撑高了导航条，这里隐掉 */
.page_header_adiv > li[style*="line-height"] {
  display: none !important;
}
/* 「注册」为主行动按钮 */
.page_header_adiv > li:last-child > a {
  color: #fff !important;
  background: var(--cz-brand);
  padding: 0 18px;
  border-radius: var(--cz-r-ctl);
  box-shadow: var(--cz-sh-brand);
}
.page_header_adiv > li:last-child > a:hover {
  background: var(--cz-brand-hover);
}
/* 登录态：用户名 + 下拉 */
.page_header_adiv .header_top_nav > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cz-ink) !important;
  font-weight: 600;
}
.login-after-position {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 8px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  box-shadow: var(--cz-sh-lg);
  z-index: 40;
}
.nav1:hover .login-after-position {
  display: block;
}
.login-after-position dd {
  margin: 0;
}
.login-after-position dd a {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--cz-ink-2);
  border-radius: 8px;
}
.login-after-position dd a:hover {
  background: var(--cz-brand-tint);
  color: var(--cz-brand);
}

/* 3.5 「机构入驻」描边按钮 */
.nav2 {
  flex: 0 0 auto;
  float: none !important;
  margin: 0 0 0 6px !important;
}
/* 「机构入驻」：模板里这个按钮本身就是 <a class="page_header_adiv">，
   不是 <ul>，所以要直接给 a 上按钮样式，不能写成后代选择器。 */
.nav2 .page_header_adiv {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  height: 38px;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1 !important;
  color: var(--cz-brand) !important;
  background: transparent;
  border: 1px solid var(--cz-brand-tint-2);
  border-radius: var(--cz-r-ctl);
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.nav2 .page_header_adiv:hover {
  background: var(--cz-brand-tint);
  border-color: var(--cz-brand);
}

/* 消息条 */
.news-msg {
  position: absolute;
  top: 70px;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 12px 40px 12px 16px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  box-shadow: var(--cz-sh-lg);
  font-size: 13px;
  color: var(--cz-ink-2);
  list-style: none;
}
.news-msg li {
  padding: 3px 0;
}
.news-msg .shanchu-ico {
  position: absolute;
  top: 8px;
  right: 12px;
  color: var(--cz-ink-3);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. 首屏：促销横幅 + 账号卡
   -------------------------------------------------------------------------- */
.section-banner {
  position: relative;
  min-width: 0 !important;
  background: var(--cz-surface-3);
  overflow: hidden;
}
.swiper-container1 .swiper-slide {
  line-height: 0;
}
.swiper-container1 .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 分页：细条状，品牌色 */
.swiper-container1 .swiper-pagination {
  bottom: 16px !important;
}
.swiper-container1 .swiper-pagination-bullet {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55) !important;
  opacity: 1 !important;
  margin: 0 3px !important;
  transition: width .25s var(--cz-ease), background .25s;
}
.swiper-container1 .swiper-pagination-bullet-active {
  width: 34px;
  background: #fff !important;
}

/* 左右箭头：圆形毛玻璃按钮，hover 才出现（保留原有显示逻辑） */
.swiper-container1 .swiper-button-prev,
.swiper-container1 .swiper-button-next {
  width: 42px !important;
  height: 42px !important;
  margin-top: -21px !important;
  border-radius: var(--cz-r-pill);
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--cz-sh-md);
  color: var(--cz-ink) !important;
  font-size: 15px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--cz-ease), background .2s;
}
.swiper-container1 .swiper-button-prev {
  left: 24px !important;
}
.swiper-container1 .swiper-button-next {
  right: 24px !important;
}
.swiper-container1 .swiper-button-prev:hover,
.swiper-container1 .swiper-button-next:hover {
  background: #fff !important;
  transform: scale(1.06);
}

/* 账号卡：白色实体卡浮于横幅之上 */
section .loginboxcont {
  /* 绝对定位 + width:auto 会收缩包裹，导致账号卡跑到横幅正中；
     显式给满宽再用 max-width 收口，卡片才会真正靠右。 */
  width: 100% !important;
  max-width: var(--cz-container) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 var(--cz-gutter) !important;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10;
}
#bannerLogin {
  position: relative !important;
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  float: right;
  width: 264px !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 20px !important;
  /* 旧样式是 rgba(255,255,255,.9)，半透明会让轮播图透上来；
     这里用不透明底色，避免卡片上出现色块。 */
  background: #fff !important;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--cz-r-card) !important;
  box-shadow: var(--cz-sh-lg);
  box-sizing: border-box;
  pointer-events: auto;
}
#bannerLogin .headimg {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px !important;
  border-radius: var(--cz-r-pill);
  overflow: hidden;
  background: var(--cz-surface-2);
}
#bannerLogin .headimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#bannerLogin .bannerbut {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
  border-radius: var(--cz-r-ctl) !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1 !important;
  text-decoration: none;
  transition: background .18s, transform .12s, box-shadow .18s;
}
#bannerLogin .butlogin {
  background: var(--cz-brand) !important;
  color: #fff !important;
  box-shadow: var(--cz-sh-brand);
}
#bannerLogin .butlogin:hover {
  background: var(--cz-brand-hover) !important;
}
#bannerLogin .butreg {
  background: var(--cz-surface) !important;
  color: var(--cz-ink) !important;
  border: 1px solid var(--cz-line-strong);
  margin-bottom: 16px !important;
}
#bannerLogin .butreg:hover {
  background: var(--cz-surface-2) !important;
}
#bannerLogin .bannerbut:active {
  transform: scale(.98);
}
#bannerLogin .banlogtext {
  padding-top: 14px;
  border-top: 1px solid var(--cz-line);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cz-ink-3);
}

/* --------------------------------------------------------------------------
   5. 服务条（APP下载 / 认证讲师 / 入驻机构）
   -------------------------------------------------------------------------- */
.body01 .my-server {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
  box-shadow: var(--cz-sh-sm);
  overflow: hidden;
  list-style: none;
}
.body01 .my-server li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 1px solid var(--cz-line) !important;
  border-bottom: none !important;
  text-align: left !important;
  transition: background .2s var(--cz-ease);
}
.body01 .my-server li:last-child,
.body01 .my-server li.border-none {
  border-right: none !important;
}
.body01 .my-server li:hover {
  background: var(--cz-brand-tint);
}
.body01 .my-server li a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  text-decoration: none;
}
.body01 .my-server li a i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  font-size: 22px !important;
  color: var(--cz-brand) !important;
  background: var(--cz-brand-tint);
  border-radius: var(--cz-r-ctl);
  transition: background .2s, color .2s;
}
.body01 .my-server li:hover a i {
  background: var(--cz-brand);
  color: #fff !important;
}
.body01 .my-server li a span {
  display: block !important;
  text-align: left !important;
}
.body01 .my-server li a h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cz-ink);
}
.body01 .my-server li a small {
  display: block;
  font-size: 12.5px;
  color: var(--cz-ink-3);
}

/* --------------------------------------------------------------------------
   6. 直播预告
   -------------------------------------------------------------------------- */
#swpcontent {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
#swiprlefr {
  float: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--cz-r-card) !important;
  overflow: hidden;
  background: var(--cz-ink);
  grid-column: 1;
  grid-row: 1;
}
#swpcontent img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 580 / 320;
  object-fit: cover;
  display: block;
}
#swpcontent .swpitem {
  background: linear-gradient(to top, rgba(8, 14, 24, .88) 0%, rgba(8, 14, 24, .45) 45%, rgba(8, 14, 24, .12) 100%) !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 28px;
  box-sizing: border-box;
}
#swpcontent .swpitem .swpitemtitle {
  width: auto !important;
  max-width: 100%;
  margin: 0 0 10px !important;
  font-size: 21px !important;
  font-weight: 650;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#swpcontent .swpitem .swpitemtime {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  margin: 0 0 18px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--cz-r-pill);
  font-size: 13px !important;
  color: rgba(255, 255, 255, .9) !important;
}
#swpcontent .swpitem .swpitemtime span {
  color: #fff !important;
  font-weight: 600;
}
#swpcontent .swpitem a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: auto !important;
  height: 40px !important;
  padding: 0 26px;
  margin: 0 !important;
  background: var(--cz-brand) !important;
  border-radius: var(--cz-r-ctl) !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #fff !important;
  float: none !important;
  transition: background .18s, transform .12s;
}
#swpcontent .swpitem a:hover {
  background: var(--cz-brand-hover) !important;
}
#swpcontent .swpitem a:active {
  transform: scale(.98);
}

/* 右侧场次列表 */
#swiprright {
  float: none !important;
  width: auto !important;
  height: auto !important;
  max-height: 372px;
  overflow-y: auto !important;
  grid-column: 2;
  grid-row: 1;
}
#swiprright::-webkit-scrollbar {
  width: 4px;
}
#swiprright::-webkit-scrollbar-thumb {
  background: var(--cz-line-strong);
  border-radius: 4px;
}
.preview-nav-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-list {
  position: relative;
  width: auto !important;
  height: auto !important;
  min-height: 84px;
  margin: 0 !important;
  padding: 16px 18px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .2s var(--cz-ease), background .2s, box-shadow .2s;
}
.preview-list:hover {
  border-color: var(--cz-line-strong);
}
/* 选中态：左侧品牌色指示条 */
.preview-list.preview-list-active {
  background: var(--cz-brand-tint);
  border-color: var(--cz-brand-tint-2);
}
.preview-list.preview-list-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cz-brand);
}
.preview-list-time {
  float: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
  min-width: 52px;
  text-align: center;
  color: var(--cz-ink-2) !important;
}
.preview-list-time .day {
  font-size: 15px;
  font-weight: 650;
  color: var(--cz-ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.preview-list-time .time {
  font-size: 12.5px;
  color: var(--cz-ink-3);
  font-variant-numeric: tabular-nums;
}
.preview-list-time .onetime {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cz-live);
  background: rgba(232, 84, 47, .1);
  border-radius: var(--cz-r-pill);
  white-space: nowrap;
  margin: 0 !important;
}
.preview-list-time .onetime img {
  display: none;
}
.preview-list-cont {
  float: none !important;
  flex: 1 1 auto;
  width: auto !important;
  margin: 0 !important;
  min-width: 0;
}
.preview-list-title {
  margin: 0 0 5px !important;
  font-size: 14.5px !important;
  font-weight: 550;
  color: var(--cz-ink) !important;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.preview-list-position {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--cz-ink-3) !important;
}

/* --------------------------------------------------------------------------
   7. 课程分类
   -------------------------------------------------------------------------- */
.fenlei-content {
  float: none !important;
  width: auto !important;
  overflow: visible !important;
}
.fenlei-content ul {
  float: none !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.fenlei-content li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  position: relative;
  text-align: center !important;
}
.fenlei-content li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
  text-decoration: none;
  transition: border-color .2s var(--cz-ease), box-shadow .2s var(--cz-ease), transform .2s var(--cz-ease);
}
.fenlei-content li a:hover {
  border-color: var(--cz-brand-tint-2);
  box-shadow: var(--cz-sh-md);
  transform: translateY(-3px);
}
.fenlei-content li a img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  object-fit: contain;
  background: var(--cz-brand-tint);
  padding: 8px;
  box-sizing: border-box;
  transition: background .2s;
}
.fenlei-content li a:hover img {
  background: var(--cz-brand-tint-2);
}
.fenlei-content li a p {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--cz-ink) !important;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   8. 课程卡片（精选课程 / 最新课程共用）
   -------------------------------------------------------------------------- */
.body01-content {
  float: none !important;
  width: auto !important;
  overflow: visible !important;
}
.body01-content ul {
  float: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.body01-content li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line) !important;
  border-radius: var(--cz-r-card);
  overflow: hidden;
  transition: border-color .22s var(--cz-ease), box-shadow .22s var(--cz-ease), transform .22s var(--cz-ease);
}
.body01-content li:hover {
  border-color: var(--cz-line-strong) !important;
  box-shadow: var(--cz-sh-lg) !important;
  transform: translateY(-3px);
}

/* 封面 */
.body01-content li > div {
  position: relative !important;
  overflow: hidden;
  background: var(--cz-surface-2);
  line-height: 0;
}
.body01-content li > div > a {
  display: block;
  line-height: 0;
}
.body01-content li img.lazyload,
.body01-content li > div > a > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .35s var(--cz-ease);
}
.body01-content li:hover img.lazyload {
  transform: scale(1.04);
}
/* 取消旧的白框与放大位移 */
.body01-content li:hover img {
  transform: scale(1.04);
}

/* 类型角标：统一为左上角小药丸文字，不再依赖旧 icon 图 */
.body01-content li .lefttopimg {
  position: absolute !important;
  top: 10px !important;
  right: auto !important;
  left: 10px !important;
  z-index: 3;
  width: 30px !important;
  height: 30px !important;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(12, 20, 32, .16);
  object-fit: contain;
  transition: transform .22s var(--cz-ease);
}
.body01-content li:hover .lefttopimg {
  transform: scale(1) !important;
}

/* 悬浮「开始学习」遮罩 */
.imgitembox {
  position: absolute !important;
  inset: 0;
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 24, .42) !important;
  opacity: 0;
  transition: opacity .24s var(--cz-ease);
}
.body01-content li:hover .imgitembox {
  opacity: 1;
}
.imgitembox a {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(6px) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 38px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: #fff !important;
  background: var(--cz-brand);
  border: none !important;
  border-radius: var(--cz-r-ctl) !important;
  line-height: 1 !important;
  text-decoration: none;
  box-shadow: var(--cz-sh-brand);
  transition: transform .24s var(--cz-ease), background .18s !important;
}
.body01-content li:hover .imgitembox a {
  transform: translateY(0) !important;
}
.imgitembox a:hover {
  background: var(--cz-brand-hover);
}

/* 卡片文本区 */
.body01-content li .title {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px 16px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.body01-content li .title h5 {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.body01-content li .title h5 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 550;
  line-height: 1.5 !important;
  color: var(--cz-ink) !important;
  text-decoration: none;
  white-space: normal !important;
  transition: color .18s;
  min-height: 2.9em;
}
.body01-content li:hover .title h5 a {
  color: var(--cz-brand) !important;
}
.body01-content li .title > span {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: auto !important;
}
.body01-content li .title span strong {
  float: none !important;
  font-size: 15px !important;
  font-weight: 650;
  line-height: 1.2 !important;
  color: var(--cz-ink) !important;
}
/* 免费：品牌绿，语义色不参与装饰 */
.body01-content li .title span strong span {
  color: var(--cz-free) !important;
  font-weight: 650;
}
.body01-content li .title span small {
  float: none !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  color: var(--cz-ink-3) !important;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. 最新课程 + 热榜
   --------------------------------------------------------------------------
   这一段的每条选择器都必须带上和旧样式同级的类名前缀。
   旧样式（index_x7.css）写的是
     .newCurriculum .newCurrCont .newCurrContlist a { display:block; margin-top:16px; … }
   权重 (0,3,1)，而只写 .newCurrContlist a 只有 (0,1,1)，覆盖不掉。
   后果：flex 行布局整段失效 → 序号被挤到标题上面单独占一行、每行还被 16px 外边距撑开，
   侧栏比左栏高出 170px；再加上侧栏是 position:absolute，直接压住了下面的「快速入口」条。
   所以这里统一补前缀；同时把父容器改成两列 grid，让侧栏回到正常文档流，
   父容器高度自然被撑开，从根上杜绝压盖。 */
.body01.minwidth {
  /* 注意 !important：本文件上面有 .body01{display:block !important}，
     不加 !important 的话 grid 会被它按权重压掉（!important 无视选择器权重），
     侧栏就会退回成整宽区块叠在课程网格上方。 */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: var(--cz-gutter);
}
.body01.minwidth > h1.titleh1 {
  grid-column: 1;
  grid-row: 1;
  /* 旧样式 .minwidth .titleh1{width:890px;float:left} 是给绝对定位侧栏让位的，现在不需要了 */
  float: none;
  width: auto;
}
.newCurriculum {
  grid-column: 2;
  grid-row: 2;
  float: none !important;
  position: static !important;
  top: auto;
  right: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
  padding: 14px 8px 10px;
  box-shadow: var(--cz-sh-sm);
  box-sizing: border-box;
}
.newCurriculum .newCurrTitle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 12px;
  margin: 0;
  border-bottom: 1px solid var(--cz-line);
}
.newCurriculum .newCurrTitle .newCurrTitle-tit {
  font-size: 14px;
  font-weight: 650;
  color: var(--cz-ink);
}
.newCurriculum .newCurrTitle a {
  float: none;
  position: static;
  top: auto;
  transform: none;
  font-size: 12.5px !important;
  color: var(--cz-ink-3);
  text-decoration: none;
  transition: color .18s var(--cz-ease);
}
.newCurriculum .newCurrTitle a:hover {
  color: var(--cz-brand);
}
.newCurriculum .newCurrCont {
  flex: 1 1 auto;
  display: flex;
  padding-top: 6px;
}
.newCurriculum .newCurrCont .newCurrContlist {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newCurriculum .newCurrCont .newCurrContlist a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  text-decoration: none;
  transition: background .18s var(--cz-ease);
}
.newCurriculum .newCurrCont .newCurrContlist a:hover,
.newCurriculum .newCurrCont .newCurrContlist a.active {
  background: var(--cz-brand-tint);
}
.newCurriculum .newCurrCont .newCurrContlist .num {
  flex: 0 0 auto;
  width: 22px;
  height: auto !important;
  padding: 0 !important;
  /* 旧样式把它做成了青色 (#00BED4) 方块徽章，与新配色冲突，这里还原成纯序号 */
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  color: var(--cz-ink-3);
  font-style: italic;
}
.newCurriculum .newCurrCont .newCurrContlist a:nth-child(-n+3) .num {
  color: var(--cz-brand);
}
/* 单行省略用 block + nowrap。不要和 -webkit-box/line-clamp 混用，
   两者叠加时 Chrome 会把超长标题整个渲染成一个「…」。 */
.newCurriculum .newCurrCont .newCurrContlist .newtit {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  -webkit-box-orient: unset !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--cz-ink-2);
  line-height: 1.45 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.newCurriculum .newCurrCont .newCurrContlist a:hover .newtit,
.newCurriculum .newCurrCont .newCurrContlist a.active .newtit {
  color: var(--cz-ink) !important;
}
/* 旧样式会让第一行展开一张封面大图，把行高顶到 200px 以上 */
.newCurriculum .newCurrCont .newCurrContlist .newimg {
  display: none !important;
}
/* 左栏课程网格：宽度改由父级 grid 的列决定，不再手工减掉侧栏宽度 */
.body01.minwidth .body01-content {
  grid-column: 1;
  grid-row: 2;
  padding-right: 0;
}
.body01.minwidth .body01-content ul {
  grid-template-columns: repeat(3, 1fr);
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   10. 平台数据
   -------------------------------------------------------------------------- */
.body01.backgr {
  margin-top: var(--cz-section-gap) !important;
}
.share-date {
  width: auto !important;
}
.share-date ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
  box-shadow: var(--cz-sh-sm);
  overflow: hidden;
  list-style: none;
  justify-content: stretch !important;
}
.share-date li {
  float: none !important;
  width: auto !important;
  padding: 34px 20px !important;
  border: none !important;
  border-right: 1px solid var(--cz-line) !important;
  text-align: center !important;
  background: transparent !important;
}
.share-date li:last-child {
  border-right: none !important;
}
.share-date li strong {
  display: block !important;
  float: none !important;
  font-size: 40px !important;
  font-weight: 700;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  color: var(--cz-ink) !important;
}
.share-date li small {
  display: none !important;
}
.share-date li p {
  margin: 8px 0 0 !important;
  font-size: 13.5px !important;
  color: var(--cz-ink-3) !important;
}

/* --------------------------------------------------------------------------
   11. 中部广告位
   -------------------------------------------------------------------------- */
.body01.jubu-banner {
  margin-top: var(--cz-section-gap) !important;
  margin-bottom: var(--cz-section-gap) !important;
}
.jubu-banner a {
  display: block;
  border-radius: var(--cz-r-card);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--cz-sh-sm);
}
.jubu-banner img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   12. 讲师团队
   -------------------------------------------------------------------------- */
/* 注意：讲师区是 Swiper 驱动的轮播，轨道几何（滑块 277.5px + 30px 间距 = 1230px）
   被模板里的内联 <style> 钉死了。这里千万不要改 .contjiangshi / .swiper-container3
   的宽度，否则 Swiper 的位移计算会和实际宽度对不上，轮播会整体左移并露出半张卡片。
   只做居中，保持原宽度。 */
.contjiangshi {
  position: relative;
  padding-top: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 轨道宽 1200 而正文栏宽 1232，居中后与上下区块的中线对齐（左右各让 16px）。
   只动外边距，容器宽度不变，Swiper 量到的仍是 1200。 */
.contjiangshi .swiper-container3 {
  overflow: hidden;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 旧样式给 .swiper-slide 留了 60px 顶部外边距，是当年给「头像压住卡片上沿」用的；
   现在头像已收进卡内，这段空白必须去掉，否则讲师区上下会多出 60px 死区。 */
.contjiangshi .swiper-slide {
  margin-top: 0 !important;
}
/* 讲师卡：头像收在卡内（滑块容器是 overflow:hidden，
   若让头像压住卡片上沿会被裁掉）。 */
.jiangshi-item {
  position: relative;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  height: auto !important;
  min-height: 0;
  padding: 26px 20px 24px !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card) !important;
  text-align: center !important;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color .22s var(--cz-ease), box-shadow .22s var(--cz-ease), transform .22s var(--cz-ease);
}
.jiangshi-item:hover {
  border-color: var(--cz-brand-tint-2);
  box-shadow: var(--cz-sh-lg);
  transform: translateY(-3px);
}
.jiangshi-item .headimg {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 14px !important;
  transform: none !important;
  border: 2px solid var(--cz-line);
  border-radius: var(--cz-r-pill);
  overflow: hidden;
  background: var(--cz-surface-2);
  box-sizing: border-box;
  transition: border-color .22s var(--cz-ease) !important;
}
.jiangshi-item:hover .headimg {
  width: 72px !important;
  height: 72px !important;
  transform: none !important;
  border-color: var(--cz-brand-tint-2);
}
.jiangshi-item .headimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 旧样式给三行文字都加了 36px 左右内边距（原本是给压边头像让位的），
   叠加卡片自身内边距后正文只剩 ~124px 宽，被挤成 4 行，必须清零。 */
.jiangshi-item .jiangshiName,
.jiangshi-item .jiangshiPosition,
.jiangshi-item .jiangshiP {
  width: auto !important;
  padding: 0 !important;
}
.jiangshi-item .jiangshiName {
  margin: 0 0 4px !important;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--cz-ink);
}
.jiangshi-item .jiangshiPosition {
  margin: 0 0 10px !important;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cz-brand);
}
.jiangshi-item .jiangshiP {
  margin: 0 !important;
  /* 旧样式写死 height:75px，比两行文字实际高度高出 30px，
     这里换成与两行等高的 min-height：既能撑齐四张卡的高度，又不留死区。 */
  height: auto !important;
  min-height: 44px;
  display: -webkit-box !important;
  font-size: 13px;
  line-height: 1.65;
  color: var(--cz-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 旧样式在 :hover 时把三行文字整体上移 30px、并把简介高度撑到 120px。
   那是给「头像压出卡片外」的老版式配的动效；新卡片是常规流式排版，
   这些位移会让鼠标一移上去整张卡就跳一下，所以按同样权重全部关掉。 */
.jiangshi-item:hover .jiangshiName,
.jiangshi-item:hover .jiangshiPosition,
.jiangshi-item:hover .jiangshiP {
  top: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
}
.jiangshi-item:hover .jiangshiP {
  min-height: 44px;
}
/* 左右切换按钮：贴在滑块两侧、垂直居中。
   这两个 div 是 .swiper-container3 的兄弟节点，不会被 overflow:hidden 裁掉。
   点击事件由模板里的 Swiper nextButton/prevButton 绑定，样式可自由改。 */
.contjiangshi .swiper-jiangshi-prev,
.contjiangshi .swiper-jiangshi-next {
  position: absolute;
  top: 50%;
  margin-top: -19px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-pill);
  box-shadow: var(--cz-sh-md);
  color: var(--cz-ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, opacity .18s;
}
.contjiangshi .swiper-jiangshi-prev:hover,
.contjiangshi .swiper-jiangshi-next:hover {
  border-color: var(--cz-brand);
  color: var(--cz-brand);
}
.contjiangshi .swiper-jiangshi-prev {
  left: -16px;
}
.contjiangshi .swiper-jiangshi-next {
  right: -16px;
}
/* Swiper 在首尾回圈结束时会挂这个类（infinite 下基本不出现），保险起见弱化 */
.contjiangshi .swiper-button-disabled {
  opacity: .4;
  cursor: default;
}

/* --------------------------------------------------------------------------
   13. 入驻机构
   -------------------------------------------------------------------------- */
.settled-shcool {
  width: auto !important;
  overflow: visible !important;
}
.settled-shcool ul {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px !important;
  width: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.settled-shcool li {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  position: relative;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line) !important;
  border-radius: var(--cz-r-card);
  overflow: hidden;
  transition: border-color .22s var(--cz-ease), box-shadow .22s var(--cz-ease), transform .22s var(--cz-ease);
}
.settled-shcool li:hover {
  border-color: var(--cz-line-strong) !important;
  box-shadow: var(--cz-sh-md) !important;
  transform: translateY(-3px);
}
.settled-shcool li a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto !important;
  height: auto !important;
  min-height: 132px;
  padding: 22px 14px;
  line-height: 1.4 !important;
  text-decoration: none;
  box-sizing: border-box;
}
.settled-shcool li img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px;
  object-fit: contain;
  background: var(--cz-surface-2);
  padding: 6px;
  box-sizing: border-box;
}
.settled-shcool li p {
  position: static !important;
  width: auto !important;
  bottom: auto !important;
  left: auto !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 13.5px !important;
  color: var(--cz-ink-2) !important;
  line-height: 1.4 !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  transition: color .18s;
}
.settled-shcool li:hover p {
  color: var(--cz-brand) !important;
  bottom: auto !important;
}

/* --------------------------------------------------------------------------
   14. 热门资讯
   -------------------------------------------------------------------------- */
/* 旧样式给两栏写死了 width:570px / width:600px，只写 float:none 是没用的，
   固定宽度会盖过 grid 轨道，两栏高度也就没法对齐。这里必须把宽度一起交还给 grid。 */
.information-new {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  width: auto !important;
  align-items: stretch;
}
.information-banner,
.information-imgtxt {
  float: none !important;
  min-width: 0;
  width: auto !important;
  height: auto !important;
}
.information-banner .content {
  position: relative;
  border-radius: var(--cz-r-card);
  overflow: hidden;
  line-height: 0;
  /* 旧样式给了 #f0f0f2 灰底，图片没铺满时会在圆角里露出灰边 */
  background: var(--cz-surface-2) !important;
}
.information-banner .single-item div {
  position: relative;
  height: auto !important;
  line-height: 0;
}
.information-banner .single-item img {
  display: block;
  width: 100% !important;
  aspect-ratio: 570 / 342;
  object-fit: cover;
}
.information-banner .single-item span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 44px 22px 18px;
  background: linear-gradient(to top, rgba(8, 14, 24, .88), rgba(8, 14, 24, 0));
  line-height: 1.45;
}
.information-banner .single-item span p {
  margin: 0;
  width: auto !important;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* slick 分页点 */
.information-banner .slick-dots {
  position: absolute;
  left: 22px;
  bottom: 14px;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}
.information-banner .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.information-banner .slick-dots button {
  width: 20px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, .5);
  font-size: 0;
  cursor: pointer;
  transition: width .25s var(--cz-ease), background .25s;
}
/* 旧样式 .slick-dots .slick-active button{background:#00bed4!important}（index_x7.css），
   带 !important，这里必须同样用 !important 才压得住，否则当前页的点还是旧青色 */
.information-banner .slick-dots .slick-active button {
  width: 30px;
  background: #fff !important;
}
/* slick 箭头
   注意：这里用的是旧版 slick，注入的按钮只有 .slick-prev / .slick-next，
   **没有 .slick-arrow 这个类**。只写 .slick-arrow 会一条都不生效，
   线上仍是旧样式的半透明黑方块（40x60 + icon.png 雪碧图）。
   选择器必须把 .slick-prev / .slick-next 一起写上。 */
.information-banner .slick-arrow,
.information-banner .slick-prev,
.information-banner .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0;
  border: none;
  border-radius: var(--cz-r-pill);
  background-color: rgba(255, 255, 255, .92) !important;
  background-image: none !important;
  color: var(--cz-ink);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s var(--cz-ease), background .2s;
}
.information-banner .content:hover .slick-arrow,
.information-banner .content:hover .slick-prev,
.information-banner .content:hover .slick-next {
  opacity: 1;
}
.information-banner .slick-prev {
  left: 14px;
}
.information-banner .slick-next {
  right: 14px;
}
.information-banner .slick-arrow::before,
.information-banner .slick-prev::before,
.information-banner .slick-next::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  /* 旧样式给 :before 设了 font-family:"slick" + 20px 白字，一并顶掉 */
  font-family: inherit !important;
  font-size: 0 !important;
  opacity: 1 !important;
  background: none !important;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.information-banner .slick-prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.information-banner .slick-next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

/* 右侧资讯列表
   旧样式的 .information-imgtxt ul li a 权重 (0,1,3)，只写 .information-imgtxt li > a (0,1,2)
   覆盖不掉，卡片会退回 display:block + 浮动排版，左图右文对不齐。
   下面所有选择器都加上 .information-new 前缀把权重提到 (0,2,n)。
   另外旧样式靠 li{flex:1 1 auto} + height:100% 把卡片拉到和左栏一样高，
   在 grid 自动行高下这构成了循环依赖（实测右栏自然高度被算成 719px，
   左栏横幅只画 340px，底下空出 380px）。改成内容撑高，左右自然收敛到同一高度。 */
.information-new .information-imgtxt ul {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  list-style: none;
}
.information-new .information-imgtxt li {
  float: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
}
.information-new .information-imgtxt li > a {
  display: flex !important;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  padding: 12px;
  overflow: hidden;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-card);
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color .22s var(--cz-ease), box-shadow .22s var(--cz-ease), transform .22s var(--cz-ease);
}
.information-new .information-imgtxt li > a:hover {
  border-color: var(--cz-line-strong);
  box-shadow: var(--cz-sh-md);
  transform: translateY(-2px);
}
.information-new .information-imgtxt li > a > span {
  flex: 0 0 116px;
  width: 116px !important;
  height: 74px;
  float: none !important;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background: var(--cz-surface-2);
}
.information-new .information-imgtxt li img {
  display: block;
  width: 116px !important;
  height: 74px !important;
  min-height: 0 !important;
  object-fit: cover;
}
.information-new .information-imgtxt li .information-content {
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  height: auto !important;
}
.information-new .information-imgtxt li .information-content h3 {
  margin: 0 0 5px !important;
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  color: var(--cz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  transition: color .18s;
}
.information-new .information-imgtxt li > a:hover h3 {
  color: var(--cz-brand);
}
.information-new .information-imgtxt li .information-content p {
  margin: 0 0 7px !important;
  height: auto !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--cz-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}
.information-new .information-imgtxt li .information-content h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-weight: 400;
  line-height: 1.4 !important;
}
.information-new .information-imgtxt li .information-content h5 small {
  font-size: 12px !important;
  color: var(--cz-ink-3);
  font-variant-numeric: tabular-nums;
}
.information-new .information-imgtxt li .information-content h5 i {
  font-style: normal;
  color: var(--cz-line-strong);
}

/* --------------------------------------------------------------------------
   15. 悬浮工具条
   -------------------------------------------------------------------------- */
.sidernav {
  right: 16px !important;
  bottom: 88px !important;
  z-index: 150;
}
.sidernav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidernav ul li {
  position: relative;
  width: 42px;
  height: 42px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-r-ctl);
  box-shadow: var(--cz-sh-sm);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.sidernav ul li:hover {
  border-color: var(--cz-brand);
  background: var(--cz-brand-tint);
  box-shadow: var(--cz-sh-md);
}
.sidernav ul li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--cz-ink-2);
}
.sidernav ul li:hover > a {
  color: var(--cz-brand);
}
/* 悬浮条图标是旧版彩色位图精灵图，直接放着会和冷调配色打架；
   平时去色压低，hover 再恢复本色。 */
.sidernav ul li > a i {
  font-size: 17px;
  filter: grayscale(1) opacity(.6);
  transition: filter .2s var(--cz-ease);
}
.sidernav ul li:hover > a i {
  filter: none;
}
.sidernav .xiala,
.sidernav .qq_and_phone_info_div {
  position: absolute;
  right: 52px;
  top: 0;
  padding: 12px;
  background: var(--cz-surface);
  border: 1px solid var(--cz-line);
  border-radius: 14px;
  box-shadow: var(--cz-sh-lg);
  text-align: center;
  white-space: nowrap;
}
.sidernav .xiala img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
}
.sidernav .xiala p {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--cz-ink-2);
}
.sidernav li.backtop > a i {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   16. 页脚
   -------------------------------------------------------------------------- */
.post-service {
  margin-top: var(--cz-section-gap);
  background: var(--cz-surface);
  border-top: 1px solid var(--cz-line);
  padding: 46px 0 0;
}
/* 模板里 .service-class 是 <volist length="5">，数量随后台配置变（本站只有 3 组）。
   早先写死 repeat(5, 1fr) auto，3 组时后面会多出 2 个空列，二维码右边空出 317px。
   auto-fit + minmax(150px,1fr)：有几组就均分成几列，不用再跟着后台改样式。 */
.post-service .other-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  align-items: start;
}
.post-service .service-class {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto !important;
  border: none !important;
}
.post-service .service-class > a {
  font-size: 14px;
  font-weight: 600;
  color: var(--cz-ink) !important;
  text-decoration: none;
  margin-bottom: 2px;
}
.post-service .service-class > a:hover {
  color: var(--cz-brand) !important;
}
.post-service .service-class > a + a {
  font-size: 13px;
  font-weight: 400;
  color: var(--cz-ink-3) !important;
  margin-bottom: 0;
}
.post-service .service-class > a + a:hover {
  color: var(--cz-brand) !important;
}
.post-service .tel-box {
  text-align: center;
}
.post-service .tel-box .week {
  font-size: 13px;
  font-weight: 600;
  color: var(--cz-ink);
  margin-bottom: 10px;
}
.post-service .tel-box img {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid var(--cz-line);
  padding: 4px;
  background: #fff;
  box-sizing: border-box;
}
/* 旧样式的 .copyright-box 是深灰底(#4d4d4d)+白字，和整站割裂；
   这里只改底色，文案和链接原样保留。 */
.copyright-box {
  margin-top: 40px;
  padding: 20px 0 !important;
  background: transparent !important;
  border-top: 1px solid var(--cz-line);
  font-size: 12.5px;
  color: var(--cz-ink-3) !important;
  text-align: center;
  line-height: 1.7;
}
.copyright-box a {
  color: var(--cz-ink-3) !important;
  text-decoration: none;
}
.copyright-box a:hover {
  color: var(--cz-brand) !important;
}
/* 版权条里旧样式残留的白字节点（备案号等有时是 <span>/<font>）一并拉回深灰 */
.copyright-box span,
.copyright-box font,
.copyright-box p {
  color: inherit !important;
  background: none !important;
}

/* --------------------------------------------------------------------------
   17. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1340px) {
  :root {
    --cz-container: 1140px;
  }
  /* 容器收到 1140 后导航条必须同步收窄，否则「更多」又会被搜索框压住。
     选择器要保持 .top 前缀，否则权重低于 3.2 节里的基准规则，改不动。 */
  .header_new2 {
    gap: 12px;
  }
  .top .nav > ul > li > a {
    padding: 0 9px;
    font-size: 14px;
  }
  .search_index {
    flex-basis: 210px;
  }
  .body01-content ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .settled-shcool ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .fenlei-content ul {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1180px) {
  :root {
    --cz-container: 980px;
    --cz-section-gap: 68px;
  }
  .top .nav > ul > li > a {
    padding: 0 8px;
    font-size: 14px;
  }
  .search_index {
    flex-basis: 190px;
  }
  .body01.minwidth .body01-content ul {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }
  /* 窄屏放不下侧栏：取消两列网格，热榜回到课程网格下方自然堆叠 */
  .body01.minwidth {
    display: block !important;
  }
  .newCurriculum {
    margin-top: 24px;
  }
  .share-date ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .share-date li:nth-child(2n) {
    border-right: none !important;
  }
  .share-date li:nth-child(-n+2) {
    border-bottom: 1px solid var(--cz-line) !important;
  }
  .information-new {
    grid-template-columns: 1fr;
  }
  .post-service .other-service {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .post-service .tel-box {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 980px) {
  :root {
    --cz-container: 100%;
    --cz-section-gap: 56px;
    --cz-gutter: 18px;
  }
  /* 导航：隐藏次要项，保留汉堡位 */
  .nav > ul > li:nth-child(n+5) {
    display: none;
  }
  .look_scanning,
  .nav2 {
    display: none !important;
  }
  .search_index {
    flex-basis: 168px;
  }
  #swpcontent {
    grid-template-columns: 1fr;
  }
  #swiprlefr,
  #swiprright {
    grid-column: 1;
    grid-row: auto;
  }
  #swiprright {
    max-height: none;
  }
  .body01-content ul,
  .fenlei-content ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .settled-shcool ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .body01 .my-server {
    grid-template-columns: 1fr;
  }
  .body01 .my-server li {
    border-right: none !important;
    border-bottom: 1px solid var(--cz-line) !important;
  }
  .body01 .my-server li:last-child {
    border-bottom: none !important;
  }
  .information-new .information-imgtxt li > a > span {
    flex-basis: 96px;
    width: 96px !important;
    height: 66px;
  }
  .information-new .information-imgtxt li img {
    width: 96px !important;
    height: 66px !important;
  }
  .post-service .other-service {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .header_new2 {
    height: 56px;
    gap: 12px;
  }
  .top1img img {
    height: 28px;
  }
  .nav {
    display: none;
  }
  .search_index {
    flex: 1 1 auto;
  }
  .page_header_adiv > li:first-child > a {
    padding: 8px 6px;
  }
  #bannerLogin {
    display: none !important;
  }
  .body01-content ul,
  .fenlei-content ul,
  .settled-shcool ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .body01 h1 {
    font-size: 19px !important;
    padding-bottom: 16px !important;
  }
  .share-date ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .share-date li {
    padding: 24px 12px !important;
  }
  .share-date li strong {
    font-size: 30px !important;
  }
  .information-banner {
    grid-column: 1 / -1;
  }
  .post-service .other-service {
    grid-template-columns: 1fr 1fr;
  }
  .sidernav {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   18. 降低动态效果
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .body01-content li:hover,
  .fenlei-content li a:hover,
  .jiangshi-item:hover,
  .settled-shcool li:hover,
  .information-imgtxt li > a:hover {
    transform: none !important;
  }
  .body01-content li:hover img.lazyload,
  .body01-content li:hover img {
    transform: none !important;
  }
}