/* 导航栏 */
:root {
  --font-size: 19.2px;
}

.nav-header {
  height: var(--header_h);
  position: fixed;
  z-index: 999;
  width: 100%;
  color: #fff;
}

.nav-header .container {
  width: 100%;
  /* padding: 0 8%; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.6px solid rgba(255, 255, 255, 0.2);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 58px;
}

.nav-right {
  height: 100%;
  display: flex;
}

.nav-links {
  height: 100%;
}

.nav-menu {
  display: flex;
  list-style: none;
  height: 100%;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-item a {
  text-decoration: none;
  padding: 0 24px;
  font-size: var(--font-size);
  color: inherit;
  transition: color 0.3s;
}

/* 主导航文字：悬停 / 当前板块时变红（去掉底部红线，仅文字变红） */
.nav-item:hover > a,
.nav-item.active > a {
  color: var(--primary-color) !important;
}

/* 子菜单当前项高亮（红字 + 浅红底） */
.nav-two li.active > a { background-color: #f5f5f5;}
.nav-two {
  position: absolute;
  top: calc(100% - 2.4px);
  left: 50%;
  transform: translateX(-50%) scaleY(0.2);
  /* 初始压缩 */
  transform-origin: top center;
  /* 从顶部展开 */
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  list-style: none;
  white-space: nowrap;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  min-width: 140px;
}

.nav-two::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background-color: var(--primary-color);
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-two::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  width: 0;
  height: 0;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.04));
}

.nav-item:hover .nav-two::before {
  width: 60%;
}

.nav-item:hover .nav-two {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  /* 恢复原高度 */
  visibility: visible;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-two li a {
  display: block;
  padding: 12px 24px;
  font-size: 15.2px;
  color: #333 !important;
  transition: all 0.2s ease;
}

.nav-two li .active,
.nav-two li a:hover {
  background-color: #f5f5f5;
  color: var(--primary-color) !important;
}

.menu {
  position: absolute;
  top: calc(100% - 2.4px);
  left: 50%;
  transform: translateX(-50%) scaleY(0.2);
  /* 初始沿Y轴压缩到80%高度 */
  transform-origin: top center;
  /* 缩放原点：顶部居中（从顶部开始展开） */
  background-color: #fff;
  /* min-width: 50vw; */
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  /* 初始透明 */
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* 平滑过渡曲线 */
  pointer-events: none;
  border-top: 2.4px solid transparent;
}

.menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2.4px;
  background-color: var(--primary-color);
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-item:hover .menu::before {
  width: 90%;
}

.nav-item:hover .menu {
  opacity: 1;
  /* 完全显示 */
  transform: translateX(-50%) scaleY(1);
  /* 恢复原高度 */
  visibility: visible;
  pointer-events: auto;
}

/* 三级联动下拉菜单 */
.cascade-menu {
  min-width: 900px !important;
  padding: 0 !important;
}

.cascade-container {
  display: flex;
  width: 100%;
}

.cascade-level {
  flex: 1;
  min-height: 200px;
  border-right: 1px solid #eee;
}

.cascade-level:last-child {
  border-right: none;
}

.cascade-level .cascade-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 默认隐藏所有二级、三级列表组 */
.cascade-level.level-2 .level2-group,
.cascade-level.level-3 .level3-group {
  display: none;
}

/* 显示当前激活的列表组 */
.cascade-level.level-2 .level2-group.active,
.cascade-level.level-3 .level3-group.active {
  display: block;
}

.cascade-level .cascade-item {
  position: relative;
}

.cascade-level .cascade-item a {
  display: block;
  padding: 12px 20px;
  font-size: 15.2px;
  color: #333 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.cascade-level.level-1 .cascade-item a {
  font-weight: 500;
  font-size: 16px;
}

.cascade-level .cascade-item:hover a,
.cascade-level .cascade-item.active a {
  background-color: #f5f5f5;
  color: var(--primary-color) !important;
  border-left-color: var(--primary-color);
}

/* 箭头指示器 */
.cascade-level .cascade-item.has-children::after {
  content: ">";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14.4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.cascade-level .cascade-item:hover.has-children::after {
  opacity: 1;
}

/* 选中状态的强调效果 */
.cascade-level .cascade-item.active > a {
  background-color: #ffe6e6;
  color: var(--primary-color) !important;
  font-weight: 600;
}

/* 标题样式 */
.cascade-level .level-title {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
}

/* 二级、三级标题指示 */
.cascade-level.level-2 .cascade-item.active > a::before,
.cascade-level.level-3 .cascade-item.active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--primary-color);
}

.cascade-level.level-2 .cascade-item > a,
.cascade-level.level-3 .cascade-item > a {
  padding-left: 25px;
}

/* 移动端适配 */
@media (max-width: 990px) {
  .cascade-menu {
    display: none !important;
  }
}

/* 无数据提示 */
.cascade-level .cascade-item .no-data {
  display: block;
  padding: 12px 20px;
  color: #999;
  font-size: 14.4px;
  font-style: italic;
}

.nav-actions {
  display: flex;
  align-items: center;
  padding-left: 64px;
}

.nav-actions .icon-search {
  color: inherit;
  font-size: var(--font-size);
  cursor: pointer;
}

.mobile-menu {
  display: none;
}

.icon-close,
.icon-ego-menu {
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}

/* 菜单显示时的状态 */
.container-mobile.show {
  left: 0;
}

.container-mobile {
  position: fixed;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  /* opacity: .8; */
  background: #000;
  z-index: 1000;
  transition: left 0.3s ease;
}

.container-mobile .menu-header {
  height: var(--header_h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.container-mobile .menu-header .mobile-logo img {
  height: 58px;
}

.container-mobile .menu-header .icon-close {
  position: absolute;
  top: 30%;
  right: 24px;
  color: #fff;
}

.container-mobile .search-form {
  border: 1px solid #fff;
  border-radius: 6px;
  margin: 0 24px;
  padding: 8px;
  display: flex;
  align-items: center;
}

.container-mobile .search-form .icon-search {
  color: #fff;
  margin-right: 8px;
}

.container-mobile .search-form .search-input {
  flex: 1;
  color: #fff;
  font-size: 17.6px;
}

/* 菜单栏容器 */
.doc-menu {
  margin: 24px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.doc-menu .menu-root,
.doc-menu .menu-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-menu .menu-item {
  position: relative;
}

.doc-menu {
  /* 菜单项链接（整行可点击） */
}

.doc-menu .menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12.8px 14.4px;
  color: black;
  font-size: 17.6px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.doc-menu .menu-link:hover,
.doc-menu .menu-link.active {
  background-color: #f2f3f5;
  color: var(--primary-color);
}

.doc-menu .menu-link.active,
.doc-menu .menu-link.active {
  background-color: #ffe6e6;
  color: var(--primary-color);
  font-weight: 500;
}

.doc-menu {
  /* 层级缩进 */
}

.doc-menu .menu-item>.menu-children {
  padding-left: 12.8px;
  border-left: 1px dashed #e5e6eb;
  margin-left: 12.8px;
}

.doc-menu {
  /* 展开/收起按钮 */
}

.doc-menu .menu-toggle {
  width: 19.2px;
  height: 19.2px;
  margin-left: 12.8px;
  text-align: center;
  line-height: 19.2px;
  font-size: 17.6px;
  color: black;
}

.doc-menu {
  /* 按钮状态 */
}

.doc-menu .toggle-collapsed::before {
  content: "+";
}

.doc-menu .toggle-expanded::before {
  content: "-";
}

.doc-menu {
  /* 子菜单显示控制 */
}

.doc-menu .menu-children {
  display: none;
}

.doc-menu .menu-item.expanded>.menu-children {
  display: block;
  animation: slideDown 0.2s ease;
}

.doc-menu {
  /* 无下级菜单的项隐藏按钮 */
}

.doc-menu .no-children .menu-toggle {
  visibility: hidden;
}

.doc-menu .menu-root>.menu-item>.menu-link>span:first-child {
  font-size: 19.2px;
}

/* 搜索框 */
.search-input {
  background-color: transparent;
  border: none;
  width: auto;
}

.search-input:active {
  border: none;
}

.search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.search-input::placeholder {
  color: #fff;
  opacity: 0.8;
}

/* 全屏搜索框 - 基础样式 */
.container-search {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.9;
  z-index: 1000;
  transition: top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.container-search.show {
  top: 0;
}

.container-search>.icon-close {
  position: absolute;
  right: 7.6%;
  top: 7%;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

.container-search>.search-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 水平+垂直居中 */
  z-index: 1000;
  border-bottom: 1.6px solid #fff;
  width: 50%;
  height: 88px;
  line-height: 88px;
  display: flex;
  align-items: center;
}

.container-search>.search-form>.search-input {
  flex: 1;
  font-size: 20.8px;
  color: #fff;
  padding: 0;
}

.icon-arrow-right-top {
  font-size: 36.8px !important;
  color: #fff;
  cursor: pointer;
  margin-left: 8px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 990px) {
  :root {
    --font-size: 16px;
  }

  .logo-img img {
    height: 48px;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }

  .mobile-menu {
    display: flex;
    align-items: center;
  }

  .mobile-menu .login a {
    color: black;
    font-size: 20.8px;
    padding: 0 20.8px;
    line-height: 1;
  }
}

@media (max-width:1400px) {
  .nav-item a {
    padding: 0 16px;
  }

  .nav-actions {
    padding-left: 48px;
  }
}