/* 메인메뉴 */
#category-wrap{width:100%; clear:both; background-attachment:scroll; position:relative; z-index:3}
#gnb h2{display:none;}
#gnb *{margin:0; padding:0; list-style:none;}

#gnb{border-top:1px solid #ddd; position:relative; margin:0; z-index:5; background-repeat:no-repeat; background-position:center top; width:100%; box-sizing:border-box; background-color:#FFF; padding:10px  0}
#gnb .logo{position:absolute; top:26px;}
#gnb img{border:0; width:100%}
#gnb a{ display:inline-block}
#gnb .main-wrapper{max-width:1200px; margin:0 auto;}
#gnb .main{ height:69px; background-repeat:no-repeat; background-position:center top; box-sizing:border-box; margin:0 auto; display:block}
#gnb .main li{float:left; line-height:68px; display:inline-block; text-align:center}
#gnb .main li a{display:block; width:100%; color:#333; font-size:18px; font-weight:500; margin:0; padding:0; letter-spacing:-0.5px }
#gnb .main li a:hover{color:#000; letter-spacing:-0.5px }
#gnb .main li a img{margin-top:15px;}
#gnb .mask{position:absolute; width:100%; height:200px; overflow:hidden; background-color:#FFF; z-index:5; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#ddd;}
#gnb .mask .sub-set-wrapper{max-width:1200px; min-height:200px; margin:0 auto; position:relative; background:url('../img/menu_bg.jpg') no-repeat bottom left 30px;}
#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 .sub-set ul li a{display:block; font-size:13px; color:#555; line-height:30px; padding-top:2px; padding-bottom:2px; padding-left:0; letter-spacing:0}
#gnb .sub-set ul li a:hover{color:#9b8265; letter-spacing:0px}
#gnb .mask .sub-set ul{ display:inline-block;  text-align:center}
#gnb .mask .sub-set .set1{float:left; width:134px}
#gnb .mask .sub-set .set2{float:left; width:134px}
#gnb .mask .sub-set .set3{float:left; width:134px}
#gnb .mask .sub-set .set4{float:left; width:134px}
#gnb .mask .sub-set .set5{float:left; width:134px}
#gnb .mask .sub-set .set6{float:left; width:134px}
#gnb .mask .sub-set .set7{float:left; width:134px}
#gnb .mask .sub-set .set8{float:left; width:134px}
#gnb .main .menu1{width:135px}
#gnb .main .menu2{width:135px}
#gnb .main .menu3{width:135px}
#gnb .main .menu4{width:135px}
#gnb .main .menu5{width:135px}
#gnb .main .menu6{width:135px;}
#gnb .main .menu7{width:135px;}
#gnb .main .menu8{width:135px;}

/* ------------------------------------------------------------------
   서브메뉴(2뎁스) 컬럼 정렬 고정
   - 메뉴 중간에 2뎁스가 비어있어도(예: 피부클리닉센터) 컬럼 폭이 유지되어
     다음 메뉴(커뮤니티) 2뎁스가 왼쪽으로 당겨지지 않도록 flex로 고정합니다.
------------------------------------------------------------------ */
#gnb .mask .sub-set{
  float:right;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
#gnb .mask .sub-set > ul{
  float:none;
  display:block;
  flex:0 0 134px;
  width:134px;
  text-align:center;
  min-height:1px; /* empty ul도 폭 유지 */
}
@media screen and (max-width:1200px){
    #gnb .main{ padding-right:2%}
    #gnb .sub-set{ padding-right:2%}

    #gnb .mask .sub-set .set1{width:125px}
    #gnb .mask .sub-set .set2{width:125px}
    #gnb .mask .sub-set .set3{width:125px}
    #gnb .mask .sub-set .set4{width:125px}
    #gnb .mask .sub-set .set5{width:125px}
    #gnb .mask .sub-set .set6{width:125px}
    #gnb .mask .sub-set .set7{width:125px}
    #gnb .mask .sub-set .set8{width:125px}
    #gnb .main .menu1{width:125px}
    #gnb .main .menu2{width:125px}
    #gnb .main .menu3{width:125px}
    #gnb .main .menu4{width:125px}
    #gnb .main .menu5{width:125px}
    #gnb .main .menu6{width:125px;}
    #gnb .main .menu7{width:125px;}
    #gnb .main .menu8{width:125px;}

    #gnb .mask .sub-set > ul{
      flex-basis:125px;
      width:125px;
    }
}
@media screen and (max-width:1100px){
    #gnb .main li{display:none}
    #gnb .logo{position:absolute; top:28px; left:10px}
    #gnb .mask{display:none}
}