/*애니메이션*/






/*페이드인*/
/*고정*/
.mFindeIn{
  animation: fadeIn 1s;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*아래에서 위*/
.mFindeIn_up{
  animation: fadeInUp 2s;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

/*위에서 아래*/
.mFindeIn_down{
  animation: fadeInDown 2s;
}
@keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
     }
     to {
         opacity: 1;
         transform: translateZ(0);
     }
 }

 /*왼쪽에서 오른쪽*/
 .mFindeIn_left{
   animation: fadeInLeft 2s;
 }
 @keyframes inLeft {
     0% {
         left:-100%;
         opacity:1;
     }
     to {
         left:0;
         opacity:1;
     }
 }

/*오른쪽에서 왼쪽*/
.mFindeIn_right{
  animation: fadeInRight 2s;
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}




/*페이드아웃*/
/*아래에서 위*/
.mFindeIn_up{
  animation: fadeOutUp 2s;
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 0;
        transform: translateZ(0);
    }
}

/*위에서 아래*/
.mFindeOut_down{
  animation: fadeOutDown 2s;
}
@keyframes fadeOutDown {
     0% {
         opacity: 1;
         transform: translate3d(0, -100%, 0);
     }
     to {
         opacity: 0;
         transform: translateZ(0);
     }
 }

 /*왼쪽에서 오른쪽*/
 .mFindeOut_left{
   animation: fadeOutLeft 2s;
 }
 @keyframes inLeft {
     0% {
         left:-100%;
		      opacity:1;
     }
     to {
         left:0;
		      opacity:0;
     }
 }

/*오른쪽에서 왼쪽*/
.mFindeOut_right{
  animation: fadeOutRight 2s;
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 0;
        transform: translateZ(0);
    }
}



/*일반아웃*/
/*아래에서 위*/
.mOut_up{
  animation: outUp 3s forwards;
  /*transition: all 500ms ease 0s;*/
}
@keyframes outUp {
    0% {
        top:0;
    }
    to {
        top:-100%;
    }
}

/*위에서 아래*/
.mOut_down{
  animation: OutDown 3s forwards;
}
@keyframes OutDown {
     0% {
         bottom:0;
     }
     to {
        bottom:-100%;
     }
 }

 /*왼쪽에서 오른쪽*/
 .mOut_left{
   animation: outLeft 3s forwards ;
 }
 @keyframes outLeft {
     0% {
         left:0;
     }
     to {
         left:-100%;
     }
 }

/*오른쪽에서 왼쪽*/
.mOut_right{
  animation: OutRight 2s forwards;
}
@keyframes OutRight {
  0% {
      right:0;
  }
  to {
      right:-100%;
  }
}

/*일반인*/
/*아래에서 위*/
.mIn_up{
  animation: inUp 3s forwards;
  /*transition: all 500ms ease 0s;*/
}
@keyframes inUp {
    0% {
        top:0;
    }
    to {
        top:-100%;
    }
}

/*위에서 아래*/
.mIn_down{
  animation: inDown 3s;
}
@keyframes inDown {
     0% {
         bottom:100%;
     }
     to {
        bottom:-100%;
     }
 }

 /*왼쪽에서 오른쪽*/
 .mIn_left{
   animation: inLeft 2s forwards ;
 }
 @keyframes inLeft {
     0% {
         left:-100%;
		 opacity:1;
     }
     to {
         left:0;
		 opacity:1;
     }
 }

/*오른쪽에서 왼쪽*/
.mIn_right{
  animation: inRight 2s;
}
@keyframes inRight {
    0% {
        opacity: 1;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}




/*확대*/
.mZoomIn{
  animation: zoomIn 3s forwards;
}
@keyframes zoomIn {
    0% {
        transform:scale(1);
    }
    to {
      transform:scale(1.1);
    }
}

/*축소*/
.mZoomOut{
  animation: zoomOut 3s forwards;
}
@keyframes zoomOut {
    0% {
        transform:scale(1.1);
    }
    to {
      transform:scale(1);
    }
}





/** 테스트 **/
.delay-100{-webkit-animation-delay: 100ms;animation-delay: 100ms;-webkit-animation-delay: 100ms;animation-delay: 100ms;}
.delay-200{-webkit-animation-delay: 200ms;animation-delay: 200ms;-webkit-animation-delay: 200ms;animation-delay: 200ms;}
.delay-300{-webkit-animation-delay: 300ms;animation-delay: 300ms;-webkit-animation-delay: 300ms;animation-delay: 300ms;}
.delay-400{-webkit-animation-delay: 400ms;animation-delay: 400ms;-webkit-animation-delay: 400ms;animation-delay: 400ms;}
.delay-500{-webkit-animation-delay: 500ms;animation-delay: 500ms;-webkit-animation-delay: 500ms;animation-delay: 500ms;}
.delay-600{-webkit-animation-delay: 600ms;animation-delay: 600ms;-webkit-animation-delay: 600ms;animation-delay: 600ms;}
.delay-700{-webkit-animation-delay: 700ms;animation-delay: 700ms;-webkit-animation-delay: 700ms;animation-delay: 700ms;}
.delay-800{-webkit-animation-delay: 800ms;animation-delay: 800ms;-webkit-animation-delay: 800ms;animation-delay: 800ms;}
.delay-900{-webkit-animation-delay: 900ms;animation-delay: 900ms;-webkit-animation-delay: 900ms;animation-delay: 900ms;}
.delay-1000{-webkit-animation-delay: 1000ms;animation-delay: 1000ms;-webkit-animation-delay: 1000ms;animation-delay: 1000ms;}
.delay-1100{-webkit-animation-delay: 1100ms;animation-delay: 1100ms;-webkit-animation-delay: 1100ms;animation-delay: 1100ms;}
.delay-1200{-webkit-animation-delay: 1200ms;animation-delay: 1200ms;-webkit-animation-delay: 1200ms;animation-delay: 1200ms;}
.delay-1300{-webkit-animation-delay: 1300ms;animation-delay: 1300ms;-webkit-animation-delay: 1300ms;animation-delay: 1300ms;}
.delay-1400{-webkit-animation-delay: 1400ms;animation-delay: 1400ms;-webkit-animation-delay: 1400ms;animation-delay: 1400ms;}
.delay-1500{-webkit-animation-delay: 1500ms;animation-delay: 1500ms;-webkit-animation-delay: 1500ms;animation-delay: 1500ms;}
.delay-1600{-webkit-animation-delay: 1600ms;animation-delay: 1600ms;-webkit-animation-delay: 1600ms;animation-delay: 1600ms;}
.delay-1700{-webkit-animation-delay: 1700ms;animation-delay: 1700ms;-webkit-animation-delay: 1700ms;animation-delay: 1700ms;}
.delay-1800{-webkit-animation-delay: 1800ms;animation-delay: 1800ms;-webkit-animation-delay: 1800ms;animation-delay: 1800ms;}
.delay-1900{-webkit-animation-delay: 1900ms;animation-delay: 1900ms;-webkit-animation-delay: 1900ms;animation-delay: 1900ms;}
.delay-2000{-webkit-animation-delay: 2000ms;animation-delay: 2000ms;-webkit-animation-delay: 2000ms;animation-delay: 2000ms;}
.delay-3000{-webkit-animation-delay: 3000ms;animation-delay: 3000ms;-webkit-animation-delay: 3000ms;animation-delay: 3000ms;}

.duration-100{animation-duration:100ms;}
.duration-200{animation-duration:200ms;}
.duration-300{animation-duration:300ms;}
.duration-400{animation-duration:400ms;}
.duration-500{animation-duration:500ms;}
.duration-600{animation-duration:600ms;}
.duration-700{animation-duration:700ms;}
.duration-800{animation-duration:800ms;}
.duration-900{animation-duration:900ms;}
.duration-1000{animation-duration:1000ms;}
.duration-1100{animation-duration:1100ms;}
.duration-1200{animation-duration:1200ms;}
.duration-1300{animation-duration:1300ms;}
.duration-1400{animation-duration:1400ms;}
.duration-1500{animation-duration:1500ms;}
.duration-1600{animation-duration:1600ms;}
.duration-1700{animation-duration:1700ms;}
.duration-1800{animation-duration:1800ms;}
.duration-1900{animation-duration:1900ms;}
.duration-2000{animation-duration:2000ms;}
.duration-2500{animation-duration:2500ms;}
.duration-3000{animation-duration:3000ms;}