/* ==========================================================
   zzmy.vip「轻单页」风格复刻样式
   ========================================================== */
html { -webkit-text-size-adjust: none; word-wrap: break-word; word-break: break-all; }
body {
  color: #333333; font-size: 14px;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
               Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc",
               "Microsoft YaHei", sans-serif;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; -webkit-tap-highlight-color: transparent; }
a { color: #111111; text-decoration: none; transition: all .15s ease 0s; }
a:hover { text-decoration: underline; }
ol, ul { list-style-type: none; }
i { font-style: normal; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
video { height: auto !important; width: 100% !important; }

.main { margin: 0 auto; max-width: 1000px; }

/* ============ 头部（黑底渐变 + 大标题 + 导航） ============ */
header {
  padding: 100px 0 100px 0; position: relative; text-align: center; color: #ffffff;
  background-color: #000000;
  background-image: linear-gradient(120deg, #111111, #000000);
  background-repeat: no-repeat; background-position: top; background-size: cover;
}
header.head_p { padding: 140px 0 100px 0 !important; }
.breadcrumb_box {
  background-color: rgba(0, 0, 0, .2); color: rgba(255, 255, 255, .7);
  position: absolute; top: 0; left: 0; right: 0; padding: 0 10px; line-height: 150%;
  overflow: hidden;
}
.breadcrumb_box .home { float: left; padding: 10px 0; }
.breadcrumb_box .breadcrumb { float: right; text-align: right; padding: 10px 0; }
.breadcrumb_box a { color: rgba(255, 255, 255, .7); }
.breadcrumb_box i { padding: 0 10px; font-style: normal; }

.title_box h1 { font-size: 40px; line-height: 150%; font-weight: bold; margin-bottom: 20px; }
.title_box h1 a { color: #ffffff; }
.title_box p { line-height: 150%; margin-bottom: 20px; opacity: .7; }
.nav { margin: 18px auto 0; max-width: 980px; }
.nav li { display: block; margin: 0 0 18px; }
.nav li a {
  background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24);
  border-style: solid; border-width: 1px; border-radius: 5px; color: rgba(255, 255, 255, .78);
  display: block; padding: 18px 24px; font-size: 26px; line-height: 1.35;
  transition: color .2s, background-color .2s, border-color .2s;
}
.nav li a:hover {
  background-color: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .8); text-decoration: none;
}

/* ============ 正文区 ============ */
.section { margin: 20px 0; }
.section h2 { line-height: 175%; margin: 20px 0; }
.section h2::before { content: ""; margin-right: 10px; border-radius: 2px; border-left: 6px solid #000000; }
.article { font-size: 16px; }
.article p, .article div, .article blockquote { line-height: 175%; margin: 20px 0; }
.article img { padding: 10px; background: #ffffff; max-width: 100% !important; height: auto !important; }
.article h2, .article h3, .article h4, .article h5, .article h6 { line-height: 175%; margin: 20px 0; }
.article h2::before, .section h2::before { content: ""; margin-right: 10px; border-radius: 2px; border-left: 6px solid #000000; }
.article h3::before { content: ""; margin-right: 10px; border-radius: 2px; border-left: 5px solid #000000; }
.article h4::before { content: ""; margin-right: 10px; border-radius: 2px; border-left: 4px solid #000000; }

/* 视频区 */
.video-box { background: #000; padding: 20px; margin: 20px 0; border-radius: 4px; }

/* 图片区块：每张图独占一行，按原图大小显示（超宽自动缩到容器宽度） */
.img-grid li { display: block; width: 100%; margin: 20px 0 0 0; text-align: center; }
.img-grid li img { max-width: 100%; height: auto; padding: 0; background: transparent; }
.img-grid li span { display: block; font-size: 13px; color: #999999; margin-top: 8px; }

/* 表格（版本对比等） */
.article table { width: 100%; overflow: hidden; border-spacing: 0; border-collapse: collapse; margin: 20px 0; }
.article table th, .article table td { padding: 15px 20px; border: 1px solid #dedede; word-break: break-word; }
.article table tr { background: #ffffff; }
.article table tr:nth-child(2n) { background: #f7fafc; }
.article table thead tr th { background: #e8e8e8; }

/* 翻篇 */
.turn { overflow: hidden; margin-right: -2%; }
.turn li { line-height: 150%; margin-right: 2%; width: 48%; float: left; font-size: 16px; }
.turn li a { display: block; }
.turn_prev::before { content: "上一篇"; display: block; font-size: 12px; line-height: 16px; font-weight: bold; margin: 0 0 10px 0; border-left: 2px solid #000000; padding-left: 5px; }
.turn_next::before { content: "下一篇"; display: block; font-size: 12px; line-height: 16px; font-weight: bold; margin: 0 0 10px 0; border-left: 2px solid #000000; padding-left: 5px; }

/* ============ 页脚 ============ */
footer { padding: 20px 0; border-top: solid 1px #e9ebec; text-align: center; }
footer ul { line-height: 150%; margin: 0 -10px 10px -10px; }
footer ul li { display: inline-block; margin: 0 10px; }
footer p { line-height: 150%; }
footer p, footer a { color: #999999; }
.gongan { position: relative; top: -2px; }

/* ============ 移动端适配 ============ */
@media screen and (max-width: 1081px) {
  .main { padding: 0 30px; }
  footer { padding: 20px 0; }
}
@media screen and (max-width: 721px) {
  header { padding: 50px 0; }
  header.head_p { padding: 100px 0 50px 0 !important; }
  .title_box h1 { font-size: 32px; }
  .nav { margin: 12px 0 0; }
  .nav li { width: 100%; margin: 0 0 14px; }
  .nav li a { padding: 14px 12px; font-size: 22px; }
  .img-grid li { width: 100%; margin: 20px 0 0 0; }
}
@media screen and (max-width: 481px) {
  .breadcrumb_box .breadcrumb { display: none; }
  .main { padding: 0 20px; }
  footer { padding: 20px 0; font-size: 12px; }
}

/* ============ 微信内引导「在浏览器打开」遮罩（参考 dxzx 同款：全屏拦截、无关闭入口） ============ */
/* 全屏显示一张「引导在浏览器打开」的背景图（assets/wx-guide-bg.png），拦截所有点击 */
.wx-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9998;
}
.wx-mask.active { display: flex; align-items: center; justify-content: center; }
.wx-mask .wx-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 右上角引导图（模拟微信聊天页顶部 + 虚线箭头指向右上角菜单） */
.wx-tip {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  width: 350px;
  max-width: 88vw;
}
.wx-tip.active { display: block; }
.wx-tip-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.wx-tip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2b2b2b;
  padding: 10px 14px;
}
.wx-tip-bar-title {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
}
.wx-tip-dots {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  position: relative;
  padding-right: 4px;
}
.wx-tip-dots::after {
  content: '';
  position: absolute;
  top: -7px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f5222d;
  border: 2px solid #fff;
  animation: wx-pulse 1.2s ease-in-out infinite;
}
@keyframes wx-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}
.wx-tip-text {
  padding: 13px 14px;
  font-size: 15px;
  color: #333333;
  line-height: 1.6;
  text-align: center;
  background: #ffffff;
}
.wx-tip-text b { color: #07c160; font-weight: 700; }

/* 虚线箭头：从卡片指向微信右上角菜单 */
.wx-tip-arrow {
  position: absolute;
  top: -32px;
  right: 38px;
  width: 44px;
  height: 36px;
  animation: wx-arrow-move 1.2s ease-in-out infinite;
}
@keyframes wx-arrow-move {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}