.mobile-container {
            max-width: 420px;
            margin: 0 auto;
/*          background: #f5f6fa;*/
            min-height: 100vh;
            position: relative;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }


 

.mn-bottom-nav {
    position: fixed;
    bottom: 0;

    width: 100%;
    max-width: 420px;

    height: 64px;

    left: 50%;
    transform: translateX(-50%);

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff;
    border-top: 1px solid #d6d6d6;

    box-sizing: border-box;
}

.mn-bottom-nav .mn-nav-item{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    height:100%;

    color:#666;
    text-decoration:none;

    transition:.2s;
}

.mn-bottom-nav .mn-nav-item i{
    font-size:20px;
    line-height:1;
}

.mn-bottom-nav .mn-nav-item span{
    font-size:11px;
    margin-top:3px;
    font-weight:500;
}

.mn-bottom-nav .mn-nav-item:hover{
    color:#000;
}

.mn-bottom-nav .mn-nav-item.active{
    color:#000;
}

.mn-bottom-nav .mn-nav-item:focus{
    outline:none;
}