@charset "utf-8";
/* ============================================================
   文章页 / 分类页 左侧栏  side.css
   作用域：.lefter —— 只影响侧栏，不影响正文与其它页面
   配色：全部走 var(--hn-*) ，由后台「配色方案」调色板控制
   ============================================================ */

/* ---------- 1. 卡片容器 ---------- */
#fh5co-content_show .lefter .sd-card {
    position: relative;
    background: var(--hn-side-bg, #fff);
    border: 1px solid rgba(17, 38, 66, .07);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 42, 80, .04), 0 10px 26px -12px rgba(16, 42, 80, .18);
    padding: 18px 18px 12px;
    margin: 0 0 18px;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow .25s ease;
}
#fh5co-content_show .lefter .sd-card:hover {
    box-shadow: 0 1px 2px rgba(16, 42, 80, .05), 0 14px 32px -14px rgba(16, 42, 80, .24);
}
/* 顶部渐变细条：主色 → 辅助色 → 透明 */
#fh5co-content_show .lefter .sd-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg,
        var(--hn-primary, #003366) 0%,
        var(--hn-accent, #2f78c4) 55%,
        rgba(255, 255, 255, 0) 100%);
}

/* ---------- 2. 卡片标题 ---------- */
#fh5co-content_show .lefter .sd-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 12px;
    padding: 0 0 11px;
    border-bottom: 1px solid rgba(17, 38, 66, .06);
    height: auto;
}
#fh5co-content_show .lefter .sd-hd h2 {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 12px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--hn-primary, #003366);
    letter-spacing: .2px;
    word-break: break-all;
    display: block;
}
#fh5co-content_show .lefter .sd-hd h2::before {
    content: "";
    position: absolute;
    left: 0; top: 2px;
    width: 3px; height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--hn-accent, #2f78c4), var(--hn-primary, #003366));
}
#fh5co-content_show .lefter .sd-hd .sd-hd-tag {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hn-primary-08, rgba(0, 51, 102, .08));
    color: var(--hn-primary, #003366);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* ---------- 3. 分类导航（子分类列表） ---------- */
#fh5co-content_show .lefter .sd-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
}
#fh5co-content_show .lefter .sd-nav-list > li {
    position: relative;
    display: flex;
    align-items: center;
    margin: 1px 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    float: none;
    width: auto;
    background: transparent;
    transition: background .18s ease;
}
/* 悬停 / 当前项左侧竖条 */
#fh5co-content_show .lefter .sd-nav-list > li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 16px;
    margin-top: -8px;
    border-radius: 0 3px 3px 0;
    background: var(--hn-primary, #003366);
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity .18s ease, transform .18s ease;
}
#fh5co-content_show .lefter .sd-nav-list > li > i {
    position: static;
    flex: none;
    width: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #c2cbd8;
    font-size: 12px;
    line-height: 1;
    transition: color .18s ease, transform .18s ease;
    z-index: 1;
}
#fh5co-content_show .lefter .sd-nav-list > li > a {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px 9px 0;
    border: 0;
    border-radius: 0 9px 9px 0;
    color: var(--hn-side-text, #3b4759);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .18s ease;
}
#fh5co-content_show .lefter .sd-nav-list > li:hover { background: var(--hn-primary-04, rgba(0, 51, 102, .04)); }
#fh5co-content_show .lefter .sd-nav-list > li:hover::before { opacity: .35; transform: scaleY(.8); }
#fh5co-content_show .lefter .sd-nav-list > li:hover > i {
    color: var(--hn-primary, #003366);
    transform: translateX(1px);
}
#fh5co-content_show .lefter .sd-nav-list > li:hover > a { color: var(--hn-primary, #003366); }

/* 当前所在分类 */
#fh5co-content_show .lefter .sd-nav-list > li.is-cur {
    background: var(--hn-primary-08, rgba(0, 51, 102, .08));
}
#fh5co-content_show .lefter .sd-nav-list > li.is-cur::before { opacity: 1; transform: scaleY(1); }
#fh5co-content_show .lefter .sd-nav-list > li.is-cur > i { color: var(--hn-primary, #003366); }
#fh5co-content_show .lefter .sd-nav-list > li.is-cur > a {
    color: var(--hn-primary, #003366);
    font-weight: 600;
}

/* 折叠按钮（移动端展开子分类） */
#fh5co-content_show .lefter .sd-nav > .button.iconfont {
    position: absolute;
    right: 14px;
    top: 13px;
    z-index: 3;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--hn-primary-08, rgba(0, 51, 102, .08));
    color: var(--hn-primary, #003366);
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
}

/* ---------- 4. 分类文章列表 ---------- */
#fh5co-content_show .lefter .sd-posts-list {
    margin: 0 -6px;
    padding: 2px 6px 0;
    list-style: none;
    box-sizing: border-box;
}
#fh5co-content_show .lefter .sd-pitem {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 16px 9px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(17, 38, 66, .06);
    border-radius: 9px;
    float: none;
    width: auto;
    box-sizing: border-box;
    transition: background .18s ease, border-color .18s ease;
}
#fh5co-content_show .lefter .sd-pitem:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}
#fh5co-content_show .lefter .sd-pitem:hover {
    background: var(--hn-primary-04, rgba(0, 51, 102, .04));
    border-bottom-color: transparent;
}
/* 悬停时压掉分隔线，避免“亮底 + 半截灰线”的割裂感 */
#fh5co-content_show .lefter .sd-pitem:hover + .sd-pitem { border-top-color: transparent; }

/* 行尾箭头：悬停时轻轻浮现 */
#fh5co-content_show .lefter .sd-pitem::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 17px;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid var(--hn-primary, #003366);
    border-right: 1.5px solid var(--hn-primary, #003366);
    transform: rotate(45deg) translateX(-3px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
#fh5co-content_show .lefter .sd-pitem:hover::after {
    opacity: .55;
    transform: rotate(45deg) translateX(0);
}

/* 序号：第一名主色渐变，二三名主色浅底 */
#fh5co-content_show .lefter .sd-idx {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 0;
    border-radius: 7px;
    background: var(--hn-primary-08, rgba(0, 51, 102, .08));
    color: var(--hn-primary, #003366);
    font-size: 11px;
    line-height: 22px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
#fh5co-content_show .lefter .sd-pitem:nth-child(1) .sd-idx {
    background: linear-gradient(135deg, var(--hn-primary, #003366), var(--hn-accent, #2f78c4));
    color: #fff;
    box-shadow: 0 4px 10px -5px rgba(16, 42, 80, .55);
}
#fh5co-content_show .lefter .sd-pitem:nth-child(2) .sd-idx,
#fh5co-content_show .lefter .sd-pitem:nth-child(3) .sd-idx {
    background: var(--hn-primary-14, rgba(0, 51, 102, .14));
    color: var(--hn-primary, #003366);
}
#fh5co-content_show .lefter .sd-pmain {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 4px;
}
#fh5co-content_show .lefter .sd-pmain > a {
    display: block;
    color: var(--hn-side-text, #2f3a4a);
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .18s ease;
}
#fh5co-content_show .lefter .sd-pitem:hover .sd-pmain > a { color: var(--hn-primary, #003366); }
#fh5co-content_show .lefter .sd-pitem:hover .sd-idx {
    background: var(--hn-primary, #003366);
    color: #fff;
    box-shadow: 0 4px 10px -5px rgba(16, 42, 80, .5);
}
#fh5co-content_show .lefter .sd-meta {
    display: inline-block;
    margin-top: 2px;
    color: #a3adbb;
    font-size: 11.5px;
    line-height: 16px;
    letter-spacing: .2px;
}

/* ---------- 5. 联系我们 ---------- */
#fh5co-content_show .lefter .sd-contact .contact-content {
    margin-top: 2px;
    display: block;
}
#fh5co-content_show .lefter .sd-contact .contact-content p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 7px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--hn-primary-04, rgba(0, 51, 102, .04));
    color: var(--hn-side-text, #4c5a6e);
    font-size: 13px;
    line-height: 21px;
    word-break: break-all;
    box-sizing: border-box;
    transition: background .18s ease;
}
#fh5co-content_show .lefter .sd-contact .contact-content p:last-child { margin-bottom: 2px; }
#fh5co-content_show .lefter .sd-contact .contact-content p:hover { background: var(--hn-primary-08, rgba(0, 51, 102, .08)); }
#fh5co-content_show .lefter .sd-contact .contact-content p .iconfont {
    flex: none;
    margin-top: 2px;
    padding: 0;
    color: var(--hn-primary, #003366);
    font-size: 13px;
    line-height: 18px;
}
#fh5co-content_show .lefter .sd-contact .contact-content p a {
    color: inherit;
    text-decoration: none;
}
#fh5co-content_show .lefter .sd-contact .contact-content p a:hover { color: var(--hn-primary, #003366); }
#fh5co-content_show .lefter .sd-contact .contact-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ---------- 6. 响应式 ---------- */
@media (min-width: 981px) {
    /* 原 50px 右留白过宽，收窄让卡片更舒展 */
    #fh5co-content_show .lefter { padding-right: 24px; }
}
@media (max-width: 980px) {
    #fh5co-content_show .lefter .sd-card {
        border-radius: 12px;
        padding: 15px 15px 10px;
        margin-bottom: 14px;
    }
    #fh5co-content_show .lefter .sd-hd h2 { font-size: 15px; }
    #fh5co-content_show .lefter .sd-nav > .button.iconfont { top: 11px; right: 11px; }
}
@media (max-width: 640px) {
    #fh5co-content_show .lefter .sd-card {
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(16, 42, 80, .04), 0 6px 16px -10px rgba(16, 42, 80, .18);
    }
    #fh5co-content_show .lefter .sd-pitem { padding: 9px 14px 9px 6px; }
    #fh5co-content_show .lefter .sd-posts-list .sd-pitem:last-child { padding-bottom: 2px; }
}

/* ---------- 7. 桌面端：「分类文章」卡片悬浮 ---------- */
/* 只让「分类文章」（.sd-posts）吸附；分类导航、联系我们仍随页面滚动。
   主题正文外层 .layout 与 #fh5co-content_show 原来是 overflow:hidden，
   hidden 会生成滚动容器导致 sticky 失效，改为 clip 后可正常吸附，
   hidden 作为旧浏览器兜底（不报错，只是不悬浮）。
   主站主导航吸顶后高 52px（--hn-nav-h），吸附位置自动避让。 */
/* overflow 放开为 visible：任何非 visible 的祖先都会让 sticky 失效。
   顶部 1920px 轮播图由模板里的 .qs-post-banner 单独裁剪，不靠这里兜底。 */
.qs-article-layout { overflow: visible; }

/* 内页两栏统一用 flex：文章页、分类页、独立页面共用同一套栏宽与对齐方式，
   避免「文章页 flex / 分类页 float」两套布局导致的错位。 */
@media (min-width: 760px) {
    #fh5co-content_show {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }
    #fh5co-content_show > .lefter {
        float: none;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        min-width: 0;
        /* 760-980 段原本 50px 右内边距，卡片被压得过窄；与桌面端统一为 24px */
        padding-right: 24px;
        display: flex;
        flex-direction: column;
    }
    #fh5co-content_show > .xs8 {
        float: none;
        flex: 1 1 auto;
        max-width: 66.6667%;
        min-width: 0;
    }
    /* 文章页：左栏拉伸到与正文等高，「分类文章」卡片才有吸顶行程 */
    #fh5co-content_show.qs-article {
        align-items: stretch;
        overflow: visible;
    }
    #fh5co-content_show.qs-article > .lefter { flex-basis: 33.3333%; max-width: 33.3333%; }
    #fh5co-content_show.qs-article > .xs8 { max-width: 66.6667%; }
}
@media (min-width: 1000px) {
    #fh5co-content_show > .lefter { flex-basis: 25%; max-width: 25%; }
    #fh5co-content_show > .xs8 { max-width: 75%; }
}

/* 「分类文章」吸顶：仅文章页、≥760px */
@media (min-width: 760px) {
    #fh5co-content_show.qs-article > .lefter .sd-posts {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--hn-nav-h, 52px) + var(--hn-stick-gap, 16px));
        z-index: 20;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--hn-nav-h, 52px) - var(--hn-stick-gap, 16px) - 20px);
        overflow: hidden;
        transition: top .2s ease, box-shadow .25s ease;
        /* 吸附时浮在页面之上，阴影略加深 */
        box-shadow: 0 2px 4px rgba(16, 42, 80, .05), 0 18px 40px -18px rgba(16, 42, 80, .3);
    }
    #fh5co-content_show.qs-article > .lefter .sd-posts > .sd-hd { flex: none; }
    /* 条目多时卡片内部滚动，头部标题始终留在原位 */
    #fh5co-content_show.qs-article > .lefter .sd-posts .sd-posts-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--hn-primary-14, rgba(0, 51, 102, .14)) transparent;
    }
    /* 极细滚动条，不打扰卡片视觉 */
    #fh5co-content_show.qs-article > .lefter .sd-posts .sd-posts-list::-webkit-scrollbar { width: 5px; }
    #fh5co-content_show.qs-article > .lefter .sd-posts .sd-posts-list::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--hn-primary-14, rgba(120, 142, 168, .35));
    }
    #fh5co-content_show.qs-article > .lefter .sd-posts .sd-posts-list::-webkit-scrollbar-thumb:hover {
        background: var(--hn-primary, #003366);
    }
    #fh5co-content_show.qs-article > .lefter .sd-posts .sd-posts-list::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- 8. 小屏：正文在前、侧栏在后（所有内页） ---------- */
/* 760px 是栅格 xs 断点，低于它 .xs4/.xs8 不再分栏。
   文章页、分类页、独立页面统一把正文排到前面，避免分类页
   在手机上先看到整列侧栏、正文被挤到最下面。 */
@media (max-width: 759px) {
    #fh5co-content_show {
        display: flex;
        flex-direction: column;
    }
    #fh5co-content_show > .xs8 {
        order: 1;
        width: 100%;
        max-width: 100%;
        float: none;
    }
    #fh5co-content_show > .lefter {
        order: 2;
        width: 100%;
        max-width: 100%;
        float: none;
        padding: 0;
        margin-top: 4px;
        border-top: 1px solid rgba(17, 38, 66, .07);
        padding-top: 16px;
    }
    #fh5co-content_show .lefter .sd-card {
        margin-bottom: 12px;
        padding: 15px 15px 10px;
    }
    #fh5co-content_show .lefter .sd-card:last-child { margin-bottom: 0; }
    /* 窄屏标题允许换行，阅读更自然 */
    #fh5co-content_show .lefter .sd-pmain > a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 21px;
    }
    /* 移动端折叠按钮在标题右侧，给标题留出空间 */
    #fh5co-content_show > .lefter .sd-nav .sd-hd h2 { padding-right: 30px; }
}

/* ---------- 9. 顶部横幅：与列表页一致地居中裁剪 ---------- */
/* .slideshow 固定 1920px 宽（主题原设计），其它页面靠 .layout 的 overflow:hidden
   裁掉两侧；文章页为了让 sticky 生效放开了 .layout，导致横幅把整页撑宽。
   这里套一层 100% 宽容器单独裁剪，既保持两侧裁切效果，也不影响 sticky。 */
.qs-post-banner {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.qs-post-banner > .slideshow {
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 760px) {
    .qs-post-banner { display: none; }
}

/* ---------- 10. 内页顶部标题栏统一 ---------- */
/* 原来固定 height:40px，长面包屑（分类页多级分类）会被裁掉半行。
   改为最小高度 + 垂直居中，文章页 / 分类页 / 独立页高度与分隔线一致。 */
#fh5co-content_show div.title {
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 2px 0;
    box-sizing: border-box;
}
#fh5co-content_show div.title > h2 {
    display: block;
    width: 100%;
    line-height: 34px;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}
#fh5co-content_show div.title > h2 > a,
#fh5co-content_show div.title > h2 > span {
    line-height: 34px;
}

/* 分类页列表区与文章页正文的顶部留白对齐（文章页 .detail 是 20px） */
#fh5co-content_show .show_content > .show_list,
#fh5co-content_show .show_content > .product_list_box {
    padding-top: 18px;
    box-sizing: border-box;
}

/* ---------- 11. 正文媒体自适应：图片 / 视频 / 表格不撑破栏宽 ---------- */
/* flex 子项默认 min-width:auto，内容（尤其大图）会把右栏顶宽，
   看起来就像图片溢出到侧栏。这里逐层放开收缩限制。 */
#fh5co-content_show > .xs8,
#fh5co-content_show .show_content,
#fh5co-content_show .show_body,
#fh5co-content_show .detail,
#fh5co-content_show .article_content {
    min-width: 0;
    max-width: 100%;
}
#fh5co-content_show .article_content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
#fh5co-content_show .article_content img,
#fh5co-content_show .show_body img,
#fh5co-content_show .detail img {
    max-width: 100% !important;
    height: auto !important;
}
#fh5co-content_show .article_content video,
#fh5co-content_show .article_content iframe,
#fh5co-content_show .article_content embed,
#fh5co-content_show .article_content object,
#fh5co-content_show .show_body video,
#fh5co-content_show .show_body iframe {
    max-width: 100%;
}
#fh5co-content_show .article_content table,
#fh5co-content_show .show_body table,
#fh5co-content_show .detail table {
    max-width: 100%;
}
#fh5co-content_show .article_content pre,
#fh5co-content_show .show_body pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 图片本身是行内元素，底部会留出基线空隙；统一改为块级更整齐 */
#fh5co-content_show .article_content > p > img:only-child,
#fh5co-content_show .article_content > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 12. 分类页：标题栏单下划线 + 文章列表对齐 ---------- */
/* 标题栏「首页 / 未分类」原来是：容器底边一条灰线 + 面包屑链接文字下划线，
   两处叠在一起就像双下划线。这里只保留容器的一条 1px 细线，
   链接、文字、伪元素上的第二条线全部去掉。 */
#fh5co-content_show div.title {
    border-bottom: 1px solid var(--hn-line, #d6d6d6) !important;
    background-image: none !important;
    box-shadow: none !important;
}
#fh5co-content_show div.title::before,
#fh5co-content_show div.title::after,
#fh5co-content_show div.title > h2::before,
#fh5co-content_show div.title > h2::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}
#fh5co-content_show div.title > h2 {
    border-bottom: 0 !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
}
#fh5co-content_show div.title > h2 a,
#fh5co-content_show div.title > h2 a:link,
#fh5co-content_show div.title > h2 a:visited,
#fh5co-content_show div.title > h2 a:hover,
#fh5co-content_show div.title > h2 a:focus,
#fh5co-content_show div.title > h2 span {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* 分类页文章列表：主题原本在同一 <ul> 上同时挂了 .article-media 和 .article-thumb，
   .article-media li 的 height:48px / line-height:48px 会把 80px 的缩略图裁掉一半，
   标题行高也只有一半，整排看起来就错位。这里把列表项改为 flex 行，
   高度由内容决定，图片与文字垂直居中对齐。 */
#fh5co-content_show .article-media.article-thumb li {
    display: flex !important;
    align-items: center;
    gap: 14px;
    height: auto !important;
    min-height: 80px;
    line-height: normal !important;
    white-space: normal !important;
    overflow: hidden;
    padding: 14px 0 !important;
    box-sizing: border-box;
    border-bottom: 1px dashed var(--hn-line, #e5e5e5);
}
#fh5co-content_show .article-media.article-thumb li:last-child {
    border-bottom: 0;
}
#fh5co-content_show .article-media.article-thumb .thumb-box {
    float: none !important;
    flex: 0 0 120px;
    width: 120px;
    height: 80px;
    margin-right: 0 !important;
    border-radius: 4px;
}
#fh5co-content_show .article-media.article-thumb .thumb-box img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    display: block;
}
#fh5co-content_show .article-media.article-thumb .media-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    line-height: 22px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#fh5co-content_show .article-media.article-thumb .media-info h3 {
    font-size: 15px;
    line-height: 22px !important;
    margin: 0 0 6px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
#fh5co-content_show .article-media.article-thumb .media-info h3 a {
    display: inline-block;
    line-height: 22px;
    text-decoration: none;
}
#fh5co-content_show .article-media.article-thumb .media-info .media-date {
    font-size: 12px;
    line-height: 18px;
    color: var(--hn-text-60, #999);
}

@media (max-width: 480px) {
    #fh5co-content_show .article-media.article-thumb li {
        min-height: 62px;
        padding: 12px 0 !important;
        gap: 10px;
    }
    #fh5co-content_show .article-media.article-thumb .thumb-box {
        flex: 0 0 90px;
        width: 90px;
        height: 62px;
    }
    #fh5co-content_show .article-media.article-thumb .thumb-box img {
        width: 90px;
        height: 62px;
    }
    #fh5co-content_show .article-media.article-thumb .media-info h3 {
        font-size: 13px;
        line-height: 20px !important;
        margin-bottom: 3px !important;
    }
    #fh5co-content_show .article-media.article-thumb .media-info h3 a { line-height: 20px; }
}

/* ============================================================
   13. 自适应（响应式）缺陷修复 —— 2026-11-06
   本文件在 opt.min.css / style.css / theme-color.css 之后加载，
   同特异性下后者胜出，因此这里只做“覆盖”，不改原文件结构。
   ============================================================ */

/* ---------- 13.1 列表页 / 内页横幅：去掉 1920×160 固定尺寸 ----------
   原规则（opt.min.css、style.css）：
     .slideshow{width:1920px}
     .slideshow img{width:1920px;height:160px}
   在 761–1920px 屏幕上会把图片强行压成 12:1，两侧还被 .layout 裁掉。
   这里改为宽度 100%、高度按图片自身比例，图片永远不变形、不溢出。 */
.slideshow {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.slideshow > img,
.slideshow img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
/* 文章页横幅容器本来已 100% 宽裁剪，这里只保证内部图片跟上 */
.qs-post-banner > .slideshow {
    height: auto;
}

/* ---------- 13.2 产品图：480 断点宽度方向写反 ----------
   原规则在 ≤480px 反而把 .Productpic 设成 340px，比默认 280px 更宽，
   320–360px 手机上会溢出正文栏。改为“最多 340px，但不超过容器”。 */
@media screen and (max-width: 480px) {
    #fh5co-content_show .Productpic {
        width: 100% !important;
        max-width: 340px;
        height: auto;
        float: none;
        margin: 0 auto 14px;
    }
    #fh5co-content_show .Productpic .img {
        width: 100%;
        height: auto;
    }
    #fh5co-content_show .Producttxt {
        padding-left: 0;
        padding-top: 0;
        float: none;
        width: 100%;
    }
}

/* ---------- 13.3 页脚：把三套互相覆盖的断点收敛为一套 ----------
   opt.min.css / style.css 里 900 → 600 → 480 → 600 反复覆盖，
   最后一个 600 断点把服务、联系、友情链接整列 display:none。
   这里统一为：900 两列、600 单列且所有列都显示。 */
@media screen and (max-width: 900px) {
    .qs-eu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 40px 0 32px;
    }
    .qs-eu-brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 600px) {
    .qs-eu-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 0 24px;
    }
    .qs-eu-brand,
    .qs-eu-col,
    .qs-eu-col:last-child { grid-column: auto; }
    .qs-eu-col:not(.qs-eu-brand) { display: block; }
    .qs-eu-slogan { display: block; }
    .qs-eu-col h3,
    .qs-eu-col h4 { margin-bottom: 10px; font-size: 12.5px; }
    .qs-eu-col li { line-height: 2; font-size: 12.5px; }
}

/* ---------- 13.4 正文表格：超过栏宽时可横向滚动 ----------
   原来只给了 max-width:100%，单元格不换行时右列会被裁掉，
   甚至把右栏顶宽、压到侧栏。包一层滚动容器（table 自身 display:block）。 */
#fh5co-content_show .article_content table,
#fh5co-content_show .show_body table,
#fh5co-content_show .detail table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}
#fh5co-content_show .article_content table th,
#fh5co-content_show .article_content table td {
    word-break: break-word;
}

/* ---------- 13.5 顶栏：641–768px 下高度固定 35px 会盖住 LOGO ----------
   左右两组内容在窄屏换行时被 overflow:hidden 裁掉。改为最小高度 + 可增长，
   同时保留原来的上下 35px 视觉节奏。 */
.ww100 { height: auto; min-height: 35px; }
#hntop {
    height: auto !important;
    min-height: 35px;
    overflow: visible !important;
}
#hntop .hntopleft p,
#hntop .hntopright li { line-height: 35px; }

/* 窄屏隐藏顶栏次级项改用“按类名”，不再依赖 nth-of-type 的菜单顺序 */
@media screen and (max-width: 640px) {
    #hntop .hntopright > li:not(.qs-top-user) { display: none; }
}

/* ---------- 13.6 搜索联想：手机上不再向上顶到键盘里 ---------- */
@media screen and (max-width: 760px) {
    .search-suggest {
        top: auto !important;
        bottom: 100% !important;
        max-height: 32vh;
        border-radius: 8px 8px 0 0 !important;
    }
}

/* ---------- 13.7 用户下拉：320px 小屏不再溢出左边界 ---------- */
@media screen and (max-width: 360px) {
    .qs-um-drop {
        min-width: 0;
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
    }
}

/* ---------- 13.8 760px 临界点：明确走移动端导航 ----------
   pintuer.css 的 max-width:760 与 min-width:760 会同时在 760px 命中
   （移动菜单与桌面导航规则并存），结果取决于书写顺序。
   这里在唯一这一档显式声明：隐藏桌面菜单、显示移动按钮、LOGO 居中。 */
@media screen and (min-width: 760px) and (max-width: 760px) {
    #fh5co-header .nav-navicon { display: none; }
    #fh5co-header .icon-daohang { display: block; }
    #fh5co-header .logo { text-align: center; }
}