/* 애니메이션 시작*/
/* 하 to 상 */
@keyframes slideUpFade{
    from{opacity: 0;transform: translateY(50px);}
    to{opacity: 1;transform: translateY(0);}
}
/* 좌 to 우 */
@keyframes slideLeftFade{
    from{opacity: 0;transform: translateX(-50px);}
    to{opacity: 1;transform: translateX(0);}
}
/* 우 to 좌 */
@keyframes slideRightFade{
    from{opacity: 0;transform: translateX(50px);}
    to{opacity: 1;transform: translateX(0);}
}
@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}

@keyframes zoomInFade{
    from{opacity: 0;transform: scale(1.1);}
    to{opacity: 1;transform: scale(1);}
}

.reveal-up{opacity: 0;animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-up.active{animation-name: slideUpFade;}
.reveal-left{opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-left.active{animation-name: slideLeftFade;}
.reveal-right{opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-right.active{animation-name: slideRightFade;}
.reveal-bg{opacity: 0; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards;}
.reveal-bg.active{animation-name: fadeIn;}
.reveal-zoom-in{opacity: 0; animation-duration: 1.5s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-zoom-in.active{animation-name: zoomInFade;}

.delay-1{animation-delay: 0.2s;}
.delay-2{animation-delay: 0.35s;}
.delay-3{animation-delay: 0.5s;}
.delay-4{animation-delay: 0.65s;}
.delay-5{animation-delay: 0.8s;}
.delay-6{animation-delay: 0.95s;}

.pc-delay-1{animation-delay: 0.2s;}
.pc-delay-2{animation-delay: 0.35s;}
.pc-delay-3{animation-delay: 0.5s;}
.pc-delay-4{animation-delay: 0.65s;}
.pc-delay-5{animation-delay: 0.8s;}
.pc-delay-6{animation-delay: 0.95s;}
/* 애니메이션 끝*/

@media(max-width: 1024px){
    .sub-common .sub-pc{display: none !important;}
    .sub-common .sub-mo{display: block !important;}
    .sub-common .sub-mo-flex{display: flex !important;}
    .sub-common .sub-mo-inline{display: inline !important;}
    .sub-common .sub-mo-grid{display: grid !important;}

    /* 애니메이션 시작 */
    .pc-delay-1{animation-delay: unset;}
    .pc-delay-2{animation-delay: unset;}
    .pc-delay-3{animation-delay: unset;}
    .pc-delay-4{animation-delay: unset;}
    .pc-delay-5{animation-delay: unset;}
    .pc-delay-6{animation-delay: unset;}
    .mo-delay-1{animation-delay: 0.2s;}
    .mo-delay-2{animation-delay: 0.35s;}
    .mo-delay-3{animation-delay: 0.5s;}
    .mo-delay-4{animation-delay: 0.65s;}
    .mo-delay-5{animation-delay: 0.8s;}
    .mo-delay-6{animation-delay: 0.95s;}
    /* 애니메이션 끝 */
}