/*******************************************
	폰트 
********************************************/
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/*******************************************
	YELLOW-FINGER
********************************************/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');





/*******************************************
	공통요소
********************************************/
	* {	margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; outline: 0 none !important; font-family: 'Frank Ruhl Libre', sans-serif; }
	html, body {
		display: inline-block; width: 100%; height: auto;
		margin: 0px; padding: 0px;
		font-size: 14px;
		font-family: 'Frank Ruhl Libre', sans-serif;
	}
	body { -webkit-overflow-scrolling: touch; float: left; }

	html, body {
		overflow-x: hidden;
	}

	.Source { font-family: 'Source Sans Pro', 'Frank Ruhl Libre', sans-serif; }

	::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
	::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
	::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef; }
	::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2); }
	::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); }



	h1,h2,h3,h4,h5 {
		font-weight: normal;
	}

	a							{ text-decoration: none; }
	li, ul, ol					{ list-style: none; }


	/* float */
	.left						{ float: left;  }
	.right						{ float: right; } 
	.clear						{ clear: both;  }

	/* text-align */
	.text_left					{ text-align: left; }
	.text_right					{ text-align: right; }
	.text_center				{ text-align: center; }

	/* display */
	.display_inline_block		{ display: inline-block; }
	.display_none				{ display: none; }
	.display_block				{ display: block; }
	.display_table				{ display: table; }
	.display_table_cell			{ display: table-cell; }

	/* position */
	.position_relative			{ position: relative; }
	.position_absolute			{ position: absolute; }
	.position_fixed				{ position: fixed; }

	.slow {
		transition: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
	}


	.bold		{ font-weight: bold; }
	.bolder		{ font-weight: bold; }


	.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }
	.ft_w200 { font-weight: 200; }
	.ft_w300 { font-weight: 300; }
	.ft_w400 { font-weight: 400; }
	.ft_w500 { font-weight: 500; }
	.ft_w600 { font-weight: 600; }
	.ft_w700 { font-weight: 700; }
	.ft_w800 { font-weight: 800; }



	.fly {
		opacity: 0;

		transition: all 250ms ease-in-out;
		-webkit-transition: all 250ms ease-in-out;
		-moz-transition: all 250ms ease-in-out;

		transform: translateY(50px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(50px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(50px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(50px) -o-translateX(0px) -o-scale(1) -o-translate3d(0, 0, 0);
	}

	.show-block {
		opacity: 1;

		transform: translateY(0px) translateX(0px) scale(1) translate3d(0, 0, 0);
		-webkit-transform: -webkit-translateY(0px) -webkit-translateX(0px) -webkit-scale(1) -webkit-translate3d(0, 0, 0);
		-moz-transform: -moz-translateY(0px) -moz-translateX(0px) -moz-scale(1) -moz-translate3d(0, 0, 0);
		-o-transform: -o-translateY(0px) -o-translateX(0px) -o-scale(1) -o-translate3d(0, 0, 0);
	}

	input, select, textarea {
		-webkit-appearance: none;
		   -moz-appearance: none;
				appearance: none;
				border-radius: 0px;
	}

	.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }
	
	.it {
		  font-family: "Lato", sans-serif !important;
		  font-weight: 400;
		  font-style: italic;
	} 

	/* 터치 하이라이트 제거 (iOS & Android) */
	div {
	  -webkit-tap-highlight-color: transparent;
	  -webkit-tap-highlight-color: rgba(0,0,0,0); /* 보완용 */
	}

	/* 선택 영역 제거 (텍스트 드래그 시 생기는 반응 제거용) */
	div {
	  user-select: none;
	  -webkit-user-select: none;
	  -ms-user-select: none;
	}


/*******************************************
	YELLOW-FINGER
********************************************/



body {
	position: relative;
	min-width: 100vw; min-height: 100vh;
	background-image: url(../images/bg.png);
	background-size: auto auto;
	background-position: auto auto;
	background-repeat: repeat;
}


#header.on { opacity: 0; }
#header {
	position: absolute; top: 0%; left: 50%;
	max-width: 1920px;
	width: 100%; height: auto;
	padding: 30px 40px 0px;
	z-index: 10;


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

	transition: all 250ms ease-in-out;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;

}

#header > div.header_box { 
	width: 100%; height: auto; 
    display: flex;
    align-items: start;
    justify-content: space-between;
}
#header .logo {
	width: 252px; height: auto;


	transition: all 250ms ease-in-out;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;

}

#header.hover .logo { width: 125px; }
#header .logo img {
	width: 100%; height: auto;
	/* filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.25)); */
}


#header .func_box {
	width: auto; height: auto;

    display: flex;
    align-items: start;
    justify-content: space-between;
	gap: 12px;

}


#header .func_box .contact_btn:hover { opacity: 0.9; }

#header .func_box .contact_btn {
	width: 168px; height: 50px; line-height: 50px;
	color: #FAF8F5; text-align: center;
	font-size: 20px;

	border-radius: 5px;
	background: #6E54A3;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

#header .func_box .lang {
	width: 137px; height: auto;


	border-radius: 5px;
	background: #FAF8F5;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

#header .func_box .lang .lang_txt {
	cursor: pointer;

	width: 100%; height: 50px; line-height: 50px;
	padding: 0px 20px;

	border-radius: 5px;
	background: #FAF8F5;

	text-align: left; color: #222; 
	font-size: 20px; 



	background-image: url(../images/lang_arrow.svg);
	background-size: 14px auto;
	background-position: calc(100% - 20px) center;
	background-repeat: no-repeat;

}

#header .func_box .lang_list {
	display: none;
	width: 100%; height: auto;
	padding: 5px 0px;

	border-radius: 0px 0px 5px 5px;
	overflow: hidden;
}

#header .func_box .lang_list .lang_item  {
	width: 100%; height: auto; line-height: 2;
	padding: 0px 20px;

	background: #FAF8F5;
	text-align: left; color: #222; 
	font-size: 18px; 

	cursor: pointer;

}

#header .func_box .lang_list .lang_item.on  { color: #6E54A3; }
#header .func_box .lang_list .lang_item:hover:not(.on) {
	opacity: 0.5;
}


#wrap{ 
	min-height: 100vh;
	width: 100%; height: auto;
	overflow: hidden;
}

#footer.on { opacity: 0; }
#footer { 
	width: 100%; height: auto; line-height: 1.8;
	color: #666; text-align: center;
	font-size: 14px;
	font-weight: 500;
	padding-bottom: 20px;

	transition: all 250ms ease-in-out;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
}





@media (max-width: 1023px){ 
	body{ background-size: 1024px; }
}



@media (max-width: 479px){ 
	#header { padding: 30px 20px 0px; }
	#header .logo { width: 100px; }
	#header.hover .logo { width: 100px; }
	
	#header .func_box { gap: 5px; }

	#header .func_box .lang { width: 80px; }
	#header .func_box .lang .lang_txt {
		height: 40px; line-height: 40px;
		font-size: 14px; 
	    padding: 0px 10px;
		background-size: 10px auto;
		background-position: calc(100% - 10px) 12px;
	}

	#header .func_box .lang_list .lang_item { 
		font-size: 13px;  
		padding: 0px 15px;
	}

	#header .func_box .contact_btn {
		width: 80px; height: 40px; line-height: 40px;
		font-size: 13px;
	    padding: 0px 0px;
	}

	#footer { font-size: 12px;  }
}

@media (max-width: 749px) and (min-width: 480px) { 
	#header { padding: 30px 20px 0px; }
	#header .logo { width: 100px; }
	#header.hover .logo { width: 100px; }


	#header .func_box .lang { width: 100px; }
	#header .func_box .lang .lang_txt {
		height: 40px; line-height: 40px;
		font-size: 14px; 
	    padding: 0px 10px;
		background-size: 10px auto;
		background-position: calc(100% - 10px) 14px;
	}

	#header .func_box .lang_list .lang_item { 
		font-size: 14px;  
		padding: 0px 15px;
	}

	#header .func_box .contact_btn {
		width: 100px; height: 40px; line-height: 40px;
		font-size: 14px;
	    padding: 0px 10px;
	}

}

@media (max-width: 1023px) and (min-width: 750px) { 
	#header { padding: 30px 20px 0px; }
	#header .logo { width: 120px; }
	#header.hover .logo { width: 120px; }


	#header .func_box .lang { width: 120px; }
	#header .func_box .lang .lang_txt {
		height: 45px; line-height: 45px;
		font-size: 16px; 
	    padding: 0px 15px;
		background-size: 12px auto;
		background-position: calc(100% - 15px) 14px;
	}

	#header .func_box .lang_list .lang_item { 
		font-size: 16px;  
		padding: 0px 15px;
	}

	#header .func_box .contact_btn {
		width: 120px; height: 45px; line-height: 45px;
		font-size: 16px;
	}

}


@media (max-width: 1279px) and (min-width: 1024px) { 
	#header .logo { width: 180px; }
	#header.hover .logo { width: 120px; }


	#header .func_box .lang { width: 120px; }
	#header .func_box .lang .lang_txt {
		font-size: 18px; 
	    padding: 0px 15px;
		background-size: 12px auto;
		background-position: calc(100% - 15px) 14px;
	}

	#header .func_box .lang_list .lang_item { 
		font-size: 16px;  
		padding: 0px 15px;
	}

	#header .func_box .contact_btn {
		width: 150px;
		font-size: 18px;
	}

}

@media (max-width: 1680px) and (min-width: 1280px) { 
	#header .logo { width: 190px; }
	#header.hover .logo { width: 120px; }


	#header .func_box .lang { width: 120px; }
	#header .func_box .lang .lang_txt {
		font-size: 18px; 
	    padding: 0px 15px;
		background-size: 12px auto;
		background-position: calc(100% - 15px) 14px;
	}

	#header .func_box .lang_list .lang_item { 
		font-size: 16px;  
		padding: 0px 15px;
	}

	#header .func_box .contact_btn {
		width: 150px;
		font-size: 18px;
	}

	
}





/*
	@media (max-width: 479px){ 

	}

	@media (max-width: 749px) and (min-width: 480px) { 

	}

	@media (max-width: 1023px) and (min-width: 750px) { 

	}


	@media (max-width: 1279px) and (min-width: 1024px) { 

	}
*/