/* ============================================================================
   中纳新材料官网 — 前台样式（site.css）
   全站唯一前台样式文件；Bootstrap 3 之上的主题层
   品牌色：品牌红 #d73331（客户 logo 实测）/ 石墨黑 #23282e（厂区建筑主色）
   ============================================================================ */

:root {
    --zn-primary: #d73331;
    --zn-primary-deep: #b01f24;
    --zn-primary-light: #f29895;
    --zn-ink: #23282e;
    --zn-bg-gray: #f6f6f7;
    --zn-text: #34383d;
    --zn-text-light: #878c92;
}

/* ---------- 基础 ---------- */
html, body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    color: var(--zn-text);
}
body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
    /* 覆盖 frontend.css/fastadmin.css 的 body 布局规则：
       height:100% 会把 body 钉在一屏高度、overflow-x:hidden/auto 会把 body 变成滚动容器，
       二者都会导致 sticky 吸顶导航失效；height:auto + overflow clip/visible 恢复正常文档流。
       padding-top:60px 是框架为固定导航预留的补偿，本项目导航非 fixed，置 0 去除顶部空白 */
    height: auto;
    padding-top: 0;
    overflow-x: clip;
    overflow-y: visible;
    /* 页面进入/退出动效（配合 frontend/site.js 的退出过渡）。
       只用 opacity 不用 transform：body 一旦带 transform 会让 sticky 导航短暂失效，
       且后台标签动画被节流时中间态会残留 */
    animation: znPageIn .4s ease-out backwards;
}
body.zn-exit {
    opacity: 0;
    transition: opacity .18s ease-in;
    animation: none;
}
@keyframes znPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    body.zn-exit { opacity: 1; transition: none; }
}
body.zn-scrolled .zn-header {
    box-shadow: 0 4px 18px rgba(35, 40, 46, .14);
}
::selection { background: rgba(215, 51, 49, .22); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--zn-primary);
    outline-offset: 2px;
}
a { color: var(--zn-primary); transition: color .2s; }
a:hover, a:focus { color: var(--zn-primary-deep); text-decoration: none; }
img { max-width: 100%; }

.zn-btn-primary {
    display: inline-block;
    background: var(--zn-primary);
    border: 1px solid var(--zn-primary);
    color: #fff;
    padding: 10px 28px;
    border-radius: 3px;
    letter-spacing: 1px;
    transition: all .25s;
}
.zn-btn-primary:hover, .zn-btn-primary:focus {
    background: var(--zn-primary-deep);
    border-color: var(--zn-primary-deep);
    color: #fff;
    box-shadow: 0 8px 18px rgba(215, 51, 49, .3);
}
.zn-btn-primary i { transition: transform .25s; }
.zn-btn-primary:hover i { transform: translateX(3px); }
.zn-btn-primary:active, .zn-btn-outline:active, #zn-backtop:active { transform: scale(.96); }
.zn-btn-outline {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--zn-primary);
    color: var(--zn-primary);
    padding: 9px 26px;
    border-radius: 3px;
    letter-spacing: 1px;
    transition: all .25s;
}
.zn-btn-outline:hover, .zn-btn-outline:focus {
    background: var(--zn-primary);
    color: #fff;
}

/* ---------- 顶部信息条 ---------- */
.zn-topbar {
    background: var(--zn-ink);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 34px;
}
.zn-topbar .container { display: flex; justify-content: space-between; }
.zn-topbar i { margin-right: 4px; color: var(--zn-primary-light); }
.zn-topbar-right span { margin-left: 18px; }

/* ---------- 主导航 ---------- */
.zn-header {
    background: #fff;
    border-bottom: 1px solid #ebeced;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 8px rgba(35, 40, 46, .06);
}
.zn-nav-wrap { display: flex; align-items: center; min-height: 72px; flex-wrap: wrap; transition: min-height .25s ease; }
body.zn-scrolled .zn-nav-wrap { min-height: 62px; }
.zn-nav-list > li > a { transition: color .2s, padding .25s ease; }
body.zn-scrolled .zn-nav-list > li > a { padding-top: 18px; padding-bottom: 18px; }
.zn-logo { display: inline-flex; align-items: center; padding: 8px 0; }
.zn-logo img { height: 46px; }
.zn-nav-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid #e1e3e5;
    border-radius: 4px;
    font-size: 20px;
    color: var(--zn-ink);
    padding: 4px 12px;
}
.zn-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.zn-nav.collapsing, .zn-nav.collapse.in { display: block; width: 100%; }
.zn-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.zn-nav-list > li { position: relative; }
.zn-nav-list > li > a {
    display: block;
    padding: 25px 18px;
    color: var(--zn-ink);
    font-size: 15px;
    letter-spacing: 1px;
}
.zn-nav-list > li > a:hover { color: var(--zn-primary); }
.zn-nav-list > li.active > a { color: var(--zn-primary); font-weight: 600; }
.zn-nav-list > li.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    background: var(--zn-primary);
    border-radius: 2px;
}
/* 下拉产品菜单（透明度+位移动效替代瞬显瞬隐） */
.zn-dropdown {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid #ebeced;
    border-top: 3px solid var(--zn-primary);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px rgba(35, 40, 46, .12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 100;
}
.zn-nav-product:hover .zn-dropdown,
.zn-nav-product:focus-within .zn-dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.zn-dropdown li a {
    display: block;
    padding: 9px 16px;
    color: var(--zn-text);
    font-size: 13px;
    white-space: nowrap;
}
.zn-dropdown li a:hover { background: var(--zn-bg-gray); color: var(--zn-primary); }
.zn-dropdown-more { border-top: 1px dashed #eff0f1; margin-top: 4px; }
.zn-dropdown-more a { color: var(--zn-primary); }
/* 搜索 */
.zn-search {
    display: flex;
    align-items: center;
    margin-left: 12px;
    border: 1px solid #e2e4e6;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.zn-search input {
    border: none;
    outline: none;
    height: 34px;
    width: 120px;
    padding: 0 12px;
    font-size: 13px;
    background: transparent;
    transition: width .3s;
}
.zn-search input:focus { width: 150px; }
.zn-search button {
    border: none;
    background: none;
    color: var(--zn-primary);
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
}

/* ---------- 首页轮播 ---------- */
.zn-carousel { margin: 0; }
.zn-banner {
    height: 560px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}
/* 压暗渐变：保证正式照片上文字可读 */
.zn-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 18, 22, .72) 0%, rgba(15, 18, 22, .38) 52%, rgba(15, 18, 22, .08) 100%);
}
.zn-banner .container { position: relative; z-index: 1; }
.zn-banner-caption { color: #fff; max-width: 640px; }
/* 字幕进场动画（随轮播切换重新触发） */
.zn-banner-caption > * { opacity: 0; }
.zn-carousel .item.active .zn-banner-caption > * {
    animation: znCaption .75s cubic-bezier(.22, .61, .36, 1) forwards;
}
.zn-carousel .item.active .zn-banner-caption > :nth-child(2) { animation-delay: .14s; }
.zn-carousel .item.active .zn-banner-caption > :nth-child(3) { animation-delay: .28s; }
@keyframes znCaption {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}
.zn-banner-caption h2 {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0 0 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.zn-banner-caption p {
    font-size: 18px;
    opacity: .88;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
/* 左右切换按钮：必须绝对定位，否则会排入文档流把 .zn-carousel 撑高，
   连带 .carousel-indicators（bottom 定位）掉出 banner 落到下方白底上 */
.zn-carousel-ctrl {
    position: absolute;
    top: 50%;
    margin-top: -26px;
    z-index: 5;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    opacity: 0;
    transition: all .3s;
}
.zn-carousel-ctrl:hover, .zn-carousel-ctrl:focus { color: #fff; text-decoration: none; }
.zn-carousel:hover .zn-carousel-ctrl { opacity: 1; }
.zn-carousel-ctrl.left { left: 24px; }
.zn-carousel-ctrl.right { right: 24px; }
.zn-carousel-ctrl:hover { background: var(--zn-primary); color: #fff; }
/* 指示点显式定位于 banner 内底部，不依赖 Bootstrap 默认值 */
.zn-carousel .carousel-indicators { bottom: 22px; z-index: 10; }
.zn-carousel .carousel-indicators li { border-color: rgba(255,255,255,.6); }
.zn-carousel .carousel-indicators li.active { background: var(--zn-primary); border-color: var(--zn-primary); }

/* ---------- 关键数据 ---------- */
.zn-stats {
    background: #fff;
    border-bottom: 1px solid #eff0f1;
    padding: 36px 0;
}
.zn-stat { text-align: center; }
.zn-stat-num {
    font-size: 42px;
    font-weight: 700;
    color: var(--zn-ink);
    line-height: 1.1;
}
.zn-stat-num span {
    font-size: 15px;
    font-weight: 400;
    color: var(--zn-primary);
    margin-left: 4px;
}
.zn-stat-title { color: var(--zn-text-light); margin-top: 6px; letter-spacing: 2px; }

/* ---------- 区块通用 ---------- */
.zn-section { padding: 70px 0; }
.zn-section-tight { padding: 48px 0; }
.zn-section-gray { background: var(--zn-bg-gray); }
.zn-section-dark {
    background: linear-gradient(135deg, #23282e 0%, #3a434d 100%);
}
.zn-section-head { text-align: center; margin-bottom: 44px; }
.zn-section-head h2 {
    font-size: 32px;
    color: var(--zn-ink);
    letter-spacing: 3px;
    margin: 0;
    font-weight: 600;
}
.zn-section-sub {
    color: #c9cbce;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 8px;
    font-size: 13px;
    position: relative;
    display: inline-block;
    padding: 0 46px;
}
.zn-section-sub::before, .zn-section-sub::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #d8d9db;
}
.zn-section-sub::before { left: 0; }
.zn-section-sub::after { right: 0; }
.zn-head-light h2 { color: #fff; }
.zn-head-light .zn-section-sub { color: rgba(255, 255, 255, .45); }
.zn-head-light .zn-section-sub::before, .zn-head-light .zn-section-sub::after { background: rgba(255,255,255,.2); }
.zn-more-wrap { text-align: center; margin-top: 36px; }
.zn-margin-top { margin-top: 26px; }
.zn-margin-top-lg { margin-top: 42px; }

/* ---------- 关于简介 ---------- */
.zn-about-brief { display: flex; align-items: center; }
.zn-about-img {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(35, 40, 46, .14);
}
.zn-about-img img { display: block; width: 100%; }
.zn-about-text h3 {
    color: var(--zn-ink);
    letter-spacing: 2px;
    margin-top: 0;
}
.zn-about-excerpt {
    color: #5b6066;
    line-height: 2;
    margin: 18px 0 26px;
    text-align: justify;
}

/* ---------- 产品卡片 ---------- */
.zn-product-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: none;
    margin-bottom: 34px;
}
.zn-product-tabs > li > a {
    color: #5b6066;
    border: none;
    border-radius: 20px;
    padding: 8px 22px;
    margin: 0 6px 8px;
    font-size: 15px;
    letter-spacing: 1px;
    background: #fff;
    border: 1px solid #e6e7e9;
}
.zn-product-tabs > li.active > a,
.zn-product-tabs > li > a:hover {
    background: var(--zn-primary);
    border-color: var(--zn-primary);
    color: #fff;
}
.zn-product-card {
    display: block;
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all .3s;
}
.zn-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(35, 40, 46, .12);
    border-color: transparent;
}
.zn-product-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f4f4f5;
}
.zn-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.zn-product-card:hover .zn-product-img img { transform: scale(1.05); }
.zn-product-name {
    padding: 14px 16px 6px;
    color: var(--zn-ink);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}
.zn-product-cate {
    padding: 0 16px 14px;
    text-align: center;
    color: var(--zn-text-light);
    font-size: 12px;
    letter-spacing: 1px;
}
.zn-product-cate i { margin-right: 4px; color: #bbbec0; }
.zn-product-body { padding-bottom: 6px; }
.zn-product-industry {
    padding: 0 16px 14px;
    color: var(--zn-text-light);
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zn-product-industry i { margin-right: 4px; }

/* ---------- 应用行业 ---------- */
.zn-industry-card {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all .3s;
}
.zn-industry-card:hover {
    box-shadow: 0 12px 28px rgba(35, 40, 46, .12);
}
.zn-industry-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.zn-industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zn-industry-body { padding: 16px 18px 20px; }
.zn-industry-body h4 {
    color: var(--zn-ink);
    margin: 0 0 8px;
    letter-spacing: 1px;
}
.zn-industry-body p {
    color: #6b7076;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

/* ---------- 研发生产质量（深色块） ---------- */
.zn-ability-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    padding: 30px 24px;
    margin-bottom: 24px;
    color: #fff;
    transition: all .3s;
}
.zn-ability-card:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-4px);
}
.zn-ability-icon {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--zn-primary-light);
    font-size: 24px;
    margin-bottom: 18px;
}
.zn-ability-card h4 { color: #fff; letter-spacing: 1px; }
.zn-ability-card p {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.9;
    margin: 0;
}

/* ---------- 发展历程时间轴 ---------- */
.zn-timeline-wrap { overflow-x: auto; padding-bottom: 10px; }
.zn-timeline {
    display: flex;
    align-items: stretch;
    position: relative;
    min-width: 760px;
    padding: 10px 0 6px;
}
.zn-timeline::before {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg, var(--zn-primary-light), var(--zn-primary));
}
.zn-timeline-item {
    flex: 1;
    min-width: 190px;
    padding: 0 12px;
    text-align: center;
    position: relative;
}
.zn-timeline-year {
    font-size: 26px;
    font-weight: 700;
    color: var(--zn-ink);
    height: 44px;
}
.zn-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--zn-primary);
    margin: 0 auto 22px;
    position: relative;
    z-index: 1;
}
.zn-timeline-card {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    padding: 14px 14px 16px;
    text-align: left;
    box-shadow: 0 6px 16px rgba(35, 40, 46, .07);
}
.zn-timeline-card img {
    border-radius: 4px;
    margin-bottom: 10px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}
.zn-timeline-card h5 {
    color: var(--zn-ink);
    font-size: 15px;
    margin: 0 0 6px;
}
.zn-timeline-card p {
    font-size: 12px;
    color: #6b7076;
    line-height: 1.8;
    margin: 0;
}

/* ---------- 新闻卡片 ---------- */
.zn-news-card {
    display: block;
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all .3s;
}
.zn-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(35, 40, 46, .12);
}
.zn-news-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.zn-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.zn-news-card:hover .zn-news-img img { transform: scale(1.05); }
.zn-news-body { padding: 18px 20px 20px; }
.zn-news-tag {
    display: inline-block;
    font-size: 12px;
    color: var(--zn-primary);
    background: rgba(215, 51, 49, .09);
    border-radius: 3px;
    padding: 2px 10px;
    margin-bottom: 10px;
}
.zn-news-body h4 {
    color: var(--zn-ink);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zn-news-body p {
    color: #6b7076;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zn-news-date { color: #a5adba; font-size: 12px; }
.zn-news-date i { margin-right: 4px; }

/* ---------- CTA ---------- */
.zn-cta {
    background: linear-gradient(135deg, #d73331, #b01f24);
    color: #fff;
    padding: 46px 0;
}
.zn-cta h3 { margin: 0 0 8px; letter-spacing: 1px; font-size: 24px; }
.zn-cta p { opacity: .85; margin: 0; }
.zn-cta-contact { margin-top: 14px !important; }
.zn-cta-contact span { margin-right: 22px; white-space: nowrap; }
.zn-cta-contact i { margin-right: 6px; color: rgba(255, 255, 255, .75); }
.zn-cta-action { text-align: right; }
.zn-cta .zn-btn-primary { background: #fff; color: var(--zn-primary); border-color: #fff; }
.zn-cta .zn-btn-primary:hover { background: var(--zn-primary-deep); color: #fff; border-color: var(--zn-primary-deep); }

/* ---------- 内页页头/面包屑 ---------- */
.zn-page-banner {
    background: linear-gradient(120deg, #a8202b 0%, #d73331 55%, #e2544f 100%);
    color: #fff;
    padding: 44px 0;
}
.zn-page-banner h1 {
    font-size: 28px;
    letter-spacing: 3px;
    margin: 0 0 10px;
}
.zn-breadcrumb { font-size: 13px; color: rgba(255, 255, 255, .68); }
.zn-breadcrumb a { color: rgba(255, 255, 255, .82); }
.zn-breadcrumb a:hover { color: #fff; }
.zn-crumb-sep { margin: 0 8px; opacity: .55; }
.zn-crumb-current { color: #fff; }

/* ---------- 侧边分类 ---------- */
.zn-sidebar { margin-bottom: 26px; }
.zn-side-title {
    background: var(--zn-ink);
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 14px 18px;
    margin: 0 0 2px;
    border-radius: 6px 6px 0 0;
}
.zn-side-title i { margin-right: 8px; color: var(--zn-primary-light); }
.zn-side-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ebeced;
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.zn-side-cats > li { border-bottom: 1px solid #eff0f1; }
.zn-side-cats > li:last-child { border-bottom: none; }
.zn-side-cats > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    color: var(--zn-text);
    font-size: 14px;
}
.zn-side-cats > li > a:hover { color: var(--zn-primary); background: #fafafa; }
.zn-side-cats > li.active > a { color: var(--zn-primary); font-weight: 600; background: #fdf4f4; }
.zn-side-arrow { color: #c9cbce; }
.zn-side-sub {
    list-style: none;
    padding: 0 0 6px;
    margin: 0;
    background: #fafafa;
}
.zn-side-sub li a {
    display: block;
    padding: 9px 18px 9px 34px;
    color: #6b7076;
    font-size: 13px;
    position: relative;
}
.zn-side-sub li a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d6d7d9;
    position: absolute;
    left: 22px;
    top: 15px;
}
.zn-side-sub li.active a { color: var(--zn-primary); font-weight: 600; }

/* ---------- 详情页 ---------- */
.zn-detail { background: #fff; }
.zn-detail-head { margin-bottom: 34px; }
.zn-gallery-main {
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f5;
}
.zn-gallery-main img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.zn-gallery-thumbs { display: flex; flex-wrap: wrap; margin-top: 12px; }
.zn-thumb {
    width: 76px;
    height: 60px;
    margin: 0 10px 10px 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: .75;
}
.zn-thumb.active, .zn-thumb:hover { border-color: var(--zn-primary); opacity: 1; }
.zn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zn-detail-info h2 {
    color: var(--zn-ink);
    font-size: 26px;
    margin-top: 0;
    letter-spacing: 1px;
}
.zn-detail-tags { list-style: none; padding: 0; margin: 0 0 16px; }
.zn-detail-tags li {
    display: inline-block;
    margin: 0 8px 8px 0;
    background: var(--zn-bg-gray);
    color: var(--zn-primary);
    border: 1px solid #f2dadb;
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 13px;
}
.zn-detail-cate, .zn-detail-industry {
    color: #6b7076;
    font-size: 14px;
    margin-bottom: 8px;
}
.zn-detail-cate i, .zn-detail-industry i { color: var(--zn-primary); margin-right: 6px; }
.zn-detail-actions { margin-top: 24px; }
.zn-detail-actions .btn { margin-right: 12px; margin-bottom: 10px; }
.zn-detail-block { margin-bottom: 40px; }
.zn-block-title {
    font-size: 20px;
    color: var(--zn-ink);
    letter-spacing: 2px;
    border-left: 4px solid var(--zn-primary);
    padding-left: 14px;
    margin: 0 0 20px;
}
.zn-params-table { font-size: 14px; }
.zn-params-table td { padding: 11px 16px; }
.zn-param-name {
    width: 240px;
    background: #f8f8f9;
    color: var(--zn-ink);
    font-weight: 600;
}

/* ---------- 富文本 ---------- */
.zn-rich {
    line-height: 2.1;
    color: #4b5056;
    font-size: 15px;
}
.zn-rich img { max-width: 100%; border-radius: 4px; }
.zn-rich p { margin-bottom: 14px; }
.zn-rich-center { max-width: 900px; margin-left: auto; margin-right: auto; }
.zn-rich-page { max-width: 900px; margin: 0 auto; min-height: 200px; }

/* ---------- 核心竞争力卡 ---------- */
.zn-adv-card {
    display: flex;
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all .3s;
}
.zn-adv-card:hover { box-shadow: 0 10px 24px rgba(35, 40, 46, .1); }
.zn-adv-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    border-radius: 50%;
    background: rgba(215, 51, 49, .1);
    color: var(--zn-primary);
    font-size: 22px;
    margin-right: 18px;
}
.zn-adv-body h4 { color: var(--zn-ink); margin: 0 0 8px; }
.zn-adv-body p { color: #6b7076; font-size: 13px; line-height: 1.9; margin: 0; }

/* ---------- 使命愿景价值观 ---------- */
.zn-mvi-item {
    text-align: center;
    padding: 34px 22px;
    margin-bottom: 20px;
    border: 1px dashed #dedfe2;
    border-radius: 6px;
    transition: all .3s;
}
.zn-mvi-item:hover { border-color: var(--zn-primary); background: #fdf6f6; }
.zn-mvi-item i {
    font-size: 34px;
    color: var(--zn-primary);
    margin-bottom: 14px;
}
.zn-mvi-item h4 { color: var(--zn-ink); letter-spacing: 2px; }
.zn-mvi-item p { color: #6b7076; line-height: 1.9; }

/* ---------- 图集 ---------- */
.zn-album-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 6px 16px rgba(35, 40, 46, .08);
}
.zn-album-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.zn-album-card span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(20, 24, 29, .85));
    color: #fff;
    font-size: 13px;
    padding: 26px 14px 10px;
}

/* ---------- 荣誉 ---------- */
.zn-honor-card {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 22px;
    transition: all .3s;
}
.zn-honor-card:hover {
    box-shadow: 0 10px 24px rgba(35, 40, 46, .1);
    transform: translateY(-3px);
}
.zn-honor-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f8f8f9;
}
.zn-honor-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zn-honor-card p {
    text-align: center;
    padding: 12px 10px;
    margin: 0;
    color: var(--zn-ink);
    font-size: 14px;
}

/* 奖项资质轮播（每页 4 项，支持左右切换/自动播放） */
.zn-honor-carousel { padding: 6px 0 34px; }
.zn-honor-carousel .carousel-inner { overflow: visible; }
.zn-honor-ctrl {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: -34px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    color: var(--zn-ink);
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(35, 40, 46, .16);
    opacity: .85;
    transition: all .25s;
    z-index: 5;
}
.zn-honor-ctrl.left { left: -14px; }
.zn-honor-ctrl.right { right: -14px; }
.zn-honor-ctrl:hover { background: var(--zn-primary); color: #fff; opacity: 1; }
.zn-honor-carousel .carousel-indicators { bottom: 0; }
.zn-honor-carousel .carousel-indicators li { border-color: var(--zn-primary); }
.zn-honor-carousel .carousel-indicators li.active { background: var(--zn-primary); }

/* ---------- 新闻列表页 ---------- */
.zn-news-row {
    display: flex;
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 18px;
    transition: all .3s;
}
.zn-news-row:hover {
    box-shadow: 0 10px 24px rgba(35, 40, 46, .1);
}
.zn-news-row-img { flex: 0 0 220px; }
.zn-news-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zn-news-row-body { flex: 1; padding: 18px 22px; }
.zn-news-row-body h4 {
    color: var(--zn-ink);
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.5;
}
.zn-news-row-body p {
    color: #6b7076;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zn-news-row-meta { color: #a5adba; font-size: 12px; }
.zn-news-row-meta span { margin-right: 14px; }
.zn-news-row-meta i { margin-right: 4px; }

/* ---------- 新闻详情 ---------- */
.zn-news-detail {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    padding: 34px 38px;
}
.zn-news-detail-head {
    text-align: center;
    border-bottom: 1px solid #eff0f1;
    padding-bottom: 22px;
    margin-bottom: 26px;
}
.zn-news-detail-head h2 { color: var(--zn-ink); font-size: 24px; line-height: 1.6; }
.zn-news-detail-meta { color: #a5adba; font-size: 13px; margin-top: 12px; }
.zn-news-detail-meta span { margin-right: 14px; }
.zn-news-detail-meta i { margin-right: 4px; }
.zn-news-attachment {
    margin-top: 26px;
    padding: 14px 18px;
    background: #f8f8f9;
    border: 1px dashed #dedfe2;
    border-radius: 4px;
    font-size: 14px;
    word-break: break-all;
}
.zn-news-attachment i { color: var(--zn-primary); margin-right: 6px; }

/* 相关新闻 */
.zn-related-news { list-style: none; padding: 0; margin: 0; }
.zn-related-news li a {
    display: flex;
    align-items: center;
    padding: 13px 6px;
    border-bottom: 1px dashed #eaebec;
    color: var(--zn-text);
}
.zn-related-news li:last-child a { border-bottom: none; }
.zn-related-news li a:hover { color: var(--zn-primary); }
.zn-related-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zn-primary);
    margin-right: 12px;
    flex: 0 0 6px;
}
.zn-related-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.zn-related-date { color: #a5adba; font-size: 12px; margin-left: 16px; }

/* ---------- 联系我们 ---------- */
.zn-contact-card {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    padding: 22px 24px;
    margin-bottom: 18px;
    text-align: center;
}
.zn-contact-card i {
    font-size: 26px;
    color: var(--zn-primary);
    margin-bottom: 10px;
}
.zn-contact-card h5 { color: var(--zn-ink); letter-spacing: 2px; margin-bottom: 8px; }
.zn-contact-card p { color: #6b7076; font-size: 13px; margin: 0; word-break: break-all; }
.zn-contact-qrcode { width: 110px; height: 110px; }
.zn-map {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ebeced;
    margin-bottom: 20px;
    line-height: 0;
}
.zn-map iframe { width: 100%; border: 0; }
.zn-form-wrap {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 6px;
    padding: 26px 28px;
}
.zn-form-title {
    color: var(--zn-ink);
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0 0 6px;
}
.zn-form-tip { color: var(--zn-text-light); font-size: 13px; }
.zn-required { color: #e53e3e; }
.zn-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.zn-form .form-group label { color: #4b5056; font-weight: 500; }
.zn-form .form-control {
    border-radius: 4px;
    box-shadow: none;
    border-color: #e1e3e5;
}
.zn-form .form-control:focus { border-color: var(--zn-primary); box-shadow: 0 0 0 2px rgba(215, 51, 49, .12); }
.zn-form-msg.ok { color: #38a169; }
.zn-form-msg.error { color: #e53e3e; }
.zn-submit-btn { margin-right: 14px; }

/* ---------- 搜索页 ---------- */
.zn-search-head { text-align: center; margin-bottom: 36px; }
.zn-search-head h2 {
    color: var(--zn-ink);
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.zn-search-lg {
    margin: 0 auto;
    max-width: 620px;
    border: 2px solid var(--zn-primary);
    border-radius: 26px;
    padding: 0;
}
.zn-search-lg input {
    flex: 1;
    height: 46px;
    width: auto;
    font-size: 15px;
    padding: 0 20px;
}
.zn-search-lg input:focus { width: auto; }
.zn-search-lg button {
    background: var(--zn-primary);
    color: #fff;
    height: 46px;
    padding: 0 24px;
    font-size: 15px;
}
.zn-search-lg button:hover { background: var(--zn-primary-deep); }
.zn-search-block-title {
    color: var(--zn-ink);
    font-size: 18px;
    letter-spacing: 1px;
    border-left: 4px solid var(--zn-primary);
    padding-left: 12px;
}
.zn-search-news { background: #fff; border: 1px solid #ebeced; border-radius: 6px; padding: 6px 20px; }

/* ---------- 空状态 / 分页 ---------- */
.zn-empty {
    text-align: center;
    padding: 70px 20px;
    color: #b6b8ba;
    background: #fff;
    border: 1px dashed #e4e5e7;
    border-radius: 6px;
}
.zn-empty i { font-size: 44px; margin-bottom: 14px; }
.zn-empty p { margin: 0; font-size: 15px; }
.zn-empty-sm { padding: 26px; border: none; }
.zn-pagination { text-align: center; margin-top: 28px; }
.zn-pagination .pagination { margin: 0; }
.zn-pagination .pagination > li > a,
.zn-pagination .pagination > li > span {
    color: var(--zn-ink);
    border-radius: 4px;
    margin: 0 4px;
    border: 1px solid #e1e3e5;
}
.zn-pagination .pagination > li.active > a,
.zn-pagination .pagination > li.active > span {
    background: var(--zn-primary);
    border-color: var(--zn-primary);
    color: #fff;
}
.zn-pagination .pagination > li > a:hover { background: #fbeeef; }

/* ---------- 页脚 ---------- */
.zn-footer {
    background: #1b2127;
    color: rgba(255, 255, 255, .72);
    padding-top: 56px;
    margin-top: 0;
}
.zn-footer h4 {
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.zn-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: var(--zn-primary);
}
.zn-footer ul { list-style: none; padding: 0; margin: 0; }
.zn-footer li { margin-bottom: 10px; font-size: 13px; }
.zn-footer li a { color: rgba(255, 255, 255, .72); }
.zn-footer li a:hover { color: #fff; }
.zn-footer-about p {
    font-size: 13px;
    line-height: 1.9;
    margin: 16px 0 18px;
}
.zn-footer-logo { height: 44px; }
.zn-footer-qrcode {
    width: 86px;
    height: 86px;
    background: #fff;
    border-radius: 4px;
    padding: 4px;
    display: block;
}
.zn-footer-qrcode-label {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    padding-bottom: 8px;
}
.zn-footer-contact i {
    width: 18px;
    color: var(--zn-primary-light);
    margin-right: 6px;
}
.zn-footer-bottom {
    margin-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 18px 0;
    font-size: 12.5px;
    text-align: center;
}
.zn-footer-bottom p { margin: 0; line-height: 2; }
.zn-footer-bottom a { color: rgba(255, 255, 255, .72); margin-left: 12px; }
.zn-footer-bottom a:hover { color: #fff; }

/* ---------- 滚动渐入动画（配合 frontend/site.js） ---------- */
.zn-anim {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--zn-delay, 0s);
}
.zn-anim.zn-in {
    opacity: 1;
    transform: none;
}
/* 时间轴卡片等高：年份/圆点/卡片纵向排列（.zn-timeline 已 align-items:stretch） */
.zn-timeline-item { display: flex; flex-direction: column; }
.zn-timeline-card { flex: 1; }
/* 卡片网格等高：Bootstrap3 浮动列不互相拉伸，统一改为 flex 行 + 列内卡片撑满 */
.zn-product-grid, .zn-ability-grid, .zn-industry-grid, .zn-news-grid,
.zn-adv-grid, .zn-album-grid, .zn-honor-grid, .zn-mvi {
    display: flex;
    flex-wrap: wrap;
}
.zn-product-grid > [class*="col-"], .zn-ability-grid > [class*="col-"],
.zn-industry-grid > [class*="col-"], .zn-news-grid > [class*="col-"],
.zn-adv-grid > [class*="col-"], .zn-album-grid > [class*="col-"],
.zn-honor-grid > [class*="col-"] {
    display: flex;
}
.zn-product-grid > [class*="col-"] > *, .zn-ability-grid > [class*="col-"] > *,
.zn-industry-grid > [class*="col-"] > *, .zn-news-grid > [class*="col-"] > *,
.zn-adv-grid > [class*="col-"] > *, .zn-album-grid > [class*="col-"] > *,
.zn-honor-grid > [class*="col-"] > * {
    flex: 1;
}
/* 奖项资质轮播内是普通 row（每页 4 项），同样等高处理 */
.zn-honor-carousel .item .row { display: flex; flex-wrap: wrap; }
.zn-honor-carousel .item .row > [class*="col-"] { display: flex; }
.zn-honor-carousel .item .row > [class*="col-"] > * { flex: 1; }
/* 全站细滚动条（横向时间轴等需要滚动的区域观感统一） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cfd1d3; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b5b7b9; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 返回顶部 ---------- */
#zn-backtop {
    position: fixed;
    right: 26px;
    bottom: 34px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--zn-ink);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(35, 40, 46, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .3s;
    z-index: 1040;
}
#zn-backtop.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}
#zn-backtop:hover { background: var(--zn-primary); }

/* 减弱动态效果偏好：全部动画直接呈现 */
@media (prefers-reduced-motion: reduce) {
    .zn-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .zn-banner-caption > * { opacity: 1; }
    .zn-carousel .item.active .zn-banner-caption > * { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================================
   响应式（H5 自动适配）
   ============================================================================ */
@media (max-width: 991px) {
    .zn-banner { height: 420px; }
    .zn-banner-caption h2 { font-size: 34px; }
    .zn-nav-list > li > a { padding: 22px 12px; }
}

@media (max-width: 767px) {
    /* 顶部条隐藏，导航折叠为汉堡 */
    .zn-nav-wrap { min-height: 60px; }
    .zn-logo img { height: 38px; }
    .zn-nav-toggle { display: inline-block; }
    .zn-nav.collapse { display: none; width: 100%; }
    .zn-nav.collapse.in { display: block; }
    .zn-nav-list {
        display: block;
        border-top: 1px solid #eff0f1;
        margin-top: 8px;
    }
    .zn-nav-list > li > a { padding: 12px 6px; border-bottom: 1px solid #f4f4f5; }
    .zn-nav-list > li.active::after { display: none; }
    .zn-nav-list > li.active > a { border-left: 3px solid var(--zn-primary); padding-left: 10px; }
    .zn-dropdown {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        background: #fafafa;
        padding: 0 0 6px 14px;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .zn-search { margin: 12px 0 14px; width: 100%; }
    .zn-search input { flex: 1; width: 100%; }

    .zn-banner { height: 300px; }
    .zn-banner-caption h2 { font-size: 24px; margin-bottom: 10px; }
    .zn-banner-caption p { font-size: 14px; margin-bottom: 18px; }
    .zn-carousel-ctrl { display: none; }

    .zn-stats { padding: 22px 0; }
    .zn-stat-num { font-size: 28px; }
    .zn-stat-title { font-size: 12px; }

    .zn-section { padding: 44px 0; }
    .zn-section-tight { padding: 34px 0; }
    .zn-section-head { margin-bottom: 30px; }
    .zn-section-head h2 { font-size: 24px; }

    .zn-about-brief { display: block; }
    .zn-about-text { margin-top: 20px; }

    /* 发展历程：移动端改竖排时间轴，去掉原生横向滚动 */
    .zn-timeline-wrap { overflow: visible; padding-bottom: 0; }
    .zn-timeline {
        flex-direction: column;
        min-width: 0;
        padding: 4px 0 4px 30px;
    }
    .zn-timeline::before {
        left: 9px;
        right: auto;
        top: 10px;
        bottom: 10px;
        width: 2px;
        height: auto;
    }
    .zn-timeline-item {
        min-width: 0;
        padding: 0 0 22px;
        text-align: left;
        display: block;
        position: relative;
    }
    .zn-timeline-item:last-child { padding-bottom: 4px; }
    .zn-timeline-year { height: auto; font-size: 20px; margin-bottom: 10px; }
    .zn-timeline-dot {
        position: absolute;
        left: -27px;
        top: 5px;
        margin: 0;
    }
    .zn-timeline-card { box-shadow: 0 4px 12px rgba(35, 40, 46, .06); }

    .zn-news-row-img { flex: 0 0 110px; }
    .zn-news-row-body { padding: 12px 14px; }
    .zn-news-row-body h4 { font-size: 14.5px; }
    .zn-news-row-body p { display: none; }

    .zn-news-detail { padding: 22px 16px; }
    .zn-news-detail-head h2 { font-size: 19px; }

    .zn-cta { text-align: center; }
    .zn-cta-action { text-align: center; margin-top: 16px; }
    .zn-cta h3 { font-size: 18px; }

    .zn-page-banner { padding: 30px 0; }
    .zn-page-banner h1 { font-size: 22px; }

    .zn-footer { text-align: center; }
    .zn-footer h4::after { left: 50%; transform: translateX(-50%); }
    .zn-footer-qrcode { margin: 0 auto; }
    .zn-footer-qrcode-label { display: block; margin: 8px 0 0; }
    .zn-footer-about { margin-bottom: 26px; }
    .zn-footer .col-xs-6 { margin-bottom: 22px; }

    #zn-backtop { right: 14px; bottom: 22px; width: 40px; height: 40px; font-size: 18px; }
}

/* ==================== 人力资源（招聘职位） ==================== */
.zn-hr-intro { margin-bottom: 28px; }
.zn-hr-list { text-align: left; }
.zn-hr-item {
    background: #fff;
    border: 1px solid #ebeced;
    border-radius: 8px;
    padding: 22px 26px;
    margin-bottom: 20px;
    transition: box-shadow .25s, border-color .25s;
}
.zn-hr-item:hover { border-color: var(--zn-primary-light); box-shadow: 0 8px 22px rgba(35, 40, 46, .08); }
.zn-hr-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #ebeced;
}
.zn-hr-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.zn-hr-item-title h4 { margin: 0; font-size: 17px; color: var(--zn-ink); }
.zn-hr-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    background: rgba(215, 51, 49, .08);
    color: var(--zn-primary);
}
.zn-hr-salary { color: var(--zn-primary); font-weight: 600; font-size: 15px; }
.zn-hr-apply { white-space: nowrap; }
.zn-hr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding: 12px 0 2px;
    color: #7a828b;
    font-size: 13px;
}
.zn-hr-meta i { color: var(--zn-primary-light); margin-right: 4px; }
.zn-hr-block { margin-top: 14px; }
.zn-hr-block h5 { font-size: 14px; color: var(--zn-ink); margin: 0 0 8px; font-weight: 600; }
.zn-hr-block ul { margin: 0; padding-left: 18px; color: #5c646d; font-size: 13.5px; line-height: 1.9; }
.zn-hr-block ul li { list-style: none; position: relative; }
.zn-hr-block ul li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: .8em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zn-primary-light);
}
.zn-hr-contact { margin-top: 14px; font-size: 13px; color: #7a828b; }
.zn-hr-contact i { color: var(--zn-primary); margin-right: 4px; }

@media (max-width: 767px) {
    .zn-hr-item { padding: 16px; }
    .zn-hr-item-head { display: block; }
    .zn-hr-apply { margin-top: 10px; width: 100%; text-align: center; }
    .zn-hr-meta { gap: 4px 14px; }
}