/* Use one explicit regular face so page-local fonts cannot make active items look bold. */
@font-face {
  font-family: "JXF-Nav-Regular";
  src: url("assets/04ff013ef7-SourceHanSansCN-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

/* Shared navigation typography: the homepage is the visual authority. */
:root {
  --jxf-nav-font-family: "JXF-Nav-Regular", "PingFang SC", "Microsoft YaHei", sans-serif;
  --jxf-nav-font-size: 16px;
  --jxf-nav-font-weight: 400;
  --jxf-nav-line-height: 24px;
}

/* Keep the homepage's 15px desktop scrollbar gutter on short pages as well. */
@media (min-width: 751px) {
  html {
    overflow-y: scroll;
    scrollbar-width: auto !important;
  }

  html::-webkit-scrollbar {
    display: block !important;
    width: 15px !important;
  }

  @supports (scrollbar-gutter: stable) {
    html {
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
  }
}

#header,
#mobile_header,
.mobile_nav_wrap {
  font-family: var(--jxf-nav-font-family) !important;
  font-size: var(--jxf-nav-font-size) !important;
  font-weight: var(--jxf-nav-font-weight) !important;
  line-height: var(--jxf-nav-line-height) !important;
  font-synthesis: none !important;
}

/* Freeze the homepage desktop geometry so page-level CSS cannot alter it. */
#header .header_con .nav_list_box .nav_list > .nav_item {
  margin: 0 16px 0 0 !important;
  padding: 8px 24px !important;
}

#header .header_con .nav_list_box .nav_list > .nav_item:last-child {
  margin-right: 0 !important;
}

#header .nav_list > .nav_item,
#header .nav_list > .nav_item .nav_item_link,
#header .nav_list > .nav_item .nav_item_title,
#header .header_right .language_font,
#pad_nav .nav_title,
#pad_nav .nav_inner_item,
.mobile_nav_wrap .nav_list > .nav_item,
.mobile_nav_wrap .nav_list > .nav_item.active,
.mobile_nav_wrap .nav_list > .nav_item .nav_item_link,
.mobile_nav_wrap .nav_list > .nav_item .nav_item_title,
.mobile_nav_wrap .mobile_nav_inner_list .nav_inner_item,
.mobile_nav_wrap .return_title,
.mobile_nav_wrap .language_font {
  font-family: var(--jxf-nav-font-family) !important;
  font-size: var(--jxf-nav-font-size) !important;
  font-weight: var(--jxf-nav-font-weight) !important;
  line-height: var(--jxf-nav-line-height) !important;
  letter-spacing: 0 !important;
  font-synthesis: none !important;
}

/* The shared language entry is now the official Tmall store link. */
#header .jxf-official-store,
.mobile_nav_wrap .jxf-official-store {
  color: inherit;
  text-decoration: none;
}

.mobile_nav_wrap .jxf-official-store--mobile {
  color: #292929;
}

.mobile_nav_wrap .jxf-official-store--mobile .language_icon {
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}

.mobile_nav_wrap .jxf-official-store--mobile .language_font {
  margin-left: 10px;
}

/* Current-page state uses the underline/color only, never a different weight. */
#header .nav_list > .nav_item.active,
#pad_nav .nav_list > .nav_item.active,
.mobile_nav_wrap .nav_list > .nav_item.active {
  font-family: var(--jxf-nav-font-family) !important;
  font-weight: var(--jxf-nav-font-weight) !important;
}

/* Banner headers keep the homepage's white hover treatment. */
#header.header.banner_head:not(.header_bg_color) .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_link,
#header.header.banner_head:not(.header_bg_color) .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_title,
#header.header.banner_head:not(.header_bg_color) .header_con .nav_list_box .nav_list > .nav_item:hover .nav_ico {
  color: #fff !important;
}

#header.header.banner_head:not(.header_bg_color) .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_link::after {
  background-color: #fff !important;
}

/* White/compact headers use the brand color for the current page. */
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item.active .nav_item_link,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item.active .nav_item_title,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item.active .nav_ico,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_link,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_title,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item:hover .nav_ico {
  color: #21536c !important;
}

#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item.active .nav_item_link::after,
#header.header.banner_head.mini .header_con .nav_list_box .nav_list > .nav_item:hover .nav_item_link::after {
  background-color: #21536c !important;
}

/* The mobile menu itself is white, so its current item uses the same color. */
.mobile_nav_wrap .nav_list > .nav_item.active,
.mobile_nav_wrap .nav_list > .nav_item.active .nav_item_link,
.mobile_nav_wrap .nav_list > .nav_item.active .nav_item_title {
  color: #21536c !important;
}

/* 走进君星坊下拉菜单悬停色 */
#header .nav_inner_wrap .nav_inner_item_head:hover {
  background-color: #21536c !important;
  color: #fff !important;
}

#pad_nav .nav_inner_list .nav_inner_item:hover,
#mobile_header ~ .mobile_nav_wrap .mobile_nav_inner_list .nav_inner_item:hover {
  color: #21536c !important;
}