/* 애니메이션 시작*/
/* 하 to 상 */
@keyframes slideUpFade{
    from{opacity: 0; transform: translateY(50px);}
    to{opacity: 1; transform: translateY(0);}
}
@keyframes slideDownFade{
    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);}
}
@keyframes zoomOutFade{
    from{opacity: 0; transform: scale(1.08);}
    to{opacity: 1; transform: scale(1);}
}
@keyframes zoomOutSlow{
    0%{transform: scale(1.08);}
    100%{transform: scale(1);}
}
@keyframes softUpFade{
    0%{opacity: 0; transform: translateY(22px);}
    100%{opacity: 1; transform: translateY(0);}
}
@keyframes softFadeIn{
    0%{opacity: 0; transform: translateY(14px);}
    100%{opacity: 1; transform: translateY(0);}
}
@keyframes blurFadeIn{
    0%{opacity: 0; filter: blur(14px);}
    100%{opacity: 1; filter: blur(0);}
}
@keyframes revealClipY{
    0%{clip-path: inset(0 0 100% 0);}
    100%{clip-path: inset(0 0 0 0);}
}
@keyframes visualZoomOut{
    0%{transform: scale(1.08);}
    100%{transform: scale(1);}
}
@keyframes visualTextUp{
    0%{opacity: 0; transform: translateY(22px);}
    100%{opacity: 1; transform: translateY(0);}
}
@keyframes visualFadeIn{
    0%{opacity: 0; transform: translateY(14px);}
    100%{opacity: 1; transform: translateY(0);}
}

.reveal-up{opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-up.active{animation-name: slideUpFade;}
.reveal-down{opacity: 0; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.reveal-down.active{animation-name: slideDownFade;}
.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;}
.reveal-zoom-out{animation-duration: 4.5s; animation-timing-function: cubic-bezier(0.25, 0.5, 0.35, 1); animation-fill-mode: forwards; will-change: transform;}
.reveal-zoom-out.active{animation-name: zoomOutSlow;}
.reveal-zoom-out-fade{opacity: 0; animation-duration: 2s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-fill-mode: forwards;}
.reveal-zoom-out-fade.active{animation-name: zoomOutFade;}
.reveal-soft-up{opacity: 0; animation-duration: 1.8s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-fill-mode: forwards;}
.reveal-soft-up.active{animation-name: softUpFade;}
.reveal-soft-fade{opacity: 0; animation-duration: 2.2s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-fill-mode: forwards;}
.reveal-soft-fade.active{animation-name: softFadeIn;}
.reveal-blur-in{opacity: 0; filter: blur(14px); animation-duration: 3s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-fill-mode: forwards; will-change: filter, opacity;}
.reveal-blur-in.active{animation-name: blurFadeIn;}
.reveal-clip-down{clip-path: inset(0 0 100% 0); animation-duration: 1.6s; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); animation-fill-mode: forwards;}
.reveal-clip-down.active{animation-name: revealClipY;}

.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;}
.delay-7{animation-delay: 1.1s;}
.delay-8{animation-delay: 1.25s;}
.delay-9{animation-delay: 1.4s;}
.delay-10{animation-delay: 1.6s;}

.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;}
.pc-delay-7{animation-delay: 1.1s;}
.pc-delay-8{animation-delay: 1.25s;}
.pc-delay-9{animation-delay: 1.4s;}
.pc-delay-10{animation-delay: 1.6s;}
/* 애니메이션 끝*/

@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;}
    .pc-delay-7{animation-delay: unset;}
    .pc-delay-8{animation-delay: unset;}
    .pc-delay-9{animation-delay: unset;}
    .pc-delay-10{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;}
    .mo-delay-7{animation-delay: 1.1s;}
    .mo-delay-8{animation-delay: 1.25s;}
    .mo-delay-9{animation-delay: 1.4s;}
    .mo-delay-10{animation-delay: 1.6s;}
    /* 애니메이션 끝 */
}