.nl-foot-icon,.nl-foot-name{
    text-align: center;
    color: rgba(38, 38, 38, 0.6);
}
.nl-foot-icon{
    line-height: 32px;
}
.nl-foot-icon i{
    font-size: 0.18rem;
}
.nl-foot-icon div{
    height: 20px;
    margin:8px auto 0px auto;
    background-size: auto 100%;
}
.footer-home{
    width: 25px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: 0 0;
}
.footer-train{
    width: 18px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -76px 0;
}
.footer-match{
    width: 18px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -144px 0;
}
.footer-kaoji{
    width: 16px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -211px 0;
}
.footer-user{
    width: 17px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -275px 0;
}
.footer-le{
    width: 20px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -403px 0;
}
.footer-xin{
    width: 23px;
    background:url(./image/footer/footer_icon2.png) no-repeat;
    background-position: -336px 0;
}

.active .nl-foot-icon .footer-home{
    width: 22px;
    background-position: -38px 0;
}
.active .nl-foot-icon .footer-train{
    background-position: -110px 0;
}
.active .nl-foot-icon .footer-match{
    background-position: -177px 0;
}
.active .nl-foot-icon .footer-kaoji{
    width: 17px;
    background-position: -243px 0;
}
.active .nl-foot-icon .footer-user{
    width: 16px;
    background-position: -307px 0;
}
.active .nl-foot-icon .footer-le{
    width: 20px;
    background-position: -434px 0;
}
.active .nl-foot-icon .footer-xin{
    width: 23px;
    background-position: -370px 0;
}
.footer-home1{
    width: 41px;
    height: 41px;
    border-radius: 50%;
    overflow: hidden;
    margin:4px auto 0;
    background:url(./image/footer/footer_icon_roket.jpg) no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    transition: background-position .2s;
    -moz-transition: background-position .2s;
    -webkit-transition: background-position .2s;
    -o-transition: background-position .2s;
}
.footer-home1.roket{
    background-position: 0 -37px;
}


.footer-homes{
    width: 25px;
    background:url(./image/footer/homes2.png) no-repeat;
    background-size: auto 100% !important;
    background-position: 2px 0;
}
.active .footer-homes,
.nl-foot-item:active .footer-homes{
    background:url(./image/footer/homes1.png) no-repeat;
    background-size: auto 100% !important;
    background-position: 1px 0;
}



.footer-jinbang{
    width: 25px;
    background:url(./image/footer/footer_icon3.png) no-repeat;
    background-size: auto 41px !important;
    background-position: -73px -11px;
}
.active .footer-jinbang,
.nl-foot-item:active .footer-jinbang{
    background-position: -101px -11px;
}
.footer-fudaoshi{
    width: 25px;
    background:url(./image/footer/footer_icon3.png) no-repeat;
    background-size: auto 41px !important;
    background-position: -128.3px -11px;
}
.footer-club{
    width: 28px;
    background:url(./image/footer/club_icon1.png) no-repeat;
}
.footer-club-active{
    width: 28px;
    background:url(./image/footer/club_icon2.png) no-repeat;
}
.active .footer-fudaoshi,
.nl-foot-item:active .footer-fudaoshi{
    background-position:-157px -11px;
}
.footer-xiaoxi{
    position: relative;
    width: 25px;
    background:url(./image/footer/footer_icon3.png) no-repeat;
    background-size: auto 37px !important;
    background-position: -165px -8px;
}
.hasDot:after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: red;
    right: -4px;
    top: -4px;
    border-radius: 50%;
}
.active .footer-xiaoxi,
.nl-foot-item:active .footer-xiaoxi{
    background-size: auto 41px !important;
    background-position: -213px -11px;
}
.footer-user1{
    width: 25px;
    background:url(./image/footer/footer_icon3.png) no-repeat;
    background-size: auto 41px !important;
    background-position: -241px -11px;
}
.active .footer-user1,
.nl-foot-item:active .footer-user1{
    background-position: -270px -11px;
}
.nl-foot-name{
    font-size: 12px;
    line-height: 19px;
    color: #262626;
}
.nl-foot-item:active .nl-foot-name{
    color: #2484FE;
}
.nl-foot-item:active .nl-foot-icon .footer-home{
    width: 22px;
    background-position: -38px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-train{
    background-position: -110px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-match{
    background-position: -177px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-kaoji{
    width: 17px;
    background-position: -243px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-user{
    width: 16px;
    background-position: -307px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-le{
    width: 20px;
    background-position: -434px 0;
}
.nl-foot-item:active .nl-foot-icon .footer-xin{
    width: 23px;
    background-position: -370px 0;
}
.nl-foot-item.active .nl-foot-icon,
.nl-foot-item.active .nl-foot-name
{
    color: #2484FE;
}
.dis_none{
    display: none!important;
}
/* @media screen and (min-width: 1200px){
    .nl-foot-nav{
        display: none;
    }
} */


    .nl-foot-nav {
        position: fixed;
        bottom: 0;
        z-index: 900;
        width: 100%;
        height: 50px;
        background: #fff;
        border-top: 1px solid #eeeeee;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .nl-foot-nav.focus_none
    {
        position: absolute;
        bottom: 0;
    }

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .nl-foot-nav {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}