@charset "utf-8";
/* navigation */
.navigation li{margin-right: 40px;}
.navigation li a {position: relative; z-index: 1; display: block; line-height: 50px; padding: 0 15px; color: #333; font-weight: bold;}
.navigation li.on a,
.navigation li a:hover {color: var(--default);}
@media (max-width:1400px) {
	.navigation li{margin-right: 20px;}
	.navigation li a {padding: 0 10px;}
}

@media (max-width:1200px) {
	.navigation li{margin-right: 10px;}
}

@media (max-width:960px) {
	.navigation{margin-right: 20px;}
	.navigation li{margin-right: 0;}
	.navigation li a {padding: 0 5px;}
}

@media (max-width:768px) {
	.navigation ul {display: none;}
	.navigation-bar {display: block;color: #fff;}
}

/* open */
.navbar { width: 25px; height: 16px; cursor: pointer; display: none;}
.navbar div{ height: 100%; justify-content: space-between; flex-direction: column;}
.navbar span {display: block; width: 100%; height: 2px; background-color: #666; transition: .3s;}

/* .navbar-active span{background-color: #000;}
.navbar-active span:first-child ,
.navbar-active span:last-child {width: 0;}
.navbar-active span:nth-child(2){ transform: rotate(-45deg);}
.navbar-active span:nth-child(2):before {position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color:#000;transform: rotate(90deg);}

 */

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