@charset "UTF-8";
/* animation lib */


/* animation */
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
	100%{
		opacity: 1;
	}
}
@keyframes fadeInR2L{
	0%{
		transform: translateX(7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeInL2R{
	0%{
		transform: translateX(-7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeInB2T{
	0%{
		transform: translateY(7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeInT2B{
	0%{
		transform: translateY(-7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fade-scaledown{
	0%{
		transform: scale(2.5);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes rotatefade{
	0%{
		transform: rotate(180deg) scale(3);
		opacity: 0;
	}
	50%{
		opacity: 0.3;
	}
	100%{
		opacity: 1;
		transform: scale(0.9) rotate(0deg);
	}
}
@keyframes bounce{
	0%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(-10px);
	}
	100%{
		transform:translateY(0);
	}
}

.fade{
    animation-duration: 1500ms;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    opacity: 0;
}
.fadeInR2L,.fadeInL2R,.fadeInB2T,.fadeInT2B.fadeIn{}

.fade.fadeIn.view{
    animation-name: fadeIn;
}
.fade.fadeInR2L.view{
    animation-name: fadeInR2L;
}
.fade.fadeInL2R.view{
    animation-name: fadeInL2R;
}
.fade.fadeInB2T.view{
    animation-name: fadeInB2T;
}
.fade.fadeInT2B.view{
    animation-name: fadeInT2B;
}
.fade.fadeIn.view{
    animation-name: fadeIn;
}
.fade.fade-scaledown.view{
    animation-name: fade-scaledown;
    animation-timing-function: ease-in;
    animation-duration: 1000ms;
}