/* ======================================================================
   mobile.css v4 —— 移动端独立设计系统（m.untns.com 专用）
   设计语言对齐 m.offcn.com：白卡片 + 红色主色 + rem 流式排版
   作用域：全部规则限定在 .m-root（<body class="m-root">），对 PC 页零影响
   设计稿宽度 750px：1rem = 100px（html font-size = 100vw/7.5，封顶 100px）
   ====================================================================== */

/* ------------------------------------------------------------ 基础版式 */
/* rem 基准：1rem = 视口宽/7.5（750 设计稿），随屏宽流式缩放 */
html {
    font-size: calc(100vw / 7.5);
}

.m-root {
    font-size: 0.28rem;
    color: #333;
    background: #f5f6f8;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 大屏（平板/桌面预览）：页面整体居中，宽度封顶 750 设计稿 */
@media (min-width: 750px) {
    html { font-size: 100px !important; }
    .m-root {
        max-width: 7.5rem;
        margin: 0 auto;
        box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.08);
    }
}

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

.m-root a {
    color: #333;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.m-root img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.m-root ul { list-style: none; }

.m-root button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

/* JS 可用时隐藏「传统分页」兜底块（无 JS / 爬虫环境仍可见） */
html.mjs .mpage-mini { display: none; }

/* ------------------------------------------------------------ 顶部品牌条（白底：首页） */
.mhd {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 0.88rem;
    padding: 0 0.24rem;
    background: #fff;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.05);
}

.mhd-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.mhd-logo img {
    height: 0.52rem;
    width: auto;
}

/* 「导航 ∨」下拉按钮（首页白底条右侧） */
.mhd-navbtn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0 0.24rem;
    height: 0.52rem;
    border: 1px solid #ec9696;
    border-radius: 0.26rem;
    color: #e32b2b;
    font-size: 0.24rem;
    line-height: 0.5rem;
    text-align: center;
}

.mhd-navbtn .caret {
    width: 0;
    height: 0;
    border-left: 0.08rem solid transparent;
    border-right: 0.08rem solid transparent;
    border-top: 0.1rem solid #e32b2b;
    transition: transform 0.2s;
}

.mhd-navbtn.on .caret {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------ 顶部品牌条（红底：栏目/内容页） */
.mhd--red {
    background: linear-gradient(135deg, #ff6a51, #e60f1f);
    box-shadow: 0 0.02rem 0.1rem rgba(230, 15, 31, 0.28);
}

.mhd--red .mhd-brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.mhd--red .mhd-brand b {
    font-size: 0.3rem;
    line-height: 1.2;
    letter-spacing: 0.02rem;
}

.mhd--red .mhd-brand span {
    font-size: 0.18rem;
    line-height: 1.3;
    opacity: 0.85;
}

.mhd--red .mhd-title {
    flex: 1;
    margin: 0 0.2rem;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 宫格导航按钮（红底条右侧） */
.mhd-gridbtn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.56rem;
    height: 0.56rem;
}

.mhd-gridbtn svg {
    width: 0.4rem;
    height: 0.4rem;
    opacity: 0.95;
}

/* 返回（红底条左侧，内容页） */
.mhd-back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.28rem;
    font-weight: bold;
}

.mhd-back i {
    font-style: normal;
    font-size: 0.44rem;
    line-height: 1;
    margin-right: 0.04rem;
    transform: translateY(-0.02rem);
}

.mhd--red .mhd-back + .mhd-title {
    margin-left: 0.12rem;
}

/* ------------------------------------------------------------ 全站导航下拉面板 */
.mnavpanel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.2rem 0.24rem 0.26rem;
    background: #fff;
    border-radius: 0 0 0.2rem 0.2rem;
    box-shadow: 0 0.16rem 0.24rem rgba(0, 0, 0, 0.12);
}

.mnavpanel.open {
    display: block;
    animation: mnp-in 0.18s ease-out;
}

@keyframes mnp-in {
    from { opacity: 0; transform: translateY(-0.12rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.mnp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.04rem 0.24rem;
}

.mnp-grid a {
    display: flex;
    align-items: center;
    height: 0.64rem;
    padding: 0 0.16rem;
    border-radius: 0.1rem;
    font-size: 0.28rem;
    color: #333;
}

.mnp-grid a:active {
    background: #fdf0f0;
    color: #e60f1f;
}

.mnp-quick {
    display: flex;
    gap: 0.14rem;
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    border-top: 1px solid #f0f0f0;
}

.mnp-quick a {
    flex: 1;
    height: 0.56rem;
    line-height: 0.54rem;
    text-align: center;
    background: #f5f6f8;
    border-radius: 0.28rem;
    font-size: 0.24rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.08rem;
}

/* ------------------------------------------------------------ 顶部广告轮播 */
.mbanner {
    position: relative;
    margin: 0.2rem 0.24rem 0;
    border-radius: 0.16rem;
    overflow: hidden;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.06);
}

.mb-track {
    display: flex;
    transition: transform 0.4s ease;
}

.mb-slide {
    flex: 0 0 100%;
    display: block;
}

.mb-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 690 / 260;
    object-fit: cover;
}

.mb-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    display: flex;
    justify-content: center;
    gap: 0.1rem;
}

.mb-dots i {
    width: 0.4rem;
    height: 0.06rem;
    border-radius: 0.03rem;
    background: rgba(255, 255, 255, 0.45);
    transition: background 0.3s;
}

.mb-dots i.on {
    background: #e60f1f;
}

/* ------------------------------------------------------------ 图标导航网格（SVG 图标） */
.mnav {
    padding: 0.34rem 0.12rem 0.12rem;
}

.mnav ul {
    display: flex;
    flex-wrap: wrap;
}

.mnav li {
    width: 20%;
    margin-bottom: 0.3rem;
    text-align: center;
}

.mnav a {
    display: block;
}

.mi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.84rem;
    height: 0.84rem;
    margin: 0 auto 0.1rem;
}

.mi svg {
    width: 0.84rem;
    height: 0.84rem;
    display: block;
    filter: drop-shadow(0 0.04rem 0.08rem rgba(0, 0, 0, 0.12));
}

.mnav li span {
    display: block;
    font-size: 0.22rem;
    color: #333;
    line-height: 1.3;
}

/* ------------------------------------------------------------ 快捷服务 */
.mquick {
    display: flex;
    gap: 0.14rem;
    padding: 0.06rem 0.24rem 0.3rem;
}

.mquick a {
    flex: 1;
    display: block;
    padding: 0.16rem 0.12rem;
    background: #fff;
    border-radius: 0.12rem;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
    text-align: center;
}

.mquick b {
    display: block;
    font-size: 0.26rem;
    color: #e60f1f;
    margin-bottom: 0.04rem;
}

.mquick span {
    display: block;
    font-size: 0.2rem;
    color: #999;
}

/* ------------------------------------------------------------ 资讯模块卡片 */
.msec {
    margin: 0 0.24rem 0.24rem;
    background: #fff;
    border-radius: 0.16rem;
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* 模块头：彩色圆图标 + 粗标题 + 浅红渐变底 */
.msec-t {
    display: flex;
    align-items: center;
    height: 0.84rem;
    padding: 0 0.24rem;
    background: linear-gradient(90deg, #fff2f1 0%, #ffffff 70%);
    border-bottom: 1px solid #fdf0ef;
    font-size: 0.32rem;
    font-weight: bold;
    color: #222;
}

.msec-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.44rem;
    height: 0.44rem;
    margin-right: 0.14rem;
}

.msec-ico svg {
    width: 0.44rem;
    height: 0.44rem;
    display: block;
}

.msec-more {
    margin-left: auto;
    font-size: 0.24rem;
    font-weight: normal;
    color: #999;
}

.msec-more::after {
    content: "›";
    margin-left: 0.06rem;
}

/* 列表行：彩色标签 chip + 标题；首条红头条 */
.mnews {
    padding: 0.06rem 0.24rem;
}

.mnews-item {
    display: flex;
    align-items: center;
    padding: 0.19rem 0;
    border-bottom: 1px solid #f7f7f7;
    min-height: 0.76rem;
}

.mnews-item:last-child {
    border-bottom: none;
}

.mnews-item em {
    flex: 0 0 auto;
    margin-right: 0.16rem;
    padding: 0.03rem 0.14rem;
    border-radius: 0.08rem;
    font-style: normal;
    font-size: 0.2rem;
    line-height: 1.4;
    white-space: nowrap;
    background: #fdeeee;
    color: #e60f1f;
}

/* chip 多彩轮换（按行序，每 5 行一循环） */
.mnews-item:nth-child(5n+2) em { background: #fff3e5; color: #f2711c; }
.mnews-item:nth-child(5n+3) em { background: #e8f3ff; color: #346ff2; }
.mnews-item:nth-child(5n+4) em { background: #e6f9f1; color: #1fbf8f; }
.mnews-item:nth-child(5n)   em { background: #f3ecff; color: #874abc; }

.mnews-item span {
    flex: 1;
    font-size: 0.28rem;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 头条（组内首条）红色加粗 */
.mnews-item.first span {
    color: #e60f1f;
    font-weight: bold;
}

/* ------------------------------------------------------------ 栏目页：说明条 */
.mcat {
    display: flex;
    align-items: baseline;
    padding: 0.28rem 0.24rem 0.12rem;
}

.mcat-name {
    font-size: 0.4rem;
    font-weight: bold;
    color: #333;
}

.mcat-count {
    margin-left: 0.16rem;
    font-size: 0.22rem;
    color: #999;
}

/* ------------------------------------------------------------ 面包屑 */
.mcrumb {
    padding: 0 0.24rem 0.16rem;
    font-size: 0.22rem;
    color: #999;
    line-height: 1.6;
}

.mcrumb a {
    color: #999;
}

.mcrumb b {
    color: #666;
    font-weight: normal;
}

.mcrumb i {
    font-style: normal;
    margin: 0 0.08rem;
    color: #ccc;
}

/* ------------------------------------------------------------ 子栏目横滑 tab（scroll-snap + 渐隐边缘） */
.mtabs {
    padding: 0 0.24rem 0.2rem;
}

.mtabs ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* 右侧渐隐提示可继续滑动 */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}

.mtabs ul::-webkit-scrollbar { display: none; }

.mtabs li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.mtabs a {
    display: block;
    margin-right: 0.16rem;
    padding: 0.1rem 0.3rem;
    background: #fff;
    border-radius: 0.3rem;
    font-size: 0.26rem;
    color: #666;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.mtabs a:active {
    transform: scale(0.95);
}

.mtabs a.on {
    background: linear-gradient(135deg, #ff6a51, #e60f1f);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0.04rem 0.1rem rgba(230, 15, 31, 0.3);
}

/* ------------------------------------------------------------ 文章列表卡 */
.mlist {
    padding: 0 0.24rem;
}

.mitem {
    display: block;
    padding: 0.26rem 0.24rem;
    margin-bottom: 0.2rem;
    background: #fff;
    border-radius: 0.16rem;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
}

.mitem:active {
    box-shadow: 0 0.06rem 0.14rem rgba(230, 15, 31, 0.1);
}

/* 标题左侧红色窄条，增强卡片层次 */
.mitem-t {
    position: relative;
    padding-left: 0.2rem;
    font-size: 0.3rem;
    font-weight: normal;
    line-height: 0.44rem;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.mitem-t::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    bottom: 0.1rem;
    width: 0.07rem;
    border-radius: 0.04rem;
    background: linear-gradient(180deg, #ff6a51, #e60f1f);
}

.mitem-meta {
    display: flex;
    align-items: center;
    margin-top: 0.14rem;
    padding-left: 0.2rem;
    font-size: 0.22rem;
    color: #999;
}

.mitem-meta .cat {
    margin-left: auto;
    padding: 0.02rem 0.12rem;
    background: #fdeeee;
    border-radius: 0.06rem;
    color: #e60f1f;
    font-size: 0.2rem;
}

/* ------------------------------------------------------------ 加载更多（下拉加载） */
.mloadmore {
    display: block;
    margin: 0.1rem auto 0.36rem;
    min-width: 3.2rem;
    height: 0.68rem;
    line-height: 0.66rem;
    padding: 0 0.5rem;
    background: #fff;
    border: 1px solid #f3d3d3;
    border-radius: 0.34rem;
    color: #e60f1f;
    font-size: 0.26rem;
    text-align: center;
    transition: opacity 0.2s;
}

.mloadmore:active {
    opacity: 0.7;
}

.mloadmore.loading {
    color: #999;
    border-color: #e5e5e5;
    pointer-events: none;
}

.mloadmore.end {
    color: #bbb;
    border-color: #eee;
    pointer-events: none;
}

/* 传统分页（仅无 JS 环境展示） */
.mpage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    padding: 0.32rem 0.24rem 0.4rem;
}

.pg-btn {
    min-width: 1.6rem;
    padding: 0 0.2rem;
    height: 0.64rem;
    background: #fff;
    border-radius: 0.32rem;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
    color: #e60f1f;
    font-size: 0.26rem;
    line-height: 0.62rem;
    text-align: center;
}

.pg-btn.disabled {
    color: #ccc;
    pointer-events: none;
}

.pg-cur {
    font-size: 0.24rem;
    color: #999;
}

.pg-cur b {
    color: #e60f1f;
    font-size: 0.3rem;
}

.pg-cur i {
    font-style: normal;
}

/* ------------------------------------------------------------ 文章详情页 */
.mart {
    margin: 0.2rem 0.24rem 0.24rem;
    padding: 0.32rem 0.28rem 0.4rem;
    background: #fff;
    border-radius: 0.16rem;
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05);
}

.mart-t {
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 1.45;
    color: #333;
}

.mart-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.16rem;
    margin: 0.2rem 0 0.28rem;
    padding-bottom: 0.24rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.22rem;
    color: #999;
}

.mart-meta .src {
    color: #999;
}

.mart-meta .cat {
    margin-left: auto;
    padding: 0.02rem 0.12rem;
    background: #fdeeee;
    border-radius: 0.06rem;
    color: #e60f1f;
    font-size: 0.2rem;
}

/* 正文排版：16px 等效（0.32rem），媒体与表格不撑破 */
.mcont {
    font-size: 0.32rem;
    line-height: 1.8;
    color: #333;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mcont p {
    margin: 0 0 0.28rem;
}

.mcont h1, .mcont h2, .mcont h3, .mcont h4 {
    margin: 0.36rem 0 0.2rem;
    font-size: 0.34rem;
    line-height: 1.5;
}

.mcont img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 0.2rem auto;
    border-radius: 0.08rem;
}

.mcont table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.mcont table td, .mcont table th {
    border: 1px solid #e5e5e5;
    padding: 0.08rem 0.12rem;
}

.mcont video, .mcont iframe {
    max-width: 100%;
}

.mcont pre {
    white-space: pre-wrap;
    word-break: break-all;
    background: #f7f7f7;
    border-radius: 0.08rem;
    padding: 0.2rem;
    overflow-x: auto;
}

.mcont blockquote {
    margin: 0.2rem 0;
    padding: 0.16rem 0.24rem;
    border-left: 0.06rem solid #e60f1f;
    background: #fdf5f5;
    color: #666;
}

.mcont a {
    color: #346ff2;
}

/* 标签 */
.mtags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem;
    margin-top: 0.32rem;
}

.mtags span {
    padding: 0.06rem 0.2rem;
    background: #f5f6f8;
    border-radius: 0.26rem;
    font-size: 0.22rem;
    color: #666;
}

/* THE END 分隔 */
.mart-end {
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
}

.mart-end::before,
.mart-end::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}

.mart-end span {
    padding: 0 0.24rem;
    font-size: 0.22rem;
    color: #ccc;
    letter-spacing: 0.04rem;
}

/* ------------------------------------------------------------ 上一篇/下一篇 */
.mnp {
    margin: 0 0.24rem 0.24rem;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
}

.mnp-item {
    display: block;
    padding: 0.2rem 0.24rem;
    background: #fff;
    border-radius: 0.16rem;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
}

.mnp-item small {
    display: block;
    margin-bottom: 0.06rem;
    font-size: 0.2rem;
    color: #999;
}

.mnp-item.prev small { color: #999; }
.mnp-item.next small { color: #346ff2; }

.mnp-item span {
    display: block;
    font-size: 0.26rem;
    line-height: 1.5;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mnp-item.none span {
    color: #ccc;
}

/* ------------------------------------------------------------ 页脚（中公风格） */
.mft {
    margin: 0.1rem 0.24rem 0;
    padding: 0.3rem 0.24rem 0.5rem;
    border-top: 1px solid #ececec;
    text-align: center;
}

.mft-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin-bottom: 0.18rem;
    font-size: 0.24rem;
}

.mft-links a {
    color: #666;
}

.mft-links i {
    font-style: normal;
    color: #ddd;
}

.mft-copy {
    font-size: 0.2rem;
    color: #a0a0a0;
    line-height: 1.8;
}

/* ------------------------------------------------------------ 第三方客服浮窗缩放 */
.m-root #agentList {
    transform: scale(0.72);
    transform-origin: right bottom;
    max-width: 72px;
}

.m-root #backtop_btn {
    transform: scale(0.72);
    transform-origin: right bottom;
}