/* 메인메뉴 */
#category-wrap{width:100%;clear:both;position:relative;z-index:3}
#gnb h2 {display:none;}
#gnb * {margin: 0;padding: 0;list-style: none;}
#gnb {
    position: relative;
    margin: 0;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s;
}
#gnb .logo {position: absolute; top:20px; }
#gnb .logo img {border: 0; width:180px; height:auto; max-height:50px;}
#gnb a{ display:inline-block}

#gnb .main-wrapper {margin:0 auto; height:89px; max-width:1200px; position: relative;}
#gnb .main{ height:68px; box-sizing:border-box; margin:0 auto; display:block; max-width:1200px;}
#gnb .main > li{float:left; line-height:89px; display:inline-block; text-align:center; position: relative;}
#gnb .main > li > a{display:block; width:100%; color:#333; font-size:18px; font-weight:500; margin:0; padding:0 30px; letter-spacing:-0.5px;}

/* 메인페이지에서만 투명 네비게이션 적용 */
body.main-page #gnb {
    background-color: transparent;
}
body.main-page #gnb .main > li > a{color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
body.main-page.scrolled #gnb { background-color:#fff;}
body.main-page.scrolled #gnb .main > li > a{color:#333; text-shadow: none;}

/* 메인페이지 hover 효과 */
body.main-page #gnb .main > li > a:hover { color:#fff; opacity: 0.8;}
body.main-page #header_wrap.scrolled #gnb .main > li > a:hover { color:#0099ff; }

/* 서브메뉴 스타일 */
#gnb .main > li > ul {
    display: none;
}

#gnb .main > li:not(.no-sub) > ul {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 0;
    border-radius: 4px;
    z-index: 100;
}

/* 서브메뉴가 있는 메뉴에만 hover 효과 적용 */
#gnb .main > li:not(.no-sub):hover > ul {
    display: block;
}

#gnb .main > li > ul > li {
    line-height: 40px;
    text-align: left;
    white-space: nowrap;
}

#gnb .main > li > ul > li a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    color: #555;
    transition: all 0.3s ease;
}

#gnb .main > li > ul > li a:hover {
    background-color: #0099ff;
    color: #fff;
}

/* 반응형 스타일 */
@media screen and (max-width:1200px) {
    #gnb .main { padding-right:2%; }
    #gnb .main > li > a { padding: 0 20px; }
}

@media screen and (max-width:992px) {
    #gnb .main > li > a { font-size: 16px; padding: 0 15px; }
}

@media screen and (max-width:768px) {
    #gnb .main-wrapper { height: auto; }
    #gnb .main { display: none; }
    #gnb .main > li { float: none; width: 100%; }
    #gnb .main > li > ul {
        position: static;
        width: 100%;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
}

/* 메뉴 크기 설정 */
#gnb .main .menu1 { width:157px}
#gnb .main .menu2 { width:157px}
#gnb .main .menu3 { width:157px}
#gnb .main .menu4 { width:157px}
#gnb .main .menu5 { width:157px}

/* 모바일 스타일 */
@media screen and (max-width: 1023px) {
    #gnb {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    body.main-page #gnb {
        background: transparent;
    }

    #gnb .main li {
        display: none;
    }

    #gnb .logo {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }

    #gnb .main-wrapper {
        height: 80px;
    }

    /* 모바일 메뉴 버튼 숨김 */
    #header .header-inner .menu {
        display: none !important;
    }
}

/* 스크롤 시 메뉴 스타일 */
body.scrolled #gnb {
    position: fixed;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.gnb_bg {width:100%;position:absolute;top:88px; left:0; display: none;}

#gnb .main > li > ul > li {line-height:30px;}
#gnb .main > li > ul > li a { font-size:14px; letter-spacing:-0.2px; color:#555}

#gnb .main li a img {margin-top: 15px;}
#gnb .main li.main_select {}
#gnb .mask {display: none;}

#gnb .main-wrapper:hover .gnb_bg {	border-top:1px solid #ddd;}

#gnb .main-wrapper .navi_bg  {background-image: url(../img/menubar_bg.png); background-repeat:no-repeat; background-position:bottom left;  width:288px; height:224px; float:left; margin-top:178px;}

#gnb .main-wrapper .gnb_bg {border-top:1px solid #ddd;}

#gnb .sub-set{ float:right; box-sizing:border-box;  margin:10px auto 0}
#gnb .sub-set ul {float: left;}
#gnb .sub-set ul li{height:26px; display:block; text-align:center;}

/* 서브메뉴 스타일 */
#gnb .box_category_fix{position:fixed;left:0;top:0;z-index:50;height:54px;padding-top:0;background-color:#FFF}
#gnb .box_sub{overflow:hidden;position:absolute;left:0;top:82px;z-index:99;width:100%;height:0;background-color:#26ace2;min-width:1200px}
#gnb .box_sub .box {width:1200px; height:68px; margin:0 auto; text-align:center;}
#gnb .box_sub .box ul li {display:inline; padding:0 10px;}
#gnb .box_sub .box ul li a {color:#fff; line-height:68px; font-size:21px;}
#gnb .box_sub .box ul li a.over {color:#fff77e; font-weight:bold;}
#gnb .box_sub .box ul li a:hover {color: #fff77e;}
#gnb .box_sub .box2 ul li {padding:0 12px;}
#gnb .box_sub_all{overflow:hidden;position:absolute;left:0;top:82px;z-index:99;width:100%;height:0;min-width:1200px;background:#fff}
#gnb .box_sub_all ul {overflow:hidden; width:1200px; margin:40px auto;}
#gnb .box_sub_all ul .box{float:left;width:156px;min-height:250px;padding-left:18px;border-left:1px solid #ddd;vertical-align:top}
#gnb .box_sub_all ul .box h2 {padding-bottom:20px; font-size:20px;}
#gnb .box_sub_all ul .box ul {width:100%; margin:0;}
#gnb .box_sub_all ul .box ul li {padding:5px 0; border:0;}
#gnb .box_sub_all ul .box ul li a {display: block;font-size: 17px;color: #666;}

/* 모바일 메뉴 스타일 */
@media (max-width: 1023px) {
    #gnb {
        background-color: #fff !important;
    }
    
    body.main-page #gnb,
    body.main-page.scrolled #gnb {
        background-color: #fff !important;
    }

    #gnb .main > li > a,
    body.main-page #gnb .main > li > a,
    body.main-page.scrolled #gnb .main > li > a {
        color: #333 !important;
        text-shadow: none !important;
    }
}

/* 스크롤 시 메뉴 스타일 */
body.scrolled #gnb,
body.main-page.scrolled #gnb {
    background-color: #fff !important;
}

body.scrolled #gnb .main > li > a,
body.main-page.scrolled #gnb .main > li > a {
    color: #333 !important;
}