#menu{
    display : none;
    position : fixed;
    top : 0;
    left : 0;
    width : 100vw;
    height : 100vh;
    z-index : 22;
}

#menu:before{
    content : '';
    display : block;
    position  :absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;    
    background-color : rgba(0,0,0,0.7);
}
#menu .menu-wrap-box{
    width: 100%;
    max-width: 1016px;
    height: 100vh;
    position: relative;
    margin: 0 auto;
}
#menu .menu-wrap{
    background-color : #fff;
    width : 446px;
    height : 100%;
    position : absolute;
    top : 0;
    right : 0;
    padding : 18px 20px 30px;
}

#menu .menu-wrap .btn-close-wrap{
    /*text-align: right;*/
    font-size: 20px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 10px;
}

#menu .menu-wrap .btn-close-wrap .btn-close{
    margin-bottom : 10px;
}

#menu .menu-wrap .btn-close-wrap .icon.close{
    width : 24px;
    height : 24px;
}

#menu .menu-wrap .title{
    font-size : 24px;
    font-weight: 500;
}
#menu .menu-wrap .title .detail-box{
    display: flex;
    gap: 16px;
    padding: 10px 0;
}
#menu .menu-wrap .title .detail-box span div:nth-child(1){
    font-size: 12px;
    font-weight: 300;
    color: #767676;
}
#menu .menu-wrap .title > span{
    margin-top : 20px;
    /*margin-bottom : 20px;*/
    font-size : 16px;
    line-height: 20px;
    display : block;
}

#menu .menu-wrap .btn-wrap{
    display : flex;
    align-items: center;
    justify-content: center;
    gap : 12px;
    margin-bottom : 40px;
}

#menu .menu-wrap .btn-wrap button{
    width : 100%;
    height : 44px;
    border-radius : 4px;
    font-size : 16px;
}

#menu .menu-wrap .btn-wrap .btn-login{
    border : 1px solid rgba(0,0,0,0.12);
}

#menu .menu-wrap .btn-wrap .btn-join{
    background-color: #3a4c40;
    color : #fff;
}

#menu .menu-wrap .my-skin-type{
    margin-bottom: 36px;
}

#menu .menu-wrap .my-skin-type .title{
    font-size : 16px;
    margin-bottom : 10px;
}

#menu .menu-wrap .my-skin-type .skin-type > ul{
    display : grid;
    grid-template-columns: repeat(5,1fr);
    background-color : #f7f7f7;
    height : 60px;
    border: 1px solid #efefef;
    border-radius: 4px;
}

#menu .menu-wrap .my-skin-type .skin-type > ul > li{
    position : relative;
    height : 100%;
    display : flex;
    align-items: center;
    justify-content: center;
    font-size : 40px;
    font-weight : 700;
}

#menu .menu-wrap .my-skin-type .skin-type > ul > li:not(:last-child):after{
    content : '';
    display : block;
    width : 1px;
    height : 50px;
    background-color : #efefef;
    position : absolute;
    top: 50%;
    right : 0;
    transform : translateY(-50%);
}

#menu .menu-wrap .nav-wrap > nav > ul > li {
    height: 44px;
    padding: 8px 16px;
    /*margin-bottom : 8px;*/
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    border: 1px solid transparent;
}
#menu .menu-wrap .nav-wrap > nav > ul > li:hover{
    background-color: #f7f7f7;
    border: 1px solid #efefef;
}

#menu .menu-wrap .nav-wrap > nav > ul > li > button{
    display : flex;
    align-items: center;
    justify-content: space-between;
    width : 100%;
    font-size : 16px;
}

#menu .menu-wrap .icon.menu-nav-right{
    width : 20px;
    height :20px;
    /*margin-top : -2px;*/
}


@media screen and (max-width : 768px){
    
    #menu .menu-wrap{
        right : 0;
        width: 271px;
        padding : 10px 28px 30px 20px;
    }

    #menu .menu-wrap .btn-close-wrap{
        /*padding: 0 8px;*/
        font-size: 16px;
    }

    #menu .menu-wrap .title{
        font-size : 20px;
    }

    #menu .menu-wrap .title > span{
        margin-top : 16px;
        font-size : 14px;
        /*margin-bottom : 24px;*/
    }
    
    #menu .menu-wrap .btn-wrap{
        gap : 10px;
    }

    #menu .menu-wrap .my-skin-type{
        margin-bottom : 24px;
    }

    #menu .menu-wrap .my-skin-type .title{
        font-size : 14px;
    }

    #menu .menu-wrap .my-skin-type .skin-type > ul{
        height : 50px;
    }

    #menu .menu-wrap .my-skin-type .skin-type > ul > li{
        font-size : 20px;
    }

    #menu .menu-wrap .my-skin-type .skin-type > ul > li:not(:last-child):after{
        height : 40px;
    }

    #menu .menu-wrap .nav-wrap > nav > ul > li > button{
        font-size : 14px;
    }
    
}
@media screen and (max-width: 480px){
    #menu .menu-wrap .btn-wrap{
        margin-bottom: 24px;
    }
}