@charset "utf-8";
#loading{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background-color: #000000;
	z-index: 100000;
	opacity: 1;
}

#loading .load01{
	position: absolute;
	top: 50%;
	left:calc(50% - 50px);
	transform: translate(-50%, -50%);
	width: 90px;
	height: 0;
	padding-top: 60%;
	background-image: url("../img/loading/load01.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#loading .load02{
	position: absolute;
	top: calc(50% - 20px);
	left:calc(50% + 10px);
	transform: translate(-50%, -50%);
	width: 20px;
	height: 0;
	padding-top: 3px;
	background-image: url("../img/loading/load02.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	animation: load02 0.3s ease 0s infinite normal forwards;
}
@keyframes load02 {
	0%{left:calc(50% + 20px); opacity: 1;}
	99% {left:100%;opacity: 1;}
	100% {left:100%;opacity: 0;}
}

#loading.disp{animation: loading 0.2s ease-out 0s 1 normal forwards;}
@keyframes loading {
	0%{opacity: 1;}
	100% {opacity: 0;}
}