@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body{font-size: 15px; color:#5a5a5a; font-family: 'Noto Sans KR', sans-serif;}
b { font-weight: 700; }
.ns { font-family: 'NanumSquare'; }
.mob_view { display: none; }

#wrap { position:relative; max-width: 2500px; margin:auto; } 
.guide { width: 95%; max-width: 1200px; margin: auto; position:relative; }
.fixed { position:fixed !important; }



#header { position: absolute; width: 100%; top: 0; left: 0; z-index: 10; }
#header .top_nav { background-color: rgba(0, 0, 0, 0.6); padding: 12px 0; box-sizing: border-box; border-bottom: solid 1px rgba(255, 255, 255, 0.1); }
#header .top_nav ul { float: right; }
#header .top_nav ul li { float: left; font-size: 11px; color: #fff; margin-left: 20px; }
#header .top_nav ul li a { color: #fff; }

#nav { background-color: rgba(0, 0, 0, 0.6); position:relative; width: 100%; border-bottom: solid 1px rgba(255, 255, 255, 0.1); }
#nav.fixed { top: 0; }
#nav .logo { position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
#nav #gnb { float:right; }
#nav #gnb  a { color: #fff; }
#nav #gnb > li { float:left; text-align: center; position:relative; line-height: 102px; color: #fff; margin-left: 60px; }
#nav #gnb > li:hover:after { width: 100%; height: 3px; position:absolute; left: 0; bottom: 0; content: ''; display: block; background-color: #6c8cc8; }
#nav #gnb > li > ul { position: absolute; width: 200%; top: 103px; left: 0; margin-left: -50%; padding: 10px 0 20px; display: none; }
#nav #gnb > li > ul > li { font-size: 0.85em; line-height: 35px; text-align: center; }
#nav .gnb_bg { width: 100%; position: absolute; top: 103px; left: 0; background-color: rgba(0, 0, 0, 0.6); height: 322px; z-index: -1; display: none; }

#mob_nav { position: absolute; top: 50%; right: 5%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); }
.mob_gnb_wrap { z-index: 999; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; }
.mob_gnb_wrap .mob_gnb_bg { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.mob_gnb_wrap .mob_menu { width: 300px; height: 100%; background-color: #222; position: fixed; right: -300px; overflow-y: auto; }
.mob_gnb_wrap .mob_menu .mob_menu_top { margin: 25px; position: relative; }
.mob_gnb_wrap .mob_menu .mob_menu_top > img { cursor: pointer; }
.mob_gnb_wrap .mob_menu .mob_menu_top .mob_menu_close { position: absolute; top: 50%; right: 0; margin-top: -12.5px; }
.mob_gnb_wrap .mob_menu #mob_gnb { color: #fff; width: 100%; border-top: solid 1px #676767; z-index: 9999; }
.mob_gnb_wrap .mob_menu #mob_gnb > li { position:relative; border-bottom: solid 1px #676767; line-height: 60px; }
.mob_gnb_wrap .mob_menu #mob_gnb > li .mob_menu_more { position: absolute; width: 19px; height: 19px; top: 21px; right: 30px; }
.mob_gnb_wrap .mob_menu #mob_gnb > li .mob_menu_more span { display: block; width: 100%; height: 1px; background-color: #fff; position: absolute; top: 50%; }
.mob_gnb_wrap .mob_menu #mob_gnb > li .mob_menu_more span:nth-child(2) { opacity: 1; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
.mob_gnb_wrap .mob_menu #mob_gnb > li .mob_menu_more.open span:nth-child(2) { opacity: 0; }
.mob_gnb_wrap .mob_menu #mob_gnb > li > div { margin-left: 30px; }
.mob_gnb_wrap .mob_menu #mob_gnb > li.active { background-color: #6c8cc8; }
.mob_gnb_wrap .mob_menu #mob_gnb > li > ul { background-color: #000; display: none; }
.mob_gnb_wrap .mob_menu #mob_gnb > li > ul > li { font-size: 0.9em; border-top: solid 1px #3c3c3c; padding: 0 40px; line-height: 50px; }
.mob_gnb_wrap .mob_menu #mob_gnb > li > ul > li:first-child { border-top: none; }
.mob_gnb_wrap .mob_menu #mob_gnb > li > ul > li.active { color: #6c8cc8; }
.mob_gnb_wrap .mob_menu #mob_gnb a { display: block; }



#footer { background-color: #f5f5f5; font-size: 0.85em; color: #898989; text-align: center; line-height: 150%; padding: 30px 0; }
#footer .footer_wrap_m {display: none;}




/*quick*/
.quick_bt{position: fixed; right: 5%; bottom: 7%; z-index: 999;  }
/*quick : end*/






@media (max-width:900px){
	#nav .logo { width: 28%; margin-right: 2%; }
	#nav #gnb { width: 70%; }
	#nav #gnb > li { width: 20%; margin-left: 0; }
	
}

/* Mobile ? 768px 이하 */
@media (max-width:768px){
	.mob_view { display: block !important; }
    #header .top_nav{display: none;}

	#nav .logo { width: 45%; position: relative; top: auto; left: auto; padding: 5% 0;
	 transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; }
	#nav #gnb { display: none; }
}

/* Mobile ? 468px 이하 */
@media (max-width:468px){
	#footer {padding: 30px;}	
	#footer .footer_wrap { display: none; }
	#footer .footer_wrap_m { display: block; }
}