:root {
  /* 品牌主色（科技蓝，参考新三顺风格） */
  --red: #1763D6; --red-dark: #0F4AA8; --red-light: #EEF4FF;
  --text: #0E1B2E; --text-light: #5A6B85; --border: #E5EAF2; --bg: #F5F8FD; --white: #fff;
  --gold: #FFD34D; --teal: #00B8A9;
  --shadow: 0 2px 8px rgba(15,74,168,.08); --shadow-hover: 0 6px 20px rgba(15,74,168,.14);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* 固定滚动条占位：长短页面切换时内容不会左右横移 */
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif; color:var(--text); line-height:1.8; background:var(--bg); min-width:320px; }

/* 页面切换：只做透明度渐变，不做位移，避免出现"跳一下"的感觉 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut .18s ease both; }
::view-transition-new(root) { animation: vtFadeIn .22s ease both; }
@keyframes vtFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes vtFadeIn  { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* 首屏占位：JS 渲染前的兜底高度（顶栏39px + 导航80px），避免页头页脚撑开时抖动 */
#header:empty { height:119px; }
#footer:empty { height:320px; }
@media (max-width:900px) { #header:empty { height:119px; } #footer:empty { height:420px; } }

/* Logo 预留宽度，避免图片加载完成后文字横向跳动 */
.logo img { height:48px; width:auto; min-width:48px; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }

/* Topbar */
.topbar { background:#0E1B2E; color:#A8B4C4; font-size:13px; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; max-width:1200px; margin:0 auto; flex-wrap:wrap; gap:8px; }
.topbar-phone { color:#fff; font-size:16px; font-weight:700; }
.topbar-phone .icon { display:inline-block; width:18px; height:18px; background:var(--red); border-radius:50%; text-align:center; line-height:18px; font-size:10px; color:#fff; margin-right:4px; vertical-align:middle; }

/* Header */
.header { background:var(--white); border-bottom:2px solid var(--red); position:sticky; top:0; z-index:999; }
.header-inner { display:flex; align-items:center; padding:0 16px; max-width:1200px; margin:0 auto; height:80px; }
.logo { display:flex; align-items:center; gap:12px; margin-right:auto; }
.logo img { height:48px; width:auto; }
.logo-text h1 { font-size:22px; color:var(--red-dark); font-weight:700; line-height:1.3; }
.logo-text p { font-size:12px; color:var(--text-light); letter-spacing:1px; }
.nav { display:flex; gap:4px; padding-right:68px; } /* 整体左移约4个字符（17px×4） */
.nav a { display:block; padding:8px 18px; font-size:17px; font-weight:600; color:var(--text); border-radius:4px; transition:.2s; white-space:nowrap; }
.nav a:hover, .nav a.active { background:var(--red); color:#fff; }
.nav-dropdown { position:relative; }
.nav-dropdown > a { display:block; padding:8px 18px; font-size:17px; font-weight:600; color:var(--text); border-radius:4px; transition:.2s; white-space:nowrap; }
.nav-dropdown:hover > a, .nav-dropdown.active > a { background:var(--red); color:#fff; }
.nav-dropdown .dropdown-menu { position:absolute; top:100%; left:0; min-width:180px; background:var(--white); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.12); padding:8px 0; display:none; z-index:1000; }
.nav-dropdown:hover .dropdown-menu { display:block; }
.nav-dropdown .dropdown-menu a { display:block; padding:10px 20px; font-size:14px; transition:.2s; }
  .nav-dropdown .dropdown-menu a:hover { background:var(--red-light); color:var(--red); }
.nav-dropdown .dropdown-sub { position:relative; }
.nav-dropdown .dropdown-sub > a { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.nav-dropdown .dropdown-sub .sub-arrow { font-size:13px; color:var(--text-light); }
.nav-dropdown .dropdown-sub:hover > a { background:var(--red-light); color:var(--red); }
.nav-dropdown .dropdown-sub:hover .sub-arrow { color:var(--red); }
.nav-dropdown .dropdown-sub .sub-menu { position:absolute; left:100%; top:0; min-width:190px; background:var(--white); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.12); padding:8px 0; display:none; z-index:1001; }
.nav-dropdown .dropdown-sub:hover .sub-menu { display:block; }
.nav-dropdown .dropdown-sub .sub-menu a { display:block; padding:10px 20px; font-size:14px; transition:.2s; white-space:nowrap; }
.nav-dropdown .dropdown-sub .sub-menu a:hover { background:var(--red-light); color:var(--red); }
.menu-toggle { display:none; background:none; border:none; font-size:28px; cursor:pointer; color:var(--red-dark); padding:4px 8px; }

/* 产品中心多列大面板（参考图格式：系列为栏目标题，产品纵向排列） */
.nav-dropdown .dropdown-menu.products-mega { min-width:660px; padding:28px 32px 24px; }
.nav-dropdown:hover .dropdown-menu.products-mega { display:flex; gap:52px; }
/* 栏目少时按内容自适应宽度，不留空列；各栏等宽，视觉对称 */
.nav-dropdown .dropdown-menu.mega-auto { min-width:0; }
.nav-dropdown:hover .dropdown-menu.mega-auto { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:52px; }
.nav-dropdown .dropdown-menu.mega-auto .mega-title { width:100%; text-align:center; }
.products-mega .mega-col { display:flex; flex-direction:column; align-items:flex-start; min-width:90px; }
.nav-dropdown .dropdown-menu .mega-title { font-size:15px; font-weight:700; color:var(--text); padding:0 0 10px; border-bottom:2px solid var(--red); margin-bottom:8px; white-space:nowrap; border-radius:0; display:block; }
.nav-dropdown .dropdown-menu .mega-title:hover { background:none; color:var(--red); }
.nav-dropdown .dropdown-menu .mega-link { font-size:14px; font-weight:400; color:var(--text-light); padding:7px 0; border-radius:0; white-space:nowrap; transition:.2s; }
.nav-dropdown .dropdown-menu .mega-link:hover { background:none; color:var(--red); padding-left:5px; }

/* Page Banner */
.page-banner { background:linear-gradient(135deg, #0F4AA8, #1763D6, #2B7DE9); color:#fff; padding:48px 0; text-align:center; }
.page-banner h1 { font-size:32px; margin-bottom:8px; }
.page-banner p { font-size:15px; opacity:.85; }
.breadcrumb { font-size:13px; opacity:.7; margin-bottom:12px; }
.breadcrumb a { color:var(--gold); }

/* Section */
.section { padding:48px 0; }
.section-header { text-align:center; margin-bottom:36px; }
.section-header .en { font-size:13px; color:var(--red); text-transform:uppercase; letter-spacing:2px; margin-bottom:4px; }
.section-header h2 { font-size:30px; color:var(--text); margin-bottom:8px; }
.section-header .line { width:40px; height:3px; background:var(--red); margin:12px auto 0; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:20px; }
.card { background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:.3s; }
.card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card-body { padding:20px; }
.card-body h3 { font-size:18px; margin-bottom:8px; }
.card-body p { font-size:14px; color:var(--text-light); line-height:1.7; }
.card-badge { display:inline-block; font-size:11px; color:var(--red); background:var(--red-light); padding:2px 8px; border-radius:3px; margin-bottom:6px; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.card-tags span { font-size:11px; background:var(--bg); padding:3px 10px; border-radius:3px; color:var(--text-light); }
.card-img { height:180px; display:flex; align-items:center; justify-content:center; font-size:64px; }
.card-img.cj { background:linear-gradient(135deg, #1763D6, #4A90E2); }
.card-img.yy { background:linear-gradient(135deg, #F5820B, #FFB35C); }
.card-img.zy { background:linear-gradient(135deg, #1C7A45, #4CBF8A); }
.card-img.red { background:linear-gradient(135deg, #0F4AA8, #2B7DE9); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:12px 28px; border-radius:4px; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:.3s; }
.btn-red { background:var(--red); color:#fff; } .btn-red:hover { background:var(--red-dark); }
.btn-outline { background:transparent; color:var(--red); border:1px solid var(--red); } .btn-outline:hover { background:var(--red); color:#fff; }
.btn-white { background:#fff; color:var(--red); } .btn-white:hover { background:#f0f0f0; }

/* Contact form */
.contact-section { background:linear-gradient(135deg, #0D3E8C, #1763D6); color:#fff; }
.contact-section .section-header .en { color:rgba(255,255,255,.6); }
.contact-section .section-header h2 { color:#fff; }
.contact-section .section-header .line { background:var(--gold); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-info h3 { font-size:20px; margin-bottom:16px; }
.contact-info .info-item { display:flex; gap:12px; margin-bottom:12px; font-size:14px; align-items:flex-start; }
.contact-info .info-icon { font-size:18px; flex-shrink:0; width:22px; text-align:center; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form .full { grid-column:span 2; }
.contact-form input, .contact-form textarea { width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.3); border-radius:4px; background:rgba(255,255,255,.1); color:#fff; font-size:14px; outline:none; font-family:inherit; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:rgba(255,255,255,.5); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--gold); background:rgba(255,255,255,.15); }
.contact-form textarea { resize:vertical; min-height:100px; }

/* Footer */
.footer { background:#0E1B2E; color:#A8B4C4; padding:40px 0 0; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:32px; border-bottom:1px solid #1F2D42; }
.footer-grid h4 { color:#fff; font-size:15px; margin-bottom:14px; }
.footer-grid a, .footer-grid p { font-size:13px; line-height:2.2; display:block; transition:.2s; }
.footer-grid a:hover { color:var(--gold); }
.footer-bottom { text-align:center; padding:18px 0; font-size:12px; color:#5A6B85; }
.footer-bottom a { color:inherit; text-decoration:none; transition:.2s; }
.footer-bottom a:hover { color:var(--gold); }

/* Carousel */
.carousel { position:relative; overflow:hidden; }
.carousel-inner { display:flex; transition:transform .5s ease; }
.carousel-slide { min-width:100%; padding:80px 24px 60px; display:flex; align-items:center; gap:40px; position:relative; }
.carousel-slide .slide-text { flex:1; }
.carousel-slide .slide-text h2 { font-size:36px; font-weight:700; margin-bottom:12px; color:#fff; }
.carousel-slide .slide-text p { font-size:16px; opacity:.9; margin-bottom:20px; color:#fff; }
.carousel-slide .slide-badge { display:inline-block; background:rgba(255,255,255,.2); padding:6px 16px; border-radius:20px; font-size:13px; color:#fff; margin-bottom:16px; }
.carousel-dots { display:flex; justify-content:center; gap:10px; padding:16px; position:absolute; bottom:0; left:0; right:0; }
.carousel-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; border:none; transition:.3s; }
.carousel-dot.active { background:#fff; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:28px; width:44px; height:44px; border-radius:50%; cursor:pointer; z-index:10; transition:.3s; }
.carousel-btn:hover { background:rgba(255,255,255,.3); }
.carousel-btn.prev { left:16px; }
.carousel-btn.next { right:16px; }

/* Sidebar layout (for product / news) */
.sidebar-layout { display:grid; grid-template-columns:240px 1fr; gap:32px; }
.sidebar { background:var(--white); border-radius:6px; border:1px solid var(--border); padding:0; }
.sidebar h3 { padding:16px 20px; font-size:15px; border-bottom:1px solid var(--border); }
.sidebar a { display:block; padding:10px 20px; font-size:14px; border-bottom:1px solid var(--border); transition:.2s; }
.sidebar a:last-child { border-bottom:none; }
.sidebar a:hover, .sidebar a.active { background:var(--red-light); color:var(--red); font-weight:600; }

/* Article list */
.article-list .article-item { padding:16px 0; border-bottom:1px dashed var(--border); display:flex; gap:16px; align-items:flex-start; transition:.2s; }
.article-item:hover { color:var(--red); }
.article-item .article-date { font-size:12px; color:var(--text-light); white-space:nowrap; background:var(--bg); padding:4px 10px; border-radius:3px; flex-shrink:0; }
.article-item .article-title { font-size:15px; flex:1; }
.article-item .article-title a { color:var(--text); }
.article-item:hover .article-title a { color:var(--red); }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.pagination a, .pagination span { padding:8px 14px; border:1px solid var(--border); border-radius:4px; font-size:14px; transition:.2s; }
.pagination a:hover { background:var(--red); color:#fff; border-color:var(--red); }
.pagination .current { background:var(--red); color:#fff; border-color:var(--red); }

/* Tab content */
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Floating Contact Bar */
.float-contact { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:998; }
.float-contact .fc-item { position:relative; width:48px; height:48px; background:var(--white); border:1px solid var(--border); border-right:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; margin-bottom:-1px; }
.float-contact .fc-item:first-child { border-radius:8px 0 0 0; }
.float-contact .fc-item:last-child { border-radius:0 0 0 8px; }
.float-contact .fc-item:hover { background:var(--red); border-color:var(--red); }
.float-contact .fc-item:hover .fc-icon { filter:brightness(0) invert(1); }
.float-contact .fc-icon { font-size:20px; transition:.3s; }
.float-contact .fc-pop { position:absolute; right:52px; top:50%; transform:translateY(-50%) scale(.8); background:var(--white); border:1px solid var(--border); border-radius:8px; padding:12px 16px; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.12); opacity:0; pointer-events:none; transition:.25s; }
.float-contact .fc-item:hover .fc-pop { opacity:1; transform:translateY(-50%) scale(1); pointer-events:auto; }
.float-contact .fc-pop .fc-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.float-contact .fc-pop .fc-desc { font-size:12px; color:var(--text-light); }
.float-contact .fc-pop .fc-qr { width:120px; height:120px; background:var(--bg); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-light); margin-top:8px; }
.float-contact .fc-pop::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--white); }
@media (max-width:900px) { .float-contact { display:none; } }

/* Mobile */
@media (max-width:900px) {
  .nav { display:none; position:absolute; top:80px; left:0; right:0; background:var(--white); flex-direction:column; box-shadow:0 4px 12px rgba(0,0,0,.1); padding-right:0; }
  .nav.open { display:flex; }
  .nav a { padding:14px 20px; border-bottom:1px solid var(--border); }
  .menu-toggle { display:block; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .sidebar-layout { grid-template-columns:1fr; }
  .carousel-slide { flex-direction:column; padding:40px 16px; }
  .carousel-slide .slide-text h2 { font-size:24px; }
  /* 手机端：hover 不可用，改为点击展开（.open 由 common.js 添加） */
  .nav-dropdown > a { display:flex; align-items:center; justify-content:space-between; }
  .nav-dropdown .dropdown-menu,
  .nav-dropdown.open > .dropdown-menu { position:static; box-shadow:none; border:none; padding:6px 0 6px 20px; min-width:0; }
  .nav-dropdown.open > .dropdown-menu { display:block; }
  .nav-dropdown.open > .dropdown-menu.products-mega { display:flex; flex-direction:column; gap:0; padding:8px 0 8px 20px; }
  .nav-dropdown.open > a { background:var(--red); color:#fff; }
  .nav-dropdown > a .caret { transition:transform .25s; font-size:10px; }
  .nav-dropdown.open > a .caret { transform:rotate(180deg); }
  .nav-dropdown .dropdown-menu.products-mega { position:static; min-width:0; box-shadow:none; border:none; padding:8px 0 8px 20px; }
  .nav-dropdown:hover .dropdown-menu.products-mega { flex-direction:column; gap:0; }
  .nav-dropdown .dropdown-menu .mega-title { border-bottom-width:1px; padding:8px 0; margin-bottom:4px; }
  .nav-dropdown .dropdown-menu.mega-auto .mega-title { text-align:left; }
  .nav-dropdown .dropdown-menu .mega-link { padding:8px 0; }
  .nav-dropdown .dropdown-sub .sub-menu { position:static; display:block; box-shadow:none; border:none; padding:0 0 0 16px; }
  .nav-dropdown .dropdown-sub .sub-arrow { display:none; }
}
@media (max-width:600px) {
  .card-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
}