﻿

body {
    font-size:14px;
}
i {
    font-style:normal;
}
#newMenuBar {
    
    width:100%;
    height:44px;
    background:#f5f5f5;
    position:fixed;
    bottom:0;
    z-index:999;
}
#newMenuBar .menuBox .menuItem {
    float:left;
    width:20%;
    text-align:center;
   color:#666;
    font-size:14px;
}

.itemName {
    line-height:20px;
    /*color:#666;*/
    
}
   #newMenuBar  .menuBox .menuItem .itemPic {
        display:block;
        line-height:20px;
        padding:0px 10px;       
        height:20px;
        background-position:center top;
        background-size:18px;
        background-repeat:no-repeat;
    }


#newMenuBar .menuBox .item1 .itemPic {
    background-image:url('/new_website/images/icon/newMenuBarIcon/index_normal.png');
}
#newMenuBar .menuBox .item2 .itemPic {
    background-image:url('/new_website/images/icon/newMenuBarIcon/pay_normal.png');
}
#newMenuBar .menuBox .item3 {
    position:relative;
}
#newMenuBar .menuBox .item3 .itemPic {
    position:absolute;
    width:40px;
    height:40px;
    left:50%;
    margin-left:-20px;
    top:-22px;
    background-size:40px;
    background-image:url('/new_website/images/icon/newMenuBarIcon/classify.png');
    
}

    #newMenuBar .menuBox .item3.selected .itemPic{
         background-image:url('/new_website/images/icon/newMenuBarIcon/classify_close.png');
    }
#newMenuBar  .menuBox .item3 .itemName {
    margin-top:20px;
}
#newMenuBar .menuBox .item4 .itemPic {
    background-image:url('/new_website/images/icon/newMenuBarIcon/order_normal.png');
}
#newMenuBar .menuBox .item5 .itemPic {
    background-image:url('/new_website/images/icon/newMenuBarIcon/my_normal.png');
}



.menuLayer {
    display:none;
    
    position:fixed;
    left:0;
    top:0;
    bottom:44px;
    right:0;
    -background:rgba(0,0,0,0.75);
    z-index:998;
    transform:translateY(0%);
}
@keyframes serverUp {
    from {
        transform:translateY(100%);
    }
    to {
        transform:translateY(0%);
    }
}
.flexBox {
    height:100%;
    display:-webkit-box;
    display:flex;
    
    flex-direction:column-reverse;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
}

.menuLayer.layerUp {
    display:block;
    animation:serverUp 0.1s linear;
}
.menuLayer .title {
    margin-left:76px;
    position:relative;
    color:#fff;
    display:none;
    margin-right:10px;
}

.menuLayer .titleName {
    font-size:14px;
    position:absolute;
    left:-76px;
    top:0;
    padding:4px 10px 0;
}
.menuLayer .title i {
    display:inline-block;
    width:100%;
    border-bottom:1px solid #fff;
}


.menuLayer .activityNearby {
    
}
.menuLayer .activityBox {
    color:#fff;
    margin:10px;
}
.menuLayer .activityBox a{
    
    align-items:center;
    height:100%;
    
    justify-content:center;
}
    .menuLayer .activityBox a img {
        
        -height:4rem;
    }
.menuLayer .functionModule .title {
    margin-left:46px;
}
    .functionModule .title .titleName {
        left:-46px;
    }
.menuLayer .function_box {
    padding: 10px 10px 18px;
}
.menuLayer .serverModule .title {
    margin-left:46px;
}
   .menuLayer .serverModule .title .titleName {
        left:-46px;
    }


.menuLayer .aBox {
    padding-top:10px;
    overflow:hidden;
}
.activityNearby {
    width:100%;
    
    
    background:rgba(0,0,0,0.75);
}
/*.activityNearby {
    display:block !important;
}*/
.functionModule {
    width:100%;
   
    
    background:rgba(0,0,0,0.75);
}
.serverModule {
   
    width:100%;
    
    background:rgba(0,0,0,0.75);
}
.menuLayer .serverBox {
    padding:10px;
    height:140px;
}
.menuBox {
    padding-top:4px;
}
.menuLayer .item_icon {
    display:block;
    float:left;
    width:25%;
    text-align:center;
    color:#fff;
    margin-bottom:10px;
    font-size:14px;
}
.menuLayer .item_icon .icon_pic {
    display:block;
    
    height:48px;
    background-size:48px;
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom:2px;
}
 
.menuLayer .dianying .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_dianying.png ');
}
.menuLayer .yanchu .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_yanchu.png ');
}
.menuLayer .menpiao .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_menpiao.png ');
}
.menuLayer .shengri .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_shengri.png ');
}
.menuLayer .shenghuo .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_shenghuo.png ');
}
.menuLayer .jianshen .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_jianshen.png ');
}
.menuLayer .tushu .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_tushu.png ');
}
.menuLayer .xiaoquanquan .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_guosu.png ');
}
.menuLayer .jingdong .icon_pic {
    background-image: url('/new_website/images/icon/menuBar_icon/menubar_jingdong.png ');
}
.menuLayer .wanheng .icon_pic {
    background-image: url('/new_website/images/icon/menuBar_icon/menubar_wanheng.png ');
}


.menuLayer .shouji .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_shouji.png ');
}
.menuLayer .bangka .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_bangka.png ');
}
.menuLayer .chaxun .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_chaxun.png ');
}
.menuLayer .chongzhi .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_chongzhi.png ');
}
.menuLayer .kahebing .icon_pic{
    background-image:url('/new_website/images/icon/menuBar_icon/menuBar_kahebing.png ');
}