@charset "UTF-8";
/* CSS Document */

#animation_container {
	position:absolute;
	margin:auto;
	left:-100%;right:-100%;
	top:-100%;bottom:-100%;
}


.mv-container{
	width:100%;
	position: relative;
	overflow: hidden;
}

.mv-inner{
	width:100%;
	padding-bottom: calc(660 / 890 * 100%);
}

.mv-loading{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.mv-loading.fadeOut{
	pointer-events: none;
	animation: mvLoadingFadeOut 0.4s linear 0s forwards;
}
@keyframes mvLoadingFadeOut{
	  0% { opacity:1; }
	100% { opacity:0; }
}

.mv-loading ul{
	display: flex;
	justify-content: center;
}
.mv-loading ul li{
	width:8px;
	height: 8px;
	border:1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0);
	animation: 1s linear 0s mvLoadingMotion infinite;
	margin: 0 4px;
}
.mv-loading ul li:nth-child(1){ animation-delay: 0s;}
.mv-loading ul li:nth-child(2){ animation-delay: 0.2s;}
.mv-loading ul li:nth-child(3){ animation-delay: 0.4s;}

@keyframes mvLoadingMotion{
	  0%{ background-color: rgba(255,255,255,0); }
	 20%{ background-color: rgba(255,255,255,1); }
	 80%{ background-color: rgba(255,255,255,0); }
	100%{ background-color: rgba(255,255,255,0); }
}

@media screen and (max-width:600px){
	.mv-inner{
		width:100%;
		padding-bottom: calc(660 / 540 * 100%);
	}
}