@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); 
	}
}