/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/* .text_box.on << 스크롤 진행시 동작 위해 추가 */


/*
==============================================
hatch_01
==============================================
*/

.text_box .hatch_01 {height:0; overflow:hidden;}
.text_box.on .hatch_01{
	animation-name: hatch;
	animation-delay:.3s;
	animation-duration:1s;
	animation-timing-function:ease;

	transform-origin:50% 100%;

	visibility:visible;
	height:auto;
	overflow:visible;
}

.text_box .last_txt {height:0; overflow:hidden;}
.text_box.on .last_txt.on{
	animation-name: hatch;
	animation-duration:1s;
	animation-timing-function:ease;

	transform-origin:50% 100%;

	visibility:visible;
	height:auto;
	overflow:visible;
}

@keyframes hatch {
	0% {
		height:0;
		transform: scaleY(0);
	}
	100% {
		height:100%;
		transform: scaleY(1);
	}								
}

/* 트리 */
.ani_stpe02 {height:0; overflow:hidden;}
.ani_stpe02.imon{
	animation-name:hatch2;
	animation-duration:.3s;
	animation-timing-function:ease;

	transform-origin:50% 100%;

	visibility:visible;
	height:auto;
	overflow:visible;
}
@keyframes hatch2 {
	0% {
		height:0;
		transform: scaleY(0);
	}
	100% {
		height:100%;
		transform: scaleY(1);
	}								
}

.ani_stpe02 li {opacity:0;}
.ani_stpe02.imon li.load {
	animation-name:tree;
	animation-duration:.3s;
	animation-timing-function:ease;

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

/* bounce */
.bounce {
	animation: bounce 1s infinite;
	position: relative;
}  
@keyframes bounce {
	0% {top: -2px}
	50% {top: 2px}
	100% { top: -2px}
}

/*
==============================================
slideDown
==============================================
*/
.list_wrap.slideDown {height:0; opacity:0; overflow:hidden;}
.list_wrap.on.slideDown{
	animation-name: slideDown;
	animation-duration:1s;
	animation-timing-function: ease;	

	opacity:1;
	height:auto;
	overflow:visible;
	visibility: visible;						
}

.last_txt2.slideDown {height:0; opacity:0; overflow:hidden;}
.last_txt2.on.slideDown{
	animation-name: slideDown;
	animation-duration:1s;
	animation-timing-function: ease;	

	opacity:1;
	height:auto;
	overflow:visible;
	visibility: visible;						
}

.text_box .slideDown {height:0; opacity:0; overflow:hidden;}
.text_box.on.slideDown{
	animation-name: slideDown;
	animation-duration:1s;
	animation-timing-function: ease;	

	opacity:1;
	height:auto;
	overflow:visible;
	visibility: visible;						
}

@keyframes slideDown {
	0% {
		height:0;
		opacity:0;
		transform: translateY(-50%);
	}	
	100% {
		height:auto;
		opacity:1;
		transform: translateY(0%);
	}		
}


/* Scroll Animation (sa, 스크롤 애니메이션) */
.sa {
	opacity: 0;
	transition: all .5s ease;
}

/* 아래에서 위로 페이드 인 */
.sa-up {
	transform: translate(0, 100px);
}
/* 위에서 아래로 페이드 인 */
.sa-down {
	transform: translate(0, -100px);
}
/* 왼쪽에서 오른쪽으로 페이드 인 */
.sa-right {
	transform: translate(-100px, 0);
}

.sa.show {
	opacity: 1;
	transform: none;
}