/*
 * 湖南中育普德心理咨询有限公司 - 主样式表
 * 主色调: #1C4199
 * 响应式设计支持
 */
:root { --primary-color: #1C4199; --primary-light: #2d5bb8; --primary-dark: #14307a; --color-accent: #4a8cff; --color-accent-light: #7cb0ff; --primary-50: rgba(28, 65, 153, 0.04); --primary-100: rgba(28, 65, 153, 0.08); --primary-200: rgba(28, 65, 153, 0.15); --primary-300: rgba(28, 65, 153, 0.25); --secondary-color: #f5f7fa; --text-color: #1a1a2e; --text-secondary: #3a3a5c; --text-light: #555; --text-muted: #999; --border-color: #e5e7eb; --white: #fff; --gray-bg: #f3f4f8; --footer-bg: #1a1f3a; --footer-text: #b8bdd4; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 32px rgba(28, 65, 153, 0.10); --shadow-xl: 0 16px 48px rgba(28, 65, 153, 0.15); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(28, 65, 153, 0.06); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(28, 65, 153, 0.14); --gradient-primary: linear-gradient(135deg, #1C4199 0%, #2d5bb8 100%); --gradient-hero: linear-gradient(135deg, rgba(28, 65, 153, 0.95) 0%, rgba(20, 48, 122, 0.85) 100%); --gradient-soft: linear-gradient(180deg, #f8fafc 0%, #eef1f8 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%); --gradient-accent: linear-gradient(120deg, #1C4199, #3d7be8, #1C4199); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { font-family: 'Bahnschrift', -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; font-size: 14px; line-height: 1.5; word-wrap: normal; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth }
body { font-size: 14px; color: var(--text-color); background-color: var(--white); background: #f5f7fc; overflow-x: hidden; min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea, select, optgroup, option, hr, :after, :before { margin: 0; padding: 0; box-sizing: border-box; border: 0; font: inherit; font-size: 100%; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block }
ol, ul, li { list-style: none }
blockquote, q { quotes: none }
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0; width: 100% }
th, td { text-align: left; vertical-align: top }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3 }
a { text-decoration: none; color: var(--text-color); -webkit-tap-highlight-color: transparent; transition: color var(--transition-base) }
a:hover { color: var(--primary-color) }
img { border: none; display: inline-block; max-width: 100%; height: auto; vertical-align: middle; -ms-interpolation-mode: bicubic }
svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100% }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0 }
button { cursor: pointer; overflow: visible; -webkit-tap-highlight-color: transparent }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0 }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
input[type="search"] { -webkit-appearance: none; -moz-box-sizing: content-box; box-sizing: content-box }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }
textarea { overflow: auto; resize: vertical; vertical-align: top }
[hidden], template { display: none }
hr { display: block; height: 1px; border: 0; border-top: 1px solid var(--border-color); margin: 1em 0; padding: 0 }
::selection { background: var(--primary-200); color: var(--primary-dark); text-shadow: none }
::-moz-selection { background: var(--primary-200); color: var(--primary-dark); text-shadow: none }
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px }
.swiper-slide { user-select: none }
.auto { margin-left: auto; margin-right: auto }
.l { float: left }
.r { float: right }
.tc { text-align: center }
.ti2 { text-indent: 2em }
.db { display: block }
.dn { display: none }
.dib { display: inline-block }
.ovh { overflow: hidden }
.rel { position: relative }
.abs { position: absolute }
.fix:after { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden }
.img-responsive { max-width: 100%; height: auto; display: block }
.ellipsis { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap }
.ellipsis1 { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; display: inline-block; white-space: nowrap }
.m0 { margin: 0px }
.m1 { margin: 1px }
.ml1 { margin-left: 1px }
.mt1 { margin-top: 1px }
.mr1 { margin-right: 1px }
.mb1 { margin-bottom: 1px }
.m2 { margin: 2px }
.ml2 { margin-left: 2px }
.mt2 { margin-top: 2px }
.mr2 { margin-right: 2px }
.mb2 { margin-bottom: 2px }
.m5 { margin: 5px }
.ml5 { margin-left: 5px }
.mt5 { margin-top: 5px }
.mr5 { margin-right: 5px }
.mb5 { margin-bottom: 5px }
.m10 { margin: 10px }
.ml10 { margin-left: 10px }
.mt10 { margin-top: 10px }
.mr10 { margin-right: 10px }
.mb10 { margin-bottom: 10px }
.m15 { margin: 15px }
.ml15 { margin-left: 15px }
.mt15 { margin-top: 15px }
.mr15 { margin-right: 15px }
.mb15 { margin-bottom: 15px }
.m20 { margin: 20px }
.ml20 { margin-left: 20px }
.mt20 { margin-top: 20px }
.mr20 { margin-right: 20px }
.mb20 { margin-bottom: 20px }
.mr25 { margin-right: 25px }
.mt30 { margin-top: 30px }
.mb25 { margin-bottom: 25px }
.p0 { padding: 0px }
.p1 { padding: 1px }
.pl1 { padding-left: 1px }
.pt1 { padding-top: 1px }
.pr1 { padding-right: 1px }
.pb1 { padding-bottom: 1px }
.p2 { padding: 2px }
.pl2 { padding-left: 2px }
.pt2 { padding-top: 2px }
.pr2 { padding-right: 2px }
.pb2 { padding-bottom: 2px }
.p5 { padding: 5px }
.pl5 { padding-left: 5px }
.pt5 { padding-top: 5px }
.pr5 { padding-right: 5px }
.pb5 { padding-bottom: 5px }
.p10 { padding: 10px }
.pl10 { padding-left: 10px }
.pt10 { padding-top: 10px }
.pr10 { padding-right: 10px }
.pb10 { padding-bottom: 10px }
.p15 { padding: 15px }
.pl15 { padding-left: 15px }
.pt15 { padding-top: 15px }
.pr15 { padding-right: 15px }
.pb15 { padding-bottom: 15px }
.p20 { padding: 20px }
.pl20 { padding-left: 20px }
.pt20 { padding-top: 20px }
.pr20 { padding-right: 20px }
.pb20 { padding-bottom: 20px }
.heigh100 { height: 100% }
.flex-row { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row }
.inline-flex { display: inline-flex }
.flex-column { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap }
.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center }
.flex-reverse { flex-direction: row-reverse }
.align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start }
.align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end }
.space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.space-around { -ms-flex-pack: distribute; justify-content: space-around }
.flex-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }
.just-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }
.flex1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }
.just-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.no { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
.abs-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10 }
.col-333 { color: #333 }
.col-666 { color: #666 }
.col-999 { color: #999 }
.col-fff { color: #fff }
.bgfff { background-color: #fff }
.theme { color: var(--primary-color) }
.fs12 { font-size: 12px }
.fs14 { font-size: 14px }
.fs16 { font-size: 16px }
.webkit { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1 }
.line2 { -webkit-line-clamp: 2 }
.line3 { -webkit-line-clamp: 3 }
.line5 { -webkit-line-clamp: 5 }
.responsive { overflow-y: auto }
.responsive::-webkit-scrollbar { width: 6px }
.responsive::-webkit-scrollbar-thumb { background-color: var(--primary-color) }
.banner { position: relative; overflow: hidden }
.banner-i { width: 100%; display: block }
.mobile-img { display: none }
.menu { display: none; margin-left: 10px }
.hide-pc { display: none }
.menu i { display: block; width: 24px; height: 2px; background-color: var(--primary-color); margin-top: 6px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s }
.menu i:first-child { margin-top: 0 }
.menu.rotate i:nth-of-type(1) { -webkit-transform: rotate(42.5deg); -ms-transform: rotate(42.5deg); transform: rotate(42.5deg) }
.menu.rotate i:nth-of-type(2) { opacity: 0 }
.menu.rotate i:nth-of-type(3) { -webkit-transform: rotate(-42.5deg); -ms-transform: rotate(-42.5deg); transform: rotate(-42.5deg) }
.head {background-color: transparent; color: #fff; transition: all var(--transition-base) }
.head-fixed { position: fixed; width: 100%; top: 0; left: 0; z-index: 999 }
.head-fixed.head-transparent .head { background-color: transparent; color: #fff }
.head-fixed.head-transparent .nav-ul > li .drop-tab a { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) }
.head-fixed.head-transparent .search_box { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.head-fixed.head-transparent .search_btn { background: rgba(255, 255, 255, 0.2) }
.head-fixed.head-transparent .search_val { color: #fff }
.head-fixed.head-transparent .search_val::placeholder { color: rgba(255, 255, 255, 0.7) }
.head-fixed.is-scrolled .head { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); color: var(--text-color); box-shadow: 0 1px 0 rgba(28, 65, 153, 0.06), 0 4px 24px rgba(0, 0, 0, 0.08); }
.head-fixed.is-scrolled .nav-ul > li .drop-tab a { color: var(--text-color); text-shadow: none }
.head-fixed.is-scrolled .search_box { background-color: #fff; border-color: var(--border-color); backdrop-filter: none }
.head-fixed.is-scrolled .search_val { color: var(--text-color) }
.head-fixed.is-scrolled .search_val::placeholder { color: var(--text-muted) }
.head-fixed.is-scrolled .search_btn { background: var(--gradient-primary) }
.head-fixed.is-scrolled .head-phone { color: var(--text-color) }
.head-fixed.head-inner .head-phone { color: var(--text-color) }
.head-fixed.head-inner .head { background-color: #fff; color: var(--text-color); box-shadow: 0 1px 0 rgba(28, 65, 153, 0.06); padding: 14px 0 }
.head-fixed.head-inner .nav-ul > li .drop-tab a { color: var(--text-color); text-shadow: none }
.head-fixed.head-inner .search_box { background-color: #fff; border-color: var(--border-color); backdrop-filter: none }
.head-fixed.head-inner .search_val { color: var(--text-color) }
.head-fixed.head-inner .search_val::placeholder { color: var(--text-muted) }
.head-fixed.head-inner .search_btn { background: var(--gradient-primary) }
.head-fixed.head-inner .search_btn img { filter: brightness(0) invert(1) }
.logo-img-dark { display: block }
.logo-img-light { display: none }
.head-fixed.head-transparent .logo-img-dark { display: none }
.head-fixed.head-transparent .logo-img-light { display: block }
.head-fixed.is-scrolled .logo-img-dark, .head-fixed.head-inner .logo-img-dark { display: block }
.head-fixed.is-scrolled .logo-img-light, .head-fixed.head-inner .logo-img-light { display: none }
.nav-close { display: none }
.head-left .logo-img { max-height: 44px; width: auto }
.nav-ul { gap: 0 }
.nav-ul > li { font-size: 16px; font-weight: 500; position: relative;height:72px;display:flex;align-items:center;}
.nav-ul > li + li { margin-left: 1.5vw }
.nav-ul > li .drop-tab a { color: #fff; transition: color var(--transition-base); display: inline-block; font-size: 16px; font-weight: 500 }
.nav-ul > li::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 0; height: 2px; background: #fff; border-radius: var(--radius-full); transition: width var(--transition-base), left var(--transition-base), background var(--transition-base) }
.nav-ul > li.on::after, .nav-ul > li:hover::after { width: 100%; left: 0 }
.nav-ul > li.on .drop-tab a, .nav-ul > li:hover .drop-tab a { color: #fff }
.head-fixed.is-scrolled .nav-ul > li::after, .head-fixed.head-inner .nav-ul > li::after { background: var(--gradient-primary) }
.head-fixed.is-scrolled .nav-ul > li.on .drop-tab a, .head-fixed.is-scrolled .nav-ul > li:hover .drop-tab a, .head-fixed.head-inner .nav-ul > li.on .drop-tab a, .head-fixed.head-inner .nav-ul > li:hover .drop-tab a { color: var(--primary-color) }
.nav-ul > li.has-sub { position: relative }
.nav-ul > li.has-sub > .drop-tab::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 6px; vertical-align: middle; transition: transform var(--transition-base) }
.nav-ul > li.has-sub:hover > .drop-tab::after { transform: rotate(180deg) }
.nav-ul > li .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 200px; background: #fff; border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transition: all var(--transition-base); padding: 8px 0; z-index: 1000; border-top: 3px solid var(--primary-color) }
.nav-ul > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) }
.nav-ul > li .sub-menu::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff }
.nav-ul > li .sub-menu li { padding: 0; margin: 0; line-height: 1.6 }
.nav-ul > li .sub-menu li a { display: block; padding: 10px 24px; font-size: 14px; color: var(--text-color); white-space: nowrap; transition: all var(--transition-fast); font-weight: 400; border-bottom: 1px solid var(--primary-50) }
.nav-ul > li .sub-menu li:last-child a { border-bottom: none }
.nav-ul > li .sub-menu li a:hover { color:#fff; background-color:var(--primary-color); padding-left: 28px }
.search_box { padding: 6px 12px 6px 18px; border: 1px solid rgba(255, 255, 255, 0.4); width: 300px; height: 38px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all var(--transition-base) }
.search_box:focus-within { border-color: #fff; background-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) }
.search_val { font-size: 14px; color: #fff; width: 100%; flex: 1; background: transparent; border: none; outline: none }
.search_val::placeholder { color: rgba(255, 255, 255, 0.7) }
.search_btn { width: 28px; height: 28px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); color: #fff; transition: all var(--transition-base); flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: 1 }
.search_btn:hover { background: rgba(255, 255, 255, 0.35) }
.search_btn img, .search_btn svg { width: 16px; height: 16px; flex-shrink: 0 }
.center-box { max-width: 1400px; margin-left: auto; margin-right: auto }
.banner-word { position: absolute; top: 50%; transform: translate(0, -50%); width: 100%; z-index: 2 }
.banner-tit { font-size: 64px; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) }
.swiper-banner .swiper-banner-pagination { bottom: 2.34vw }
.swiper-banner-pagination .swiper-pagination-bullet { background-color: #fff; color: #fff; font-weight: 600; font-family: Arial, Helvetica, sans-serif; margin: 0; width: 7.81vw; height: 3px; opacity: 0.3; border-radius: var(--radius-full); transition: all var(--transition-base) }
.swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; height: 4px; background: var(--gradient-accent) }
.company-ltit { font-size: 44px; font-weight: 700; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; position: relative; padding-bottom: 20px }
.company-ltit::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: var(--gradient-primary); border-radius: var(--radius-full) }
.company-ldesc { font-size: 18px; color: var(--text-light); line-height: 2em }
.company-left { width: 52% }
.company-right { width: 48%; text-align: center }
.company-box { padding: 44px 0; background:#fff; overflow: hidden }
.company-ndesc { font-size: 22px; color:#000;}
.read-more-btn { display: inline-flex; width: 160px; height: 54px; border: none; background: var(--gradient-primary); color: #fff !important; border-radius: var(--radius-full); justify-content: center; align-items: center; font-size: 18px; font-weight: 500; transition: all var(--transition-base); box-shadow: 0 4px 16px rgba(28, 65, 153, 0.3); position: relative; overflow: hidden }
.read-more-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s ease }
.read-more-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 65, 153, 0.4) }
.read-more-btn:hover::before { left: 100% }
.read-more-box { margin-top: 40px }
.read-more { font-size: 16px; color: var(--text-muted) }
.products-box { padding: 53px 0; background: var(--gradient-soft) }
.product-ul > li { width: 23.07%; margin-left: 2.56%; margin-top: 30px }
.product-ul > li:nth-of-type(4n+1) { margin-left: 0 }
.product-ul > li > a { display: block; background: #fff; border-radius: var(--radius-lg); padding: 20px; transition: all var(--transition-base); box-shadow: var(--shadow-card); position: relative; overflow: hidden }
.product-ul > li > a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: transform var(--transition-base); transform-origin: left }
.product-ul > li:hover > a { box-shadow: var(--shadow-card-hover); transform: translateY(-6px) }
.product-ul > li:hover > a::before { transform: scaleX(1) }
.product-top {display: flex; align-items: center; justify-content: center; background-color: var(--primary-50); border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 20px }
.product-top .pro-img {height:200px;width:100%; object-fit: contain; transition: transform var(--transition-slow) }
.product-ul > li:hover .product-top .pro-img { transform: scale(1.05) }
.product-ul > li:hover .product-top { background-color: var(--primary-100) }
.product-bott { padding-top: 0 }
.pro-tit { font-size: 18px; font-weight: 600; transition: color var(--transition-base); margin-bottom: 10px; color: var(--text-color) }
.pro-desc { font-size: 14px; color: var(--text-light); margin: 0; line-height: 1.8em; min-height: 72px }
.hover-tit a:hover [class*=tit] { color: var(--primary-color) }
.arrow-img { position: absolute; right: 20px; bottom: 20px; opacity: 0; visibility: hidden; transition: all var(--transition-base); width: 36px; height: 36px }
.product-ul > li:hover .arrow-img { opacity: 1; visibility: visible }
.details-btn { font-size: 14px !important; text-decoration: none; color: var(--primary-color); font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; padding: 10px 20px; background: var(--primary-50); border-radius: 24px; position: relative; overflow: hidden }
.details-btn:hover { text-shadow: 0 2px 8px var(--primary-200); gap: 10px }
.grid-box { display: grid; -ms-grid-columns: 30% 29.61% 7.69% 29.61%; grid-template-columns: 30% 29.61% 7.69% 29.61%; gap: 1.04vw; -ms-grid-rows: auto auto; grid-template-rows: auto auto; margin-top: 40px }
.grid-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-card); transition: all var(--transition-base) }
.grid-item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px) }
.grid-item:nth-of-type(1) { grid-row-start: span 2; -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-row-span: 2 }
.grid-item:nth-of-type(2) { grid-column-start: span 2; -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 2 }
.grid-item:nth-of-type(3) { -ms-grid-row: 1; -ms-grid-column: 4 }
.grid-item:nth-of-type(4) { -ms-grid-row: 2; -ms-grid-column: 2 }
.grid-item:nth-of-type(5) { grid-column-start: span 2; -ms-grid-row: 2; -ms-grid-column: 3; -ms-grid-column-span: 2 }
.g-mask { position: absolute; bottom: 0; width: 100%; color: #fff; height: 100%; transition: background 0.5s ease; background: linear-gradient(to top, rgba(20, 48, 122, 0.85) 0%, rgba(20, 48, 122, 0.2) 50%, transparent 100%) }
.grid-item .g-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) }
.grid-item:hover .g-img { transform: scale(1.05) }
.storage-box { padding: 46px 0 53px; background: #fff }
.g-mask-inner { width: 100%; position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 20px 30px; text-align: center; transition: justify-content 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) }
.g-text { font-size: 18px; font-weight: 600; text-align: center; margin-top: 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, opacity 0.45s ease 0.05s }
.gm-icon { width: 40px; height: 40px; margin: 0 auto 10px; position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5) translateY(20px); transition: opacity 0.5s ease 0.1s, transform 0.55s cubic-bezier(0.17, 0.84, 0.44, 1) 0.1s }
.gm-icon::before { content: ""; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; position: absolute; top: 4px; left: 4px }
.gm-icon::after { content: ""; width: 10px; height: 2px; background: #fff; position: absolute; right: 2px; bottom: 6px; transform: rotate(45deg); transform-origin: right center; border-radius: 2px }
.g-desc { font-size: 14px; padding: 0 20px; line-height: 1.6; margin-top: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.2s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s }
.grid-item:hover .g-mask { background: linear-gradient(to top, rgba(20, 48, 122, 0.92) 0%, rgba(28, 65, 153, 0.5) 40%, transparent 70%) }
.grid-item:hover .g-mask-inner { justify-content: center; padding-bottom: 20px }
.grid-item:hover .gm-icon { opacity: 1; transform: scale(1) translateY(0) }
.grid-item:hover .g-text { transform: translateY(0); opacity: 1 }
.grid-item:hover .g-desc { opacity: 1; transform: translateY(0) }
.gm-img { display: block; margin-left: auto; margin-right: auto; height: 2.60vw }
.head-phone { font-size: 16px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 8px }
.head-phone::before { content: "☎"; font-size: 18px }
.news-bleft { width: 49.23% }
.news-bright { width: 48.46%; background: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-card) }
.swiper-news .swiper-news-pagination { width: auto; right: 30px; left: unset; bottom: 30px }
.swiper-news-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: #fff }
.news_mask { background: linear-gradient(to bottom, transparent, rgba(20, 48, 122, 0.85)); color: #fff; font-size: 30px; position: absolute; bottom: 0; left: 0; width: 100%; border-radius: var(--radius-lg); overflow: hidden; padding: 20px 46px 20px 25px }
.swiper-news a { display: block; position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--transition-base) }
.swiper-news a:hover { box-shadow: var(--shadow-card-hover) }
.swiper-news .swiper-slide { display: flex }
.news-box { padding: 53px 0; background: var(--gradient-soft) }
.news-bleft::before { content: ""; width: 56.25%; background-color: var(--primary-50); border-radius: var(--radius-lg); position: absolute; height: 108%; top: 0; transform: translate(-4.16vw, calc(-61.5px - 4.16vw)); z-index: -1 }
.block { display: block; width: 100% }
.news-inner { margin-top: 40px; gap: 3% }
.news_rul > li { padding: 16px 0; border-bottom: 1px solid var(--border-color); transition: all var(--transition-base) }
.news_rul > li:hover { padding-left: 10px; background: var(--primary-50); border-radius: var(--radius-sm) }
.news_rul > li:first-child { padding-top: 0 }
.news_rtit { font-size: 16px; font-weight: 500; transition: color var(--transition-base); line-height: 1.6; color: var(--text-color) }
.news_rul > li:hover .news_rtit { color: var(--primary-color) }
.news_rinfo { font-size: 13px }
.news_rtime { color: var(--text-muted); font-size: 13px }
.news .details-btn { font-size: 13px }
.footer-bleft { max-width: 440px; color: var(--footer-text) }
.footer-bleft a { color: var(--footer-text); transition: color var(--transition-base) }
.footer-bleft a:hover { color: #fff }
.banner-desc { font-size: 34px; line-height: 1.42em; max-width: 600px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) }
.footer-bright ._zd-btn { display: inline-block; text-align: center; line-height: 40px; font-size: 22px }
.footer-bott { padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.4); padding-top: 25px; margin-top: 30px; font-size: 13px }
.footer-top { padding: 40px 0 30px }
.footer-mtop { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #fff }
.footer-link { display: block; color: var(--footer-text); margin-top: 10px; transition: color var(--transition-base) }
.footer-link:hover { color: #fff }
.logo-img { max-width: 192px }
.nav-position { padding: 20px 0 !important; color: var(--text-muted); background: linear-gradient(180deg, #fff 0%, rgba(245, 247, 252, 0.9) 100%) !important; border-bottom: 1px solid rgba(28, 65, 153, 0.08); font-size: 14px }
.nav-position a { color: var(--primary-color); transition: color 0.3s; font-weight: 500 }
.nav-position a:hover { color: var(--primary-color); text-decoration: underline }
.banner-list-word { position: absolute; top: 50%; transform: translate(0, -50%); width: 100% }
.banner-list-tit { font-size: 44px; font-weight: 700; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) }
.banner-list-desc { font-size: 24px; max-width: 485px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2) }
.nav-menu { padding: 18px 0 !important; background: rgba(255, 255, 255, 0.85) !important; position: sticky; top:72px !important; z-index: 50; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(28, 65, 153, 0.06) !important; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.05); transition: all 0.3s }
.nav-menu .center-box { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scrollbar-color: transparent transparent }
.nav-menu .center-box::-webkit-scrollbar { display: none }
.nav-menu-ul { display: flex; justify-content: center; flex-wrap: nowrap; gap: 10px; list-style: none; padding: 4px 0; margin: 0 auto; width: max-content; min-width: 100% }
.nav-menu-ul > li { margin: 0 !important; flex-shrink: 0 }
.nav-menu-ul > li a { height: 42px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; color: var(--text-color); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; white-space: nowrap }
.nav-menu-ul > li a > span, .nav-menu-ul > li a { position: relative; z-index: 1 }
.nav-menu-ul > li a:hover { color: var(--primary-color); border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(28, 65, 153, 0.15) }
.nav-menu-ul > li.on a { background: var(--gradient-primary); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(28, 65, 153, 0.35), 0 2px 8px rgba(28, 65, 153, 0.2) }
.nav-menu-ul > li.on a:hover { transform: none }
._news_left { max-width: none !important; flex: 1; padding: 32px 32px 36px !important; display: flex; flex-direction: column; justify-content: center; order: 2; width: 100% !important; position: relative; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important; gap: 0; min-width: 0 !important; box-sizing: border-box }
._news_right { max-width: none !important; min-width: 0 !important; position: relative; overflow: hidden; width: 100% !important; aspect-ratio: 16/10; order: 1; background: linear-gradient(135deg, #eef3ff 0%, #e4ecff 100%); height: auto !important; flex: none !important; display: block !important; margin: 0 !important; border-radius: 0 }
._news_ul > li { padding: 0 !important; margin-bottom: 28px; border-radius: 0 !important; overflow: hidden !important; background: transparent !important; box-shadow: 0 2px 12px rgba(15, 26, 58, 0.04),
    0 16px 44px rgba(15, 26, 58, 0.06) !important; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important; margin: 0 !important; position: relative; display: flex !important; flex-direction: column !important; border: 1px solid rgba(28, 65, 153, 0.05) }
._news_ul > li:nth-of-type(2n+1) { background-color: transparent !important }
._news_ul > li:nth-of-type(2n) a { flex-direction: column !important }
._news_time { font-size: 13px !important; color: var(--primary-color); font-weight: 600; letter-spacing: 1px; margin-bottom: 16px !important; display: inline-flex; align-items: center; gap: 8px; background: var(--primary-50); padding: 4px 14px; border-radius: 20px; width: fit-content }
._news_tit { font-size: 20px !important; font-weight: 700; transition: color 0.3s; color: var(--text-color); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; position: relative; padding-bottom: 0 !important }
._news_ul > li:hover ._news_tit { color: var(--primary-color) }
._news_desc { font-size: 14px !important; color: var(--text-light); line-height: 2; margin: 0 0 24px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1 }
.details-tit { font-size: 34px !important; font-weight: 700; color: var(--text-color); line-height: 1.4; margin-bottom: 28px !important; position: relative; padding-left: 20px }
.details_show { font-size: 16px !important; line-height: 1.9; padding: 40px 48px 50px !important; background: #fff; color: var(--text-color); box-shadow: 0 4px 24px rgba(15, 26, 58, 0.06) }
.details-info { color: var(--text-muted); display: flex; align-items: center; gap: 16px; font-size: 14px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, 0.06); flex-wrap: wrap }
.details_group { padding: 50px 48px 40px !important; border-bottom: 1px solid var(--border-color); background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.06) }
.pre-next-box { padding: 48px 42px !important; border-top: 1px solid rgba(28, 65, 153, 0.06); background: linear-gradient(180deg, #fafbff 0%, #fff 100%); border-radius: 0 !important; box-shadow: none !important; display: flex; justify-content: space-between }
.pre-next { margin-right: 40px; color: var(--text-light); transition: color var(--transition-base); margin: 0 !important }
.pre-next a { color: var(--text-color) !important; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 24px; background: #f7f9fc; font-weight: 500 }
.pre-next a:hover { color: #fff !important; background: var(--gradient-primary); transform: translateY(-2px) }
.product_dr_tleft { width: 100% !important; min-width: 0 !important }
#swiper-main { aspect-ratio: 1 / 1; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(15, 26, 58, 0.12) }
#swiper-main .swiper-slide { display: flex; align-items: center; justify-content: center }
.swiper-main-next::after, .swiper-main-prev::after { font-size: 24px; font-weight: 600; color: var(--primary-color) }
.product_dr_tright { padding-left: 0 !important; flex: 1; display: flex; flex-direction: column; gap: 20px }
.product_dr_tr_tit { font-size: 36px !important; font-weight: 700; color: var(--text-color); line-height: 1.3; margin-bottom: 8px !important; position: relative; padding-bottom: 28px !important }
.product_dr_tr_desc { font-size: 16px !important; color: var(--text-light); line-height: 2; margin-top: 16px; margin-bottom: 32px !important }
.product_dr_show { font-size: 18px; line-height: 1.8em; margin-top: 40px }
.consult-btn { display: inline-flex; width: auto !important; height: 50px !important; background: var(--gradient-primary); border-radius: 25px !important; color: #fff; font-size: 16px !important; align-items: center; justify-content: center; margin-top: 30px !important; transition: all var(--transition-base); box-shadow: 0 4px 16px rgba(28, 65, 153, 0.3); min-width: 200px; padding: 0 30px; font-weight: 600; letter-spacing: 2px }
.consult-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 65, 153, 0.4) }
.consult-btn .iconfont { font-size: 28px }
.pro-dbott { padding-top: 53px; background: #fff; border-radius: 0 !important; margin-top: 0 !important; padding: 37px !important; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.04),
    0 32px 72px rgba(15, 26, 58, 0.08) !important; position: relative; overflow: hidden; animation-delay: 0.2s }
.product_dr_btit { font-size: 22px !important; font-weight: 700; position: relative; padding-bottom: 15px; display: none }
.product_dr_btit::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--gradient-primary); border-radius: var(--radius-full) }
.rel-span::before { content: ""; display: block; width: 100%; height: 6px; background-color: #dedede; border-radius: 4px; position: absolute; bottom: 5px }
.rel-span { position: relative; display: inline-block }
.normal-table, .product_db_show table { width: 100% !important; border-collapse: collapse; font-size: 18px; table-layout: fixed; word-break: break-word }
.product_db_show table { border-top: 3px solid #959595 }
.product_db_show table td, .product_db_show table th { border-left: 1px solid #959595 }
.product_db_show table td:nth-of-type(1), .product_db_show table th:nth-of-type(1) { border-left: none }
.product_table th, .product_table td, .product_db_show table td, .product_db_show table th { padding: 15px 2.60vw; text-align: left; font-weight: 400 }
.product_table tr:nth-of-type(2n+1), .product_db_show table tr:nth-of-type(2n+1) { background-color: #f4f4f4 }
.product_db_show { padding: 40px 0 40px; font-size: 16px !important; line-height: 2 !important; margin-top: 20px; color: var(--text-color) }
.product_db_desc { font-size: 18px; line-height: 1.6em; color: #666; padding-bottom: 40px }
.swiper-main-box { width: calc(100% - 105px) }
.por-details-right { width: 56.54% }
.swiper-thumbs-box { width: 95px; height: 460px; padding: 25px 0; margin-right: 10px }
#swiper-thumbs { height: 100% }
#swiper-thumbs .swiper-slide { border: 1px solid #eee; display: flex; align-items: center; justify-content: center }
.swiper-main-next, .swiper-main-prev { width: auto; height: auto; margin: 0 }
#swiper-thumbs .swiper-slide.swiper-slide-thumb-active { border-color: var(--primary-color) }
.contact-bleft { width: 43.84% }
.contact-bright { width: 48.46% }
.contact-otit { font-size: 28px !important; font-weight: 700; color: var(--text-color); margin-bottom: 8px }
.contact-tit { font-size: 16px; color: var(--text-light) }
.contact-desc { font-size: 15px !important; margin-top: 5px; color: var(--text-muted); margin-bottom: 30px }
.contact-ul > li { margin-top: 30px }
.contact-box { padding-bottom: 48px; background: #f7f9fc; padding: 40px 0 48px !important }
.map-box { width: 100%; margin-top: 40px; overflow: hidden; box-shadow: var(--shadow-card) }
.map-iframe { width: 100%; height: 100% }
.el-cont-dl .cont-val { padding: 14px 18px; border-bottom: 1px solid var(--border-color); width: 100%; border: 1px solid var(--border-color); border-radius: 10px; background: #f7f9fc; transition: all 0.3s; font-size: 15px }
.el-cont-dl > dt { font-size: 14px !important; font-weight: 600; color: var(--text-color); margin-bottom: 8px }
.el-cont-dl { margin-top: 0 !important; margin-bottom: 20px }
.cont-text { height: 160px !important; border: 1px solid var(--border-color); border-radius: 0 !important; margin-top: 15px; resize: none; transition: all var(--transition-base); padding: 14px 18px; background: #f7f9fc; font-size: 15px }
.cont-text:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(28, 65, 153, 0.1); background: #fff }
.el-cont-btn { width: 100% !important; height: 52px; background: var(--gradient-primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px !important; border-radius: 0 !important; transition: all var(--transition-base); box-shadow: 0 4px 16px rgba(28, 65, 153, 0.3); max-width: 220px; font-weight: 600; letter-spacing: 2px }
.el-cont-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 65, 153, 0.4) }
.tr { text-align: right }
.pages { text-align: center; padding: 40px 0 0 !important; display: flex; justify-content: center; align-items: center; gap: 8px }
.pages li { display: inline-block; font-size: 14px; margin-right: 0.5%; border: 1px solid #dcdcdc; color: #666666; border-radius: 4px; font-family: Arial, Helvetica, sans-serif }
.pages li .iconfont::before { font-size: 14px }
.pages li a { padding: 6px 12px 5px; display: inline-block; color: #666666 }
.pages li span { padding: 6px 12px 5px; display: inline-block }
.pages li.thisclass { background: var(--primary-color); border-color: var(--primary-color) }
.pages li.thisclass a { color: #fff }
.pages li.noborder { border: none; background-color: transparent; padding: 0 }
.pages li .turn-input { color: #666666; padding: 8px 12px 7px; background-color: #fff; width: 48px }
.pages1 li { background-color: #fff }
.pages1 li span { background-color: var(--primary-color); color: #fff }
.pages1 li.noborder { background: transparent }
.normal-place ::-webkit-input-placeholder { font-size: 14px; color: #999999; font-family: 'Bahnschrift', -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif }
.normal-place :-moz-placeholder { font-size: 14px; color: #999999 }
.normal-place ::-moz-placeholder { font-size: 14px; color: #999999 }
.normal-place :-ms-input-placeholder { font-size: 14px; color: #999999 }
img[class*=avatar] { border-radius: 50% }
.hover-a a:hover { color: var(--primary-color) }
.bold { font-weight: 600 }
.tl { text-align: left }
[class*=btn] { cursor: pointer }
.upload-file { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0; top: 0; cursor: pointer }
@-webkit-keyframes circleMove { from { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg) } to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg) } }
@keyframes circleMove { from { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg) } to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg) } }
.lg_sfdh { animation: play_btn 0.5s infinite alternate }
@keyframes play_btn { 0% { transform: scale(1.0) } 100% { transform: scale(1.1) } }
@keyframes hideIndex { 0% { opacity: 0; padding-top: 18px } 100% { opacity: 1; padding-top: 5px } }
@keyframes hideIndex1 { 0% { opacity: 0 } 100% { opacity: 1 } }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, background-color 99999s ease-out }
.logo-img-dark, .logo-img-light { transition: opacity var(--transition-base) }
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) }
.fade-in-up.visible { opacity: 1; transform: translateY(0) }
.fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) }
.fade-in-left.visible { opacity: 1; transform: translateX(0) }
.fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) }
.fade-in-right.visible { opacity: 1; transform: translateX(0) }
.normal-tit-group { position: relative }
.normal-tit-group .company-ltit { position: relative; padding-bottom: 16px }
.normal-tit-group .company-ltit::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 3px; background: var(--gradient-primary); border-radius: var(--radius-full) }
.footer { background: #0f1a3a !important; color: rgba(255, 255, 255, 0.7); border-top: none }
.footer .footer-top { padding: 40px 0 40px }
.footer .footer-tleft { width: 28%; max-width: 380px }
.footer .footer-tleft .txt p{margin-top:12px;}
.footer .footer-tmid { width: 52% }
.footer .footer-tright { width: 20% }
.footer .logo-img { max-width: 220px; margin-bottom: 15px }
.footer .footer-bleft, .footer .footer-bleft a { color: rgba(255, 255, 255, 0.6) }
.footer .footer-bleft a:hover { color: #fff }
.footer .footer-mtop { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 18px; position: relative; padding-bottom: 12px }
.footer .footer-mtop::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--gradient-primary); border-radius: var(--radius-full) }
.footer .footer-link { color: rgba(255, 255, 255, 0.55); font-size: 14px; padding: 4px 0; display: block; transition: all var(--transition-fast) }
.footer .footer-link:hover { color: #fff; padding-left: 4px }
.footer .footer-links { display: flex; flex-direction: column; gap: 6px }
.footer .footer-mul > li { margin: 0 20px }
.footer .footer-bott { border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); font-size: 13px; padding: 24px 0 }
.footer .footer-bott a { color: rgba(255, 255, 255, 0.45); transition: color var(--transition-fast) }
.footer .footer-bott a:hover { color: rgba(255, 255, 255, 0.8) }
.footer .contact-phone { font-size: 18px; color: #fff;margin-bottom: 12px;display: block; font-weight: 600; transition: color var(--transition-base); letter-spacing: 0.5px }
.footer .contact-phone:hover { color: var(--color-accent) }
.footer .qr-code { width: 130px; height: 130px; background: #fff; border-radius: var(--radius-md); padding: 10px }
.footer .qr-code-label { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; text-align: center }
.footer .qr-codes-row { display: flex; gap: 20px; margin-top: 24px }
.footer .footer-media { display: flex; gap: 12px; margin-top: 16px }
.footer .footer-media a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); transition: all var(--transition-base) }
.footer .footer-media a:hover { background: var(--gradient-primary); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(28, 65, 153, 0.4) }
.footer .footer-media svg { display: block }
.banner .swiper-slide>a { display: block; position: relative }
@media (max-width: 992px) {
  .product_db_show table td, .product_db_show table th { width: auto !important }
  ._web-mt15 { margin-top: 15px }
  ._web-mt20 { margin-top: 20px }
  ._web-mt25 { margin-top: 25px }
  ._web-fs12 { font-size: 12px }
  ._web-fs14 { font-size: 14px }
  ._web-fs16 { font-size: 16px }
  ._web-fs18 { font-size: 18px }
  ._web-fs20 { font-size: 20px }
  ._web-fs22 { font-size: 22px }
  ._web-fs24 { font-size: 24px }
  ._web-pd40 { padding: 40px 0 }
  ._web-pd15 { padding: 15px 0 }
  ._web-pd20 { padding: 20px 0 }
  ._web-pd25 { padding: 25px 0 }
  .consult-btn { height: 45px; width: 155px; font-size: 18px; margin-top: 20px }
  .el-cont-btn { height: 45px; width: 155px; font-size: 18px }
  .nav-menu { top: 70px; padding: 14px 0 !important }
  .contact-box { padding-bottom: 40px }
  .map-box { margin-top: 20px }
  .el-cont-dl > dt, .contact-desc { font-size: 16px }
  .el-cont-dl, .contact-ul > li { margin-top: 20px }
  .pro-dbott { padding-top: 40px; padding: 40px 32px !important; border-radius: 0 !important }
  .product_dr_tright { padding-left: 0 !important }
  .pre-next-box { justify-content: space-between; flex-direction: column; gap: 12px; padding: 36px !important }
  .pre-next { margin-right: 0; max-width: 50%; width: 100% }
  .nav-menu .center-box { padding: 0 16px }
  .nav-menu-ul { justify-content: flex-start; gap: 8px; padding: 0 8px }
  .nav-menu-ul > li a { height: 38px; padding: 0 16px; font-size: 13px }
  .banner-list-img { min-height: 180px; object-fit: cover }
  .pages { padding: 25px 0 }
  ._news_ul > li { padding: 20px 0 }
  ._news_right { max-width: 100% !important; min-width: 0; height: 220px }
  ._news_left { max-width: 100% !important; padding: 28px !important }
  ._news_desc { -webkit-line-clamp: 1; margin: 5px 0 }
  .news-bleft::before { transform: translate(-4.16vw, calc(-28px - 4.16vw)) }
  .footer-top { padding: 40px 0 20px; flex-direction: column !important; gap: 40px }
  .footer-tleft, .footer-tmid, .footer-tright { width: 100% !important; max-width: 100% }
  .footer-mul { flex-wrap: wrap; gap: 30px }
  .footer-mul > li { margin: 0 10px 20px; width: calc(50% - 20px); min-width: 140px }
  .news_mask { padding: 15px 40px 15px 15px }
  .swiper-news .swiper-news-pagination { bottom: 15px; right: 15px }
  .g-text { margin-top: 5px }
  .search_box { width: 100% }
  .head-right { position: absolute; bottom: 1px; transform: translate(0, 100%); width: 100%; left: 0; background-color: #fff; padding: 0 15px; display: none }
  .logo-img { max-width: 120px }
  ._web_col_2 > li { width: 48.5%; margin-left: 3%; margin-top: 20px }
  ._web_col_2 > li:nth-of-type(4n+1) { margin-left: 3% }
  ._web_col_2 > li:nth-of-type(2n+1) { margin-left: 0 }
  .pro-desc { margin: 5px 0 }
  .product-bott { padding-top: 15px }
  .gm-img { height: 20px }
  .g-mask { padding: 5px }
  .g-desc { -webkit-line-clamp: 2; display: none }
  .read-more-btn { height: 40px; width: 120px }
  .head { padding: 15px 0 }
  .menu { display: block }
  .hide-pc { display: flex }
  .hide-web { display: none }
  .nav-ul > li::after { display: none }
  .nav-ul { flex-direction: column }
  .drop-tab a { height: auto; line-height: 1.6; font-size: 16px; color: #333 !important; padding: 14px 0; border-bottom: 1px solid #f0f0f0 }
  .drop-tab { height: auto !important; line-height: 1.6 !important }
  .nav-ul-box { width: 75%; max-width: 320px; height: 100vh; background-color: #fff; position: fixed; right: 0; left: auto; top: 0; display: flex; flex-direction: column; justify-content: flex-start; z-index: 999; padding: 40px 20px 30px; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15); overflow-y: auto }
  .nav-ul-box.menu-open { transform: translateX(0) }
  .nav-ul > li { width: 100%; line-height: 1.6; border-bottom: 1px solid #f0f0f0; padding: 0; margin-left: 0 !important; text-align: left; margin-right: 0 }
  .nav-ul > li:last-child { border-bottom: none }
  .nav-ul > li .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border-radius: 0; border-top: none; background: transparent; padding: 0; min-width: auto }
  .nav-ul > li.open .sub-menu { display: block }
  .nav-ul > li .sub-menu::before { display: none }
  .nav-ul > li .sub-menu li a { color: #666; padding: 10px 0 10px 20px; border-bottom: 1px solid #f5f5f5; font-size: 14px }
  .nav-ul > li .sub-menu li a:hover { background: transparent; color: var(--primary-color); padding-left: 24px }
  .nav-ul > li.has-sub > .drop-tab::after { border-top-color: var(--primary-color); float: right; margin-top: 8px; transition: transform 0.3s ease }
  .nav-ul > li.open > .drop-tab::after { transform: rotate(180deg) }
  .nav-close { position: absolute; top: 15px; right: 20px; width: 36px; height: 36px; color: #333; font-size: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s; z-index: 1001 }
  .nav-close:hover { background: #f5f5f5; color: var(--primary-color) }
  .banner, .banner .swiper-banner, .banner .swiper-wrapper, .banner .swiper-slide, .banner .swiper-slide > a, .banner .swiper-slide > a > img { width: 100%; height: 200px; min-height: 200px }
  .banner .swiper-banner, .banner .swiper-wrapper, .banner .swiper-slide, .banner .swiper-slide > a { height: 200px; min-height: 200px }
  .banner { width: 100%; height: 200px; min-height: 200px }
  .banner .banner-i { height: 200px; min-height: 200px }
  .swiper-thumbs-box { aspect-ratio: 1 / 1; height: auto; width: 100%; margin-right: 0; padding: 0 25px; margin-top: 10px }
  .swiper-main-box { width: 100% }
  .product_dr_tleft { flex-direction: column-reverse; width: 100% !important; min-width: 0 }
  .swiper-main-prev { left: 0; top: 50%; transform: translate(0, -50%) }
  .swiper-main-next { right: 0; top: 50%; transform: translate(0, -50%) }
  .fix-web { display: flex; flex-direction: column }
  .fix-web:after { display: none }
  .fix-web > [class*=left], .fix-web > [class*=right] { width: 100% }
  .flex-web { flex-direction: column !important }
  .flex-web > [class*=left], .flex-web > [class*=right] { width: 100% }
  .flex-web-reverse { flex-direction: column-reverse !important }
  .flex-web-reverse > [class*=left], .flex-web-reverse > [class*=right] { width: 100% }
  .fix-web > .right-mt25 { margin-top: 25px }
  .fix-web > .right-mt20 { margin-top: 20px }
  .flex-web > .right-mt5 { margin-top: 5px }
  .fix-web > .right-mt15 { margin-top: 15px }
  .flex-web > .right-mt10 { margin-top: 10px }
  .flex-web > .right-mt20 { margin-top: 20px }
  .flex-web > .right-mt25 { margin-top: 25px }
  .footer .qr-codes-row { gap: 15px }
  .footer .qr-code { width: 100px; height: 100px }
  .company-box { padding: 40px 0 }
  .company-left, .company-right { width: 100% }
  .products-box { padding: 40px 0 }
  .product-ul > li { width: 48%; margin-left: 2% !important; margin-top: 20px }
  .product-ul > li:nth-of-type(4n+1) { margin-left: 2% !important }
  .product-ul > li:nth-of-type(2n+1) { margin-left: 0 !important }
  .news-box { padding: 50px 0 40px }
  .news-bleft, .news-bright { width: 100% }
  .news-bright { margin-top: 30px }
  .grid-box { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; gap: 15px }
  .grid-item, .grid-item:nth-of-type(1), .grid-item:nth-of-type(2), .grid-item:nth-of-type(3), .grid-item:nth-of-type(4), .grid-item:nth-of-type(5) { width: 100% !important; grid-row: auto !important; grid-column: auto !important; aspect-ratio: 3/4 }
  .grid-item:nth-of-type(1) { aspect-ratio: 16/10 }
  .head-phone { display: none }
  .contact-bleft, .contact-bright { width: 100% }
  .contact-bright { margin-top: 30px }
  ._news_ul > li a, ._news_ul > li:nth-of-type(2n) a { flex-direction: column !important }
  ._news_right img { width: 100%; height: 220px }
  .contact-info-grid { grid-template-columns: repeat(2, 1fr) }
  .banner-list-caption .blc-title { font-size: 28px }
  .banner-list-caption .blc-desc { font-size: 14px }
  .banner .banner-list-img { min-height: 240px }
  .details_group, .details_show, .pre-next-box { padding: 30px 20px !important }
  .details-tit { font-size: 26px !important }
  .pro_dtop { flex-direction: column !important; padding: 28px 20px; gap: 28px }  .product_dr_tr_tit { font-size: 28px !important }
  .nav-menu-ul { gap: 6px }
  .pre-next a { width: 100%; justify-content: center }
  .company-box .company-left, .company-box .company-right { flex: 1 1 100%; padding-right: 0 }
  .company-box .company-left { padding-bottom: 30px }
  .pro-showcase { grid-template-columns: 1fr; gap: 36px; padding: 36px !important; border-radius: 0 !important }
  .pro-features { grid-template-columns: 1fr }
  .pro-actions { flex-direction: column }
  .consult-btn-new, .pro-btn-secondary { width: 100%;display:block; }
  .pro-content-panel { padding: 36px !important; border-radius: 0 }
  .details-header, .details-body { padding: 40px 32px }
  ._news_ul { grid-template-columns: repeat(2, 1fr); gap: 24px }
  ._news_ul_3col { grid-template-columns: repeat(2, 1fr) }
  .list-page-title { font-size: 32px }
  ._news_box { padding: 40px 0 53px !important }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 24px }
  .pro-content-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px }
  .pro-content-tab { flex: 0 0 auto; padding: 12px 20px; font-size: 14px }
  .list-page-header { padding: 44px 36px 36px !important; margin-bottom: 52px !important }
  .pre-next-btn { min-width: 0; width: 100% }
  .pre-next-btn.next { flex-direction: row-reverse }
  .pre-next-btn > div, .pre-next-btn.next > div { text-align: left }
  .pro-stats { flex-wrap: wrap; gap: 16px !important; padding: 20px !important }
  .pro-stat-item { flex: 1 1 calc(50% - 8px) !important; padding: 8px !important }
  .pro-stat-divider { display: none !important }
  .details-header { padding: 40px 36px 36px !important }
  .details-body { padding: 40px 36px !important; font-size: 15px !important }
  .related-products { padding: 48px 36px !important }
  .pre-next-nav {grid-template-columns: 1fr !important; flex-direction: column; gap: 16px }
  ._news_box, .pro_details_box, .details_box { padding: 37px 0 44px !important }
}
@media (max-width: 750px) {
  .banner-img { display: none }
  .mobile-img { display: block }
  .flex-phone { flex-direction: column }
  .flex-phone > [class*=left], .flex-phone > [class*=right] { width: 100% }
  .flex-phone > .right-mt5 { margin-top: 5px }
  .flex-phone > .right-mt15 { margin-top: 15px }
  .flex-phone > .right-mt20 { margin-top: 20px }
  .flex-phone > .right-mt25 { margin-top: 25px }
  ._news_box, .pro_details_box, .details_box { padding: 48px 0 53px !important }
  ._news_ul { grid-template-columns: 1fr !important; gap: 28px !important }
  .related-grid { grid-template-columns: 1fr !important }
  .list-page-header { padding: 32px 24px 28px !important; margin-bottom: 36px !important; border-radius: 0 !important }
  .list-page-title { font-size: 26px !important }
  .pro-showcase { padding: 28px 22px !important; border-radius: 0 !important; gap: 28px !important }
  .product_dr_tr_tit { font-size: 22px !important }
  .pro-features { grid-template-columns: 1fr !important }
  .pro-content-tabs { flex-wrap: wrap }
  .pro-content-tab { flex: 1 1 calc(50% - 4px); font-size: 13px !important; padding: 12px 14px !important }
  .pro-content-panel { padding: 28px 22px !important }
  .details-header { padding: 32px 22px 28px !important }
  .details-body { padding: 32px 22px !important; font-size: 14px !important }
  .details-tit { font-size: 20px !important }
  .details-meta { gap: 12px !important }
  .related-products { padding: 32px 22px !important }
  .pre-next-box { padding: 28px 22px !important }
  .pre-next-btn { min-height: 72px !important; padding: 16px 20px !important }
  .pro-actions { flex-direction: column !important }
  .pro-actions > a { width: 100% }
}
@media (min-width: 992px) {
  .product_dr_btit .iconfont { font-size: 28px }
  .company-right { min-height: 492px }
  .comp1 { position: absolute; top: 0; left: 0 }
  .swiper-main-next, .swiper-main-prev { left: 50% }
  .swiper-main-prev { transform: translate(-50%, 0) rotateZ(90deg); top: 0 }
  .swiper-main-next { top: unset; bottom: 0; transform: translate(-50%, 0) rotateZ(90deg) }
}
@media (max-width: 1340px) {
  .center-box { padding-left: 15px; padding-right: 15px; width: 100% }
}
.comp1 { display: block; max-width: 52.48%; width: 100% }
.comp2 { position: absolute; right: 0; bottom: 0; display: block; max-width: 63.82%; width: 100% }
.looksea { width: 560px; max-width: 100%; background-color: #fff; height: 55px; line-height: 55px; border-radius: 12px }
.look-val { font-size: 14px; width: 100%; flex: 1; padding: 0 25px }
.look-btn { height: 100%; width: 80px; border-radius: 12px; background-color: var(--primary-color); color: #fff; font-size: 20px; text-align: center }
.look-btn:hover { text-decoration: underline }
.lookfor { background-color: #e8e8e8; padding: 30px 0 }
.lookleft { font-size: 40px }
.lan { -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/index_static/img/arrow-down.png) no-repeat right center; padding-right: 16px }
.normal-select { -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/index_static/img/arrow-down-fill.png) no-repeat 92% center; padding-right: 16px; border: none; background-color: #fff; width: 131px; height: 37px; line-height: 37px; color: #000000; font-size: 14px; border-radius: 4px; text-align: center; outline: none; max-width: 18% }
.select_provice { width: 110px; height: 40px; line-height: 40px; border: 1px solid #bfbfbf; outline: none; font-size: 14px; border-radius: 4px; padding-right: 16px; text-align: center; flex: 1 }
.pages-select { -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/index_static/img/arrow-down-fill.png) no-repeat 96% center; border: 1px solid #dadada; outline: none; font-size: 14px; border-radius: 4px; padding: 5px; padding-right: 16px }
.normal-item { display: none }
.normal-item:first-child { display: block }
._news_ul_2 { background-color: #fff }
body.menu-open::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 1; visibility: visible; transition: all 0.3s }
body:not(.menu-open)::after { opacity: 0; visibility: hidden }
.footer .footer-links .footer-link { display: block; padding: 6px 0; color: rgba(255, 255, 255, 0.65); font-size: 14px; transition: all 0.3s; position: relative; padding-left: 14px }
.footer .footer-links .footer-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translateY(-50%); transition: all 0.3s }
.footer .footer-links .footer-link:hover { color: var(--color-accent-light); transform: translateX(4px) }
.footer .footer-links .footer-link:hover::before { background: var(--color-accent) }
.qr-codes-row { display: flex; gap: 20px; margin-top: 10px }
.qr-codes-row > div { text-align: center }
.qr-code { width: 100px; height: 100px; border-radius: var(--radius-sm); background: #fff; padding: 5px }
.qr-code-label { font-size: 12px; margin-top: 8px; color: rgba(255, 255, 255, 0.5) }
.footer-bott a { color: rgba(255, 255, 255, 0.4); transition: color 0.3s }
.footer-bott a:hover { color: rgba(255, 255, 255, 0.8) }
.footer-mtop a { color: #fff }
.banner .banner-list-img { width: 100%; height: 100%; object-fit: cover; min-height: 380px }
.banner-list-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 20px }
.banner-list-caption .blc-title { font-size: 42px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); animation: fadeInUp 0.8s ease }
.banner-list-caption .blc-desc { font-size: 18px; opacity: 0.9; margin-top: 12px; letter-spacing: 1px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); animation: fadeInUp 0.8s ease 0.15s backwards }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
.nav-position .center-box, .nav-position .center-box2 { display: flex; align-items: center; gap: 6px }
.nav-position img { width: 14px; height: 14px; vertical-align: middle; opacity: 0.6 }
._news_box { padding: 53px 0; background: var(--gradient-soft); position: relative }
._news_ul { list-style: none; padding: 0; margin: 0; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 32px }
._news_ul > li:hover { box-shadow: 0 12px 36px rgba(15, 26, 58, 0.08),
    0 48px 96px rgba(15, 26, 58, 0.12) !important; transform: translateY(-16px) !important; border-color: rgba(28, 65, 153, 0.12) }
._news_ul > li a { display: flex !important; flex-direction: column !important; align-items: stretch; min-height: 240px; height: 100% }
._news_right::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 65, 153, 0) 50%, rgba(28, 65, 153, 0.1) 100%); pointer-events: none; z-index: 1; transition: opacity 0.4s; opacity: 0 }
.news_rimg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease }
._news_ul > li:hover .news_rimg { transform: scale(1.08) }
._news_time::before { content: ""; width: 5px; height: 5px; background: var(--primary-color); border-radius: 50%; display: none !important }
.details-btn::after { content: "→"; transition: transform 0.35s; display: inline-block }
.section-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--primary-color); font-weight: 600; letter-spacing: 2px; text-transform: uppercase }
.section-label::before { content: ""; width: 30px; height: 2px; background: var(--gradient-primary); border-radius: 2px }
.section-label::after { content: ""; width: 30px; height: 2px; background: var(--gradient-primary); border-radius: 2px }
._news_ul_2 > li { border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.06); margin-bottom: 30px }
._news_ul_2 ._news_tit { font-size: 22px !important; margin-bottom: 16px }
._news_ul_2 ._news_desc { font-size: 15px !important; line-height: 1.9 }
.contact-bleft, .contact-bright { background: #fff; border-radius: 16px; padding: 48px 40px; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.06) }
.el-cont-dl .cont-val:focus { border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 3px rgba(28, 65, 153, 0.1); outline: none }
.details_box { padding: 53px 0 41px !important; background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(28, 65, 153, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #f5f7fc 0%, #eef2fa 100%) !important; min-height: 600px }
.details-info img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px }
.details_show h1, .details_show h2, .details_show h3 { margin: 30px 0 16px; font-weight: 700; color: var(--text-color) }
.details_show h1 { font-size: 24px }
.details_show h2 { font-size: 20px; padding-left: 14px; border-left: 4px solid var(--primary-color); line-height: 1.5 }
.details_show h3 { font-size: 17px }
.details_show p { margin: 14px 0; line-height: 2; text-align: justify }
.details_show p img { border-radius: 12px; box-shadow: 0 4px 20px rgba(15, 26, 58, 0.1); max-width: 100%; height: auto; margin: 20px auto; display: block }
.details_show ul, .details_show ol { padding-left: 22px; margin: 16px 0 }
.details_show li { margin: 8px 0; line-height: 1.8 }
.details_show strong { color: var(--primary-color) }
.pro_details_box { padding: 53px 0 41px !important; background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(28, 65, 153, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #f5f7fc 0%, #eef2fa 100%) !important; position: relative; padding-bottom: 53px }
.pro_dtop { background: transparent !important; border-radius: 16px; padding: 0 !important; box-shadow: none !important; gap: 50px; position: relative; overflow: visible }
.product_db_show h2 { font-size: 22px !important; font-weight: 700 !important; margin: 36px 0 20px !important; padding-left: 16px; border-left: 4px solid var(--primary-color); background: linear-gradient(90deg, var(--primary-50) 0%, transparent 100%); line-height: 1.4 !important; position: relative }
.product_db_show h3 { font-size: 18px !important; font-weight: 600; margin: 20px 0 12px; padding-left: 14px; border-left: 3px solid var(--primary-light) }
.product_db_show p { margin: 0 0 16px !important; line-height: 2 !important; text-align: justify; text-indent: 2em; color: var(--text-secondary) !important; font-size: 15px !important }
.product_db_show img { border-radius: 16px !important; box-shadow: 0 12px 40px rgba(15, 26, 58, 0.12) !important; max-width: 90% !important; height: auto !important; margin: 32px auto !important; display: block !important }
.product_db_show ul { padding-left: 22px; margin: 16px 0 }
.product_db_show li { margin: 10px 0; line-height: 2; position: relative }
.pages a, .pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px;padding: 0 12px; border-radius: 50%; background: #fff; border: 1px solid var(--border-color); color: var(--text-color); font-size: 14px; font-weight: 500; transition: all var(--transition-base); cursor: pointer; text-decoration: none }
.pages a:hover { background: var(--primary-50); border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28, 65, 153, 0.12) }
.pages .active a { background: var(--gradient-primary); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(28, 65, 153, 0.3); cursor: default }
.pages .active:hover a { transform: none; background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 16px rgba(28, 65, 153, 0.3) }
.pages a.page-prev, .pages a.page-next { padding: 0 }
.pages a.page-prev:hover, .pages a.page-next:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff }
.pages span.page-ellipsis { background: transparent; border: none; min-width: auto; padding: 0 4px; color: var(--text-muted); cursor: default; transform: none }
.pages span.page-ellipsis:hover { background: transparent; color: var(--text-muted); transform: none }
.pages .page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; color: var(--text-muted); font-size: 14px; background: transparent; border: none; min-width: auto; height: auto; padding: 0; cursor: default }
.pages .page-jump:hover { background: transparent; border: none; color: var(--text-muted); transform: none }
.pages .page-jump input { width: 48px; height: 36px; padding: 0 8px; text-align: center; border: 1px solid var(--border-color); border-radius: 8px; background: #fff; color: var(--text-color); font-size: 14px; transition: all var(--transition-base); -moz-appearance: textfield }
.pages .page-jump input::-webkit-outer-spin-button, .pages .page-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.pages .page-jump input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-100); outline: none }
.contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.contact-info-card { background: #fff; border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.06); transition: all 0.4s ease; border-top: 3px solid transparent }
.contact-info-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(15, 26, 58, 0.12); border-top-color: var(--primary-color) }
.contact-info-card .cic-icon { width: 56px; height: 56px; margin: 0 auto 18px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px }
.contact-info-card .cic-title { font-size: 16px; font-weight: 700; color: var(--text-color); margin-bottom: 8px }
.contact-info-card .cic-value { font-size: 15px; color: var(--text-muted); line-height: 1.6 }
@media (max-width: 600px) {
  ._news_box { padding: 50px 0 }
  ._news_ul > li { margin-bottom: 20px; border-radius: 0 }
  ._news_tit { font-size: 18px !important }
  ._news_desc { font-size: 14px !important }
  ._news_left { padding: 24px !important }
  ._news_right, ._news_right img { height: 180px }
  .contact-info-grid { grid-template-columns: 1fr; gap: 16px }
  .contact-bleft, .contact-bright { padding: 28px 20px }
  .details_group, .details_show { padding: 24px 18px !important }
  .details-tit { font-size: 22px !important }
  .banner-list-caption .blc-title { font-size: 22px; letter-spacing: 1px }
  .nav-menu { top: 64px; padding: 10px 0 !important }
  .nav-menu-ul > li a { font-size: 12px; height: 32px; padding: 0 12px }
  .pages { flex-wrap: wrap; gap: 6px }
  .pages a, .pages span { min-width: 36px; height: 36px }
  .pages .page-jump { margin-left: 0; width: 100%; justify-content: center; margin-top: 8px }
  .pages .page-jump input { width: 56px; height: 32px }
  ._news_ul { grid-template-columns: 1fr; gap: 24px !important }
  .pro-showcase { padding: 24px 20px !important; gap: 28px; border-radius: 0 !important }
  .pro-image-stage { aspect-ratio: 1/1; padding: 24px }
  .product_dr_tr_tit { font-size: 24px !important }
  .pro-content-panel { padding: 24px 16px; border-radius: 0 }
  .details-group-new { border-radius: 0 !important }
  .details-header { padding: 32px 20px 28px !important }
  .details-body { padding: 32px 20px !important }
  .pre-next-nav { flex-direction: column; gap: 16px }
  .pre-next-btn { max-width: 100%; width: 100%; min-height: auto; padding: 16px 20px }
  .pre-next-btn.next { margin-left: 0; flex-direction: row-reverse }
  ._news_ul_3col { grid-template-columns: 1fr }
  .list-page-title { font-size: 26px !important }
  .list-page-header { margin-bottom: 36px !important; padding: 32px 24px 28px !important; border-radius: 0 !important }
  .related-grid { grid-template-columns: 1fr }
  .details-meta { gap: 16px }
  .related-section-title h2 { font-size: 22px }
  .pro-stats { flex-wrap: wrap; gap: 12px; padding: 18px 20px }
  .pro-stat-item { flex: 1 1 calc(50% - 12px); padding: 8px }
  .pro-stat-divider { display: none }
  .pro-stat-num { font-size: 22px }
  .pre-next-box { padding: 28px 20px !important }
  .related-products { padding: 36px 20px !important }
  ._news_box, .pro_details_box, .details_box { padding: 40px 0 48px !important }
  ._news_box > .center-box, .pro_details_box > .center-box{ padding: 0 16px !important }
  .list-page-desc { font-size: 15px !important }
  .pro-features { grid-template-columns: 1fr }
  .pro-actions { flex-direction: column }
  .pro-actions > a { width: 100% }
  .pro-dbott { padding: 28px 20px !important; border-radius: 0 !important }
}
.footer-mtop a:hover { color: var(--color-accent) }
.company-box .company-right img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: transform 0.5s ease }
.company-box .company-right:hover img { transform: scale(1.02) }
.pro-showcase { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; background: #fff; border-radius: 0 !important; padding: 42px !important; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.05),
    0 40px 88px rgba(15, 26, 58, 0.1) !important; position: relative; overflow: hidden; margin-top: 0 !important; border: 1px solid rgba(28, 65, 153, 0.06); isolation: isolate }
.pro-showcase::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px !important; background: linear-gradient(90deg, #1C4199 0%, #4e7cd4 50%, #8fb3f0 100%); background-size: 200% 100%; animation: shimmer 4s linear infinite; z-index: 3 }
.pro-showcase::after { content: ""; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(28, 65, 153, 0.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; bottom: -40px; left: 10%; filter: blur(20px); z-index: 0; animation: none }
.pro-image-stage { position: relative; border-radius: 0 !important; overflow: hidden; background: linear-gradient(135deg, #eaf0ff 0%, #f5f8ff 50%, #eef3ff 100%); padding: 40px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.8),
    inset 0 -8px 24px rgba(28, 65, 153, 0.05),
    0 20px 48px rgba(28, 65, 153, 0.1); z-index: 1 }
.pro-image-stage::before { content: ""; position: absolute; inset: 24px; border: 1px dashed rgba(28, 65, 153, 0.15); border-radius: 0; pointer-events: none }
.pro-image-stage .main-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; transition: transform 0.6s ease, opacity 0.3s ease; box-shadow: 0 16px 40px rgba(28, 65, 153, 0.15); position: relative; z-index: 2 }
.pro-image-stage:hover .main-img { transform: scale(1.05) }
.pro-thumbs { display: flex; gap: 14px; margin-top: 24px }
.pro-thumb-item { width: 88px; height: 88px; border-radius: 0; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: all 0.3s; background: #f5f7fa }
.pro-thumb-item:hover, .pro-thumb-item.active { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(28, 65, 153, 0.2) }
.pro-thumb-item img { width: 100%; height: 100%; object-fit: cover }
.pro-info-panel { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; z-index: 1; gap: 32px }
.pro-category-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--primary-50); color: var(--primary-color); border-radius: 24px; font-size: 13px; font-weight: 600; width: fit-content; margin-bottom: 24px }
.pro-category-tag::before { content: ""; width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; margin-right: 6px }
.product_dr_tr_tit::after { content: ""; position: absolute; bottom: 0; left: 0; width: 72px; height: 4px; background: var(--gradient-primary); border-radius: 4px }
.pro-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px !important }
.pro-feature-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, #f7f9ff 0%, #eef3ff 100%); border-radius: 16px; transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(28, 65, 153, 0.06); position: relative; overflow: hidden }
.pro-feature-item:hover { background: var(--primary-50) !important; transform: translateY(-4px); box-shadow: 0 16px 32px rgba(28, 65, 153, 0.12); border-color: rgba(28, 65, 153, 0.15) }
.pro-feature-icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--gradient-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff }
.pro-feature-icon svg { width: 22px; height: 22px }
.pro-feature-text { font-size: 15px; font-weight: 600; color: var(--text-color) }
.pro-actions { display: flex; gap: 16px; margin-top: 8px }
.consult-btn-new { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 36px; background: var(--gradient-primary); color: #fff; font-size: 16px; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 12px 32px rgba(28, 65, 153, 0.3); letter-spacing: 1px; position: relative; overflow: hidden }
.consult-btn-new:hover { color: #fff !important; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(28, 65, 153, 0.5); background: linear-gradient(135deg, #14307a 0%, #2d5bb8 100%) }
.consult-btn-new svg { width: 20px; height: 20px; transition: transform 0.3s ease }
.consult-btn-new:hover svg { transform: translateX(3px) }
.pro-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 36px; background: #fff; color: var(--primary-color); font-size: 16px; font-weight: 600; border-radius: 50px; border: 2px solid rgba(28, 65, 153, 0.2); text-decoration: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) }
.pro-btn-secondary:hover { background: var(--primary-color); color: #fff !important; transform: translateY(-3px); border-color: var(--primary-color); box-shadow: 0 12px 32px rgba(28, 65, 153, 0.3) }
.pro-btn-secondary svg { width: 20px; height: 20px; transition: transform 0.3s ease }
.pro-btn-secondary:hover svg { transform: translateX(3px) }
.pro-content-tabs { display: flex; gap: 8px; margin-bottom: 40px; border-bottom: none; padding-bottom: 0; padding: 8px; background: linear-gradient(180deg, #f5f7ff 0%, #fff 100%); border-radius: 20px; box-shadow: inset 0 1px 3px rgba(28, 65, 153, 0.06); position: relative; border: 1px solid rgba(28, 65, 153, 0.06) }
.pro-content-tab { padding: 14px 28px; font-size: 15px; font-weight: 600; color: var(--text-light); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.3s; background: transparent; border-top: none; border-left: none; border-right: none; flex: 1; border-radius: 14px; border: none; white-space: nowrap; position: relative; z-index: 1 }
.pro-content-tab:hover { color: var(--primary-color); background: var(--primary-50) }
.pro-content-tab.active { color: #fff; border-bottom-color: var(--primary-color); background: var(--gradient-primary); box-shadow: 0 8px 24px rgba(28, 65, 153, 0.25) }
.pro-content-panel { background: linear-gradient(180deg, #fcfdff 0%, #fff 100%) !important; border-radius: 0 !important; padding: 48px !important; box-shadow: inset 0 0 0 1px rgba(28, 65, 153, 0.06); min-height: 300px; animation: fadeSlide 0.4s ease-out; display: none }
.product_db_show h1, .product_db_show h2, .product_db_show h3 { margin: 32px 0 20px; font-weight: 700; color: var(--text-color) }
.product_db_show h1 { font-size: 26px !important; text-align: center; position: relative; padding-bottom: 20px }
.product_db_show h1::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--gradient-primary); border-radius: 3px }
.product_db_show p:first-child { text-indent: 0 }
.product_db_show ul, .product_db_show ol { padding-left: 28px; margin: 20px 0 }
.product_db_show li::marker { color: var(--primary-color) }
.pro-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 26, 58, 0.06) }
.pro-spec-table th { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: #fff; font-weight: 600; padding: 16px 24px; text-align: left; font-size: 14px }
.pro-spec-table td { padding: 16px 24px; border-bottom: 1px solid var(--border-color); font-size: 14px; color: var(--text-color) }
.pro-spec-table tr:last-child td { border-bottom: none }
.pro-spec-table tr:nth-child(even) td { background: #f7f9fc }
.details-group-new { background: #fff; border-radius: 0 !important; overflow: hidden; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.05),
    0 40px 88px rgba(15, 26, 58, 0.1) !important; position: relative; border: 1px solid rgba(28, 65, 153, 0.06) }
.details-header { padding: 37px 42px 48px !important; background: linear-gradient(135deg, rgba(28, 65, 153, 0.04) 0%, rgba(255, 255, 255, 0.98) 60%, #fff 100%) !important; border-bottom: 1px solid rgba(28, 65, 153, 0.06); position: relative }
.details-meta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; font-size: 14px; color: var(--text-muted); padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, 0.06) }
.details-meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-light); font-weight: 500 !important; padding: 6px 14px; background: rgba(28, 65, 153, 0.05); border-radius: 999px }
.details-meta-item svg { width: 18px; height: 18px; color: var(--primary-color) }
.details-body { padding: 37px 42px !important; font-size: 16px !important; line-height: 2; color: var(--text-secondary); background: #fff; position: relative }
.details-body h1, .details-body h2, .details-body h3 { margin: 32px 0 20px !important; font-weight: 700; color: var(--text-color); line-height: 1.4 }
.details-body h1 { font-size: 26px !important;}
.details-body h2 { font-size: 22px !important; padding-left: 16px; border-left: 4px solid var(--primary-color); background: linear-gradient(90deg, var(--primary-50) 0%, transparent 100%); position: relative }
.details-body h3 { font-size: 18px !important; padding-left: 14px; position: relative }
.details-body p { margin: 18px 0; line-height: 2; text-align: justify; color: var(--text-secondary) !important; font-size: 15px !important; text-indent: 2em }
.details-body img { border-radius: 20px; box-shadow: 0 16px 44px rgba(15, 26, 58, 0.1); max-width: 100%; height: auto; margin: 24px auto; display: block; transition: transform 0.4s, box-shadow 0.4s }
.details-body ul, .details-body ol { padding-left: 24px !important; margin: 0 0 20px !important; list-style: none !important }
.details-body li { margin: 10px 0; line-height: 2 }
.pre-next-nav {width:100%;display: flex; justify-content: space-between; gap: 24px; grid-template-columns: 1fr 1fr }
.pre-next-btn { display: flex; align-items: center; gap: 20px; padding: 20px 28px; background: #fff; border-radius: 20px; color: var(--text-color); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.35s; max-width: 45%; min-height: 80px; border: 1px solid rgba(28, 65, 153, 0.1); min-width: 0 !important; flex: 1 }
.pre-next-btn:hover { background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%); color: #fff; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(28, 65, 153, 0.12); border-color: var(--primary-color) }
.pre-next-btn .pn-label { font-size: 12px; opacity: 0.7; margin-bottom: 4px; color: var(--text-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 4px }
.pre-next-btn .pn-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: var(--text-color); line-height: 1.4 }
.pre-next-btn.next { margin-left: auto; flex-direction: row-reverse; text-align: right }
._news_right img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) }
._news_ul > li:hover ._news_right img { transform: scale(1.1) }
@media (max-width: 1200px) {
  ._news_ul { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 28px }
  .pro-showcase { grid-template-columns: 1fr; padding: 48px !important; gap: 48px }
  .pro-features { grid-template-columns: repeat(2, 1fr) }
  .pro-image-stage { max-width: 480px; margin: 0 auto }
}
._news_ul_3col { grid-template-columns: repeat(3, 1fr) }
.list-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px }
.list-section-title { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; color: var(--text-color) }
.list-section-title::before { content: ""; width: 4px; height: 28px; background: var(--gradient-primary); border-radius: 4px }
.list-section-count { font-size: 14px; color: var(--text-muted); background: #fff; padding: 8px 16px; border-radius: 20px; box-shadow: 0 4px 12px rgba(15, 26, 58, 0.06) }
._news_box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(28, 65, 153, 0.2) 50%, transparent 100%) !important }
.list-page-header { text-align: center; margin-bottom: 50px; position: relative; padding: 42px 37px 37px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important; border-radius: 0 !important; box-shadow: 0 4px 24px rgba(15, 26, 58, 0.04),
    0 32px 72px rgba(15, 26, 58, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.8); overflow: hidden }
.list-page-title { font-size: 42px; font-weight: 700; color: var(--text-color); position: relative; display: inline-block; padding-bottom: 20px; margin-bottom: 16px; letter-spacing: 2px; background: linear-gradient(135deg, #1a2e6e 0%, #1C4199 50%, #2d5bb8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.list-page-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px !important; height: 4px !important; background: var(--gradient-primary) !important; border-radius: 4px; margin-top: 20px !important }
.list-page-desc { font-size: 18px; color: var(--text-light); line-height: 1.8 }
._news_ul > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px !important; background: linear-gradient(90deg, #1C4199 0%, #4e7cd4 50%, #8fb3f0 100%) !important; transform: scaleX(0) !important; transform-origin: left center !important; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important; z-index: 2; background-size: 200% 100%; animation: shimmer 4s linear infinite }
._news_ul > li:hover::before { transform: scaleX(1) !important }
._news_ul > li .center-box { padding: 0 !important; max-width: none !important }
._news_ul > li .center-box > a { flex-direction: column !important; display: flex !important; height: 100%; width: 100% }
._news_ul > li:hover .details-btn { background: var(--gradient-primary); color: #fff; transform: translateX(4px); box-shadow: 0 8px 24px rgba(28, 65, 153, 0.3) }
.pro-content-tabs::before { content: ""; position: absolute; bottom: -8px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(28, 65, 153, 0.2) 50%, transparent 100%); display: none !important }
.product_db_show h2:first-child { margin-top: 0 }
.related-products { margin-top: 48px; background: linear-gradient(180deg, #fafbff 0%, #fff 100%); margin: 0 !important; padding: 42px !important; border-top: 1px solid rgba(28, 65, 153, 0.06) }
.related-section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 40px }
.related-section-title .bar { width: 4px; height: 32px; background: var(--gradient-primary); border-radius: 4px }
.related-section-title h2 { font-size: 26px; font-weight: 700; color: var(--text-color); margin: 0 !important }
.related-section-title .count { font-size: 14px; color: var(--primary-color); background: #fff; padding: 6px 14px; border-radius: 20px; box-shadow: 0 4px 12px rgba(15, 26, 58, 0.06); margin-left: auto; cursor: pointer; transition: color 0.3s }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
.related-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 26, 58, 0.05); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; display: flex; flex-direction: column; border: 1px solid rgba(28, 65, 153, 0.05) }
.related-card:hover { transform: translateY(-12px); box-shadow: 0 24px 56px rgba(15, 26, 58, 0.12); border-color: rgba(28, 65, 153, 0.15) }
.related-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #eef3ff 0%, #e4ecff 100%) }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease }
.related-card:hover .related-card-img img { transform: scale(1.08) }
.related-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 12px }
.related-card-tag { font-size: 12px; color: var(--primary-color); background: var(--primary-50); padding: 4px 12px; border-radius: 16px; display: inline-block; margin-bottom: 12px !important; width: fit-content; font-weight: 600 }
.related-card-title { font-size: 18px; font-weight: 700; color: var(--text-color); margin-bottom: 10px !important; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s }
.related-card:hover .related-card-title { color: var(--primary-color) }
.related-card-desc { font-size: 14px; color: var(--text-light); line-height: 1.8; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; margin-bottom: 16px !important }
.related-card-link { font-size: 14px; color: var(--primary-color); font-weight: 600; display: inline-flex !important; align-items: center; gap: 4px; transition: transform 0.3s }
.related-card-link:hover { gap: 10px }
.details-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary) }
.details-category-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 20px; background: var(--primary-50); color: var(--primary-color); border-radius: 24px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(28, 65, 153, 0.3); margin-bottom: 24px; position: relative; letter-spacing: 1px }
.details-category-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color) }
._news_box, .pro_details_box, .details_box { position: relative; isolation: isolate }
._news_box::after, .pro_details_box::after, .details_box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(28, 65, 153, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(28, 65, 153, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 70%, rgba(28, 65, 153, 0.04) 0%, transparent 60%); z-index: -1 }
.list-page-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px !important; background: linear-gradient(90deg, #1C4199 0%, #4e7cd4 50%, #8fb3f0 100%) !important; background-size: 200% 100%; animation: shimmer 4s linear infinite }
.list-page-header::after { content: ""; position: absolute; top: -100px; right: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(28, 65, 153, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none }
._news_ul > li::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 24px; background: radial-gradient(ellipse at center, rgba(15, 26, 58, 0.14) 0%, rgba(15, 26, 58, 0.04) 50%, transparent 80%); filter: blur(6px); opacity: 0.6; transition: opacity 0.4s, transform 0.4s; z-index: -1; border-radius: 50%; display: none !important }
._news_ul > li:hover::after { opacity: 0.9; transform: scale(1.08) }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
._news_right::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 40%); pointer-events: none; z-index: 2; display: none !important }
._news_left::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(28, 65, 153, 0.18), transparent); display: none !important }
._news_tit::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--gradient-primary); border-radius: 3px; transition: width 0.4s; display: none !important }
._news_ul > li:hover ._news_tit::after { width: 64px }
.details-btn::before { content: ""; position: absolute; inset: 0; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s; z-index: -1; border-radius: inherit; display: none !important }
.pro_details_box > .center-box { display: flex; flex-direction: column; gap: 56px; position: relative; z-index: 1;padding: 0 24px }
.pro-stats { display: flex; align-items: center; gap: 12px; margin-bottom: 32px !important; padding: 24px 32px; background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 100%); border-radius: 20px; border: 1px solid rgba(28, 65, 153, 0.08); position: relative; overflow: hidden; margin: 8px 0 }
.pro-stats::before { content: "" !important; position: absolute; left: 0; top: 0; bottom: 0; width: 5px !important; background: var(--gradient-primary) !important }
.pro-stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px !important; padding: 0 16px !important; text-align: center }
.pro-stat-num { font-size: 28px; font-weight: 700; color: var(--primary-color); line-height: 1.2; background: linear-gradient(135deg, #1C4199 0%, #4e7cd4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.pro-stat-label { font-size: 13px; color: var(--text-light); font-weight: 500 !important; margin-top: 6px }
.pro-stat-divider { width: 1px; height: 36px; background: linear-gradient(180deg, transparent, rgba(28, 65, 153, 0.2), transparent) }
.pro-feature-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: left 0.6s }
.pro-feature-item:hover::before { left: 100% }
.pro-dbott::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #1C4199 0%, #4e7cd4 50%, transparent 100%); border-radius: 0 }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
.details-group-new > .details-header, .details-group-new > .details-body, .details-group-new > .related-products, .details-group-new > .pre-next-box {  }
.details-group-new::before { content: "" !important; position: absolute; top: 0 !important; left: 0 !important; right: 0 !important; bottom: -8px; background: linear-gradient(135deg, rgba(28, 65, 153, 0.08) 0%, transparent 60%) !important; border-radius: 0 !important; z-index: 0; filter: blur(2px); height: 220px; pointer-events: none; display: none !important }
.details-group-new::after { content: ""; position: absolute; top: -40px; right: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(28, 65, 153, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: -1; display: none !important }
.details-header::after { content: ""; position: absolute; bottom: 0; left: 64px; right: 64px; height: 1px; background: linear-gradient(90deg, transparent, rgba(28, 65, 153, 0.15), transparent) }
.details-tit::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 44px; background: var(--gradient-primary); border-radius: 5px; display: none !important }
.details-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(180deg, rgba(28, 65, 153, 0.03) 0%, transparent 100%); pointer-events: none; display: none !important }
.details-body > p:first-of-type:first-letter { font-size: 56px; font-weight: 700; float: left; line-height: 0.9; margin: 6px 14px 0 0; color: var(--primary-color); font-family: Georgia, serif; -webkit-text-fill-color: var(--primary-color) !important }
.details-body img:hover { transform: scale(1.02); box-shadow: 0 24px 56px rgba(15, 26, 58, 0.16) }
.related-grid .related-card { position: relative }
.related-grid .related-card::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -12px; height: 18px; background: radial-gradient(ellipse at center, rgba(15, 26, 58, 0.14) 0%, transparent 70%); filter: blur(6px); opacity: 0.5; transition: opacity 0.3s, transform 0.3s; z-index: -1; border-radius: 50% }
.related-grid .related-card:hover::after { opacity: 0.9; transform: scale(1.1) }
.pre-next-btn > div { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.pre-next-btn.next > div { text-align: right }
.pre-next-btn .pn-label::before { content: ""; width: 16px; height: 1px; background: var(--primary-color); display: inline-block; transition: width 0.3s }
.pre-next-btn:hover .pn-label::before { width: 24px }
.pre-next-btn:hover .pn-title { color: var(--primary-color) }
.pre-next-btn svg { color: var(--primary-color); flex-shrink: 0; transition: transform 0.3s; width: 24px; height: 24px }
.pre-next-btn:hover svg { transform: translateX(4px) }
.pre-next-btn.next:hover svg { transform: translateX(-4px) }
._news_right .news_rimg, ._news_right img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); display: block }
._news_ul > li:hover ._news_right::after { opacity: 1 }
._news_ul > li:hover .details-btn::after { transform: translateX(4px) }
._news_left ._news_time:empty { display: none !important }
.product_db_show p strong { color: var(--primary-color); font-weight: 600 }
.details-group-new > * { position: relative; z-index: 1 }
.details-body ul li, .details-body ol li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 2 !important }
.related-card:hover .related-card-link { gap: 8px; transform: translateX(4px); display: inline-block }
.banner + .nav-position { box-shadow: 0 4px 20px rgba(15, 26, 58, 0.06) }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
._news_ul > li, .pro-showcase, .pro-dbott, .details-group-new, .related-card { opacity: 0; animation: fadeSlideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards }
._news_ul > li:nth-child(1), .pro-showcase, .details-group-new { animation-delay: 0.05s }
._news_ul > li:nth-child(2) { animation-delay: 0.15s }
._news_ul > li:nth-child(3) { animation-delay: 0.25s }
._news_ul > li:nth-child(4) { animation-delay: 0.35s }
._news_ul > li:nth-child(5) { animation-delay: 0.45s }
._news_ul > li:nth-child(6) { animation-delay: 0.55s }
@media (prefers-reduced-motion: reduce) {
  ._news_ul > li, .pro-showcase, .pro-dbott, .details-group-new, .related-card { animation: none !important; opacity: 1 !important }
  .g-mask, .g-img, .g-mask-inner, .g-text, .gm-icon, .g-desc { transition: none !important }
  .grid-item:hover .gm-icon, .grid-item:hover .g-text, .grid-item:hover .g-desc { transform: none !important; opacity: 1 !important }
}
.product_dr_tr_desc p { margin: 0 }
.pro-actions > a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 28px; font-size: 15px; font-weight: 600; transition: all 0.35s; cursor: pointer; text-decoration: none }
.pro-actions > a svg { width: 20px; height: 20px }
.pro-content-panel.active { display: block }
.pro-content-panel > div { line-height: 2 }
.pro-content-panel h2 { font-size: 22px; font-weight: 700; color: var(--text-color); margin: 32px 0 16px; padding-left: 16px; border-left: 4px solid var(--primary-color) }
.pro-content-panel h2:first-child { margin-top: 0 }
.pro-content-panel p { font-size: 16px; color: var(--text-secondary); margin: 14px 0; line-height: 2 }
.related-section-title .count:hover { color: var(--primary-dark) }
.details-body h1, .details-body h2 { font-size: 22px; font-weight: 700; color: var(--text-color); margin: 36px 0 20px; padding:8px 16px; border-left: 4px solid var(--primary-color); line-height: 1.5 }
.details-body h1:first-child, .details-body h2:first-child { margin-top: 0 }
.details-body ul { margin: 20px 0; padding-left: 2em }
.details-body ul li { margin: 12px 0; line-height: 2}
.pn-label { font-size: 13px; color: var(--text-light); font-weight: 500 }
.pn-title { font-size: 16px; font-weight: 600; color: var(--text-color); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.related-card:nth-child(1) { animation-delay: 0.1s }
.related-card:nth-child(2) { animation-delay: 0.2s }
.related-card:nth-child(3) { animation-delay: 0.3s }
._news_ul > li > a { flex-direction: column !important }
.card-link { display: block; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 26, 58, 0.06); transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); position: relative; height: 100% }
.card-link:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(15, 26, 58, 0.14) }
.card-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--primary-50) }
.card-img-wrap img { width: 100%; height: 100%; transition: transform 0.6s ease }
.card-link:hover .card-img-wrap img { transform: scale(1.08) }
.card-category { position: absolute; top: 16px; left: 16px; background: var(--gradient-primary); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); letter-spacing: 0.5px; backdrop-filter: blur(10px); z-index: 2 }
.card-body { padding: 28px; display: flex; flex-direction: column; gap: 14px }
.card-date { font-size: 13px; color: var(--text-muted); letter-spacing: 0.5px }
.card-title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--text-color); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--transition-base) }
.card-link:hover .card-title { color: var(--primary-color) }
.card-desc { font-size: 14px; line-height: 1.8; color: var(--text-light); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.card-more { font-size: 14px; font-weight: 600; color: var(--primary-color); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; transition: gap var(--transition-base) }
.card-link:hover .card-more { gap: 12px }
*, *::before, *::after { border-radius: 0 !important }
.contact-about { padding: 53px 0; background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); position: relative; overflow: hidden }
.contact-about::before, .contact-about::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0 }
.contact-about::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(28, 65, 153, 0.06) 0%, transparent 70%); top: -160px; right: -100px }
.contact-about::after { width: 360px; height: 360px; background: radial-gradient(circle, rgba(74, 140, 255, 0.05) 0%, transparent 70%); bottom: -140px; left: -80px }
.about-section-header { position: relative; z-index: 1; text-align: center; margin-bottom: 50px }
.ash-sub { font-size: 12px; letter-spacing: 4px; color: var(--primary-color); font-weight: 600; margin-bottom: 12px; text-transform: uppercase }
.ash-title { font-size: 36px; font-weight: 700; color: var(--text-color); margin: 0 0 16px; letter-spacing: 1px }
.ash-line { width: 56px; height: 4px; background: var(--gradient-primary); margin: 0 auto 16px }
.ash-desc { font-size: 16px; color: var(--text-secondary) }
.about-card { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 50px; padding: 40px 44px; margin-bottom: 34px; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 4px 24px rgba(28, 65, 153, 0.04), 0 10px 40px rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base) }
.about-card:hover { box-shadow: 0 12px 40px rgba(28, 65, 153, 0.08), 0 20px 64px rgba(0, 0, 0, 0.06); transform: translateY(-3px); border-color: rgba(28, 65, 153, 0.15) }
.about-card-reverse { flex-direction: row-reverse }
.about-card-body { flex: 1; min-width: 0 }
.about-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: #fff; background: var(--gradient-primary); margin-bottom: 20px }
.about-card-title { font-size: 24px; font-weight: 700; color: var(--text-color); margin: 0 0 16px }
.about-card-desc { font-size: 15px; line-height: 2; color: var(--text-secondary); margin: 0 0 16px }
.about-card-desc strong { color: var(--primary-color); font-weight: 600 }
.about-card-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px }
.act-item { padding: 8px 18px; background: var(--primary-50); color: var(--primary-color); font-size: 13px; font-weight: 500; border: 1px solid var(--primary-100); transition: all var(--transition-base) }
.act-item:hover { background: var(--primary-color); color: #fff }
.about-service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px }
.asl-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%); border-left: 3px solid var(--primary-color) }
.asl-num { font-size: 22px; font-weight: 700; color: var(--primary-color); min-width: 36px }
.asl-title { font-size: 14px; font-weight: 600; color: var(--text-color) }
.asl-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px }
.about-card-img { flex: 0 0 42%; min-width: 0; position: relative; overflow: hidden; background: var(--primary-50) }
.about-card-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(28, 65, 153, 0.08) 0%, transparent 60%); z-index: 1; pointer-events: none }
.about-card-img img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) }
.about-card:hover .about-card-img img { transform: scale(1.06) }
@media (max-width: 992px) { .about-card { flex-direction: column; gap: 30px; padding: 30px 24px } .about-card-reverse { flex-direction: column } .about-card-img { flex: 1 1 auto } .about-card-img img { min-height: 260px } .about-service-list { grid-template-columns: 1fr } .ash-title { font-size: 28px } }
@media (max-width: 600px) { .about-card { padding: 24px 20px; gap: 24px } .about-card-img img { min-height: 220px } .ash-title { font-size: 24px } .asl-num { font-size: 18px; min-width: 28px } .about-card-icon { width: 44px; height: 44px } .about-card-icon svg { width: 22px; height: 22px } .about-card-title { font-size: 20px } }