/* ===== 移植 “#nav / .wp-menu” 的主导航布局到现有命名 ===== */

/* 相当于 .main-nav-panel / .navbar .navbox：整行容器 */
.site-header .nav-bar{
  /* 若已有 position/阴影，可按需保留你现有值 */
  width:100%;
}

/* 相当于 .wp-menu：主导航条本身，右对齐 + 两端分布 + 自动换行 */
.site-header .nav{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

/* 相当于 .wp-menu .menu-item：每个一级项固定宽度 */
.site-header .nav > li{
  position:relative;
  display:inline-block;        /* 兼容旧主题的内联布局 */
  float:left;                  /* 兼容旧主题的 float */
  flex:0 0 8%;                 /* 视觉等价于 width:8% */
  width:8%;
}

/* 原 .wp-menu .i5 { margin-left:24%; } —— 改成第5个菜单项左侧留白 */
.site-header .nav > li:nth-child(5){ margin-left:24%; }

/* 相当于 .menu-link：一级链接样式（白字、加粗、居中） */
.site-header .nav > li > a{
  display:inline-block;
  width:100%;
  text-align:center;
  line-height:1.05rem;
  color:#fff !important;
  font-size:.2rem;
  font-weight:bold;
  text-decoration:none;
  transition:color .2s ease, background-color .2s ease;
}
.site-header .nav > li > a:hover,
.site-header .nav > li:hover > a{
  color:#fff;
  background-color:transparent;  /* 与新样式一致：hover 不上底色 */
}

/* ===== 二级菜单（相当于 .sub-menu） ===== */

/* 你的 HTML 中二级菜单为 ol；若是 ul，请把 ol 改成 ul 选择器同样适用 */
.site-header .nav > li > ol{
  display:none;
  position:absolute;
  left:50%;
  top:95%;
  transform:translateX(-50%);      /* 居中对齐到父项 */
  min-width:146px;
  z-index:1000;
  background:#fff;                 /* 白底 */
  border-top:5px solid #63c0aa;    /* 顶部 5px 色条 */
  border-left:0; border-right:0; border-bottom:0;
  padding:0;
  margin:0;
  list-style:none;
  white-space:nowrap;
}
.site-header .nav > li:hover > ol{ display:block; }

/* 相当于 .sub-item a：二级链接配色（蓝字，hover 反色） */
.site-header .nav > li > ol > li > a{
  display:block;
  color:#006993;
  line-height:.24rem;
  padding:18px 10px;
  font-size:.18rem;
  text-align:center;
  background-color:#006993;
  position:relative;
  text-decoration:none;
}
.site-header .nav > li > ol > li > a:hover{
  color:#fff;
  background-color:#006993;
}

/* 二级项分隔线（与新样式一致） */
.site-header .nav > li > ol > li > a::after{
  content:'';
  position:absolute;
  left:50%; bottom:-1px;
  width:82px; height:1px;
  background-color:#d8d8d9;
  transform:translateX(-50%);
}

/* 三级菜单禁止弹出（等价 .sub-menu .sub-menu { display:none!important; }） */
.site-header .nav > li > ol > li > ol{
  display:none !important;
}

/* 兼容：确保 header 不裁剪下拉层 */
.site-header{ overflow:visible !important; }

/* —— 二级菜单配色强制修正 —— */
.site-header .nav > li > ol{
  border-top:5px solid #63c0aa !important;
}

/* 清掉可能的灰色底、圆角等遗留 */
.site-header .nav > li > ol > li{
  
  border-radius:0 !important;
}

/* 默认：蓝字、透明底 */
.site-header .nav > li > ol > li > a{
  color:#006993 
  
}

/* 悬停：白字、蓝底 */
.site-header .nav > li > ol > li > a:hover{
  color:#fff 
}

/* 分隔线颜色（可保留/微调） */
.site-header .nav > li > ol > li > a::after{
  background-color:#d8d8d9 
}




/* —— 二级菜单：强制白底 + 蓝字，悬停蓝底白字 —— */

/* 容器（flyout） */
.site-header .nav > li > ol{
  left:50% !important;               /* 居中到父级 */
  transform:translateX(-50%) !important;
  top:95% !important;
  min-width:146px !important;
  border-top:5px solid #63c0aa !important;
  border-radius:8px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
  padding:0 !important;
  margin:0 !important;
  white-space:nowrap !important;
  z-index:1200 !important;
}

/* 去掉可能残留的灰底/圆角（很多主题把灰底写在 li 上） */
.site-header .nav > li > ol > li{
  border:0 !important;
  border-radius:0 !important;
}

/* 二级链接：默认蓝字、透明底，完整占宽 */
.site-header .nav > li > ol > li > a{
  display:block !important;
  padding:18px 10px !important;
  font-size:.18rem !important;
  line-height:.24rem !important;
  text-align:center !important;
  color:#006993 !important;          /* 蓝字 */
  text-decoration:none !important;
  
}

/* 悬停：蓝底白字 */
.site-header .nav > li > ol > li > a:hover{
  color:#fff !important;
}

/* 分隔线（可选） */
.site-header .nav > li > ol > li > a::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  bottom:-1px !important;
  width:82px !important;
  height:1px !important;
  transform:translateX(-50%) !important;
}

/* 干掉主题自带的小三角或装饰，避免顶上灰色楔形 */
.site-header .nav > li > ol::before,
.site-header .nav > li > ol::after,
.site-header .nav > li > ol > li::before,
.site-header .nav > li > ol > li::after{
  content:none !important;
}

/* 保证 hover 能展开（覆盖 common_index.css 的 display:none） */
.site-header .nav li:hover > ol{ display:block !important; }


/*导航样式：后台绑定时也可以定义配置*/
.wp-menu {display:none;position:relative;}
.wp-menu .menu-item {display: inline-block;float:none; position: relative; padding-left:0px;}
.wp-menu .menu-item.i1 { background:none;}
/*.wp-menu .menu-item > .menu-switch-arrow{display: block;width: 38px;height: 38px;position: absolute;right: 6px;top: 1px;background: url(css/img/icons.png) no-repeat 10px -116px;}*/
.wp-menu .menu-item > .menu-switch-arrow { display:none !important; }

.wp-menu .menu-item a.menu-link {display:block; /* padding: 0 20px; */  line-height: 40px;color: #fff;font-size: 15px;}
.wp-menu .menu-item.i1 a.menu-link { /* padding: 0 20px!important;  */}
.wp-menu .i5 {  margin-left:0; }
.wp-menu .menu-item a.menu-link.hover,.wp-menu .menu-item.hover{ text-decoration: none; color: #000; background-color: #eee; }
.sub-menu {display: none;position:relative;left: 0;bottom: 0px;top: 0px;min-width: 0px;z-index: 1000;background: #fff;opacity: 0.8\9;background: #444343\9;filter:alpha(opacity=90); width:100%; transform: translateX(0px);  }
.sub-menu .sub-item { position: relative; white-space: nowrap; vertical-align: top; _zoom:1;/* float: left; */border: 1px solid #eee;}
.sub-menu .sub-item a { display: block;color: #000000;height: auto;line-height: 43px;padding: 0 44px;font-size: 18px; background:none;}
.sub-menu .sub-item a:hover { color: #eee; background-color:#444343; display: block; }
.sub-menu .sub-menu { left: 100%; top: 0; z-index: 200; background: rgba(11, 102, 244, 0.8); opacity: 0.8\9; background: #444343\9; filter:alpha(opacity=90); }

/* ===== 按 header.zip 同款效果：二级菜单 hover 背景变色，去掉底部分隔线 ===== */

/* 链接铺满可点、默认颜色 */
.wp-menu .sub-menu .sub-item > a{
  display:block;
  position:relative;
  text-align:center;
  color:#006993;
  text-decoration:none;
}

/* 悬停：整块高亮（和压缩包一致的色） */
.wp-menu .sub-menu .sub-item > a:hover{
  background-color:#006993;
  color:#fff;
}

/* 关闭每项底部那条细线（header.zip 里是用 ::after 画的分隔线） */
.wp-menu .sub-menu .sub-item > a::after{
  display:none !important;
}

/* 统一命中当前 DOM 里所有二级菜单容器（不再要求直接子代） */
.site-header .nav li > ol,
.site-header .wp-menu > li > ol,
.site-header .nav-bar ol,
.site-header .wp-menu > li > .sub-menu {
  border-top: 5px solid #63c0aa !important;
}

/* 保障展开（有的内联写了 display:none） */
.site-header .nav li:hover > ol,
.site-header .wp-menu li:hover > ol,
.site-header .wp-menu li:hover > .sub-menu {
  display: block !important;
}

/* 下拉菜单容器：统一白底、不透明、置顶一层 */
.site-header .nav li > ol,
.site-header .wp-menu > li > ol,
.site-header .wp-menu > li > .sub-menu {
  background: #fff !important;      /* 关键：白色背景 */
  opacity: 1 !important;            /* 防止父级透过来的透明度影响 */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);  /* 可选：柔和投影 */
  border: 1px solid rgba(0,0,0,.06);      /* 可选：细边 */
  z-index: 9999;                     /* 防止被banner等盖住 */
}

/* 下拉里的每项与链接的可读性（可选） */
.site-header .wp-menu > li > ol > li,
.site-header .wp-menu > li > .sub-menu > li,
.site-header .nav li > ol > li {
  background: #FFF;           /* 子项本身不再上色，保持容器白底 */
}

.site-header .wp-menu > li > ol > li > a,
.site-header .wp-menu > li > .sub-menu > li > a,
.site-header .nav li > ol > li > a {
  color: #333 !important;            /* 文字深色 */
  padding: 10px 14px;
  display: block;
  white-space: nowrap;
}

.site-header .wp-menu > li > ol > li > a:hover,
.site-header .wp-menu > li > .sub-menu > li > a:hover,
.site-header .nav li > ol > li > a:hover {
  color: #fff !important;            /* 文字深色 */
  background: #006993 !important;    /* 悬停浅灰，和白底区分 */
}


/* —— 顶部主导航布局（同参考包） —— */
.wp-menu {
  float: right;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.wp-menu .menu-item {
  display: inline-block;
  float: left;
  position: relative;
  width: 8%;                /* 和参考包一致：每项等宽，可按需调 */
}
.wp-menu .menu-item.i1 { background: none; }

/* 主链接外观（文字/悬停配色与参考一致） */
.wp-menu .menu-item > a.menu-link {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: transparent;
  line-height: 1.4;      /* 参考写法中用 rem，这里沿用 */
  font-weight: bold;
}
.wp-menu .menu-item > a.menu-link:hover {
  color: #fff;
  background: transparent;
}

/* —— 二级下拉（完全还原：白底、顶边色、水平居中） —— */
.sub-menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 95%;
  transform: translateX(-50%);   /* 居中对齐父项 */
  z-index: 200;
  background: #fff;
  
  border-top: 5px solid #63c0aa; /* 顶部色条（关键） */
  min-width: 180px;              /* 参考包里子项最小宽度相近 */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Hover 展开（纯 CSS，无需 JS） */
.wp-menu .menu-item:hover > .sub-menu { display: block; }

/* 二级项与链接（配色同参考） */
.sub-menu .sub-item { white-space: nowrap; }
.sub-menu .sub-item > a {
  display: block;
  color: #006993;
  text-align: center;
  padding: 8px 16px;
  line-height: 1.6;
  background: none;
}
.sub-menu .sub-item > a:hover {
  color: #fff;
  background: #006993;
}

/* 三级菜单（如果有）右侧展开，白底 */
.sub-menu .sub-menu {
  left: 100%;
  top: 0;
  z-index: 200;
  background: #fff;
  display: none !important;
}

/* 移除小三角（与你前一步的需求一致） */
.menu-switch-arrow,
.wp-menu .menu-item > .menu-switch-arrow { display: none !important; }

/* 兼容顶栏吸顶时的宽度（参考包有 top-fixed 场景） */
.top-fixed .wp-menu .menu-item { width: 10%; }

/* 1) 给主菜单链接禁止换行：防止中文按字折行 */
.wp-menu .menu-item > a,
.nav > li > a {
  white-space: nowrap;
}

/* 2) 让一级项宽度自适应（别卡死 8%） */
.site-header .nav > li,
.wp-menu .menu-item {
  flex: 0 0 auto;    /* 代替 flex:0 0 8% */
  width: auto;       /* 代替 width:8% */
  padding: 0 16px;   /* 用内边距撑开间距 */
}

/* 3) 若你仍想等宽，可调大到能容下 4~6 个汉字 */
 /* .site-header .nav > li, .wp-menu .menu-item { flex:0 0 11%; width:11%; } */


/* —— 子菜单改为与父项 LEFT 对齐 —— */
.wp-menu .menu-item { position: relative; }

.wp-menu .menu-item > .sub-menu {
  display: none;           /* 保持 hover 展开逻辑 */
  position: absolute;
  top: 100%;
  left: 0;                 /* 关键：改回左对齐 */
  right: auto;
  transform: none;         /* 取消居中偏移 */
  z-index: 200;
}

/* 右侧那组导航（logo右边）如果需要靠右对齐，用这条 */
.nav.right .wp-menu .menu-item > .sub-menu,
.site-header .nav.right > li > .sub-menu {
  left: auto;
  right: 0;                /* 关键：右对齐父项 */
  transform: none;
}

/* 如果还出现黑色小三角，统一关掉 */
.wp-menu .menu-item > .sub-menu::before,
.wp-menu .menu-item > .sub-menu::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* 仍然保持你要的样式（白底 + 顶部色条） */
.wp-menu .menu-item > .sub-menu {
  background: #fff;
  border: 1px solid #ccc;
  border-top: 5px solid #63c0aa;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 悬停展开 */
.wp-menu .menu-item:hover > .sub-menu { display: block; }


/* 父级 li 作为定位参照 */
.site-header .nav li,
.site-header .wp-menu li { position: relative; }

/* —— 左侧导航：下拉与父项左边对齐 —— */
.site-header .nav.left li > ol,
.site-header .nav.left li > .sub-menu,
.site-header .wp-menu li > ol,
.site-header .wp-menu li > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0 !important;        /* 关键：改成左对齐 */
  right: auto !important;
  transform: none !important; /* 取消 translateX(-50%) */
  margin: 0;
}

/* —— 右侧导航：下拉与父项右边对齐 —— */
.site-header .nav.right li > ol,
.site-header .nav.right li > .sub-menu {
  position: absolute;
  top: 100%;
  right: 0 !important;       /* 关键：右对齐 */
  left: auto !important;
  transform: none !important;
  margin: 0;
}

/* 保障展示层级，避免被 banner/徽章遮住 */
.site-header .nav li > ol,
.site-header .nav li > .sub-menu { z-index: 9999; }

/* 若仍出现小黑三角，统一去掉 */
.site-header .nav li > ol::before,
.site-header .nav li > ol::after,
.site-header .nav li > .sub-menu::before,
.site-header .nav li > .sub-menu::after { content: none !important; border: 0 !important; }

/* 1) 子菜单紧贴父项，不留缝 */
.wp-menu .menu-item > .sub-menu {
  top: 100% !important;
  margin-top: -1px !important;   /* 盖住可能来自父级的1px白线 */
  padding-top: 0 !important;
  background-clip: border-box;   /* 绿色顶边到最上缘 */
}

/* 2) 去掉父级链接的下边框/阴影等“下划线”效果 */
.wp-menu .menu-item > a,
.wp-menu .menu-item:hover > a {
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;  /* 有些主题用渐变做下划线 */
}

/* 3) 子菜单不要生成任何白色分隔伪元素 */
.wp-menu .menu-item > .sub-menu::before,
.wp-menu .menu-item > .sub-menu::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* 4) 保留你要的视觉：白底 + 绿色顶边 */
.wp-menu .menu-item > .sub-menu {
  background: #fff !important;
  border: 1px solid #e5e6eb !important;
  border-top: 5px solid #63c0aa !important;  /* 只保留这条顶边 */
}


/* 让一级导航强制单行，不换行 */
.nav-bar > ul.nav {                     /* 左/右这两组一级导航 */
  display: flex !important;
  flex-wrap: nowrap !important;         /* 关键：不允许换行 */
  align-items: center;
  gap: 0;                                /* 需要间距就靠 li 的 padding 控制 */
  padding: 0;
  margin: 0;
}

/* 一级项宽度自适应，不要固定百分比 */
.nav-bar > ul.nav > li {
  flex: 0 0 auto !important;
  width: auto !important;               /* 覆盖之前的 width:8% 之类 */
}

/* 一级链接不换行，避免中文被拆成竖排 */
.nav-bar > ul.nav > li > a {
  white-space: nowrap !important;
  padding: 0 14px;                      /* 视空间可再调小或调大 */
}

/* 如果你在别处给 .site-header .nav 写了 wrap，这里强制关掉 */
.site-header .nav { flex-wrap: nowrap !important; }

/* （可选）如果曾给 .wp-menu 这一套导航 display:none，确保不“抢位” */
.wp-menu { display: none; }  /* 只保留旧的 .nav 这一套在用时 */


/* —— 统一修正 .wp-menu 为“内容自宽 + 单行不换行” —— */
.site-header .nav .wp-menu {
  display: flex !important;
  flex-wrap: nowrap !important;   /* 不换行 */
  justify-content: flex-end;      /* 左栏靠右，右栏我们单独调 */
  align-items: center;
  width: auto !important;         /* 不再 100%，避免把整列撑满 */
  margin: 0; padding: 0; gap: 24px;  /* 间距可改 16~28 */
  list-style: none;
}

/* 右侧那组靠左排（避免往右“顶格”看着不齐） */
.site-header .nav.right .wp-menu {
  justify-content: flex-start !important;
}

/* 一级项：自适应，不要 8% 固定等宽 */
.site-header .nav .wp-menu .menu-item {
  position: relative;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0;                     /* 间距放到 <a> 上控制 */
}

/* 一级链接：不换行，控制左右内边距即可 */
.site-header .nav .wp-menu .menu-item > a {
  display: inline-block;
  white-space: nowrap;
  padding: 0 14px;                /* 这里调整体疏密 */
}

/* —— 子菜单维持“相对父项居中”的现有效果 —— */
.site-header .nav .wp-menu .menu-item > .sub-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}

/* —— 清理历史遗留会造成错位/留白的规则 —— */
.site-header .nav > li:nth-child(5) { margin-left: 0 !important; } /* 清掉 24% 空白 */
.wp-menu { width: auto !important; }                                /* 覆盖旧的 width:100% */
.wp-menu .menu-item { width: auto !important; }                     /* 覆盖旧的 8% 等宽 */

/* 收紧两侧一级导航的整体间距与单项内边距 */
.site-header .nav .wp-menu{
  gap: 14px !important;             /* 原来 24px → 14px */
}
.site-header .nav .wp-menu .menu-item > a{
  padding: 0 10px !important;       /* 原来 14px → 10px */
}

/*20250928增加*/

/* 调整二级 <ol> 的“容器宽度 + 行高/内边距” */
.site-header .nav > li > ol{
  top:100% !important;             /* 贴紧一级，去掉白缝 */
  min-width: 142px !important;     /* 目标宽度 */
}

.site-header .nav > li > ol > li > a{
  padding: 8px 12px !important;    /* ← 收紧每项 */
  line-height: 1.4 !important;
  font-size: 15px !important;      /* 需要更紧凑可 14px */
}

/*  .sub-menu 类的二级，防止被拉到 100% 宽 */
.site-header .nav .wp-menu .menu-item > .sub-menu{
  width: auto !important;
  min-width: 142px !important;     /* 和上面保持一致 */
}

/*20250929*/
/* 统一按高度控制 LOGO，等比缩放 */
.site-header .logo img {
  height: 64px !important;   /* 自己改成想要的，比如 56/64/72px */
  width: auto !important;
}

/* 如果某些页头用了 .brand 命名，也一并覆盖（防止 clamp 限制） */
.site-header .brand img {
  height: 64px !important;
  width: auto !important;
}

/* 低分辨率下稍微再小一点，避免压到导航 */
@media (max-width: 1366px) {
  .site-header .logo img,
  .site-header .brand img { height: 56px !important; }
}

