@-webkit-keyframes slideUp {
	from { opacity:0;-webkit-transform: translate3d(0,30px,0); }
	to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideUp {
	from { opacity:0;-moz-transform: translate3d(0,30px,0); }
	to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideUp {
	from { opacity:0;-o-transform: translate3d(0,30px,0); }
	to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideUp {
	from { opacity:0;transform: translate3d(0,30px,0); }
	to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes slideDown {
	from { opacity:0;-webkit-transform: translate3d(0,-30px,0); }
	to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideDown {
	from { opacity:0;-moz-transform: translate3d(0,-30px,0); }
	to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideDown {
	from { opacity:0;-o-transform: translate3d(0,-30px,0); }
	to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideDown {
	from { opacity:0;transform: translate3d(0,-30px,0); }
	to { opacity:1;transform: translate3d(0,0,0); }
}


@-webkit-keyframes slideLeft {
	from { opacity:0;-webkit-transform: translate3d(30px,0,0); }
	to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideLeft {
	from { opacity:0;-moz-transform: translate3d(30px,0,0); }
	to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideLeft {
	from { opacity:0;-o-transform: translate3d(30px,0,0); }
	to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideLeft {
	from { opacity:0;transform: translate3d(30px,0,0); }
	to { opacity:1;transform: translate3d(0,0,0); }
}



@-webkit-keyframes slideRight {
	from { opacity:0;-webkit-transform: translate3d(-30px,0,0); }
	to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideRight {
	from { opacity:0;-moz-transform: translate3d(-30px,0,0); }
	to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideRight {
	from { opacity:0;-o-transform: translate3d(-30px,0,0); }
	to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideRight {
	from { opacity:0;transform: translate3d(-30px,0,0); }
	to { opacity:1;transform: translate3d(0,0,0); }
}


.animate{opacity: 0}
.animate.slideUp {opacity: 1; animation: slideUp .7s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);}
.animate.slideDown {opacity: 1; animation: slideDown .7s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);}
.animate.slideLeft {opacity: 1; animation: slideLeft .7s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86); }
.animate.slideRight {opacity: 1; animation: slideRight .7s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86); }



/* 이미지 애니메이션 */
.motion-zoom {overflow: hidden;}
.motion-zoom img{opacity: 0;
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	-webkit-transition: opacity 1.1s ease 167ms, -webkit-transform 1.1s ease-out;
	transition: opacity 1.1s ease 167ms, -webkit-transform 1.1s ease-out;
	transition: transform 1.1s ease-out, opacity 1.1s ease 167ms;
	transition: transform 1.1s ease-out, opacity 1.1s ease 167ms, -webkit-transform 1.1s ease-out;
}
.motion-zoom.animated img {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}

.motion-slide {position: relative;overflow: hidden; background:none;}
.motion-slide img {opacity:0;
	-webkit-clip-path: polygon(0 0,0 0,0 100%,0 100%);
	clip-path: polygon(0 0,0 0,0 100%,0 100%);
	-webkit-transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
	transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
}
.motion-slide.animated img {
	opacity:1;
	-webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
	clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}


/* 플로팅 애니메이션 */
@keyframes float {
	0% {
		/*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(0px);
	}
	50% {
		/*box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
		transform: translatey(-20px);
	}
	100% {
		/*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(0px);
	}
}

/*.floating {
	box-sizing: border-box;
	overflow: hidden;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
}
*/
