@keyframes slideUpFade{from{opacity: 0; transform: translateY(50px);}to{opacity: 1; transform: translateY(0);}}
@keyframes slideLeftFade{from{opacity: 0; transform: translateX(-50px);}to{opacity: 1; transform: translateX(0);}}
@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.05);}to{opacity: 1; transform: scale(1);}}  

.reveal-up,
.reveal-left,
.reveal-right,
.reveal-bg,
.reveal-zoom-in{opacity: 0; animation-duration: 3s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: forwards;}

.reveal-up.active{animation-name: slideUpFade;}
.reveal-left.active{animation-name: slideLeftFade;}
.reveal-right.active{animation-name: slideRightFade;}
.reveal-bg.active{animation-name: fadeIn; animation-duration: 5s;}
.reveal-zoom-in.active{animation-name: zoomInFade; animation-duration: 1.8s;}

.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, .pc-delay-2, .pc-delay-3, .pc-delay-4, .pc-delay-5{animation-delay: 0s;}
    .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;}
}