#hd_navBox {margin: 0; position:relative}
#hd_navBox .inner{display: flex;align-items: center; justify-content: center;}
#hd_navBox .gnb{text-align: right;}
#hd_navBox .nav_btn{position:absolute;right:20px;top:20px;display:none;}

#hd_navBox .nav_btn div { width: 25px;height: 2px;background-color:#000;margin: 6px 0px;position: relative;transition:all .8s ease;}
#hd_navBox .nav_btn.lijo div{position:absolute;transition:all .8s ease;}
#hd_navBox .nav_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;}
#hd_navBox .nav_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;}
#hd_navBox .nav_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;}
#hd_navBox .nav_list ul.gnb{margin-bottom:0px;padding-left:0px;display: flex;}
#hd_navBox .nav_list ul.gnb li{margin-bottom:0px;color:#000;text-align: center;position: relative;}
#hd_navBox .nav_list ul.gnb li a {box-sizing: border-box;display:block;transition:.8s ease;text-transform:uppercase; font-size: 1.2em;}
#hd_navBox .nav_list ul.gnb > li > a {padding: 20px 30px;}
#hd_navBox .nav_list ul.gnb li ul.sub{position:absolute;padding-left:0px;opacity:0;visibility: hidden;padding-top:10px;z-index: 3;width: 100%}
#hd_navBox .nav_list ul.gnb li ul.sub li {display: block;position: relative;}
#hd_navBox .nav_list ul.gnb li ul.sub li a{padding:10px;}


@media(min-width:767px){
    #hd_navBox .nav_list ul.gnb:hover li ul.sub{visibility:visible;opacity:1;transform:translateY(0px);} 
    #hd_navBox .nav_list ul.gnb li:hover{display:inline-block;margin-bottom:0px;}
    #hd_navBox.open .hd_bg{position: absolute;width: 100%;background: #fff;z-index: 1;transition: all .3s;border-top: 1px solid #dcdcdc}
    #hd_navBox .nav_list ul.gnb li ul.sub li a{text-align: center}
    #hd_navBox .nav_list .active  {position: relative}
    #hd_navBox .nav_list .active:hover::after{content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;left: 0;bottom: 0}
    #hd_navBox .nav_list ul.gnb li ul.sub{display: block !important}
}
   
@media(max-width:767px){
   #hd_navBox{position: relative;position: fixed;width: 100%;top: 0px;left: 0;padding: 33px 0}
   #hd_navBox .nav_btn{display:block;top:50%;transform: translateY(-50%)}
   #hd_navBox .nav_btn.lijo{top: 30%}
   #hd_navBox .nav_list ul.gnb{position: absolute;top: 65px;transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block}
   #hd_navBox .nav_list ul.gnb >li{font-size: 1.2em;}
   #hd_navBox .nav_list ul.gnb li a{text-align: left; }
   .sb_moreBtn{position:relative;}
    .sb_moreBtn::after {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        background-image: url(../img/fac_i1.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    #hd_navBox .nav_list ul.gnb > li > a{padding: 10px 20px}
   #hd_navBox .nav_list ul.gnb.surya {transform: translateX(0%);}
   #hd_navBox .nav_list ul.gnb li ul.sub{opacity: 1;visibility: visible;display:none;position:relative;padding-top:0px;width:100%;transition:0s;transform: translateY(0px);padding: 0 20px;        background: #f2f2f2;}
   #hd_navBox .nav_list ul.gnb li ul.sub::after{display:none;}
   .hd_bg{display: none !important}
}