@charset "utf-8";


header * {box-sizing: border-box;}
header{ height:130px; position:relative;}


/* 상단메뉴 */
.header_top{ font-weight: 400; background: #fff; padding-right: 3%;}
.header_top ul{display:flex;justify-content: flex-end;}
.header_top ul li > a{display: block; font-size: 14px; color: #000; line-height: 40px; padding-left:20px;}
.header_top ul li > a img{padding-right: 5px;}
.header_top ul li > a:hover,
.header_top ul li > a:focus{text-decoration: underline;}




@media all and (max-width: 767px) {
header{ height:100px;}
.header_top{ padding-right: 0%;}
.header_top ul{justify-content: center;}
.header_top ul li > a{padding:0 10px 0 12px;background: url("../images/inc/dot01.gif") left center no-repeat; }
.header_top ul li:first-of-type > a{background: none;}
.header_top ul li > a img{display: none;}
}




/* 상단 가이드 & 로고 & 상단고정 */
.sticky{ box-shadow: 1px 10px 20px rgba(0,0,0,0.1);}
#header_guide{position: fixed; width: 100%;z-index: 9999; background: #fff;}

#header_guide h1{ position: absolute; top:23px; left:10%;  z-index:889; }
#header_guide h1 > a{ display: inline-block;font-size: 30px; letter-spacing: -0.03em; line-height: 36px;}
#header_guide h1 > a > img{vertical-align:top;}
#header_guide h1 > a > em{display: inline-block; margin-left: 10px; font-weight: 900;vertical-align:top;padding-top: 3px;}

.all_menu_hide{position: absolute; right: 10%; top:32px;}

/* 모바일 전체메뉴 */
#gnavi_btn{ display:none;}

@media all and (max-width: 1520px) {
#header_guide h1 {  left:3%;}
.all_menu_hide{right: 3%; }
}


@media all and (max-width: 1280px) {
#header_guide{position: relative !important; top:0 !important;}

.all_menu_hide{display:none;}
#gnavi_btn{ display:block; z-index:9999; position:absolute; top:22px;right:3%;}
#gnavi_btn a{display: inline-block; width: 40px; height: 40px;text-align: center; line-height: 39px;background: #ffcc4d; border-radius: 5px;}
}

@media all and (max-width: 767px) {
#header_guide h1 { top:0px;left:4%;}
#header_guide h1 > a > img{width: 120px;}
#header_guide h1 > a{ font-size: 22px; line-height: 24px;}
#header_guide h1 > a > em{margin-left: 5px;}

#gnavi_btn{ top:5px;right:3%;}
#gnavi_btn a{width: 35px; height: 35px; line-height: 33px;}
#gnavi_btn a > img{ width: 20px;}


}






/*
 * 메뉴레이아웃
 *     nav 메뉴가이드
 *     #gnavibg                서브메뉴배경
 *     #gnavibox               메뉴
 *     .gnavi > a              일차메뉴
 *     .gnavi > div            각서브메뉴박스배경
 *     .gnavi > div > p        일차메뉴타이틀
 *     .gnavi > div > ul       각서브메뉴리스트
 *     .mnavi                  각이차서브메뉴리스트
 *     .mnavi > a              각이차서브메뉴명
 *     .mnavi > ul             각삼차서브메뉴리스트
 *     .snavi                  각삼차서브메뉴리스트
 *     .snavi > a              각삼차서브메뉴명
 */

 /* 메뉴 가운데 정렬 가이드 */
.head_center{ width:1400px; margin:0 auto; position:relative;}
@media all and (max-width :1420px) {
.head_center{ width:100%;}
}


navi{ position:relative; z-index:888;}

/* 대메뉴 배경이미지*/
#gnavibg{ position:absolute; left:0; top:90px; width:100%; display:none; background:#fff; border-top:1px solid #ddd;height:280px;/*풀다운메뉴높이*/  box-shadow: 1px 10px 10px rgba(0,0,0,0.3);}
#gnavibox{display: flex; justify-content: flex-end;  margin:0 calc(10% + 70px) 0 10%; }
#gnavibox > ul{display: flex;white-space: nowrap; width: 50%;justify-content: space-around; }
#gnavibox > a{height: 90px; padding: 32px 0 0 20px; }

nav {height: 90px;}

nav .gnavi{ position:relative;}
/*nav .gnavi > a{position:relative; display:block; text-align:center; padding:37px 10px 29px;font-weight: 500; text-decoration: none; font-size: 20px;}*/
nav .gnavi > a{position:relative; display:block; text-align:center; height: 90px; font-weight: 500; text-decoration: none; font-size: 20px; padding: 32px 20px 0; background-position: left 20px;}
nav .gnavi > a:hover,
nav .gnavi > a:focus{ color:#000;background: url("../images/inc/gnb_menuicon.png") center 20px no-repeat;font-weight: 700;font-size: 22px; }

nav .gnavi.on > a{ color:#000;background: url("../images/inc/gnb_menuicon.png") center 20px no-repeat;font-weight: 700;font-size: 22px; }
nav .gnavi.on > a:hover,
nav .gnavi.on > a:focus{ color:#000;}

nav .gnavi > div{ width:100%; position:absolute; display:none;}
nav .gnavi > div > ul{ padding:20px 0;}


nav .mnavi{display:block;}
nav .mnavi > a{ position: relative; display:block;font-size:16px; line-height:20px; padding:10px 0;white-space: nowrap; text-align: center; color: #555;font-weight: 400;}
nav .mnavi > a:focus,
nav .mnavi > a:hover{ color:#000; font-size: 17px;text-decoration: underline !important;font-weight: 600;}
nav .mnavi > a span{position: relative; display:inline-block; z-index:9999;}


nav .mnavi.on > a{ color:#000; font-size: 17px; text-decoration: underline !important;font-weight: 600;}
nav .mnavi.on > a:hover,
nav .mnavi.on > a:focus{ color:#000; text-decoration: underline !important;font-weight: 600;}


nav .mnavi > ul{display:none;}



@media all and (max-width: 1520px) {
#gnavibox{ margin:0 calc(3% + 70px) 0 3%; }
}

@media all and (max-width: 1280px) {
#gnavibox{ margin:0 3%; }
#gnavibg{display: none;}
#gnavibox{ display: block; width:100%; margin:85px 0 0 0; border-top: 1px solid #ddd; background: #fff; height: auto; box-shadow: 0px 10px 10px rgba(0,0,0,0.3);}
#gnavibox > ul{ width:100%; background: #fff; margin-top: 0; flex-direction: column;}
#gnavibox > a{ display: none;}

nav{ display:none; position:absolute; width:100%;}
nav .gnavi{width:100%;background:none;  margin-top:0px; border-bottom: 1px solid #eee;}
nav .gnavi:last-child{border-bottom: 2px solid #ffcc4d;}
nav .gnavi > a{ width:100%; height:auto; padding:20px 5%; color:#000; text-align:left; background:#fff url('../images/inc/menu_icon_basic.png') no-repeat calc(100% - 30px) center;}

nav .gnavi > a:hover,
nav .gnavi > a:focus{ color:#fff; background:#ffcc4d url('../images/inc/menu_icon_on.png') no-repeat calc(100% - 40px) center; }
nav .gnavi > a::before{display: none;}


nav .gnavi > a.on{ color:#fff; background:#ffcc4d url('../images/inc/menu_icon_active.png') no-repeat calc(100% - 30px) center;}
nav .gnavi > a.on:hover,
nav .gnavi > a.on:focus{ color:#fff;background:#ffcc4d url('../images/inc/menu_icon_active.png') no-repeat calc(100% - 40px) center}
nav .gnavi > a.on:before{display: none;}

nav .gnavi > div{ position:relative;padding:0; height:auto; border:none; background: #f8f8f8;}
nav .gnavi.on > div{ display:block;}
nav .gnavi > div > ul{ padding:0;}

nav .mnavi{border-top:1px solid #eee; padding: 0 5%; }
nav .mnavi:first-child{ border-top:none;}
nav .mnavi > a{text-align: left; padding: 15px 10px; display: block;}

nav .mnavi > a:hover,
nav .mnavi > a:focus{color:#000;}

nav .mnavi.on > a{ color:#000; font-weight: 500;}
nav .mnavi.on > a:hover,
nav .mnavi.on > a:focus{ color:#000;}

}

@media all and (max-width: 767px) {
#gnavibox{ margin:60px 0 0 0;}
 nav .gnavi > a{font-size: 18px;}
}