/* =============================================================================
   陇教云媒 · 门户页面补充样式

   模板自带的样式在 index.css / style.css / main.css（已加 .gsjy-site 前缀），
   这里只放「模板没有、或需要适配 Vue 实现」的部分：
     · 轮播（模板用 jQuery + swiper，这里用 Vue + CSS）
     · 二级菜单 hover、会员入口、内联搜索
     · 列表页 / 详情页在模板里由另一套皮肤定义的类（.content_title/.content_text 等）
     · 分页、阅读排行、相关阅读等交互块的外观

   【为什么集中在一个文件】写在组件里只在该组件加载后才注入 ——
   直接打开 /list/1 而不经过栏目页时，分页样式就不会生效。
   所有规则都带 .gsjy-site 前缀，不会影响 Element Plus。
   ============================================================================= */

/* ---------- 首页 ---------- */
/* 首页专用补充样式：模板没有的部分（轮播实现、区块标题等），统一带 .gsjy-site 前缀 */
.gsjy-site .home-banner {
  width: 100%;
  height: 520px;
  overflow: hidden;
  position: relative;
}
.gsjy-site .banner-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.gsjy-site .banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.gsjy-site .banner-slide.on {
  opacity: 1;
}
.gsjy-site .banner-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8% 22px;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.gsjy-site .banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  z-index: 3;
}
.gsjy-site .banner-dots span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.gsjy-site .banner-dots span.on {
  background: var(--c-primary);
}

/* 左图轮播 */
.gsjy-site .yx-rotaion {
  position: relative;
}
.gsjy-site .yx-rotaion .rotaion_list {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: 6px;
}
.gsjy-site .yx-rotaion .rotaion_list li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  cursor: pointer;
}
.gsjy-site .yx-rotaion .rotaion_list li.on {
  opacity: 1;
}
.gsjy-site .yx-rotaion .rotaion_list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gsjy-site .pic-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 16px;
  color: #fff;
  font-size: 17px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

/* 区块名（模板里就是 .first 那一行的样式，这里补一个小标签） */
.gsjy-site .exam_list .blk-name {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 3px;
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
}

/* 社情概况页签（模板靠内联 JS 切换，这里用 Vue） */
.gsjy-site .sq-tab-tit {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  border-bottom: 1px solid #eee;
}
.gsjy-site .sq-tab-tit span {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.gsjy-site .sq-tab-tit span.over {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: 700;
}

/* 视频入口（无视频源时给可点图） */
.gsjy-site .video-entry {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  border-radius: 6px;
}
.gsjy-site .video-entry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gsjy-site .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  background: rgba(47, 115, 248, 0.9);
  color: #fff;
  font-size: 20px;
}
.gsjy-site .video-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px;
  color: #fff;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.45);
}

/* 专题轮播（模板用 swiper，这里是 CSS 位移） */
.gsjy-site .topic-track {
  display: flex;
  transition: transform 0.6s ease;
}
.gsjy-site .topic-slide {
  flex: 0 0 33.333%;
  padding: 0 6px;
  box-sizing: border-box;
  cursor: pointer;
}
.gsjy-site .topic-slide img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
}
.gsjy-site .topic-slide span {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  color: #333;
}

/* 报刊四栏 */
.gsjy-site .paper-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.gsjy-site .paper-col {
  flex: 1 1 22%;
  min-width: 200px;
}
.gsjy-site .paper-col dt img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}
.gsjy-site .paper-col dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
}
.gsjy-site .paper-col dd a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #dfe3ea;
  border-radius: 3px;
  font-size: 13px;
  color: #555;
}
.gsjy-site .paper-col dd a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* 融媒矩阵 */
.gsjy-site .rmjz {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
}
.gsjy-site .matrix-item {
  text-align: center;
}
.gsjy-site .matrix-item img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
}
.gsjy-site .matrix-item div {
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}

/* 通栏图 */
.gsjy-site .home-bar-img {
  height: auto;
  margin: 5px auto 25px auto;
}
.gsjy-site .home-bar-img img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .gsjy-site .home-banner {
    height: 200px;
    margin-top: 55px;
  }
  .gsjy-site .banner-title {
    font-size: 16px;
    padding: 10px 4% 14px;
  }
  .gsjy-site .yx-rotaion .rotaion_list {
    height: 200px;
  }
  .gsjy-site .topic-slide {
    flex: 0 0 100%;
  }
  .gsjy-site .paper-col {
    flex: 1 1 100%;
  }
}

/* ---------- 栏目页 / 业务类型列表页（公共列表版式） ---------- */
/* 模板版式的补充样式（模板缺的或需要适配 Vue 实现的部分），全部带 .gsjy-site 前缀 */
.gsjy-site .list_baner {
  background: url(/gsjy/img/banner.jpg) no-repeat center 0;
  background-size: cover;
}
.gsjy-site .baner-inner {
  padding: 34px 0 26px;
}
.gsjy-site .baner-name {
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.gsjy-site .baner-crumb {
  margin-top: 8px;
  color: #fdeceb;
  font-size: 14px;
}
.gsjy-site .baner-crumb a {
  color: #fdeceb;
}
.gsjy-site .baner-crumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.gsjy-site .baner-crumb .sep {
  margin: 0 6px;
  opacity: 0.8;
}
.gsjy-site .content-wrap {
  display: block;
  overflow: hidden;
}

.gsjy-site .list_tit .tn {
  padding: 12px 16px;
  background: var(--c-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
}
.gsjy-site .list_tit ul li a {
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
  color: #444;
  font-size: 15px;
}
.gsjy-site .list_tit ul li a:hover {
  color: var(--c-primary);
  background: #fdeceb;
}
.gsjy-site .list_tit ul li a.xzzt {
  color: #fff;
  background: var(--c-primary);
  font-weight: 700;
}

.gsjy-site .sort-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 4px;
  font-size: 15px;
}
.gsjy-site .sort-bar span {
  cursor: pointer;
  color: #666;
}
.gsjy-site .sort-bar span.on {
  color: var(--c-primary);
  font-weight: 700;
}
.gsjy-site .sort-bar .sb-total {
  margin-left: auto;
  color: #999;
  font-size: 14px;
  cursor: default;
}

.gsjy-site .list-empty {
  padding: 70px 0;
  text-align: center;
  color: #999;
  background: #fff;
  border-radius: 4px;
}

.gsjy-site .side-hot {
  margin-top: 16px;
  background: #fff;
  border-radius: 4px;
}
.gsjy-site .side-hot .sh-tit {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
.gsjy-site .side-hot ul li {
  display: flex;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  color: #555;
}
.gsjy-site .side-hot .sh-no {
  flex: 0 0 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
  background: #e6e9ef;
  color: #888;
  font-size: 12px;
}
.gsjy-site .side-hot .sh-no.top {
  background: var(--c-primary);
  color: #fff;
}
.gsjy-site .side-hot ul li a {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555;
}
.gsjy-site .side-hot ul li a:hover {
  color: var(--c-primary);
}

.gsjy-site .fy {
  margin-top: 22px;
  text-align: center;
}
.gsjy-site .fy a {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  border: 1px solid #e3e6ec;
  background: #fff;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
}
.gsjy-site .fy a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.gsjy-site .fy a.xzzt {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.gsjy-site .fy a.no-border {
  cursor: default;
  border-color: transparent;
  background: transparent;
}

/* ---------- 业务类型列表页补充 ---------- */
/* 公共列表版式的样式在 ColumnDefault.vue 的全局样式里（同一份 .gsjy-site 前缀），
   这里只补本页特有的「投稿引导」块 */
.gsjy-site .side-cta {
  margin-top: 16px;
}
.gsjy-site .side-cta a {
  display: block;
  padding: 14px 0;
  text-align: center;
  background: var(--c-primary);
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
}
.gsjy-site .side-cta a:hover {
  background: var(--c-primary-dark);
  color: #fff;
}

/* ---------- 文章详情页 ---------- */
/* 详情页补充样式（模板缺 .content_title/.content_text 的定义），全部带 .gsjy-site 前缀 */
.gsjy-site .nr_content {
  width: 1200px;
  max-width: 96%;
  margin: 0 auto;
  padding: 24px 0 40px;
}
.gsjy-site .nr_content .content_title {
  padding: 26px 30px 18px;
  background: #fff;
  border-radius: 6px 6px 0 0;
  text-align: center;
}
.gsjy-site .content_title .lead-title {
  color: var(--c-primary);
  font-size: 18px;
}
.gsjy-site .content_title .art-title {
  margin: 8px 0 0;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 700;
  color: #1a1a1a;
}
.gsjy-site .content_title .art-subtitle {
  margin-top: 12px;
  color: #666;
  font-size: 18px;
  line-height: 1.6;
}
.gsjy-site .content_title .time {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  color: #9aa0a8;
  font-size: 14px;
}
.gsjy-site .content_text {
  padding: 10px 30px 30px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}
.gsjy-site .content_text .rich-body {
  font-size: 17px;
  line-height: 2;
  color: #333;
}
.gsjy-site .content_text .rich-body p {
  margin: 0 0 18px;
  text-indent: 2em;
}
.gsjy-site .content_text .rich-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 4px;
}
.gsjy-site .content_text .rich-body h2,
.gsjy-site .content_text .rich-body h3 {
  margin: 24px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}
.gsjy-site .content_text .rich-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.gsjy-site .content_text .rich-body table td,
.gsjy-site .content_text .rich-body table th {
  border: 1px solid #e3e6ec;
  padding: 8px 10px;
}

/* 付费遮罩 */
.gsjy-site .pay-mask {
  margin: 20px 0;
  padding: 40px 20px;
  text-align: center;
  background: #f7f9fc;
  border: 1px dashed #cfd8e6;
  border-radius: 6px;
}
.gsjy-site .pay-mask .pm-tip {
  margin-bottom: 18px;
  color: #666;
  font-size: 16px;
}
.gsjy-site .pay-mask .pm-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* 相关阅读 */
.gsjy-site .related-block {
  margin-top: 20px;
  padding: 20px 26px;
  background: #fff;
  border-radius: 6px;
}
.gsjy-site .related-block .rb-tit {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-size: 19px;
  font-weight: 700;
  color: #333;
}
.gsjy-site .related-block ul li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f2f5;
  font-size: 16px;
}
.gsjy-site .related-block ul li:last-child {
  border-bottom: 0;
}
.gsjy-site .related-block ul li a {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
.gsjy-site .related-block ul li a:hover {
  color: var(--c-primary);
}
.gsjy-site .related-block ul li span {
  color: #b0b3b8;
  font-size: 14px;
}
.gsjy-site .art-empty {
  padding: 80px 0;
  text-align: center;
  color: #999;
}

@media (max-width: 767px) {
  .gsjy-site .content_text .rich-body {
    font-size: 16px;
    line-height: 1.9;
  }
  .gsjy-site .content_title .art-title {
    font-size: 22px;
  }
  .gsjy-site .nr_content .content_title,
  .gsjy-site .content_text {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 0;
  }
}

/* ---------- 头部 / 页脚 ---------- */
/* =============================================================================
   模板样式的少量覆盖（模板靠 jQuery 实现的部分，这里用 CSS 补上）
   全部带 .gsjy-site 前缀，避免影响 Element Plus
   ============================================================================= */

/* 头部是 fixed 的，内容区要往下让出高度 */
.gsjy-site .header-hold {
  height: 100px;
}
.gsjy-site .header-hold.shrink-hold {
  height: 70px;
}

/* 二级下拉：模板用 jQuery 控制 display，这里用 :hover（鼠标移入展开） */
.gsjy-site ul.nav-main > li:hover .hidden-box {
  display: block;
}
.gsjy-site ul.nav-main .hzwz {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 当前栏目高亮 */
.gsjy-site ul.nav-main > li > a.nav-on {
  color: var(--c-primary);
  font-weight: 700;
}

/* 会员入口：与模板搜索按钮同风格（蓝色胶囊） */
.gsjy-site .header .search-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gsjy-site .user-entry {
  position: relative;
}
.gsjy-site .user-entry .user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  padding: 0 18px;
  border-radius: 50px;
  background: var(--c-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.gsjy-site .user-entry .user-btn:hover {
  background: var(--c-primary-dark);
  color: #fff;
}
.gsjy-site .user-entry .user-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.gsjy-site .user-entry .user-text {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsjy-site .user-drop {
  position: absolute;
  top: 62px;
  right: 0;
  min-width: 150px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 100000;
}
.gsjy-site .user-drop a {
  display: block;
  padding: 12px 18px;
  color: #333;
  font-size: 15px;
}
.gsjy-site .user-drop a:hover {
  background: var(--c-primary);
  color: #fff;
}

/* 内联搜索框 */
.gsjy-site .head-search {
  position: absolute;
  right: 3%;
  top: 108px;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  z-index: 100001;
}
.gsjy-site .head-search input {
  width: 300px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #dfe3ea;
  border-radius: 4px;
  font-size: 15px;
}
.gsjy-site .head-search button {
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: var(--c-primary);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

/* ============================================================
   【2026-09-20 第34轮 · 已删除：针对「旧页头」的整段覆盖】

   原内容（约 75 行）是给模板**上一代**页头打补丁用的：
     .gsjy-site .header .logoimg / .shrink .logoimg
     .gsjy-site .nav { width: auto !important; flex: 1 1 auto }
     .gsjy-site .nav .nav_conent { display:flex ... }
     .gsjy-site ul.nav-main > li { width: auto !important; flex: 1 1 auto }
     以及 1620px / 1420px 两档媒体查询

   这些都是为了把旧模板写死的 `ul.nav-main > li { width: 16.6% }`（6 个栏目时代的写法）
   掰成 flex 均分。现在页头已换成《newPage》新模板（.headBox / .nav-main，自带
   max-width:1300px + space-between），旧补丁反而成了故障源 ——
   其中 `.gsjy-site .nav{ width:auto !important }` 会把新导航压成内容宽度（实测 1080px），
   导航项挤在一起，正是「样式不统一」的直接原因。

   移动端抽屉的二级样式也一并删除：新 leftMenu.css（.gsjy-np 前缀）已自带 .f2 处理，
   旧规则（不分档位）反而会在 PC 上命中新抽屉的 .f2。

   结论：新模板的页头 / 页脚 / 列表页 / 内容页样式一律由 /gsjy-new/css 负责，
   本文件不再对页头做任何覆盖。
   ============================================================ */