@charset "utf-8";

.gnb_wrap{position: absolute; right:15px;}

#gnb {display: block; overflow-y: auto; position: fixed; z-index: 10000; left: -100%; top: 0; width: 100%; height: 100%; background-color: #d0112b;}
.mobile_gnb_logo {margin: 50px 0px; text-align: center; font-size: 30px; font-weight: bold; color: #fff;}
.gnb_containor > li {font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; font-weight:500; letter-spacing:-0.045em; width: 100%; text-align: center; position: relative; color: #fff;}
.gnb_containor > li:first-child {margin-left:0;}
.gnb_containor > li:last-child {margin-right:0;}
.gnb_containor > li > a{display:block; padding: 25px 0px; border-bottom: 1px solid #fff;}
.gnb_containor > li:first-child > a{border-top: 1px solid #fff;}
.gnb_containor > li > ul {height: 0; overflow: hidden; background: url("../img/gnb_arrow.png") no-repeat center 20px;}
.gnb_containor > li > ul li {font-size:12px; font-size:1.2rem; line-height: 18px; line-height:1.8rem; font-weight: 400; letter-spacing: -0.025em; border-bottom: 1px solid #d0112b;}
/*.gnb_containor > li > ul li:first-child {border-top: 1px solid #d0112b;}*/
.gnb_containor > li > ul li a {display: block; box-sizing: border-box; padding: 12px 22px; color: #d0112b; background-color: #d0112b;}
.gnb_containor > li > ul li a:hover {color: #fff; background-color: #ff8e8e;}
.gnb_containor > li:hover > ul { height: auto; display: block; }
.gnb_containor > li:hover > ul a {background-color: #fff;}

.gnb_wrap .gnb_icon{cursor: pointer;}
.gnb_wrap.active .gnb_icon{display:none;}
.gnb_wrap .gnb_close_btn{position: fixed; top:20px; right:20px; cursor: pointer; z-index: 10001;}

/* 스크립트 */
/* gnb > li > a 에 active 시 미리 gnb > li > a > ul의 높이 + gnb > li의높이(22) 를 더해서 gnb_wrap에 height 부여! */


/* gnb_icon 누를 시 gnb_wrap에 active 부여 */
@media all and (min-width: 992px){
    #gnb {display: inline-block; overflow-y: visible; position: relative; left: inherit; width: auto; background-color: transparent;}
    /* 여기부터 원본 */
    .gnb_containor > li {float:left; font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; font-weight:500; letter-spacing:-0.045em; /*margin-left:30px; margin-right:30px;*/ width: 130px; text-align: center; position: relative;}
    .gnb_containor > li:first-child {margin-left:0;}
    .gnb_containor > li:last-child {margin-right:0;}
    .gnb_containor > li > a{display:block; color:#000; padding: 0; border-bottom: none; border-top: none;}
    .gnb_containor > li:first-child > a{border-top: none;}
    .gnb_containor > li > ul { position: absolute; left: -31px; width: 197px; text-align: left; padding-top:47px; display:none; background: url("../img/gnb_arrow.png") no-repeat center 20px;}
    .gnb_containor > li > ul li {font-size:12px; font-size:1.2rem; line-height: 18px; line-height:1.8rem; font-weight: 400; letter-spacing: -0.025em; border-top: 1px solid #d52941; border-bottom: none;}
    /*.gnb_containor > li > ul li:first-child {border-top: none;}*/
    .gnb_containor > li > ul li a {display: block; box-sizing: border-box; padding: 12px 22px; color: #fff; background-color: #d0112b;}
    .gnb_containor > li > ul li a:hover {color: #d0112b; background-color: #fff;}
    .gnb_containor > li:hover > ul { height: auto; display: block; }
    .gnb_containor > li:hover > ul a { background-color: #d0112b;}
}