:root{
  --red:#FF5901;
  --red-deep:#a30d26;
  --dark:#222;
  --line:#e6e6e6;
  --bg:#f7f8fa;
  --en:"Archivo","PingFang SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/*body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;color:var(--dark);background:var(--bg)}*/
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:0;background:none;cursor:pointer}
img{max-width:100%;/*display:block*/}
.en{font-family:var(--en)}

/* ============ 顶部红色条 ============ */
.topbar{background:var(--red);color:#fff}
.topbar-inner{max-width:16.4rem;margin:0 auto;height:38px;padding:0 20px;
  display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:13px}
.lang{display:flex;align-items:center;gap:8px}
.lang a{opacity:.9}
.lang a.on{font-weight:700;opacity:1}
.lang .sep{opacity:.6}
.search-toggle{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;transition:opacity .2s}
.search-toggle:hover{opacity:.8}

/* ============ 主导航 ============ */
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.header-inner{max-width:16.4rem;margin:0 auto;height:84px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo img{max-height: 70px;}
.logo-mark{width:56px;transform:skewX(-10deg)}
.logo-text strong{display:block;font-size:21px;letter-spacing:3px;line-height:1.15}
.logo-text span{font-size:9px;letter-spacing:1.6px;color:#333;font-family:var(--en)}
.nav ul{display:flex;gap:6px}
.nav a{position:relative;display:flex;align-items:center;gap:5px;height:84px;padding:0 15px;font-weight:600;
  font-size:18px;color:#333;transition:color .2s,opacity .3s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transition:transform .25s}
.nav a:hover,.nav a.active{color:#111}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
/* 下拉打开时：压暗其余导航，聚焦当前栏目 */
/*.header.mega-open .nav > ul > li > a{opacity:.45}
.header.mega-open .nav > ul > li > a.mega-trigger{opacity:1;color:#111}
.header.mega-open .nav > ul > li > a.mega-trigger::after{transform:scaleX(1)}*/
.header.mega-open .nav > ul > li > a{opacity:.45}
.header.mega-open .nav > ul > li.open > a.mega-trigger{opacity:1;color:#111}
.header.mega-open .nav > ul > li.open > a.mega-trigger::after{transform:scaleX(1)}
.caret{transition:transform .3s}
.has-mega.open .caret{transform:rotate(180deg)}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:42px}
.burger span{width:22px;height:2px;background:#333;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Mega 下拉（原三栏主体） ============ */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:2px solid var(--red);
  box-shadow:0 34px 60px -18px rgba(15,17,20,.3);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .32s ease,transform .32s ease,visibility .32s;pointer-events:none}
/*.header.mega-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}*/
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-inner{min-height: 594px;max-width:16.4rem;margin:0 auto;display:grid;
  grid-template-columns:minmax(260px,26%) minmax(250px,24%) 1fr}
/* 展开时三栏依次浮现 */
.col-in{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
/*.header.mega-open .col-in{opacity:1;transform:none}
.header.mega-open .mega-menu{transition-delay:.06s}
.header.mega-open .mega-preview{transition-delay:.12s}
.header.mega-open .mega-bar{transition-delay:.18s}*/
.has-mega.open .col-in{opacity:1;transform:none}
.has-mega.open .mega-menu{transition-delay:.06s}
.has-mega.open .mega-preview{transition-delay:.12s}
.has-mega.open .mega-bar{transition-delay:.18s}

/* —— 左栏：栏目标题（原 .side） —— */
.mega-about{position:relative;overflow:hidden;padding:42px 34px 34px;border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.mega-about::before{content:"";position:absolute;top:0;left:0;width:70%;height:60%;
  background-image:radial-gradient(circle,rgba(0,0,0,.13) 2px,transparent 2.5px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 0 0,#000 20%,transparent 70%);
  mask-image:radial-gradient(circle at 0 0,#000 20%,transparent 70%)}
.mega-about::after{content:"HARMAN";position:absolute;left:2px;bottom:-52px;
  font:italic 900 160px/1 var(--en);letter-spacing:-10px;
  color:rgba(0,0,0,.045);transform:skewX(-12deg)}
.mega-about > *{position:relative}
.mega-kicker{font:700 11px/1 var(--en);letter-spacing:3px;color:var(--red);
  display:flex;align-items:center;gap:8px;margin-bottom:14px}
.mega-kicker::before{content:"";width:22px;height:2px;background:var(--red)}
.mega-about h2{font-size:30px;letter-spacing:2px;margin-bottom:14px}
.mega-about p{font-size:13.5px;line-height:1.9;color:#666;margin-bottom:20px}
.mega-quote{margin-top:auto;padding:12px 0 0 12px;border-left:3px solid var(--red);
  font-size:12.5px;line-height:1.8;color:#8a8f94}
.mega-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:13px;color:var(--red);font-weight:600;transition:gap .25s}
.mega-cta:hover{gap:11px}

/* —— 中栏：二级栏目（原 .submenu-col） —— */
.mega-menu{background:#fafbfc;border-right:1px solid var(--line);padding:30px 0;display:flex;flex-direction:column}
.m-item{position:relative;display:flex;align-items:center;gap:13px;
  padding:15.5px 24px 15.5px 26px;font-size:15.5px;color:#444;
  transition:color .2s,background .25s}
.m-item .idx{font:700 11px/1 var(--en);letter-spacing:1px;color:#b6bbc1;transition:color .2s}
.m-item .arr{margin-left:auto;opacity:0;transform:translateX(-6px);transition:.25s;color:var(--red)}
.m-item::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;
  background:var(--red);transform:translateY(-50%);transition:height .25s}
.m-item:hover{color:#111}
.m-item.active{color:var(--red);background:linear-gradient(90deg,rgba(200,16,46,.07),transparent 75%)}
.m-item.active::before{height:58%}
.m-item.active .idx{color:var(--red)}
.m-item.active .arr{opacity:1;transform:none}
/* 自动轮播进度条 */
.m-item .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(200,16,46,.1)}
.m-item .prog i{display:block;height:100%;width:0;background:var(--red)}
.m-item .prog i.run{animation:progFill 4.2s linear forwards}
@keyframes progFill{from{width:0}to{width:100%}}

/* —— 右栏：预览卡（原 .content + .card） —— */
.mega-preview{position:relative;overflow:hidden;min-height:430px;
  background:linear-gradient(105deg,#f7f8fa 45%,#e9ebee 75%,#dbdee2 100%)}
.preview{position:absolute;inset:0;/*display:grid;*/grid-template-columns:232px 1fr;gap:28px;
  padding:38px 44px;opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.preview.is-on{opacity:1;transform:none;pointer-events:auto}
.preview_right{display: flex;justify-content: space-between;padding-top: 20px;}
.p-img{position:relative;align-self:start}
.p-img::after{content:"";position:absolute;right:-7px;top:-7px;width:26px;height:26px;
  border-top:3px solid var(--red);border-right:3px solid var(--red)}
.p-img img{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.18);display: block;max-height: 48vh;}
.p-kicker{ display:none;font:700 10.5px/1 var(--en);letter-spacing:2.5px;color:#9aa0a6;margin-bottom:12px}
.p-kicker b{color:var(--red)}
.preview h3{font-size:23px;letter-spacing:1px;margin-bottom:12px}
.preview .p-desc{ display:none;font-size:13.5px;line-height:1.95;color:#555;max-width:46ch}
.p-facts{ display:none;/*display:flex;*/flex-wrap:wrap;gap:10px 26px;margin-top:18px;padding-top:16px;border-top:1px solid #d9dcdf}
.p-facts span{font-size:12px;color:#8a8f94}
.p-facts b{display:block;font:800 19px/1.2 var(--en);color:#222;margin-bottom:4px}
.more_nav{display:inline-flex;align-items:center;gap:5px;margin-top:18px;
  color:#8a8f94;font-size:13px;transition:color .2s,gap .25s;
  margin: 10px 0 0;
  height: 72px !important;
  display: inline-block !important;}
.more_nav:hover{color:var(--red);gap:9px}

/* —— 底部信息条 —— */
.mega-bar{grid-column:1/-1;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 44px;font-size:12.5px;color:#8a8f94;background:#fff}
.mega-bar .mb-link{display:inline-flex;align-items:center;gap:6px;color:#333;font-weight:600;transition:color .2s,gap .25s}
.mega-bar .mb-link:hover{color:var(--red);gap:10px}
.mega-bar .mb-meta{display:flex;gap:22px}
.mega-bar .mb-meta b{font-family:var(--en);color:var(--red);font-weight:700}

/* ============ 页面遮罩（下拉打开时） ============ */
.veil{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:linear-gradient(rgba(13,15,18,0) 10%,rgba(13,15,18,.45) 60%);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
body.veil-on .veil{opacity:1;visibility:visible}

/* 切换下拉时瞬间关闭，避免新旧面板同框 */
.has-mega.no-anim .mega,
.has-mega.no-anim .mega *{
  transition:none !important;
}



/* ============ 滚动浮现 ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ 搜索弹层 ============ */
.search-overlay{position:fixed;inset:0;z-index:300;background:rgba(15,17,20,.55);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.search-overlay.open{opacity:1;visibility:visible}
.search-panel{position:relative;background:#fff;padding:36px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);transform:translateY(-100%);transition:transform .35s ease}
.search-overlay.open .search-panel{transform:translateY(0)}
.search-form{max-width:960px;margin:0 auto;display:flex;gap:12px}
.search-form input{flex:1;height:48px;border:1px solid var(--line);border-radius:4px;
  padding:0 16px;font-size:15px;outline:none;transition:border-color .2s}
.search-form input:focus{border-color:var(--red)}
.search-submit{height:48px;padding:0 32px;background:var(--red);color:#fff;
  border-radius:4px;font-size:15px;letter-spacing:2px;transition:opacity .2s}
.search-submit:hover{opacity:.9}
.search-close{position:absolute;right:16px;top:12px;font-size:26px;line-height:1;color:#9aa0a6}
.search-close:hover{color:var(--red)}



/* ============ 平板：导航收起，Mega 变手风琴 ============ */
@media (max-width:1200px){
  .burger{display:flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.08);
    max-height:0;overflow:hidden;transition:max-height .4s ease}
  .nav.open{max-height:82vh;overflow:auto}
  .nav ul{flex-direction:column;gap:0;padding:6px 0}
  .nav a{height:auto;padding:14px 24px;border-bottom:1px solid #f2f2f2}
  .nav a::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(0)}
  .nav a.active{color:var(--red)}
  .nav a.active::after,.nav a:hover::after{transform:scaleY(1)}
  .header.mega-open .nav > ul > li > a{opacity:1}
  /* Mega 降级为手风琴子菜单 */
  .has-mega{position:relative}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    border-top:0;box-shadow:none;background:#fafbfc;
    max-height:0;overflow:hidden;transition:max-height .4s ease}
  .has-mega.open .mega{max-height:600px}
  .mega-inner{grid-template-columns:1fr}
  .mega-about,.mega-preview,.mega-bar{display:none}
  .mega-menu{border:0;padding:2px 0 10px}
  .m-item{padding-left:44px}
  .m-item .prog{display:none}
  .m-item.active{background:#fff}
  .col-in{opacity:1;transform:none}

}

/* ============ 手机端 ============ */
@media (max-width:992px){
  .topbar-inner{height:34px;gap:14px}
  .header-inner{height:64px}
  .nav a{padding:13px 20px}
  .sec-head{flex-wrap:wrap}
  .logo img{max-height: 55px;}
}
@media (max-width:560px){

}

/* ============ 减弱动效 ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .hero .line i{transform:none;animation:none}
  .hero-bg img{animation:none}
  .m-item .prog i.run{animation:none;width:100%}
}

@media (max-width:1200px){

  .has-mega > .mega-trigger{
    position: relative;
    padding-right: 56px;
  }

  .has-mega > .mega-trigger .caret{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 52px;
    height: 52px;
    padding: 16px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 2;
  }

  .has-mega.open > .mega-trigger .caret{
    transform: rotate(180deg);
  }

}