/*
    version 1.2
    21-12-14 업데이트
    content 애니메이션 css
*/

/* 애니메이션 시작 브라우저 사이즈 */
@media screen and (min-width: 1024px) {

    /* 스크롤 opacity 트랜지션 */
    .sc-top {opacity: 0; transform: translateY(-30px); transition: opacity 0.6s, transform 0.6s;}
    .sc-left {opacity: 0; transform: translateX(-30px); transition: opacity 0.6s, transform 0.6s;}
    .sc-right {opacity: 0; transform: translateX(30px); transition: opacity 0.6s, transform 0.6s;}
    .sc-bottom {opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s;}

    .act.sc-top,
    .on.sc-top {opacity: 1; transform: translateY(0);}
    .act.sc-left,
    .on.sc-left {opacity: 1; transform: translateX(0);}
    .act.sc-right,
    .on.sc-right {opacity: 1; transform: translateX(0);}
    .act.sc-bottom,
    .on.sc-bottom {opacity: 1; transform: translateY(0);}

    .act .sc-top,
    .on .sc-top {opacity: 1; transform: translateY(0);}
    .act .sc-left,
    .on .sc-left {opacity: 1; transform: translateX(0);}
    .act .sc-right,
    .on .sc-right {opacity: 1; transform: translateX(0);}
    .act .sc-bottom,
    .on .sc-bottom {opacity: 1; transform: translateY(0);}


    /* 크기 트랜지션 */
    .scaleBig {transform: scale(1); transition: transform 0.6s;}
    .scaleSmall {transform: scale(1); transition: transform 0.6s;}

    .act.scaleBig,
    .on.scaleBig {transform: scale(1.3);}
    .act.scaleSmall,
    .on.scaleSmall {transform: scale(0.7);}

    .act .scaleBig,
    .on .scaleBig {transform: scale(1.3);}
    .act .scaleSmall,
    .on .scaleSmall {transform: scale(0.7);}


    /* hover 크기 트랜지션 */
    .mouScaleBig {transform: scale(1); transition: transform 0.6s;}
    .mouScaleSmall {transform: scale(1); transition: transform 0.6s;}

    .mouScaleBig:hover {transform: scale(1.3);}
    .mouScaleSmall:hover {transform: scale(0.7);}
    

    /* 트랜지션 딜레이 */
    .act .del-01ms,
    .on.del-01ms {transition-delay: 0.1s !important;}
    .act .del-02ms,
    .on.del-02ms {transition-delay: 0.2s !important;}
    .act .del-03ms,
    .on.del-03ms {transition-delay: 0.3s !important;}
    .act .del-04ms,
    .on.del-04ms {transition-delay: 0.4s !important;}
    .act .del-05ms,
    .on.del-05ms {transition-delay: 0.5s !important;}
    .act .del-06ms,
    .on.del-06ms {transition-delay: 0.6s !important;}
    .act .del-07ms,
    .on.del-07ms {transition-delay: 0.7s !important;}
    .act .del-08ms,
    .on.del-08ms {transition-delay: 0.8s !important;}
    .act .del-09ms,
    .on.del-09ms {transition-delay: 0.9s !important;}
    .act .del-10ms,
    .on.del-10ms {transition-delay: 1s !important;}

    .act .del-01ms,
    .on .del-01ms {transition-delay: 0.1s !important;}
    .act .del-02ms,
    .on .del-02ms {transition-delay: 0.2s !important;}
    .act .del-03ms,
    .on .del-03ms {transition-delay: 0.3s !important;}
    .act .del-04ms,
    .on .del-04ms {transition-delay: 0.4s !important;}
    .act .del-05ms,
    .on .del-05ms {transition-delay: 0.5s !important;}
    .act .del-06ms,
    .on .del-06ms {transition-delay: 0.6s !important;}
    .act .del-07ms,
    .on .del-07ms {transition-delay: 0.7s !important;}
    .act .del-08ms,
    .on .del-08ms {transition-delay: 0.8s !important;}
    .act .del-09ms,
    .on .del-09ms {transition-delay: 0.9s !important;}
    .act .del-10ms,
    .on .del-10ms {transition-delay: 1s !important;}



    /* 애니메이션 */

    /* 펌핑 애니메이션 */
    .act.ani-pump,
    .on.ani-pump {animation-name: aniPump; animation-duration: 0.6s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); animation-fill-mode: forwards;}
    .act .ani-pump,
    .on .ani-pump {animation-name: aniPump; animation-duration: 0.6s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); animation-fill-mode: forwards;}
    :hover.mouAni-pump, :active.mouAni-pump {animation-name: aniPump; animation-duration: 0.6s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); animation-fill-mode: forwards;}

    /* 회전 애니메이션 */
    .act.ani-turn,
    .on.ani-turn {animation-name: aniTurn; animation-duration: 1s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74);}
    .act .ani-turn,
    .on .ani-turn {animation-name: aniTurn; animation-duration: 1s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74);}
    :hover.mouAni-turn, :active.mouAni-turn {animation-name: aniTurn; animation-duration: 1s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74);}
    :hover.mouAni-inf-turn, :active.mouAni-turn {animation-name: aniTurn; animation-duration: 1s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); animation-iteration-count: infinite; animation-direction:alternate;}

    /* 끄덕 애니메이션 */
    .act.ani-nod,
    .on.ani-nod {animation-name: aniNod; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}
    .act .ani-nod,
    .on .ani-nod {animation-name: aniNod; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}
    :hover.mouAni-nod, :active.mouAni-nod {animation-name: aniNod; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}

    
    .act.ani-jump,
    .on.ani-jump {animation-name: aniJump; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}
    .act .ani-jump,
    .on .ani-jump {animation-name: aniJump; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}
    :hover.mouAni-jump, :active.mouAni-jump {animation-name: aniJump; animation-duration: 0.4s; animation-delay: 0; animation-timing-function: cubic-bezier(.2,.85,.73,.74); transform-origin: bottom right;}

    /* 애니메이션 재생시간 */
    .time-01ms {animation-duration: 0.1s !important;}
    .time-02ms {animation-duration: 0.2s !important;}
    .time-03ms {animation-duration: 0.3s !important;}
    .time-04ms {animation-duration: 0.4s !important;}
    .time-05ms {animation-duration: 0.5s !important;}
    .time-06ms {animation-duration: 0.6s !important;}
    .time-07ms {animation-duration: 0.7s !important;}
    .time-08ms {animation-duration: 0.8s !important;}
    .time-09ms {animation-duration: 0.9s !important;}
    .time-10ms {animation-duration: 1s !important;}
}

@keyframes aniPump {
    0% {
        transform: scale(1);
    }
    70%{
        transform: scale(1.1);
    }
    90%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes aniTurn {
    0% {
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}

@keyframes aniNod {
    0% {
        transform: rotateZ(0);
    }
    80%{
        transform: rotateZ(2deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}

@keyframes aniJump {
    0% {
        transform: scaleY(1) translateY(0);
    }
    70%{
        transform: scaleY(1.05) translateY(-5px);
    }
    90%{
        transform: scaleY(0.95) translateY(1px);
    }
    100%{
        transform: scaleY(1) translateY(0);
    }
}