@charset "UTF-8";

.mv{
	background-color: #000;
}

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

.tm-container{
	width:100%;
	position: relative;
	aspect-ratio: 1366 / 630;
	overflow: hidden;
}

.tm_note_wrap{
	position: absolute;
	bottom:0; right: 0;
	width:100%;
}
.tm_note_cls{
	position: absolute;
	bottom:10px; right: 10px;
	opacity: 0;
	transition: opacity 1s linear 0s;
	font-size: 1.1rem;
	line-height: 1.2;
	text-align: right;
	color: #fff;
  text-shadow: 0 0 10px #000, 0 0 5px #000, 0 0 3px #000;
}
.tm_note_cls.active{
	opacity: 1;
}

.tm_btn_cls{
	position: absolute;
	top:10px; right: 10px;
	opacity: 0;
	font-size:12px;
	pointer-events: none;
	transition: opacity 0.5s linear 0s;
	width:100px;
	padding:10px 0;
	text-align: center;
	background-color: #512a0f;
	color:#FFF;
}
.tm_btn_cls.active{
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

@keyframes tmLoadingFadeOut{
	  0%{ opacity:1; }
	100%{ opacity:0; }
}
@keyframes tmLoadingRotate{
	  0%{ transform:rotate(0deg); }
	100%{ transform:rotate(-360deg);}
}
.tm_loading{
	width:100%; height: 100%;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:0; left: 0;
}
.tm_loading.fadeOut{
	pointer-events: none;
	animation: tmLoadingFadeOut 0.5s linear 0s forwards;
}
.tm_loading img{
	width:20%;
	max-width:60px;
	height: auto;
	animation: tmLoadingRotate 0.5s linear 0s forwards infinite;
}

@media screen and (max-width:600px){
	.tm-container{
		aspect-ratio: 1366 / 1000;
	}
	.tm_btn_cls{
		font-size:11px;
		width:60px;
		top:5px; right: 5px;
	}
}