﻿/* 애니메이션 */
.fadeIn{-webkit-animation:fadeIn .4s ease-in both; animation:fadeIn .4s ease-in both;}
.fadeInRight{-webkit-animation:fadeInRight .5s cubic-bezier(.55,.085,.68,.53) both; animation:fadeInRight .5s cubic-bezier(.55,.085,.68,.53) both;}
.fadeInLeft{-webkit-animation:fadeInLeft .5s cubic-bezier(.25,.46,.45,.94) both ;animation:fadeInLeft .5s cubic-bezier(.25,.46,.45,.94) both;}
.fadeInTop {-webkit-animation:fadeInTop .5s cubic-bezier(.25,.46,.45,.94) both; animation:fadeInTop .5s cubic-bezier(.25,.46,.45,.94) both;}
.fadeInBottom {-webkit-animation:fadeInBottom .5s cubic-bezier(.25,.46,.45,.94) both; animation:fadeInBottom .5s cubic-bezier(.25,.46,.45,.94) both;}
.zoomIn{-webkit-animation:zoomIn .4s cubic-bezier(.39,.575,.565,1.000) both; animation:zoomIn .4s cubic-bezier(.39,.575,.565,1.000) both;}
.scaleInBl {-webkit-animation:scaleInBl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation:scaleInBl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;} 
.rotateIn2BrCw {-webkit-animation:rotateIn2BrCw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation:rotateIn2BrCw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;} 
.move {-webkit-animation:move 25s linear infinite; animation:move 25s linear infinite;} 
.fadeInBl{-webkit-animation:fadeInBl .6s cubic-bezier(.39,.575,.565,1.000) both; animation:fadeInBl .6s cubic-bezier(.39,.575,.565,1.000) both}
.slideInFwdBr{-webkit-animation:slideInFwdBr 1s cubic-bezier(.25,.46,.45,.94) infinite both; animation:slideInFwdBr 1s cubic-bezier(.25,.46,.45,.94) infinite both;}
.shakeVertical{-webkit-animation:shakeVertical 2s cubic-bezier(.455,.03,.515,.955) infinite both; animation:shakeVertical 2s cubic-bezier(.455,.03,.515,.955) infinite both;}
.followShake {
    animation-name: fadeIn, shakeVertical;
    animation-delay: 0s, 1s;
    animation-duration: .4s, 2s;
    animation-timing-function: ease-in, cubic-bezier(.455,.03,.515,.955);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both;
}

/* 키프레임 */
@keyframes fadeIn {
0% { opacity:0;}
100% { opacity:1;}
}
@keyframes fadeInRight {
0% {-webkit-transform:translateX(-50px); transform:translateX(-50px); opacity:0;}
100% {-webkit-transform:translateX(0); transform:translateX(0); opacity:1;}
}
@keyframes fadeInLeft {
0% {-webkit-transform:translateX(50px); transform:translateX(50px); opacity:0;}
100% {-webkit-transform:translateX(0); transform:translateX(0); opacity:1;}
}
@keyframes fadeInTop {
0% {-webkit-transform:translateY(50px); transform:translateY(50px); opacity:0;}
100% {-webkit-transform:translateY(0); transform:translateY(0); opacity:1;}
}
@keyframes fadeInBottom {
0% {-webkit-transform:translateY(-50px); transform:translateY(-50px); opacity:0;}
100% {-webkit-transform:translateY(0); transform:translateY(0); opacity:1;}
}
@keyframes zoomIn {
0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity:0;}
100% { -webkit-transform: scale(1); transform: scale(1); opacity:1;}
}
@keyframes scaleInBl {
0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;}
100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;}
}
@keyframes rotateIn2BrCw {
0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 0; }
100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; }
}
@keyframes move {
from { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); }
to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
}
@keyframes fadeInBl {
0% { -webkit-transform: translateX(-50px) translateY(50px); transform: translateX(-50px) translateY(50px); opacity: 0; }
100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; }
}
@keyframes slideInFwdBr { 
0% { -webkit-transform: translateZ(-300px) translateY(20px) translateX(10px); transform: translateZ(-300px) translateY(20px) translateX(10px); opacity: 0; } 
100% { -webkit-transform: translateZ(0) translateY(0) translateX(0); transform: translateZ(0) translateY(0) translateX(0); opacity: 1; } 
}
@keyframes shakeVertical { 
0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
50%{ -webkit-transform: translateY(-8px); transform: translateY(-8px); } 
}