header{width: 100%;background: #3A00FF;padding: 20px 10px 10px;box-sizing: border-box;position: fixed;top: 0;left: 0;z-index: 99;}
.header-box{display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1140px;margin: 0 auto;align-items: center;}
.header-logo{height: 70px;width: 230px;}
.header-logo img{height: 100%;display: block;}
#mideo-menu{display: none;}
#nav-bar{width: calc(100% - 430px);}
#nav-bar .navbar-nav{display: flex;justify-content: space-around;}
#nav-bar .navbar-nav >li{line-height: 50px;text-align: center;font-size: 16px;transition: .5s;position: relative;padding: 0 10px;box-sizing: border-box;}
#nav-bar .navbar-nav >li a{color: #FFFFFF;display: inline-block;width: 100%;transition: .5s;}
#nav-bar .navbar-nav >li a i{margin-left: 5px;font-size: 12px;transform: rotate(90deg);display: inline-block;}
#nav-bar .navbar-nav >li:hover{background: #F7FBFF;}
#nav-bar .navbar-nav >li:hover a{color: #151515;}
#nav-bar .sub-menu{display: none;}
#nav-bar .navbar-nav li .sub-menu{position: absolute;top: 50px;left: 0;transform: translateX(-50px);background: #F7FBFF;overflow-y: scroll;}
#nav-bar .navbar-nav li:last-child .sub-menu{overflow: visible !important;}
#nav-bar .navbar-nav li .sub-menu::-webkit-scrollbar {width: 2px; height: 2px;}
#nav-bar .navbar-nav li .sub-menu::-webkit-scrollbar-thumb{background: #151515;}
#nav-bar .navbar-nav li .sub-menu li{line-height: 40px;padding: 0 30px;box-sizing: border-box;font-size: 14px;width: 350px;text-align: left;transition: .5s;position: relative;}
#nav-bar .navbar-nav li .sub-menu li a{color: #151515;transition: .5s;}
#nav-bar .navbar-nav li .sub-menu li a i{transform: rotate(0);position: absolute;right: 30px;}
#nav-bar .navbar-nav li .sub-menu li:hover{background: #151515;}
#nav-bar .navbar-nav li .sub-menu li:hover a{color: #FFFFFF;}
#nav-bar .navbar-nav li .sub-menu li .sub-menu{top: 0;left: -100%;transform: translateX(0);}
#nav-bar .navbar-nav li .sub-menu li .sub-menu li a{color: #151515;}
#nav-bar .navbar-nav li .sub-menu li .sub-menu li:hover a{color: #FFFFFF;}
#nav-bar .navbar-nav li .sub-menu >i{width: 100%;line-height: 30px;text-align: center;font-size: 20px;color: #151515;position: absolute;bottom: 0;left: 0;background: #FFFFFF;}

.header-search{height: 40px;width: 200px;background: #FFFFFF;border-radius: 30px;overflow: hidden;padding-right: 50px;box-sizing: border-box;position: relative;}
.header-search input{border: 0 !important;background: #FFFFFF;padding-left: 20px;box-sizing: border-box;font-size: 16px;width: 100%;height: 40px;}
.header-search button{width: 50px;height: 100%;font-size: 22px;position: absolute;top: 0;right: 0;border: 0 !important;background: #FFFFFF;cursor: pointer;font-weight: bold;color: #02BB8F;padding: 0 !important;}
#mideo-menu{display: none;}

@media only screen and (max-width: 1380px){
	
}
@media only screen and (max-width: 1280px){
}
@media only screen and (max-width: 1024px){
	header{padding: 0 10px;}
	.header-logo img{transform: scale(.8);}
	.header-box nav ul li{padding: 0 8px;}
	.header-search{height: 30px;}
	.header-search input{height: 30px;}
	.header-logo{height: 50px;width: 160px;}
	#nav-bar{width: calc(100% - 360px);}
	#nav-bar .navbar-nav >li{font-size: 14px;}
}
@media only screen and (max-width: 900px){
	#index-banner{padding-top: 50px;}
	.header-box{padding: 0 70px 0 20px !important;}
	.header-search{position: static;transform: translate(0);float: right;height: 34px;width: calc(100% - 160px);}
	.header-search input{height: 34px;}
	#mideo-menu{display: block;}
	header .icon-menu{position: absolute;height: 50px;line-height: 50px;width: 70px;text-align: center;font-size: 34px;top: 0;right: 0;cursor: pointer;color: #FFFFFF;font-weight: bold;}
	#nav-bar{display: none;width: 0;}
	#nav-bar .navbar-nav{display: block;width: 60%;background: #151515;position: fixed;top: 50px;right: 0;height: 100%;}
	#nav-bar .navbar-nav >li a{width: auto;padding: 0 30px;box-sizing: border-box;}
	#nav-bar .navbar-nav li .sub-menu{transform: translateX(0);position: static;max-height: 300px;width: 100%;}
	#nav-bar .navbar-nav li .sub-menu li{width: 100%;}
	#nav-bar .navbar-nav li:last-child .sub-menu li:hover{background: #F7FBFF;}
	#nav-bar .navbar-nav li:last-child .sub-menu li:hover a{color: #151515;}
	#nav-bar .navbar-nav li:last-child .sub-menu{max-height: none;}
	
	
}
@media only screen and (max-width: 768px){
	.header-box{padding: 0 80px 0 20px !important;}
}
@media only screen and (max-width: 640px){
	.header-box{padding: 0 60px 0 10px !important;}
	.header-box nav{width: 80%;}
	.header-logo img{transform: scale(.8);}
	
	#mideo-menu{width: 50px;font-size: 28px;}
	#nav-bar .navbar-nav >li{text-align: left;padding: 0 20px;box-sizing: border-box;}
	#nav-bar .navbar-nav li .sub-menu li{padding:0 10px;}
	#nav-bar .navbar-nav >li a{padding: 0;}
	#nav-bar .navbar-nav{width: 80%;}
}
@media only screen and (max-width: 480px){
	.header-box{height: 50px;}
	#nav-bar .navbar-nav >li{font-size: 14px;line-height: 40px;}
	#nav-bar .navbar-nav li .sub-menu li{font-size: 13px;line-height: 30px;}
	#nav-bar .navbar-nav{width: 90%;}
	.header-logo{height: 35px;width: 130px;}
	.header-logo img{transform: scale(1);}
	.header-search{width: calc(100% - 130px);}
}
@media only screen and (max-width: 360px){
	header{height: 50px;}
	.header-search{height: 30px;padding-right: 30px;}
	#mideo-menu{height: 50px;line-height: 50px;}
	.header-box nav{top: 50px;}
	.header-search input{height: 30px;padding: 0 10px;font-size: 12px;}
	.header-search button{width: 30PX;font-size: 18px;}
}