@charset "utf-8";
/*
 *     메뉴레이아웃
 *     #gnavi
 *     .gnavi_back             배경
 *     .gnavi_list             메뉴
 *     일차메뉴
 *     .gnavi
 *     .gnavi > a              주메뉴
 *     .gnavi > dl             이차메뉴리스트박스
 *     .gnavi > dl > dt        이차메뉴타이틀(주메뉴타이틀)
 *     이차메뉴
 *     .mnavi
 *     .mnavi > a              서브메뉴
 *     .mnavi > ul             삼차메뉴리스트박스
 *     삼차메뉴
 *     .snavi
 *     .snavi > a              서브메뉴
 *     이벤트
 *     .locked                 현재콘텐츠메뉴
 *.active 마우스온
 */
@import url(NotoSansKr.css);

 *{box-sizing: border-box;}

#gnavi{ position:relative;font-family: "Noto Sans KR", sans-serif; background:#fff;border-top:1px solid #dedede;border-bottom:1px solid #0b7cc8;}

#gnavi .gnavi_list::after{content: '';display: block;clear: both;}

.gnavi_list{padding-right:63px;position: relative;transition:padding-right .3s;z-index:0;}
#gnavi .gnavi{float: left;width:12.5%;}
#gnavi .gnavi > a{ display:block; text-align:center; font-size:18px; font-weight:600; line-height:58px;height: 58px;color: #303030;transition:all 0.3s;box-sizing:border-box;position: relative;}
/*0716 수정*/
#gnavi .gnavi > a::after{content: '';position: absolute;left: 0;right: 0;bottom:-1px;top:-1px;border:1px solid transparent;border-top-width:2px;z-index:101;
transition:border-color .3s,border-left-color .3s,border-right-color .3s;
}
#gnavi .gnavi.locked > a{color:#0d79c2;}

#gnavi .gnavi.active > a{color: #0d79c2;}
#gnavi .gnavi.active > a::after{border-color:#0d79c2;border-top-width:2px;border-bottom-color:#fff}
#gnavi .gnavi.active.allmenu > a::after{content: none;}

#gnavi .gnavi > a:focus{border:1px dashed #fff;}

#gnavi .gnavi > a:hover{color:#0d79c2;}

#gnavi .gnavi > dl{ display:none; border-top:2px solid #2e4064;}
#gnavi .gnavi > dl > dt{ font-size:18px; font-weight:600; letter-spacing:-2px; color:#0177a8; margin:25px 0 20px 0; padding:0 10px 0 20px; display:inline-block; background:url(/images/inc/menu_txt_back01.png) right 7px no-repeat;}

#gnavi .gnavi.allmenu{width:64px;position: absolute;right:0;transition:right .3s;}
#gnavi .gnavi.allmenu > a{ font-size:0; background:#0d79c2 url(/images/inc/sitemap_icon01.png) center center no-repeat;display: block;height: 58px;width: 100%;border:0;cursor:pointer;transition:background .3s;}
#gnavi .gnavi.allmenu > a:hover,
#gnavi .gnavi.allmenu > a:focus{background-color:#214f8a}

.gnavi_depth{display: none;}
.mgnavi_depth_open,
.mgnavi_depth_close{display: none;}

#gnavi .gnavi8,
#gnavi .gnavi9{display: none;}

@media all and (min-width: 1071px){
	#gnavi.lay_fixed{position: fixed;top:36px;width: 100%;left:0;}
	.gnavi.active .gnavi_depth{display: block;}
	.gnavi_depth{position: absolute;margin:auto;background: #fff;top:58px;border:1px solid #1d7cbc;box-sizing:border-box;display: none;left:0;right:0;}
	.mgnavi_depth_open,
	.mgnavi_depth_close{display: none;}


	/* 2depth 칼럼 사이즈 조절*/
	/* .gnavi_depth2{height:200px;}
	.gnavi5 .gnavi_depth2{height:400px;}
	.gnavi7 .gnavi_depth2{height:400px;} */

}

.gnavi_depth2{float: left;width: 16.6666%;height:300px;transition:height .3s;}

.gnavi1 .gnavi_depth2{width:16.66666%;height:240px;}

.gnavi2 .gnavi_depth2{width:16.6666%;height:170px;}
.gnavi2 .gnavi_depth2:nth-of-type(6),
.gnavi2 .gnavi_depth2:nth-of-type(7),
.gnavi2 .gnavi_depth2:nth-of-type(8),
.gnavi2 .gnavi_depth2:nth-of-type(9),
.gnavi2 .gnavi_depth2:nth-of-type(10){height:220px;}

.gnavi3 .gnavi_depth2{width:16.66666%;height:240px;}
.gnavi4 .gnavi_depth2{width:16.66666%;height:200px;}

.gnavi5 .gnavi_depth2{width:16.6666%;height: 300px;}
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(7),
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(8),
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(9),
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(10),
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(11),
.gnavi5 .gnavi_depth .gnavi_depth2:nth-of-type(12){height:210px;}


.gnavi6 .gnavi_depth2{width:16.66666%;height:220px;}
.gnavi7 .gnavi_depth2{width:16.66666%;height:240px;}


.gnavi_depth{max-height:600px;}

.gnavi_depth > .gnavi_depth2:first-child{border-left:0;}
.gnavi_depth2{border-left:1px solid #f3f3f3;box-sizing:border-box;padding:0 30px;margin-top: 30px;}
.gnavi_depth2 > a{font-size: 16px;color: #444444;border-bottom:1px solid #444444;font-weight: 600;padding-bottom: 2px;display: inline-block;line-height: 1.2em;letter-spacing:-.025em;}
.gnavi_depth2 > ul{margin-top: 16px;}
.gnavi_depth2 > ul a{font-size: 13px;display: inline-block;letter-spacing:-0.04em}
.gnavi_depth2 > ul a:hover,
.gnavi_depth2 > ul a:focus{color: #0d79c2;font-weight: bold;}

.gnavi_depth2 > ul > li{position: relative;padding-left: 8px;margin-top: 8px;}
.gnavi_depth2 > ul > li.active > a{font-weight: bold;color: #0d79c2;}
.gnavi_depth2 > ul > li:first-child{margin-top: 0;}
.gnavi_depth2 > ul > li::after{content: '';background: #444444;width: 3px;height: 3px;position: absolute;left: 0;top:8px;}

.gnavi_depth2 > ul .mgnavi_depth_open,
.gnavi_depth2 > ul .mgnavi_depth_close{display: block;border:1px solid #bababa;background: #fff;font-size: 0;width: 17px;height: 17px;cursor:pointer;position: relative;box-sizing:border-box;}
.gnavi_depth2 > ul .mgnavi_depth_open{display: inline-block;vertical-align:middle;margin-top: -3px;}
.gnavi_depth2 > ul .mgnavi_depth_close{position: absolute;top:1px;}
.gnavi_depth2 > ul .mgnavi_depth_open::after{content: '';width: 7px;height: 1px;background: #000;position: absolute;left: 4px;top:7px;}
.gnavi_depth2 > ul .mgnavi_depth_open::before{content: '';width: 1px;height: 7px;background: #000;position: absolute;left: 7px;top:4px}
.gnavi_depth2 > ul .mgnavi_depth_close{display: none;}
.gnavi_depth2 > ul .mgnavi_depth_close::after{content: '';width: 7px;height: 1px;background: #000;position: absolute;left: 4px;top:7px;}

.gnavi_depth2 > ul li.active .mgnavi_depth_open{display: none;}
.gnavi_depth2 > ul li.active .mgnavi_depth_close{display: block;}

.gnavi_depth2 > ul ul{margin-top:10px;padding-bottom: 10px;display: none;}
.gnavi_depth2 > ul li.active ul{display: block;}
.gnavi_depth2 > ul ul a{font-size: 13px;letter-spacing:-.05em;display: block;line-height: 1.2em;color: #606060;}
.gnavi_depth2 > ul ul a:hover,
.gnavi_depth2 > ul ul a:focus{color: #0d79c2;font-weight: bold;}
.gnavi_depth2 > ul ul li{padding-left: 10px;position: relative;margin-top: 7px;}
.gnavi_depth2 > ul ul li:first-child{margin-top: 0;}
.gnavi_depth2 > ul ul li::after{content: '';position: absolute;width: 4px;height: 1px;background: #444;left: 0;top: 8px;}


/*0710 하위뎁스 삭제예정으로 인한추가css*/
/* .gnavi_depth2 > ul a{line-height: 1.5em;} */
/* .gnavi_depth2 > ul .mgnavi_depth_open{box-sizing:border-box;} */






/*
 * 반응형미디어쿼리
 *     max-width: 1200px    ㅁ
 *     max-width: 1060px    화면전환:메뉴버튼
 *     max-width: 700px     ㅁ
 *     max-width: 480px     ㅁ
 */
@media all and (max-width: 1070px){

#gnavi .gnavi8,
#gnavi .gnavi9{display: block;}


#wrap::before{content: '';position: fixed;background: transparent;top:0;left: 0;bottom: 0;right: 0;z-index:10;transition:background .3s;z-index:-1;}
#wrap.gnavi_active::before{content: '';background: rgba(0,0,0,.5);z-index:1;}
.top_right_guide .sitemap{ display:none;}


#gnavi .gnavi_list{display: block;}
.gnavi_depth{display: none;}
.gnavi_depth{position: initial;width: auto;}
.gnavi_depth .gnavi_depth2{float: none;width: auto;}
.gnavi_depth2{margin-top: 0;height:auto;padding:0;position: relative;}
.gnavi_depth2 > a{border-bottom:0;}
.gnavi_depth2 ul{display: none;}
.gnavi_depth2 > ul > li::after{content: none;}
.gnavi_depth .gnavi_depth2{border-left:0;}

.gnavi_depth{height: auto;max-height:none;}
.gnavi_depth2{height:auto !important;}

#gnavi .gnavi > a{text-align:left;height: 40px;line-height: 40px;}

#gnavi{ margin-top:142px; position:fixed;bottom:0; top:0; left:-88%; padding-left:0; z-index:555;width: 88%;background: #f1f1f1;border-top:0;overflow-y:scroll;transition:left .3s;}/*심볼마크변경*/
#gnavi.active{left:0;}
#gnavi .gnavi{display: block;position: relative;}
.mgnavi_depth_open,
.mgnavi_depth_close{border:0;box-sizing:border-box;}
.mgnavi_depth_open{display: block;position: absolute;right:0;height:40px;width:40px;top:0;}
.mgnavi_depth_close{display: none;position: absolute;right:0;height:40px;width:40px;top:0;}
.gnavi_banner{display: none;}

/*gnb depth 열기,닫기 btn*/
.gnavi_list .active > .mgnavi_depth_open{display: none;cursor:pointer;}
.gnavi_list .active > .mgnavi_depth_close{display: block;cursor:pointer;}




#gnavi .gnavi.active > a::after{content: none;}

/*아이콘설정*/
#gnavi .gnavi > a::before{content: '';background: no-repeat center top 14px;position: absolute;height: 40px;width: 20px;background-size:12px;left:5px;top:0;}
#gnavi .gnavi1 > a::before{background-image: url('/images/inc/m_nav_icon1.png');}
#gnavi .gnavi2 > a::before{background-image: url('/images/inc/m_nav_icon2.png');}
#gnavi .gnavi3 > a::before{background-image: url('/images/inc/m_nav_icon3.png');}
#gnavi .gnavi4 > a::before{background-image: url('/images/inc/m_nav_icon4.png');}
#gnavi .gnavi5 > a::before{background-image: url('/images/inc/m_nav_icon5.png');}
#gnavi .gnavi6 > a::before{background-image: url('/images/inc/m_nav_icon6.png');}
#gnavi .gnavi7 > a::before{background-image: url('/images/inc/m_nav_icon7.png');}
#gnavi .gnavi8 > a::before{background-image: url('/images/inc/m_nav_icon8.png');}
#gnavi .gnavi9 > a::before{background-image: url('/images/inc/m_nav_icon9.png');}

/*1차*/
#gnavi .gnavi_list{padding-right: 0;}
#gnavi .gnavi{border-top:1px solid #0c315f;background:#1b457b;width: 100%;}
#gnavi .gnavi > a{font-size: 15px;color: #fff;height:45px;line-height: 45px;padding:0 10px;padding-left:30px;width:calc(100% - 40px);box-sizing:border-box;}
#gnavi .gnavi.active > a{color: #fff;}
#gnavi .gnavi.locked > a{color: #fff;}
#gnavi .gnavi > .mgnavi_depth_open,
#gnavi .gnavi > .mgnavi_depth_close{background: url('/images/inc/m_nav_1_open.png') no-repeat center;height: 45px;width: 40px;background-size:11px;font-size: 0;}
#gnavi .gnavi > .mgnavi_depth_open{}
#gnavi .gnavi > .mgnavi_depth_close{transform:rotate(180deg)}

/*2차*/
.gnavi.active > .gnavi_depth{display: block;}
.gnavi_depth{padding:0 10px;background: #214f8a;}
.gnavi_depth .gnavi_depth2:nth-of-type(1){border-top:0;}
.gnavi_depth2{border-top:1px solid #193b67;}
.gnavi_depth2 > a{font-size: 14px;color: #fff;height: 35px;line-height: 35px;display: block;width:calc(100% - 30px);box-sizing:border-box;padding-left:35px;background:url('/images/inc/m_nav_d_icon1.png') left 21px center no-repeat;background-size:5px;font-weight: normal; overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}
.gnavi_depth2.active > a{color: #69cfff;}
.gnavi_depth2 > ul{margin-top:0;}
.gnavi_depth2 > ul > li{margin-top: 0;padding-left: 0;}

.gnavi_depth2 > .mgnavi_depth_open,
.gnavi_depth2 > .mgnavi_depth_close{background:transparent no-repeat center;width: 30px;height: 35px;position: absolute;background-size:11px;font-size: 0;border:0;}
.gnavi_depth2 > .mgnavi_depth_open{background-image:url(/images/inc/m_nav_2_open.png);}
.gnavi_depth2 > .mgnavi_depth_close{background-image:url(/images/inc/m_nav_2_close.png);}


/*3차*/
.gnavi_depth2.active > ul{display: block;padding-bottom: 10px;}
.gnavi_depth2 ul a{color: #fff;font-size: 13px;display: block;height:30px;line-height: 30px;position: relative;padding-left:10px;}
.gnavi_depth2 ul a::after{content: '';position: absolute;height:1px;width: 1px;background: #fff;left: 0;top: 50%;}
.gnavi_depth2 ul{margin-left: 34px;}


.gnavi_depth2 > ul .mgnavi_depth_open,
.gnavi_depth2 > ul .mgnavi_depth_close{display: none;}
.gnavi_depth2 ul button{display: none;}
.gnavi_depth2 ul{display: none;}


#gnavi .allmenu,
#gnavi .nav_search{display: none;}
}



.gnavi1 .gnavi_depth{background:url(/images/inc/gnb1_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}
.gnavi2 .gnavi_depth{background:url(/images/inc/gnb2_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}
.gnavi3 .gnavi_depth{background:url(/images/inc/gnb3_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}
.gnavi4 .gnavi_depth{background:url(/images/inc/gnb4_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}
.gnavi6 .gnavi_depth{background:url(/images/inc/gnb6_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}
.gnavi7 .gnavi_depth{background:url(/images/inc/gnb7_bg.jpg) right bottom 100px no-repeat #fff;background-size:100%;}

@media all and (max-width: 1000px){
}

@media all and (max-width: 1070px){
.gnavi_depth{background: #214f8a !important;}
.gnavi5 .gnavi_depth2{background: none !important;;}
}

@media all and (max-width:700px){
 #gnavi{margin-top: 45px;}
}






@media all and (max-width: 480px){
}






#mgnb{display: none;}