*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
}

html,body, .wrap{
    width: 24rem;
    height: 13.5rem;
}
body::-webkit-scrollbar{
    display: none;
}
.wrap::-webkit-scrollbar{
    display: none;
}
body, .wrap, .main {
    background-image: url(../images/bj.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.head{
    height: 1.125rem;
    width: 24rem;
    background-image: url(../images/top1.png) ;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.h-nav{
    width: calc((100% - 10.125rem) / 2);
    height: 1.125rem;
    padding-top: .625rem;
}
.h-nav-bar{
    height: .325rem;
    width: 1.45rem;
    color: #FFFFFF;
    font-size: .2rem;
    text-align: center;
    line-height: .325rem;
}

.nav-right>.h-nav-bar{
    background-image: url(../images/nav3.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

}

.nav-left>.h-nav-bar{
    background-image: url(../images/nav1.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

}
.head>.nav-left>.h-nav-bar-active{
    background-image: url(../images/nav-2hover.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.head>.nav-right>.h-nav-bar-active{
    background-image: url(../images/nav4.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.logo{
    color: #F0F6FB ;
    height: 1.125rem;
    width: 10.125rem;
    font-size: .2rem;
    letter-spacing: .1rem;
}


.nav-bars{
    height: .375rem;
    width: 24rem;
    color: #F0F6FB;
    font-size: .175rem;
}
.nav-bars > .project-select{
    width: 3rem;
    margin: 0 .1875rem;
    justify-content: space-between;
}
.nav-bars > .project-select>.text{
    width: 1.75rem;
    white-space: nowrap;
    overflow: hidden;
}
.nav-bars > .project-select>.text::-webkit-scrollbar{
    display: none;
}

.nav-bars > .nav-bar{
    margin: 0 .1875rem;
    padding-left: .25rem;
    background-repeat: no-repeat;
    background-position: left center;
}

.news{
    background-image: url(../images/t01.svg);
}
.user{
    background-image: url(../images/t02.svg);
}
.set{
    background-image: url(../images/t03.svg);
}
.exit{
    background-image: url(../images/t04.svg);
}
.full{
    background-image: url(../images/t05.svg);
}



.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.flex-center{
    align-items: center;
    justify-content: center;
}

.flex-start{
    justify-content: flex-start;
}
.flex-end{
    justify-content: flex-end;
}

.flex-between{
    justify-content: space-between;
}
.flex-around{
    justify-content: space-around;
}


.flex-item-start{
    align-items: flex-start;
}
.flex-item-end{
    align-items: flex-end;
}
.flex-item-center{
    align-items: center;
}


.image-full{
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}


.color1{
    color: #00FFFF;
}
.color2{
    color: #12CDA2;
}
.color3{
    color: #FF7474;
}
.color4{
    color: #FFA602;
}
.color5{
    color: #E9E931;
}