@charset "utf-8";
/* ============================================================
   顶部搜索（技术干货 / 集成搜索）+ 主导航美化
   全站加载；不改变原有 DOM 折叠逻辑，只在视觉层覆盖
   配色：搜索走 --hn-sch-*（后台「首页搜索」独立可调），
         导航走 --hn-nav-* / --hn-primary*（跟随主题主色）
   ============================================================ */

/* ---------- 1. 搜索组件 ---------- */
.qs-search{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  width:100%;
}
.qs-search-tabs{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  background:var(--hn-sch-tabbox, var(--hn-primary-04, #eef3fa));
  border:1px solid var(--hn-sch-line, rgba(0, 51, 102, .12));
  border-radius:999px;
}
.qs-search-tabs .qs-qtab{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:transparent;
  color:var(--hn-sch-tabtext, #5b6b80);
  font-size:12.5px;
  line-height:1;
  font-family:inherit;
  padding:8px 13px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s;
}
.qs-search-tabs .qs-qtab:hover{
  color:var(--hn-sch-tab, var(--hn-primary, #003366));
  background:var(--hn-primary-08, rgba(0, 51, 102, .06));
}
.qs-search-tabs .qs-qtab.is-on{
  background:var(--hn-sch-tab, var(--hn-primary, #003366));
  color:var(--hn-on-primary, #fff);
  font-weight:600;
  box-shadow:0 3px 10px var(--hn-sch-shadow, rgba(0, 51, 102, .24));
}
.qs-search-form{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-width:0;
  max-width:430px;
  background:var(--hn-sch-bg, #fff);
  border:1px solid var(--hn-sch-line, rgba(0, 51, 102, .14));
  border-radius:999px;
  padding:4px 4px 4px 6px;
  transition:border-color .2s,box-shadow .2s;
}
.qs-search-form:focus-within{
  border-color:var(--hn-sch-btn, var(--hn-accent, #2f78c4));
  box-shadow:0 0 0 4px var(--hn-sch-ring, rgba(47, 120, 196, .12));
}
.qs-search-form input[name="q"],
.qs-search-form input[name="wd"]{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:34px;
  line-height:34px;
  border:0;
  outline:0;
  background:transparent;
  padding:0 10px;
  font-size:13px;
  color:var(--hn-sch-text, #27384d);
  box-shadow:none;
}
.qs-search-form input::placeholder{color:var(--hn-sch-ph, #9aa7b8)}
.qs-search-form .go{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:34px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--hn-sch-btn, var(--hn-primary, #0b3c72)), var(--hn-sch-btn2, var(--hn-accent, #1d6bb5)));
  color:var(--hn-on-primary, #fff);
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:filter .2s,transform .2s;
}
.qs-search-form .go:hover{filter:brightness(1.1)}
.qs-search-form .go:active{transform:scale(.98)}
.qs-search-form .go svg{width:14px;height:14px;display:block}
.qs-search-form .search-suggest{
  top:calc(100% + 8px);
  left:0;
  right:0;
  border:1px solid var(--hn-sch-line, rgba(0, 51, 102, .12));
  border-radius:12px;
  box-shadow:0 16px 36px rgba(9,32,64,.14);
}

/* ---------- 2. 主导航（桌面端） ---------- */
@media screen and (min-width:761px){
  #fh5co-header .header-nav{
    background:linear-gradient(180deg, var(--hn-nav-1, #0a2f5c), var(--hn-nav-2, #08294e)) !important;
    border-top:1px solid rgba(255,255,255,.07);
    box-shadow:0 10px 26px rgba(5,24,48,.16);
  }
  #fh5co-header .header-nav .nav-menu{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:flex-start;
    padding:0;
    margin:0;
    list-style:none;
  }
  #fh5co-header .header-nav .nav-menu > li{
    display:flex;
    align-items:stretch;
    margin:0;
    padding:0;
    float:none;
  }
  #fh5co-header .header-nav .nav-menu > li > a{
    position:relative;
    display:flex;
    align-items:center;
    height:52px;
    line-height:52px;
    padding:0 24px;
    font-size:15px;
    font-weight:500;
    letter-spacing:.3px;
    color:rgba(255,255,255,.9) !important;
    background:transparent !important;
    box-shadow:none;
    transition:color .2s,background .2s;
  }
  #fh5co-header .header-nav .nav-menu > li > a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:9px;
    width:0;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, var(--hn-nav-hl, #7cc0ff), #fff);
    transform:translateX(-50%);
    transition:width .26s ease;
  }
  #fh5co-header .header-nav .nav-menu > li > a:hover,
  #fh5co-header .header-nav .nav-menu > li:hover > a{
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
  }
  #fh5co-header .header-nav .nav-menu > li > a:hover::after{width:52%}
  #fh5co-header .header-nav .nav-menu > li > a.cur,
  #fh5co-header .header-nav .nav-menu > li.current > a{
    color:#fff !important;
    font-weight:600;
    background:rgba(255,255,255,.12) !important;
  }
  #fh5co-header .header-nav .nav-menu > li > a.cur::after,
  #fh5co-header .header-nav .nav-menu > li.current > a::after{width:52%}

  /* 一级下拉：白色圆角卡片 */
  #fh5co-header .header-nav .nav-menu > li > ul{
    top:100%;
    left:0;
    min-width:190px;
    margin:0;
    padding:8px;
    background:#fff !important;
    border:0;
    border-radius:0 0 12px 12px;
    box-shadow:0 20px 44px rgba(6,26,52,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    z-index:1999;
  }
  #fh5co-header .header-nav .nav-menu > li:hover > ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li{
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li > a{
    display:block;
    width:100%;
    margin:0;
    padding:9px 14px 9px 16px !important;
    text-align:left;
    font-size:13.5px;
    font-weight:400;
    line-height:1.5;
    color:#48566b !important;
    background:transparent !important;
    border:0;
    border-radius:8px;
    box-shadow:none;
    transition:background .18s,color .18s,padding-left .18s;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li > a:hover{
    background:var(--hn-primary-08, #eff5fd) !important;
    color:var(--hn-primary-d2, #0b3c72) !important;
    padding-left:20px !important;
  }
}

/* ---------- 3. 窄屏：搜索区上下排 ---------- */
@media screen and (max-width:759px){
  .qs-search{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .qs-search-tabs{
    order:2;
    width:100%;
    justify-content:center;
    background:var(--hn-sch-tabbox, var(--hn-primary-04, #f4f7fb));
  }
  .qs-search-tabs .qs-qtab{
    flex:1 1 0;
    text-align:center;
    padding:9px 6px;
  }
  .qs-search-form{
    order:1;
    flex:1 1 100%;
    max-width:none;
  }
}

/* ---------- 4. 中等屏：紧凑一些，避免挤压 ---------- */
@media screen and (min-width:760px) and (max-width:1100px){
  .qs-search{gap:7px}
  .qs-search-tabs{padding:2px}
  .qs-search-tabs .qs-qtab{padding:7px 10px;font-size:12px}
  .qs-search-form .go{padding:0 14px}
  #fh5co-header .header-nav .nav-menu > li > a{padding:0 18px;font-size:14.5px}
}

/* ---------- 5. 主导航吸顶 ---------- */
#fh5co-header .header-nav.qs-nav-stuck{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:99990;
  box-shadow:0 10px 28px rgba(4,20,42,.28);
  animation:qsNavDown .2s ease;
}
#fh5co-header .header-nav.qs-nav-stuck .nav-menu > li > a{
  height:52px;
  line-height:52px;
}
@keyframes qsNavDown{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}
@media screen and (max-width:760px){
  #fh5co-header .header-nav.qs-nav-stuck{
    position:static !important;
    box-shadow:none;
    animation:none;
  }
}

/* ---------- 6. 顶栏用户 / 登录下拉：停留与防溢出 ---------- */
/* 按钮与面板间有 9px 空隙，补一层透明桥接区，鼠标下移时不会被判为「已移出」 */
.qs-um-drop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
/* 悬停或展开时箭头翻转，给出明确的状态反馈 */
.qs-um.open .qs-um-arr,
.qs-um:hover .qs-um-arr{
  transform:rotate(180deg);
  opacity:.9;
}
/* 超窄屏：面板宽度跟随视口，避免靠右对齐时溢出左边界 */
@media (max-width:360px){
  .qs-um-drop{
    min-width:0;
    width:calc(100vw - 32px);
    max-width:216px;
  }
}

/* ---------- 7. 窄屏导航：折叠菜单与下拉子菜单统一实底 ---------- */
/* 桌面端下拉的白色卡片写在 min-width:761px 里，窄屏只剩 ul 的 opacity:.9
   与子项 rgba(245,245,245,.9)，底下是 .bg-main 的深色渐变，看起来就是「没有背景」。
   这里在窄屏补一层不透明底色，并保证二级 / 三级层级可分辨。 */
@media screen and (max-width:760px){
  /* 展开后的导航面板：不透明白底，不再透出后面的页面内容 */
  #fh5co-header .header-nav.bg-main{
    background-color:#ffffff !important;
    border-top:1px solid #e6ebf2;
  }
  #fh5co-header .header-nav .nav{
    background-color:#ffffff;
  }
  /* 一级项：白底 + 细分割线，避免深色面板上压深灰字 */
  #fh5co-header .header-nav .nav-menu > li > a{
    background-color:#ffffff !important;
    color:#3d4a5c !important;
    border-top:1px solid #edf0f5;
    font-weight:500;
  }
  #fh5co-header .header-nav .nav-menu > li:first-child > a{
    border-top:0;
  }
  #fh5co-header .header-nav .nav-menu > li > a:hover,
  #fh5co-header .header-nav .nav-menu > li.current > a,
  #fh5co-header .header-nav .nav-menu > li > a.cur{
    background-color:var(--hn-primary-08, #eef4fd) !important;
    color:var(--hn-primary, #003366) !important;
  }
  /* 二级下拉：浅灰底，不透明 */
  #fh5co-header .header-nav .nav-menu > li > ul{
    background-color:#f4f7fb !important;
    border-top:1px solid #e6ebf2;
    border-bottom:1px solid #e6ebf2;
    opacity:1 !important;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li > a{
    background-color:#ffffff !important;
    color:#48566b !important;
    border-bottom:1px solid #eef1f6;
    padding-left:34px !important;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li:last-child > a{
    border-bottom:0;
  }
  /* 三级下拉：略深一档，与二级区分 */
  #fh5co-header .header-nav .nav-menu > li > ul > li > ul{
    background-color:#eaf0f7 !important;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li > ul > li > a{
    background-color:#eaf0f7 !important;
    color:#5a6678 !important;
    padding-left:50px !important;
  }
  #fh5co-header .header-nav .nav-menu > li > ul > li > a:hover,
  #fh5co-header .header-nav .nav-menu > li > ul > li > ul > li > a:hover{
    background-color:var(--hn-primary-08, #eef4fd) !important;
    color:var(--hn-primary, #003366) !important;
  }
}