#hd{
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
}


#btn-menu .line:nth-child(1){
    
}

#btn-menu .line:nth-child(2){
    top: 50%;
}

#btn-menu .line:nth-child(3){
    top: 100%;
}

#gnb_1dul{
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.gnb_1dli{
    position: relative;
    text-align: center;
}

.gnb_2dul{
    position: absolute;
    left: 0;
    top: 90px;
    color: #fff;
    width: 200%;
    text-align: center;
    transform: translateX(-25%);
    display: none;
}

.gnb_2dul.on{
    display: block;
}

.gnb_2dul a{
    color: #fff;
}

#logo{
    width: 50px;
    position: absolute;
    left: 0;
    top: 57%;
    transform: translateY(-50%);
}

#logo.off{
}

#logo a{
    display: block;
}

#logo img{
    width: 100%;
    object-fit: cover;
}

#gnb{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9997;
    display: flex;
    padding: 50px 0 26px;
    font-size: 18px;
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
    width: 100%;
}
#gnb.trans{
    border-bottom: 1px solid #404040;
}

#gnb.trans .logo_w{
    display: none;
}

#gnb.trans .logo_b{
    display: block;
}

.logo_b{
    display: none;
}

#gnb.down #logo{
    position: fixed;
    left: 40px;
    top: 50px;
}

#gnb.down #logo.off{
    display: block;
    position: fixed;
    left: 40px;
    top: 50px;
}

#gnb.down #logo.off .logo_b{
    display: block;
}

#gnb.down #logo.off .logo_w{
    display: none;
}

#gnb.down .header-icon{
    position: fixed;
    right: 40px;
    top: 50px;
    width: 3%;
    display: flex;
    display:none
}

.header-icon{
    width: 6%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    display: none;
}

.kakao-b{
    display: none;
}

.insta-b{
    display: none;
}

#gnb.down .kakao-w{
    display: none;
}

#gnb.down .kakao-b{
    display: block;
}

#gnb.down .insta-w{
    display: none;
}

#gnb.down .insta-b{
    display: block;
}


.header-icon a{
    display: inline-block;
    width: 100%;
}

.header-icon a:first-child{
    margin-right: 20px;
}
.header-icon img{
    width: 100%;
}

.gnb_1dli>a{
    color: var(--main-color);
}

#gnb.trans .gnb_1dli>a{
    color: #000;
}

#gnb.trans .gnb_1dli .gnb_2dul a{
    color: #000;
}



.gnb_2dli{
    font-size: 12px;
    padding: 5px 0;
}

.gnb_1dli.no4 .gnb_2dli:first-child a{
    padding: 5px 0;
}

.gnb_3dli{
    padding: 5px 0;
}

.gnb_1da{
    display: block;
    padding: 0 30px;
}

.gnb_1da span{
    display: block;
}

.gnb_1da span:nth-child(1){
    line-height: 2.1;
}

.gnb_1da span:nth-child(2){
    font-size: 10px;
    text-align: center;
}

.m-logo{
    display: none;
}

.m-reserve{
    display: none;
}

.logo_m_w{
    display: none;
}
.logo_m_b{
    display: none;
}

.gnb_1dli.no5{
    display: none;
}

.gnb_1dli.no1 .gnb_2dli:last-child{
    margin-top: 15px;
}


@media screen and (max-width:1024px) {
/* 
    .gnb_1da span:nth-child(1){
        writing-mode: vertical-rl;
        margin: 0 auto;
    } */
    
    #btn-menu{
        position: fixed;
        width: 30px;
        height: 20px;
        z-index: 9999;
        right: 32px;
        top: 30px;
        transition: all 0.5s ease;
        cursor: pointer;
    }

    #btn-menu.on .line{
        background-color: #404040;
    }

    #btn-menu.on .line:nth-child(2){
        display: none;
    }

    #btn-menu.on .line:nth-child(1){
        transform: rotate(45deg);
        top: 50%;
    }

    #btn-menu.on .line:nth-child(3){
        transform: rotate(-45deg);
        top: 50%;
    }

    #btn-menu .wrapper{
        width: 100%;
        height: 100%;
    }

    #btn-menu .line{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
    }
    #hd.down #btn-menu .line{
        background-color: #404040;
    }
    #wrap.trans #btn-menu .line{
        background-color: #404040;
    }

    #logo{
        position: fixed;
        left: 15px;
        top: 35px;
        width: 45px;
        height: 45px;
    }

    #logo .logo_w{
        display: none;
    }

    #gnb.trans #logo .logo_m_w{
        display: none;
    }

    #logo .logo_b{
        display: none
    }

    #gnb.trans #logo .logo_b{
        display: none;
    }

    #gnb.trans #logo .logo_m_b{
        display: block;
    }

    #logo .logo_m_w{
        display: block;
    }

    #gnb.down #logo.off .logo_b{
        display: none;
    }

    #gnb{
        position: fixed;
        width: 100%;
        height: 85px;
        border: none;
        left: unset;
        right: 0;
        transition: all 0.5s ease;
        overflow-y: auto;
        flex-direction: column;
        padding: unset;
        border-bottom: 1px solid #eee;
    }

    #gnb.trans{
        border-bottom: 1px solid #eee;
    }

    #gnb.down{
        background: rgba(255, 255, 255, 1);
    }

    .gnb_1dul{
        overflow-y: auto;
    }

    #gnb.on #gnb_1dul{
        transform: translateX(0);
    }

    #gnb.down #logo.off{
        left: 15px;
        top: 35px;
    }

    #gnb.down #logo{
        left: 15px;
        top: 35px;
    }

    #gnb.down #logo .logo_m_w{
        display: none;
    }

    #gnb.down #logo .logo_m_b{
        display: block;
    }

    #gnb.on #logo .logo_w{
        display: none;
    }

    .gnb_2dul{
        position: unset;
        display: block;
        width: 100%;
        transform: unset;
    }

    #gnb_1dul{
        position: fixed;
        left: 0;
        top: 0px;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        border: none;
        margin-left: 0;
        background: var(--main-color);
        transform: translateX(100%);
        transition: all 0.5s ease;
        overflow-y: auto;
        z-index: 10000;
    }
    
    .gnb_1dli{
        width: calc(100%/3);
        height: 30%;
    }
    .gnb_1dli>a{
        order: 2;
    }

    #gnb_1dul a{
        color: #000;
        padding: 5px 30px;
        text-align: center;
    }
    
    .gnb_1dli>a::after{
        content: "";
        left: 0;
        top: 0;
        width: 30%;
        height: 1px;
        display: block;
        margin: 10px auto 0;
        background-color: #404040;
    }

    .gnb_1dli.no3{
        margin-top: -25%;
    }
    .gnb_1dli.no4{
        margin-top: -25%;
    }

   

    .m-logo{
        display: block;
        position: fixed;
        left: 20px;
        top: 15px;
        z-index: 15;
    }

    .m-logo.down .logo_b{
        display: block;
    }

    .m-logo.down .logo_w{
        display: none;
    }

    #gnb.down .header-icon{
        position: unset;
    }

    .header-icon{
        padding-top: 10px;
        padding-left: 58%;
    }

    .m-reserve{
        display: block;
        position: fixed;
        right: 90px;
        top: 10px;
        width: 20px;
        z-index: 9999;
    }

    .m-reserve a{
        display: block;
        width: 100%;
        color: #fff;
    }

    .m-reserve img{
        width: 50%;
        filter: brightness(0) invert(1);
    }

    #gnb.down .m-reserve .m-reserve_w{
        display: none;
    }

    #gnb.down .m-reserve .m-reserve_b{
        display: block;
    }

    .m-reserve .m-reserve-btn{
        display: flex;
        position: fixed;
        right: 140px;
        top: 25px;
        width: 50px;
        height: 30px;
        font-size: 10px;
        justify-content: center;
        align-items: center;
        background-color: #c2aca3;
        border-radius: 7px;
    }
    .m-reserve a:first-child{
        display: flex;
        position: fixed;
        right: 80px;
        top: 25px;
        width: 50px;
        height: 30px;
        font-size: 10px;
        justify-content: center;
        align-items: center;
        background-color: #86675b;
        border-radius: 7px;
    }

    .m-reserve .m-reserve-btn span{
        color: #fff;
    }
    #gnb.down .m-reserve img{
        filter: unset;
    }
    #gnb.trans .m-reserve img{
        filter: unset;
    }
   
    
}

@media screen and (max-width:768px) {
    #gnb{
        width: 100%;
    }
  
  
}

@media screen and (max-width:567px) {
    #btn-menu{
        width: 25px;
        height: 15px;
        top: 32px;
        right: 25px;
    }

    #gnb_1dul{
        padding-top: 50px;
    }

    #gnb_1dul a{
        padding: 5px 0;
    }

    .gnb_1dli{
        width: calc(100%/2);
        height: unset;
    }

    .gnb_2dul{
        width: 100%;
        transform: unset;
    }

    .gnb_1dli.no3{
        margin-top: unset;
    }
    .gnb_1dli.no4{
        margin-top: unset;
    }

    #gnb_1dul{
        align-items: unset;
    }
    .m-reserve{
        width: 15px;
        right: 70px;
        top: 15px;
    }
    .m-reserve a:first-child{
        right: 65px;
        color: #fff;
    }
    .m-reserve .m-reserve-btn{
        right: 120px;
    }

}

@media screen and (max-width: 320px) {
    .gnb_1dli{
        margin-bottom: 20px;
    }
}