/*--섹션 기본 모션--*/
.ch_motion.common_motion{transform: translateY(30px);opacity: 0;transition: transform .8s ease, opacity .6s;}
.ch_motion.common_motion.on {transform: translateY(0);opacity: 1;}
/*--위에서 아래--*/
.ch_motion.top_to_bottom { transform: translateY(-30px); }
.ch_motion.top_to_bottom.on { transform: translateY(0); opacity: 1; }
/*--아래에서 위--*/
.ch_motion.bottom_to_top { transform: translateY(30px); }
.ch_motion.bottom_to_top.on { transform: translateY(0); opacity: 1; }
/*--왼쪽에서 오른쪽--*/
.ch_motion.left_to_right { transform: translateX(-30px); }
.ch_motion.left_to_right.on { transform: translateX(0); opacity: 1; }
/*--오른쪽에서 왼쪽--*/
.ch_motion.right_to_left { transform: translateX(30px); }
.ch_motion.right_to_left.on { transform: translateX(0); opacity: 1; }

.ch_delay_01{transition-delay: .2s !important;}
.ch_delay_02{transition-delay: .3s !important;}
.ch_delay_03{transition-delay: .4s !important;}
.ch_delay_04{transition-delay: .5s !important;}
.ch_delay_05{transition-delay: .6s !important;}
.ch_delay_06{transition-delay: .7s !important;}
.ch_delay_07{transition-delay: .8s !important;}
.ch_delay_08{transition-delay: .9s !important;}
.ch_delay_09{transition-delay: 1s !important;}
.ch_delay_10{transition-delay: 1.1s !important;}
.ch_delay_11{transition-delay: 1.2s !important;}
.ch_delay_12{transition-delay: 1.3s !important;}


/*--오토플레이 각각 왼/오 방향--*/
@keyframes flow_left{ 
	0%{left:0;}	
	100%{left:-100%;}	
}
@keyframes flow_right{ 
	100%{left:0;}	
	0%{left:-100%;}	
}


/*--애니메이션 모음--*/
/*아래서 위로 서서히 이동*/
@keyframes bottomUp {
  0% {
    transform: translateX(-50%) translateY(50px);
  }
  50% {
    transform: translateX(-50%) translateY(20px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/*둥둥 뜨는 애니메이션*/
.upDownBounce {animation: upDownBounce 2s ease-in-out infinite;}
@keyframes upDownBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.upDownBounce2 {animation: upDownBounce2 1.5s ease-in-out infinite;}
@keyframes upDownBounce2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.upDownBounce3 {animation: upDownBounce3 2.2s ease-in-out infinite;}
@keyframes upDownBounce3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/*불규칙 heart 바운스*/
.bounceIn {animation: bounceIn 2s ease-in-out infinite;}
@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: .2;
        -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)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}


.bounceIn2 {animation: bounceIn2 1.4s ease-in-out infinite;}
@keyframes bounceIn2 {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: .2;
        -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)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}


.bounceIn3 {animation: bounceIn3 2.2s ease-in-out infinite;}
@keyframes bounceIn3 {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: .2;
        -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)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

/*반짝반짝 별 애니메이션*/
.twinkle { animation: twinkle 2s infinite; /* 1초 간격으로 무한 반복 */ }
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.twinkle2 { animation: twinkle2 1.5s infinite; /* 1.5초 간격으로 무한 반복 */ }
@keyframes twinkle2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*깜빡이는 애니메이션*/
.blink {animation: blink-effect 1.4s step-end infinite;}
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

/*확대에서 가운데로 작아지도록*/
.slide-in-bck-center {transform: translateZ(600px);opacity: 0;}
.slide-in-bck-center.on{animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-in-bck-center {
  0% {
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

/*돌아가면서 가운데 안착*/
.ch_motion.swirl-in-bck.on { -webkit-animation: swirl-in-bck 0.65s ease-out both; animation: swirl-in-bck 0.65s ease-out both; } @keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
            transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/*텍스트 360도 회전 무한*/
.rotateTxt { animation-name: rot_motion; animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes rot_motion{ 
	0%{transform:rotate(0);}	
	100%{transform:rotate(360deg);}	
}

/*뒤에서 오른쪽으로 슈욱*/
.backInLeft.on { animation-name: backInLeft; animation-duration: 1s; animation-timing-function: linear;}
@keyframes backInLeft {
    0% {
        opacity: .7;
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translateX(-2000px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


/*뒤에서 왼쪽으로 슈욱*/
.backInRight.on { animation-name: backInRight; animation-duration: 1s; animation-timing-function: linear;}

@keyframes backInRight {
    0% {
        opacity: .7;
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


/*슬라이드 왼>오*/
.slideInLeft.on { animation-name: slideInLeft; animation-duration: 1s; animation-timing-function: linear;}
@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

/*슬라이드 오>왼*/
.slideInRight.on { animation-name: slideInRight; animation-duration: 1s; animation-timing-function: linear;}
@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

/*왁자지껄*/
.headShake.on {
  animation-name: headShakeLoop;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes headShakeLoop {
  0%, 10% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  25% {
    transform: translateX(-10px);
  }
  30% {
    transform: translateX(10px);
  }
  35%, 100% {
    transform: translateX(0);
  }
}