/*--------------------------------------------------
    project:YouMeng
    producer:Chan.
    date:2018-4-27
--------------------------------------------------*/




/*
    初始化
*/
body{margin: 0;padding: 0; width:100%; font-family: 'Microsoft YaHei',Arial,serif,Helvetica;}
h1,h2,h3,h4,h5,h6,ul,ol,li,p{list-style: none; padding: 0; margin: 0;}





/*--------------------------------------------------
    组件
--------------------------------------------------*/


/*
    container
*/

#mb-menu .menu-area{width: 100%;position: fixed;top: 0;left: 0;background: #222;}

#mb-menu .menu-area .logo{position: fixed;left: 50%;top: 0;z-index: 999;margin-left: -70px;}

#mb-menu .menu-area .menu-button{position: fixed;left: 15px;top: 0;text-decoration: none !important;color: #fff;width: 50px;height: 50px;text-align: center;line-height: 50px;}
#mb-menu .menu-area .menu-button i{font-size: 24px;}
#mb-menu .menu-area .menu-button:hover{color: #44e6fa;}
#mb-menu .menu-area .menu-button:active{color: #44e6fa;}

#mb-menu .menu-con{width: 0;height: 100%;position: fixed;left: 0;top:0;background: rgba(0,0,0,.4);z-index: 999;transition: .2s;}

#mb-menu .menu-con .mb-menu{width: 70%;height: 90%;transition: .3s;background: #3b4868;overflow: auto;position: relative;padding-bottom: 40px;}
#mb-menu .menu-con .mb-logo{height: 80px;text-align: center;line-height: 80px;margin-bottom: 30px;}
#mb-menu .menu-con .mb-logo img{;display: inline-block;}

#mb-menu .menu-con .mb-menu h3{font-size: 20px;color: #fff;text-align: center;line-height: 70px;}
#mb-menu .menu-con .mb-menu .active{background: #526491;}
#mb-menu .menu-con .mb-menu li{width: 100%;height: auto;overflow: hidden;}
#mb-menu .menu-con .mb-menu li a{display: block;line-height: 45px;padding-left: 30px;color: #fff;text-decoration: none;font-size: 14px;}
#mb-menu .menu-con .mb-menu li a:hover{background: #526491;color: #fff;}
#mb-menu .menu-con .mb-sub-menu{ display: none;background: #0e85cb;width: 100%;}
#mb-menu .menu-con .mb-sub-menu a{display: block;width: 100%;padding-left: 50px !important; font-size: 14px !important;background: #233867;}
#mb-menu .menu-con .mb-sub-menu a:hover{background: #304e8f !important;}
#mb-menu .menu-con .mb-sub-menu li{width: 100%;}
#mb-menu .menu-con .menu-bt{background: #27a7ff;}

#mb-menu #log-res{width: 70%;height: 10%;position: static;left: 0;bottom: 0;background: #15213d;display: none;}
#mb-menu #log-res li{width: 50%;float: left;text-align: center;height: 100%;}
#mb-menu #log-res a{padding-left: 0;color: #fff;text-decoration: none;font-size: 14px;display: block;line-height: 100%;width: 100%;height: 100%;padding-top: 20%;}
#mb-menu #log-res a:hover{background: #304e8f;}

.menu-con #close-bt{width: 66px;height: 66px;position: absolute;right: 20px;top: 20px;display: block;z-index: 999;text-align: center;line-height: 66px;text-decoration: none;}
.menu-con #close-bt i{font-size: 40px;color: #fff;}

#mb-menu #user-area{width: 70%;height: 10%;position: absolute;left: 0;bottom: 0;background: #526491;z-index: 999;}
#mb-menu #user-area a{font-size: 12px;color: #fff;text-decoration: none;display: block;}
#mb-menu #user-area .user{width: 80%;height: 100%;float: left;display: none;padding-left: 15px;}
#mb-menu #user-area .user i{font-size: 36px;color: #fff;display: inline-block;float: left;margin-right: 10px;position: relative;top: 4px;}
#mb-menu #user-area .con{padding-top: 6%;}
#mb-menu #user-area .out{width: 20%;height: 100%;float: right;background: #4c5c86;text-align: center;padding-top: 8%;display: none;}