@charset "utf-8";
/* WAP 内容页样式（content.html）
规则与 waplist.css / wap_index.css 保持一致：1rem = 100px（750 设计稿），随屏宽等比缩放、元素铺满屏幕 */
/* 1. 全局基础 */
html { font-size: calc(100vw / 7.5); }
html, body { width: 100%; margin: 0; overflow-x: hidden; text-align: left; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size: 0.26rem; line-height: 1.6; color: #333; background: #fff; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a, a:hover { color: #333; text-decoration: none; }
ul, li, p, h2, h3 { margin: 0; padding: 0; list-style: none; }
/* 2. 容器 */
.part { width: 100%; box-sizing: border-box; padding: 0 0.24rem; margin: 0 auto; position: relative; }
.part.div_flex { display: block; }
.containel { min-height: 0; box-shadow: none; padding: 0.02rem 0 0.5rem; }
/* 3. 头部：搜索 + 导航（与首页 / 列表页 WAP 版一致） */
.div_top { background: #0a4fd6 url(https://www.hnpiyao.cn/images/top_banner.jpg) center top no-repeat; background-size: 190%; min-height: 0; padding: 0; }
.div_top .part { padding: 2.2rem 0.24rem 0; }
.div_search { display: flex; align-items: center; justify-content: center; width: 100%; }
.div_search .div_input { flex: 1; width: auto; height: 0.76rem; line-height: 0.76rem; box-sizing: border-box; padding: 0 0.24rem; font-size: 0.26rem; color: #333; background: #fff; border: 0; border-radius: 0.12rem 0 0 0.12rem; outline: none; -webkit-appearance: none; appearance: none; }
.div_search input[type="image"] { flex: 0 0 auto; width: auto; height: 0.76rem; border-radius: 0 0.12rem 0.12rem 0; }
.div_nav { margin-top: 0.24rem !important; }
.div_nav ul { width: 100%; height: auto; display: flex; background: #0648d2; border-radius: 0.12rem 0.12rem 0 0; overflow: hidden; }
.div_nav ul li { flex: 1; width: auto; height: 0.88rem; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.div_nav ul li a { font-size: 0.24rem; color: #fff; }
.div_nav ul li.active, .div_nav ul li:hover { background: #1179ea; border-radius: 0; }
/* 4. 隐藏桌面端无样式、无行为的壳层元素（返回栏标题为空、返回顶部无 JS） */
.wap-list-header, .back_top { display: none; }
/* 如需显示移动端返回栏 / 返回顶部按钮（需自行补 JS），启用下面样式：
.wap-list-header { display: flex; position: sticky; top: 0; z-index: 999; align-items: center; height: 0.88rem; padding: 0 0.24rem; background: #fff; border-bottom: 1px solid #eee; }
.wap-list-header .title { flex: 1; text-align: center; font-size: 0.32rem; font-weight: bold; }
.wap-back { width: 0.32rem; height: 0.32rem; border-left: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); }
.back_top { display: block; position: fixed; right: 0.24rem; bottom: 1.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.back_top:after { content: ""; position: absolute; left: 0.24rem; top: 0.3rem; width: 0.24rem; height: 0.24rem; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); }
*/
/* 5. 面包屑：弱化为浅色胶囊提示条 */
.crumb { margin-top: 0.24rem; padding: 0.16rem 0.24rem; font-size: 0.24rem; line-height: 1.6; color: #7c8699; background: #f7f9ff; border-radius: 0.12rem; }
.crumb span { margin-right: 0.04rem; }
.crumb a { font-size: 0.24rem; color: #535362; }
.crumb a:hover { color: #0648d2; }
/* 6. 文章区：标题 + 来源 + 正文 */
.content { display: block; width: 100%; margin: 0; }
.content_left, .content_right { width: 100%; }
.content_right { margin-top: 0.4rem; }
.content_left.m_t_20 { margin-top: 0.3rem; }
.content_left .title { width: 100%; margin: 0; padding: 0.04rem 0 0.2rem; font-size: 0.4rem; line-height: 1.4; font-weight: 700; text-align: left; color: #1a1a1a; }
.content_left .source { display: flex; flex-direction: column; align-items: center; padding: 0.2rem 0; font-size: 0.24rem; color: #9aa1ad; }
.content_left .source span { display: block; margin: 0 0 0.08rem; font-size: 0.24rem; color: #9aa1ad; }
.content_left .source span:last-child { margin-bottom: 0; }
.article_box { display: block; width: 100%; margin: 0.2rem auto 0; padding: 0.24rem 0 0; border-top: 1px solid #eee; position: relative; }
.detail_article { width: 100%; margin: 0; font-size: 0.3rem; line-height: 1.8; color: #333; word-wrap: break-word; overflow-wrap: break-word; }
.detail_article p { margin: 0.3rem 0; font-size: 0.3rem; line-height: 1.9; text-indent: 2em; text-align: justify; }
.detail_article p:first-child { margin-top: 0; }
.detail_article img, .detail_article video, .detail_article iframe { max-width: 100% !important; height: auto; display: block; margin: 0.2rem auto; }
.detail_article table { width: 100% !important; }
/* 7. 分享：桌面端是正文左侧的绝对定位竖排图标，WAP 改为正文上方的横排按钮
精灵图实测 100×450 = 2 列 × 9 行（每格 50×50），列=默认/悬停，前 3 行=微信/微博/QQ。
直接让 自己承载整张图，不需要 这类裁剪层：按钮与整图同为「2 格宽 × 9 格高」，
background-size 取 200% 900% 等比缩放后，每格恰好等于一个按钮的大小，天然对齐格子。
取格必须用百分比：按钮是 rem，会随屏宽变，像素坐标一旦写死就和缩放后的格子对不上。
换算：纵向取第 n 行需上移 (n-1) 格，而纵向可移动量是 (9-1) 格 → 百分比 = (n-1)/8；
横向取第 2 列 = 移动量 1/1 = 100%。 */
.detail_share { position: static !important; width: auto !important; margin: 0 0 0.28rem !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: flex-start; text-align: left; }
.detail_share .label { flex: 0 0 auto; justify-content: flex-start; margin-right: 0.24rem; font-size: 0.24rem; line-height: 1; color: #999; font-weight: normal; }
.detail_share .label::before, .detail_share .label::after { display: none !important; }
.share_list { display: flex !important; flex-direction: row !important; align-items: center; }
/* index.css 用简写 background 写死了 50×50 和取格坐标，位置与尺寸都得在这里重写 */
.share_wx, .share_wb, .share_qq { display: block !important; flex: 0 0 auto !important; width: 0.72rem !important; height: 0.72rem !important; margin: 0 0.4rem 0 0 !important; background: url(https://www.hnpiyao.cn/images/icon-sprite.png) no-repeat 0 0 !important; background-size: 200% 900% !important; }
.share_qq { margin-right: 0 !important; }
.share_wb { background-position: 0 12.5% !important; } /* 第 2 行：上移 1 格 = 1/8 */
.share_qq { background-position: 0 25% !important; } /* 第 3 行：上移 2 格 = 2/8 */
.share_wx:hover { background-position: 100% 0 !important; } /* 悬停列：左移 1 格 = 100% */
.share_wb:hover { background-position: 100% 12.5% !important; }
.share_qq:hover { background-position: 100% 25% !important; }
/* 二维码浮层：桌面端是正文左侧 150×160 的绝对定位小面板，WAP 改为屏幕居中的弹层
（样式写在行内，只能用 !important 覆盖；行内样式不能删，否则 PC 端失去样式） */
#qrcode { position: fixed !important; left: 50% !important; top: 50% !important; margin: 0 !important; width: 4.2rem !important; height: auto !important; padding: 0.4rem 0.3rem 0.3rem !important; box-sizing: border-box !important; transform: translate(-50%, -50%); z-index: 9999 !important; }
#qrcode > div:first-child { display: none !important; } /* 指向微信图标的小箭头，居中弹层不需要 */
#qrcode canvas, #qrcode table { display: block !important; width: 2.6rem !important; height: 2.6rem !important; margin: 0 auto !important; }
#qrcode span { position: static !important; display: block !important; margin-top: 0.2rem !important; font-size: 0.24rem !important; line-height: 1.6 !important; text-align: center !important; color: #666 !important; }
/* 8. 底部 */
.footer { background: #f7f7f7; margin-top: 0.5rem; padding: 0.36rem 0.24rem calc(0.36rem + env(safe-area-inset-bottom)); font-size: 0.22rem; line-height: 1.8; color: #666; }
.footer .content, .footer .newblock { width: 100%; text-align: center; margin: 0 auto; font-size: 0.22rem; line-height: 1.8; }
/* 9. 铺满屏幕兜底（清除桌面端固定宽度残留） */
html, body { zoom: 1 !important; }
.part, .containel, .crumb, .content, .content_left, .content_right, .article_box, .detail_article, .footer, .footer .content, .div_top, .div_search, .div_nav ul { width: 100% !important; }
.div_top, .containel { height: auto !important; min-height: 0 !important; }
.containel > .content { display: block !important; margin: 0.3rem !important; justify-content: flex-start !important; width: auto !important; }
.content_left .title { width: 100% !important; margin: 0 !important; }
.article_box, .detail_article { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
.detail_share { position: static !important; width: auto !important; margin-left: 0 !important; }
.div_nav ul li { flex: 1 !important; width: auto !important; }
.div_search .div_input { width: auto !important; flex: 1 !important; }