@charset "utf-8";
/* *******************************************************
 * filename : animation.css
 * description : 스크롤 애니메이션 CSS
 * date : 2020-08-13
******************************************************** */
.txtline{position: relative;}
.txtline .txt-ani{display: block; transition-duration: .45s; transition-property: transform; transform: translateY(100%)}
.txtline .txtline_inner{overflow: hidden; display: block;}
.txtline.active .txt-ani{transform: translateY(0)}
.txtline > .txtline_inner:nth-child(2) .txt-ani{transition-delay: .05s;}
.txtline > .txtline_inner:nth-child(3) .txt-ani{transition-delay: .1s;}
.txtline > .txtline_inner:nth-child(4) .txt-ani{transition-delay: .15s;}
.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}
.delay-1100{transition-delay: 1.1s}
.delay-1200{transition-delay: 1.2s}
.delay-1300{transition-delay: 1.3s}
.delay-1400{transition-delay: 1.4s}
.delay-1500{transition-delay: 1.5s}
.delay-1600{transition-delay: 1.6s}
.delay-1700{transition-delay: 1.7s}
.delay-1800{transition-delay: 1.8s}
.delay-1900{transition-delay: 1.9s}
.delay-2000{transition-delay: 2.0s}
.delay-2100{transition-delay: 2.1s}
.delay-2200{transition-delay: 2.2s}
.delay-2300{transition-delay: 2.3s}
.delay-2400{transition-delay: 2.4s}
.delay-2500{transition-delay: 2.5s}
.delay-2600{transition-delay: 2.6s}
.delay-2700{transition-delay: 2.7s}
.delay-2800{transition-delay: 2.8s}
.delay-2900{transition-delay: 2.9s}
.delay-3000{transition-delay: 3.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}
.dura-2000{transition-duration: 2.0s}

.waypoint.fadeIn,.waypoint .fadeIn{opacity: 0; transition-property: all; transition-duration: 0.8s; }
.waypoint.fadeIn.active,.waypoint.active .fadeIn{opacity: 1;}
.waypoint.fadeUp,.waypoint .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint.fadeUp.active,.waypoint.active .fadeUp{opacity: 1;  transform: translateY(0)!important;}
.waypoint.fadeLeft,.waypoint .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint.fadeLeft.active,.waypoint.active .fadeLeft{opacity: 1;  transform: translateX(0);}
.waypoint.fadeRight,.waypoint .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint.fadeRight.active,.waypoint.active .fadeRight{opacity: 1;  transform: translateX(0);}
.waypoint2.fadeUp,.waypoint2 .fadeUp{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateY(10%)}
.waypoint2.fadeUp.active,.waypoint2.active .fadeUp{opacity: 1;  transform: translateY(0);}
.waypoint2.fadeLeft,.waypoint2 .fadeLeft{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(20%)}
.waypoint2.fadeLeft.active,.waypoint2.active .fadeLeft{opacity: 1;  transform: translateX(0);}
.waypoint2.fadeRight,.waypoint2 .fadeRight{opacity: 0; transition-property: all; transition-duration: 0.8s; transform: translateX(-20%)}
.waypoint2.fadeRight.active,.waypoint2.active .fadeRight{opacity: 1;  transform: translateX(0);}
.waypoint .zoomIn,.waypoint2 .zoomIn{transition-property: all; transition-duration: 1.2s; transform: scale(1.2);}
.waypoint.active .zoomIn,.waypoint2.active .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;}



/*초기화*/
.page-vertical .aniL, .waypoint .aniL{transform: translateX(20%);transition-property: all; }
.page-vertical .aniR, .waypoint .aniR{transform: translateX(-20%);transition-property: all; }
.page-vertical .aniT, .waypoint .aniT{transform: translateY(10%);transition-property: all; }
.page-vertical .aniB, .waypoint .aniB{transform: translateY(-10%);transition-property: all;}


/*05*/
.page-vertical.active .aniOn05{animation:conOpacity 0.5s 0.5s backwards;}
.page-vertical.active .aniLeft05{animation:conToLeft .7s 0.5s backwards;transform: translateX(0)}
.page-vertical.active .aniRight05{animation:conToRight .7s 0.5s backwards;transform: translateX(0)}
.page-vertical.active .aniTop05{animation:conToTop .7s 0.5s backwards;transform: translateY(0)}
.page-vertical.active .aniBottom05{animation:conToBottom .7s 0.5s backwards;transform: translateY(0%)}

.waypoint.active .aniOn05{animation:conOpacity 0.5s 0.5s backwards;}
.waypoint.active .aniLeft05{animation:conToLeft .7s 0.5s backwards;transform: translateX(0%)}
.waypoint.active .aniRight05{animation:conToRight .7s 0.5s backwards;transform: translateX(0%)}
.waypoint.active .aniTop05{animation:conToTop .7s 0.5s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom05{animation:conToBottom .7s 0.5s backwards;transform: translateY(0%)}

/*08*/
.page-vertical.active .aniOn08{animation:conOpacity 0.5s 0.8s backwards;}
.page-vertical.active .aniLeft08{animation:conToLeft .7s 0.8s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight08{animation:conToRight .7s 0.8s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop08{animation:conToTop .7s 0.8s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom08{animation:conToBottom .7s 0.8s backwards;transform: translateY(0%)}

.waypoint.active .aniOn08{animation:conOpacity 0.5s 0.8s backwards;}
.waypoint.active .aniLeft08{animation:conToLeft .7s 0.8s backwards;transform: translateX(0%)}
.waypoint.active .aniRight08{animation:conToRight .7s 0.8s backwards;transform: translateX(0%)}
.waypoint.active .aniTop08{animation:conToTop .7s 0.8s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom08{animation:conToBottom .7s 0.8s backwards;transform: translateY(0%)}

/*10*/
.page-vertical.active .aniOn10{animation:conOpacity 0.5s 1.0s backwards;}
.page-vertical.active .aniLeft10{animation:conToLeft .7s 1.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight10{animation:conToRight .7s 1.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop10{animation:conToTop .7s 1.0s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom10{animation:conToBottom .7s 1.0s backwards;transform: translateY(0%)}

.waypoint.active .aniOn10{animation:conOpacity 0.5s 1.0s backwards;}
.waypoint.active .aniLeft10{animation:conToLeft .7s 1.0s backwards;transform: translateX(0%)}
.waypoint.active .aniRight10{animation:conToRight .7s 1.0s backwards;transform: translateX(0%)}
.waypoint.active .aniTop10{animation:conToTop .7s 1.0s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom10{animation:conToBottom .7s 1.0s backwards;transform: translateY(0%)}
/*15*/
.page-vertical.active .aniOn15{animation:conOpacity 0.5s 1.5s backwards;}
.page-vertical.active .aniLeft15{animation:conToLeft .7s 1.5s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight15{animation:conToRight .7s 1.5s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop15{animation:conToTop .7s 1.5s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom15{animation:conToBottom .7s 1.5s backwards;transform: translateY(0%)}

.waypoint.active .aniOn15{animation:conOpacity 0.5s 1.5s backwards;}
.waypoint.active .aniLeft15{animation:conToLeft .7s 1.5s backwards;transform: translateX(0%)}
.waypoint.active .aniRight15{animation:conToRight .7s 1.5s backwards;transform: translateX(0%)}
.waypoint.active .aniTop15{animation:conToTop .7s 1.5s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom15{animation:conToBottom .7s 1.5s backwards;transform: translateY(0%)}
/*18*/
.page-vertical.active .aniOn18{animation:conOpacity 0.5s 1.8s backwards;}
.page-vertical.active .aniLeft18{animation:conToLeft .7s 1.8s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight18{animation:conToRight .7s 1.8s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop18{animation:conToTop .7s 1.8s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom18{animation:conToBottom .7s 1.8s backwards;transform: translateY(0%)}

.waypoint.active .aniOn18{animation:conOpacity 0.5s 1.8s backwards;}
.waypoint.active .aniLeft18{animation:conToLeft .7s 1.8s backwards;transform: translateX(0%)}
.waypoint.active .aniRight18{animation:conToRight .7s 1.8s backwards;transform: translateX(0%)}
.waypoint.active .aniTop18{animation:conToTop .7s 1.8s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom18{animation:conToBottom .7s 1.8s backwards;transform: translateY(0%)}
/*20*/
.page-vertical.active .aniOn20{animation:conOpacity 0.5s 2.0s backwards;}
.page-vertical.active .aniLeft20{animation:conToLeft .7s 2.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight20{animation:conToRight .7s 2.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop20{animation:conToTop .7s 2.0s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom20{animation:conToBottom .7s 2.0s backwards;transform: translateY(0%)}

.waypoint.active .aniOn20{animation:conOpacity 0.5s 2.0s backwards;}
.waypoint.active .aniLeft20{animation:conToLeft .7s 2.0s backwards;transform: translateX(0%)}
.waypoint.active .aniRight20{animation:conToRight .7s 2.0s backwards;transform: translateX(0%)}
.waypoint.active .aniTop20{animation:conToTop .7s 2.0s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom20{animation:conToBottom .7s 2.0s backwards;transform: translateY(0%)}
/*25*/
.page-vertical.active .aniOn25{animation:conOpacity 0.5s 2.5s backwards;}
.page-vertical.active .aniLeft25{animation:conToLeft .7s 2.5s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight25{animation:conToRight .7s 2.5s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop25{animation:conToTop .7s 2.5s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom25{animation:conToBottom .7s 2.5s backwards;transform: translateY(0%)}

.waypoint.active .aniOn25{animation:conOpacity 0.5s 2.5s backwards;}
.waypoint.active .aniLeft25{animation:conToLeft .7s 2.5s backwards;transform: translateX(0%)}
.waypoint.active .aniRight25{animation:conToRight .7s 2.5s backwards;transform: translateX(0%)}
.waypoint.active .aniTop25{animation:conToTop .7s 2.5s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom25{animation:conToBottom .7s 2.5s backwards;transform: translateY(0%)}

/*30*/
.page-vertical.active .aniOn30{animation:conOpacity 0.5s 3.0s backwards;}
.page-vertical.active .aniLeft30{animation:conToLeft .7s 3.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniRight30{animation:conToRight .7s 3.0s backwards;transform: translateX(0%)}
.page-vertical.active .aniTop30{animation:conToTop .7s 3.0s backwards;transform: translateY(0%)}
.page-vertical.active .aniBottom30{animation:conToBottom .7s 3.0s backwards;transform: translateY(0%)}

.waypoint.active .aniOn30{animation:conOpacity 0.5s 3.0s backwards;}
.waypoint.active .aniLeft30{animation:conToLeft .7s 3.0s backwards;transform: translateX(0%)}
.waypoint.active .aniRight30{animation:conToRight .7s 3.0s backwards;transform: translateX(0%)}
.waypoint.active .aniTop30{animation:conToTop .7s 3.0s backwards;transform: translateY(0%)}
.waypoint.active .aniBottom30{animation:conToBottom .7s 3.0s backwards;transform: translateY(0%)}