/*animation*/
@-webkit-keyframes scaleUpAnimation {
    from { opacity:0;-webkit-transform: scale(0.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleUpAnimation {
    from { opacity:0;-moz-transform: scale(0.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleUpAnimation {
    from { opacity:0;-o-transform: scale(0.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleUpAnimation {
    from { opacity:0;transform: scale(0.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes scaleDownAnimation {
    from { opacity:1;-webkit-transform: scale(1.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleDownAnimation {
    from { opacity:1;-moz-transform: scale(1.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleDownAnimation {
    from { opacity:1;-o-transform: scale(1.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleDownAnimation {
    from { opacity:1;transform: scale(1.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes scaleWidthAnimation {
  from { -webkit-transform: scale(0,1); }
  to { -webkit-transform: scale(1,1); }
}
@-moz-keyframes scaleWidthAnimation {
  from { -webkit-transform: scale(0,1); }
  to { -webkit-transform: scale(1,1); }
}
@-o-keyframes scaleWidthAnimation {
  from { -webkit-transform: scale(0,1); }
  to { -webkit-transform: scale(1,1); }
}
@keyframes scaleWidthAnimation {
  from { -webkit-transform: scale(0,1); }
  to { -webkit-transform: scale(1,1); }
}

@-webkit-keyframes widthRightAnimation {
  from { width:0%; }
  to { width: 100%; }
}
@-moz-keyframes widthRightAnimation {
  from { width:0%; }
  to { width: 100%; }
}
@-o-keyframes widthRightAnimation {
  from { width:0%; }
  to { width: 100%; }
}
@keyframes widthRightAnimation {
  from { width:0%; }
  to { width: 100%; }
}

@-webkit-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@-moz-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@-o-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}

@-webkit-keyframes slideUpAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,20px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideUpAnimation {
    from { opacity:0;-moz-transform: translate3d(0,20px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideUpAnimation {
    from { opacity:0;-o-transform: translate3d(0,20px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideUpAnimation {
    from { opacity:0;transform: translate3d(0,20px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes slideDownAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,-50px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideDownAnimation {
    from { opacity:0;-moz-transform: translate3d(0,-50px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideDownAnimation {
    from { opacity:0;-o-transform: translate3d(0,-50px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideDownAnimation {
    from { opacity:0;transform: translate3d(0,-50px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}

@-webkit-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@-moz-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@-o-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}

[data-ani="css"][data-ani-style="slide-up"],
[data-ani="first-css"][data-ani-style="slide-up"],
[data-ani="css"][data-ani-style="slide-up-in-out"] {
  opacity: 0;
}

[data-ani="css"][data-ani-style="slide-up"].ani-on,
[data-ani="first-css"][data-ani-style="slide-up"].ani-on {
  animation: slideUpAnimation .5s cubic-bezier(0.12, 0.4, 0.41, 0.86) forwards;
}

[data-ani="css"][data-ani-style="slide-up-in-out"].ani-on,
[data-ani="first-css"][data-ani-style="slide-up-in-out"].ani-on {
  animation: slideUpAnimation 1s cubic-bezier(0.74, 0, 0, 1) forwards;
}

/* [data-ani="css"][data-ani-style="slide-down"],
[data-ani="first-css"][data-ani-style="slide-down"]{
  opacity: 0;
}
[data-ani="css"][data-ani-style="slide-down"].ani-on,
[data-ani="first-css"][data-ani-style="slide-down"].ani-on {
  animation: slideDownAnimation 1s .2s cubic-bezier(0.12, 0.4, 0.41, 0.86) forwards;
} */

[data-ani="css"][data-ani-style="opacity"],
[data-ani="first-css"][data-ani-style="opacity"] {
  opacity: 0;
}
[data-ani="css"][data-ani-style="opacity"].ani-on,
[data-ani="first-css"][data-ani-style="opacity"].ani-on {
  animation: opacityAnimation 0.7s cubic-bezier(0.5, 0.2, 0.05, 1.0) forwards;
}

[data-ani="css"][data-ani-style="opacity"],
[data-ani="first-css"][data-ani-style="opacity"] {
  opacity: 0;
}

[data-ani="css"][data-ani-style="scale-width-right"],
[data-ani="first-css"][data-ani-style="scale-width-right"] {
  transform: scale(0, 1);
  transform-origin: right;
}
[data-ani="css"][data-ani-style="scale-width-right"].ani-on,
[data-ani="first-css"][data-ani-style="scale-width-right"].ani-on {
  animation: scaleWidthAnimation 0.7s cubic-bezier(0.5, 0.2, 0.05, 1.0) forwards;
}

[data-ani="css"][data-ani-style="scale-width-center"],
[data-ani="first-css"][data-ani-style="scale-width-center"] {
  transform: scale(0, 1);
  transform-origin: center;
}
[data-ani="css"][data-ani-style="scale-width-center"].ani-on,
[data-ani="first-css"][data-ani-style="scale-width-center"].ani-on {
  animation: scaleWidthAnimation 0.7s cubic-bezier(0.74, 0, 0, 1) forwards;
  transform-origin: center;
}

[data-ani="css"][data-ani-style="width-right"],
[data-ani="first-css"][data-ani-style="width-right"] {
  width: 0%;
  overflow: hidden;
}
[data-ani="css"][data-ani-style="width-right"].ani-on,
[data-ani="first-css"][data-ani-style="width-right"].ani-on {
  animation: widthRightAnimation .7s cubic-bezier(0.5, 0.2, 0.05, 1.0) forwards;
}

/*=================================================
        parallax 애니메이션
=================================================*/
[data-ani="parallax"] {
  position: relative;
  /* visibility: hidden; */
}
[data-ani="overflow-parallax"] {
  position: relative;
  /* visibility: hidden; */
  overflow: hidden;
}
[data-ani="overflow-parallax"].ani-on,
[data-ani="parallax"].ani-on {
  /* visibility: visible; */
}
[data-ani="overflow-parallax"].ani-on>*,
[data-ani="parallax"].ani-on>* {
  position: absolute;
  top: auto;
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 1s cubic-bezier(0.2, 0.2, 0.05, 1.0);
}