.animated {
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}


.ani-linear {
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

.ani-ease {
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

.ani-easein {
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}

.ani-easeout {
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

.ani-easeinout {
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}


[data-animation]{
  opacity: 0;
}

[data-animation].animated{
    opacity: 1;
}



/* 1. 나타나기 - 우선적용 */
/* 제자리, 위로, 아래로, 왼쪽으로, 오른쪽으로 */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}




@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}




@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}




@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}




@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


/* 2.당겨접기 */
/* 제자리, 위로, 아래로, 왼쪽으로, 오른쪽으로 */

@-webkit-keyframes perspective {
	0% {
		opacity:0;
		transform-origin:0 50%;
		transform:rotateX(90deg);
	}

	100% {
		opacity:1;
		transform-origin:0 0;
		transform:rotateX(0deg);
	}
}

@keyframes perspective {
	0% {
		opacity:0;
		transform-origin:0 0;
		transform:rotateX(90deg);
	}

	100% {
		opacity:1;
		transform-origin:0 0;
		transform:rotateX(0deg);
	}
}

.perspective {
	-webkit-backface-visibility:visible !important;
	backface-visibility:visible !important;
	-webkit-animation-name:perspective;
	animation-name:perspective;
}



@-webkit-keyframes perspectiveUp {
	0% {
		opacity:0;
		-webkit-transform-origin:0 100%;
		-webkit-transform:perspective(800px) rotateX(90deg);
	}

	100% {
		opacity:1;
		-webkit-transform-origin:0 100%;
		-webkit-transform:perspective(800px) rotateX(0deg);
	}
}

@keyframes perspectiveUp {
	0% {
		opacity:0;
		transform-origin:0 100%;
		transform:perspective(800px) rotateX(90deg);
	}

	100% {
		opacity:1;
		transform-origin:0 100%;
		transform:perspective(800px) rotateX(0deg);
	}
}

.perspectiveUp {
	-webkit-backface-visibility:visible !important;
	backface-visibility:visible !important;
	-webkit-animation-name:perspectiveUp;
	animation-name:perspectiveUp;
}




@-webkit-keyframes perspectiveDown {
	0% {
		opacity:0;
		-webkit-transform-origin:0 0;
		-webkit-transform:perspective(800px) rotateX(-90deg);
	}

	100% {
		opacity:1;
		-webkit-transform-origin:0 0;
		-webkit-transform:perspective(800px) rotateX(0deg);
	}
}

@keyframes perspectiveDown {
	0% {
		opacity:0;
		transform-origin:0 0;
		transform:perspective(800px) rotateX(-90deg);
	}

	100% {
		opacity:1;
		transform-origin:0 0;
		transform:perspective(800px) rotateX(0deg);
	}
}

.perspectiveDown {
	-webkit-backface-visibility:visible !important;
	backface-visibility:visible !important;
	-webkit-animation-name:perspectiveDown;
	animation-name:perspectiveDown;
}




@-webkit-keyframes perspectiveLeft {
	0% {
		opacity:0;
		-webkit-transform-origin:0 0;
		-webkit-transform:perspective(800px) rotateY(90deg);
	}

	100% {
		opacity:1;
		-webkit-transform-origin:0 0;
		-webkit-transform:perspective(800px) rotateY(0deg);
	}
}

@keyframes perspectiveLeft {
	0% {
		opacity:0;
		transform-origin:0 0;
		transform:perspective(800px) rotateY(90deg);
	}

	100% {
		opacity:1;
		transform-origin:0 0;
		transform:perspective(800px) rotateY(0deg);
	}
}

.perspectiveLeft {
	-webkit-backface-visibility:visible !important;
	backface-visibility:visible !important;
	-webkit-animation-name:perspectiveLeft;
	animation-name:perspectiveLeft;
}




@-webkit-keyframes perspectiveRight {
	0% {
		opacity:0;
		-webkit-transform-origin:100% 0;
		-webkit-transform:perspective(800px) rotateY(-90deg);
	}

	100% {
		opacity:1;
		-webkit-transform-origin:100% 0;
		-webkit-transform:perspective(800px) rotateY(0deg);
	}
}

@keyframes perspectiveRight {
	0% {
		opacity:0;
		transform-origin:100% 0;
		transform:perspective(800px) rotateY(-90deg);
	}

	100% {
		opacity:1;
		transform-origin:100% 0;
		transform:perspective(800px) rotateY(0deg);
	}
}

.perspectiveRight {
	-webkit-backface-visibility:visible !important;
	backface-visibility:visible !important;
	-webkit-animation-name:perspectiveRight;
	animation-name:perspectiveRight;
}








/* 3. 확대하기 */
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}








/* 4.튕기며 나타나기 */
/* 제자리, 위로, 아래로, 왼쪽으로, 오른쪽으로 */
@-webkit-keyframes bounceIn {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}





@-webkit-keyframes bounceInUp {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}





@-webkit-keyframes bounceInDown {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}





@-webkit-keyframes bounceInLeft {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}




@-webkit-keyframes bounceInRight {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}