@charset "utf-8";
/* WAP 列表页样式（pylist.html）
   规则与 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.4rem; }
.list.m_t_40 { margin-top: 0.3rem; }
/* 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; }
.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. 左栏菜单 → 通栏横向滚动的栏目切换（负边距出血到屏幕边缘） */
.list.flex { display: block; }
.list_menu { width: 100%; margin: 0.24rem 0 0.28rem; }
/* 上下留出拖动余量，避免手指在标签边缘滑动时蹭到列表；左右仍靠负边距通栏出血 */
#menu_nav { min-height: 0 !important; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; width: auto; box-sizing: border-box; margin: 0 0.04rem; padding: 0.12rem 0.14rem 0.16rem; }
#menu_nav::-webkit-scrollbar { display: none; }
.list_menu li { flex: 0 0 auto; margin: 0 0.16rem 0 0; padding: 0; }
.list_menu li:last-child { margin-right: 0.24rem; }
/* .list_menu li .icon { display: none; } */
.list_menu li .jigoujianjie {
    /* background: url(../images/icon_menu_jgjj.png) no-repeat; */
	background-size: contain;
    width: 31px;
    height: 32px;
}
.list_menu li .icon {
    margin-right: 10px;
    /* background: url(../images/icon_menu_jbzn.png) no-repeat; */
	background-size: contain;
    width: 31px;
    height: 32px;
    text-align: center;
}
.list_menu li .wangxinzixun {
    /* background: url(../images/icon_menu_wxdt.png) no-repeat; */
	background-size: contain;
    width: 31px;
    height: 32px;
}
.list_menu li .flfg {
    /* background: url(../images/icon_menu_flfg.png) no-repeat; */
	background-size: contain;
    width: 31px;
    height: 32px;
}

/* 胶囊即热区：边框画在 .menu_item 上，a 用伪元素铺满整个胶囊（含内边距与图标区），
   手指点在胶囊任意位置都能跳转，而不是只有文字那一条；index.css 里 a 的 width:102px 一并解掉 */
.list_menu li .menu_item { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 0.72rem; height: auto; padding: 0.14rem 0.3rem; border: 1px solid #c9d8f5; border-radius: 0.08rem; background: #f7f9ff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* a 本身也撑满胶囊：flex:1 吃掉剩余宽度、align-self:stretch 拉满高度，
   这样链接"本体"就是整个热区，不只靠伪元素命中（部分浏览器对伪元素的触摸命中有差异）
   -webkit-user-drag:none 是关键：否则手指按住链接横向滑会被浏览器判定为"拖动链接"，滚动条不动 */
.list_menu li a { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: auto; min-width: 0; font-size: 0.26rem; line-height: 1.4; color: #3b4661; white-space: nowrap; touch-action: pan-x; -webkit-user-drag: none; }
.list_menu li a:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; -webkit-user-drag: none; }
.list_menu li .menu_item:active { border-color: #0648d2; background: #e6eeff; }
.list_menu li.active .menu_item, .list_menu li:hover .menu_item { border-color: #0648d2; background: #0648d2; }
.list_menu li.active a, .list_menu li:hover a { color: #fff!important; }
/* 7. 列表主体：标题竖条装饰 + 标题/日期上下两行的卡片行 */
.list_news_box { width: 100%; border-left: 0; padding-left: 0; }
.list_news_box .head { position: relative; padding-bottom: 0.18rem; border-bottom: 1px solid #ececec; }
.list_news_box .head:after { content: ""; position: absolute; left: 0; bottom: -0.01rem; width: 0.64rem; height: 0.06rem; background: #0648d2; border-radius: 0.03rem; }
.list_news_box .head .title { position: relative; padding-left: 0.24rem; font-size: 0.34rem; line-height: 1.2; font-weight: 700; color: #0b3fa0; }
.list_news_box .head .title:before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -0.16rem; width: 0.08rem; height: 0.32rem; background: #0648d2; border-radius: 0.04rem; }
.list_news.m_t_25 { margin-top: 0.1rem; }
.list_news li { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0.28rem 0.36rem 0.28rem 0; border-bottom: 1px solid #f0f0f0; }
.list_news li:first-child { border-top: 0; }
.list_news li:active { background: #f7f9ff; }
.list_news li:after { content: ""; position: absolute; right: 0.06rem; top: 0.42rem; width: 0.16rem; height: 0.16rem; border-top: 0.02rem solid #c8cdd6; border-right: 0.02rem solid #c8cdd6; transform: rotate(45deg); }
.list_news li a { width: 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.3rem; line-height: 1.5; color: #1a1a1a; }
.list_news li a:active { color: #0648d2; }
.list_news li .date { float: none; margin: 0.12rem 0 0; font-size: 0.22rem; line-height: 1.4; color: #9aa1ad; white-space: nowrap; }
.list_news p { font-size: 0.26rem; line-height: 1.8; }
/* 8. 分页：移动端改用「填充式胶囊按钮」，替掉桌面端那套描边小方块 ——
   40px 触摸区（比原来的 30px 好按得多），去掉边框改用浅灰底，块面更大更易点中，当前页实心蓝底白字。
   三个坑：pub.css 给 a 写了固定 width（普通页 28px、首页/末页 58px），必须 width:auto 才收得住；
   index.css 有 border-radius:3px !important，圆角只能靠 !important 压回去；
   分页 HTML 是 <ul class="pagination"> 里又套了一层 <ul class="pagination">，两条 ul 都会被下面的
   规则命中 —— 内层一旦作为 flex item 不收缩就会整块超宽，而 center 会把溢出的两端（恰恰是首页和
   末页）推到屏幕外，看起来就是「首页/末页不显示」。所以显式把内层宽度钉成 100%，强制它在容器内换行。 */
#div_paging { margin-top: 0.4rem; }
#div_paging .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; flex: 0 0 100%; margin: 0; padding: 0; font-size: 0.28rem; list-style: none; }
#div_paging .pagination li { display: inline-flex; margin: 0 0.06rem 0.16rem; padding: 0; }
#div_paging .pagination li > a, #div_paging .pagination li > span, #div_paging .pagination > a, #div_paging .pagination > span { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; float: none; width: auto; min-width: 0.6rem; height: 0.6rem; padding: 0 0.2rem; margin: 0; border: 0; border-radius: 0.4rem !important; background-color: #f2f5fa !important; color: #5b6472; font-size: 0.28rem; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#div_paging .pagination li:first-child, #div_paging .pagination li:last-child{display: none!important;}
/* 首页/末页是两个字，横向给足空间 */
#div_paging .pagination li:first-child > a, #div_paging .pagination li:last-child > a { padding: 0 0.32rem; }
/* 省略号没有 href，去掉填充只留灰字，别做成可点按钮的样子。
   必须排除 li 的首/末位：首页在第一页、末页在最后一页时同样没有 href，
   被这条命中就会变成「透明底 + #b9bfc9 浅灰字」，在白底上几乎看不见 —— 这正是首页/末页“不显示”的原因。
   同时排除 .active（当前页也没有 href）。 */
#div_paging .pagination li:not(:first-child):not(:last-child):not(.active) > a:not([href]) { background-color: transparent !important; color: #b9bfc9; }
/* 按下反馈：浅蓝底 + 蓝字 */
#div_paging .pagination li:not(.active) > a:active { background-color: #dbe5ff !important; color: #0648d2; }
/* 当前页实心高亮：写在 a 上（.active 在 li 上，a 自带背景会把 li 的底色盖掉） */
#div_paging .pagination li.active > a, #div_paging .pagination li.active > span { background-color: #0648d2 !important; color: #fff !important; font-weight: 700; }
#div_paging .pagination input[type="text"], #div_paging .pagination .jump-btn, #div_paging .pagination .to_page { display: none; }

/* 9. 底部 */
.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 { width: 100%; text-align: center; margin: 0 auto; }
/* 10. 铺满屏幕兜底（清除桌面端固定宽度残留） */
html, body { zoom: 1 !important; }
.part, .containel, .crumb, .list, .list_menu, .list_news_box, .list_news_box .head, .list_news, .footer, .footer .content, .div_top, .div_search, .div_nav ul, #div_paging, #div_paging .pagination { width: 100% !important; }
.div_top, .containel { height: auto !important; min-height: 0 !important; }
.list_menu li .menu_item { height: auto !important; min-height: 0.72rem !important; } /* 解掉桌面端 50px，触摸热区保底 0.72rem */
.list.flex { display: block !important; }
.list_news_box { border-left: 0 !important; padding: 0.2rem !important; }
.list_news li { display: flex !important; flex-direction: column !important; align-items: stretch !important; height: auto !important; line-height: 1.5 !important; width: 100% !important; }
.list_news li a { display: -webkit-box !important; width: 100% !important; flex: none !important; white-space: normal !important; }
.list_news li .date { float: none !important; margin-left: 0 !important; width: auto !important; }
.div_nav ul li { flex: 1 !important; width: auto !important; }
.div_search .div_input { width: auto !important; flex: 1 !important; }
/* 11. PC/大屏：回归 750 设计稿定宽居中（与 pylist.html 引入时 media 的 1000px 断点对齐） */
@media screen and (min-width: 1001px) {
	html { font-size: 100px; }
	body { width: 1000px !important; max-width: 100%; margin: 0 auto; box-shadow: 0 0 20px rgba(0, 0, 0, .06); }
}