
.wap-ctt{
    position: relative;
}
.wap-header{
    width: 100%;
    height: 0.88rem;
    background-color: #121518;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.fade-out{
    /* width: 0.74rem;
    height: 100%;
    background: url(../img/menu.png) no-repeat;
    background-position: 0.17rem 0.24rem;
    background-size: 0.4rem 0.4rem;
    cursor: pointer; */

    position: absolute;
    right: -21px;
    left: -8px;
    top: 10px;
    bottom: 0;
    margin: auto 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #ccc;
    padding: 5px 10px;
}
.fade-out i{
    background: #ffffff;
    height: 4px;
    width: 4px;
    margin: 4px auto;
    border-radius: 5px;
    display: block;
    -webkit-transition: -webkit-transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: -moz-transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-out i:first-child {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
.fade-out i:nth-child(2) {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.fade-out i:last-child {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.fade-out.active i {
    background: #ffffff;
    height: 1px;
    margin-bottom: 6.5px;
    display: block;
    width: 21px;
}
.fade-out.active i:first-child {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}
.fade-out.active i:nth-child(2) {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.fade-out.active i:last-child {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
}
.wap-logo{
    display: block;
    width: 2.82rem;
    height: 0.48rem;
    position: absolute;
    left: 50%;
    top: 0.2rem;
    margin-left: -1.41rem;
}
.wap-logo img{
    width: 100%;
    height: 100%;
}
.wap-fotter{
    width: 100%;
    height: 1.15rem;
    background: #3C3C3C;
    color: #999999;
    font-size: 0.2rem;
    text-align: center;
    padding: 0.2rem;
    box-sizing: border-box;
    line-height: 0.4rem;
}
.wap-nav-box{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0.88rem;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 990;
    display: none;
    overflow-y: auto;
}
.wap-nav{
    overflow-y: scroll;
    padding-bottom: 1rem;
}
.wap-nav .wap-bar a{
    display: block;
    padding:0.23rem 0.34rem;
    height: auto;
    line-height: 0.6rem;
    font-size: 0.36rem;
    color: #ffffff;
    position: relative;
    cursor: pointer;
    word-break: break-all;
}
.wap-nav .wap-bar a:active{
    color: #0F8CF7;  
}
.wap-nav .wap-bar a.wap-link-active{
    color: #0F8CF7;  
}
.wap-nav .wap-bar a .i-wap-rower{
    display: inline-block;
    width: 0.16rem;
    height: 0.22rem;
    background: url(../img/arrow.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0.42rem;
    right: 0.34rem;
}
.ovfHiden {
    overflow: hidden;
    height: 100%;
}
.wap-bar-title{
    display: block;
    padding-left: 0.34rem;
    height: 1.06rem;
    line-height: 1.06rem;
    font-size: 0.36rem;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    position: relative;
}
.bar-active{
    color: #0F8CF7;   
}
.wap-nav .wap-bar-title+.wap-slide{
    /* position: absolute;
    left: 0;
    top: 1.06rem; */
    width: 100%;
    display: none;
}
.wap-nav .wap-bar-title.bar-active+.wap-slide{
    display: block;
}
.wap-nav .wap-bar{
    height: auto;
    border-bottom: 1px solid #ffffff;
}
.wap-bar-title .i-wap-slideDown{
    display: inline-block;
    height: 0.16rem;
    width: 0.22rem;
    background: url(../img/up-arrow.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0.45rem;
    right: 0.34rem;
    transition: all 0.4s;
}
.wap-bar-title.bar-active .i-wap-slideDown{
    -webkit-transform: rotate(-180deg) scale(1);
    -moz-transform: rotate(-180deg) scale(1);
    transform: rotate(-180deg) scale(1);
}














