@charset "utf-8";

:root {
    --zh-blue: #0046C7;
    --zh-blue-d: #0039A6;
    --zh-blue-l: #1A5CD1;
    --zh-orange: #FE7610;
    --zh-orange-d: #E56A0D;
    --zh-ink: #273342;
    --zh-ink-d: #1B2631;
    --zh-body: #5A6B7B;
    --zh-mute: #8B9BAB;
    --zh-bg: #F4F7FB;
    --zh-line: #E2E8F0;
}

html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; background: #e9edf2; } /* html 切勿加 overflow-x:会阻断 body 提升致 sticky 废 */
body { margin: 0 auto; max-width: 1920px; min-width: 320px; overflow-x: hidden; background: #fff; color: var(--zh-body); font: 1.6rem/1.8 "MiSans","PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 0 25px 0 rgba(0, 0, 0, .15); } /* hidden 提升给视口锁横移,body 保持 visible 保 sticky */
body.zh-modal-open { overflow: hidden; }
* , *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: all .3s ease; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
strong { color: var(--zh-ink); }

.zh-container { width: 96%; max-width: 169rem; margin: 0 auto; }
.zh-main { min-height: 40rem; }

/* ===== 按钮 ===== */
.zh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; height: 4.4rem; padding: 0 2.4rem; border: 0; border-radius: .4rem; font-size: 1.6rem; font-weight: 600; cursor: pointer; transition: all .3s ease; }
.zh-btn-primary { background: linear-gradient(135deg, #0046C7, #0039A6); color: #fff; }
.zh-btn-primary:hover { filter: brightness(.88); transform: translateY(-.2rem); box-shadow: 0 .6rem 1.6rem rgba(0, 70, 199, .28); }
.zh-btn-accent { background: linear-gradient(135deg, #FE7610, #E56A0D); color: #fff; }
.zh-btn-accent:hover { filter: brightness(.88); transform: translateY(-.2rem); box-shadow: 0 .6rem 1.6rem rgba(254, 118, 16, .3); }
.zh-btn-ghost { background: #fff; color: var(--zh-blue); border: .1rem solid var(--zh-blue); }
.zh-btn-ghost:hover { background: var(--zh-blue); color: #fff; }

/* ===== 顶栏 topbar ===== */
.zh-topbar { background: var(--zh-ink-d); color: #c8d2dd; font-size: 1.4rem; }
.zh-topbar .zh-container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 3.2rem; }
.zh-topbar-welcome { display: none; }
.zh-topbar-right { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.zh-topbar-tel { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 600; }
.zh-topbar-tel:hover { color: var(--zh-orange); }
.zh-topbar .lang-switcher { position: relative; }
.zh-topbar .lang-toggle { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .1); border: 0; color: #fff; cursor: pointer; padding: .5rem 1.2rem; border-radius: .5rem; transition: background .3s ease; }
.zh-topbar .lang-toggle:hover { background: rgba(255, 255, 255, .2); }
.zh-topbar .lang-menu { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 13rem; background: #fff; border-radius: .6rem; box-shadow: 0 .8rem 2.4rem rgba(27, 38, 49, .18); padding: .6rem; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: all .3s ease; z-index: 60; }
.zh-topbar .lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.zh-topbar .lang-menu a { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; border-radius: .4rem; color: var(--zh-ink); font-size: 1.4rem; }
.zh-topbar .lang-menu a + a { margin-top: .2rem; }
.zh-topbar .lang-menu a:hover { background: var(--zh-bg); color: var(--zh-blue); }
.zh-topbar .lang-caret { display: inline-block; width: 0; height: 0; margin-left: .2rem; border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-top: .5rem solid currentColor; }
.zh-topbar .lang-link.current { color: var(--zh-orange); font-weight: 600; }

/* ===== 主导航 ===== */
.zh-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 .2rem 1.2rem rgba(27, 38, 49, .08); transition: box-shadow .3s ease; }
.zh-header.scrolled { box-shadow: 0 .4rem 2rem rgba(27, 38, 49, .14); }
/* ===== 新闻 mega 下拉 ===== */
.zh-mega { position: absolute; right: 0; top: 100%; display: flex; width: 86rem; max-width: 100%; background: #fff; border-top: .3rem solid var(--zh-orange); border-radius: 0 0 .8rem .8rem; box-shadow: 0 1.2rem 3.2rem rgba(27, 38, 49, .16); z-index: 90; opacity: 0; visibility: hidden; transform: translateY(1.2rem); transition: opacity .32s ease, transform .32s ease, visibility .32s ease; }
.zh-mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.zh-mega-left { flex: 0 0 20rem; padding: 2.6rem 2.4rem; }
.zh-mega-left h5, .zh-mega-mid h5 { margin-bottom: 1.6rem; font-size: 1.6rem; font-weight: 600; color: var(--zh-ink); }
.zh-mega-tabs { display: flex; flex-direction: column; gap: .6rem; }
.zh-mega-tab { display: flex; align-items: center; height: 4rem; padding: 0 2rem; border-radius: 2rem; font-size: 1.4rem; color: var(--zh-ink); transition: background .3s ease, color .3s ease, transform .3s ease; }
.zh-mega-tab:hover { background: var(--zh-bg); color: var(--zh-blue); transform: translateX(.4rem); }
.zh-mega-tab.active { background: var(--zh-blue); color: #fff; transform: translateX(0); }
.zh-mega-mid { flex: 1 1 auto; min-width: 0; padding: 2.6rem 2.4rem; border-left: .1rem solid var(--zh-line); border-right: .1rem solid var(--zh-line); }
.zh-mega-list { display: none; }
.zh-mega-list.active { display: block; animation: zhMegaFade .32s ease; }
.zh-mega-list a { display: flex; gap: 1rem; margin-bottom: 1.2rem; font-size: 1.4rem; color: var(--zh-body); transition: color .3s ease, transform .3s ease; }
.zh-mega-list a:last-child { margin-bottom: 0; }
.zh-mega-list a:hover { color: var(--zh-blue); transform: translateX(.4rem); }
.zh-mega-list a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-mega-list i { flex-shrink: 0; font-style: normal; color: var(--zh-mute); transition: color .3s ease; }
.zh-mega-list a:hover i { color: var(--zh-orange); }
.zh-mega-right { flex: 0 0 26rem; padding: 2.6rem 2.4rem; }
.zh-mega-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.zh-mega-cell { position: relative; display: block; overflow: hidden; border-radius: .6rem; background: var(--zh-bg); }
.zh-mega-cell img { display: block; width: 100%; height: auto; transform: translateZ(0); backface-visibility: hidden; transition: transform .5s ease; }
.zh-mega-cell:hover img { transform: scale(1.08) translateZ(0); }
@keyframes zhMegaFade { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: translateY(0); } }
/* ===== 产品 mega 下拉 ===== */
.zh-mega--product { width: 86rem; }
.zh-mega--case { width: 86rem; }
.zh-pm-banner { position: relative; flex: 0 0 27rem; align-self: flex-start; aspect-ratio: 520 / 1000; overflow: hidden; background: var(--zh-ink-d); background-size: cover; background-position: center; }
.zh-pm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zh-pm-link { position: absolute; inset: 0; z-index: 1; }
.zh-pm-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: .6rem; padding: 2.4rem 2rem; background: linear-gradient(to top, rgba(27, 38, 49, .84), rgba(27, 38, 49, 0)); pointer-events: none; }
.zh-pm-cap b { font-size: 1.8rem; font-weight: 600; color: #fff; }
.zh-pm-cap em { font-style: normal; font-size: 1.4rem; color: #c8d2dd; }
.zh-pm-body { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; align-content: start; padding: 2.6rem 2.4rem 0; }
.zh-pm-cat { display: block; min-width: 0; }
.zh-pm-cat-name { position: relative; display: inline-block; margin-bottom: 1rem; padding-bottom: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--zh-ink); transition: color .3s ease; }
.zh-pm-cat-name::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: .2rem; border-radius: .2rem; background: linear-gradient(90deg, var(--zh-blue), var(--zh-orange)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.zh-pm-cat-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: .8rem; border: .1rem solid var(--zh-line); background: var(--zh-bg); transition: border-color .3s ease, box-shadow .3s ease; }
.zh-pm-cat-thumb img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; transition: transform .5s ease; }
.zh-pm-cat:hover .zh-pm-cat-name { color: var(--zh-blue); }
.zh-pm-cat:hover .zh-pm-cat-name::after { transform: scaleX(1); }
.zh-pm-cat:hover .zh-pm-cat-thumb { border-color: var(--zh-orange); box-shadow: 0 .8rem 2rem rgba(27, 38, 49, .12); }
.zh-pm-cat:hover .zh-pm-cat-thumb img { transform: scale(1.06) translateZ(0); }
.zh-navbar .zh-container { position: relative; display: flex; align-items: center; gap: 2rem; min-height: 5.6rem; }
.zh-logo { display: flex; align-items: center; gap: 1.2rem; margin-right: auto; }
.zh-logo img { max-height: 3.6rem; width: auto; }
.zh-logo-text { display: flex; flex-direction: column; line-height: 1.4; }
.zh-logo-text b { font-size: 2rem; letter-spacing: 0; color: var(--zh-ink); }
.zh-logo-text span { font-size: 1rem; letter-spacing: 0; color: var(--zh-body); }
.zh-nav { display: none; }
.zh-nav-cta { display: none; }
.zh-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .5rem; width: 4.4rem; height: 4.4rem; padding: 1rem; background: none; border: 0; cursor: pointer; color: var(--zh-ink); }
.zh-menu-btn span { display: block; width: 100%; height: .2rem; background: currentColor; border-radius: .2rem; transition: all .3s ease; }
.zh-menu-btn.active span:nth-child(1) { transform: translateY(.7rem) rotate(45deg); }
.zh-menu-btn.active span:nth-child(2) { opacity: 0; }
.zh-menu-btn.active span:nth-child(3) { transform: translateY(-.7rem) rotate(-45deg); }
/* ===== 顶部搜索(icon + 下拉面板) ===== */
.zh-nav-search { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--zh-ink); font-size: 2.4rem; cursor: pointer; transition: all .3s ease; }
.zh-nav-search:hover, body.zh-search-open .zh-nav-search { color: var(--zh-blue); background: var(--zh-bg); }
.zh-nav-search-wrap { position: relative; }
.zh-search-panel { position: absolute; top: calc(100% + 1rem); right: -7rem; z-index: 60; width: 32rem; max-width: calc(100vw - 3.2rem); padding: 1.2rem; background: #fff; border-radius: .8rem; box-shadow: 0 1.2rem 3rem rgba(27, 38, 49, .18); opacity: 0; visibility: hidden; transform: translateY(1rem); transition: all .3s ease; }
body.zh-search-open .zh-search-panel, .zh-nav-search-wrap:hover .zh-search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.zh-search-panel .zh-search-form { margin: 0; }
.zh-search-panel .zh-search-form input { height: 4rem; font-size: 1.4rem; }
.zh-search-panel .zh-search-form button { height: 4rem; padding: 0 1.8rem; font-size: 1.4rem; white-space: nowrap; }

/* 移动端抽屉菜单 */
.zh-drawer { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 34rem; background: #fff; z-index: 90; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; padding: 2rem 0 4rem; }
.zh-drawer.active { transform: translateX(0); }
.zh-drawer-overlay { position: fixed; inset: 0; background: rgba(27, 38, 49, .5); z-index: 80; opacity: 0; visibility: hidden; transition: all .3s ease; }
.zh-drawer-overlay.active { opacity: 1; visibility: visible; }
.zh-drawer-head { display: flex; align-items: center; gap: 1.2rem; padding: 0 2rem 2rem; border-bottom: .1rem solid var(--zh-line); }
.zh-drawer-logo { max-height: 3.6rem; width: auto; }
.zh-drawer-close { margin-left: auto; width: 4.4rem; height: 4.4rem; background: none; border: 0; font-size: 2.4rem; color: var(--zh-mute); cursor: pointer; }
.zh-drawer nav ul li { border-bottom: .1rem solid var(--zh-bg); }
.zh-drawer nav ul li a { display: block; padding: 1.4rem 2rem; font-size: 1.6rem; color: var(--zh-ink); font-weight: 600; }
/* 抽屉一级导航 icon(仅移动端抽屉使用) */
.zh-drawer nav > ul > li > a::before { font-family: "iconfont"; font-weight: 400; font-size: 1.8rem; margin-right: 1rem; color: var(--zh-blue); }
.zh-drawer nav > ul > li:first-child > a::before { content: "\e648"; }
.zh-drawer nav > ul > li > a[href*="product"]::before { content: "\e602"; }
.zh-drawer nav > ul > li > a[href*="case"]::before { content: "\e66d"; }
.zh-drawer nav > ul > li > a[href*="news"]::before { content: "\e626"; }
.zh-drawer nav > ul > li > a[href*="service"]::before { content: "\e638"; }
.zh-drawer nav > ul > li > a[href*="about"]::before { content: "\e619"; }
.zh-drawer nav > ul > li > a[href*="contact"]::before { content: "\e646"; }
.zh-drawer nav > ul > li > a[href*="hub"]::before { content: "\e622"; }
.zh-drawer nav ul li a:hover, .zh-drawer nav ul li.current-menu-item > a { color: var(--zh-blue); background: var(--zh-bg); }
.zh-drawer nav ul li .sub-menu { display: none; background: var(--zh-bg); }
.zh-drawer nav ul li .sub-menu a { padding-left: 3.6rem; font-weight: 400; font-size: 1.6rem; }
.zh-drawer nav ul li.open > .sub-menu { display: block; }
.zh-drawer-cta { margin: 2.4rem 2rem 0; }
.zh-drawer-cta .zh-btn { width: 100%; }

/* ===== 板块头 ===== */
.zh-sec { padding: 3.5rem 0; }
.zh-sec-alt { background: var(--zh-bg); }
.zh-sec-dark { background: linear-gradient(135deg, #273342, #1B2631); }
.zh-sec-head { margin-bottom: 3.2rem; text-align: center; }
.zh-sec-head h2 { position: relative; display: inline-block; padding-bottom: 1.4rem; font-size: 2.8rem; line-height: 1.4; color: var(--zh-ink); letter-spacing: .1rem; }
.zh-sec-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4.8rem; height: .4rem; margin-left: -2.4rem; border-radius: .2rem; background: linear-gradient(90deg, var(--zh-orange), #FF8F3A); }
.zh-sec-head p { margin-top: 1.2rem; font-size: 1.6rem; color: var(--zh-mute); }
.zh-sec-dark .zh-sec-head h2 { color: #fff; }
.zh-sec-dark .zh-sec-head p { color: #9fb0c0; }
.zh-sec-more { display: inline-block; margin-top: 2.8rem; font-size: 1.6rem; font-weight: 600; color: var(--zh-blue); }
.zh-sec-more:hover { color: var(--zh-orange); }
.zh-sec-more::after { content: " \203A"; }

/* ===== 卡片(产品/案例/新闻公用) ===== */
.zh-card { display: block; background: #fff; border: .1rem solid var(--zh-line); border-radius: .6rem; overflow: hidden; transition: all .3s ease; }
.zh-card:hover { transform: translateY(-.4rem); border-color: var(--zh-orange); box-shadow: 0 1rem 2.4rem rgba(27, 38, 49, .12); }
.zh-card-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zh-bg); }
.zh-card-img img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; transition: transform .6s ease; }
.zh-card:hover .zh-card-img img { transform: scale(1.05) translateZ(0); }
.zh-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); transform: translateX(-130%); transition: transform .7s ease; }
.zh-card:hover .zh-card-img::after { transform: translateX(130%); }
.zh-card-tag { position: absolute; top: 1.2rem; left: 1.2rem; padding: .3rem 1rem; border-radius: .3rem; background: rgba(0, 70, 199, .88); color: #fff; font-size: 1.2rem; }
.zh-card-tag.hot { background: rgba(254, 118, 16, .92); }
.zh-card-body { display: block; padding: 1.8rem; }
.zh-card-body h3 { font-size: 1.8rem; line-height: 1.6; color: var(--zh-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zh-card:hover .zh-card-body h3 { color: var(--zh-blue); }
.zh-card-body p { margin-top: .8rem; font-size: 1.4rem; color: var(--zh-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zh-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; padding-top: 1.2rem; border-top: .1rem solid var(--zh-bg); font-size: 1.4rem; color: var(--zh-mute); }
.zh-card-meta .more { color: var(--zh-blue); font-weight: 600; }
.zh-card-meta .more::after { content: " \203A"; display: inline-block; transition: transform .3s ease; }
.zh-card:hover .zh-card-meta .more::after { transform: translateX(.4rem); }
.zh-empty { padding: 4rem 2rem; text-align: center; color: var(--zh-mute); font-size: 1.6rem; background: var(--zh-bg); border-radius: .6rem; }

/* ===== 内页横幅 page-hero ===== */
.zh-page-hero { position: relative; padding: 4.4rem 0; background-color: #1B2631; background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.zh-page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 70, 199, .9), rgba(27, 38, 49, .84)); }
.zh-page-hero::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border: 2rem solid rgba(255, 255, 255, .06); border-radius: 50%; z-index: 1; }
.zh-page-hero .zh-container { position: relative; z-index: 2; }
.zh-page-hero .hero-title { font-size: 2.2rem; line-height: 1.4; letter-spacing: .1rem; margin: 0; }
.zh-page-hero .desc { margin-top: .8rem; max-width: 80rem; font-size: 1.6rem; color: #c8d6ee; }

/* ===== 面包屑 ===== */
.zh-crumbs { font-size: 1.4rem; color: #a9bce0; margin-bottom: 1rem; }
.zh-crumbs a { color: #c8d6ee; }
.zh-crumbs a:hover { color: #fff; }
.zh-crumbs span.sep { margin: 0 .6rem; }
.zh-crumbs-light { color: var(--zh-mute); }
.zh-crumbs-light a { color: var(--zh-body); }
.zh-crumbs-light a:hover { color: var(--zh-blue); }

/* ===== 分页 ===== */
.zh-pagination { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 4rem; }
.zh-pagination a, .zh-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; padding: 0 1.2rem; border: .1rem solid var(--zh-line); border-radius: .4rem; background: #fff; font-size: 1.6rem; color: var(--zh-body); }
.zh-pagination a:hover { border-color: var(--zh-blue); color: var(--zh-blue); }
.zh-pagination .current { background: var(--zh-blue); border-color: var(--zh-blue); color: #fff; }

/* ===== CTA band ===== */
.zh-cta-band { position: relative; padding: 9rem 0; background: linear-gradient(rgba(27, 38, 49, .55), rgba(27, 38, 49, .55)), url(../images/inmess-bg.jpg) center 0 / cover no-repeat; background-attachment: scroll; color: #fff; text-align: center; }
.zh-cta-band .zh-container { display: flex; flex-direction: column; gap: 2.4rem; align-items: center; }
.zh-cta-band h2 { font-size: 2.2rem; line-height: 1.5; }
.zh-cta-band p { font-size: 1.6rem; opacity: .9; }
.zh-cta-band-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
.zh-cta-band .zh-btn-white { background: #fff; color: var(--zh-orange-d); }
.zh-cta-band .zh-btn-white:hover { transform: translateY(-.2rem); box-shadow: 0 .6rem 1.8rem rgba(27, 38, 49, .24); }
.zh-cta-band .zh-btn-line { background: transparent; color: #fff; border: .1rem solid rgba(255, 255, 255, .8); }
.zh-cta-band .zh-btn-line:hover { background: rgba(255, 255, 255, .14); }

/* ===== 客户说 ===== */
.zh-testi-wall { margin: 0; padding: 0; list-style: none; position: relative; display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.zh-testi-card { position: relative; background: #fff; border-radius: 1rem; box-shadow: 0 0 1rem rgba(39, 51, 66, .1); padding: 3.2rem 2rem 2rem; }
.zh-testi-card::before { content: '\201C'; position: absolute; left: 1.6rem; top: .2rem; font-family: Georgia, serif; font-size: 5.6rem; line-height: 1; color: var(--zh-orange); }
.zh-testi-quote { font-size: 1.6rem; line-height: 2.6rem; color: var(--zh-body); }
.zh-testi-per { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.zh-testi-per img { width: 4.6rem; height: 4.6rem; border-radius: 50%; object-fit: cover; }
.zh-testi-ava { display: flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: linear-gradient(135deg, #0046C7, #0039A6); color: #fff; font-size: 1.8rem; font-weight: 700; flex-shrink: 0; }
.zh-testi-per strong { display: block; font-size: 1.6rem; color: var(--zh-ink); }
.zh-testi-per span { display: block; font-size: 1.4rem; color: var(--zh-mute); }

.zh-nav-cta .iconfont { margin-right: .6rem; font-size: 1.8rem; }

/* ===== 自定义光标 ===== */
.zh-cursor { position: fixed; left: 0; top: 0; z-index: 999; display: none; margin: 1.6rem 0 0 1.6rem; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.zh-cursor.on { display: flex; gap: .2rem; }
.zh-cursor.show { opacity: 1; }
.zh-cursor span { font-size: 1.2rem; color: var(--zh-blue); animation: zh-cursor-char 4s ease-in-out infinite; }
.zh-cursor span:nth-child(2) { animation-delay: .4s; }
.zh-cursor span:nth-child(3) { animation-delay: .8s; }
.zh-cursor span:nth-child(4) { animation-delay: 1.2s; }
@keyframes zh-cursor-char { 0%, 100% { transform: translateY(0); opacity: .55; color: var(--zh-blue); } 50% { transform: translateY(-.2rem); opacity: 1; color: var(--zh-orange); } }

/* ===== 右侧悬浮栏 + 移动吸底栏 ===== */
.zh-float { position: fixed; right: 1.6rem; bottom: 8rem; z-index: 110; /* 高于询盘弹窗(100):弹窗打开时侧栏不被遮罩盖掉、保持可见 */ display: none; flex-direction: column; gap: .2rem; width: 5.2rem; background: #fff; border-radius: .8rem; box-shadow: 0 .8rem 2.4rem rgba(27, 38, 49, .18); overflow: visible; }
.zh-float-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: 5.6rem; font-size: 1.2rem; color: var(--zh-ink); border-bottom: .1rem solid var(--zh-bg); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; transition: all .3s ease; }
.zh-float-item:last-child { border-bottom: 0; }
.zh-float-item:hover { background: var(--zh-blue); color: #fff; }
.zh-float-item .ico { font-size: 2rem; line-height: 1; }
.zh-float-item[data-zh-quote] .ico { transform-origin: 50% 0; animation: zhQuoteBeat 3.6s ease-in-out infinite; }
.zh-float-item[data-zh-quote]:hover .ico { animation: none; }
@keyframes zhQuoteBeat { 0%, 52%, 100% { transform: rotate(0); } 60% { transform: rotate(14deg); } 68% { transform: rotate(-11deg); } 76% { transform: rotate(7deg); } 84% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
.zh-float-qr { position: absolute; right: 6rem; top: 50%; transform: translateY(-50%) scale(.9); width: 15rem; padding: 1rem; background: #fff; border-radius: .8rem; box-shadow: 0 .8rem 2.4rem rgba(27, 38, 49, .2); opacity: 0; visibility: hidden; transition: all .3s ease; text-align: center; }
.zh-float-item:hover .zh-float-qr, .zh-float-item.qr-open .zh-float-qr { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.zh-float-qr img { border-radius: .4rem; }
.zh-float-qr p { margin-top: .6rem; font-size: 1.2rem; color: var(--zh-mute); }
.zh-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; background: #fff; box-shadow: 0 -.4rem 1.6rem rgba(27, 38, 49, .12); }
.zh-bottombar a, .zh-bottombar button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 5.4rem; padding: .6rem 0; background: none; border: 0; font-size: 1.2rem; color: var(--zh-ink); cursor: pointer; } /* min-width:auto 按内容最小宽擑开致 5 项超 100% 横滑,归 0 严格均分 */
.zh-bottombar .ico { font-size: 2rem; line-height: 1; }
.zh-bottombar .tel { color: var(--zh-blue); }
.zh-bottombar .quote { background: linear-gradient(135deg, #FE7610, #E56A0D); color: #fff; }
.zh-bottombar-qr { position: fixed; left: 50%; bottom: 7rem; transform: translateX(-50%); z-index: 75; width: 18rem; padding: 1.2rem; background: #fff; border-radius: .8rem; box-shadow: 0 .8rem 2.4rem rgba(27, 38, 49, .24); text-align: center; display: none; }
.zh-bottombar-qr.active { display: block; }
.zh-bottombar-qr p { margin-top: .6rem; font-size: 1.4rem; color: var(--zh-mute); }

/* ===== 询盘弹窗 ===== */
.zh-quote-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.zh-quote-modal.active { opacity: 1; visibility: visible; }
.zh-quote-overlay { position: absolute; inset: 0; background: rgba(27, 38, 49, .58); }
.zh-quote-dialog { position: relative; width: 100%; max-width: 56rem; max-height: 88vh; overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: .8rem; padding: 3.2rem 2.4rem; transform: translateY(2.4rem) scale(.96); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.zh-quote-modal.active .zh-quote-dialog { transform: translateY(0) scale(1); }
.zh-quote-dialog h3 { font-size: 2.2rem; color: var(--zh-ink); }
.zh-quote-dialog .sub { margin: .6rem 0 2rem; font-size: 1.4rem; color: var(--zh-mute); }
.zh-quote-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 4.4rem; height: 4.4rem; background: none; border: 0; font-size: 2.4rem; color: var(--zh-mute); cursor: pointer; }
.zh-quote-close:hover { color: var(--zh-orange); }

/* ===== 表单 ===== */
.zh-form-grid { display: grid; gap: 1.6rem; }
.zh-form-field label { display: block; margin-bottom: .6rem; font-size: 1.4rem; font-weight: 600; color: var(--zh-ink); }
.zh-form-field label i { color: var(--zh-orange); font-style: normal; margin-left: .2rem; }
.zh-form-field input, .zh-form-field select, .zh-form-field textarea { width: 100%; padding: 1rem 1.4rem; border: .1rem solid var(--zh-line); border-radius: .4rem; background: #fff; font-size: 1.4rem; transition: all .3s ease; }
.zh-form-field textarea { min-height: 10rem; resize: vertical; }
.zh-form-field input:focus, .zh-form-field select:focus, .zh-form-field textarea:focus { outline: 0; border-color: var(--zh-blue); box-shadow: 0 0 0 .3rem rgba(0, 70, 199, .12); }
.zh-chk-group { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
.zh-form-field .zh-chk { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 0; font-size: 1.4rem; font-weight: 400; color: var(--zh-body); cursor: pointer; }
.zh-form-field .zh-chk input { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; accent-color: var(--zh-blue); cursor: pointer; }
.zh-form-msg { display: none; margin-top: 1.6rem; padding: 1.2rem 1.6rem; border-radius: .4rem; font-size: 1.4rem; }
.zh-form-msg.ok { display: block; background: #e8f6ee; color: #1e7a46; }
.zh-form-msg.err { display: block; background: #fdecec; color: #c0392b; }
.zh-hp { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); overflow: hidden; } /* 不用 -9999px:擑大弹窗横向滚动区 */
.form-alert { grid-column: 1 / -1; padding: 1.2rem 1.6rem; border-radius: .4rem; font-size: 1.4rem; }
.form-alert-success { background: #e8f6ee; color: #1e7a46; }
.form-alert-error { background: #fdecec; color: #c0392b; }

/* ===== 页脚 ===== */
.zh-footer { background: var(--zh-ink-d); color: #9fb0c0; font-size: 1.4rem; }
.zh-footer-main { display: grid; gap: 3.2rem; padding: 4.8rem 0 3.2rem; }
.zh-footer h4 { margin-bottom: 1.8rem; font-size: 1.8rem; color: #fff; letter-spacing: .1rem; }
.zh-footer h4::before { content: ""; display: inline-block; width: .4rem; height: 1.4rem; margin-right: .8rem; border-radius: .2rem; background: linear-gradient(180deg, var(--zh-orange), var(--zh-orange-d)); vertical-align: -.2rem; }
.zh-footer-about p { margin-top: 1.2rem; line-height: 2; }
.zh-footer-logo { display: flex; align-items: center; gap: 1rem; color: #fff; font-size: 2rem; font-weight: 700; }
.zh-footer-logo img { max-height: 3.6rem; filter: brightness(0) invert(1); }
.zh-footer ul li { margin-bottom: 1rem; }
.zh-footer ul li a:hover { color: var(--zh-orange); padding-left: .4rem; }
.zh-footer-contact li { display: flex; gap: 1rem; margin-bottom: 1.2rem; line-height: 1.8; }
.zh-footer-contact li i { color: var(--zh-orange); font-size: 1.8rem; line-height: 1.4; }
.zh-footer-contact li b { color: #d5dfe9; font-weight: 600; white-space: nowrap; }
.zh-footer-contact li a:hover { color: var(--zh-orange); }
.zh-footer-cta { margin-top: 2rem; }
.zh-footer-bar { border-top: .1rem solid rgba(255, 255, 255, .08); padding: 1.8rem 0; }
.zh-footer-bar .zh-container { display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; font-size: 1.4rem; }
.zh-footer-bar a:hover { color: var(--zh-orange); }
.zh-footer-bar-left { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; }
.zh-footer-bar-right { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; justify-content: center; }
.zh-footer-links { display: flex; gap: 2.4rem; }
.zh-footer-links a { color: #9fb0c0; transition: color .3s ease; }
.zh-footer-social { display: flex; gap: 1.2rem; }
.zh-footer-social a { position: relative; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border: .1rem solid rgba(255, 255, 255, .24); border-radius: 50%; color: #fff; transition: all .3s ease; }
.zh-footer-social a:hover { background: var(--zh-orange); border-color: var(--zh-orange); color: #fff; }
.zh-footer-social svg { width: 1.8rem; height: 1.8rem; }
.zh-footer-social a.is-hidden { display: none; }
.zh-social-qr { position: absolute; bottom: calc(100% + 1.2rem); left: 50%; z-index: 30; width: 11rem; padding: .6rem; background: #fff; border-radius: .6rem; box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .6rem); transition: opacity .3s ease, transform .3s ease, visibility .3s ease; }
.zh-social-qr img { display: block; width: 100%; height: auto; border-radius: .3rem; }
.zh-social-qr i { display: block; margin-top: .4rem; font-style: normal; text-align: center; font-size: 1.2rem; color: var(--zh-ink); }
.zh-social-qr::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: .6rem solid transparent; border-top-color: #fff; }
.zh-footer-social a:hover .zh-social-qr { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 微信公众号按钮(无外链,hover 弹公众号二维码);与其他社交图标同款圆形 */
.zh-footer-social .zh-footer-wx { position: relative; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; padding: 0; border: .1rem solid rgba(255, 255, 255, .24); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: all .3s ease; }
.zh-footer-social .zh-footer-wx:hover { background: var(--zh-orange); border-color: var(--zh-orange); color: #fff; }
.zh-footer-social .zh-footer-wx > .iconfont { font-size: 1.8rem; line-height: 1; }
.zh-footer-social .zh-footer-wx:hover .zh-social-qr { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ===== WOW.js 基础(元素入场前隐藏) ===== */
.wow { visibility: hidden; }

/* ===== 文字拆分入场动画(ac57 风格:逐字上推揭示) ===== */
.zh-split { display: inline-block; overflow: hidden; vertical-align: bottom; }
.zh-split > span { display: inline-block; transform: translateY(110%); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.zh-split.is-ani > span { transform: translateY(0); }