.menu-box {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--global-primary-light-color);
}

.layui-nav {
    display: flex;
    background: var(--global-primary-light-color);
    color: #999999 !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.menu-box .layui-nav .layui-this a{
    color: #333333 !important;
}

.menu-box .layui-nav .layui-nav-item a {
    color: #333333 !important;
}


.layui-nav .layui-this {
    background: var(--global-primary-color);
    color: #333333;
}

.layui-nav .layui-this:after, .layui-nav-bar {
    background-color: var(--global-primary-color);
}

.layui-nav .layui-nav-item a:hover {
    color: #333333 !important;
    background: linear-gradient(rgba(255,255,255,.2) 0 0), linear-gradient(var(--global-primary-color) 0 0);
}

.layui-nav .layui-this a:hover {
    color: #333333 !important;
    background: var(--global-primary-color) !important;
}

.layui-nav-bar {
    display: none;
}

.layui-nav-tree, .layui-nav-tree .layui-nav-child {
    background: #ffffff;
}

.layui-nav-tree .layui-nav-item > a, .layui-nav-tree .layui-nav-child a {
    color: #666666 !important;
}


.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
    color: var(--global-primary-light-color) !important;
    background-color: #ffffff !important;
}

#burger-menu-btn {
    background-color: var(--global-primary-color);
    color: #ffffff;
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 999;
    display: none;
    padding: 0 10px;
}

#burger-menu-btn i {
    font-size: 25px;
}

#burger-menu-box-dom {
    display: none;
}

.layui-nav-tree {
    flex-wrap: wrap;
}


@media (max-width: 600px) {
    .menu-box {
        display: none;
    }

    #burger-menu-btn {
        display: block;
    }
}