@charset "gb2312";
/* CSS Document */


/* ---------- 01. 变量与基础重置 ---------- */
:root {
  --bg: #f5f5f5;
  --ink: #23272e;
  --muted: #79828f;
  --line: #e3e8ef;
  --brand: #3652ac;          /* 品牌蓝 */
  --brand-deep: #2a418c;
  --radius: 5px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  font: 18px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

ul, ol { list-style: none; }
img { vertical-align: top; border: 0; }
button, input, select, textarea { font-size: 100%; }
em {font-style: normal;}
a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
a:hover { color: var(--brand); }

.cl { clear: both; }

/* ---------- 02. 头部 ---------- */
.header {
  width: 100%; padding:0;
  background: url(../images/topbg.png) no-repeat center;background-size: cover; 
}

.header .wrap { padding: 2% 0; width: 1200px; margin: 0 auto;}

.logo {
  width: 32%;
  height: 60px;
  background: url(../images/66wzlogo.svg) no-repeat center left;
  background-size: contain;
  text-indent: -9999px; /* 文字仅用于无障碍与 SEO，视觉以 Logo 图为准 */
}
.logo a { display: block; height: 100%; }

.header .info { float: right; margin-top: 20px; }

/* ---------- 03. 主导航 ---------- */
.nav { width: 100%; background: var(--brand); }

.nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.nav li { flex: 0 0 auto; }

.nav a {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 3em;
  padding: 0 2em;
  white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ---------- 04. 版心与章节标题 ---------- */
.page {
  width: 96%;
  max-width: 1200px;
  margin: 24px auto 48px;
}

h3.lanmu {
  color: var(--brand);
  font-size: 28px;
  font-weight: 700;
  line-height: 3.5em;
  text-align: center;
}
h3.lanmu span { background: var(--bg); padding: 0 1.5em; }

/* ---------- 05. 焦点图轮播 ---------- */
.carousel { position: relative; }

.viewport {
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.item {
  flex: 0 0 calc(100% / 3); /* 桌面每屏 3 张，手机端在 10.3 中调整为 1 张 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.item .info { width: 100%; padding: 2%; }

.item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.item .info p {
  text-align: center;
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  color: #333;
  font-size: 16px;
  line-height: 3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #3d4550;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 16px rgba(23, 33, 56, 0.14);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.arrow:hover { background: #2f3a4d; border-color: #2f3a4d; color: #fff; }
.arrow:active { transform: translateY(-50%) scale(0.95); }
.arrow:focus-visible { outline: 3px solid #93b4f5; outline-offset: 2px; }

.arrow.prev { left: -23px; }
.arrow.next { right: -23px; }
.arrow svg { width: 20px; height: 20px; }

/* 计数条默认隐藏，如需展示请改为 display: flex 并配合 .carousel 定位 */
.top { display: none; }

.counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(20, 30, 50, 0.05);
}
.counter b { color: var(--ink); font-size: 16px; font-weight: 700; }

/* ---------- 06. 勤政日历列表 ---------- */
.wxbs ul { display: flex; flex-wrap: wrap; }

.wxbs ul li {
  width: 32%;
  margin: 0 2% 2% 0;
  background: #fff;
  padding: 15px 20px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.wxbs ul li:nth-child(3n) { margin-right: 0; }
.wxbs ul li h4 {  font-weight: normal;}
.wxbs ul li h4 span {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.wxbs ul li h4 p {
  color: #999;
  line-height: 24px;
  font-size: 14px;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wxbs ul li:hover { background: #0066c5; }
.wxbs ul li:hover h4 span,
.wxbs ul li:hover h4 p { color: #fff; }

/* ---------- 07. 选项卡 · 瀑布流 ---------- */
.linktabs { text-align: center; }

.tab-nav strong { position: relative; cursor: pointer; }

.tab-btn {
  font-size: 28px;
  font-weight: 700;
  line-height: 3.5em;
  padding: 0 1em;
}
.tab-btn.active { color: var(--brand); }

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #4a90d9;
  transform: translateX(-50%);
}

.tab-panel { display: none; padding: 0; line-height: 24px; }
.tab-panel.active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 瀑布流：列数变化 4 → 2 → 1（跳过 3 列，避免末行孤卡） */
.waterfall { columns: 4; column-gap: 20px; }

.waterfall li {
  break-inside: avoid;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius);
  text-align: left;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.waterfall li:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.waterfall li h3 { max-width: 100%;}
.waterfall li h3 img { width: 100%; height: auto; }

.waterfall li h4 {
  font-size: 18px;
  color: #333;
  font-weight: 800;
  margin: 16px 0;
  padding: 0 5%;
}
.waterfall li h4 a { color: #333; }
.waterfall li h4 a:hover { color: #0c79c9; }

.waterfall li h5 {
  font-size: 14px;
  color: #999;
  line-height: 20px;
  margin: 0 0 14px 0;
  padding: 0 5%;font-weight: normal; 
}

.waterfall li h6 {
  font-size: 12px;
  color: #aaa;
  line-height: 20px;
  padding: 0 5% 5%;font-weight: normal;
}
.waterfall li h6 span { padding: 0 10px; display: inline-block; transform: scale(0.8); }
.waterfall li h6 a { color: #aaa; }
.waterfall li h6 a:hover { color: #0c79c9; }

/* “查看更多”按钮默认隐藏，接入更多页后可开启 display: block */
.more { text-align: center; margin: 2% 0; display: none; }
.more span {
  display: block;
  width: 200px;
  margin: 0 auto;
  background: #c8c8c8;
  line-height: 48px;
  font-size: 16px;
  border-radius: 24px;
}
.more span a { display: block; color: #666; }
.more span:hover { background: var(--brand); }
.more span:hover a { color: #fff; }

/* ---------- 08. 专题轮播 ---------- */
.carousel3 {
  position: relative;
  width: 100%;
  padding: 1% 0 2%;
  overflow: hidden;
}

.track3 { display: flex; gap: 16px; will-change: transform; }

/* 桌面每屏 4 张；断点变化见 10.1 / 10.2，与 JS 的 VISIBLE 保持一致 */
.card3 {
  flex: 0 0 calc((100% - 48px) / 4);
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

.card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.card-caption {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #4a3526;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: 0 6px 18px rgba(120, 70, 30, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-btn svg { width: 24px; height: 24px; fill: currentColor; }
.nav-btn:hover { background: #dde5fd; box-shadow: 0 8px 22px rgba(120, 70, 30, 0.28); }
.nav-btn:active { transform: translateY(-50%) scale(0.94); background: #fbd7c5; }

.prev3 { left: 0; }
.next3 { right: 0; }

/* ---------- 09. 页脚 ---------- */
.licence {
  padding: 30px 0;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
.licence a { padding: 0 8px; color: #fff; }
.licence a:hover { color: #fff; opacity: 0.85; }

.licence2 {
  width: 574px;
  margin: 0 auto;
  padding: 30px 0;
  overflow: hidden;
}
.licence2 a { margin: 0 8px; }

#police, #web, #child {
  display: block;
  float: left;
  width: 175px;
  height: 46px;
  background: url(../images/bott.png) no-repeat;
}
#web { background-position: 0 -46px; }
#child { background-position: bottom; }

/* ====内容页======= */
.subtext { color:#aaa;}
.subtext span { font-size:16px; padding-right:10px;}
#abs { background-color:#fff; color:#999; padding:20px 30px; font-size:16px; line-height:1.8em; text-align:justify;margin-top: 2%;}
.tools { padding:16px 0; border-top:#eee solid 1px; text-align:right;}
.title p { font-size:18px; padding-bottom:10px;}
#artibodytitle { color: #3a3a3a; font-size:40px; font-weight: 600; padding-bottom:15px;}
#comt { float:right; width:120px; display:none;}
#comt span { color:#aaa;}
.layui-row {overflow: hidden;}
.layui-col-md9 {width:70%; float: left;}
.layui-col-md3 {width:20%; float: right;}
#artibody { margin-top:20px;}
#artibody,#artibody div span { color:#333; font-size:18px;}
#artibody a { color:#333; border-bottom:#333 solid 1px;}
#artibody a:hover { color:#00adec; border-color:#00adec;}
#artibody p { line-height:2em; text-align:justify;margin-bottom:0.75em;}
#artibody p span { line-height: 2em;}
#artibody p strong,#artibody strong,#artibody p strong span { font-weight: 600;}
#artibody p.from,#artibody p.from a { color:#f8f8f8; border:none;}
#artibody img { width:auto; max-width:100%; height:auto; width:auto\9; /* ie8 */}
#artibody .image-container { text-align: center; }
#artibody .image-container img { max-width: 100%; height: auto; }
#news_more_page_div_id { font-size:14px;  color:#999;}
#news_more_page_div_id a { color:#666; text-decoration:none; border:none;}
.player {position: relative;width:640px; margin:10px auto;}
.author { overflow: hidden;}
.author span { padding:2px 8px;font-size: 14px; color: #808080;}
.author a,.author span { float: right;}
.sidebar img { width: 100%;}
.bluefont { color:#3652ac;}
.piclist li { padding-top: 10px; overflow: hidden;}
.piclist li img { width: 100%;border-radius: 5px;}
.piclist li p { padding:5px 0 10px;}
.piclist li p a  { font-size: 16px;}



.box { position: fixed; top:300px; right:50%;  margin-right: -320px;}
.box > div { background-image: url(../images/icon.png); background-repeat: no-repeat; width: 48px; height: 48px; cursor: pointer; border-radius: 100%; margin-bottom: 10px;}
#share-qrcode { background-position: right 0;}
#share-sina { background-position: right -48px; }
#share-qq { background-position: right -96px; }
#share-douban { background-position: right -144px; }
#share-qzone { background-position: right -192px; }
.box > div#share-qrcode:hover { background-position:left 0; }
.box > div#share-sina:hover { background-position: left -48px; }
.box > div#share-qq:hover { background-position: left -96px; }
.box > div#share-douban:hover { background-position: left -144px; }
.box > div#share-qzone:hover { background-position: left -192px; }

/* ====列表页======= */
.position { margin-bottom:30px;}
.position,.position a { color: #808080; font-size: 14px;}
.position a:hover { color: #005dc5;}

/*图文列表*/
.news_pic li { position: relative; overflow: hidden;}
.news_pic li hr {
    line-height: 0;
    margin: 20px 0;
    padding: 0;
    border: none!important;
    border-bottom: 1px solid #eee!important;
    clear: both;
    background: 0 0
}
.news_pic li:last-child hr { }
.news_pic li img { width: 200px; height: 115px; float: left; margin-right: 20px; margin-bottom: 20px;}
.news_pic li p { font-size: 22px;margin-bottom: 15px;}
.news_pic li span { display: none; margin-bottom: 15px;}
.news_pic li span a { font-size:16px; color:#d80307;}
.news_pic li span a:hover { color: #d80307;}
.news_pic li i { font-size:16px; color: #bbb;font-style: normal;}

#pagetemple { margin-top:30px;}
#pagetemple span { font-size:14px; padding: 0 4px;}

/* ==========================================================================
   10. 响应式适配
   ========================================================================== */

/* 10.1 平板（≤1024px） */
@media (max-width: 1024px) {
  .arrow.prev { left: 6px; }   /* 轮播箭头收进画面内 */
  .arrow.next { right: 6px; }

  .waterfall { columns: 2; }

  /* 专题轮播：每屏 3 张（与 JS STEP/VISIBLE 同步） */
  .card3 { flex-basis: calc((100% - 32px) / 3); }
}

/* 10.2 手机（≤768px） */
@media (max-width: 768px) {
  html { font-size: 16px; }

  .header { padding: 12px 0 20px; }
  .header .wrap { padding: 0; width: 100%; }

  .logo {
    float: none;
    width: 88%;
    height: 56px;
    margin: 0 auto;
    background-position: center;
  }

  .header .info {
    float: none;
    text-align: center;
    margin-top: 10px;
  }
  .header .info img { max-width: 90%; }

  /* 导航：7 个栏目放不下时横向滚动 */
  .nav ul {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: .8rem 0;
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }
  .nav a { font-size: 1rem; line-height: 2em; padding: 0 1.5em; }

  .page { margin: 16px auto 32px; }

  h3.lanmu { font-size: 22px; line-height: 3em; }
  .tab-btn { font-size: 22px; line-height: 3em; }

  .wxbs ul li { width: 100%; margin-right: 0; }
  .wxbs ul li h4 span { font-size: 16px; }
  .wxbs ul li h4 p { font-size: 13px; }

  .licence { padding: 20px 12px; }
  .licence2 { width: 100%; padding: 20px 0; }
  .licence2 a { margin: 4px 8px; }

  /* 专题轮播：每屏 2 张（与 JS STEP/VISIBLE 同步） */
  .card3 { flex-basis: calc((100% - 16px) / 2); }
}

/* 10.3 手机（≤599px）：焦点图每屏 1 张（与 JS perView 同步） */
@media (max-width: 599px) {
  .item { flex-basis: 100%; }
  .item .info { padding: 3%; }
  .item .info p { font-size: 14px; line-height: 2.6rem; }

  .arrow { width: 38px; height: 38px; }
  .arrow svg { width: 18px; height: 18px; }

  .waterfall { column-gap: 12px; }
  .waterfall li { margin-bottom: 12px; }
  .waterfall li h4 { font-size: 15px; margin-bottom: 10px; }
  .waterfall li h6 { font-size: 11px; }

  .prev3 { left: 4px; }
  .next3 { right: 4px; }
}

/* 10.4 超小屏（≤380px） */
@media (max-width: 380px) {
  .waterfall { columns: 1; }
  .nav a { font-size: 14px; padding: 0 0.9em; }
}

/* 动效偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
  .track, .track3 { transition: none !important; }
}