@charset "utf-8";

@import "/css/reset.css";
@import "/css/fonts.css";

.cfixed:after{display:block; content:""; clear:both;}
#wrap{overflow:hidden;}
*{box-sizing:inherit;}
#ctt{padding:0; margin:0;}
#ctt_con{line-height:auto;}

/*common-공통*/
.NanumSquare{font-family: 'NanumSquare', sans-serif; font-weight:100;}
.NanumMyeongjo{font-family: 'Nanum Myeongjo', sans-serif; font-weight:400;}
.c_skyblue{color:#0082ae;}
.c_blue{color:#0054a5;}
.t_bold{font-weight:700;}

/*topmenu*/
#headerWrap{position:relative; top:0; left:0; width:100%; z-index:9999; height:130px;}

#tnb ul{float:right; padding-top:80px; width:15%; text-align:right;}
#tnb ul li{display:inline-block;}
#tnb ul li:first-child{position:relative; padding-right:18px; margin-right:17px;}
#tnb ul li:first-child::before{position:absolute; content:""; display:block; width:1px; height:9px; right:0; top:50%; margin-top:-5px; background:#cccccc;}
#tnb ul li:last-child{padding-right:0;}
#tnb ul li a{text-transform:uppercase; font-size:1.4rem; color:#626262;}
#tnb ul li.tnb_admin{padding-left:18px; margin-left:17px; position:relative;}
#tnb ul li.tnb_admin::before{position:absolute; content:""; display:block; width:1px; height:9px; left:0; top:50%; margin-top:-5px; background:#cccccc;}


#header{margin:0 2%;}
#header h1{width:20%; float:left; margin-top:25px;}

#nav{float:left; width:65%; text-align:center; box-sizing:border-box;}
#nav .menu{display:inline-block; padding:0 3%;}
#nav .menu.last{padding-right:0; background:none;}
#nav .menu > a{display:block; font-size:1.8rem; text-align:right; text-transform:uppercase; line-height:80px; padding-top:50px;}
#nav .menu > a:hover{color:#0082ae;}
#nav .submenu{position:absolute; width:100%; left:0; top:130px; z-index:9999; padding:15px 0; display:none; text-align:center;}
#nav .submenu ul{margin-left:50%; min-width:1600px;}

#nav .submenu ul li{float:left;}
#nav .submenu li a{line-height:22px; font-size:1.4rem; font-weight:300; width:auto; padding:0 15px; color:#222; text-transform:uppercase;}
#nav .submenu li a:hover{font-weight:500; color:#0082ae;}

#nav li:first-child .submenu ul{margin-left:22%;}

/*모바일 topmenu*/
#mobileMenu {position: fixed; top: 0; right: -400px; width: 310px; height: 100%; background: #fff; z-index: 900; background: #f5f5f5;}
.mobi_logo {position: absolute; top: 0; left: 0; width: 100%; height:73px; line-height:73px; background:#fff; border-bottom:1px solid #d4d4d4; font-size: 1.3em; font-weight: 700; z-index:15;}
.mobi_logo .mobi_txt {position: relative; display: inline-block; margin-left: 10px;}
.mobi_logo .mobi_txt img{width:80%; vertical-align:middle; margin-bottom:5px;}
.mobi_menu_close {position: absolute; top: 0; right: 0; display: block; width: 63px; height: 73px;}
.mobi_bar {position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -12.5px; display: block; width: 25px; height: 2px; background: #4c4c4c;}
.mobi_menu_close .mobi_bar.one {transform:rotate(45deg);}
.mobi_menu_close .mobi_bar.two {transform:rotate(315deg);}
.mobi_menu_open {position: absolute; top: 0; right: 0; display: block; width: 73px; height: 90px;}
.mobi_menu_open .mobi_bar {background: #333;}
.mobi_menu_open .mobi_bar.one {margin-top: -7px;}
.mobi_menu_open .mobi_bar.two {margin-top: 0;}
.mobi_menu_open .mobi_bar.three {margin-top: 7px;}

.menu_wrap {padding-top: 73px; height: 100%;box-sizing:border-box;}
.menu_list {width: 100%; height: 100%; overflow-y:auto;}
.menu_list .dep1 .dep1_tit {display: block; width: 100%; padding:15px 10px; text-align: left; font-size: 1.5rem; font-weight: 700; background: #fff; border-bottom:1px solid #d4d4d4;}
.menu_list .dep1 .dep1_tit.on {background: #0096c9; color:#fff;}
.menu_list .dep2 {display: none; overflow: hidden;}
.menu_list .dep2 > li > a {display: block; padding:15px 15px;font-size: 1.5rem; background: #f7faff; border-bottom: 1px solid #d4d4d4; font-weight: 700;}
.menu_list .dep3 {margin: 0 auto; padding:10px; background: #efefef; overflow: hidden;}
.menu_list .dep3 > li {width: 50%; float: left;}
.menu_list .dep3 > li > a {position: relative; display: block; height: 100%; font-size: 0.95em; padding:5px; padding-left: 7px;}

.menu_list .dep3 > li > a:before {position: absolute; top: 50%; left: 0; margin-top: -1.5px; content:""; display: inline-block; width: 3px; height: 3px; background: #5B6380; border-radius:50%;}

.menu_list .login{text-align:center; margin-top:10px;}
.menu_list .login a{display:inline-block; padding:5px 10px; margin:0 3px; text-transform:uppercase; border-radius:5px; font-size:1.3rem; color:#fff; background:#0096c9;}

#mobileMenu, .mobi_menu_open {display: none;}

/*sub visual*/
#sub_visual{height:315px; display:table; width:100%; text-align:center; background:url(/img/sub_visual.jpg) center center; background-size:cover;}
#sub_visual .sb_txt{display:table-cell; vertical-align:middle;}
#sub_visual .sb_txt p{font-size:3.6rem; padding-bottom:5px;}
#sub_visual .sb_txt span{text-transform:uppercase; font-size:1.3rem; color:#868686; font-weight:100; letter-spacing:2px;}

/*서브 메뉴*/
#snb{border-bottom:1px solid #e1e1e1; text-align:center;}
#snb ul{display:inline-block; width:100%;}
#snb ul li{display:inline-block; text-align:center; padding:0 2.5%;}
#snb ul li a{display:block; font-size:1.7rem; text-transform:uppercase; color:#a9a9a9; padding:20px 0;}
#snb ul li.on a{border-bottom:2px solid #0082ae; color:#0082ae;}
#snb ul li.on a:hover{color:#0082ae;}

/*서브콘텐츠*/
#sub_content #contents{max-width:1200px; margin: 0 auto; padding:70px 0 100px 0;}
.page_title{overflow:hidden; padding-bottom:30px; border-bottom:1px solid #e1e1e1; margin-bottom:50px;}
.page_title h2{float:left; font-size:2.5rem; font-weight:700; text-transform:uppercase;}
.page_title .location{float:right; padding-top:8px;}
.page_title .location li{float:left; font-size:1.4rem; color:#969696; text-transform:uppercase; position:relative; padding-right:15px; margin-right:5px;}
.page_title .location li::before{position:absolute; width:7px; height:7px; right:0; top:50%; margin-top:-3px; content:""; display:block; background:url(/img/arrow_ico.jpg);}
.page_title .location li:last-child{margin-right:0; padding-right:0;}
.page_title .location li:last-child::before{display:none;}
.page_title .location li.active{color:#222;}

/*footer*/
#footer{background:#595959; text-align:center;}
#footer .link_wrap{padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.2);}
#footer .link_wrap .link{max-width:1200px; margin:0 auto;}
#footer .link_wrap .link a{color:#fff; opacity:0.6; font-size:1.4rem;}
#footer .inner{max-width:1200px; margin:0 auto; color:#fff; opacity:0.6; font-weight:100; padding:30px 0 40px 0;}
#footer .inner span{padding-bottom:3px; display:inline-block; font-size:1.4rem;}
#footer .inner span.copy{font-size:1.2rem; text-transform:uppercase;}

@media screen and ( max-width:1600px ){
	#header h1{width:100%; margin-top:15px; text-align:left;}
	#header h1 img{width:300px;}

	#tnb ul{width:22%; padding-top:22px;}

	#nav{width:78%; text-align:center;}
	#nav .menu{padding:0 2%;}
	#nav .gnb li:first-child{padding-left:0;}
	#nav .menu > a{padding-top:0; line-height:55px;}
	#nav li:first-child .submenu ul{margin-left:0;}
}

@media screen and ( max-width:1200px ){
	
}


@media screen and ( max-width:1100px ){

	#headerWrap{height:90px;}

	#tnb{display:none;}

	/*mobile menu*/
	#nav{display:none;}
	#mobileMenu, .mobi_menu_open, .mobi_search_icon {display: block;}
	.mb_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index:500;}
	
	/*footer*/
	#footer .link_wrap{padding:15px 3%; text-align:center;}
	#footer .link_wrap .link{display:inline-block; margin:0;}
	#footer .inner{padding:25px 3% 25px 3%; text-align:center;}
}

/* Tablet CSS */ 
@media screen and ( max-width:1024px ){

}

/* Mobile CSS */
@media screen and ( max-width:797px ){

	/*common-공통*/
	html{
	font-size: 9px;
	}
	
	/*page title*/
	.page_title{margin-bottom:25px; padding-bottom:15px;}

	/*sub visual*/
	#sub_visual{height:180px;}
	#sub_visual .sb_txt p{font-size:3.0rem;}
	#sub_visual .sb_txt span{font-size:1.2rem;}

	/*sub menu*/
	#snb ul li a.on{padding:10px 0;}

	/*sub contents*/ 
	#sub_content #contents{padding:50px 3% 50px 3%;}

	
}

@media screen and ( max-width:375px ){

}