.header-container {
  width: 100%;
  height: 80px;
  height: var(--header-height, 80px);
  position: fixed;
  top: 0;
  left: 0;
  --bg-color: rgba(0, 0, 0, 0.35);
  --text-color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32157);
  color: #fff;
  color: var(--text-color, #fff);
  z-index: 999;
  transition: background-color 0.5s;
  transition: height 0.3s;
}
.isSubpage {
  position: static !important;
}
.header-container:hover,
.header-container.not-top,
.header-container.isSubpage {
  --bg-color: #fff;
  --text-color: rgba(51, 51, 51, 1);
  background-color: #fff;
  background-color: var(--bg-color, #fff);
  color: #333;
  color: var(--text-color, rgba(51, 51, 51, 1));
  border-bottom: 1px solid #f5f5f5;
}
.header-container:hover .header-logo .logo_light,
.header-container.not-top .header-logo .logo_light,
.header-container.isSubpage .header-logo .logo_light {
  display: none;
}
.header-container:hover .header-logo .logo_dark,
.header-container.not-top .header-logo .logo_dark,
.header-container.isSubpage .header-logo .logo_dark {
  display: block;
}
.header-container:hover .header-btns,
.header-container.not-top .header-btns,
.header-container.isSubpage .header-btns {
  color: #333;
}
.header-container_center {
  height: 100%;
  display: flex;
  align-items: center;
}
.header-logo {
  margin-right: auto;
}
.header-logo .link {
  display: block;
}
.header-logo .logo_dark {
  display: none;
}
.header-logo {
  width: 80px;
}
@media (min-width: 769px) {
  .header-logo {
    width: 90px;
  }
}
@media (min-width: 1281px) {
  .header-logo {
    width: 110px;
  }
}
@media (min-width: 1281px) {
  .header-logo {
    width: 135px;
  }
}
.header-logo img {
  width: 100%;
}
.navs {
  display: none;
  height: 100%;
}
@media (min-width: 1025px) {
  .navs {
    display: flex;
  }
}
.navs {
  font-size: 20px;
  font-weight:bold;
}
.nav-bar {
  position: relative;
  margin: 0 2vw;
}
.nav-bar_head {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}
.nav-bar_group {
  position: absolute;
  display: none;
  background-color: #fff;
  width: 200%;
  left: 50%;
  top: 100%;
  transform: translate(-50%);
  padding: 4px 0;
  z-index: 99999;
}
.nav-bar_group .nav-bar_group_a {
  display: block;
  padding: 0 10px;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.nav-bar_group .nav-bar_group_a:hover {
  color: #11a897;
}
.nav-bar:hover .nav-bar_group{
  display: block;
  border-top: 1px solid #11a897;
}
.nav-bar.active .nav-bar_head a,.nav-bar.active .nav-bar_head{
    
}
/*,.isSubpage .nav-bar.active .nav-bar_head a*/
.not-top .nav-bar.active .nav-bar_head a,.not-top .nav-bar.active .nav-bar_head,.nav-bar .nav-bar_head:hover{
    color: #089c8e;
}
.header-btns {
  color: #fff;
  display: flex;
  gap: 20px;
}
.header-btns .button-x .iconfont {
  font-size: 22px;
}
.menu-btn {
  display: block;
}
@media (min-width: 1025px) {
  .menu-btn {
    display: none;
  }
}
.mob-menu-w {
  width: 0 !important;
}
.mobile-navs {
  width: 70vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  overflow: hidden;
  transition: width 0.3s;
  box-shadow: 15px 0 0 100vw #0000004d;
}
@media (min-width: 1025px) {
  .mobile-navs {
    display: none;
    pointer-events: none;
  }
}
.mobile-navs-warp {
  width: 70vw;
}
.mobile-nav-bar {
  border-bottom: 1px solid #e7e7e7;
}
.mobile-nav-bar .mobile-nav-bar_head {
  padding: 10px 15px;
  display: block;
  font-size: 14px;
}
.mobile-nav-bar .mobile-nav-bar_group {
  padding: 0 30px;
}
.mobile-nav-bar .mobile-nav-bar_group_a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
}
.mobile-nav-bar .mobile-nav-bar_group_a:last-child {
  border-bottom: 0;
}
.mobile-nav-bar > div {
  position: relative;
}
.mobile-nav-bar > div:nth-child(1):after {
  content: '>';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 10px;
  height: 15px;
  margin: auto 0;
  transition: all 0.3s;
}
.mobile-nav-bar_active .mobile-nav-bar_group {
  border-top: 1px solid #e7e7e7;
}
.mobile-nav-bar_active .mobile-nav-bar_head {
  background-color: #eee;
}
.mobile-nav-bar_active > div:nth-child(1):after {
  transform: rotate(90deg);
}
[x-cloak] {
  display: none !important;
}
.search-container-x {
  width: 100vw;
  position: fixed;
  display: flex;
  z-index: 999;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 80px;
  padding-top: var(--header-height, 80px);
  top: 0;
  left: 0;
}
.serch-x {
  width: 100%;
}
@media (min-width: 769px) {
  .serch-x {
    width: 540px;
  }
}
.serch-x {
  --height: 40px;
  --border-y-size: 15px;
  --border-x-size: 20px;
}
@media (min-width: 1025px) {
  .serch-x {
    --height: 60px;
    --border-y-size: 26px;
    --border-x-size: 40px;
  }
}
.serch-x {
  border-top: var(--border-y-size) solid #11a897;
  border-bottom: var(--border-y-size) solid #11a897;
  border-left: var(--border-x-size) solid #11a897;
  border-right: var(--border-x-size) solid #11a897;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.serch-x input {
  height: var(--height);
  width: calc(100% - 80px);
  outline: 0;
  background-color: transparent;
  padding: 10px;
}
.serch-x .submit {
  width: 80px;
  height: var(--height);
  background-color: #e58402;
  color: #fff;
}
.serch-x .submit .iconfont {
  font-size: 24px;
}
body {
  --header-height: 50px;
  --container-center-width: 100%;
  font-size: 12px;
}
@media (min-width: 769px) {
  body {
    font-size: 14px;
    --header-height: 60px;
  }
}
@media (min-width: 1025px) {
  body {
    font-size: 16px;
    --header-height: 70px;
  }
}
@media (min-width: 1281px) {
  body {
    --header-height: 80px;
  }
}
@media (min-width: 1601px) {
  body {
    --container-center-width: 1600px;
  }
}
.container-x {
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 769px) {
  .container-x {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1025px) {
  .container-x {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1281px) {
  .container-x {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (min-width: 1537px) {
  .container-x {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 1601px) {
  .container-x {
    padding-left: 0;
    padding-right: 0;
  }
}
.container-x_center {
  width: var(--container-center-width);
  margin-right: auto;
  margin-left: auto;
}
.fade-right-init {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translate(-100%);
}
.fade-right {
  transform: translate(0) !important;
  opacity: 1 !important;
}
.fade-left-init {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 0;
  transform: translate(100%);
}
.fade-left {
  transform: translate(0) !important;
  opacity: 1 !important;
}
.fade-top-init {
  --an-time: 1s;
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-duration: var(--an-time);
  opacity: 0;
  transform: translateY(100%);
}
.fade-top {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.translateY {
  transition: transform 0.3s;
}
.translateY:hover {
  transform: translateY(-10px);
}
.list-padding-y {
  padding: 20px 0;
}
@media (min-width: 769px) {
  .list-padding-y {
    padding: 35px 0;
  }
}
@media (min-width: 1025px) {
  .list-padding-y {
    padding: 50px 0;
  }
}
.sub-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}
@media (min-width: 1025px) {
  .sub-card-list {
    gap: 40px;
  }
}
@media (min-width: 769px) {
  .sub-card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}
.sub-card-item {
  display: block;
}