/* wheel - 마우스 휠 움직이는 효과 */
@-webkit-keyframes wheel{
	0% {top: 10px; opacity: 0;}
	30% {opacity: 1;}
	100% {top: 22px; opacity: 0;}
}
@keyframes wheel{
	0% {top: 10px; opacity: 0;}
	30% {opacity: 1;}
	100% {top: 22px; opacity: 0;}
}

/* typing - 타자기 효과 */
@-webkit-keyframes typing { 
	from {width: 0;} 
} 
@keyframes typing { 
	from {width: 0;} 
} 

@-webkit-keyframes typing2 {
	0% {width: 0;}
	50% {width: 0;}
	100% {width: 100;} 
} 
@keyframes typing2 {
	0% {width: 0;}
	50% {width: 0;}
	100% {width: 100;} 
} 

/* fadeUp - 밑에서 위로 움직이는 효과 */
@-webkit-keyframes fadeUp {
	0% {opacity:0; transform:translateY(40px);}
	100% {opacity:1; transform:translateY(0);}
}
@keyframes fadeUp {
	0% {opacity:0; transform:translateY(40px);}
	100% {opacity:1; transform:translateY(0);}
}

/* slideRight - 왼쪽에서 오른쪽으로 움직이는 효과 */
@-webkit-keyframes slideRight {
	0% {opacity:0; transform:translateX(-30px);}
	100% {opacity:1; transform:translateX(0);}
}
@keyframes slideRight {
	0% {opacity:0; transform:translateX(-30px);}
	100% {opacity:1; transform:translateX(0);}
}

/* palyIcon - 움직이는 이미지 */
@-webkit-keyframes playIcon {
	0% {opacity:0; background-position:0 0;}
    100% {opacity:1; background-position: 100%;}
}
@keyframes playIcon {
	0% {opacity:0; background-position:0 0;}
    100% {opacity:1; background-position: 100%;}
}

/* zoomOut - 이미지 점점 작아지게 */
@-webkit-keyframes zoomOut {
	0% { background-size: 110% auto;}
	100% {background-size: 100% auto; }
}
@keyframes zoomOut {
	0% { background-size: 110% auto; }
	100% { background-size: 100% auto;}
}