/* 二级菜单 submenu 样式优化 */

/* 主菜单项包含二级菜单的样式 */
.menu ul li {
  position: relative;
}

/* 二级菜单容器 */
.menu ul li .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  background: #fff !important;
  border: none !important;
  border-top: 3px solid #00C0E1 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 8px 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 1000 !important;
  padding: 15px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 主菜单hover时显示二级菜单 */
.menu ul li:hover .submenu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* 二级菜单项样式 */
.menu ul li .submenu li {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
}

.menu ul li .submenu li:last-child {
  border-bottom: none !important;
}

.menu ul li .submenu li a,
.menu ul li .submenu li {
  display: block !important;
  padding: 12px 20px !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  font-family: 'Noto Sans SC', sans-serif !important;
  text-decoration: none !important;
  border: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

/* 二级菜单项hover效果 */
.menu ul li .submenu li:hover,
.menu ul li .submenu li a:hover {
  background: linear-gradient(135deg, #00C0E1 0%, #00A5C7 100%) !important;
  color: #fff !important;
  /* transform: translateX(5px) !important; */
}

/* 二级菜单项左侧装饰线 */
.menu ul li .submenu li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: #00C0E1;
  transition: height 0.2s ease;
}

.menu ul li .submenu li:hover:before {
  height: 60%;
}

/* 主菜单项包含二级菜单的指示箭头 */
/* .menu ul li:has(.submenu)>a:after,
.menu ul li .submenu-parent:after {
  content: '▼';
  font-size: 10px;
  color: #999;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.menu ul li:hover:has(.submenu)>a:after,
.menu ul li:hover .submenu-parent:after {
  transform: rotate(180deg);
  color: #00C0E1;
} */

/* 修正固定导航栏中的二级菜单 */
nav.sticky .menu ul li .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  background: #fff !important;
  border-top: 3px solid #00C0E1 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 8px 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 1000 !important;
  padding: 15px 0 !important;
}

nav.sticky .menu ul li:hover .submenu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

nav.sticky .menu ul li .submenu li {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

nav.sticky .menu ul li .submenu li a,
nav.sticky .menu ul li .submenu li {
  display: block !important;
  padding: 12px 20px !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}

nav.sticky .menu ul li .submenu li:hover {
  background: linear-gradient(135deg, #00C0E1 0%, #00A5C7 100%) !important;
  color: #fff !important;
  transform: translateX(5px) !important;
}

/* 响应式设计 - 移动端隐藏二级菜单 */
@media (max-width: 991px) {
  .menu ul li .submenu {
    display: none !important;
  }
}

/* 为移动端菜单添加二级菜单支持 */
@media (max-width: 991px) {
  .dl-menu .submenu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    margin-left: 20px !important;
    padding: 10px 0 !important;
  }

  .dl-menu .submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .dl-menu .submenu li a,
  .dl-menu .submenu li {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
  }

  .dl-menu .submenu li:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
}

/* 二级菜单 submenu 统一样式 */

/* 通用二级菜单样式 - 适用于正常导航栏和固定导航栏 */
.menu ul li,
nav.sticky .menu ul li {
  position: relative;
}

/* 二级菜单容器 - 通用样式 */
.menu ul li .submenu,
nav.sticky .menu ul li .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 180px !important;
  background: #fff !important;
  border: none !important;
  border-top: 2px solid #00C0E1 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 0 6px 6px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 10000 !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 主菜单hover时显示二级菜单 - 通用 */
.menu ul li:hover .submenu,
nav.sticky .menu ul li:hover .submenu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* 二级菜单项样式 - 通用 */
.menu ul li .submenu li,
nav.sticky .menu ul li .submenu li {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  margin: 0 !important;
}

.menu ul li .submenu li:last-child,
nav.sticky .menu ul li .submenu li:last-child {
  border-bottom: none !important;
}

/* 二级菜单链接样式 - 通用 */
.menu ul li .submenu li a,
nav.sticky .menu ul li .submenu li a {
  display: block !important;
  padding: 10px 18px !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  font-family: 'Noto Sans SC', sans-serif !important;
  text-decoration: none !important;
  border: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  background: transparent !important;
}

/* 二级菜单项hover效果 - 通用 */
.menu ul li .submenu li:hover,
.menu ul li .submenu li a:hover,
nav.sticky .menu ul li .submenu li:hover,
nav.sticky .menu ul li .submenu li a:hover {
  background: #00C0E1 !important;
  color: #fff !important;
  transform: translateX(3px) !important;
}

/* 二级菜单项左侧装饰线 - 通用 */
.menu ul li .submenu li:before,
nav.sticky .menu ul li .submenu li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: #00C0E1;
  transition: height 0.2s ease;
}

.menu ul li .submenu li:hover:before,
nav.sticky .menu ul li .submenu li:hover:before {
  height: 70%;
}

/* 主菜单项包含二级菜单的指示箭头 - 通用 */
/* .menu ul li:has(.submenu)>a:after,
nav.sticky .menu ul li:has(.submenu)>a:after {
  content: '▼';
  font-size: 9px;
  color: #999;
  margin-left: 6px;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.menu ul li:hover:has(.submenu)>a:after,
nav.sticky .menu ul li:hover:has(.submenu)>a:after {
  transform: rotate(180deg);
  color: #00C0E1;
} */

/* 特殊处理：确保固定导航栏的z-index */
nav.sticky .menu ul li .submenu {
  z-index: 10001 !important;
}

/* 防止submenu超出容器 */
.menu ul li:nth-last-child(-n+2) .submenu,
nav.sticky .menu ul li:nth-last-child(-n+2) .submenu {
  left: auto !important;
  right: 0 !important;
}

/* 响应式设计 - 桌面端优化 */
@media (min-width: 992px) {

  .menu ul li .submenu,
  nav.sticky .menu ul li .submenu {
    min-width: 160px !important;
  }
}

/* 移动端处理 */
@media (max-width: 991px) {

  /* 在移动端，二级菜单集成到dl-menu中 */
  .dl-menu .submenu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    border-left: 2px solid rgba(0, 192, 227, 0.5) !important;
    margin-left: 15px !important;
  }

  .dl-menu .submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
  }

  .dl-menu .submenu li:last-child {
    border-bottom: none !important;
  }

  .dl-menu .submenu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 15px !important;
    font-size: 13px !important;
    background: transparent !important;
  }

  .dl-menu .submenu li:hover,
  .dl-menu .submenu li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transform: none !important;
  }

  .dl-menu .submenu li:before {
    display: none !important;
  }

  /* 移动端隐藏桌面端的二级菜单 */
  .menu ul li .submenu {
    display: none !important;
  }
}

/* 确保在所有情况下submenu都有正确的定位上下文 */
.menu,
nav.sticky .menu {
  position: relative;
}

/* 修复可能的层级问题 */
.menu ul li:hover,
nav.sticky .menu ul li:hover {
  z-index: 1001;
}

/* 平滑动画优化 */
.menu ul li .submenu li,
nav.sticky .menu ul li .submenu li {
  transition: all 0.2s ease, transform 0.15s ease !important;
}

/* 确保二级菜单不会因为父级样式被覆盖 */
.menu ul li ul.submenu,
nav.sticky .menu ul li ul.submenu {
  width: auto !important;
  float: none !important;
}

.menu ul li ul.submenu li,
nav.sticky .menu ul li ul.submenu li {
  width: 100% !important;
  float: none !important;
}