.header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #efefef;
  position: relative;
  left: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 99999;
  position: sticky;
  top: 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.10294);
}

.header-container {
  width: 1166px;
  display: flex;
  align-items: center;
}

.header .logo {
  float: left;
  overflow: hidden;
  height: 60px;
  margin-right: 52px;
}

.header .logo h1,
.header .logo div {
  height: 100%;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header .logo a {
  min-width: 160px;
  height: 28px;
  display: block;
  position: relative;
  font-size: 0;
  overflow: hidden;
}
.header .logo a img {
  width: 100%;
  max-width: 100%;
  height: 28px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

.header .nav-bar .navbar-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.header .nav-bar .nav {
  display: flex;
  align-items: center;
}
.header .nav-bar li {display:inline-block;height:60px;line-height:60px;position:relative;vertical-align:top;padding:0 15px;min-width:64px;}
.header .nav-bar li a {display:inline-block;color:#1F2D3D;opacity:1;min-width: 32px; font-size:16px;position:relative;z-index:2;text-align:center;font-weight: 400;box-sizing: border-box;}
.header .nav-bar li em[class*="dot"] {display:inline-block;position:relative;left:-10px;z-index:2;width:16px;}
.header .nav-bar li em[class*="dot"] .fa {color:#333;font-size:16px;width:16px;display:block;}
.header .nav-bar li:hover em[class*="dot"] .fa,.header .nav-bar li.active em[class*="dot"] .fa{color:#fff;}
.header .nav-bar li a:hover {
  color:rgba(80, 201, 194, 1);
}
.header .nav-bar li ul li:hover {
  background-color: rgba(80, 201, 194, 1);
}

.header .nav-bar li ul li:hover a {
  color:#FFF;
}

.header .nav-bar li:has(ul)::after {
  content: '';
  border: 5px solid transparent;
  border-top-color: rgba(80, 201, 194, 1);
  margin-top: 5px;
  margin-left: 8px;
}
/* .header .nav-bar li.active a,.header .nav-bar li a:hover,.header .nav-bar li:hover,.header .nav-bar li.on,.header .nav-bar li> li{opacity:1;color:rgba(80, 201, 194, 1);} */
.header .nav-bar li.active {background-color:rgba(80, 201, 194, 1);}
.header .nav-bar li.active:before {width:100%;position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background-color:#ff4b4b;content:'';border-radius:50px;}
/*二级高亮*/
.header .nav-bar ul li>ul {border-radius: 10px; overflow: hidden; width:100%;min-width:110px;position:absolute;top:110%;left:50%;transform:translateX(-50%);right:0;background:#fff;z-index:888;visibility:hidden;opacity:0;box-shadow:0px 2px 10px rgba(0,0,0,.2);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
.header .nav-bar ul li>ul li {width:100%;height:42px;line-height:42px;display:block;}
.header .nav-bar ul li>ul li a {width: 100%;display:block;text-align:center;height:42px;line-height:42px;font-size:14px;color:rgba(0,0,0,0.8);opacity:1;}
.header .nav-bar ul li.active>ul li a{background-color:#fff;color:#333;}
.header .nav-bar ul li.active>ul li a:hover{background-color:rgba(80, 201, 194, 1);color:#fff;}
.header .nav-bar ul li>ul li.on a,.header .nav-bar ul li>ul li.on a:hover {background-color:rgba(80, 201, 194, 1);}
.header .nav-bar ul li.on>ul {visibility:visible;opacity:1;}
.header .nav-bar ul li>ul li em[class*="dot"] {position:absolute;right:5px;left:auto;top:10px;z-index:3;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);}
.header .nav-bar ul li.on>ul li em[class*="dot"] .fa {color:rgba(255,255,255,0.8);}
/*三级高亮*/.header .nav-bar ul li>ul li .sub-nav {visibility:hidden;opacity:0;display:none;left:-100%;transform:none;}
.header .nav-bar ul li>ul li.on .sub-nav {right:-100%;left:auto;top:0;visibility:visible;opacity:1;display:block;}
.header .nav-bar ul li>ul li.on .sub-nav li a,.header .nav-bar ul li>ul li.on .sub-nav li a:hover {background:rgba(0,0,0,0);color:rgba(255,255,255,0.8);}
.header .nav-bar ul li>ul li.on .sub-nav li.on a,.header .nav-bar ul li>ul li.on .sub-nav li.on a:hover {background:rgba(80, 201, 194, 1);color:rgba(255,255,255,0.8);}


/*移动端*/
.m-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  padding: 0 15px;
  height: 100%;
  display: none;
  line-height: 48px;
  cursor: pointer;
}
.m-btn i {
  color: #111;
  opacity: 0.7;
  font-size: 20px;
  line-height: 48px;
}
.m-btn:hover i {
  opacity: 1;
}

.m-nav {width:190px;background-color:rgba(80, 201, 194, 1);position:fixed;top:0;bottom:0;right:-190px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;z-index:999}
.m-nav .m-btn {height:48px;line-height:48px;left:auto;left:-45px;display:none;}
.m-nav ul {padding-top:0px;}
.m-nav li {width:100%;position:relative;}
.m-nav li a {padding:0 25px;line-height:48px;color:#fff;display:block;border-bottom:1px solid rgba(255,255,255,0.08);}
.m-nav li a:hover {background:rgba(0,0,0,0.1);}
.m-nav ul li>ul {display:none;}
.m-nav li em[class*="dot"] {position:absolute;top:0px;right:0px;width:48px;height:48px;text-align:center;border-left:1px solid rgba(255,255,255,0);cursor:pointer;}
.m-nav li em[class*="dot"] .fa {font-size:18px;color:#fff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;position:absolute;width:48px;line-height:48px;top:0;left:0;}
.m-nav li em[class*="dot"] .fa.open {-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
.m-nav ul li>ul li {background:rgba(0,0,0,0.15);}
.m-nav ul li>ul li a {border-bottom:1px solid rgba(255,255,255,0.05);opacity:0.8;font-size:12px;text-indent:1em}

.right-wrap{
  height: 60px;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.free-btn {
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #FFF;
  background: rgba(80, 201, 194, 1);
  border-radius: 2px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  /* margin-left: 155px; */
  flex-shrink: 0;
  padding: 0 18px;
}

.free-btn:active{
  filter: brightness(1.1) !important;
}

.free-btn:hover {
  filter: brightness(1.05);
}

.register-btn{
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  color: #00C29A;
  cursor: pointer;
  user-select: none;
  margin-left: 26px;
  flex-shrink: 0;
}

.register-btn:active{
  filter: brightness(1.1) !important;
}

.register-btn:hover {
  filter: brightness(1.05);
}


/*----------- 移动端 -----------*/
.header-container-mobile {
  width: 100vw !important;
}

.header-container-mobile .right-wrap {
  display: none;
}

/*----------- 响应式 -----------*/

/* @media only screen and (max-width:1359px) {
  .wrapper,.header .container,.crumb {padding:0 15px;}.swiper-container img{height:50vw;}
} */
@media only screen and (max-width:991px) {
  body {padding-top:54px;}
  .header .logo a {min-width:140px;}
  .header,.header .logo {height:56px;}
  .search i.fa,.header .nav-bar li {height:56px;line-height:56px;}
  .header {position:fixed;top:0;width:100%;z-index:898;}
}
@media only screen and (max-width:919px) {
  body {padding-top:46px;position:relative;left:0;overflow-x:hidden;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}
  .header,.header .logo {height:48px;display:inline-block;margin:0 auto;font-size:0}
  .header .logo a {min-width:130px;max-width:130px;}
  .nav-bar {display:none;}
  .search i.fa,.header .nav-bar li {height:48px;line-height:48px;}
  .m-btn {display:block;}
  body.open .m-nav {right:0px;}
  body.open .m-btn {display:none;}
  body.open .m-nav .m-btn {display:block;}
}
@media only screen and (max-width:599px) {
  body {padding-top:48px;}
  .wrapper,.header .headBox,.m-btn {padding:0 10px;}
  .m-nav .m-btn {left:-38px;}
}