.home-content{
    background-color: #f7f7f7;
    padding: 40px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.home-page{
    height: 100%;
    width: 100%;
    border: solid gray 4px;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    /*overflow: hidden;*/
}
.userInfo{
    position: absolute;
    left: 8px;
    top: 8px;
}
.btn-setting{
    border: solid gray 4px;
    position: absolute;
    top: -4px;
    right: -4px;
    height: 58px;
    width: 58px;
}
.btn-logout{
    border: solid gray 4px;
    position: absolute;
    bottom: -4px;
    left: -4px;
    height: 58px;
    width: 58px;
}
.varsion{
    position: absolute;
    right: 8px;
    bottom: 8px;
}
.memu-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*flex: 1;*/
    height:100%;
    padding: 80px;
    box-sizing: border-box;
    
    transition:all .3s ease-in-out;
}
.memu-content.sub-menu-show{
    padding: 0 80px;
    /*flex: 0 0 150px;*/
    height:150px;
    
    transform: scale(0.6,0.6);
}
.sub-memu-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: flex-start;
    align-items: flex-start;
    max-width: 820px;
    box-sizing: border-box;
    overflow: auto;
    
    /*flex: 0 0 0;*/
    height:0px;
    transition:height .3s ease-in-out;
    align-self: center;
}

.memu-content .menu-item, .sub-memu-content .menu-item{
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid gray 4px;
    position: relative;
    box-shadow: 0px 12px 8px -8px #9E9E9E;
    margin: 40px;
    box-sizing: border-box;
}
.memu-content .menu-item.is-select{
    box-shadow: none;
}
.sub-memu-content .menu-item{
    margin: 0px 18px;
}
.memu-content .menu-item .menu-icon, .sub-memu-content .menu-item .menu-icon{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top:15%;
    left:25%;
    height: 50%;
    width: 50%;
}
.memu-content .menu-item .menu-title, .sub-memu-content .menu-item .menu-title{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    padding: 24px 0;
    box-sizing: border-box;
}
.sub-memu-content .menu-item .menu-title{
    position:static;
}

.sub-memu-content.sub-menu-show{
    /*flex: 0 0 450px;*/
    height:450px;
}
.memu-content.sub-menu-show{
    
}