@charset "utf-8";

/* 로고와 대메뉴 */
header{ height:130px; position:relative; box-sizing: border-box;}
header h1{ position:absolute; top:40px;z-index:9999;}
header h1 > a{ width: 370px; height:38px; display: inline-block;background: url( "/images/point/inc/logo.png") left center no-repeat; }
.header_guide{ margin: 0 5%;}


/* gnb_top */
.all_menu{position:absolute; top:40px; right:90px; display:inline-block; font-size:0px;z-index:9999;}
.all_menu a{display: inline-block; width: 50px; height: 50px; background: #f6f6f6; text-align: center; line-height: 50px; border-radius:100px; margin: 0 5px; position: relative;}
.all_menu a:hover,
.all_menu a:focus{ background-color:#fff6ce;}

.all_menu a.logout {background-color:#11cf86;}
.all_menu a.logout i { position: absolute; top:-15px; width: 50px; display: inline-block; background: #fff; height: 20px; z-index: 9999; left:0; font-size: 11px; border:1px solid #11cf86; line-height: 20px; border-radius:50px; overflow: hidden;}

.all_menu a.tip i { position: absolute; top:-15px; width: 56px; display: inline-block; background: #fff; height: 20px; z-index: 9999; left:-3px; font-size: 11px; border:1px solid #eee; line-height: 20px; border-radius:50px; overflow: hidden;}


.gimje_icon {position:absolute; top:40px; right:0; display:inline-block; font-size:0px;z-index:9999;}
.gimje_icon a { width: 75px; height: 50px; background: #f6f6f6 url( "/images/point/inc/icon_gimje.png") center center no-repeat; display: inline-block; border-radius: 50px 0 0 50px;}



/* 메인메뉴모바일버튼 */
#gnavi_btn{ display:none; z-index:9999; position:absolute; top:40px;}
#gnavi_btn a{display: inline-block;  width: 50px; height: 50px; background: #f6f6f6; text-align: center; line-height: 50px; border-radius:100px;}



@media all and (max-width: 1420px) {
header{ height:100px;}
header h1{  top:30px}
header h1 > a{ width: 300px; height:31px; background-size: 300px;}

.all_menu{top:25px; right:145px;}
.all_menu .all_menu_hide{display:none;}
#gnavi_btn{ display:block; right:90px; top:25px;}
.gimje_icon {top:25px;}
}



@media all and (max-width: 768px) {
header{ height:80px;}
header h1{top:18px;}
header h1 > a{ background-size: 122px;  width: 122px; height:40px;background: url( "/images/point/inc/logo_mobile.png") left center no-repeat; }


.all_menu {top:20px; right:calc(5% + 45px);}
.all_menu a{ width: 40px; height: 40px; line-height: 40px}
.all_menu a > img{ width: 20px;}
.all_menu a.logout i { width: 42px; height: 16px;font-size: 10px; line-height: 16px; left: -2px;  top:-10px;}

.gimje_icon {  display: none;}

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



/*
 * 메뉴레이아웃
 *     #gnavi                  메뉴가이드
 *     #gnavibg                서브메뉴배경
 *     #gnavibox               메뉴
 *     .gnavi > a              일차메뉴
 *     .gnavi > div            각서브메뉴박스배경
 *     .gnavi > div > p        일차메뉴타이틀
 *     .gnavi > div > ul       각서브메뉴리스트
 *     .mnavi                  각이차서브메뉴리스트
 *     .mnavi > a              각이차서브메뉴명
 *     .mnavi > ul             각삼차서브메뉴리스트
 *     .snavi                  각삼차서브메뉴리스트
 *     .snavi > a              각삼차서브메뉴명
 */
 
#gnavi{ position:relative; z-index:999; }

/* 대메뉴 배경이미지*/
#gnavibg{ margin:0; padding:0; position:absolute; left:0; top:128px; width:100%; display:none;}
#gnavibg{  background:#fdffe2 url("/images/point/inc/menu_back01.png")left bottom no-repeat;background-size: 580px;}
#gnavibg{ height:210px;/*풀다운메뉴높이*/box-shadow:0px 10px 10px rgba(0,0,0,0.15);}
#gnavibg > div{height:210px;/*풀다운메뉴높이*/}

#gnavibg p{ display: inline-block; width: 300px; font-size: 19px; color: #000; padding-top: 50px; letter-spacing: -0.2px; word-break: keep-all; font-weight: 300; margin-left: 130px;}
#gnavibg p > em{ display: block; color: #fb7800;font-weight: 300; }
#gnavibg p > em > b{ font-weight: 500;}
#gnavibg p > em > i{ font-weight: 300;font-size: 16px;}

#gnavibox{ width:calc(85% - 400px); margin-left: 400px;}


#gnavi *{ box-sizing: border-box;}
#gnavibox > ul{display: flex;}
#gnavi .gnavi{width:25%; position:relative; margin-top:30px;}
#gnavi .gnavi > a{position:relative; display:block; text-align:center; padding:25px 0 45px 0; font-size:20px; font-weight:500;text-decoration: none;}
#gnavi .gnavi > a:hover,
#gnavi .gnavi > a:focus{ color:#00a272; font-weight:700; background: url("/images/point/inc/menu_on.png")center top no-repeat;font-size:21px;}
#gnavi .gnavi.on > a{ color:#00a272; font-weight: 700;background: url("/images/point/inc/menu_on.png")center top no-repeat;}
#gnavi .gnavi.on > a:hover,
#gnavi .gnavi.on > a:focus{ color:#00a272;background: url("/images/point/inc/menu_on.png")center top no-repeat;}

#gnavi .gnavi > div{ width:100%; position:absolute; display:none;box-sizing:border-box;}
#gnavi .gnavi > div > ul{ padding:20px 0; flex-direction: column;}


#gnavi .mnavi{display:block;}

#gnavi .mnavi > a{ position: relative; display:block;font-size:17px; line-height:20px; padding:10px 0;white-space: nowrap; text-align: center; color: #333;}
#gnavi .mnavi > a:focus, #gnavi .mnavi > a:hover{ color:#00a364; font-size: 18px;}
#gnavi .mnavi > a span{position: relative; display:inline-block; z-index:9999 !important;}
#gnavi .mnavi.on > a{ color:#00a364;font-weight:500;}
#gnavi .mnavi.on > a:hover{ color:#00a364;font-weight:500;}

@media all and (max-width: 1700px) {
#gnavibg{ background-size: 520px;}
#gnavibg p{ margin-left: 120px;}
}
@media all and (max-width: 1600px) {
#gnavi .gnavi{width:17%; }
#gnavibox{ width:calc(90% - 480px); margin-left: 480px;}
#gnavibg{ background-size: 480px;}
#gnavibg p{ margin-left: 100px;font-size: 18px;}
}



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

#gnavibg{ display:none;}

#gnavi{ display:none; margin-top:100px;  position:absolute; width:100%; padding-left: 0;}

#gnavibox{ width:100%; margin-left: 0; border-top: 2px solid #00a272;}
 
#gnavibox > ul{flex-direction: column;  width:100%; background: #fff;border-bottom: 2px solid #00a272;; }

#gnavi .gnavi{width:100%;background:none;  margin-top: 00px; border-bottom: 1px solid #eee;}
#gnavi .gnavi > a{ width:100%; height:auto; padding:20px 0 20px 5%; color:#000; text-align:left; font-size:18px; background:url('/images/point/inc/icon_check01.png') no-repeat 95% center;}
#gnavi .gnavi > a:hover,
#gnavi .gnavi > a:focus{ color:#fff; background:#00a272 url('/images/point/inc/icon_check02.png') no-repeat 95% center; }
#gnavi .gnavi.on > a{ color:#fff; background:#00a272 url('/images/point/inc/icon_check02.png') no-repeat 95% center;}
#gnavi .gnavi.on > a:hover,
#gnavi .gnavi.on > a:focus{ color:#fff;background:#00a272 url('/images/point/inc/icon_check02.png') no-repeat 95% center;}

#gnavi .gnavi > div{ position:relative; width:100%; padding:0; height:auto; border:none; background: #fffae3;}
#gnavi .gnavi.on > div{ display:block;}
#gnavi .gnavi > div > ul{ padding:0; list-style:none;}

#gnavi .mnavi{border-top:1px solid #f4ecc6; padding: 0 5%}
#gnavi .mnavi:first-child{ border-top:none;}
#gnavi .mnavi > a{ background:url("/images/point/inc/point02.png") left center no-repeat; font-size: 16px;text-align: left; padding: 20px 0 20px 10px; display: block;}
#gnavi .mnavi > a:hover,
#gnavi .mnavi > a:focus{color:#00a272;}
#gnavi .mnavi.on > a{ color:#00a272;}
#gnavi .mnavi.on > a:hover,
#gnavi .mnavi.on > a:focus{ color:#00a272;}
}


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