/* =========================================================
   内页样式（列表页 + 详情页共用）
   内页 banner / 列表页侧栏菜单（手机端横向单行可滑动）/ 面包屑 / 新闻列表 / 分页 / 文章
   ========================================================= */

/* ---------------- 内页 banner ---------------- */
.inner-banner {
  position: relative;
  overflow: hidden;
}
.inner-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 605;
  object-fit: cover;
  animation: innerBannerIn 1.2s ease both .1s;
}
@keyframes innerBannerIn {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* ---------------- 布局：列表页（侧栏 + 主栏） ---------------- */
.inner-layout {
  display: flex;
  gap: 60px;
  align-items: stretch;
  padding: 30px 0 30px;
}
/* 布局：详情页（无侧栏，单列） */
.inner-page { padding: 30px 0 30px; }

/* 侧栏：左侧 28px 深蓝竖条贯穿整个高度 */
.sidebar {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #F5FEFF;
}
.sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: #0B86C2;
}
.side-head {
  position: relative;
  height: 142px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  background: linear-gradient(90deg, #0C81B9 0%, #29A4D1 50%, #4FC2DE 100%);
}
.side-head b, .side-head .Column_Name {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 5px;
}
.side-menu {
  margin-top: 16px;
  padding-left: 28px;
}
.side-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 67px;
  padding: 0 20px 0 24px;
  background: #F5FEFF;
  font-size: 19px;
  color: var(--c-text);
  transition: background var(--tr), color var(--tr);
}
.side-menu a img { width: 24px; flex: none; transition: transform .3s; }
.side-menu a:hover { background: #E9F7FE; color: #1E7BC8; }
.side-menu a:hover img { transform: translateX(4px); }
.side-menu li.active a {
  background: #E2F6FF;
  color: #394F7E;
}
/* CMS 栏目循环只输出选中 class，不能按状态换图片地址：每个栏目同时输出黑白两张箭头图，按 active 显隐 */
.side-menu .arr-on { display: none; }
.side-menu li.active .arr { display: none; }
.side-menu li.active .arr-on { display: inline; }
.side-art {
  flex: 1;
  margin-top: 20px;
  min-height: 110px;
  background: url("../img/side-bg.png") bottom center / 100% auto no-repeat;
}

/* ---------------- 单文章栏目：侧栏正文 h1 锚点导航（main.js §2.10 生成） ---------------- */
/* 常见问题等单文章栏目整篇正文渲染在列表窗口里，其中的 h1 抓到侧栏做快捷锚点。
   复用 .side-menu 行样式；标题可能较长（如"八、开设专业与学习中心问答"），行高放开允许换行 */
.side-faq a { height: auto; min-height: 67px; padding-top: 10px; padding-bottom: 10px; }
.side-faq .column-name { white-space: normal; line-height: 1.5;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
/* 行尾箭头纯 CSS 双线 chevron（黑 #000 / 悬停 #183581，对齐 side-menu 箭头图标色）；
   JS 生成的 img 地址 CMS 不做模板路径改写，与 xcsp 播放图标同理不依赖图片资源 */
.side-faq a::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  transition: border-color .3s, transform .3s;
}
.side-faq a:hover::after { border-color: #183581; transform: translateX(4px) rotate(45deg); }
/* 桌面端：侧栏内容块（蓝"常见问题"标题 + 锚点菜单，main.js §2.10 包成 .side-pin）
   整体吸在视口左侧（吸顶 header 下方），滚动长文时随时可点；
   视口矮放不下时菜单区自身出滚动条、蓝标题保持可见；
   手机端（≤992px）不吸——横滑条本来就在内容上方，吸顶反而占屏 */
@media (min-width: 993px) {
  .side-pin {
    position: sticky;
    top: calc(var(--header-h) );
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 32px);
  }
  .side-pin .side-faq {
    min-height: 0; /* flex 子项默认 min-height:auto，不出这行 max-height 压不住 */
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
/* 锚点目标给吸顶 header 留空隙：JS 点击滚动已按 header 实高偏移，这里兜底直接带 hash 打开页面的场景 */
.wp_articlecontent h1[id] { scroll-margin-top: 106px; }
/* 单文章正文里的长 URL 等不可断行文本会撑破手机端正文列（实测 cjwt 正文 484px 链接文字），允许词内断行 */
.wp_articlecontent { overflow-wrap: break-word; }

/* 主栏 */
.main-col { flex: 1; min-width: 0; }

/* 面包屑 */
.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #8C8C8C;
  padding-top: 6px;
  flex-wrap: wrap;
}
.crumbs img { width: 20px; height: 20px; }
.crumbs a { color: #1E7BC8; display: flex;}
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: #B9B9B9; font-size: 14px; }
.crumbs-line {
  height: 4px;
  margin-top: 16px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0988C5 0%, #4FC2DC 100%);
}

.possplit {
background-image: url(https://www.jxrtvu.com/_js/_portletPlugs/simpleNews/css/posSplit.gif);
background-repeat: no-repeat;
background-position: left center;
text-indent: 22px;
background-position: center;
width: 10px;
display: inline-block;
border: 0px solid red;
}

/* ---------------- 新闻列表 ---------------- */
.news-rows { padding-top: 22px; }
.news-rows li {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
  padding: 0 24px;
  border-radius: 10px;
  border-bottom: 1px dashed #DADADA;
  position: relative;
  transition: background var(--tr);
}
.news-rows li:last-child { border-bottom: 0; }
.news-rows .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #45A7DC;
}
.news-rows .t {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tr), transform .3s cubic-bezier(.25, .7, .35, 1);
}
/* {标题} 由 CMS 输出完整 <a>（不能再包一层行级 a，否则嵌套锚点）；伪元素铺满整行保持整行可点 */
.news-rows .t a { color: inherit; text-decoration: none; }
.news-rows .t a::after { content: ""; position: absolute; inset: 0; }
.news-rows time { flex: none; font-size: 16px; color: #9B9B9B; transition: color var(--tr); }
.news-rows li:hover,
.news-rows li.active { background: #DFF3FC; }
.news-rows li:hover .t,
.news-rows li.active .t,
.news-rows li:hover time,
.news-rows li.active time { color: #1E6FC0; }
/* 悬停：标题轻右移 */
.news-rows li:hover .t { transform: translateX(6px); }

/* ---------------- 宣传视频列表（xcsp 栏目专用形态） ---------------- */
/* 窗口9 行结构带 {缩略图路径}（全站共用），缩略图默认隐藏；head 里 URL 命中
   /zsjyc2023/xcsp/list 时 <html> 挂 video-col-list：隐藏侧栏、列表变缩略图卡片网格。
   行内 img 带 loading="lazy"，display:none 的懒加载图浏览器不发请求，其余列表页零开销 */
.news-rows .v-thumb { display: none; }
html.video-col-list .sidebar { display: none; }
html.video-col-list .news-rows .dot { display: none; }
html.video-col-list .news-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}
html.video-col-list .news-rows li {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  padding: 0;
  border-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 60, 110, .08);
  /* 悬浮位移走 translate 独立属性、不碰 transform——transform 的 transition/延迟
     归滚动显现动画（common.css 的 html.js [data-reveal]）所有 */
  transition: translate .3s, box-shadow .3s;
}
html.video-col-list .news-rows li:hover {
  background: #fff;
  translate: 0 -5px;
  box-shadow: 0 14px 30px rgba(15, 60, 110, .18);
}
html.video-col-list .news-rows li.active { background: #fff; }
html.video-col-list .news-rows .v-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #E1F3FB; /* 文章未配缩略图时的占位底色 */
  overflow: hidden;
}
html.video-col-list .news-rows .v-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
html.video-col-list .news-rows li:hover .v-thumb img { transform: scale(1.05); }
/* 播放图标纯 CSS 绘制：InfoCycle 行内的静态图片地址 CMS 未必做模板路径改写，不依赖图片资源 */
html.video-col-list .news-rows .v-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(9, 136, 197, .78);
  pointer-events: none; /* 不挡整卡点击（.t a::after 铺满 li） */
}
html.video-col-list .news-rows .v-play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
}
html.video-col-list .news-rows .t {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.55;
  white-space: normal;
}
html.video-col-list .news-rows li:hover .t { transform: none; }
/* xcsp 视频卡片不显示发布时间（卡片底部间距由 .t 的 padding 撑） */
html.video-col-list .news-rows time { display: none; }

/* ---------------- 分页 ---------------- */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 56px 0 8px;
}
.pager a,
.pager span {
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
  background: #fff;
  color: var(--c-text2);
  font-size: 15px;
  transition: var(--tr);
}
.pager img { width: 14px; height: 14px; }
.pager a:hover { color: var(--c-blue-deep); border-color: #9FC3EF; }
.pager .active {
  background: var(--c-blue-deep);
  border-color: var(--c-blue-deep);
  color: #fff;
}
.pager .dots { border: 0; background: none; }

/* ---------------- CMS 系统分页（simpleList 窗口内自动输出 .wp_paging） ---------------- */
.wp_paging {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 56px 0 8px;
  list-style: none;
  /* 系统 CSS 对 .wp_paging 有 float:right，会漂右且让包装层高度塌陷，这里抵消 */
  float: none;
}
.wp_paging li { display: inline-flex; align-items: center; gap: 10px; }
.wp_paging a {
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
  background: #fff;
  color: var(--c-text2);
  font-size: 15px;
  transition: var(--tr);
  margin: 0 !important;
}
.wp_paging a:hover { color: var(--c-blue-deep); border-color: #9FC3EF; }
.wp_paging .pages_count,
.wp_paging .page_jump { font-size: 14px; color: #9B9B9B; }
.wp_paging .page_jump .pageNum {
  width: 44px;
  height: 34px;
  text-align: center;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
}
.wp_paging em { font-style: normal; }

/* ---------------- 文章详情 ---------------- */
/* 无侧栏后限制阅读宽度，避免整行过长 */

.wp_entry{line-height: normal !important;}

.article { padding-top: 46px; max-width: 1000px; margin: 0 auto; }
.article h1 {
  font-size: 30px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}
.article-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 46px;
  margin: 30px 0 44px;
  font-size: 15px;
  color: #9B9B9B;
}
.article-body { font-size: 18px; line-height: 2.15; color: var(--c-text); }
.article-body img, .article-body video { max-width: 100%; height: auto; }
.article-body p:has(> img:only-child) { text-indent: 0; }
/* 正文表格横向滚动容器（main.js 自动包裹）；保持表格 display:table 语义，窄表格不受影响 */
.article-body .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-body p {
  /* text-indent: 2em;
  text-align: justify;
  margin-bottom: 26px; */
}
.article-switch {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #E8E8E8;
  font-size: 17px;
  line-height: 2.1;
  color: var(--c-text);
}
.article-switch a { color: #1E56B0; }
.article-switch a:hover { text-decoration: underline; }

/* =========================================================
   内页响应式
   ========================================================= */
@media (max-width: 1200px) {
  .inner-layout { gap: 36px; }
  .sidebar { width: 300px; }
  .side-head { height: 126px; padding: 0 26px; }
  .side-head b, .side-head .Column_Name { font-size: 34px; }
}

/* 手机端：侧栏菜单变横向单行（超屏左右滑动，无箭头） */
@media (max-width: 992px) {
  .news-rows {
    padding-top: 0px;
}
  .inner-layout { flex-direction: column; gap: 10px; padding: 16px 0 30px; }
  .inner-page { padding: 24px 0 30px; }
  .inner-banner img { aspect-ratio: auto; min-height: 170px; max-height: 300px; }
  .sidebar { width: 100%; }
  .sidebar::before { display: none; }
  .side-head { height: 92px; padding: 0 24px; }
  .side-head b, .side-head .Column_Name { font-size: 26px; letter-spacing: 3px; }
  .side-menu {
    display: flex;
    margin-top: 12px;
    padding-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .side-menu::-webkit-scrollbar { display: none; }
  .side-menu li { flex: none; }
  .side-menu li + li { border-top: 0; border-left: 1px solid #E7F0F4; }
  .side-menu a {
    height: 52px;
    padding: 0 22px;
    font-size: 17px;
    white-space: nowrap;
  }
  .side-menu a img { display: none; }
  .side-menu li.active a { background: #E1F7FF; color: #207BC8; }
  .side-art { display: none; }
  /* 侧栏 h1 锚点导航跟栏目菜单一起变横向单行滑动条 */
  .side-faq a { min-height: 0; }
  .side-faq .column-name { white-space: nowrap; }
  .side-faq a::after { display: none; }
  .side-faq a:active { background: #E1F7FE; }
  .wp_articlecontent h1[id] { scroll-margin-top: 92px; }
  .news-rows li { height: 58px; padding: 0 12px; gap: 12px; }
  .news-rows .t { font-size: 16px; }
  .news-rows time { font-size: 14px; }
  .pager { padding: 36px 0 4px; }
}

@media (max-width: 768px) {
  .crumbs { font-size: 14px; gap: 8px; }
  .crumbs img { width: 17px; height: 17px; }
  .side-head { height: 80px; }
  .side-head b, .side-head .Column_Name { font-size: 22px; letter-spacing: 2px; }
  .side-menu { margin-top: 10px; }
  .side-menu a { height: 46px; padding: 0 18px; font-size: 16px; }
  .wp_articlecontent h1[id] { scroll-margin-top: 76px; }
  /* 手机端列表行：去圆点，上下两行——时间（小灰字）在上、标题在下；
     视频卡片栏（xcsp）已是纵向卡片布局，用 :not 排除，避免 align-items 影响缩略图撑宽 */
  .news-rows .dot { display: none; }
  html:not(.video-col-list) .news-rows li {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    height: auto;
    padding: 13px 6px;
  }
  html:not(.video-col-list) .news-rows .t {
    order: 2; /* DOM 里标题在 time 前，用 order 把时间换到上面 */
    font-size: 15px;
    line-height: 1.5;
    white-space: normal; /* 覆盖桌面端的 nowrap/省略号，标题完整换行显示、不限行数 */
  }
  html:not(.video-col-list) .news-rows time { order: 1; font-size: 13px; }
  /* 触屏按下反馈（桌面 hover 已有） */
  html:not(.video-col-list) .news-rows li:active { background: #EAF6FD; }

  .article { padding-top: 28px; }
  .article h1 { font-size: 22px; }
  .article-meta { gap: 8px 22px; margin: 20px 0 28px; font-size: 13px; }
  .article-body { font-size: 16px; line-height: 2; }
  .article-body p { margin-bottom: 18px; }
  .article-switch { margin-top: 36px; padding-top: 22px; font-size: 15px; }
  .pager a, .pager span { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
  .pager img { width: 12px; height: 12px; }

  /* 宣传视频列表：手机两列小卡 */
  html.video-col-list .news-rows { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  html.video-col-list .news-rows .t { font-size: 15px; padding: 10px 12px; }
  html.video-col-list .news-rows .v-play { width: 36px; height: 36px; }
  html.video-col-list .news-rows .v-play::before { border-width: 8px 0 8px 12px; }
}