@charset "utf-8";
/* 
|----------------------
|   header
|----------------------
*/
.lumix-header{ width: 100%; background-color: #333; box-shadow: 0 10px 10px rgba(0,0,0,.02);}
.active-lumix--header{ transform: translateY(-88px); opacity: 0; visibility: hidden;}
@media (max-width:1200px) {
 
}

@media (max-width:768px) {
	.lumix-header{padding:  10px 0;}
}
/* wrap */
.lumix-header-wrap{justify-content: space-between; align-items: center;}
/* logo */

.lumix-logo img{height: 20px;}

@media (max-width:480px) {
	 .lumix-logo img{height: 15px;}
}
/* navmenu */
.lumix-nav>ul>li{ position: relative; margin: 0 15px;}
.lumix-nav>ul>li>a{display: block; line-height: 60px; font-size: 16px; color: #999;}
.lumix-nav>ul>li.on>a,
.lumix-nav>ul>li:hover>a{color: #fff; box-shadow: 0 -2px 0 #999 inset;}
@media (max-width:1600px) {
 
}

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

@media (max-width:768px) {
    .lumix-nav>ul>li{  margin: 0 10px;}
    .lumix-nav>ul>li>a{ line-height:40px; font-size: 14px; }
}

@media (max-width:480px) {
    .lumix-nav>ul>li{  margin: 0 0 0 10px;}
    .lumix-nav>ul>li>a{ line-height:40px; }
}

@media (max-width:420px) {
    .lumix-nav>ul>li{  margin: 0 0 0 10px;}
    .lumix-nav>ul>li>a{   font-size:12px; }
}

/* sub */
.lumix-nav .lumix-nav-menus{position: absolute; top: 60px; right: 50%; z-index: 4; background-color: #666; transform: translateX(50%) translateY(-5px); opacity: 0; visibility: hidden; transition: .3s;}
.lumix-nav .lumix-nav-menus ul li a{display: block; padding: 0 15px; line-height: 40px; font-size: 14px; text-align: center; color: #ccc; white-space: nowrap;}
.lumix-nav .lumix-nav-menus ul li a:hover{color: #fff;}
.lumix-nav>ul>li:hover .lumix-nav-menus{ transform: translateX(50%) translateY(0); opacity: 1; visibility: visible;}



@media (max-width:768px) {
	.lumix-nav {display: none;}
	
    .lumix-nav .lumix-nav-menus{ top: 40px;}
    .lumix-nav .lumix-nav-menus ul li a{ padding: 0 10px; line-height: 30px; font-size: 12px; }
}

@media (max-width:480px) {
    .lumix-nav .lumix-nav-menus{right: 0; transform: translateX(0) translateY(-5px);}
    .lumix-nav>ul>li:hover .lumix-nav-menus{ transform: translateX(0) translateY(0);}
}



.lumix-loading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	transition: 1s;
	opacity: 1;
	visibility: visible;
}



.lumix-loading-hide {
	opacity: 0;
	transform: scale(0);
	transform-origin:  50% 66%;
	visibility: hidden;
}

.lumix-loading-flex {
	display: flex;
	height: 100%;
}

.lumix-loading-item {
	width: 33.33%;
	height: 100%;
	background-color: #333;
}

.lumix-loading-item ul {
	height: 100%;

}

.lumix-loading-item ul li {
	width: 100%;
	height: 50%;
	background-color: #333;
	border: 10px solid #000;
}

.lumix-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 54px;
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.lumix-loading-up {
	transform: translateY(100%);
	
}

.animation-up {
	animation: moveUp 3s linear 1;
	animation-fill-mode: forwards;
}

@keyframes moveUp {
	0% {
		transform: translateY(100%);
	}

	10% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-100%);
	}

	60% {
		transform: translateY(-100%);
	}

	70% {
		transform: translateY(-200%);
	}

	100% {
		transform: translateY(-200%);
	}
}

.lumix-loading-down {
	transform: translateY(-300%);
}

.animation-down {
	animation: moveDown 3s linear 1;
	animation-fill-mode: forwards;
}

@keyframes moveDown {
	0% {
		transform: translateY(-300%);
	}

	10% {
		transform: translateY(-200%);
	}

	30% {
		transform: translateY(-200%);
	}

	40% {
		transform: translateY(-100%);
	}

	60% {
		transform: translateY(-100%);
	}

	70% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(0);
	}
}



.lumix-navbar { margin-left:12px; width: 26px; height: 29px; padding: 6px 0; cursor: pointer; display: none;}
.lumix-navbar div{ height: 100%; justify-content: space-between; flex-direction: column;}
.lumix-navbar span {display: block; width: 100%; height: 1px; background-color: #666; transition: .3s;}

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

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

.lumix-navmb{padding: 20px 15px; background-color: #333; display: none;}
.lumix-navmb ul li{line-height: 35px; position: relative;}
.lumix-navmb ul li a{color: #999;}

.lumix-navmb ul li.on>a{color: #fff;}
.lumix-navmb-menus{padding-left: 15px; display: none;}

.lumix-navmb-menus-actvie{}

.lumix-navmb ul li span{position: absolute; top: 12px; right: 10px; width: 8px; height: 8px; border-top: 1px solid #999; border-right: 1px solid #999; transform: rotate(135deg);}