@charset "utf-8";
/*  
	-----------------------------------------------
	* layout.css (포털 레이아웃)
	-----------------------------------------------
*/

/* layout */
/* layout */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{font-family:'Noto Sans KR', "돋움", Dotum, Arial, sans-serif !important;}
#gnbWrap >div, #innerHead >div, #lnbWrap nav, .lnb_sub, .cont_wrap >div, #bannerWrap >div, #container, .familysite, footer .info_wrap {width: 1200px;}
@media screen and (max-width:1399px){
#gnbWrap >div, #innerHead >div, #lnbWrap nav, .lnb_sub, .cont_wrap >div, #bannerWrap >div, #container, .familysite, footer .info_wrap
{width:100%;}
}
/* header */
/* header */
#innerHead h1.logo a{ display: inline-block;
    position: relative;    width:200px;
    background: url(./../img/common/logo.svg) no-repeat 0% 50%;
    background-size: contain;
    overflow: hidden;
    text-indent: -999px; font-size:39px;
}
.inner {max-width:1200px; margin-left:auto; margin-right:auto; position:relative;}
#gnbWrap {position:relative; padding:0; background:#fff; z-index:999999;}
#gnbWrap:after {content:""; display:block; clear:both;}
#gnbWrap a,#gnbWrap button {color:#666;}
#gnbWrap> * {z-index:1;}
#gnbWrap .gnb-nav li {float:left;}
#gnbWrap .gnb-nav li a {
    display: block;
    position: relative;
    line-height: 50px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 400;
    border-right: 1px solid #ddd;}
#gnbWrap .gnb-nav li:first-child a {border-left: 1px solid #ddd;}
#gnbWrap .gnb-nav li a.on {background:#008341; color:#fff;}
#gnbWrap .gnb-nav li:first-child a.on:before {left:-1px;}

#gnbWrap .gnb-nav-open {float:left; position:relative; font-size:1.4rem; z-index:50; border:1px solid #ddd; border-top-width:0; border-bottom-width:0;
margin-top:10px; margin-bottom:0; margin-left:12px; background:#fff;}
#gnbWrap .gnb-nav ~ .gnb-nav-open {border-left-width:0;}
#gnbWrap .gnb-nav-open dt {display:block; position:relative;}
#gnbWrap .gnb-nav-open .nav-control {display:block; position:relative; min-width:120px; font-size:14px; padding:0 3em 0 1em; 
color:#666; height:30px; border-radius:4px; background:url('./../img/common/ico_gnb_arrow.png') no-repeat top 50% right 1em;  text-align:left;
border:1px solid #a7aaaa}
#gnbWrap .gnb-nav ~ .gnb-nav-open .nav-control {min-width:14rem;} 
#gnbWrap .gnb-nav-open dd .nav-control {position:absolute; top:0; background-image:url('./../img/common/ico_gnb_arrow_off.png'); border:0; left:0;}
#gnbWrap .gnb-nav-open dd {display:none; position:absolute; top:0; left:-1px; right:-1px; min-width:120px; box-sizing:border-box; 
background:#ffffff; padding: 35px 5px 15px 5px; border:1px solid #ddd;}
#gnbWrap .gnb-nav-open.on dd {display:block;}
#gnbWrap .gnb-nav-open dd li + li {}
#gnbWrap .gnb-nav-open dd a {display:block; position:relative; line-height:1.6; padding:0.4rem 1.1rem}
#gnbWrap .gnb-nav-open dd a {padding-left:1rem;}
#gnbWrap .gnb-nav-open dd a span {position:relative; font-size:14px; padding-left:10px;}
#gnbWrap .gnb-nav-open dd a:before {content:""; display:block; position:absolute; top:50%; width:4px; height:4px; left:14px; background:#bbbbbb; border-radius:100%;}
#gnbWrap .gnb-nav-open dd a:hover {color:#1355d8;}
#gnbWrap .gnb-nav-open dd a:hover span:after {content:""; display:block; position:absolute; top:100%; left:0; right:0; height:2px; background:#becaf1;}

#gnbWrap .zoom-control {float:left; padding-top:10px; font-size:14px;}
#gnbWrap .zoom-control button {display:inline-block; position:relative; vertical-align:middle; width:30px; height:30px;
overflow:hidden; text-indent:-999px; border:0;}
#gnbWrap .zoom-control button.zoom-in {background: #c1c1c1 url('./../img/common/btn_zoom_in.png') no-repeat center center; margin-left:5px;}
#gnbWrap .zoom-control button.zoom-out {background: #c1c1c1 url('./../img/common/btn_zoom_out.png');}



.total_search input[type="submit"] {background: #29a3e0;color: #fff;}

#lnbWrap {background: #fff;}
#lnb >li {width: 25%;} /* 1차메뉴 개수에 따라 변경 */
#lnb >li >a {color: #000;font-size: 2rem;}
#lnb >li >a.on, #lnb >li >a:hover, #lnb >li >a:focus {color: #2e61a7; font-weight:600;}
#lnb >li >a:before, #lnb >li.on >a:before {height: 3px;background: #fff;}
#lnb >li.on >a:before {width: 40px;}
#lnbWrap >.layer.on {border-bottom: 1px solid #ccc;-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.2);box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.2);}

/* header > menuLayer TYPE01 */
#lnbWrap.type01 >.layer.on:before {background:rgba(255,255,255,1);}
#lnbWrap.type01 .lnb_sub .depth02 >li >a {background-color: #889fb3;color: #fff;}
#lnbWrap.type01 .lnb_sub .depth02 >li >a.on {background-color: #3753d4;}
#lnbWrap.type01 .lnb_sub .depth02 >li >a:hover, #lnbWrap.type01 .lnb_sub .depth02 >li >a:focus {background-color: #233753;text-decoration: underline;}
#lnbWrap.type01 .lnb_sub .depth03 >li:not(:last-of-type) >a {border-bottom: 1px dashed #dcdcdc !important;}
#lnbWrap.type01 .lnb_sub .depth03 >li >a:before {background: #c5c5c5;}
#lnbWrap.type01 .lnb_sub .depth03 >li >a:hover, #lnbWrap.type01 .lnb_sub .depth03 >li >a:focus {color: #334d72;text-decoration: underline;}
#lnbWrap.type01 .lnb_sub .depth03 >li >a:hover:before, #lnbWrap.type01 .lnb_sub .depth03 >li >a:focus:before {background: #334d72;}
#lnbWrap.type01 .lnb_sub .depth03 >li >a.on {color: #1c91f5;font-weight: 500;}
#lnbWrap.type01 .lnb_sub .depth03 >li >a.on:before {background-color: #1c91f5;}

/* header > menuLayer TYPE02 */
#lnbWrap.type02 >.layer.on:before {background:url('./../img/common/bg_layer_type02.png') 50% 0 repeat-y;}

/* snb */
#snbWrap h2 {background: #3a81dc;}
#snbWrap h2, #snbWrap h2 a {color: #fff;}
.snb >li >a {border: 1px solid #ddd;color: #999;}
.snb >li >a:hover, .snb >li >a:focus {border: 1px solid #bbb;color: #333;}
.snb >li >a.state.on, .snb >li >a.on {background-color:#333;border: 1px solid rgba(0,0,0,0.2);}
.snb >li >a.state.on + ul {border: 2px solid #333;background: #f9f9f9;}
.snb >li >ul >li >a:hover:before, .snb >li >ul >li >a:focus:before, .snb >li >ul >li >a.on:before {background: #333;border: 1px solid #222;}

/* content */


/* footer */
footer .info_wrap {padding:10px 0 35px 0}
.familysite_list a:hover, .familysite_list a:focus {color: #3c6ab3;}
.familysite_list ul > li > a:before {background: #20a9f3;}
.familysite_list ul > li > a:hover:before {background: #3c6ab3}
.familysite_list ul > li > a[target=_blank]:hover:after, .familysite_list ul > li > a[target=_blank]:focus:after {background-position: -23px -22px;}
footer .btn_close {background-color: #3497d2}


@media screen and (min-width:1025px) {
#lnbWrap {border-top:1px solid #e8e8e8; margin-top:1.6rem;     border-bottom: 1px solid #e8e8e8;}
#innerHead {width:100%; text-align:center;}
#innerHead >div { padding:0}
#innerHead h1 {/*z-index: 999999;*/ top:0;     position: relative; left:0;}
}

@media screen and (max-width:1024px) {
#lnbWrap {background: #2e61a7 !important;}
#lnb >li >a {color: #fff;font-size: 1.9rem;}
#lnb >li >a:hover, #lnb >li >a:focus{color: #fff;}
#lnb >li >a >span{padding:0}
	footer .info_wrap >div {float:none; width:100%;}
footer .info_wrap{padding:10px 15px 35px 15px}
.copy_info .contact >li {float:none;}
.copy_info .contact >li:not(:last-child):after {display:none;}
footer small {text-align:center;float:none;}
}