@charset "utf-8";
/* header */
.header{position: fixed; left: 0; right: 0; z-index:999; height: 110px; border-bottom: 1px solid rgba(255, 255, 255, .22);}

.header .headerbox{position: relative; max-width: 1680px; height: 100%; margin: auto;}
.headerbox-flex{padding-left: 2%; padding-right: 2%; box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; height: 100%; justify-content: space-between;}
/* .header-logo{position: absolute; left: 2%; top: 12px;} */
/* .header-toolbar{ position: absolute; right:  2%; top: 36px;} */
.header-logo img{display: block; max-height: 74px;}
.header-logo img.black{display: none;}
.header-toolbar{display: flex; align-items: center; flex-shrink: 0;}
.header-toolbar-block{height: 35px; border-radius: 19px; background: rgba(255, 255, 255, .1);}
.header-toolbar li{float: left; height: 100%; position: relative;}
.header-toolbar li a{display: flex; height: 100%; align-items: center; justify-content: center; padding:0 20px;}
.header-toolbar li a img{display: block;}
.header-toolbar li a img.black{display: none;}
.header-toolbar li.split:before{content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; width: 1px; height: 16px; background: #fff; opacity: 0.47;}

.mainnav{position: absolute; left: 654px; top: 40px;}
.mainnav ul li{float: left; font-size: 1.125em;}
.mainnav ul li + li{margin-left: 50px;}
.mainnav ul li a{padding-bottom: 16px; color: #fff; position: relative;}
.mainnav ul li a:after{content: ''; width: 0; height: 3px; position: absolute; left: 0; right: 0; bottom:0; background: #fff; margin: auto; transition: all 0.3s ease;}
.mainnav ul li.on a:after,
.mainnav ul li:hover a:after{width: 100%;}
.mainnav ul li.on a{font-weight: bold;}

/* 悬浮头部 */
.header.fixed,
.openDrawer .header{background: linear-gradient(to bottom,rgba(65, 136, 217, 1),rgba(93, 139, 245, 0)); box-shadow: 0 0 10px rgba(0, 0, 0, .2);}

/* 手机版导航 */
.header-m-togglebtn{cursor:pointer; width: 38px; height: 35px; box-sizing: border-box; padding: 10px; z-index: 999; display: none; margin-right: 10px; margin-left: 10px;}
.header-m-togglebtn div{margin: auto; position: relative; display: block; width: 100%; height: 100%; cursor: pointer;}
.header-m-togglebtn span{position: absolute; display: block; left: 0; width: 100%; height: 12%; background: #fff; transition: all .3s; border-radius: 2px; line-height: 0; font-size: 0;}
.header-m-togglebtn span:nth-child(1){top: 0;}
.header-m-togglebtn span:nth-child(2){top: 0; bottom: 0; margin: auto;}
.header-m-togglebtn span:nth-child(3){bottom: 0;}
.togglebtn-close.header-m-togglebtn span:nth-child(1){
	top:50%;
	-webkit-transform:translateY(-50%) rotate(-45deg);
	-ms-transform:translateY(-50%) rotate(-45deg);
	transform:translateY(-50%) rotate(-45deg);
}
.togglebtn-close.header-m-togglebtn span:nth-child(2) {
	-webkit-transform:translateY(-50%) scaleX(0);
	-ms-transform:translateY(-50%) scaleX(0);
	transform:translateY(-50%) scaleX(0);
}
.togglebtn-close.header-m-togglebtn span:nth-child(3) {
	top:50%;
	bottom:auto;
	-webkit-transform:translateY(-50%) rotate(45deg);
	-ms-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg);
}
.header-drawer{position: fixed;left:0;right:0;top:0;z-index: 99;background: rgba(255,255,255,.92); backdrop-filter: blur(12px);}
.drawer-mainnav a{color: #333;}
.drawer-mainnav a:hover{color: #007798;}
.drawer-mainnav{position: absolute;z-index: 2;left: 30px;right:10px;top: 110px;bottom:0;}
.drawer-mainnav .scrollbar-y{height: 96%;}
.drawer-mainnav .arrow{
  position: absolute;display: block;width: 6px;height: 6px;
  border-right: 2px solid #333;border-top: 2px solid #333;top: 50%;margin-top: -5px;right: 10px;
  transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);-ms-transform: rotate(45deg);opacity: .3;cursor: pointer;
}
.drawer-mainnav .arrow:hover{opacity: 1;}


.drawer-mainnav .item + .item{margin-top: 15px;}
.drawer-mainnav h3{font-weight:normal; position: relative;line-height: 1.2;padding: 12px 30px 12px 10px; border-bottom: 1px solid #e5e5e5; font-size: 1em;}
.drawer-mainnav ul{overflow: hidden; padding: 10px 0; font-size:15px;}
.drawer-mainnav ul li{float: left; width: 50%; padding: 5px 10px; box-sizing: border-box;}
.drawer-mainnav ul li a{color:#888;}
.drawer-mainnav ul li a:hover{color:#333;}

.drawer-mainnav .down h3{font-weight: bold;}
.drawer-mainnav .down .arrow{border-bottom:2px solid #333;border-top:none;}
.openDrawer .header-drawer{background-origin: padding-box; bottom: 0;}
.openDrawer .scrollbar-y{padding-right: 20px;}
.openDrawer .scrollbar-y::-webkit-scrollbar{ width: 3px;}
.openDrawer .scrollbar-y::-webkit-scrollbar-thumb{background: rgba(0, 0, 0, .2);}

/*responsive*/
@media (max-width: 1500px) {
	.header-logo img{max-height: 60px;}
	.mainnav{left: 530px;}
	.mainnav ul li + li{margin-left: 40px;}
	

}

@media (max-width: 1280px) {
	/* body:not(.nores) .header-toolbar li.wza{display: none;} */
	.header{height: 90px;}
	.header-m-togglebtn{display: block;}
	.mainnav{display: none;}
	.drawer-mainnav .ul2 li{width: 25%;}
}


@media (max-width: 992px) {
	
	
	
}

@media (max-width: 768px) {
	.header-toolbar{margin-left: 20px;}
	.header-toolbar li.wza{display: none;}
	.header-toolbar li.ss.split:before{display: none;}
	.header-toolbar li a{padding:0 10px;}
	.header-toolbar-block{background:none;}
	.header-m-togglebtn{margin-right: 0;}
	.header-m-togglebtn{margin-left: 0;}
	.header-toolbar li a{padding:0 5px;}
	.drawer-mainnav .ul2 li{width: 50%;}

}



@media (max-width: 480px) {
	.header-m-togglebtn{width:35px;}
	.header-toolbar li a img{width:16px;}
	.header{height: 70px;}
	.drawer-mainnav{top: 90px;}

	
	
	
}


@media (max-width: 375px) {
	
	
	
}