@charset "utf-8";
/* *******************************************************
 * filename : animation.css
 * description : 스크롤 애니메이션 CSS
 * date : 2020-08-13
******************************************************** */
@media all and (min-width:801px){
.txtline .txt-ani{display: block; transition-duration: .45s; transition-property: transform; transform: translateY(100%)}
.txtline.on .txt-ani{transform: translateY(0)}
.delay-100{transition-delay: .1s}
.delay-200{transition-delay: .2s}
.delay-300{transition-delay: .3s}
.delay-400{transition-delay: .4s}
.delay-500{transition-delay: .5s}
.delay-600{transition-delay: .6s}
.delay-700{transition-delay: .7s}
.delay-800{transition-delay: .8s}
.delay-900{transition-delay: .9s}
.delay-1000{transition-delay: 1.0s}

.dura-100{transition-duration: .1s}
.dura-200{transition-duration: .2s}
.dura-300{transition-duration: .3s}
.dura-400{transition-duration: .4s}
.dura-500{transition-duration: .5s}
.dura-600{transition-duration: .6s}
.dura-700{transition-duration: .7s}
.dura-800{transition-duration: .8s}
.dura-900{transition-duration: .9s}
.dura-1000{transition-duration: 1.0s}

.waypoint.fadeUp,.waypoint .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint.fadeUp.on,.waypoint.on .fadeUp{opacity: 1;  transform: translateY(0);}
.waypoint.fadeLeft,.waypoint .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint.fadeLeft.on,.waypoint.on .fadeLeft{opacity: 1;  transform: translateX(0);}
.waypoint.fadeRight,.waypoint .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint.fadeRight.on,.waypoint.on .fadeRight{opacity: 1;  transform: translateX(0);}
.waypoint2.fadeUp,.waypoint2 .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint2.fadeUp.on,.waypoint2.on .fadeUp{opacity: 1;  transform: translateY(0);}
.waypoint2.fadeLeft,.waypoint2 .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint2.fadeLeft.on,.waypoint2.on .fadeLeft{opacity: 1;  transform: translateX(0);}
.waypoint2.fadeRight,.waypoint2 .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint2.fadeRight.on,.waypoint2.on .fadeRight{opacity: 1;  transform: translateX(0);}
.waypoint .zoomIn,.waypoint2 .zoomIn{transition-property: all; transition-duration: 1.2s; transform: scale(1.2);}
.waypoint.on .zoomIn,.waypoint2.on .zoomIn{transform: scale(1.0);}

.img-ani{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}
.img-ani img{width: 100%; height: 100%;}
.subj-slider .swiper-slide-active .img-ani{animation: scl3 3s forwards ease;}
}