@charset "utf-8";
.loading-page {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 800;
	overflow: hidden;
	right:0;
	animation: fade--out 0s ease-in-out 5.5s forwards;
	transition-delay: 5.5s;
}
@keyframes fade--out{
	0%{
		width:100%;
	}100%{
		width: 0%;
	}
}
.inview .loading-page{
	z-index: 1;
}
.loading-page .bg{
	background:#fff;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	animation: fade--out 0s ease-in-out 1s forwards;
	z-index: 10;
}
.loading-page .inner{
	background:#1e1e1e;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transform: scaleX(0);
	animation: slide--in 5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
	z-index: 15;

}
@keyframes slide--in{
	0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  16% {
    transform: none;
    transform-origin: 0 0;
  }
	18% {
    transform: none;
    transform-origin: 100% 0;
  }
	82% {
    transform: none;
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}
.loading-page .logo {
	position: fixed;
	z-index:800;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	animation: logo--1 1 0s ease-in-out 4.6s forwards;
	transition-delay: 5.5s;
	z-index: 20;
	opacity: 1;
	text-align: center;
	width:400px;
}
@keyframes logo--1{
	0%{
		opacity: 1;
	}100%{
		opacity: 0;
	}
}
@keyframes logo--2{
	0%{
		opacity: 0;
	}100%{
		opacity: 1;
	}
}
@keyframes logo--3{
	0%{
		opacity: 0;
		transform:translateY(10px);
	}20%{
		opacity: 0;
	}100%{
		opacity: 1;
		transform:translateY(0px);
	}
}
.inview .loading-page .logo{
	z-index: 1;
	position: absolute;
	width: 0;
}
.loading-page .logo .logo_01{
	margin:0 0 24px;
	opacity:0;
	animation: logo--2 1 0.8s ease-in-out 1.2s forwards;
}
.loading-page .logo .logo_01 img{
	width:28px;
}
.loading-page .logo .logo_02{
	margin:0 0 18px;
	transform:translateY(10px);
	opacity:0;
	animation: logo--3 1 0.8s ease-in-out 1.6s forwards;
}
.loading-page .logo .logo_02 img{
	width:400px;
}
.loading-page .logo .logo_03{
	transform:translateY(10px);
	opacity:0;
	animation: logo--3 1 0.8s ease-in-out 2.6s forwards;
}
.loading-page .logo .logo_03 img{
	width:254px;
}
@media screen and (max-width : 767.9999px ){
	.loading-page .logo .logo_01{
		margin:0 0 10px;
	}
	.loading-page .logo .logo_01 img{
		width:13px;
	}
	.loading-page .logo .logo_02{
		margin:0 0 7px;
	}
	.loading-page .logo .logo_02 img{
		width:170px;
	}
	.loading-page .logo .logo_03 img{
		width:109px;
	}
}