.fade01{
	animation-name: fade01;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade01 {
	0% {
		opacity: 1;
		clip-path: inset(0% 0% 100% 0%);
	}
	100% {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}
.fade02{
	animation-name: fade02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade02 {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}
.fade03{
	animation-name: fade03;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade03 {
	0% {
		opacity: 1;
		clip-path: inset(0% 100% 0% 0%);
	}
	100% {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}



/* a-item-list ---------------------------------------------------------------------------------------------- */
.a-item-list li {
	opacity: 0;
}
.a-item-list li.active {
	animation-name: fadeUp;
	animation-duration: .6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	opacity: 0;
}
.a-item-list li.active:nth-child(2) { animation-delay: .1s; }
.a-item-list li.active:nth-child(3) { animation-delay: .2s; }
.a-item-list li.active:nth-child(4) { animation-delay: .3s; }
.a-item-list li.active:nth-child(5) { animation-delay: .4s; }
.a-item-list li.active:nth-child(6) { animation-delay: .5s; }
@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* cinema-list ---------------------------------------------------------------------------------------------- */
.cinema-list li {
	opacity: 0;
}
.cinema-list li.active {
	animation-name: fadeUp;
	animation-duration: .6s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	opacity: 0;
}
.cinema-list li.active:nth-child(2) { animation-delay: .1s; }
.cinema-list li.active:nth-child(3) { animation-delay: .2s; }
.cinema-list li.active:nth-child(4) { animation-delay: .3s; }
.cinema-list li.active:nth-child(5) { animation-delay: .4s; }
.cinema-list li.active:nth-child(6) { animation-delay: .5s; }



/* body-anime ---------------------------------------------------------------------------------------------- */
.top-nav-ani01 {
	opacity : 0;
}
.top-nav-ani01.active{
	animation-name: top-nav-ani;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.top-nav-ani02 {
	opacity : 0;
}
.top-nav-ani02.active{
	animation-name: top-nav-ani;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.top-nav-ani03 {
	opacity : 0;
}
.top-nav-ani03.active{
	animation-name: top-nav-ani;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.top-nav-ani04 {
	opacity : 0;
}
.top-nav-ani04.active{
	animation-name: top-nav-ani;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes top-nav-ani {
	0% {
		opacity: 0;
		transform: translateY(-70%) rotate(0deg);
	}
	20% {
		opacity: 1;
	}
	38% {
		transform: translateY(3%) rotate(4deg);
	}
	52% {
		transform: translateY(-1.5%) rotate(-2.5deg);
	}
	64% {
		transform: translateY(0.8%) rotate(1.5deg);
	}
	74% {
		transform: translateY(-0.4%) rotate(-0.8deg);
	}
	83% {
		transform: translateY(0.2%) rotate(0.3deg);
	}
	91% {
		transform: translateY(-0.1%) rotate(-0.1deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0%) rotate(0deg);
	}
}
.pop01 {
	opacity: 0;
}
.pop01.active{
	animation-name: pop01;
	animation-duration: .5s;
	animation-timing-function: step-end;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pop01 {
	0%   { opacity: 0; }
	20%  { opacity: 1; }
	25%  { opacity: 0; }
	55%  { opacity: 1; }
	60%  { opacity: 0; }
	100% { opacity: 1; }
}

.line-ani {
	opacity: 0;
}
.line-ani.active{
	animation-name: line-ani;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes line-ani {
	0% {
		opacity: 1;
		clip-path: inset(0% 100% 0% 0%);
	}
	100% {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}

.img-ani {
	opacity: 0;
}
.img-ani.active{
	animation-name: img-ani;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes img-ani {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.zoom-ani {
	transform: scale(1.05);
}
.zoom-ani.active {
	animation-name: zoom-ani;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
@keyframes zoom-ani {
	0%   { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* index span spin ---------------------------------------------------------------------------------------------- */
.index span:first-child {
	opacity: 0;
}
.index span:first-child.spin {
	animation-name: indexSpin;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes indexSpin {
	0%   { opacity: 0; transform: translateX(-10px) rotate(0deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(360deg); }
}
.index-txt {
	opacity: 0;
	display: inline-block;
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	line-height: inherit;
	transform: none;
}
.index-txt.slide-in {
	animation-name: indexTxtSlideIn;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-delay: 0.15s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes indexTxtSlideIn {
	0%   { opacity: 0; transform: translateX(-10px); }
	100% { opacity: 1; transform: translateX(18px); }
}