@charset "euc-kr";

/* ¸ÞÀÎÆäÀÌÁö È¿°ú*/


@keyframes background {
	from {transform:scale(1.0); }
	to {transform:scale(1.1);}
}

@keyframes sub_bg {
	from {opacity: 0; }
	to { opacity: 1;}
}


@keyframes sub_text {
	from {opacity: 0; bottom:-20px; }
	to { opacity: 1; bottom:0px; }
}



.background_b{animation: background_b 0.3s forwards; animation-delay:0;  z-index:0; }

@keyframes background_b {
	from {transform:scale(1.1); }
	to {transform:scale(1.0);}
}




.mymove_opacity{animation: mymove_opacity 1s forwards; animation-delay:0;}

@keyframes mymove_opacity {
	from {opacity:1;}
	to {opacity:0;}
}


/* //¸ÞÀÎ ¹è³Ê È¿°ú */




/* ¸ÞÀÎ */

.sec02 .sec02_move::before{animation: sec02_move1 1s forwards!important; animation-delay:1s!important; }

@keyframes sec02_move1 {
	from {left: -340px; opacity:0;}
	to {left: -260px; opacity:1; }
}


.sec02 .sec02_move::after{animation: sec02_move2 1s forwards!important; animation-delay:2s!important; }

@keyframes sec02_move2 {
	from {right: -460px; opacity:0;}
	to {right: -380px; opacity:1; }
}




.sec03_bg .innner_box:before{animation: sec03_move 1s forwards!important; animation-delay:1s!important; }

@keyframes sec03_move {
	from { left: -30%; opacity:0;}
	to { left:-20%; opacity:1; }
}



.mymove_opa_left{animation: mymove_opa_left 1s forwards; position:relative; }

@keyframes mymove_opa_left {
	from {opacity:0; left:60px;}
	to {opacity:1; left:0px;}
}




/*// ¸ÞÀÎ */








/* °øÅë */


@keyframes menu {
	from {top:-120px; }
	to {top:0;}
}



.heim_area_move::before{animation: heim_area_move 1s forwards!important; animation-delay:1s!important; }

@keyframes heim_area_move {
	from {right: -30%; opacity:0;}
	to {right: -5%; opacity:1; }
}



.heim_area_move1::after{animation: heim_area_move1 1s forwards!important; animation-delay:0.5s!important; }

@keyframes heim_area_move1 {
	from {left: -10%; opacity:0;}
	to {left: 0%; opacity:0.25; }
}



.heim_area_bg .bg{
    animation: heim_area_bg 0.5s forwards!important;  animation-delay:0.5s!important;
}

@keyframes heim_area_bg {
	from { opacity:1;}
	to {  opacity:0; }
}






/* °øÅë */


/*¼­ºêÆäÀÌÁö*/
@keyframes mymove {
	0% {background-position: 0% center;}
	100% {background-position: 100% center;}
}




/** ·Îµù css **/

#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 1;
 background-color: #fff;
 z-index: 1000;
 text-align: center; }

#loading-image {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left:-40px;
 z-index: 1001;}



@keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}
.loading-container,
.loading {
	height: 200px;
	position: relative;
	width: 200px;
	border-radius: 100%;
}


.loading-container {
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;

 }

.loading {
	border: 1px solid transparent;
	border-color: transparent #393939 transparent #393939;
	-moz-animation: rotate-loading 1.5s linear 0s infinite normal;
	-moz-transform-origin: 50% 50%;
	-o-animation: rotate-loading 1.5s linear 0s infinite normal;
	-o-transform-origin: 50% 50%;
	-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
	-webkit-transform-origin: 50% 50%;
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading {
	border-color: transparent #f4763b transparent #f4763b;
}
.loading-container:hover .loading,
.loading-container .loading {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#loading-text {
	-moz-animation: loading-text-opacity 1s linear 0s infinite normal;
	-o-animation: loading-text-opacity 1s linear 0s infinite normal;
	-webkit-animation: loading-text-opacity 1s linear 0s infinite normal;
	animation: loading-text-opacity 1s linear 0s infinite normal;
	color: #000;
	font-size: 18px;
	opacity: 0;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: 205px;
	height:205px;
	line-height:203px;
	font-weight:500;
}