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

#animation_container {
	position:absolute;
	margin:auto;
	left:-100%;right:-100%;
	top:-100%;bottom:-100%;
	background-color: #000!important;
  }
#animation_container #canvas{
	background-color: #000!important;
} 

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

.tm-inner{
	width:100%;
	padding-bottom: calc(1080 / 1920 * 100%);
}

@keyframes loadingMotion{
		0% {opacity: 1;}
	100% {opacity: 0;}
}

.tm-loading{
	width:100%; height: 100%;
	position: absolute;
	top:0; left: 0;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tm-loading.fadeOut{
	animation: loadingMotion 0.5s linear 0s forwards;
}


@keyframes loadingIconMotion{
		0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
.tm-loading-icon::after{
	content:"";
	width:60px; height: 60px;
	display: block;
	background-image: url("../../img/top/main_loading.png");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	animation: loadingIconMotion 0.6s linear 0s infinite;
}

@media screen and (max-width:600px){
	.tm-inner{
		padding-bottom: calc(1080 / 610 * 100%);
	}
	.tm-loading-icon{
		margin-top: -10rem;
	}
}

.tm-note{
	position: absolute;
	top: -1.5rem;
  right: 0.2rem;
	opacity: 0;
	text-shadow: 0 0 5px #000;
}

.tm-note.active{
	opacity: 1;
	transition-duration: 1s;
}