/*
[ PUBLAB ] www.publab.kr
site name : publab
publisher : ahn sung chul
*/

@charset "utf-8";

#top_layout, #mvisual_layout, #body_layout, #foot_layout{ width: 100%;}
.layout{width: 1400px; margin: 0 auto;}

/*top_layout*/
#top_layout{ height: 80px; background-color: #141c47;;}
#top_layout .logo_wrap{width: 180px; height: 40px; margin: 20px 0px 20px 25px; float: left; position: relative; z-index: 9;}
#top_layout .logo_wrap a{height: 100%; font-size: 1px; text-indent: -9999px; overflow: hidden; background: url(img/logo.png) no-repeat center center;}
#top_layout .mbMenu{display: none;}

/*gnb_layout*/
#gnb_layout{ height:80px; top:0px;}/* height:gnb높이, top:#top_layout에서 위치 */
#gnb_layout .depth1_ul > li > a span{ height:80px;}/* 1차메뉴 높이(오버시 border-bottom값을 뺀 높이) */
#gnb_layout .depth1_ul{ width:800px; padding:0; margin-left: 100px;}/* width:컨텐츠 넓이, padding:header의 왼쪽 오른쪽 값으로 1차 메뉴 중앙 정렬 */
#gnb_layout.on.a_type .depth2_ul,
#gnb_layout.on.at_type .depth2_ul,
#gnb_layout.on.at_type .title_wrap,
#gnb_layout.on.b_type .depth2_ul,
#gnb_layout.on.c_type li.ov .depth2_ul,
#gnb_layout.on.ct_type .depth1_ul > li.ov > .title_wrap,
#gnb_layout.on.ct_type li.ov .depth2_ul,
#gnb_layout.on.d_type li.ov .depth2_ul,
#gnb_layout.on.dt_type .depth1_ul > li.ov > .title_wrap,
#gnb_layout.on.dt_type li.ov .depth2_ul,
#gnb_layout.on .gnb_bg{ top:80px;}/* #gnb_layout에서 2차 메뉴, gnb배경 위치 */
#gnb_layout.on .gnb_bg{ background-color:#1d2865; opacity:1;}/* background-color:gnb배경색, opacity:gnb투명도 */
#gnb_layout.on .depth1_ul > li.on > a,
#gnb_layout.on .depth1_ul > li.ov > a,
#gnb_layout.on .depth1_ul > li.ov:hover > a,
#gnb_layout.on .depth1_ul > li > a:focus{ border-bottom:0px solid #0054a6; overflow: hidden; position:relative;}/* 1차메뉴 오버시 밑줄 */
#gnb_layout.on .depth1_ul > li.on > a:before,
#gnb_layout.on .depth1_ul > li.ov > a:before,
#gnb_layout.on .depth1_ul > li.ov:hover > a:before,
#gnb_layout.on .depth1_ul > li > a:focus:before{ width: 20px; height: 20px; background-color: #140047; content: ""; margin-left:-10px; position: absolute; bottom:-10px; left: 50%; transform: rotate(-45deg);}
#gnb_layout.on .depth1_ul > li.on > a span,
#gnb_layout.on .depth1_ul > li.ov > a span,
#gnb_layout.on .depth1_ul > li.ov:hover > a span,
#gnb_layout.on .depth1_ul > li > a:focus span{ color:#ccc;}
#gnb_layout.on .depth2_ul > li:hover > a,
#gnb_layout.on .depth2_ul > li.ov:hover > a,
#gnb_layout.on .depth2_ul > li > a:focus{ background-color:#141c47;}/* 1차메뉴 오버시 2차메뉴 배경색 */
#gnb_layout .depth2_ul > li > a[target=_blank]:after{ width:11px; height:11px; background:url(../../images/common/atype_ir.png) no-repeat -204px -230px; content:""; margin-left:5px; display:inline-block;}
#gnb_layout .depth2_ul > li > a[target=_blank]:focus:after,
#gnb_layout .depth2_ul > li > a[target=_blank]:hover:after{ background-position:-204px -244px;}
 
#gnb_layout{ width:100%; text-align:center; padding:0; display:inline-block; box-sizing:border-box; position:absolute; left:0; z-index:1;}
#gnb_layout .depth1_ul{ text-align:right; display:inline-block; box-sizing:border-box; position:relative;}
#gnb_layout .depth1_ul > li{ padding:0; display:inline-block; box-sizing:border-box; width: 20%; float: left; text-align: center;}
#gnb_layout .depth1_ul > li > a{text-align:center; margin:0; display:inline-block;}
#gnb_layout .depth1_ul > li > a span{ font-weight:bold; font-size:18px; color:#fff; text-align:center; line-height:22px; display:table-cell; vertical-align:middle;}
#gnb_layout .depth2_ul{ width:100%; padding:0; display:inline-block; box-sizing:content-box; position:absolute; top:-9999999px; left:0;}
 
#gnb_layout.a_type .depth1_ul.n2 .depth2_ul{ width:50%;}
#gnb_layout.a_type .depth1_ul.n2 li.n2 .depth2_ul{ left:50%;}
#gnb_layout.a_type .depth1_ul.n3 .depth2_ul{ width:33.33%;}
#gnb_layout.a_type .depth1_ul.n3 li.n2 .depth2_ul{ left:33.33%;}
#gnb_layout.a_type .depth1_ul.n3 li.n3 .depth2_ul{ left:66.66%;}
#gnb_layout.a_type .depth1_ul.n4 .depth2_ul{ width:25%;}
#gnb_layout.a_type .depth1_ul.n4 li.n2 .depth2_ul{ left:25%;}
#gnb_layout.a_type .depth1_ul.n4 li.n3 .depth2_ul{ left:50%;}
#gnb_layout.a_type .depth1_ul.n4 li.n4 .depth2_ul{ left:75%;}
#gnb_layout.a_type .depth1_ul.n5 .depth2_ul{ width:20%;}
#gnb_layout.a_type .depth1_ul.n5 li.n2 .depth2_ul{ left:20%;}
#gnb_layout.a_type .depth1_ul.n5 li.n3 .depth2_ul{ left:40%;}
#gnb_layout.a_type .depth1_ul.n5 li.n4 .depth2_ul{ left:60%;}
#gnb_layout.a_type .depth1_ul.n5 li.n5 .depth2_ul{ left:80%;}
#gnb_layout.a_type .depth1_ul.n6 .depth2_ul{ width:16.66%;}
#gnb_layout.a_type .depth1_ul.n6 li.n2 .depth2_ul{ left:16.66%;}
#gnb_layout.a_type .depth1_ul.n6 li.n3 .depth2_ul{ left:33.32%;}
#gnb_layout.a_type .depth1_ul.n6 li.n4 .depth2_ul{ left:49.98%;}
#gnb_layout.a_type .depth1_ul.n6 li.n5 .depth2_ul{ left:66.64%;}
#gnb_layout.a_type .depth1_ul.n6 li.n6 .depth2_ul{ left:83.3%;}
#gnb_layout.a_type .depth1_ul.n7 .depth2_ul{ width:14.28%;}
#gnb_layout.a_type .depth1_ul.n7 li.n2 .depth2_ul{ left:14.28%;}
#gnb_layout.a_type .depth1_ul.n7 li.n3 .depth2_ul{ left:28.56%;}
#gnb_layout.a_type .depth1_ul.n7 li.n4 .depth2_ul{ left:42.84%;}
#gnb_layout.a_type .depth1_ul.n7 li.n5 .depth2_ul{ left:57.12%;}
#gnb_layout.a_type .depth1_ul.n7 li.n6 .depth2_ul{ left:71.4%;}
#gnb_layout.a_type .depth1_ul.n7 li.n7 .depth2_ul{ left:85.68%;}
#gnb_layout.a_type .depth2_ul,
#gnb_layout.on.a_type .gnb_bg{padding:10px 0; }
#gnb_layout.a_type .depth2_ul > li{ width:100%; height:40px; margin-bottom:5px; display:table; float:left;}
#gnb_layout.a_type .depth2_ul > li > a{ width:100%; height:100%; font-size:14px; text-align:center; color:#f5f5f5; line-height:20px; padding:5px; display:table-cell; box-sizing:border-box; vertical-align:middle; position:relative;word-break:keep-all}
#gnb_layout.a_type .depth2_ul ul{ display:none;}

#gnb_layout .gnb_bg,
#gnb_layout .gnbClose,
#gnb_layout .topUtile,
#gnb_layout .bottomUtile{ display:none;}
#gnb_layout.on .gnb_bg{ width:100%; display:inline-block; box-sizing:content-box; overflow:hidden; position:absolute; left:0; z-index:-1;}
 
#gnb_layout.mb{ width:100%; height:100%; padding:0; margin:0; display:inline-block; box-sizing:border-box; position:fixed; top:0; bottom:0; left:auto; right:0; z-index:9999;}
#gnb_layout.mb .gnb_wrap{ width:100%; height:100%; text-align:right; overflow-y:auto; position:relative; top:0; right:0;}
#gnb_layout.mb .lan{ width:310px; height:30px; background-color:#585d63; padding:0; display:inline-block; box-sizing:border-box; position:absolute; right:-310px; z-index:2;}
#gnb_layout.mb .lan li{ width:33.33%; padding:0; margin:0; display:inline-block; float:left;}
#gnb_layout.mb .lan li a{ width:100%; font-family:nsk; font-size:14px; color:#fff; text-align:center; line-height:30px; display:inline-block;}
#gnb_layout.mb .depth1_ul{ width:280px; height:100%; background-color:#5c67a2; padding:0; box-sizing:border-box; position:relative; right:-310px; z-index:1;}
#gnb_layout.mb .depth1_ul > li{ width:100%; height:auto; padding:0; overflow:hidden;}
#gnb_layout.mb .depth1_ul > li:before{ display:none;}
#gnb_layout.mb .depth1_ul > li > a{ width:100%; background-color:#5c67a2; padding:14px 50px 14px 25px; margin:0; display:inline-block; box-sizing:border-box; position:relative; z-index:1;}
#gnb_layout.mb .depth1_ul > li > a > span{ height:auto; font-size:18px; color:#fff; text-align:left; line-height:28px;}
#gnb_layout.mb .depth1_ul > li.on > a{ border:0;}
#gnb_layout.mb .depth1_ul > li+li > a{ border-top:1px solid #e5e5e5;}
#gnb_layout.mb .depth1_ul > li > a:before,
#gnb_layout.mb .depth1_ul > li > a:hover:before,
#gnb_layout.mb .depth1_ul > li > a:focus:before,
#gnb_layout.mb .depth1_ul > li.on > a:before{ width:16px; height:2px; background-color:#fff; content:""; margin-top:-1px; position:absolute; top:50%; right:26px; bottom:auto; left:auto;}
#gnb_layout.mb .depth1_ul > li > a:after,
#gnb_layout.mb .depth1_ul > li > a:hover:after,
#gnb_layout.mb .depth1_ul > li > a:focus:after,
#gnb_layout.mb .depth1_ul > li.on > a:after{ width:2px; height:16px; background-color:#fff; content:""; margin-top:-8px; position:absolute; top:50%; right:33px; bottom:auto; left:auto;}
#gnb_layout.mb .depth1_ul > li.down > a{background-color:#140047;}
#gnb_layout.mb .depth1_ul > li.down > a:after,
#gnb_layout.mb .depth1_ul > li.down > a:hover:after,
#gnb_layout.mb .depth1_ul > li.down > a:focus:after,
#gnb_layout.mb .depth1_ul > li.down.on > a:after{ display:none;}
#gnb_layout.mb .depth1_ul > li.n7{ display:inline-block;}
#gnb_layout.mb .depth2_ul{ min-height:100%; padding:0; display:none; z-index:0;}
#gnb_layout.mb .depth2_ul > li{ padding:0; margin-bottom:0; border-top:0;}
#gnb_layout.mb .depth2_ul > li > a{ width:auto; height:auto; font-size:16px; text-align:left; color:#333; padding:12px 30px 12px 20px; margin:0; display:block; border-top:1px solid #e5e5e5; position:relative;}
#gnb_layout.mb .depth2_ul > li > a:hover {background: #e5e5e5;}
#gnb_layout.mb .depth2_ul > li.more > a:before{ width:13px; height:1px; background-color:#c2c2c2; content:""; position:absolute; top:25px; right:15px;}
#gnb_layout.mb .depth2_ul > li.more > a:after{ width:1px; height:13px; background-color:#c2c2c2; content:""; position:absolute; top:19px; right:21px;}
#gnb_layout.mb .depth2_ul > li.more.on > a{ color:#0054a6;}
#gnb_layout.mb .depth2_ul > li.more.on > a:before{ background-color:#0054a6;}
#gnb_layout.mb .depth2_ul > li.more.on > a:after{ display:none;}
#gnb_layout.mb .depth2_ul > li:first-child > a{ border-top:0;}
#gnb_layout.mb .depth3_ul{ min-height:100%; width:100%; background-color:#eceeef; padding:10px 0; margin:0; display:none; border-top:1px solid #d7d7d7;}
#gnb_layout.mb .depth3_ul > li{ width:100%; display:inline-block; float: left;}
#gnb_layout.mb .depth3_ul > li > a{ width:100%; color:#000; text-align:left; padding:5px 20px 5px 28px; margin:0; display:inline-block; box-sizing:border-box; border:0; position:relative;}
#gnb_layout.mb .depth3_ul > li > a:before{ width:2px; height:2px; background-color:#9c9c9d; content:""; position:absolute; top:13px; left:22px;}
#gnb_layout.mb li.down .depth2_ul,
#gnb_layout.mb li.up .depth2_ul{ width:100%; height:auto; background-color:#fff; display:inline-block; border:0; position:relative; top:0; left:0;}
#gnb_layout.mb li.on > .depth3_ul{ display:inline-block;}
 
#gnb_layout.mb .gnbClose{ width:34px; height:34px; font-size:0; text-indent:-9999px; padding:0; display:inline-block; position:absolute; right:20px; top:-55px; z-index:3;}
#gnb_layout.mb .gnbClose:before{ width:30px; height:2px; background-color:#000; content:""; margin:-1px 0 0 -15px; position:absolute; top:50%; left:50%; transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg);}
#gnb_layout.mb .gnbClose:after{ width:2px; height:30px; background-color:#000; content:""; margin:-15px 0 0 -1px; position:absolute; top:50%; left:50%; transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg);}
 
#gnb_layout.mb .gnb_bg{ width:100%; height:auto; background-color:#000; display:inline-block; opacity:0.3; position:absolute; top:0; left:0; bottom:0; z-index:0;}
#gnb_layout.mb .gnb .title,
#gnb_layout.mb .gnb .depth1_ul > li > h2:after,
#gnb_layout.mb .depth2_ul:before,
#gnb_layout.mb li.on > h2:before,
#gnb_layout.mb .gnb_bg:before,
#gnb_layout.mb .title_wrap{ display:none;}


/*foot_layout*/
#foot_layout{ background-color: #3c3d3d;}
#foot_layout .sitemap_wrap{ background-color: #ededed; padding: 30px 0;}
#foot_layout .sitemap_wrap .depth1_ul{ overflow: hidden;}
#foot_layout .sitemap_wrap .depth1_ul > li{float: left;}
#foot_layout .sitemap_wrap .depth1_ul > li + li{ margin-left: 76px;}
#foot_layout .sitemap_wrap .depth1_ul > li strong a{ font-size: 1.6rem; color: #2b2b2b; line-height: 2rem;}
#foot_layout .sitemap_wrap .depth2_ul{ margin-top: 8px; overflow: hidden;} 
#foot_layout .sitemap_wrap .depth2_ul a{ font-size: 1.4rem; color: #444; line-height: 1.8rem;}
#foot_layout .foot_wrap{ padding: 20px 0 30px 0;}
#foot_layout .foot_wrap .layout{ position: relative;}
#foot_layout .foot_wrap .layout:after{ width: 134px; height: 39px; background-image: url(../img/inc/logo_foot.png); background-position: center; background-repeat: no-repeat; content: ""; position: absolute; top: 0; left: 0;}
#foot_layout .foot_wrap p{ font-size: 1.3rem; font-weight: 100; color: #fff; line-height: 1.7rem; letter-spacing: 0; padding-left: 160px; box-sizing: border-box;}
#foot_layout .foot_wrap .copy{ margin-top: 8px;}
#foot_layout .foot_wrap span{ display: inline-block;}
#foot_layout .foot_wrap span + span{ margin-left: 20px;}

/*gnbFix*/
body.gnbFix #top_layout{ background-color: #ffffff; position: fixed; top: 0; left: 0; z-index: 999; border-bottom: 2px solid#141c47 }
body.gnbFix #top_layout .logo_wrap a{ background-image: url(img/logo_fix.png);}
body.gnbFix #gnb_layout .depth1_ul > li > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.on > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.ov > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.ov:hover > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li > a:focus span{ color: #141c47;}
body.gnbFix #top_layout + div{ margin-top: 90px;}

@media (max-width:1200px){
	#top_layout{ height:6rem; position:relative;}
	#top_layout .layout .logo_wrap{ margin:1rem 0;}
	#top_layout:after{ margin-left:-340px; left:100%;}
	.layout{ width:100%; padding: 0 20px; box-sizing: border-box;}
    
	#top_layout .mbMenu{ width: 40px; height: 40px; background:url(img/icon_m_menu.png) no-repeat center center; margin-top: -20px; display: block; position: absolute; top: 50%; right: 20px;}
	#top_layout .mbMenu a{ width: 100%; height: 100%; font-size: 1px; text-indent: -9999px; position: relative;}
	#top_layout .mbMenu a::before{ width: 0px; height: 0px; content: ""; border-top: 4px solid #fff; border-bottom: 4px solid #fff; position: absolute; top: 8px; left: 5px;}
	#top_layout .mbMenu a::after{ width: 0px; height: 0px; background-color: #fff; content: ""; margin-top: -2px; position: absolute; top: 50%; left: 5px;}
	body.gnbFix #top_layout .mbMenu {background: url(img/icon_m_menu_fix.png) no-repeat center center}
	body.gnbFix #top_layout .mbMenu a{ box-sizing: border-box; border: 1px solid #fff;}
	body.gnbFix #top_layout .mbMenu a::before{ top: 7px; left: 4px;}
	body.gnbFix #top_layout .mbMenu a::after{ left: 4px;}
	#gnb_layout{ display:none;}
	body.gnbFix #top_layout + div{ margin-top: 6rem;}
	
	body.gnbFix #gnb_layout .depth1_ul > li > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.on > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.ov > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li.ov:hover > a span,
body.gnbFix #gnb_layout.on .depth1_ul > li > a:focus span{ color: #fff;}
}