/*******************************************
	폰트 
********************************************/
	@font-face { 
		font-family:Roboto-Italic;
		src: url(../font/Roboto-Italic.eot);
		src: local("Roboto Italic"), url(../font/Roboto-Italic.woff) format("woff");
	}

	@font-face {
		font-family:Roboto-Light;
		src: url(../font/Roboto-Light.eot);
		src: local("Roboto Light"), url(../font/Roboto-Light.woff) format("woff");
	}

	@font-face {
		font-family:Roboto-Medium;
		src: url(../font/Roboto-Medium.eot);
		src: local("Roboto Medium"), url(../font/Roboto-Medium.woff) format("woff");
	}

	@font-face {
		font-family:Roboto-Regular;
		src: url(../font/Roboto-Regular.eot);
		src: local("Roboto Regular"), url(../font/Roboto-Regular.woff) format("woff");
	}


	@font-face {
		font-family:NanumGothic;
		src: url(../font/NanumGothic.eot);
		src: local("Nanum Gothic"), url(../font/NanumGothic.woff) format("woff");
	}

	@font-face {
		font-family:NanumGothicBold;
		src: url(../font/NanumGothicBold.eot);
		src: local("Nanum Gothic Bold"), url(../font/NanumGothicBold.woff) format("woff");
	}
/*******************************************
	YELLOW-FINGER
********************************************/




/*******************************************
	공통요소
********************************************/
	* {	margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; outline: 0 none !important; }

	html, body {
		display: inline; height: 100%;
		margin: 0px; padding: 0px;
		font-size: 14px;
		font-family: 'NanumGothic', 'Nanum Gothic', sans-serif;
	}
	img { border: 0px;  }
	h1,h2,h3,h4,h5 {
		font-family: 'NanumGothic', 'Nanum Gothic', sans-serif;
		font-weight: normal;
	}

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

	/* font-family */
	.font-roboto-italic			{ font-family: "Roboto-Italic",  "NanumGothic",  serif; }
	.font-roboto-light			{ font-family: "Roboto-Light",   "NanumGothic",   serif; }
	.font-roboto-medium			{ font-family: "Roboto-Medium",  "NanumGothic",  serif; }
	.font-roboto-regular		{ font-family: "Roboto-Regular", "NanumGothic", serif; }

	.font-nanumgothic-regular	{ font-family: "NanumGothic", "Roboto Regular", serif; }
	.font-nanumgothic-bold		{ font-family: "NanumGothicBold", "Roboto Regular", serif; }

	/* 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; }

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





/*******************************************
	커스텀
********************************************/
	.color_base  { color: #595a5c; }
	.color_point { color: #2392d1; }
/*******************************************
	YELLOW-FINGER
********************************************/





/*******************************************
	Base Layout
********************************************/
	#wrap {
		position: relative; 
		width: 100%; max-width: 1920px; min-height: 100%; 
		margin: 0 auto;
		text-align: center;
		box-sizing: border-box;
	}
/*******************************************
	YELLOW-FINGER
********************************************/





/*******************************************
	subTitle
********************************************/
	#subTitle {
		transition: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;

		width: 100%; max-width: 1280px;
		font-size: 34px;
		box-sizing: border-box;
	}

	#subTitle div { 
		transition: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
		
		box-sizing: border-box; border-bottom: 1px solid #e5e5e5; 
	} 

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





/*******************************************
	subNav
********************************************/
	#subNav {
		transition: all 300ms ease-in-out;
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;

		width: 100%; max-width: 1280px; height: 48px; line-height: 48px;
		font-size: 14px; color: #979797;
		box-sizing: border-box;
	}

	#subNav a { text-decoration: none; color: #979797; }
	#subNav a:hover, #subNav a.active { color: #545454; }

	#subNav div.left a { margin: 0px 12px; }
	#subNav div.left a:first-child { margin-left: 0px;}


	#subNav div { color: #979797; }


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


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

#loading > div{ 
	display: table-cell;
	vertical-align: middle;
}



@media (max-width: 479px){ 
	#subTitle { padding: 0px 15px; font-size: 24px; }
	#subNav { padding: 0px 15px; font-size: 12px; } 

	#loading > div > img { width: 180px; height: auto; }

}

@media (max-width: 749px) and (min-width: 480px) { 
	#subTitle { padding: 0px 15px; font-size: 28px; }
	#subNav { padding: 0px 15px; font-size: 12px; } 

	#loading > div > img { width: 200px; height: auto; }

}

@media (max-width: 1023px) and (min-width: 750px) { 
	#subTitle { padding: 0px 15px; font-size: 32px; }
	#subNav { padding: 0px 15px; font-size: 12px; } 

}

@media (max-width: 1279px) and (min-width: 1024px) { 
	#subTitle { padding: 0px 15px; }
	#subNav { padding: 0px 15px; } 

}

@media (max-width: 1309px) and (min-width: 1280px) { 
	#subTitle { padding: 0px 15px; }
	#subNav { padding: 0px 15px; } 

}

@media (max-width: 1600px) and (min-width: 1310px) { 
	#subTitle { padding: 0px 15px; }
	#subNav { padding: 0px 15px; } 
}






/*

	@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) { 

	}

	@media (max-width: 1309px) and (min-width: 1280px) { 

	}

	@media (max-width: 1600px) and (min-width: 1310px) { 

	}
*/