@charset "utf-8";
/* keyframe animation css */
/* ================

중간 키프레임 들어가는 경우는
0% {}
10% {}
.
.
.
100% {}
해당 테마에만 적용해야함

================= */
@keyframes moveUp {
	from {transform:translateY(13%);}
	to {transform:translateY(0);}
}
@-webkit-keyframes moveUp {
	from {transform:translateY(13%);}
	to {transform:translateY(0);}
}

@keyframes moveDown {
	from {transform:translateY(-13%);}
	to {transform:translateY(0);}
}
@-webkit-keyframes moveDown {
	from {transform:translateY(-13%);}
	to {transform:translateY(0);}
}

@keyframes moveLeft {
	from {transform:translateX(7%);}
	to {transform:translateX(0);}
}
@-webkit-keyframes moveLeft {
	from {transform:translateX(7%);}
	to {transform:translateX(0);}
}

@keyframes moveRight {
	from {transform:translateX(-7%);}
	to {transform:translateX(0);}
}
@-webkit-keyframes moveRight {
	from {transform:translateX(-7%);}
	to {transform:translateX(0);}
}

@keyframes zoomIn {
	from {transform:scale(1);}
	to {transform:scale(1.2);}
}
@-webkit-keyframes zoomIn {
	from {transform:scale(1);}
	to {transform:scale(1.2);}
}

@keyframes zoomOut {
	from {transform:scale(1.2);}
	to {transform:scale(1);}
}
@-webkit-keyframes zoomOut {
	from {transform:scale(1.2);}
	to {transform:scale(1);}
}

@keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
}
@-webkit-keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
}

@keyframes fadeOut {
	from {opacity:1;}
	to {opacity:0;}
}
@-webkit-keyframes fadeOut {
	from {opacity:1;}
	to {opacity:0;}
}

/* animation effect css */
@media screen and (min-width:1280px) {
	.animation_effect {position:relative; -transition:all 0.5s ease; -webkit-animation-duration:2s; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
	[data-effect="moveUp"] {-webkit-transform:translateY(13%); transform:translateY(13%);}
	[data-effect="moveUp"].active {-webkit-animation-name:moveUp; animation-name:moveUp;}
	[data-effect="moveDown"] {-webkit-transform:translateY(-13%); transform:translateY(-13%);}
	[data-effect="moveDown"].active {-webkit-animation-name:moveDown; animation-name:moveDown;}
	[data-effect="moveLeft"] {-webkit-transform:translateX(7%); transform:translateX(7%);}
	[data-effect="moveLeft"].active {-webkit-animation-name:moveLeft; animation-name:moveLeft;}
	[data-effect="moveRight"] {-webkit-transform:translateX(-7%); transform:translateX(-7%);}
	[data-effect="moveRight"].active {-webkit-animation-name:moveRight; animation-name:moveRight;}
	[data-effect="zoomIn"] {transform:scale(1);}
	[data-effect="zoomIn"].active {-webkit-animation-name:zoomIn; animation-name:zoomIn;}
	[data-effect="zoomOut"] {transform:scale(1.2);}
	[data-effect="zoomOut"].active {-webkit-animation-name:zoomOut; animation-name:zoomOut;}
	[data-effect="fadeIn"] {opacity:0;}
	[data-effect="fadeIn"].active {-webkit-animation-name:fadeIn; animation-name:fadeIn;}
	[data-effect="fadeOut"] {opacity:1;}
	[data-effect="fadeOut"].active {-webkit-animation-name:fadeOut; animation-name:fadeOut;}


	[data-count="infinite"] {-webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;}
	[data-count="2"] {-webkit-animation-iteration-count:2; animation-iteration-count:2;}
	[data-count="3"] {-webkit-animation-iteration-count:3; animation-iteration-count:3;}
	[data-count="4"] {-webkit-animation-iteration-count:4; animation-iteration-count:4;}
	[data-count="5"] {-webkit-animation-iteration-count:5; animation-iteration-count:5;}
}