@charset "utf-8";
/* *******************************************************
 * filename : animation.css
 * description : 애니메이션 CSS
 * date : 2022-12-09
******************************************************** */

/* ****************** 메인 로딩 시 ********************** */
@keyframes load-down {
	from {
		transform:translate(0 ,-50%); opacity:0;filter:Alpha(opacity=0); 
	}
	to {
		transform:translate(0 ,0); opacity:1;filter:Alpha(opacity=100); 
	}
}
@keyframes load-up {
	from {
		transform:translate(0 ,50%); opacity:0;filter:Alpha(opacity=0); 
	}
	to {
		transform:translate(0 ,0); opacity:1;filter:Alpha(opacity=100); 
	}
}
@keyframes load-left {
	from {
		transform:translate(50% ,0); opacity:0;filter:Alpha(opacity=0); 
	}
	to {
		transform:translate(0 ,0); opacity:1;filter:Alpha(opacity=100); 
	}
}
@keyframes load-right {
	from {
		transform:translate(-5% ,0); opacity:0;filter:Alpha(opacity=0); 
	}
	to {
		transform:translate(0 ,0); opacity:1;filter:Alpha(opacity=100); 
	}
}

/* ******************  메인 비주얼 ********************** */
@keyframes svg-effect {
  0% {transform: scale(0.85); opacity: 0;}
  50% {opacity: 0.1;}
  100% {transform: scale(1.8); opacity: 0;} 
}
@keyframes svg-effect1 {
  0% {opacity: 0; transform: rotate(15deg) translate(0,0) scale(0);}
  100% {opacity: 1; transform: rotate(10deg) translate(-25px,-0.4rem) scale(0.55,0.6);} 
}
@keyframes svg-effect2 {
  0% {opacity: 0; transform: rotate(15deg) translate(0,0) scale(0);}
  100% {opacity: 1; transform: rotate(9deg) translate(-15px,0.1rem) scale(0.7,0.85);} 
}
@keyframes svg-effect3 {
  0% {opacity: 0; transform: rotate(15deg) translate(0,0) scale(0);}
  100% {opacity: 1; transform: rotate(0deg) translate(0,0) scale(1);} 
}
@keyframes upDown {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	} 
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(WHO WE ARE) -------- */
@keyframes bounce {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 10rem, 0);
  }
}
@keyframes tilt {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(4deg);
  }
}
@keyframes stretch {
  0% {
    transform: scaleX(1.15);
  }
  100% {
    transform: scaleX(1.0);
  }
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(TECHNOLOGY) -------- */
@keyframes spin {
    0%  {transform: rotate(0deg) scale(0.9);}
	50% {transform: rotate(-180deg) scale(1.0);}
    100% {transform: rotate(-360deg) scale(0.9);}
}
@keyframes circle-ani {
 0% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 0; 
	}
	50% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		opacity: 0.1; 
	}
	100% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 0; 
	}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(PRODUCT) -------- */
@keyframes light-spinning {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(2); 
	}
	100% {
		transform:scale(1); 
	}
}
@keyframes iconHover {
	0% {
		transform:rotate(0); 
	}
	100% {
		transform:rotate(180deg); 
	}
}

@charset "utf-8";
/* *******************************************************
 * filename : animate.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-07-26
******************************************************** */

/* Basic */
@media screen {
    html:not(.no-js) [data-scroll] {
		transition:var(--transition-custom2);
		pointer-events: none;
		will-change: transform;
		will-change: opacity;
    }
	html:not(.no-js) [data-scroll].animated {
		pointer-events: auto;
    }
	html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }
    html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"].animated {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    html:not(.no-js) [data-scroll="fade-up"] {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-down"] {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-right"] {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0);
    }
    html:not(.no-js) [data-scroll="fade-left"] {
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
    }
}

/* Custom */
[data-scroll][data-scroll][data-scroll-duration="100"],
body[data-scroll-duration="100"] [data-scroll] {
    transition-duration: 0.1s;
}
[data-scroll][data-scroll][data-scroll-delay="100"],
body[data-scroll-delay="100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="100"].animated,
body[data-scroll-delay="100"] [data-scroll].animated {
    transition-delay: 0.1s;
}
[data-scroll][data-scroll][data-scroll-duration="150"],
body[data-scroll-duration="150"] [data-scroll] {
    transition-duration: 0.15s;
}
[data-scroll][data-scroll][data-scroll-delay="150"],
body[data-scroll-delay="150"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="150"].animated,
body[data-scroll-delay="150"] [data-scroll].animated {
    transition-delay: 0.15s;
}
[data-scroll][data-scroll][data-scroll-duration="200"],
body[data-scroll-duration="200"] [data-scroll] {
    transition-duration: 0.2s;
}
[data-scroll][data-scroll][data-scroll-delay="200"],
body[data-scroll-delay="200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="200"].animated,
body[data-scroll-delay="200"] [data-scroll].animated {
    transition-delay: 0.2s;
}
[data-scroll][data-scroll][data-scroll-duration="250"],
body[data-scroll-duration="250"] [data-scroll] {
    transition-duration: 0.25s;
}
[data-scroll][data-scroll][data-scroll-delay="250"],
body[data-scroll-delay="250"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="250"].animated,
body[data-scroll-delay="250"] [data-scroll].animated {
    transition-delay: 0.25s;
}
[data-scroll][data-scroll][data-scroll-duration="300"],
body[data-scroll-duration="300"] [data-scroll] {
    transition-duration: 0.3s;
}
[data-scroll][data-scroll][data-scroll-delay="300"],
body[data-scroll-delay="300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="300"].animated,
body[data-scroll-delay="300"] [data-scroll].animated {
    transition-delay: 0.3s;
}
[data-scroll][data-scroll][data-scroll-duration="350"],
body[data-scroll-duration="350"] [data-scroll] {
    transition-duration: 0.35s;
}
[data-scroll][data-scroll][data-scroll-delay="350"],
body[data-scroll-delay="350"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="350"].animated,
body[data-scroll-delay="350"] [data-scroll].animated {
    transition-delay: 0.35s;
}
[data-scroll][data-scroll][data-scroll-duration="400"],
body[data-scroll-duration="400"] [data-scroll] {
    transition-duration: 0.4s;
}
[data-scroll][data-scroll][data-scroll-delay="400"],
body[data-scroll-delay="400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="400"].animated,
body[data-scroll-delay="400"] [data-scroll].animated {
    transition-delay: 0.4s;
}
[data-scroll][data-scroll][data-scroll-duration="450"],
body[data-scroll-duration="450"] [data-scroll] {
    transition-duration: 0.45s;
}
[data-scroll][data-scroll][data-scroll-delay="450"],
body[data-scroll-delay="450"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="450"].animated,
body[data-scroll-delay="450"] [data-scroll].animated {
    transition-delay: 0.45s;
}
[data-scroll][data-scroll][data-scroll-duration="500"],
body[data-scroll-duration="500"] [data-scroll] {
    transition-duration: 0.5s;
}
[data-scroll][data-scroll][data-scroll-delay="500"],
body[data-scroll-delay="500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="500"].animated,
body[data-scroll-delay="500"] [data-scroll].animated {
    transition-delay: 0.5s;
}
[data-scroll][data-scroll][data-scroll-duration="550"],
body[data-scroll-duration="550"] [data-scroll] {
    transition-duration: 0.55s;
}
[data-scroll][data-scroll][data-scroll-delay="550"],
body[data-scroll-delay="550"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="550"].animated,
body[data-scroll-delay="550"] [data-scroll].animated {
    transition-delay: 0.55s;
}
[data-scroll][data-scroll][data-scroll-duration="600"],
body[data-scroll-duration="600"] [data-scroll] {
    transition-duration: 0.6s;
}
[data-scroll][data-scroll][data-scroll-delay="600"],
body[data-scroll-delay="600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="600"].animated,
body[data-scroll-delay="600"] [data-scroll].animated {
    transition-delay: 0.6s;
}
[data-scroll][data-scroll][data-scroll-duration="650"],
body[data-scroll-duration="650"] [data-scroll] {
    transition-duration: 0.65s;
}
[data-scroll][data-scroll][data-scroll-delay="650"],
body[data-scroll-delay="650"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="650"].animated,
body[data-scroll-delay="650"] [data-scroll].animated {
    transition-delay: 0.65s;
}
[data-scroll][data-scroll][data-scroll-duration="700"],
body[data-scroll-duration="700"] [data-scroll] {
    transition-duration: 0.7s;
}
[data-scroll][data-scroll][data-scroll-delay="700"],
body[data-scroll-delay="700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="700"].animated,
body[data-scroll-delay="700"] [data-scroll].animated {
    transition-delay: 0.7s;
}
[data-scroll][data-scroll][data-scroll-duration="750"],
body[data-scroll-duration="750"] [data-scroll] {
    transition-duration: 0.75s;
}
[data-scroll][data-scroll][data-scroll-delay="750"],
body[data-scroll-delay="750"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="750"].animated,
body[data-scroll-delay="750"] [data-scroll].animated {
    transition-delay: 0.75s;
}
[data-scroll][data-scroll][data-scroll-duration="800"],
body[data-scroll-duration="800"] [data-scroll] {
    transition-duration: 0.8s;
}
[data-scroll][data-scroll][data-scroll-delay="800"],
body[data-scroll-delay="800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="800"].animated,
body[data-scroll-delay="800"] [data-scroll].animated {
    transition-delay: 0.8s;
}
[data-scroll][data-scroll][data-scroll-duration="850"],
body[data-scroll-duration="850"] [data-scroll] {
    transition-duration: 0.85s;
}
[data-scroll][data-scroll][data-scroll-delay="850"],
body[data-scroll-delay="850"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="850"].animated,
body[data-scroll-delay="850"] [data-scroll].animated {
    transition-delay: 0.85s;
}
[data-scroll][data-scroll][data-scroll-duration="900"],
body[data-scroll-duration="900"] [data-scroll] {
    transition-duration: 0.9s;
}
[data-scroll][data-scroll][data-scroll-delay="900"],
body[data-scroll-delay="900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="900"].animated,
body[data-scroll-delay="900"] [data-scroll].animated {
    transition-delay: 0.9s;
}
[data-scroll][data-scroll][data-scroll-duration="950"],
body[data-scroll-duration="950"] [data-scroll] {
    transition-duration: 0.95s;
}
[data-scroll][data-scroll][data-scroll-delay="950"],
body[data-scroll-delay="950"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="950"].animated,
body[data-scroll-delay="950"] [data-scroll].animated {
    transition-delay: 0.95s;
}
[data-scroll][data-scroll][data-scroll-duration="1000"],
body[data-scroll-duration="1000"] [data-scroll] {
    transition-duration: 1s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"],
body[data-scroll-delay="1000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"].animated,
body[data-scroll-delay="1000"] [data-scroll].animated {
    transition-delay: 1s;
}
[data-scroll][data-scroll][data-scroll-duration="1100"],
body[data-scroll-duration="1100"] [data-scroll] {
    transition-duration: 1.1s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"],
body[data-scroll-delay="1100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"].animated,
body[data-scroll-delay="1100"] [data-scroll].animated {
    transition-delay: 1.1s;
}
[data-scroll][data-scroll][data-scroll-duration="1200"],
body[data-scroll-duration="1200"] [data-scroll] {
    transition-duration: 1.2s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"],
body[data-scroll-delay="1200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"].animated,
body[data-scroll-delay="1200"] [data-scroll].animated {
    transition-delay: 1.2s;
}
[data-scroll][data-scroll][data-scroll-duration="1300"],
body[data-scroll-duration="1300"] [data-scroll] {
    transition-duration: 1.3s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"],
body[data-scroll-delay="1300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"].animated,
body[data-scroll-delay="1300"] [data-scroll].animated {
    transition-delay: 1.3s;
}
[data-scroll][data-scroll][data-scroll-duration="1400"],
body[data-scroll-duration="1400"] [data-scroll] {
    transition-duration: 1.4s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"],
body[data-scroll-delay="1400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"].animated,
body[data-scroll-delay="1400"] [data-scroll].animated {
    transition-delay: 1.4s;
}
[data-scroll][data-scroll][data-scroll-duration="1500"],
body[data-scroll-duration="1500"] [data-scroll] {
    transition-duration: 1.5s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"],
body[data-scroll-delay="1500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"].animated,
body[data-scroll-delay="1500"] [data-scroll].animated {
    transition-delay: 1.5s;
}
[data-scroll][data-scroll][data-scroll-duration="1600"],
body[data-scroll-duration="1600"] [data-scroll] {
    transition-duration: 1.6s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"],
body[data-scroll-delay="1600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"].animated,
body[data-scroll-delay="1600"] [data-scroll].animated {
    transition-delay: 1.6s;
}
[data-scroll][data-scroll][data-scroll-duration="1700"],
body[data-scroll-duration="1700"] [data-scroll] {
    transition-duration: 1.7s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"],
body[data-scroll-delay="1700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"].animated,
body[data-scroll-delay="1700"] [data-scroll].animated {
    transition-delay: 1.7s;
}
[data-scroll][data-scroll][data-scroll-duration="1800"],
body[data-scroll-duration="1800"] [data-scroll] {
    transition-duration: 1.8s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"],
body[data-scroll-delay="1800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"].animated,
body[data-scroll-delay="1800"] [data-scroll].animated {
    transition-delay: 1.8s;
}
[data-scroll][data-scroll][data-scroll-duration="1900"],
body[data-scroll-duration="1900"] [data-scroll] {
    transition-duration: 1.9s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"],
body[data-scroll-delay="1900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"].animated,
body[data-scroll-delay="1900"] [data-scroll].animated {
    transition-delay: 1.9s;
}
[data-scroll][data-scroll][data-scroll-duration="2000"],
body[data-scroll-duration="2000"] [data-scroll] {
    transition-duration: 2s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"],
body[data-scroll-delay="2000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"].animated,
body[data-scroll-delay="2000"] [data-scroll].animated {
    transition-delay: 2s;
}
[data-scroll][data-scroll][data-scroll-duration="3000"],
body[data-scroll-duration="3000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"],
body[data-scroll-delay="3000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"].animated,
body[data-scroll-delay="3000"] [data-scroll].animated {
    transition-delay: 3s;
}

[data-scroll][data-scroll][data-scroll-duration="4000"],
body[data-scroll-duration="4000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"],
body[data-scroll-delay="4000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"].animated,
body[data-scroll-delay="4000"] [data-scroll].animated {
    transition-delay: 3s;
}
[data-scroll][data-scroll][data-scroll-easing="linear"],
body[data-scroll-easing="linear"] [data-scroll] {
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
[data-scroll][data-scroll][data-scroll-easing="ease"],
body[data-scroll-easing="ease"] [data-scroll] {
    transition-timing-function: ease;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in"],
body[data-scroll-easing="ease-in"] [data-scroll] {
    transition-timing-function: ease-in;
}
[data-scroll][data-scroll][data-scroll-easing="ease-out"],
body[data-scroll-easing="ease-out"] [data-scroll] {
    transition-timing-function: ease-out;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in-out"],
body[data-scroll-easing="ease-in-out"] [data-scroll] {
    transition-timing-function: ease-in-out;
}