@charset "utf-8";
/* *******************************************************
 * filename : animation.css
 * description : 스크롤 애니메이션 CSS
 * date : 2020-11-17
******************************************************** */
@media all and (min-width:1000px){
.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{animation-delay:0.1s!important}
.delay-200{animation-delay:0.2s!important}
.delay-300{animation-delay:0.3s!important}
.delay-400{animation-delay:0.4s!important}
.delay-500{animation-delay:0.5s!important}
.delay-600{animation-delay:0.6s!important}
.delay-700{animation-delay:0.7s!important}
.delay-800{animation-delay:0.8s!important}
.delay-900{animation-delay:0.9s!important}
.delay-1000{animation-delay:1.0s!important}
.delay-1100{animation-delay:1.1s!important}
.delay-1200{animation-delay:1.2s!important}
.delay-1300{animation-delay:1.3s!important}
.delay-1400{animation-delay:1.4s!important}
.delay-1500{animation-delay:1.5s!important}
.delay-1600{animation-delay:1.6s!important}
.delay-1700{animation-delay:1.7s!important}
.delay-1800{animation-delay:1.8s!important}
.delay-1900{animation-delay:1.9s!important}
.delay-2000{animation-delay:2.0s!important}
.delay-2100{animation-delay:2.1s!important}
.delay-2200{animation-delay:2.2s!important}
.delay-2300{animation-delay:2.3s!important}
.delay-2400{animation-delay:2.4s!important}
.delay-2500{animation-delay:2.5s!important}
.delay-2600{animation-delay:2.6s!important}
.delay-2700{animation-delay:2.7s!important}
.delay-2800{animation-delay:2.8s!important}
.delay-2900{animation-delay:2.9s!important}
.delay-3000{animation-delay:3.0s!important}





.section .fadeIn{opacity: 0; transition-property: all; }
.section.active .fadeIn{animation: fade-in 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s; }
.section .fadeUp, .Obj .fadeUp{opacity: 0;}
.section.active .fadeUp, .Obj.active .fadeUp{animation: fade-up 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s; }
.section .fadeDown, .Obj .fadeDown{opacity: 0;}
.section.active .fadeDown, .Obj.active .fadeDown {animation: fade-Down 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s;}
.section .fadeLeft, .Obj .fadeLeft{opacity: 0;}
.section.active .fadeLeft, .Obj.active .fadeLeft{animation: fade-left 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s;}
.section .fadeRight, .Obj .fadeRight{opacity: 0;}
.section.active .fadeRight, .Obj.active .fadeRight{animation: fade-right 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s;}
.section .zoomIn{transform: scale(1.2);}
.section.active .zoomIn{transform: scale(1.0); animation: fade-zoomIn 1s cubic-bezier(0.4, 0, 0.2, 1) both 0.2s;}

.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, .section .aniL{transform: translateX(20%);transition-property: all; }
.page-vertical .aniR, .section .aniR{transform: translateX(-20%);transition-property: all; }
.page-vertical .aniT, .section .aniT{transform: translateY(10%);transition-property: all; }
.page-vertical .aniB, .section .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 cubic-bezier(0.4, 0, 0.2, 1) backwards;transform: translateY(0)}
.page-vertical.active .aniBottom05{animation:conToBottom .7s 0.5s backwards;transform: translateY(0%)}

.section.active .aniOn05{animation:conOpacity 0.5s 0.5s backwards;}
.section.active .aniLeft05{animation:conToLeft .7s 0.5s backwards;transform: translateX(0%)}
.section.active .aniRight05{animation:conToRight .7s 0.5s backwards;transform: translateX(0%)}
.section.active .aniTop05{animation:conToTop .7s 0.5s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn08{animation:conOpacity 0.5s 0.8s backwards;}
.section.active .aniLeft08{animation:conToLeft .7s 0.8s backwards;transform: translateX(0%)}
.section.active .aniRight08{animation:conToRight .7s 0.8s backwards;transform: translateX(0%)}
.section.active .aniTop08{animation:conToTop .7s 0.8s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn10{animation:conOpacity 0.5s 1.0s backwards;}
.section.active .aniLeft10{animation:conToLeft .7s 1.0s backwards;transform: translateX(0%)}
.section.active .aniRight10{animation:conToRight .7s 1.0s backwards;transform: translateX(0%)}
.section.active .aniTop10{animation:conToTop .7s 1.0s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn15{animation:conOpacity 0.5s 1.5s backwards;}
.section.active .aniLeft15{animation:conToLeft .7s 1.5s backwards;transform: translateX(0%)}
.section.active .aniRight15{animation:conToRight .7s 1.5s backwards;transform: translateX(0%)}
.section.active .aniTop15{animation:conToTop .7s 1.5s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn18{animation:conOpacity 0.5s 1.8s backwards;}
.section.active .aniLeft18{animation:conToLeft .7s 1.8s backwards;transform: translateX(0%)}
.section.active .aniRight18{animation:conToRight .7s 1.8s backwards;transform: translateX(0%)}
.section.active .aniTop18{animation:conToTop .7s 1.8s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn20{animation:conOpacity 0.5s 2.0s backwards;}
.section.active .aniLeft20{animation:conToLeft .7s 2.0s backwards;transform: translateX(0%)}
.section.active .aniRight20{animation:conToRight .7s 2.0s backwards;transform: translateX(0%)}
.section.active .aniTop20{animation:conToTop .7s 2.0s backwards;transform: translateY(0%)}
.section.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%)}

.section.active .aniOn25{animation:conOpacity 0.5s 2.5s backwards;}
.section.active .aniLeft25{animation:conToLeft .7s 2.5s backwards;transform: translateX(0%)}
.section.active .aniRight25{animation:conToRight .7s 2.5s backwards;transform: translateX(0%)}
.section.active .aniTop25{animation:conToTop .7s 2.5s backwards;transform: translateY(0%)}
.section.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%)}

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

@keyframes fade-up {
  from {
	transform: translate3d(0, 50%, 0);
	-webkit-transform: translate3d(0, 50%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	opacity:1;
  }
}
@keyframes fade-Down {
  from {
	-webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
	opacity:0;
  }
  to {
	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	opacity:1;
  }
}
@keyframes fade-left {
  from {
    transform: translate3d(20%, 0, 0);
	-webkit-transform: translate3d(20%, 0, 0);
	opacity:0;
  }
  to {
    transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	opacity:1;
  }
}
@keyframes fade-right {
  from {
    transform: translate3d(-20%, 0, 0);
	-webkit-transform: translate3d(-20%, 0, 0);
	opacity:0;
  }
  to {
    transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	opacity:1;
  }
}
@keyframes Zoom-in {
  from {
    transform: scale(1.2) translate3d(0, 0, 0);
	-webkit-transform: scale(1.2) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1) translate3d(0, 0, 0);
	-webkit-transform: scale(1) translate3d(0, 0, 0);
  }
}
@keyframes Zoom-out {
  from {
    transform: scale(1) translate3d(0, 0, 0);
	-webkit-transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.2) translate3d(0, 0, 0);
	-webkit-transform: scale(1.2) translate3d(0, 0, 0);
  }
}