/* 애니메이션 시작*/
/* 하 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; }

.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; }
/* 애니메이션 끝*/

@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; }
    .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; }
    /* 애니메이션 끝 */
}