.header,
.header .content ,
.header-nav *,
.lang,
.header .content .left{transition:all .9s ease;}
.header {position: fixed;left: 0;top: 0;z-index: 900;width: 100%;}
.header::after {content: '';width: 100%;height: 1px;background: #fff;position: absolute;left: 0;bottom: -1px;opacity: .2;}
.content {width: 96%;margin: auto;position: relative;}
.header .content {z-index: 999;padding:0 2%;overflow: hidden;}
.header .content::after {width: 100%;height: 50px;background: #fff;position: fixed;left: 0;top: -100px;transition:all .4s ease;}
.logo {position: absolute;left:2%;top:0;width:300px;height: 100%;z-index: 11;}
.logo a {display: block;overflow: hidden;width: 100%;}
.logo img.default {display: block;width: 100%;}
.logo img.hover{display: none;width: 100%;}
.header .content nav {display:block;float: right;padding-right: 80px;}
.header-nav {font-size: 0;}
.header-nav li{display: inline-block;position: relative;padding:40px 25px;font-size: 0;}
.header-nav li a{display: inline-block;color: #fff;position: relative;font-size: 15px;}
.header-nav li a::after {content: '';width: 0px;height: 2px;background: #fff;position: absolute;bottom:-40px;left:50%;transition:all .4s ease;}
.header-nav li.on a::after{width: 100%;left:0;}
.header.cur,.header.cur .content,.header.current,.header.current .content {background: #fff;}
.header.cur::after,.header.current::after{background: #a1a7b2;}
.header.cur .logo img.default,.header.current .logo img.default{display: none;}
.header.cur .logo img.hover,.header.current .logo img.hover{display: block;}
.header.cur .header-nav li a,.header.current .header-nav li a{color: #000;}
.header.cur .header-nav li.on a,.header.cur .header-nav li a:hover,.header.current .header-nav li.on a,.header.curtent .header-nav li a:hover{color: var(--theme-color);}
.header.cur .header-nav li.on a::after,.header.current .header-nav li.on a::after{background: var(--theme-color);}
.header.cur .lang::before,.header.current .lang::before{background: #a1a7b2;}
.lang {width: 5%;height: 100%;position: absolute;right: 0;top: 0;line-height: 100%;align-items: center;justify-content: center;}
.lang a{color: #fff;}
.lang::before {content: '';width:1px;height:100%;background: #fff;position: absolute;top:0px;left:0;opacity: .2;}
.header.cur .lang a,.header.current .lang a{color: #000;}
.header.cur .lang a:hover,.header.current .lang a:hover{color: var(--theme-color);}
/* nav */

.menu-toggle {display: none;width:50px;height:50px; position:fixed;right:0px;top:0px;z-index: 9999;}
.menu-toggle span.hamburger,
.menu-toggle span.hamburger:after,
.menu-toggle span.hamburger:before {content:"";display:block;width:24px;height:3px;background:var(--theme-color);position:absolute;top:50%;margin-top:-1px;left:50%;margin-left:-12px;-webkit-transition:transform 0.3s cubic-bezier(0.600,0.000,0.200,1.000);transition:transform 0.3s cubic-bezier(0.600,0.000,0.200,1.000);-webkit-transition-timing-function:cubic-bezier(0.600,0.000,0.200,1.000);transition-timing-function:cubic-bezier(0.600,0.000,0.200,1.000);transition-delay:0.15s;}
.menu-toggle span.hamburger:after {margin-top:-7px;top:0;transition-delay:0.27s;}
.menu-toggle span.hamburger:before {margin-top:7px;top:0;transition-delay:0.2s;}
.menu-toggle span.cross:before,
.menu-toggle span.cross:after {content:"";display:block;width:24px;height:3px;background:#fff;position:absolute;top:50%;margin-top:-1.5px;left:50%;margin-left:-12px;-webkit-transition:transform 0.3s cubic-bezier(0.600,0.000,0.200,1.000);-webkit-transform:translateY(-70px) translateX(-70px) rotate(45deg);transform:translateY(-70px) translateX(-70px) rotate(45deg);transition-delay:0.12s;}
.menu-toggle span.cross:after {transition-delay:0s;-webkit-transform:translateY(70px) translateX(-70px) rotate(-45deg);transform:translateY(70px) translateX(-70px) rotate(-45deg);}
.menu-toggle span.cross:after {-webkit-transform:translateY(-70px) translateX(70px) rotate(-45deg);transform:translateY(-70px) translateX(70px) rotate(-45deg);}
.no-touch .menu-toggle span.hamburger,
.no-touch .menu-toggle span.hamburger:after,
.no-touch .menu-toggle span.hamburger:before {transition-delay:0.12s;-webkit-transform:translateX(-70px);transform:translateX(-70px);}
.no-touch .menu-toggle span.hamburger,
.no-touch .menu-toggle span.hamburger:after,
.no-touch .menu-toggle span.hamburger:before {-webkit-transform:translateX(70px);transform:translateX(70px);}
.no-touch .menu-toggle span.hamburger:after {transition-delay:0s;}
.no-touch .menu-toggle span.hamburger:before {transition-delay:0.07s;}
.no-touch .menu-toggle span.cross:before {transition-delay:0.12s;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.no-touch .menu-toggle span.cross:after {transition-delay:0.24s;-webkit-transform:rotate(-45deg) !important;transform:rotate(-45deg) !important;}

@media screen and (max-width: 1400px) {
    .logo {width:200px;}
    .header .content nav {padding-right: 40px;}
    .header-nav li{padding:30px 20px;}
}
@media screen and (max-width: 1200px) {
    .header-nav li{padding:30px 15px;}
}
@media screen and (max-width: 1024px) {
	.menu-toggle,.mbshow {display: block!important;}
	#nav-container {background-color:#1a1a1a;position: fixed; z-index:91; top:0px; right: 0; width: 100%;height:100%;overflow-y: auto;overflow-x: hidden; -webkit-transform: translateX(100%);transform: translateX(100%);-webkit-transition: -webkit-transform 0.4s 0s, box-shadow 0s 0.4s;transition: transform 0.4s 0s, box-shadow 0s 0.4s;}
	#nav-container.is-visible{-webkit-transform: translateX(0);transform: translateX(0);-webkit-overflow-scrolling: touch;}
	.header .content nav {float: none;padding-right: 0px;}
	.header .content {padding: 0;width: 100%;}	
	.logo {left: 2%;top: 1%;margin-top: 0;z-index: 100;position: inherit;width: 140px;height: 50px;}
	.header-nav {padding-top:20%;}
	.header-nav li {display:block;padding: 3% 0;text-align: center;}
	.header-nav li a::after {display: none;}
	.header-nav li a {font-size: 18px;padding: 1% 0;font-weight: bold;color: #fff!important;}
	.header.scroll-top .content::after {top: 0;}
	.header.scroll-top .menu-toggle span,.header.scroll-top .menu-toggle span::after,.header.scroll-top .menu-toggle span:before,.detail .menu-toggle span:before,.detail .menu-toggle span::after,.detail .menu-toggle span {background: #000;}
	.no-touch .header.scroll-top .menu-toggle span,.no-touch .header.scroll-top .menu-toggle span::after,.no-touch .header.scroll-top .menu-toggle span:before,.detail.no-touch .menu-toggle span,.detail.no-touch .menu-toggle span::after,.detail.no-touch .menu-toggle span::before{background: #fff;}
	.no-touch .header.scroll-top .logo img.default {display: block;}
	.no-touch .header.scroll-top .logo img.hover  {display: none;}
	.header.scroll-down .logo,.header.scroll-down .menu-toggle {top: -100px;}
    .lang{right: 50px;width: 50px;}
    .lang::before {right:0;left: unset;}
}