@charset "utf-8";
/* 
|----------------------
|   header
|----------------------
*/
.header{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}
.header-wrap{align-items: center; justify-content: space-between;}
.header-index:hover{background-color: #fff; box-shadow: 0 -1px 0 #eee inset;}
.header-active{background-color: #fff; transition:.3s;}
@media (max-width:1200px) {
	.header { padding : 15px 0; }
}


@media (max-width:768px) {
	.header { padding : 10px 0; }
}

.header-space{height: 70px; background-color: #fff;}

@media (max-width: 1200px) {
	.header-space{height: 70px;  }
}

@media (max-width: 768px) {
	.header-space{height: 60px;  }
}
@media (max-width: 640px) {
	.header-space{height: 50px;  }
}
/*  */
.header-logo{height: 30px;}
.header-logo img{height: 100%;}
@media (max-width:1530px) {
	.header-logo{height: 25px;}
}

@media (max-width:480px) {
	.header-logo{height: 20px;}
}

/* navigation */
.navigation>ul>li { padding: 15px 0;}
.navigation>ul>li>a{position: relative; display: flex; align-items: center; padding: 0 15px; line-height: 40px; font-size: 16px; color: #333;}
.navigation>ul>li>a>span{ margin-left: 5px; width: 0; height: 0; content: ''; border-top: 4px solid var(--default); border-left: 4px solid transparent; border-right: 4px solid transparent;}
/* .navigation>ul>li>a::before{position: absolute; bottom: 0; left: 0; content: ""; width: 0; height: 2px; background-color: var(--default); transition: .3s;}

.navigation>ul>li.on>a::before{width: 100%;} */

/* .navigation>ul>li>a:hover, */
.navigation>ul>li.on>a{color:#fff; background-color: var(--default);}
.navigation>ul>li.on>a>span{  border-top-color: #fff;}
/* .navigation>ul>li>a:hover::before, */
/* .navigation>ul>li.on>a::before{width: 100%;} */

@media (max-width:1530px) {
	.navigation>ul>li>a{ padding: 0 10px; font-size: 14px; }
}

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

@media (max-width:1200px) {
	.navigation {display: none;}
}


/* lang */
.header-tools{align-items: center; }
.header-lang{ font-size: 0; line-height: 38px; height: 40px; padding: 0 15px; border: 1px solid var(--default); border-radius: 40px;}
.header-lang a{position: relative; display: inline-block; padding: 0 10px; font-size: 16px;}
.header-lang a:last-child::before{position: absolute; top:12px; left: -1px; content: ''; width: 1px; height: 15px; background-color: #ccc;}
.header-lang a.on{color: var(--default);}
@media(max-width: 1530px) {
	.header-lang{ padding: 0 5px;}
}

@media(max-width: 640px) {
	.header-lang{ line-height: 28px;height: 30px; padding: 0 5px; }
	.header-lang a{font-size: 14px; padding: 0 5px;}
	.header-lang a:last-child::before{  top:8px; height: 12px; }
}
/* navbar */
.navbar {margin-left: 20px;width: 30px;cursor: pointer;display: none;}
.navbar span {display: block;width: 100%;height: 2px;background-color: var(--default);}
.navbar span:nth-child(2) {position: relative;margin: 7px 0;}

@media(max-width: 1200px) {
	.navbar {display: block;}
}