@charset "utf-8";
/* ==========================================================================
   news-content.css —— 新闻详情正文排版（独立样式表）

   作用范围：仅 .shownews-con 容器内的元素，不影响任何其他页面。
   引入位置：templates/3/news/index.html（新闻详情模板）。
   加载顺序：在 index.css 之后引入，故同优先级下本表规则生效；
             对 index.css 已带 !important 的属性（移动端 font-size）
             本表同样以 !important 对冲，保证覆盖生效。

   设计目标：中文 B2B 长文阅读体验 —— 「客户点进来第一眼要舒服」
   品牌主色：#1ea839（深色变体 #1a7a2e 用于文字，保证对比度达标）

   维护约定：
   1. 所有选择器必须带 .shownews-con 前缀，严禁写裸标签选择器，
      否则会污染全站（这是本表与 index.css 并存的关键前提）。
   2. 标题的 margin/padding 一律用 em，不用 px —— 跟随字号缩放，
      移动端降字号后留白自动协调，无需再写一堆覆盖规则。
   3. 不引用任何外部字体文件，只用系统字体栈。
   4. 修改后请同步 dg11jituan.com 与 dg11qj.com 两站，保持一致。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 容器基础
   -------------------------------------------------------------------------- */
.shownews-con {
    /* 中文字体栈：优先 macOS/iOS 的 PingFang，再 Windows 的雅黑，
       最后落到开源黑体，保证各平台都有像样的中文渲染 */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "微软雅黑", "Source Han Sans CN", "Noto Sans CJK SC",
                 "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.95;
    color: #333;
    text-align: justify;
    /* 防长串（连续英文/数字/URL）撑破容器 */
    word-break: break-word;
    overflow-wrap: anywhere;
    /* 中文排版细节：标点挤压、行末对齐更整齐 */
    text-justify: inter-ideograph;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 正文内的空段落（如 <p></p> 或只含 <br>）不产生视觉留白，
   避免 AI 生成的文章里出现大片空白 */
.shownews-con p:empty,
.shownews-con p:only-child > br:only-child {
    display: none;
}


/* --------------------------------------------------------------------------
   2. 段落
   -------------------------------------------------------------------------- */
.shownews-con p {
    font-size: 16px;
    line-height: 1.95;
    /* 段间距 1.4em —— 跟随字号缩放，字号变小间距自动收窄 */
    margin: 0 0 1.4em;
    padding: 0;
    text-align: justify;
    color: #333;
}

/* 首段稍大 17px，给「第一眼舒服」的入口感，不做花哨处理 */
.shownews-con > p:first-of-type,
.shownews-con > p:first-child {
    font-size: 17px;
    line-height: 1.9;
    color: #2b2b2b;
}


/* --------------------------------------------------------------------------
   3. 标题层级
   h2 主色竖条 + 大留白；h3/h4 逐级收窄，且不再叠加色条（避免视觉噪音）
   -------------------------------------------------------------------------- */
.shownews-con h2 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;                 /* 深灰而非纯黑，长时间阅读更柔和 */
    margin: 2.2em 0 1em;         /* 上 2.2em / 下 1em */
    padding-left: 14px;          /* 给竖条留位 */
    border: 0;
}

/* 左侧 4px 圆角主色竖条 */
.shownews-con h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    bottom: 0.28em;
    width: 4px;
    border-radius: 4px;
    background-color: #1ea839;
}

.shownews-con h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #333;
    margin: 1.6em 0 0.7em;
    padding: 0;
    border: 0;
}

.shownews-con h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: #444;
    margin: 1.3em 0 0.6em;
    padding: 0;
    border: 0;
}

/* h5/h6 站内基本不用，仍给一份兜底，避免漏出裸标签 */
.shownews-con h5,
.shownews-con h6 {
    font-size: 15px;
    font-weight: 700;
    color: #555;
    margin: 1.2em 0 0.6em;
}


/* --------------------------------------------------------------------------
   4. 列表
   -------------------------------------------------------------------------- */
.shownews-con ul,
.shownews-con ol {
    margin: 0 0 1.4em;
    /* 缩进 2em，配合中文正文宽度观感舒适 */
    padding-left: 2em;
    list-style-position: outside;
}

.shownews-con ul {
    list-style-type: disc;
}

.shownews-con ol {
    list-style-type: decimal;
}

.shownews-con li {
    font-size: 16px;
    line-height: 1.9;
    /* li 之间留间距，这是「一坨纯文字」的最大元凶之一 */
    margin-bottom: 0.7em;
    text-align: justify;
    color: #333;
}

.shownews-con li:last-child {
    margin-bottom: 0;
}

/* li 内含多段时不挤在一起：段间距收窄而非 0 */
.shownews-con li > p {
    margin: 0 0 0.7em;
}

.shownews-con li > p:last-child {
    margin-bottom: 0;
}

/* 列表项内的嵌套列表 */
.shownews-con li ul,
.shownews-con li ol {
    margin-top: 0.7em;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   5. 行内强调
   -------------------------------------------------------------------------- */
.shownews-con strong {
    /* 深主色而非亮主色：#1a7a2e 在白底上对比度约 4.6:1（达 WCAG AA），
       比 #1ea839（约 2.6:1，不可读）更适合作为文字颜色 */
    color: #1a7a2e;
    font-weight: 700;
}

.shownews-con em {
    font-style: normal;
    color: #555;
}


/* --------------------------------------------------------------------------
   6. 引用
   -------------------------------------------------------------------------- */
.shownews-con blockquote {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    border: 0;
    border-left: 4px solid #1ea839;
    background-color: #f7faf8;
    border-radius: 0 4px 4px 0;
    color: #555;
    font-size: 16px;
    line-height: 1.9;
}

.shownews-con blockquote p {
    margin: 0 0 0.8em;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.shownews-con blockquote p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   7. 表格
   -------------------------------------------------------------------------- */
.shownews-con table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    border-spacing: 0;
    /* 窄屏时表格自身横向滚动，不撑破页面 */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 15px;
    line-height: 1.7;
}

.shownews-con table th,
.shownews-con table td {
    padding: 0.7em 0.9em;
    border: 1px solid #e2e8e5;
    text-align: left;
    vertical-align: top;
}

.shownews-con table th {
    /* 表头浅主色底 */
    background-color: #eaf7ef;
    color: #222;
    font-weight: 700;
    white-space: nowrap;
}

/* 斑马纹 */
.shownews-con table tbody tr:nth-child(even) {
    background-color: #fafcfb;
}

.shownews-con table tbody tr:hover {
    background-color: #f2f9f5;
}


/* --------------------------------------------------------------------------
   8. 图片
   -------------------------------------------------------------------------- */
.shownews-con img {
    display: block;
    max-width: 100%;
    height: auto !important;      /* 对冲 index.css 的同值声明 */
    margin: 1.4em auto;
    border-radius: 4px;
    /* 轻微阴影，让配图从文字块里浮出来 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
}


/* --------------------------------------------------------------------------
   9. 链接与分隔线（正文内偶有出现）
   -------------------------------------------------------------------------- */
.shownews-con a {
    color: #1a7a2e;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.shownews-con a:hover {
    color: #1ea839;
}

.shownews-con hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid #e8ecea;
}


/* --------------------------------------------------------------------------
   10. 移动端（≤768px）
   标题字号各降 1-2px、内边距收紧、竖条缩短，避免标题换行断裂
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .shownews-con {
        /* index.css 第 978 行是 font-size:14px !important，
           此处必须同样带 !important 才能覆盖（两者都带时后加载者胜） */
        font-size: 15px !important;
        line-height: 1.85;
    }

    .shownews-con p {
        font-size: 15px !important;
        line-height: 1.85;
        margin: 0 0 1.2em;
    }

    .shownews-con > p:first-of-type,
    .shownews-con > p:first-child {
        font-size: 16px !important;
        line-height: 1.85;
    }

    .shownews-con h2 {
        font-size: 20px;
        /* 上 2.2em -> 1.8em，避免标题上方空白在窄屏显得断裂 */
        margin: 1.8em 0 0.9em;
        padding-left: 12px;
        line-height: 1.45;
        /* 收紧字间距，降低中文长标题在窄屏的换行断裂概率 */
        letter-spacing: 0;
    }

    .shownews-con h2::before {
        top: 0.3em;
        bottom: 0.3em;
        width: 4px;
    }

    .shownews-con h3 {
        font-size: 17px;
        margin: 1.4em 0 0.65em;
        line-height: 1.55;
    }

    .shownews-con h4 {
        font-size: 16px;
        margin: 1.2em 0 0.55em;
    }

    .shownews-con ul,
    .shownews-con ol {
        /* 缩进收窄，窄屏下正文可用宽度更宝贵 */
        padding-left: 1.5em;
        margin: 0 0 1.2em;
    }

    .shownews-con li {
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 0.6em;
    }

    .shownews-con blockquote {
        margin: 1.3em 0;
        padding: 0.9em 1em;
        font-size: 15px;
    }

    .shownews-con table {
        font-size: 14px;
        margin: 1.3em 0;
    }

    .shownews-con table th,
    .shownews-con table td {
        padding: 0.55em 0.7em;
    }

    .shownews-con img {
        margin: 1.2em auto;
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}


/* --------------------------------------------------------------------------
   11. 打印样式：去掉装饰，避免打印出无意义的竖条与阴影
   -------------------------------------------------------------------------- */
@media print {
    .shownews-con h2::before {
        display: none;
    }

    .shownews-con img {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .shownews-con table th {
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}