@charset "utf-8";

html {
    font-size: 1px;
    text-size-adjust: none;
    text-rendering: optimizelegibility
}

article, aside, blockquote, body, button, code, dd, details, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
    margin: 0;
    padding: 0
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block
}

audio, canvas, video {
    display: inline-block
}

body, button, input, select, textarea {
    font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif
}

body {
    overflow-x: hidden;
    width: 100%;
    background-color: #21293c;
    -webkit-overflow-scrolling: touch
}

body, html {
    height: 100%
}

html {
    overflow-x: hidden
}

body::-webkit-scrollbar {
    display: none
}

button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

del {
    text-decoration: line-through
}

address, caption, cite, code, dfn, em, th, var {
    font-weight: 400;
    font-style: normal
}

ol, ul {
    list-style: none
}

a, ins {
    text-decoration: none
}

b, strong {
    font-weight: 700
}

em, i {
    font-style: normal
}

[draggable] {
    cursor: move
}

.lang {
    color: #a6a9b2;
    font-size: .3733rem;
    cursor: pointer;
}

    .lang a {
        color: #a6a9b2;
    }

.clearfix:after, .clearfix:before {
    display: table;
    content: ""
}

.clearfix:after {
    clear: both
}

.clearfix {
    zoom: 1
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Hiragino Sans GB,Microsoft Yahei,\5FAE\8F6F\96C5\9ED1,Arial,Helvetica,STHeiti,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol
}

table caption {
    border-bottom: none
}

button, input, textarea {
    border-radius: 0;
    -webkit-appearance: none
}

caption, em, legend {
    font-weight: inherit
}

a, button, input, textarea {
    outline: 0
}

a {
    color: #333;
    -webkit-tap-highlight-color: transparent
}

    a:active, button:active {
        opacity: .8
    }

    a:hover {
        text-decoration: none
    }

.arTit {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    font-size: 1px;
    opacity: 0
}

.statusbar {
    z-index: 99999;
    display: none;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: .8125rem;
    border: 0;
    background: #21293c
}

    .statusbar:before {
        border: 0
    }

.fixstatu {
    position: relative;
    top: 0;
    z-index: 999;
    float: left;
    display: block;
    overflow: hidden;
    width: 100%;
    height: .8125rem;
    background: #21293c
}

    .fixstatu:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

.paytf.fixstatu {
    display: none
}

.bggrey {
    background: #36425a
}

.appbg {
    background: #21293c
}

.slipleft {
    animation: bounceInLeft .5s ease forwards
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    50% {
        opacity: .5;
        transform: translateZ(0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.slipright {
    animation: bounceInRight .5s ease forwards
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    50% {
        opacity: .5;
        transform: translateZ(0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sliptop {
    animation: bounceInTop .5s ease forwards
}

@keyframes bounceInTop {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    50% {
        opacity: .5;
        transform: translateZ(0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes shake {
    70%,80% {
        transform: rotate(7deg)
    }

    75% {
        transform: rotate(-7deg)
    }

    65%,85% {
        transform: rotate(0)
    }
}

.btnblack:after, .ray:after {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);
    content: "";
    transform: skewX(-20deg);
    animation: ray .5s linear .2s infinite alternate;
    animation-iteration-count: 1
}

@keyframes ray {
    to {
        left: 150%
    }
}

#placeimg, #placeimg-2, #placeimg-3, #placeimg-4, #placelist, #placepic {
    position: relative;
    float: left;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 4rem
}

    #placeimg-2 p, #placeimg-3 p, #placeimg-4 p, #placeimg p {
        position: relative;
        float: left;
        display: block;
        overflow: hidden;
        margin: 0 5px;
        width: calc((100% - 30px) / 3);
        height: 96%;
        border-radius: .1rem;
        justify-content: center;
        align-items: center
    }

    #placeimg-2 p, #placeimg-3 p, #placeimg-4 p, #placeimg p, #placelist li div em, #placelist li div i, #placelist li div p, #placelist li span, #placepic, #placetext p, #placetxt p, #placezj li div em, #placezj li div i, #placezj li div p, #placezj li span {
        background: #41485a;
        color: #41485a;
        text-indent: -999999px;
        font-size: 0
    }

#placeimg-2 {
    height: 3rem
}

    #placeimg-2 p {
        width: calc((100% - 20px) / 2)
    }

#placeimg-3, #placeimg.day {
    height: 8rem
}

    #placeimg-3 p, #placeimg.day p {
        margin-bottom: .2rem;
        height: 3.7rem
    }

        #placeimg-3 p.r1, #placeimg-3 p.r4 {
            width: 64%
        }

        #placeimg-3 p.r2, #placeimg-3 p.r3 {
            width: 30%
        }

#placepic {
    margin: 0 0 4% 1%;
    width: 99%;
    border-radius: .1rem
}

#scroll-love_rank #placeimg {
    min-width: 9.3rem
}

#scroll-books #ranklist #placeimg-4 {
    height: 2.2rem;
    min-width: 9.3rem
}

#hotlist #placeimg, #recommend #placeimg {
    margin-bottom: 20px
}

#placetext, #placetxt {
    float: left;
    display: block;
    overflow: hidden;
    margin: 2%;
    width: 96%
}

    #placetext p, #placetxt p {
        position: relative;
        float: left;
        display: block;
        overflow: hidden;
        width: 80%;
        height: .3rem;
        justify-content: center;
        align-items: center
    }

    #placetxt .t1 {
        width: 80%
    }

    #placetxt .t2 {
        margin: .3rem 0;
        width: 50%
    }

    #placetxt .t3 {
        width: 70%
    }

    #placetxt .t4 {
        margin: .3rem 0;
        width: 40%
    }

#placetext {
    margin-bottom: 100px
}

    #placetext p {
        margin-top: .4rem;
        height: .7rem
    }

    #placetext .t2 {
        width: 60%
    }

    #placetext .t3 {
        width: 90%
    }

    #placetext .t4 {
        width: 70%
    }

#placelist, #placezj {
    margin: 30px auto 100px;
    height: auto
}

    #placelist li, #placezj li {
        position: relative;
        float: left;
        display: block;
        overflow: hidden;
        margin: 0 3% 10px;
        width: 94%;
        height: 3.5rem;
        justify-content: center;
        align-items: center
    }

        #placelist li span, #placezj li span {
            position: relative;
            float: left;
            display: inline-block;
            overflow: hidden;
            width: 28%;
            height: 100%
        }

        #placelist li div, #placezj li div {
            float: right;
            display: inline-block;
            overflow: hidden;
            width: 70%;
            height: 100%
        }

            #placelist li div em, #placelist li div i, #placelist li div p, #placezj li div em, #placezj li div i, #placezj li div p {
                position: relative;
                display: block;
                overflow: hidden;
                margin-bottom: 10px;
                width: 50%;
                height: 10px
            }

            #placelist li div em, #placezj li div em {
                width: 70%
            }

            #placelist li div i, #placezj li div i {
                width: 60%
            }

    #placezj li {
        height: 2rem
    }

        #placezj li div em, #placezj li div i, #placezj li div p {
            height: 15px
        }

        #placeimg-2 p:after, #placeimg-3 p:after, #placeimg p:after, #placelist li span:after, #placepic:after, #placetext p:after, #placetxt p:after, #placezj li span:after {
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(90deg,transparent,rgba(34,42,61,.3),transparent);
            content: "";
            transform: skewX(-20deg);
            animation: ray .5s linear .2s infinite alternate;
            animation-iteration-count: 100
        }

.btnyellow {
    background-image: -webkit-linear-gradient(-40deg,#ffe153 19%,#ffd251 97%);
    background-image: -ms-linear-gradient(-40deg,#ffe153 19%,#ffd251 97%);
    color: #333;
    font-size: .3733rem
}

.btnblue {
    background-image: -webkit-linear-gradient(-40deg,#26bafe 19%,#02a2ea 97%);
    background-image: -ms-linear-gradient(-40deg,#26bafe 19%,#02a2ea 97%);
    color: #fff
}

.btnblue, .btngray {
    font-size: .3733rem
}

.btngray {
    background-color: #36425a;
    background-image: url(../img/btngray.png);
    background-position: -10px 30px;
    background-size: 50px;
    background-repeat: no-repeat;
    color: #9fa7ba
}

.btnblack {
    background-image: -webkit-linear-gradient(-40deg,#0f1627 19%,#000 97%);
    background-image: -ms-linear-gradient(-40deg,#0f1627 19%,#000 97%);
    color: #fff;
    font-size: .3733rem
}

.fix-topbar {
    position: sticky;
    top: 0;
    z-index: 9990;
    float: left;
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #21293c
}

    .fix-topbar:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

.banner-heading {
    position: relative
}

    .banner-heading .cm-topbar {
        z-index: 9992
    }

.cm-topbar {
    height: 1.1733rem
}

    .cm-topbar.fixed {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%
    }

.cm-topbar__container {
    position: relative;
    display: flex;
    height: 1.1733rem;
    border: 0;
    align-items: center;
    justify-content: center
}

.cm-topbar .center-tabs {
    display: flex;
    width: 2.9333rem;
    height: .7467rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background-color: rgba(0,0,0,.5)
}

    .cm-topbar .center-tabs .item {
        text-align: center;
        line-height: .7467rem;
        flex: 1
    }

        .cm-topbar .center-tabs .item a {
            display: block;
            border-radius: .4rem;
            color: #a6a9b2;
            font-size: .3733rem
        }

            .cm-topbar .center-tabs .item a.active {
                background-color: #21293c;
                color: #67b299
            }

.cm-topbar__container .action {
    position: absolute;
    top: 50%;
    right: .32rem;
    width: 1rem;
    transform: translateY(-50%)
}

    .cm-topbar__container .action.icon button {
        overflow: hidden;
        width: .64rem;
        height: .64rem;
        border: 0;
        background-color: transparent;
        background-size: cover;
        text-indent: -99999px
    }

    .cm-topbar__container .action.icon.search {
        right: .1rem
    }

    .cm-topbar__container .action button.icon-search-btn {
        background-image: url(../img/n19__top-search.png)
    }

.cm-topbar .center-tabs.v-hidden {
    visibility: visible;
    background-color: #f9f9f9
}

    .cm-topbar .center-tabs.v-hidden .item a.active, .cm-topbar .center-tabs.v-hidden li a {
        color: #ddd
    }

.indexV2 #topimg, .indexV2 .banner-heading, .indexV2 .ht-bar, .indexV2 .statusbar, .indexV2 .vip_searchBar {
    background-color: #222d44
}

    .indexV2 .banner-heading.v-hidden, .indexV2 .statusbar.v-hidden, .indexV2 .vip_searchBar.v-hidden, .vip_search.v-hidden {
        visibility: visible;
        background: #36425a
    }

.indexV2 .banner-heading {
    padding-top: .3rem;
    height: 1.2rem;
    background-position: top
}

.indexV2 .banner-heading, .indexV2 .vip_searchBar {
    background-image: url(../img/hometop.jpg);
    background-size: cover;
    background-repeat: no-repeat
}

.indexV2 .vip_searchBar {
    padding: .4rem .25rem;
    width: auto;
    background-position: center -1.5rem
}

.indexV2 .ht-bar {
    background-image: url(../img/ht-bar-bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat
}

    .indexV2 .ht-bar.vip {
        background-image: url(../img/ht-bar-bg.jpg)
    }

.indexV2 .vip_searchBar {
    float: left
}

    .indexV2 .vip_searchBar .vip_search {
        float: left;
        width: 6.7rem;
        background-color: #9fa7ba;
        color: #36425a
    }

    .indexV2 .vip_searchBar .cate {
        float: right;
        margin-left: .2rem;
        padding: 0 0 0 .75rem;
        width: 1rem;
        height: .8rem;
        border-radius: .8rem;
        background-color: rgba(159,167,186,.7);
        background-image: url(../img/cate.png);
        background-position: .2rem;
        background-size: .5rem;
        background-repeat: no-repeat;
        color: #36425a;
        font-size: .37rem;
        line-height: .8rem
    }

.indexV2 .topbar-new .cm-topbar__container {
    height: 2.2rem;
    align-items: left;
    justify-content: left
}

.indexV2 .cm-topbar .center-tabs-new {
    position: relative;
    top: -.15rem;
    display: flex;
    min-width: 7rem
}

    .indexV2 .cm-topbar .center-tabs-new .item a {
        overflow: hidden;
        border-radius: 0;
        background: 0 0;
        color: #a6a9b2;
        font-size: .45rem;
        transition: all .3s ease-in-out;
        transform: scale(1)
    }

        .indexV2 .cm-topbar .center-tabs-new .item a.active, .indexV2 .cm-topbar .center-tabs-new .item a:hover {
            transform: scale(2)
        }

        .indexV2 .cm-topbar .center-tabs-new .item a.active {
            position: relative;
            top: -.1rem;
            background: 0 0;
            color: #67b299;
            font-weight: 700;
            font-size: .5rem
        }

            .indexV2 .cm-topbar .center-tabs-new .item a.active:after {
                display: block;
                margin-top: -5px;
                width: 50px;
                height: 5px;
                border-radius: 0;
                background-color: #000;
                content: ""
            }

        .indexV2 .cm-topbar .center-tabs-new .item a.logo {
            position: relative;
            top: -.35rem;
            display: block;
            width: 1.2rem;
            height: 1.2rem;
            color: #212d41;
            font-weight: 0;
            font-size: 0
        }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.mht {
                background: url(../logo/mht.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.ximimanhua {
                background: url(../logo/pc.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.boluomanhua {
                background: url(../../logo/boluomanhua/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.danciyuan {
                background: url(../../logo/danciyuan/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.danmanzhijia {
                background: url(../../logo/danmanzhijia/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.fanmugu {
                background: url(../../logo/fanmugu/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.jimeimanhua {
                background: url(../../logo/jimeimanhua/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.meidanmanhua {
                background: url(../../logo/meidanmanhua/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.nibashe {
                background: url(../../logo/nibashe/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.qiredanman {
                background: url(../../logo/qiredanman/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.qiremh {
                background: url(../../logo/qiremh/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.wamanmanhua {
                background: url(../../logo/wamanmanhua/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

            .indexV2 .cm-topbar .center-tabs-new .item a.logo.yidanmanhua {
                background: url(../../logo/yidanmanhua/mobile.png) 50% no-repeat;
                background-size: 1.3rem
            }

    .indexV2 .cm-topbar .center-tabs-new .item {
        margin: 0;
        padding: 0 .2rem;
        text-align: center
    }

.indexV2 .cm-topbar__container .action {
    top: 35%;
    right: 1rem
}

    .indexV2 .cm-topbar__container .action button {
        width: .8rem;
        height: .8rem;
        border: 0;
        border-radius: .8rem;
        background-color: rgba(0,0,0,.1);
        background-position: 50%;
        background-size: cover;
        text-indent: -999999px;
        backround-repeat: no-repeat
    }

        .indexV2 .cm-topbar__container .action button.icon-his-btn {
            background-image: url(../img/home_icon_his.png)
        }

        .indexV2 .cm-topbar__container .action button.icon-search-btn {
            background-image: url(../img/so.png)
        }

    .indexV2 .cm-topbar__container .action.sign {
        right: 0
    }

    .indexV2 .cm-topbar__container .action button.icon-sign-btn {
        background-image: url(../img/rili.png)
    }

    .indexV2 .cm-topbar__container .action.language {
        right: 1rem
    }

    .indexV2 .cm-topbar__container .action button.icon-language.cn {
        background-image: url(../img/cn.png)
    }

    .indexV2 .cm-topbar__container .action button.icon-language.tw {
        background-image: url(../img/tw.png)
    }

.indexV2 .lmtop {
    height: 1.5rem
}

.indexV2 .lmtop, .indexV2 .vip_searchBar.lmso {
    background: #21293c
}

.vip_search.v-hidden, .vip_searchBar.v-hidden a.vip_search {
    width: 92%
}

.cm-tabbar__container .nav {
    display: flex
}

    .cm-tabbar__container .nav .item {
        text-align: center;
        line-height: 1.3067rem;
        flex: 1
    }

        .cm-tabbar__container .nav .item a {
            display: flex;
            height: 1.3067rem;
            color: #a6a9b2;
            font-size: .3467rem;
            flex: 1;
            justify-content: center;
            flex-direction: column
        }

            .cm-tabbar__container .nav .item a .text {
                color: #949494;
                font-size: .28rem;
                line-height: 1
            }

            .cm-tabbar__container .nav .item a i[class^=icon] {
                position: relative;
                display: block;
                margin: 0 auto .1rem;
                width: .5933rem;
                height: .5933rem;
                background-size: cover
            }

            .cm-tabbar__container .nav .item a .icon-new {
                background-image: url(../img/bar1_nor.png)
            }

            .cm-tabbar__container .nav .item a .icon-cate {
                background-image: url(../img/bar3_nor.png)
            }

            .cm-tabbar__container .nav .item a .icon-shelf {
                background-image: url(../img/shelf_nor.png)
            }

            .cm-tabbar__container .nav .item a .icon-fine {
            }

            .cm-tabbar__container .nav .item a .icon-home {
                background-image: url(../img/bar2_nor.png)
            }

            .cm-tabbar__container .nav .item a .icon-account {
                background-image: url(../img/bar5_nor.png)
            }

            .cm-tabbar__container .nav .item a div#navuser img {
                display: block;
                margin: 0 auto .0533rem;
                width: .64rem;
                height: .64rem;
                border-radius: 50%
            }

            .cm-tabbar__container .nav .item a.active .icon-new {
                background-image: url(../img/bar1_sel.png)
            }

            .cm-tabbar__container .nav .item a.active .icon-cate {
                background-image: url(../img/bar3_sel.png)
            }

            .cm-tabbar__container .nav .item a.active .icon-shelf {
                background-image: url(../img/shelf_sel.png)
            }

            .cm-tabbar__container .nav .item a.active .icon-home {
                background-image: url(../img/bar2_sel.png)
            }

            .cm-tabbar__container .nav .item a.active .icon-account {
                background-image: url(../img/bar5_sel.png)
            }

            .cm-tabbar__container .nav .item a.active .icon-fine {
                background-image: url(../img/bar4_sel.png)
            }

        .cm-tabbar__container .nav .item.badge i[class^=icon]:before {
            position: absolute;
            top: 0;
            right: -.1rem;
            display: block;
            width: .24rem;
            height: .24rem;
            border-radius: .24rem;
            background-color: red;
            content: ""
        }

.radius-top {
    position: relative;
    z-index: 9992;
    display: block;
    overflow: hidden;
    margin: -.35rem auto 0;
    padding: 0;
    width: 100%;
    height: .35rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    background-color: #2f374a
}

.ht-bar__container.swiper-wrapper.v-hidden {
    visibility: visible;
    margin: 0 3%;
    width: 94%;
    border-radius: 1rem;
    background: #36425a
}

    .ht-bar__container.swiper-wrapper.v-hidden .swiper-slide {
        display: none
    }

.ht-bar {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    margin: 0 auto -.5rem;
    padding: 0;
    width: 100%;
    height: 1.3rem;
    line-height: 1.3rem
}

    .ht-bar.ht-box {
        z-index: 9996;
        margin: -.3rem auto 0;
        width: 96%;
        border-radius: .4rem;
        background-image: -webkit-linear-gradient(-40deg,#215b68 19%,#3f543e 97%);
        line-height: 1.6rem
    }

    .ht-bar.ht-t1.v-hidden {
        top: .5rem;
        visibility: visible;
        background: #36425a
    }

.ht-bar__container, .ht-bar__container .swiper-slide {
    display: flex;
    align-items: center
}

    .ht-bar__container .text {
        color: #a6a9b2;
        text-indent: .1rem;
        font-size: .3733rem;
        flex: 1
    }

        .ht-bar__container .text.tr20 {
            text-indent: 20px
        }

    .ht-bar__container .btn-primary {
        margin: 0 .2rem 0 0;
        padding: 0;
        width: 2.4rem;
        height: .8rem;
        border: 0;
        border-radius: .8rem;
        text-align: center;
        line-height: .8rem
    }

.icon_fabu, .icon_gift, .icon_tips {
    position: relative;
    top: 3px;
    display: inline-block;
    margin-right: .1333rem;
    width: .5rem;
    height: .5rem;
    background: url(../img/icon_bottomIndex_gift_v7.png);
    background-size: 100% 100%;
    animation: shake 1.5s linear infinite
}

.icon_tips {
    background-image: url(../img/icon_bindtips.png)
}

.icon_fabu {
    top: 5px;
    width: .6rem;
    height: .6rem;
    background-image: url(../img/my_icon_fb_v.png)
}

.icon_free, .icon_vip {
    position: relative;
    top: .1rem;
    display: inline-block;
    margin: 0 .1333rem;
    width: .5rem;
    height: .5rem;
    background: url(../img/rankListIcon.png);
    background-size: 100%;
    background-repeat: no-repeat
}

.icon_free {
    top: .2rem;
    width: .7rem;
    height: .7rem;
    background-image: url(../img/free.png)
}

.ht-bar.ht-t1 .text {
    position: relative;
    top: -5px;
    color: #fff
}

.ht-bar.ht-t1 .ht-bar__container .btn-primary {
    margin-top: -.3rem;
    width: 3rem;
    background: #67b299;
    color: #fff;
    font-size: .32rem;
    animation: breath2 1s linear .9s infinite alternate
}

@keyframes breath2 {
    0% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

.indexV2 .ht-bar {
    padding: 0 0 .5rem
}

.ht-nav {
    position: relative;
    z-index: 2;
    border-top: 10px solid #2f3c56;
    border-top-right-radius: .6rem;
    border-top-left-radius: .6rem;
    background: #21293c
}

    .ht-nav ul {
        display: flex;
        padding: 0;
        justify-content: center;
        align-items: center
    }

        .ht-nav ul li {
            position: relative;
            margin-top: .2rem;
            text-align: center;
            flex: 1
        }

    .ht-nav i[class^=icon-] {
        display: block;
        margin: 0 auto;
        width: 1.45rem;
        height: 1.45rem;
        background-size: cover;
        background-repeat: no-repeat
    }

    .ht-nav .icon-top {
        background-image: url(../img/video.png)
    }

    .ht-nav .icon-free {
        background-image: url(../img/novel.png)
    }

    .ht-nav .icon-new {
        background-image: url(../img/comic.png)
    }

    .ht-nav .icon-fav {
        background-image: url(../img/home-icon-fav.png)
    }

    .ht-nav .icon-app {
        background-image: url(../img/home-icon-app.png);
        animation: shake 3s linear infinite
    }

    .ht-nav li#ifav, .ht-nav li#ivideo {
        display: none
    }

    .ht-nav .text {
        color: #a6a9b2;
        font-size: .35rem
    }

.indexV2 #topimg {
    top: 1.6rem
}

#topimg {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: block;
    display: flex;
    margin: 0 auto;
    padding: 0 1% .3rem;
    width: 98%;
    background: #2f374a;
    text-align: center;
    align-items: center
}

    #topimg .box {
        position: relative;
        float: left;
        display: block;
        width: 100%;
        height: 2.2rem
    }

        #topimg .box .adclose {
            position: absolute;
            top: .1rem;
            right: .2rem;
            z-index: 100;
            overflow: hidden;
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            background: url(../img/ico_close.png);
            background-color: rgba(0,0,0,.5);
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            text-indent: -999px;
            cursor: pointer
        }

    #topimg li.swiper-slide {
        display: block;
        overflow: hidden;
        margin: 0 1%;
        padding: 0;
        width: 98%;
        height: 100%;
        border-radius: .1rem
    }

        #topimg li.swiper-slide a {
            display: block;
            overflow: hidden;
            height: 100%;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat
        }

    #topimg img {
        width: 100%;
        height: 100%
    }

    #topimg.top-b10, #topimg.top-hot {
        top: 1rem;
        padding: 0 1.5% .3rem;
        width: 97%;
        border-top: 10px solid #21293c;
        border-bottom: 1px solid #1b2335;
        background: #21293c
    }

    #topimg li.swiper-slide {
        margin: 0 1.5%;
        width: 97%
    }

    #topimg.top-hot {
        top: 1.45rem
    }

        #topimg.top-hot li.swiper-slide {
            margin: 0 2.5%;
            width: 95%
        }

    #topimg.top-ss {
        top: 1.5rem;
        border-top: 0;
        background: #21293c
    }

    #topimg.foot-img {
        top: 0;
        bottom: 1.3rem;
        border-top: 10px solid #21293c;
        background: #21293c
    }

    #topimg.foot-pic {
        top: 0;
        bottom: 1.3rem;
        border-top: 10px solid #1b2334;
        border-bottom: 5px solid #1b2334;
        background: #1b2334
    }

        #topimg.foot-img .box, #topimg.foot-pic .box {
            border-radius: .2rem
        }

#bigimg {
    display: block;
    margin: .3rem 2%;
    padding: 0;
    width: 96%;
    height: 7rem;
    border: 0;
    box-shadow: none;
    text-align: center
}

    #bigimg.fr10 {
        margin: .3rem 3%;
        width: 94%
    }

    #bigimg .box {
        float: left;
        display: block;
        display: flex;
        overflow: hidden;
        width: 100%;
        height: 6rem;
        border-radius: .2rem .2rem 0 0;
        align-items: center
    }

        #bigimg .box .img {
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat
        }

            #bigimg .box .img img {
                float: left;
                display: block;
                width: 100%;
                height: 100%
            }

    #bigimg .tips {
        float: left;
        display: block;
        width: 100%;
        height: 1rem;
        border-radius: 0 0 .2rem .2rem;
        background: #263146;
        box-shadow: none;
        color: #36425a;
        text-align: left;
        text-indent: 10px;
        font-size: .3rem;
        line-height: 1rem
    }

        #bigimg .tips .adclose {
            float: right;
            margin: .25rem;
            width: .35rem;
            height: .35rem;
            background: url(../img/cate-close.png);
            background-position: bottom;
            background-size: cover;
            background-repeat: no-repeat
        }

#topimg.foot-img.bfixed {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 1.3067rem;
    left: 0;
    z-index: 999;
    height: 2.2rem
}

.novxab {
    display: none
}

.kfimg {
    display: block;
    margin: .3rem 2%;
    padding: 0;
    width: 96%;
    background: #1b2334;
    text-align: center
}

    .kfimg, .kfimg img {
        float: left;
        height: auto;
        border-radius: .1rem
    }

        .kfimg img {
            width: 100%
        }

.bm-box#hisbox, .vipskin #userad {
    display: none
}

.bm-box__head {
    display: flex;
    padding: 0 .32rem;
    height: 1.3867rem;
    align-items: center
}

    .bm-box__head .title .icon-vip {
        display: inline-block;
        margin-top: -3px;
        margin-left: -5px;
        width: 30px;
        height: 30px;
        background-image: url(../img/myvip_myvip_icon_timefree8.png);
        background-size: 30px;
        background-repeat: no-repeat;
        vertical-align: middle
    }

.bm-box__prefix {
    position: relative
}

.bm-box__head .title {
    color: #67b299;
    font-weight: 600;
    font-size: .4533rem;
    flex: 1
}

.title {
    color: #67b299;
    font-weight: 600;
}

.indexV2 .bm-box__head.tl-head .title:after {
    display: block;
    margin-top: -5px;
    width: 50px;
    height: 10px;
    border-radius: 0;
    background-color: #0f1627;
    content: ""
}

.bm-box__head .title.bl, .bm-box__head .title.cn {
    color: #6c7e8d
}

.bm-box__head .more a {
    display: block;
    height: .4267rem;
    border-radius: .4267rem;
    color: #9fa7ba;
    font-size: .3rem;
    line-height: .4267rem
}

    .bm-box__head .more a .icon-arrow {
        display: inline-block;
        margin-top: -2px;
        width: .2133rem;
        height: .2133rem;
        background-image: url(../img/bm-arrow.png);
        background-size: cover;
        vertical-align: middle
    }

    .bm-box__head .more a .icon-change {
        display: inline-block;
        margin-top: -3px;
        width: .32rem;
        height: .32rem;
        background-image: url(../img/icon-change.png);
        background-size: cover;
        vertical-align: middle
    }

    .bm-box__head .more a.btn-yellow {
        border-color: #ffe04f;
        background-color: #ffe04f;
        color: #423300
    }

        .bm-box__head .more a.btn-yellow .icon-arrow {
            background-image: url(../img/by-arrow.png)
        }

.bm-box__head.v-hidden {
    display: inline-block;
    visibility: visible;
    margin: 20px 0 0 4%;
    width: 30%;
    height: .5rem;
    border-radius: .1rem;
    background: #41485a;
    text-indent: -99999999px
}

    .bm-box__head.v-hidden .lineicon {
        display: none
    }

    .bm-box__head.v-hidden .title:after, .bm-box__head.v-hidden.tl-head .title:after {
        position: absolute;
        right: 4%;
        display: block;
        margin-top: -.5rem;
        width: 50px;
        height: .5rem;
        border-radius: .4267rem;
        background-color: #41485a;
        content: ""
    }

.bg-grey {
    z-index: 9991;
    background: #1b2334
}

.box-20 {
    float: left;
    display: block;
    margin: 0 2%;
    width: 96%;
    height: 100%;
    border-radius: .2rem;
    background-color: #21293c
}

    .box-20 #scroll-love_rank {
        background: 0 0
    }

.books-row {
    float: left;
    display: block;
    margin: auto;
    width: 96%
}

    .books-row .item {
        position: relative;
        overflow: hidden
    }

    .books-row.row3 .item {
        float: left;
        width: 33.33333%
    }

    .books-row.row2 .item {
        float: left;
        width: 50%
    }

        .books-row.row2 .item.no1, .books-row.row2 .item.no4 {
            width: 64.25%
        }

        .books-row.row2 .item.no2, .books-row.row2 .item.no3 {
            width: 35%
        }

        .books-row.row2 .item.no1 .thumbnail.img2 .thumb_img, .books-row.row2 .item.no4 .thumbnail.img2 .thumb_img {
            padding-top: 68%
        }

        .books-row.row2 .item.no2 .thumbnail.img2 .thumb_img, .books-row.row2 .item.no3 .thumbnail.img2 .thumb_img {
            padding-top: 128%
        }

.book-info-cls .books-row {
    display: block
}

    .book-info-cls .books-row .item {
        float: left;
        width: 33.33333%
    }

        .book-info-cls .books-row .item .thumbnail .thumb_img {
            display: block;
            padding-top: 128%
        }

.bm-headline a, .books-row .item a {
    display: block
}

.books-row .space-1:last-child, .books-row .space-6:last-child {
    display: none
}

.box-20 .books-row .item {
    float: left;
    width: 33.33333%
}

    .box-20 .books-row .item .thumbnail .thumb_img {
        padding-top: 138%
    }

.bm-headline .thumbnail, .books-row .item .thumbnail {
    position: relative
}

    .books-row .item .thumbnail .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1.6rem;
        background-image: linear-gradient(0deg,rgba(0,0,0,.8),transparent);
        background-position: 0 100%;
        background-size: 100% 1.6rem;
        background-repeat: no-repeat;
        -o-background-size: 100% 1.6rem
    }

.thumb_img {
    overflow: hidden;
    width: 100%;
    height: 0;
    background-position: 50%;
    background-size: cover;
    transition: all .3s ease-in-out;
    transform: scale(1)
}

    .thumb_img:hover {
        transform: scale(1.07)
    }

.books-row .item .thumbnail .date {
    position: absolute;
    bottom: .7467rem;
    left: 2px;
    color: #fff;
    font-size: .2933rem
}

.bm-headline .thumbnail.no-bg:before, .books-row .item .thumbnail.no-bg:before, .books-row .item .thumbnail:before {
    background-image: none
}

.bm-headline .thumbnail, .books-row .item .thumbnail {
    overflow: hidden;
    border-radius: .1rem;
    background-image: url(../img/placeholder-unruly.png);
    background-position: 50%;
    background-size: cover
}

    .bm-headline .thumbnail .thumb_img, .books-row .item .thumbnail .thumb_img {
        display: block;
        padding-top: 60%;
        width: 100%
    }

.bm-headline.hd {
    margin: 0 auto .3rem
}

    .bm-headline.hd .thumbnail .thumb_img {
        padding-top: 60%
    }

    .bm-headline.hd .thumbnail .date {
        display: none
    }

    .bm-headline.hd .title {
        padding: .6em 0
    }

.bm-headline .thumbnail .chapter, .books-row .item .thumbnail .chapter {
    position: absolute;
    right: .5em;
    bottom: .5em;
    color: #fff;
    font-size: .32rem
}

.books-row .item .thumbnail .vip-free {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.4933rem;
    height: .5333rem;
    border-bottom-right-radius: .2667rem;
    background-image: -webkit-linear-gradient(-21deg,#f66,#ff682d);
    background-image: -ms-linear-gradient(-21deg,#f66 0,#ff682d 100%);
    color: #fff;
    text-align: center;
    font-size: .2933rem;
    line-height: .5333rem
}

.books-row .space-1 {
    width: 1px;
    background-color: #21293c
}

.books-row .space-6 {
    width: 6px;
    background-color: #21293c
}

.books-row .thumbnail.img1, .books-row .thumbnail.img2 {
    position: relative;
    display: flex;
    overflow: hidden;
    background-position: 50%;
    background-size: cover;
    justify-content: center;
    align-items: center
}

    .books-row .thumbnail.img1 .thumb_img {
        padding-top: 130%
    }

    .books-row .thumbnail.img2 .thumb_img {
        padding-top: 65%
    }

i.tagNEW, i.tagUp {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    display: block;
    width: auto;
    height: 16px;
    border: 0 solid #eda400;
    text-align: center;
    font-size: 12px;
    line-height: 14px
}

.books-rows .item .main .thumbnail i.tagNEW, .books-rows .item .main .thumbnail i.tagUp {
    top: 22px;
    left: 14px
}

.bf-books .item a .thumbnail i.tagNEW, .bf-books .item a .thumbnail i.tagUp {
    top: 12px;
    left: 14px
}

i.tagUp:after {
    background: #fff;
    color: #eda400;
    content: "UP"
}

i.tagNEW:after, i.tagUp:after {
    padding: 0 3px;
    border-radius: 6px 0 6px 0
}

i.tagNEW:after {
    background: #e3fff3;
    color: #2ea14d;
    content: "新"
}

.bm-headline a .title, .books-row .item a .title {
    display: block;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
    width: 100%;
    height: 0.5rem;
    font-size: 0.3733rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.bm-headline a .desc, .books-row .item a .desc, .books-row .item a .tags {
    padding-bottom: 1em;
    color: #a6a9b2;
    font-size: 0.2933rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-headline a .desc, .bm-headline a .title, .books-row .item a .desc, .books-row .item a .tags, .books-row .item a .title {
    overflow: hidden;
    color: #a6a9b2;
    text-overflow: ellipsis;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
}

.bm-headline a .title, .books-row .item a .title {
    color: #fff
}

.books-row .item a .tags {
    margin: 0
}

    .books-row .item a .tags span {
        margin-right: 5px
    }

.books-tags {
    float: left;
    display: block;
    margin: 0 .19rem .3rem;
    padding: .2rem .1rem;
    border-radius: .3rem;
    background-image: url(../img/tagbg.png);
    background-position: 50%
}

    .books-tags li {
        float: left;
        margin: .2rem .02rem;
        width: auto
    }

        .books-tags li a {
            padding: .1rem .4rem;
            height: .6rem;
            font-size: .35rem;
            Color: #a6a9b2
        }

.bm-headline .desc, .bm-headline a .title {
    padding-top: .6em
}

    .bm-headline a .title label.category {
        float: left
    }

    .bm-headline a .title label.fr {
        float: right
    }

        .bm-headline a .title label.fr i, .bm-headline a .title label.fr span {
            margin: 0 2px;
            padding: 0 3px;
            border: 1px solid #a6a9b2;
            border-radius: 6px;
            background: 0 0;
            color: #a6a9b2;
            font-size: .3rem
        }

.books-row .item input[type=checkbox] {
    display: none
}

.books-rows .item {
    position: relative
}

    .books-rows .item.none {
        display: none
    }

    .books-rows .item .main {
        position: relative;
        display: flex;
        padding: .1733rem .2667rem;
        align-items: center;
    }

        .books-rows .item .main:before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            content: "";
            transform: scaleY(.5)
        }

        .books-rows .item .main .body {
            padding-right: 7em
        }

        .books-rows .item .main .thumbnail {
            overflow: hidden;
            margin-right: 1em;
            border-radius: 0
        }

.books-rows.fav-rows .item .main .thumbnail .thumb_img {
    display: block;
    padding-top: 130%;
    width: 2.1rem;
    border-radius: .1rem
}

.badgeUp i {
    position: absolute;
    top: 14%;
    left: 4%;
    z-index: 1;
    display: block;
    padding: 0 3px;
    width: auto;
    height: 14px;
    border: 0 solid #eda400;
    border-radius: 6px 0 6px 0;
    background: hsla(0,0%,100%,.95);
    color: #eda400;
    text-align: center;
    font-size: 12px;
    line-height: 14px
}

    .badgeUp i:after {
        content: "UP"
    }

.books-rows.fav-rows .item .badgeUp i {
    left: 6%
}

.books-rows .item .main .body .title {
    margin-bottom: .1333rem;
    color: #fff;
    font-weight: 500;
    font-size: .4267rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.books-rows .item .main .body {
    overflow: hidden;
    flex: 1
}

    .books-rows .item .main .body .text {
        display: -webkit-box;
        overflow: hidden;
        margin: .2rem 0;
        border: 5px solid #36425a;
        border-radius: .1rem;
        background: #36425a;
        color: #a6a9b2;
        text-overflow: ellipsis;
        font-size: .28rem;
        line-height: .45rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .books-rows .item .main .body .textrow {
        display: -webkit-box;
        overflow: hidden;
        margin: .3rem 0;
        border-radius: .1rem;
        color: #a6a9b2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .books-rows .item .main .body .badge {
        display: flex;
        margin: .5em 0
    }

        .books-rows .item .main .body .badge i, .books-rows .item .main .body .badge span {
            position: relative;
            display: block;
            margin-right: .5em;
            padding: 0 3px;
            height: auto;
            color: #a6a9b2;
            font-size: .2667rem
        }

            .books-rows .item .main .body .badge i:last-child, .books-rows .item .main .body .badge span:last-child {
                margin-right: 0
            }

.books-rows.fav-rows .item .main {
    padding: .3733rem .4667rem
}

    .books-rows.fav-rows .item .main .body .badge span {
        padding: 1px 5px;
        background: #36425a;
        color: #64b1c1;
        cursor: pointer
    }

.books-rows .item .main .row, .books-rows .item .main .title {
    display: -webkit-box;
    overflow: hidden;
    margin: .0667rem 0;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.books-rows .item .main .row {
    color: #a6a9b2;
    font-size: .32rem
}

    .books-rows .item .main .row .date {
        color: #eda400;
        font-size: .32rem
    }

.books-rows .item .action {
    position: absolute;
    top: 50%;
    right: .48rem;
    transform: translateY(-50%)
}

    .books-rows .item .action .btn {
        display: block;
        padding: 0 .4rem;
        height: .7467rem;
        border-radius: .7467rem;
        background-color: #263146;
        color: #fff;
        font-size: .3733rem;
        line-height: .7467rem
    }

.books-rows .item .matche, .books-st .matche {
    color: #eda400 !important
}

.books-fluid .item {
    position: relative;
    margin-bottom: .16rem
}

    .books-fluid .item:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        height: 1px;
        content: "";
        transform: scaleY(.5)
    }

    .books-fluid .item a {
        display: block
    }

        .books-fluid .item a .thumbnail {
            position: relative
        }

            .books-fluid .item a .thumbnail img {
                display: block;
                width: 100%;
                border-radius: 3px
            }

            .books-fluid .item a .thumbnail .date {
                position: absolute;
                top: .1333rem;
                right: .1333rem
            }

                .books-fluid .item a .thumbnail .date i.tagUp {
                    position: relative;
                    top: 2px;
                    left: -5px;
                    display: inline-block;
                    margin: 0;
                    width: .32rem;
                    height: .32rem;
                    background: url(../img/home_icon_time.png) no-repeat 50%;
                    background-size: 100% 100%
                }

.books-fluid a .thumbnail .date > div {
    padding: 0 1em;
    height: .5867rem;
    border-radius: .32rem;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    line-height: .58rem
}

.books-fluid .item a .body {
    position: relative;
    display: flex;
    height: 1.8667rem;
    justify-content: center;
    flex-direction: column
}

    .books-fluid .item a .body .title {
        padding-bottom: .2em;
        font-size: .4267rem
    }

        .books-fluid .item a .body .title > span {
            font-weight: 600
        }

    .books-fluid .item a .body .desc {
        color: #999;
        font-size: .3467rem
    }

.books-fluid .item .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    height: 1.8667rem;
    align-items: center;
    justify-content: flex-end
}

    .books-fluid .item .footer a {
        display: block;
        color: #999;
        font-size: .3467rem
    }

        .books-fluid .item .footer a .icon-arrow {
            display: inline-block;
            margin-top: -3px;
            width: 12px;
            height: 12px;
            background-image: url(../img/bm-arrow-2.png);
            background-size: cover;
            vertical-align: middle
        }

.books-fluid .item .category span {
    display: inline-block;
    margin-top: -3px;
    margin-right: 5px;
    padding: 0 .4em;
    height: .4rem;
    border-radius: 4px;
    color: #fff;
    vertical-align: middle;
    font-size: .2667rem;
    line-height: .4rem
}

.books-fluid .item .category .st_2, .books-fluid .item .category .st_4 {
    background-color: #a046e5
}

.books-fluid .item .category .st_3 {
    background-color: #ff7182
}

.vip_books_bottom {
    display: flex;
    padding: .32rem .32rem .2rem;
    justify-content: space-between;
    box-pack: space-between
}

.books_bottom_btn {
    display: flex;
    width: 4.56rem;
    height: 1.0667rem;
    border-radius: 1.0667rem;
    background-color: #36425a;
    color: #9fa7ba;
    font-size: .32rem;
    align-items: center;
    box-align: center;
    justify-content: center;
    box-pack: center
}

    .books_bottom_btn.v-hidden {
        visibility: visible;
        background: #41485a;
        color: #41485a;
        text-indent: -9999999px
    }

        .books_bottom_btn.v-hidden i {
            visibility: hidden
        }

.box-20 .books_bottom_btn {
    width: 4.3rem
}

.icon_vip_more {
    width: .35rem;
    height: .35rem;
    background: url(../img/vip_icon_more.png) no-repeat;
    background-size: 100% 100%
}

.icon_vip_more, .icon_vip_refresh {
    display: inline-block;
    margin-right: .1333rem
}

.icon_vip_refresh {
    width: .32rem;
    height: .2933rem;
    background: url(../img/vip_icon_refresh.png) no-repeat;
    background-size: 100% 100%
}

#scroll-books {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
    padding: 0 .26rem;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    #scroll-books::-webkit-scrollbar {
        display: none
    }

    #scroll-books .item {
        float: left;
        margin: 0 .06rem;
        padding-bottom: 0;
        width: 3.8667rem;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto
    }

        #scroll-books .item.none {
            display: none
        }

        #scroll-books .item:last-child {
            margin-right: 0
        }

        #scroll-books .item .thumbnail {
            position: relative;
            overflow: hidden;
            width: 3.8667rem
        }

            #scroll-books .item .thumbnail:before {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                content: ""
            }

            #scroll-books .item .thumbnail .chapter {
                position: absolute;
                right: .5em;
                bottom: .5em;
                color: #fff;
                font-size: .32rem
            }

            #scroll-books .item .thumbnail .thumb_img {
                display: block;
                padding-top: 58%;
                width: 100%;
                border-radius: .1rem
            }

            #scroll-books .item .thumbnail i.date {
                position: absolute;
                bottom: .3em;
                left: .3em;
                display: inline-block;
                width: .4rem;
                height: .4rem;
                border-radius: 1.067rem;
                background-color: rgba(0,0,0,.5);
                background-image: url(../img/icon_desc_his.png);
                background-size: cover
            }

        #scroll-books .item a {
            display: block
        }

            #scroll-books .item a .title {
                padding-top: .4em;
                padding-bottom: .2em;
                color: #fff;
                font-size: .3733rem
            }

            #scroll-books .item a .tags {
                color: #a6a9b2;
                font-size: .2933rem
            }

            #scroll-books .item a .tags, #scroll-books .item a .title {
                overflow: hidden;
                margin: 0;
                text-overflow: ellipsis;
                white-space: nowrap;
                -o-text-overflow: ellipsis
            }

                #scroll-books .item a .tags i, #scroll-books .item a .tags span {
                    margin-right: 5px
                }

        #scroll-books .item .thumbnail .rank {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 26px;
            height: 20px;
            border-top-left-radius: .1333rem;
            background-image: -webkit-linear-gradient(-45deg,#e7e7e7,#d3d3d3 34%,#bfbfbf 81%);
            background-image: -ms-linear-gradient(-45deg,#e7e7e7 0,#d3d3d3 34%,#bfbfbf 81%);
            color: #fff;
            text-align: center;
            font-size: .4rem
        }

            #scroll-books .item .thumbnail .rank.on1 {
                background-image: -webkit-linear-gradient(-45deg,#e11,#ff6344)
            }

            #scroll-books .item .thumbnail .rank.on2 {
                background-image: -webkit-linear-gradient(-45deg,#ff7200,#ff8c00 66%)
            }

            #scroll-books .item .thumbnail .rank.on3 {
                background-image: -webkit-linear-gradient(-45deg,#fe9002,#fead08 34%,#fdca0e 81%)
            }

.home_bangdan_list {
    margin: 0 .2667rem;
    padding: 0;
    border-radius: .3rem;
    background-color: #0f1627;
    background-image: url(../img/vip_icon_huanguan.png);
    background-position: -30px 18.5px;
    background-size: 107px 70px;
    background-repeat: no-repeat
}

    .home_bangdan_list h2.title {
        padding: .26rem 0 0;
        color: #36425a;
        text-align: center;
        font-weight: 400;
        font-size: .5rem
    }

    .home_bangdan_list .home_list_header {
        position: relative;
        padding: 0 .26rem
    }

        .home_bangdan_list .home_list_header > ul {
            display: flex
        }

            .home_bangdan_list .home_list_header > ul > li {
                margin-right: .6667rem;
                height: 1.2rem;
                color: #a6a9b2;
                font-size: .3467rem;
                line-height: 1.2rem
            }

                .home_bangdan_list .home_list_header > ul > li.active {
                    color: #eda400;
                    font-weight: 600;
                    font-size: .5067rem;
                    transition: font-size .25s
                }

        .home_bangdan_list .home_list_header .home_bangdan_more {
            position: absolute;
            top: .4rem;
            right: 0;
            padding: .05rem .2rem;
            border-bottom-left-radius: .2667rem;
            border-top-left-radius: .2667rem;
            background: hsla(0,0%,100%,.3);
            color: #a6a9b2;
            font-size: .32rem
        }

.home_list_header .home_bangdan_more > i {
    display: inline-block;
    margin-top: -2px;
    width: .2133rem;
    height: .2133rem;
    background-image: url(../img/bm-arrow.png);
    background-size: cover;
    vertical-align: middle
}

.home_bangdan_list .home_list_body {
    display: block;
    padding: .2667rem;
    border-bottom: 1px solid #0f1627;
    border-bottom-right-radius: .2667rem;
    border-bottom-left-radius: .2667rem;
    background: #36425a
}

    .home_bangdan_list .home_list_body li {
        margin-bottom: .2667rem
    }

.home_bangdan_list .home_list_item {
    position: relative;
    display: flex;
    line-height: 1.6;
    align-items: center
}

    .home_bangdan_list .home_list_item .img {
        overflow: hidden;
        margin-right: .1667rem;
        width: 1.8rem;
        height: 2.1333rem
    }

    .home_bangdan_list .home_list_item .thumb_img {
        width: 1.8rem;
        height: 2.1333rem;
        border-radius: .1rem
    }

.home_list_a_aside .title {
    color: #fff;
    font-size: .3733rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
}

.home_list_a_aside .subtitle {
    color: #a6a9b2;
    font-size: .32rem
}

    .home_list_a_aside .subtitle span {
        margin-right: 10px
    }

.home_list_item .rank .num {
    height: .9067rem;
    color: #fff;
    text-align: center;
    font-size: .32rem;
    line-height: .8067rem
}

.home_list_item .rank {
    position: absolute;
    right: .32rem;
    width: .74rem;
    height: .9067rem;
    background-size: 100% 100%
}

    .home_list_item .rank.num-1 {
        background-image: url(../img/icon_one.png)
    }

    .home_list_item .rank.num-2 {
        background-image: url(../img/icon_two.png)
    }

    .home_list_item .rank.num-3 {
        background-image: url(../img/icon_three.png)
    }

    .home_list_item .rank.num-4 .num, .home_list_item .rank.num-5 .num, .two .home_list_item .rank .num {
        height: .9067rem;
        color: #fff;
        text-align: center;
        font-size: .32rem;
        line-height: .8067rem
    }

    .home_list_item .rank.num-4, .home_list_item .rank.num-5, .two .home_list_item .rank {
        background-image: url(../img/icon_0.png)
    }

.cm-topbar.bg-white {
    position: relative;
    z-index: 9991
}

    .cm-topbar.bg-white:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        height: 1px;
        content: "";
        transform: scaleY(.5)
    }

.cm-topbar__container .pull-left, .cm-topbar__container .pull-right {
    position: absolute;
    transform: translateY(-50%)
}

.cm-topbar__container .pull-right {
    top: 38%;
    right: 0
}

.cm-topbar__container .pull-left {
    top: 48%;
    left: 0
}

    .cm-topbar__container .pull-left button {
        overflow: hidden;
        width: 1.1733rem;
        height: 1.1733rem;
        border: 0;
        background-color: transparent;
        background-position: 50%;
        background-size: .48rem;
        background-repeat: no-repeat;
        text-indent: -999px
    }

        .cm-topbar__container .pull-left button i {
            display: block;
            margin-left: .3rem;
            width: .7733rem;
            height: .7733rem;
            border-radius: .6rem;
            background-color: #36425a;
            background-position: 50%;
            background-size: .48rem;
            background-repeat: no-repeat
        }

        .cm-topbar__container .pull-left button.back-btn, .cm-topbar__container .pull-left button i {
            background-image: url(../img/navbar_icon_back.png)
        }

        .cm-topbar__container .pull-left button.close-btn {
            background-image: url(../img/close.png)
        }

        .cm-topbar__container .pull-left button:hover i {
            background-color: #36425a;
            cursor: pointer
        }

.cm-topbar__container .center-title {
    color: #a6a9b2;
    font-size: .4533rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
}

    .cm-topbar__container .center-title.stitle {
        width: 70%
    }

.cm-topbar__container .pull-right .btn-text {
    width: 1.8667rem;
    height: 1.1733rem;
    border: 0;
    background-color: #21293c;
    color: #67b299;
    font-size: .4rem
}

.cm-topbar__container .pull-right a.btn-text {
    display: block;
    text-align: center;
    line-height: 1.5rem
}

.aftips, .cm-topbar.none-line:before {
    display: none
}

.aftips {
    position: fixed;
    right: 0;
    bottom: 2rem;
    left: 0;
    z-index: 95;
    margin: .8rem auto 0;
    width: 5rem;
    height: 1.1733rem;
    border: 0;
    border-radius: 1.1733rem;
    background-image: url(../img/action.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-size: .4267rem;
    line-height: 1.1733rem
}

    .aftips.on {
        bottom: 5rem
    }

    .aftips.off, .aftips.on {
        transition: all .2s ease-in-out
    }

    .aftips.off {
        bottom: 3rem
    }

.z-index-99 {
    position: relative;
    z-index: 95;
    background: #fff
}

.cm-topbar.bg-white.topMenu {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 999997;
    width: 100%;
    border-bottom: 0 solid #eee
}

    .cm-topbar.bg-white.topMenu .cm-topbar__container .pull-left button.back-btn {
        background-color: #21293c
    }

    .cm-topbar.bg-white.topMenu .cm-topbar__container .center-title {
        overflow: hidden;
        width: 65%;
        text-overflow: ellipsis;
        white-space: nowrap;
        -o-text-overflow: ellipsis
    }

    .cm-topbar.bg-white.topMenu.on {
        top: 0;
        transition: all .2s ease-in-out
    }

    .cm-topbar.bg-white.topMenu.off {
        top: -5rem;
        transition: all .2s ease-in-out
    }

.bottomMenu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 96;
    width: 100%
}

    .bottomMenu.on {
        bottom: 0;
        transition: all .2s ease-in-out
    }

    .bottomMenu.off {
        bottom: -5rem;
        transition: all .2s ease-in-out
    }

.epListFrame {
    position: relative;
    z-index: 97
}

    .epListFrame .bg {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        display: none;
        width: 100%;
        height: 150%;
        background: linear-gradient(180deg,transparent,rgba(0,0,0,.7) 70%)
    }

    .epListFrame .data {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 98;
        float: left;
        overflow: auto;
        width: 5rem;
        height: 100%;
        background: #21293c
    }

        .epListFrame .data ul.list_area {
            float: left;
            margin-top: 1.1733rem;
            margin-bottom: 1.4rem;
            width: 100%
        }

        .epListFrame .data ul li {
            float: left;
            width: 100%
        }

            .epListFrame .data ul li a {
                display: block;
                margin: 0 auto;
                padding: 0;
                width: 100%;
                height: 1rem;
                border-bottom: 0 dashed #eee;
                background: url(../img/bm-arrow.png) no-repeat 10px;
                background-size: .2rem;
                color: #9fa7ba;
                text-align: center;
                font-size: .35rem;
                line-height: 1rem
            }

                .epListFrame .data ul li a.active {
                    background: #3f4b63 url(../img/my_icon_fb_v.png) no-repeat 10px;
                    background-size: .4rem
                }

                .epListFrame .data ul li a span {
                    margin-left: 10px;
                    font-size: .25rem
                }

                    .epListFrame .data ul li a span.free {
                        color: #6eb57c
                    }

                    .epListFrame .data ul li a span.time {
                        color: #84a4f1
                    }

                    .epListFrame .data ul li a span.vip {
                        color: #d186f7
                    }

                    .epListFrame .data ul li a span.coin {
                        color: #e5ab6f
                    }

                        .epListFrame .data ul li a span.coin em {
                            font-size: .35rem
                        }

                    .epListFrame .data ul li a span.buy, .epListFrame .data ul li a span.read {
                        color: #999
                    }

                    .epListFrame .data ul li a span.his {
                        color: #1ba8f2
                    }

    .epListFrame.on .data {
        right: 0;
        transition: all .2s ease-in-out
    }

    .epListFrame.off .data {
        right: -6rem;
        transition: all .2s ease-in-out
    }

    .epListFrame .sort {
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        float: left;
        width: 100%;
        height: 1.1733rem;
        background: #21293c;
        text-indent: .3rem;
        font-size: .35rem
    }

        .epListFrame .sort a {
            float: right;
            display: block;
            padding-right: .3rem;
            border: 0;
            background-color: transparent;
            color: #a6a9b2;
            line-height: 1.1733rem
        }

            .epListFrame .sort a i {
                display: inline-block;
                margin-top: -3px;
                margin-left: 2px;
                width: .24rem;
                height: .32rem;
                background-image: url(../img/icon_desc.png);
                background-size: cover;
                background-repeat: no-repeat;
                vertical-align: middle
            }

            .epListFrame .sort a.desc i {
                background-image: url(../img/icon_asc.png)
            }

            .epListFrame .sort a.active {
                display: none
            }

.cm-tabbar {
    height: 1.3067rem
}

    .cm-tabbar.fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        margin: 0 auto;
        width: 100%;
        background-color: #262f40
    }

        .cm-tabbar.fixed.safari {
            height: 1.6067rem
        }

    .cm-tabbar:before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        height: 1px;
        background-color: #21293c;
        content: "";
        transform: scaleY(.5)
    }

.cm-tabs {
    position: sticky;
    top: -1px;
    z-index: 999;
    padding-top: 0;
    height: 1.28rem
}

    .cm-tabs:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

    .cm-tabs ul {
        display: flex;
        height: 1.28rem;
        font-size: .3467rem;
        line-height: 1.2rem;
        justify-content: center
    }

        .cm-tabs ul li {
            text-align: center;
            flex: 1
        }

            .cm-tabs ul li a {
                position: relative;
                display: block;
                height: 1.28rem;
                color: #a6a9b2;
                font-size: inherit
            }

                .cm-tabs ul li a.active {
                    color: #64b1c1;
                    font-weight: 700;
                    font-size: .5rem;
                    transition: all .1s ease-in-out;
                    pointer-events: none
                }

    .cm-tabs.lianzai {
        border-top: 1px solid #1b2335;
        background: #21293c
    }

        .cm-tabs.lianzai:before {
            margin: 0 auto;
            width: 96%
        }

        .cm-tabs.lianzai a {
            color: #a6a9b2
        }

        .cm-tabs.lianzai ul li a.active {
            color: #67b299
        }

    .cm-tabs.v-hidden {
        visibility: visible
    }

        .cm-tabs.v-hidden .action {
            display: none
        }

        .cm-tabs.v-hidden .col a.active, .cm-tabs.v-hidden a {
            color: #ddd
        }

    .cm-tabs ul.tabs-auto {
        height: 1.28rem;
        line-height: .5rem
    }

        .cm-tabs ul.tabs-auto li {
            padding: 0 .64rem;
            flex: none
        }

            .cm-tabs ul.tabs-auto li a {
                position: relative;
                display: block;
                margin-top: .2rem;
                padding: .15rem .3rem;
                height: .6rem;
                border-radius: .6rem;
                font-size: inherit;
                font-size: .4rem;
                line-height: .6rem
            }

                .cm-tabs ul.tabs-auto li a:hover {
                    background-color: #36425a;
                    transition: all .3s ease-in-out
                }

    .cm-tabs .action-group {
        position: absolute;
        top: 0;
        right: .4rem;
        display: flex;
        height: 1.28rem;
        align-items: center
    }

        .cm-tabs .action-group .col {
            position: relative
        }

        .cm-tabs .action-group button {
            overflow: hidden;
            width: .6rem;
            height: .6rem;
            border: 0;
            background-color: transparent;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            text-indent: -99999999px
        }

            .cm-tabs .action-group button.del-btn {
                background-image: url(../img/search_icon_del.png)
            }

            .cm-tabs .action-group button.kf-btn {
                width: .8rem;
                height: .8rem;
                background-image: url(../img/n19__my_icon_setting2.png)
            }

    .cm-tabs .pull-left {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

        .cm-tabs .pull-left button {
            overflow: hidden;
            width: 1.1733rem;
            height: 1.1733rem;
            border: 0;
            background-color: transparent;
            text-indent: -999999px
        }

        .cm-tabs .pull-left .back-btn i {
            display: block;
            margin-left: .3rem;
            width: .7733rem;
            height: .7733rem;
            border-radius: .6rem;
            background-color: #36425a;
            background-image: url(../img/navbar_icon_back.png);
            background-position: 50%;
            background-size: .48rem;
            background-repeat: no-repeat
        }

        .cm-tabs .pull-left .back-btn:hover i {
            background-color: #36425a;
            cursor: pointer
        }

.books-st {
    margin: .1rem auto;
    padding: .2rem .32rem;
    width: auto;
    background-color: #262f40;
    color: #a6a9b2;
    font-size: .32rem
}

.cate-box {
    position: relative;
    z-index: 3;
    background-color: #21293c
}

.cm-tabs.cate-box__row {
    z-index: 2;
    padding: .18rem 0;
    height: auto;
    background-color: #21293c
}

.cate-rows .item a.main {
    align-items: center
}

    .cate-rows .item a.main .body {
        padding: 0;
    }

    .cate-rows .item a.main em {
        margin-left: 5px;
        color: #00b19a;
        font-size: .28rem
    }

    .cate-rows .item a.main .thumbnail .thumb_img {
        display: block;
        width: 2.5rem;
        height: 3.7rem;
        border-radius: .1rem
    }

    .cate-rows .item a.main:active {
        background-color: #36425a
    }

.cate-box.fixed {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    width: 100%
}

.cm-topbar.bg-white.rank-nav {
    border: 0;
    background: 0 0
}

    .cm-topbar.bg-white.rank-nav:before {
        border: 0
    }

    .cm-topbar.bg-white.rank-nav .center-title {
        color: #fff
    }

    .cm-topbar.bg-white.rank-nav .cm-topbar__container .pull-left button.back-btn {
        background-image: url(../img/icon_tack_top.png);
        background-size: .6rem
    }

    .cm-topbar.bg-white.rank-nav .cm-topbar__container .action button.icon-search-btn {
        background-image: url(../img/n19__top-search.png)
    }

.rankbar {
    border: 0;
    background: #3f4759
}

    .rankbar .mescroll-upwarp .upwarp-nodata {
        color: #a6a9b2
    }

.rankbg {
    position: relative;
    top: -1rem;
    height: 5rem;
    border: 0;
    background-color: #21293c;
    background-image: url(../img/rankbg3.png);
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
    color: #fff
}

    .rankbg h2 {
        padding: 1.2rem 0 0 3%;
        font-weight: 700;
        font-size: 1rem
    }

    .rankbg h3 {
        padding: .2rem 0 0 3%;
        font-size: .3467rem
    }

.rankbox {
    position: relative;
    top: -1.8rem;
    z-index: 1;
    margin-bottom: 0;
    min-height: 20rem;
    border: 5px solid #3f4759;
    border-top: 0;
    border-radius: .4rem;
    background: #21293c
}

    .rankbox .cm-tabs {
        margin-top: 0;
        height: 1.5rem;
        border: 0;
        background: #3f4759
    }

        .rankbox .cm-tabs:before {
            border-bottom: 20px solid #21293c
        }

    .rankbox .rank-tabs {
        margin-top: -5px;
        border-top: 5px solid #3f4759;
        border-top-right-radius: .4rem;
        border-top-left-radius: .4rem;
        background: #21293c
    }

    .rankbox .bf-books {
        border-radius: .4rem
    }

    .rankbox .books-row {
    }

        .rankbox .books-row .item a {
            position: relative;
            margin: .2rem .1rem;
            padding: .2rem .2rem .1rem
        }

            .rankbox .books-row .item a, .rankbox .books-row .item a .thumbnail.img1 {
                border-radius: .2rem;
                background-color: #3f4759
            }

                .rankbox .books-row .item a em {
                    position: absolute;
                    top: -.2rem;
                    right: -.1rem;
                    z-index: 5;
                    width: .8rem;
                    height: 1rem;
                    background-position: 100% 100%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    color: #fff;
                    text-align: center;
                    font-size: .28rem;
                    line-height: .8rem
                }

        .rankbox .books-row .item:first-child a em {
            background-image: url(../img/icon_one.png)
        }

        .rankbox .books-row .item:nth-child(3) a em {
            background-image: url(../img/icon_two.png)
        }

        .rankbox .books-row .item:nth-child(5) a em {
            background-image: url(../img/icon_3.png)
        }

        .rankbox .books-row .item a .title {
            color: #fff;
            text-align: center;
            font-size: .35rem
        }

.bf-books {
    padding: .2133rem 0
}

    .bf-books .item a {
        position: relative;
        display: flex;
        padding: .2133rem .2667rem
    }

        .bf-books .item a:active {
            background-color: #263146;
            opacity: 1
        }

        .bf-books .item a .thumbnail {
            overflow: hidden;
            margin-right: 1em;
            border-radius: 0
        }

            .bf-books .item a .thumbnail .thumb_img {
                display: block;
                width: 3.04rem;
                height: 4rem;
                border-radius: .1rem
            }

        .bf-books .item a .body {
            display: flex;
            overflow: hidden;
            flex: 1;
            flex-direction: column;
            justify-content: center
        }

            .bf-books .item a .body .title {
                color: #fff;
                font-size: .4rem
            }

            .bf-books .item a .body .row, .bf-books .item a .body .tags {
                color: #a6a9b2;
                font-size: .32rem
            }

            .bf-books .item a .body .row, .bf-books .item a .body .tags, .bf-books .item a .body .title {
                overflow: hidden;
                margin: .12rem 0;
                text-overflow: ellipsis;
                white-space: nowrap;
                -o-text-overflow: ellipsis
            }

            .bf-books .item a .body .title {
                margin-top: 0
            }

            .bf-books .item a .body .tags {
                display: flex
            }

                .bf-books .item a .body .tags i, .bf-books .item a .body .tags span {
                    position: relative;
                    display: block;
                    margin-right: .5em;
                    padding: 0 3px;
                    height: .4rem;
                    text-align: center;
                    text-indent: 0;
                    font-size: .2667rem;
                    line-height: .4rem
                }

                    .bf-books .item a .body .tags i:last-child, .bf-books .item a .body .tags span:last-child {
                        margin-right: 0
                    }

            .bf-books .item a .body .text {
                display: -webkit-box;
                overflow: hidden;
                margin: .12rem 0;
                border: 10px solid #36425a;
                border-radius: .1rem;
                background: #36425a;
                color: #a6a9b2;
                text-overflow: ellipsis;
                font-size: .28rem;
                line-height: .45rem;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3
            }

        .bf-books .item a .rank {
            position: absolute;
            top: .3rem;
            right: .32rem
        }

            .bf-books .item a .rank .num {
                width: 1.0133rem;
                height: 1.0133rem;
                color: #fff;
                text-align: center;
                font-size: .5333rem;
                line-height: 1.0133rem
            }

            .bf-books .item a .rank.num-1 .num {
                font-weight: 600
            }

        .bf-books .item a .rank {
            width: 1.0133rem;
            height: 1.0133rem;
            background-image: url(../img/icon_num.png);
            background-size: 1.0133rem
        }

            .bf-books .item a .rank .num {
                color: #c3c3c3
            }

            .bf-books .item a .rank.num-1, .bf-books .item a .rank.num-2, .bf-books .item a .rank.num-3 {
                width: 1.0133rem;
                height: 1.28rem;
                background-size: 1.0133rem 1.28rem
            }

            .bf-books .item a .rank.num-1 {
                background-image: url(../img/icon_one.png)
            }

            .bf-books .item a .rank.num-2 {
                background-image: url(../img/icon_2.png)
            }

            .bf-books .item a .rank.num-3 {
                background-image: url(../img/icon_3.png)
            }

                .bf-books .item a .rank.num-1 .num, .bf-books .item a .rank.num-2 .num, .bf-books .item a .rank.num-3 .num {
                    color: #fff
                }

            .bf-books .item a .rank.num-0 {
                display: none
            }

        .bf-books .item a .body.mr0 {
            margin-right: 0
        }

.bg-white {
    z-index: 9991;
    background-color: #21293c
}

.mb-12 {
    margin-bottom: .32rem
}

.mb-20 {
    margin-bottom: 20px
}

.mb-100 {
    margin-bottom: 100px
}

.mt-12 {
    margin-top: .32rem
}

.mt-20 {
    margin-top: 20px
}

.offset-5 {
    height: .1333rem
}

.offset-5, .offset-10 {
    background-color: #1b2334
}

.offset-10 {
    height: .2667rem
}

.offset-32 {
    height: .8rem;
    background-color: #1b2334
}

.has-tabbar {
    height: 1.3067rem
}

.user-menu .item {
    position: relative
}

    .user-menu .item .title span {
        margin-left: 10px;
        color: #aaa;
        font-size: .25rem
    }

    .user-menu .item .btn {
        position: relative;
        display: flex;
        margin: 0;
        padding: .4rem .2667rem;
        border: 0;
        background-color: #21293c;
        align-items: center
    }

    .user-menu .item .action {
        position: absolute;
        top: 50%;
        right: .4rem;
        transform: translateY(-50%)
    }

        .user-menu .item .action a {
            display: block;
            width: 1.4rem;
            height: .8rem;
            border-radius: .64rem;
            background: #39455d;
            text-align: center;
            font-size: .3467rem;
            line-height: .8rem
        }

    .user-menu .item.task .action a {
        width: auto;
        background-color: #21293c;
        color: #999
    }

    .user-menu .item .btn i[class^=icon-] {
        display: block;
        margin-right: .2667rem;
        width: .64rem;
        height: .64rem;
        background-size: cover;
        background-repeat: no-repeat
    }

    .user-menu .item .btn .title {
        margin-right: .2667rem;
        color: #9fa7ba;
        font-size: .4rem;
        flex: 1
    }

    .user-menu .item .btn .subtitle {
        margin-left: .16rem;
        color: #a6a9b2;
        font-size: .32rem
    }

    .user-menu .item .btn .title sup {
        display: inline-block;
        margin-left: 2px;
        width: .48rem;
        border-radius: .32rem;
        background-color: #f43400;
        color: #fff;
        text-align: center;
        font-size: .2667rem
    }

    .user-menu .item .btn .title .txt {
        padding-top: 5px;
        color: #999;
        font-size: .28rem
    }

    .user-menu .item .btn .pull-left {
        margin-right: auto
    }

        .user-menu .item .btn .pull-left .sub {
            margin-top: .05rem;
            color: #999;
            font-size: .32rem
        }

    .user-menu .item .btn .pull-right {
        display: flex;
        align-items: center
    }

    .user-menu .item .btn .text {
        margin-top: -1px;
        margin-right: 3px;
        color: #a6a9b2;
        font-size: .3467rem
    }

    .user-menu .item .btn .pull-right .icon_doc {
        display: inline-block;
        margin-right: .0667rem;
        width: .1867rem;
        height: .1867rem;
        border-radius: 50%
    }

    .user-menu .item .btn .pull-right .arrow {
        width: .4rem;
        height: .4rem;
        background-image: url(../img/icon_arrowh.png);
        background-size: cover;
        background-repeat: no-repeat
    }

    .user-menu .item .btn .icon-account {
        background-image: url(../img/my_icon_cell_acount.png)
    }

    .user-menu .item .btn .icon-coupon {
        background-image: url(../img/my_icon_cell_coupon.png)
    }

    .user-menu .item .btn .icon-setting1 {
        background-image: url(../img/my_icon_cell_down.png)
    }

    .user-menu .item .btn .icon-setting4 {
        background-image: url(../img/my_icon_cell_help.png)
    }

    .user-menu .item .btn .icon-setting5 {
        background-image: url(../img/my_icon_cell_seting.png)
    }

    .user-menu .item .btn .icon-setting2 {
        background-image: url(../img/n19__my_icon_setting2.png)
    }

    .user-menu .item .btn .icon-setting3 {
        background-image: url(../img/n19__my_icon_setting3.png)
    }

    .user-menu .item .btn .icon-setting6 {
        background-image: url(../img/my_icon_cell_renwu.png)
    }

    .user-menu .item .btn .icon-setting8 {
        background-image: url(../img/my_icon_cell_his.png)
    }

    .user-menu .item .btn .icon-setting9 {
        background-image: url(../img/my_icon_cell_fava.png)
    }

    .user-menu .item .btn .icon-setting7 {
        background-image: url(../img/my_icon_cell_xiaoxi.png)
    }

    .user-menu .item .btn .icon-setting11 {
        background-image: url(../img/my_icon_cell_bd.png)
    }

    .user-menu .item .btn .icon-setting12 {
        background-image: url(../img/my_icon_fb.png)
    }

    .user-menu .item .btn .icon-setting13 {
        background-image: url(../img/my_icon_cell_by.png)
    }

    .user-menu .item .btn .icon-setting14 {
        background-image: url(../img/my_icon_cell_ps.png)
    }

    .user-menu .item .btn .icon-vip {
        background-image: url(../img/my_icon_cell_vip.png)
    }

    .user-menu .item .btn .icon-ad {
        background-image: url(../img/my_icon_cell_ad.png)
    }

.user-menu.vipskin .item .btn .icon-account {
    background-image: url(../img/my_icon_cell_acount_v.png)
}

.user-menu.vipskin .item .btn .icon-coupon {
    background-image: url(../img/my_icon_cell_coupon_v.png)
}

.user-menu.vipskin .item .btn .icon-setting1 {
    background-image: url(../img/my_icon_cell_down_v.png)
}

.user-menu.vipskin .item .btn .icon-setting4 {
    background-image: url(../img/my_icon_cell_help_v.png)
}

.user-menu.vipskin .item .btn .icon-setting5 {
    background-image: url(../img/my_icon_cell_seting_v.png)
}

.user-menu.vipskin .item .btn .icon-setting6 {
    background-image: url(../img/my_icon_cell_renwu_v.png)
}

.user-menu.vipskin .item .btn .icon-setting7 {
    background-image: url(../img/my_icon_cell_xiaoxi_v.png)
}

.user-menu.vipskin .item .btn .icon-setting8 {
    background-image: url(../img/my_icon_cell_his_v.png)
}

.user-menu.vipskin .item .btn .icon-setting9 {
    background-image: url(../img/my_icon_cell_fava_v.png)
}

.user-menu.vipskin .item .btn .icon-setting11 {
    background-image: url(../img/my_icon_cell_bd_v.png)
}

.user-menu.vipskin .item .btn .icon-setting12 {
    background-image: url(../img/my_icon_fb_v.png)
}

.user-menu.vipskin .item .btn .icon-setting13 {
    background-image: url(../img/my_icon_cell_by_v.png)
}

.user-menu.vipskin .item .btn .icon-setting14 {
    background-image: url(../img/my_icon_cell_ps_v.png)
}

.user-menu.vipskin .item .btn .icon-vip {
    background-image: url(../img/my_icon_cell_vip_v.png)
}

.user-menu.vipskin .item .btn .icon-ad {
    background-image: url(../img/my_icon_cell_ad_v.png)
}

.user-menu .item .xiaoxi_num {
    display: block;
    margin-right: .1333rem;
    width: .5333rem;
    height: .5333rem;
    border-radius: .5333rem;
    background-color: #ff3b30;
    color: #fff;
    text-align: center;
    font-size: .2933rem;
    line-height: .5333rem
}

.user-menu .item .btn .icon-auto {
    background-image: url(../img/n19__my_icon_auto.png)
}

.user-menu .item .btn .typo-red {
    color: #a6a9b2
}

.user-menu.appts .item .action a {
    background-image: url(../img/action.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff
}

.user-menu.appts .item.browser .action a {
    background: #eee;
    color: #999
}

.user-menu.appts .item.browser .btn .title {
    color: #777
}

.user-menu.appts .item .btn .title {
    color: #67b299
}

.cancelLogin {
    margin: .8rem auto 0;
    width: 8rem;
    border: 0;
    border-radius: 1.1733rem;
    background-color: #36425a;
    background-image: url(../img/btngray.png);
    background-position: -10px 30px;
    background-size: 50px;
    background-repeat: no-repeat;
    color: #9fa7ba;
    font-size: .3733rem;
    line-height: 1.1733rem
}

.cancelLogin, .loginbtn {
    display: block;
    height: 1.1733rem
}

.loginbtn {
    padding: 1rem 0;
    width: 100%;
    border-bottom: 10px solid #1b2334
}

    .loginbtn, .loginbtn .cancelLogin {
        margin: 0 auto
    }

        .loginbtn.h0 {
            padding: .5rem 0 0;
            height: auto
        }

        .loginbtn #BtnReg {
            display: block;
            margin: .5rem auto;
            width: 100%;
            color: #67b299;
            text-align: center;
            font-size: .4rem
        }

.auto-switch {
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 1.386rem;
    height: .746rem;
    outline: 0;
    border: 1px solid #dcdcdc;
    border-radius: .746rem;
    background-color: #dcdcdc;
    transition: background-color .1s,border .1s
}

    .auto-switch:before {
        width: 1.333rem;
        background-color: #dcdcdc;
        -webkit-transition: -webkit-transform .35s cubic-bezier(.45,1,.4,1);
        -moz-transition: transform .35s cubic-bezier(.45,1,.4,1),-moz-transform .35s cubic-bezier(.45,1,.4,1);
        -o-transition: transform .35s cubic-bezier(.45,1,.4,1);
        -o-transition: -o-transform .35s cubic-bezier(.45,1,.4,1);
        transition: -webkit-transform .35s cubic-bezier(.45,1,.4,1);
        transition: transform .35s cubic-bezier(.45,1,.4,1);
        transition: transform .35s cubic-bezier(.45,1,.4,1),-webkit-transform .35s cubic-bezier(.45,1,.4,1),-moz-transform .35s cubic-bezier(.45,1,.4,1),-o-transform .35s cubic-bezier(.45,1,.4,1);
        transition: transform .35s cubic-bezier(.45,1,.4,1),-webkit-transform .35s cubic-bezier(.45,1,.4,1)
    }

    .auto-switch:after, .auto-switch:before {
        position: absolute;
        top: 0;
        left: 0;
        height: .693rem;
        border-radius: .693rem;
        content: " "
    }

    .auto-switch:after {
        width: .693rem;
        background-color: #21293c;
        box-shadow: 0 1px 3px rgba(0,0,0,.4);
        -webkit-transition: -webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
        -moz-transition: transform .35s cubic-bezier(.4,.4,.25,1.35),-moz-transform .35s cubic-bezier(.4,.4,.25,1.35);
        -o-transition: transform .35s cubic-bezier(.4,.4,.25,1.35);
        -o-transition: -o-transform .35s cubic-bezier(.4,.4,.25,1.35);
        transition: -webkit-transform .35s cubic-bezier(.4,.4,.25,1.35);
        transition: transform .35s cubic-bezier(.4,.4,.25,1.35);
        transition: transform .35s cubic-bezier(.4,.4,.25,1.35),-webkit-transform .35s cubic-bezier(.4,.4,.25,1.35),-moz-transform .35s cubic-bezier(.4,.4,.25,1.35),-o-transform .35s cubic-bezier(.4,.4,.25,1.35);
        transition: transform .35s cubic-bezier(.4,.4,.25,1.35),-webkit-transform .35s cubic-bezier(.4,.4,.25,1.35)
    }

    .auto-switch:checked {
        border-color: #67b299;
        background-color: #67b299
    }

        .auto-switch:checked:before {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            -ms-transform: scale(0)
        }

        .auto-switch:checked:after {
            -webkit-transform: translateX(.6133rem);
            -moz-transform: translateX(.6133rem);
            -o-transform: translateX(.6133rem);
            transform: translateX(.6133rem);
            -ms-transform: translateX(.6133rem)
        }

.cm-nr {
    position: absolute;
    top: 1.28rem;
    right: 0;
    bottom: 1.3067rem;
    left: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center
}

.cm-nr__container .text {
    margin-top: .5em;
    color: #9fa7ba;
    text-align: center;
    font-size: .3467rem
}

.cm-nr__container .action {
    margin-top: 32px
}

    .cm-nr__container .action .btn {
        padding: 0 .8533rem;
        height: 1.0667rem;
        border: 0;
        border-radius: .5333rem;
        font-size: .4rem
    }

    .cm-nr__container .action a.btn {
        display: inline-block;
        line-height: 1.0667rem
    }

.bd-carousel {
    position: relative;
    overflow: hidden
}

.bd-carousel__container .item a {
    display: flex;
    padding: .4rem .5333rem
}

    .bd-carousel__container .item a:active {
        background-color: #21293c;
        opacity: 1
    }

.bd-carousel__container .item .desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .16rem;
    color: #a6a9b2;
    text-overflow: ellipsis;
    font-size: .32rem;
    line-height: .48rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis
}

.bd-carousel__container .item .thumbnail {
    margin-right: .2667rem
}

    .bd-carousel__container .item .thumbnail img {
        display: block;
        width: 2.0267rem;
        height: 2.72rem;
        border-radius: .1rem
    }

.bd-carousel__container .item .body {
    overflow: hidden;
    flex: 1
}

    .bd-carousel__container .item .body .title {
        overflow: hidden;
        margin-top: .2667rem;
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .3733rem;
        -o-text-overflow: ellipsis
    }

.bd-carousel.swiper-container-horizontal > .swiper-pagination-bullets {
    position: absolute;
    right: .5333rem;
    bottom: .4rem;
    left: .5333rem;
    z-index: 2;
    width: auto;
    text-align: right
}

.bd-carousel .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 6px
}

.bd-carousel.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px;
    background-color: #67b299;
    opacity: .2
}

.bd-carousel .swiper-pagination-bullet-active {
    opacity: 1 !important
}

.bd-carousel:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    transform: scaleY(.5)
}

.cate-box__nav {
    position: relative;
    display: flex;
    padding: .32rem 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .cate-box__nav:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

    .cate-box__nav li, .cate-box__row .col {
        margin: 2px 0 0;
        width: 14%;
        text-align: center;
        font-size: .3467rem
    }

        .cate-box__nav li a, .cate-box__row .col a {
            display: block;
            margin: 0;
            padding: 0;
            height: .72rem;
            color: #a6a9b2;
            line-height: .72rem
        }

            .cate-box__nav li a.active, .cate-box__row .col a.active {
                position: relative;
                color: #67b299;
                font-size: .4rem;
                transition: all .1s ease-in-out;
                -webkit-transform: scale(1.04);
                -moz-transform: scale(1.04);
                -o-transform: scale(1.04);
                transform: scale(1.04);
                -ms-transform: scale(1.04)
            }

.cate-box__type {
    position: relative;
    display: none;
    padding-left: 3%
}

.cate-box__row .col {
    margin-top: 0;
    text-align: left
}

.cate-box__row.sgx .col {
    width: 12.125%
}

.cate-box__type:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    transform: scaleY(.5)
}

.cate-box__row {
    display: flex;
    padding: .08rem 0
}

    .cate-box__row.spx:before {
        margin: 0 auto;
        width: 96%;
        border-bottom: 1px solid #1b2335
    }

    .cate-box__row .col a {
        font-size: .3467rem
    }

    .cate-box__row .action {
        position: absolute;
        right: .32rem;
        bottom: .22rem;
        width: 1.6rem;
        height: .64rem;
        border-radius: .8rem;
        background: #253147
    }

        .cate-box__row .action button {
            width: 100%;
            height: 100%;
            border: 0;
            background: url(../img/cate-zk.png) no-repeat 50%;
            background-color: transparent;
            background-size: 70%
        }

        .cate-box__row .action.fit button {
            background: url(../img/cate-gb.png) no-repeat 50%;
            background-size: 70%
        }

    .cate-box__row.spx {
        padding-left: 3.3%;
        width: 96.7%
    }

    .cate-box__row.spx, .cm-searchbar {
        position: sticky;
        top: -1px;
        z-index: 99;
        float: left;
        overflow: hidden;
        margin: 0;
        height: auto;
        background-color: #21293c
    }

.cm-searchbar {
    width: 100%
}

.cm-searchbar, .cm-searchbar__container {
    height: 1.6rem
}

.cm-searchbar__container {
    display: flex;
    align-items: center
}

.cm-searchbar__title {
    width: 1.6rem;
    text-align: center;
    font-size: .4rem;
    line-height: 1.1733rem
}

.cm-searchbar:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-bottom: 1px solid #f0f2f5;
    content: "";
    transform: scaleY(.5)
}

.cm-searchbar.none-border:before {
    display: none
}

.cm-searchbar__form, .cm-searchbar__form .field {
    display: flex;
    height: .8rem;
    flex: 1;
    align-items: center
}

    .cm-searchbar__form .field {
        background-color: #9fa7ba
    }

        .cm-searchbar__form .field .input {
            height: .8rem;
            border: 0;
            background-color: transparent;
            color: #36425a;
            font-size: 14px;
            flex: 1
        }

        .cm-searchbar__form .field .icon-search {
            margin-right: .16rem;
            margin-left: .32rem;
            width: .48rem;
            height: .48rem;
            background-image: url(../img/nav_icon_search.png);
            background-size: .48rem
        }

    .cm-searchbar__form .action {
        margin-right: .4rem
    }

        .cm-searchbar__form .action .btn-text {
            border: 0;
            background-color: transparent;
            color: #a6a9b2;
            font-size: .4rem
        }

    .cm-searchbar__form .field .close {
        overflow: hidden;
        margin: 0 .24rem;
        width: .48rem;
        height: .48rem;
        border: 0;
        background-color: transparent;
        background-image: url(../img/search_icon_clean.png);
        background-size: cover;
        background-repeat: no-repeat;
        text-indent: -999px
    }

.user-topbar {
    display: flex;
    padding: .8rem 0 .3rem;
    height: 1.8667rem;
    background-position: top;
    background-size: cover;
    align-items: center
}

    .user-topbar.isuser, .user-topbar.vipskin {
        background-image: url(../img/ic_employee_header.png)
    }

.user-topbar__content {
    position: relative;
    display: flex;
    padding: 0 .5333rem;
    flex: 1;
    align-items: center
}

    .user-topbar__content .avatar {
        margin-right: .2667rem
    }

        .user-topbar__content .avatar img {
            width: 1.44rem;
            height: 1.44rem;
            border: 2px solid #fff;
            border-radius: 1.44rem
        }

.user-topbar.vipskin .user-topbar__content .avatar {
    position: relative;
    top: -4px;
    margin-right: .2667rem;
    width: 56px;
    height: 62px;
    background: url(../img/vip_maozi.png);
    background-size: 100% 100%
}

    .user-topbar.vipskin .user-topbar__content .avatar img {
        display: block;
        margin: 8px 0 0 2px;
        width: 1.3333rem;
        height: 1.3333rem;
        border: none
    }

.my_vip_h_cont .icon_vip, .user-topbar__content .icon_vip {
    position: absolute;
    top: 0;
    right: .5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    background: url(../img/vip.png) no-repeat 50%;
    background-size: 1rem
}

.my_vip_h_cont .icon_user, .user-topbar__content .icon_user {
    position: absolute;
    top: 0;
    right: .6rem;
    display: block;
    width: 1.6rem;
    height: .7rem;
    border-radius: .8533rem;
    background: hsla(0,0%,100%,.1);
    color: #9fa7ba;
    text-align: center;
    font-size: .3rem;
    line-height: .75rem
}

.user-topbar__content .body {
    width: 0;
    flex: 1
}

    .user-topbar__content .body .title {
        overflow: hidden;
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .6133rem;
        -o-text-overflow: ellipsis
    }

.icon-when {
    display: inline-block;
    width: .3rem;
    height: .3rem;
    background: url(../img/detail_icon_top1.png) no-repeat;
    background-size: 100%
}

.user-topbar__action {
    margin-right: .4rem
}

    .user-topbar__action button {
        margin: 0;
        padding: 0;
        width: 2.2933rem;
        height: .8533rem;
        border: 0;
        border-radius: .8533rem;
        background-color: #fc0;
        color: #111;
        font-size: .4rem
    }

        .user-topbar__action button[disabled] {
            background-color: #d8a71c;
            color: #fff
        }

.user-topbar__content .row .text {
    margin-top: .1333rem;
    color: #a6a9b2;
    font-size: .32rem
}

    .user-topbar__content .row .text span b {
        margin-left: 10px
    }

.user-topbar.vipskin .user-topbar__content .row .text {
    color: #9fa7ba
}

.user_money_panel {
    display: flex;
    padding: 0 0 .5333rem;
    align-items: center
}

    .user_money_panel .line {
        width: 1px;
        height: .7333rem;
        background: linear-gradient(180deg,hsla(0,0%,100%,0),#36425a 20%,#a6a9b2 50%,#36425a 80%,hsla(0,0%,100%,0))
    }

    .user_money_panel .left, .user_money_panel .right {
        text-align: center;
        flex: 1
    }

    .user_money_panel .title {
        color: #f8b62d;
        font-weight: 500;
        font-size: .6933rem
    }

        .user_money_panel .title b {
            margin: 0 1px;
            color: #f8b62d;
            font-size: .45rem
        }

        .user_money_panel .title small {
            color: #9fa7ba;
            font-weight: 400;
            font-size: .3rem
        }

    .user_money_panel .subtitle {
        color: #9fa7ba;
        font-size: .32rem
    }

.user_vip_panel {
    margin: 0 auto;
    height: 3.6rem;
    background-image: url(../img/my_panel_bg.png);
    background-size: cover
}

    .user_vip_panel .head {
        position: relative;
        display: flex;
        padding: .2667rem .9333rem;
        align-items: center
    }

        .user_vip_panel .head .title {
            background-image: url(../img/myvip_myvip_icon_timefree9.png);
            background-size: 20px;
            background-repeat: no-repeat;
            color: #fff;
            text-indent: 25px;
            font-size: .3467rem
        }

    .user_vip_panel.vipskin .head .title {
        background-image: url(../img/myvip_myvip_icon_timefree8.png);
        color: #f8b62d
    }

    .user_vip_panel .head .btn {
        margin-left: auto;
        padding: 0 .2667rem;
        height: .8rem;
        border: none;
        border-radius: .8rem;
        background-image: -webkit-linear-gradient(-40deg,#ffd742 19%,#ffa62b 97%);
        color: #333;
        font-weight: 700;
        font-size: .3733rem;
        line-height: .8rem;
        animation: breath 1s linear .9s infinite alternate
    }

    .user_vip_panel .ul {
        display: flex;
        padding: 0 .8rem;
        justify-content: space-between
    }

        .user_vip_panel .ul .item p {
            margin-top: .1333rem;
            color: #d3d3dd;
            text-align: center;
            font-size: .3rem
        }

        .user_vip_panel .ul .item img {
            display: block;
            margin: 0 auto;
            width: 1.1rem;
            border: 0
        }

.my_vip_buy {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 2.5rem;
    background: url(../img/my_vip_buy_bg.png);
    background-size: 100% 100%
}

    .my_vip_buy .container {
        float: left;
        display: block;
        padding: .4rem 7% 0 5%;
        width: 88%;
        height: 1.4rem
    }

        .my_vip_buy .container .icon_jindo {
            float: right;
            display: inline-block;
            overflow: hidden;
            margin: 0 0 0 -.3rem;
            width: 1.15rem;
            height: 1rem;
            background: url(../img/jinbii.png);
            background-size: cover
        }

        .my_vip_buy .container .title {
            float: left;
            display: inline-block;
            overflow: hidden;
            margin: 0 .3rem;
            width: 80%;
            height: 1.4rem;
            color: #67b299;
            text-align: left;
            font-weight: 500;
            font-size: .35rem;
            line-height: .55rem
        }

        .my_vip_buy .container .btn {
            float: right;
            display: inline-block;
            overflow: hidden;
            margin: -1.2rem 0 0;
            padding: 0 .2rem;
            width: 2.2rem;
            height: .8rem;
            border: none;
            border-radius: 100px;
            background-image: linear-gradient(90deg,#d3a672,#a37547);
            color: #fff;
            font-weight: 500;
            font-size: .3rem
        }

.mask-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0,0,0,.6)
}

.profile-notice {
    padding: .32rem .4rem;
    background-color: #36425a;
    color: #eda400;
    font-size: .3467rem
}

.profile-action, .profile-item {
    background-color: #21293c
}

.profile-notice:before {
    display: inline-block;
    margin-top: -3px;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background-image: url(../img/me_icon_reward1.png);
    background-size: 16px;
    background-repeat: no-repeat;
    content: "";
    vertical-align: middle;
    -o-background-size: 16px
}

.profile-item .d-flex {
    padding: 0 .4rem;
    height: 1.4667rem;
    color: #9fa7ba;
    font-size: .4rem;
    line-height: 1.4667rem;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between
}

    .profile-item .d-flex, .profile-item .d-flex .pull-right {
        display: flex;
        align-items: center
    }

        .profile-item .d-flex .pull-right .text {
            color: #a6a9b2;
            font-size: .3467rem
        }

        .profile-item .d-flex .pull-right img {
            display: block
        }

        .profile-item .d-flex .avatar {
            position: relative;
            overflow: hidden;
            width: 1.0667rem;
            height: 1.0667rem;
            border-radius: 1.0667rem
        }

            .profile-item .d-flex .avatar input[type=file] {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0
            }

.profile-item.has-line {
    position: relative
}

    .profile-item.has-line:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

.profile-item .picker-text {
    border: 0;
    background-color: transparent;
    color: #a6a9b2;
    text-align: left;
    font-size: .4rem
}

.profile-item .sec-text, input[id^=picker-]::-webkit-input-placeholder {
    color: #fff
}

.profile-item .picker-text::placeholder {
    font-size: .3rem
}

.profile-item .pull-right .arrow {
    display: block;
    margin-top: 2px;
    width: .4rem;
    height: .4rem;
    background-image: url(../img/icon_arrowh.png);
    background-size: cover;
    background-repeat: no-repeat
}

.profile-action button {
    width: 100%;
    height: 1.4667rem;
    border: 0;
    background-color: transparent;
    color: #eda400;
    text-align: center;
    font-size: .4267rem;
    line-height: 1.4667rem
}

.kw-popular__head {
    padding: .2667rem .32rem
}

    .kw-popular__head .title {
        color: #64b1c1;
        font-size: .4rem
    }

.kw-popular__list {
    display: flex;
    padding: 0 .16rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-flow: row wrap
}

    .kw-popular__list .item {
        margin: .16rem
    }

        .kw-popular__list .item a {
            display: block;
            padding: 0 .32rem;
            border-radius: 4px;
            background-color: #262f40;
            color: #a6a9b2;
            font-size: .3467rem;
            line-height: .8rem
        }

.history-box {
    margin-top: .32rem
}

.history-head {
    display: flex;
    padding: .32rem .32rem .16rem;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between;
    align-items: center
}

    .history-head .title {
        color: #a6a9b2;
        font-size: .32rem
    }

.history-list .item {
    position: relative
}

    .history-list .item:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

    .history-list .item a {
        display: block;
        padding: .12rem;
        color: #9fa7ba;
        font-size: .32rem
    }

.history-head .action button {
    width: .48rem;
    height: .48rem;
    border: 0;
    background-color: transparent;
    background-image: url(../img/search_icon_del.png);
    background-size: cover;
    background-repeat: no-repeat
}

.history-list .item a:before {
    display: inline-block;
    margin-top: -3px;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background-image: url(../img/search_icon_his.png);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    vertical-align: middle
}

.sug-list {
    display: none;
    color: #fff;
    font-size: 0
}

.sug-list__item {
    position: relative
}

    .sug-list__item:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        transform: scaleY(.5)
    }

    .sug-list__item a {
        display: block;
        padding: .32rem .64rem;
        background: url(../img/bm-arrow.png) no-repeat 8px;
        background-size: 16px;
        color: #9fa7ba;
        font-size: .4rem
    }

        .sug-list__item a .matche {
            color: #eda400
        }

        .sug-list__item a em {
            margin-left: 5px;
            color: #00b19a;
            font-size: .28rem
        }

.book-hero {
    position: relative;
    top: -1.2rem;
    z-index: 9991;
    margin-bottom: -1.8rem;
    background: #36425a
}

    .book-hero .bg {
        display: block;
        width: 100%
    }

.comicThumb_back {
    z-index: 9994;
    overflow: hidden;
    margin-bottom: .3rem
}

    .comicThumb_back, .comicThumb_back div {
        position: relative;
        display: block;
        width: 100%;
        height: 6rem
    }

        .comicThumb_back div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0 auto;
            background-position: 50% 10%;
            background-size: cover;
            background-repeat: no-repeat
        }

            .comicThumb_back div.coverimg {
                z-index: 9994
            }

.book-hero.nocover .book-hero__detail {
    bottom: .6rem
}

.book-hero:after {
    position: absolute;
    top: 60%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9995;
    height: 40%;
    background: linear-gradient(180deg,transparent 25%,rgba(0,0,0,.24) 70%,rgba(0,0,0,.65));
    content: ""
}

.book-hero:after, .tags {
    display: block;
    width: 100%
}

.tags {
    overflow: hidden;
    margin: 0 0 10px;
    height: .6rem
}

    .tags a {
        display: inline-block;
        margin: 0 .1rem .2rem 0;
        padding: 0 .5em;
        height: .48rem;
        border: 1px solid #a6a9b2;
        border-radius: .48rem;
        background-color: transparent;
        color: #a6a9b2;
        table-layout: fixed;
        text-indent: 0;
        word-wrap: break-all;
        line-height: .48rem;
        word-break: normal
    }

    .tags#stag h3 {
        float: left;
        color: #a6a9b2;
        text-indent: .3rem;
        font-weight: 700
    }

.book-hero__bar, .book-hero__detail {
    z-index: 9996
}

.book-hero__bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    margin-top: .1rem;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between
}

.book-hero__detail {
    width: 100%;
    color: #fefbf8
}

    .book-hero__detail .title {
        width: 100%;
        color: #fefbf8;
        text-indent: .4733rem;
        font-weight: 500;
        font-size: .5067rem
    }

        .book-hero__detail .title.center {
            position: relative;
            top: -.3rem;
            text-align: center
        }

.nocover .book-hero__detail .title.center {
    top: -1.2rem
}

.book-hero__detail .title span {
    margin-left: 10px;
    font-weight: 400;
    font-size: .3rem
}

.book-hero__bar button {
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat
}

.book-hero__bar .btn-back {
    overflow: hidden;
    margin-top: .3rem;
    margin-left: .3rem;
    width: .64rem;
    height: .64rem;
    border-radius: .8rem;
    background-color: rgba(0,0,0,.5);
    background-image: url(../img/detail_icon_back.png);
    background-position: 50%;
    background-size: 20px;
    background-repeat: no-repeat;
    text-indent: -999px;
    -o-background-size: 20px
}

.book-hero__bar .pull-left, .book-hero__bar .pull-right {
    display: flex;
    align-items: center
}

.book-hero__bar .pull-right {
    display: block;
    overflow: hidden;
    margin-top: .3rem;
    margin-right: .1rem;
    width: 1.6rem;
    height: .64rem
}

.book-hero__bar .btn-share {
    display: flex;
    width: 1.6rem;
    height: .64rem;
    border: 0;
    border-radius: .32rem;
    background-image: url(../img/btn-share.png);
    background-size: cover;
    line-height: .64rem;
    align-items: center;
    box-align: center;
    justify-content: center;
    box-pack: center
}

    .book-hero__bar .btn-share i {
        width: .5rem;
        height: .5rem;
        background-image: url(../img/n19__my_iicon_share.png);
        background-size: cover
    }

    .book-hero__bar .btn-share span {
        color: #fff;
        font-size: .35rem
    }

.book-hero__flag {
    position: absolute;
    top: 1.2rem;
    right: .32rem;
    z-index: 9996;
    display: none
}

    .book-hero__flag .free {
        display: inline-block;
        width: 2.3rem;
        height: .5rem;
        border-radius: .48rem;
        background-image: url(../img/action.png);
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
        table-layout: fixed;
        text-align: center;
        text-indent: 0;
        word-wrap: break-all;
        line-height: .5rem;
        word-break: normal
    }

        .book-hero__flag .free em {
            font-size: .3rem
        }

.book-tab {
    position: relative;
    display: flex;
    height: 1.5rem;
    background-color: #21293c;
    line-height: 1.5rem
}

    .book-tab:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        border-bottom: 1px solid #1b2334;
        content: "";
        transform: scaleY(.5)
    }

    .book-tab .item {
        font-size: .4267rem;
        flex: 1
    }

        .book-tab .item a {
            position: relative;
            display: block;
            color: #a6a9b2;
            text-align: center;
            text-indent: .3733rem
        }

            .book-tab .item a.active {
                color: #67b299;
                font-weight: 700;
                transition: all .5s ease-in-out
            }

            .book-tab .item a span {
                margin-left: 5px;
                font-weight: 400;
                font-size: .2rem
            }

.book-container {
    float: left;
    width: 100%;
    background-color: #21293c
}

.book-container__head {
    display: flex;
    padding: 0 .3733rem .4rem;
    color: #a6a9b2;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between
}

    .book-container__detail a, .book-container__head a {
        color: #a6a9b2
    }

    .book-container__head .title {
        font-weight: 700;
        font-size: .4267rem
    }

    .book-container__head .update {
        font-size: .3rem
    }

        .book-container__head .update a {
            font-size: .35rem
        }

        .book-container__head .update span {
            margin: 0 5px
        }

.book-container__detail {
    padding: .32rem .3733rem;
    color: #a6a9b2;
    font-size: .3733rem;
    line-height: .64rem
}

    .book-container__detail .text {
        padding: .3rem;
        border-radius: .2rem;
        background-color: #263146
    }

    .book-container__detail .title {
        margin-bottom: .2rem;
        color: #fff;
        font-weight: 700
    }

.book-container__author {
    padding: 0 .3733rem .24rem;
    color: #a6a9b2;
    font-size: .32rem
}

.book-container__row {
    display: flex;
    width: 100%;
    background-color: #1b2334;
    align-items: center
}

    .book-container__row .box__row {
        display: flex;
        margin: 2% 2% 0;
        padding: .3rem 0;
        width: 96%;
        border-radius: .15rem;
        background-color: #21293c;
        align-items: center
    }

    .book-container__row .line {
        width: 1px;
        height: .8533rem;
        background: linear-gradient(180deg,hsla(0,0%,100%,0),#36425a 20%,#a6a9b2 50%,#36425a 80%,hsla(0,0%,100%,0));
        transform: scaleX(.5)
    }

    .book-container__row .col {
        text-align: center;
        flex: 1
    }

        .book-container__row .col .number {
            margin-bottom: 10px;
            color: #64b1c1;
            font-size: .4267rem
        }

        .book-container__row .col .text {
            color: #a6a9b2;
            font-size: .3733rem;
            cursor: pointer
        }

        .book-container__row .col.digg .text {
            margin: 0 auto;
            padding: 0 3px;
            width: 1.6rem;
            height: .64rem;
            border-radius: .32rem;
            background-color: #36425a;
            line-height: .64rem
        }

            .book-container__row .col.digg .text.active {
                background-color: #21293c;
                color: #a6a9b2
            }

        .book-container__row .col.digg .text, .book-container__row .col.fav .text, .book-container__row .col.fav .text#del {
            color: #a6a9b2
        }

            .book-container__row .col.fav .text i {
                display: inline-block;
                margin-right: 3px;
                width: .3rem;
                height: .3rem;
                background-image: url(../img/num_add.png);
                background-size: cover
            }

.seg-box {
    padding: 0 .32rem .32rem;
    color: #a6a9b2;
    font-size: 13px;
    line-height: .5067rem
}

.episode-box {
    background-color: #21293c
}

.episode-head {
    padding: 0 .32rem;
    height: 1.1733rem;
    font-size: .3467rem;
    line-height: 1.1733rem
}

    .episode-head .title {
        float: left;
        color: #a6a9b2;
        font-size: .3rem
    }

        .episode-head .title span {
            margin: 0 5px;
            color: #a6a9b2
        }

        .episode-head .title a {
            color: #a6a9b2
        }

    .episode-head .sort {
        float: right;
        color: #a6a9b2
    }

        .episode-head .sort a {
            display: block;
            border: 0;
            background-color: transparent;
            color: #a6a9b2
        }

            .episode-head .sort a i {
                display: inline-block;
                margin-top: -3px;
                margin-left: 2px;
                width: .24rem;
                height: .32rem;
                background-image: url(../img/icon_desc.png);
                background-size: cover;
                background-repeat: no-repeat;
                vertical-align: middle
            }

            .episode-head .sort a.desc i {
                background-image: url(../img/icon_asc.png)
            }

            .episode-head .sort a.active {
                display: none
            }

.episode_area {
    float: left;
    display: block;
    margin: 10px 2%;
    width: 96%;
    min-height: 9rem
}

    .episode_area ul li {
        float: left;
        margin: 10px auto 0;
        width: 100%
    }

    .episode_area .item {
        width: 100%
    }

        .episode_area .item a {
            display: flex;
            width: 100%
        }

        .episode_area .item .thumb_wp {
            position: relative;
            overflow: hidden;
            margin: 1px 5px 2px 0;
            height: 1.8rem;
            border: 0;
            border-radius: .1333rem
        }

.box__row200 {
    display: flex;
    padding: .3rem 0;
    width: 100%;
    border-radius: .15rem;
    background-color: #21293c;
    align-items: center;
}

.box-200 {
    float: left;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .2rem;
    background-color: #21293c;
}

.episode_area .item .thumb_wp .thumb_img {
    display: inline-block;
    height: 100%;
    border: 0
}

.episode_area .item .info_wp {
    flex-grow: 1
}

.episode_area .item .infoBox {
    display: flex;
    height: 96%;
    border-radius: .1333rem;
    background-color: #263146;
    justify-content: space-between
}

.episode_area .item .left {
    display: table;
    width: 80%;
    height: 100%;
    flex: 0 0 auto
}

    .episode_area .item .left .box {
        display: table-cell;
        padding-left: 10px;
        vertical-align: middle;
        line-height: .5rem
    }

        .episode_area .item .left .box span {
            display: inline-block
        }

        .episode_area .item .left .box .title {
            color: #fff;
            font-weight: 500;
            font-size: .3733rem
        }

        .episode_area .item .left .box .subTitle {
            display: -webkit-box;
            overflow: hidden;
            color: #a6a9b2;
            text-overflow: ellipsis;
            font-size: .2933rem;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }

        .episode_area .item .left .box .pubDate {
            color: #a6a9b2;
            font-size: .32rem
        }

.episode_area .item .thumb_wp .bg_mask {
    display: none
}

.episode_area .item .thumb_wp.coin .bg_mask, .episode_area .item .thumb_wp.his .bg_mask, .episode_area .item .thumb_wp.time .bg_mask, .episode_area .item .thumb_wp.vip .bg_mask {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: .1333rem;
    background-color: rgba(0,0,0,.5)
}

.episode_area .item .thumb_wp.his .bg_mask {
    background-color: hsla(0,0%,100%,.8)
}

.episode_area .item .thumb_wp.coin .icon_desc_lock, .episode_area .item .thumb_wp.his .icon_desc_lock, .episode_area .item .thumb_wp.time .icon_desc_lock, .episode_area .item .thumb_wp.vip .icon_desc_lock {
    position: absolute;
    bottom: .1333rem;
    left: .1333rem;
    width: .64rem;
    height: .64rem
}

    .episode_area .item .thumb_wp.coin .icon_desc_lock.coin {
        background: url(../img/icon_desc_lock.png);
        background-size: 100% 100%
    }

    .episode_area .item .thumb_wp.time .icon_desc_lock.time {
        background: url(../img/icon_desc_unlock.png);
        background-size: 100% 100%
    }

    .episode_area .item .thumb_wp.vip .icon_desc_lock.vip {
        top: 50%;
        left: 50%;
        background: url(../img/icon_desc_vip_c.png);
        background-size: 100% 100%;
        transform: translate(-50%,-50%)
    }

    .episode_area .item .thumb_wp.his .icon_desc_lock.his {
        border-radius: 50%;
        background: url(../img/icon_desc_his.png);
        background-color: rgba(0,0,0,.8);
        background-size: 100% 100%
    }

.episode_area ul.txtlist li {
    margin: 1% 2%;
    padding: 0 2%;
    width: 42%;
    border-radius: .1rem;
    background: #263146
}

    .episode_area ul.txtlist li:nth-child(2n+2) {
        margin-right: 0
    }

    .episode_area ul.txtlist li a {
        display: block;
        width: 100%;
        height: 1.3rem
    }

.episode_area ul.txtlist .item .infoBox {
    display: flex;
    padding-right: 5px;
    height: 100%;
    border: 0;
    border-radius: 0;
    justify-content: space-between
}

.episode_area ul.txtlist li:nth-child(n+3) .item .infoBox {
    border-top: 0 solid #f0f2f5
}

.episode_area ul.txtlist li .item .left .box {
    padding-left: 0;
    line-height: .55rem
}

    .episode_area ul.txtlist li .item .left .box .subTitle {
        display: block;
        overflow: hidden;
        height: .55rem;
        color: #999;
        font-size: .2933rem;
        line-height: .55rem;
        flex: auto
    }

.episode_area ul.txtlist li .thumb_wp, .txtlist li .pubDate {
    display: none
}

.episode_area .right {
    display: table;
    height: 100%;
    flex: 0 0 auto
}

    .episode_area .right .box {
        display: table-cell;
        vertical-align: middle
    }

    .episode_area .right .btn {
        float: left;
        overflow: hidden;
        margin-right: 10px;
        padding: 0 .15rem;
        height: .5rem;
        border: 0;
        border-radius: .2rem;
        color: #fff;
        font-size: .25rem;
        line-height: .4rem
    }

.episode_area ul.txtlist .right .btn {
    position: relative;
    right: -8px
}

.episode_area .right .btn.free {
    background: #6eb57c
}

.episode_area .right .btn.time {
    background: #84a4f1
}

.episode_area .right .btn.vip {
    background: #d186f7
}

.episode_area .right .btn.coin {
    background: #000
}

    .episode_area .right .btn.coin em {
        font-size: .3rem
    }

.episode_area .right .btn.buy, .episode_area .right .btn.read {
    background: #999
}

.episode_area .right .btn.his {
    background: #1ba8f2
}

.episode-list__action {
    position: relative
}

    .episode-list__action:before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        border-top: 1px solid #f0f2f5;
        content: "";
        transform: scaleY(.5)
    }

    .episode-list__action button {
        width: 100%;
        height: 1.4667rem;
        border: 0;
        background-color: transparent;
        font-size: .3733rem;
        line-height: 1.4667rem
    }

        .episode-list__action button i {
            display: inline-block;
            margin-top: -3px;
            width: .32rem;
            height: .32rem;
            background-image: url(../img/a_icon_arrow.png);
            background-size: cover;
            background-repeat: no-repeat;
            vertical-align: middle
        }

.read-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    overflow: hidden;
    height: 1.34rem;
    background-color: #36425a
}

.read-comment {
    display: block;
    color: #ff8f0d;
    line-height: 1.34rem
}

.read-bar .icon-edit {
    display: inline-block;
    margin-top: -3px;
    margin-right: 5px;
    width: .5rem;
    height: .5rem;
    background-image: url(../img/detail_icon_comment.png);
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle
}

.read-bar__container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    height: 1.34rem;
    line-height: 1.34rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    align-items: center
}

    .read-bar__container .body {
        float: left;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -moz-box;
        overflow: hidden;
        padding: 0;
        width: 70%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        -moz-box-flex: 1;
        flex: 1;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        -moz-box-pack: center;
        justify-content: center
    }

        .read-bar__container .body .chapter {
            margin-right: 2%;
            width: 26%;
            color: #fff;
            text-align: center;
            font-size: .3733rem;
            margin-left: 10px;
        }

        .read-bar__container .body .title {
            overflow: hidden;
            margin-right: 1em;
            width: 50%;
            color: #a6a9b2;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .3rem;
            -o-text-overflow: ellipsis
        }

        .read-bar__container .body .home {
            overflow: hidden;
            margin-left: 2%;
            width: 20%;
            border-left: 1px solid #3c4961;
            text-align: center;
            line-height: .45rem
        }

            .read-bar__container .body .home i.icon-home {
                display: block;
                overflow: hidden;
                margin: .2rem auto 0;
                width: .6rem;
                height: .6rem;
                background-image: url(../img/n19__home_tabbar_icon_home_n.png);
                background-position: 50%;
                background-size: 100%;
                background-repeat: no-repeat
            }

            .read-bar__container .body .home span {
                color: #a6a9b2;
                font-size: .28rem
            }

    .read-bar__container .action {
        width: 28%;
        background-image: url(../img/action.png);
        background-size: cover;
        background-repeat: no-repeat
    }

        .read-bar__container .action a {
            display: block;
            color: #fff;
            text-align: center;
            font-size: .4267rem;
            line-height: 1.34rem
        }

    .read-bar.safari, .read-bar.safari .read-bar__container, .read-bar.safari .read-bar__container .action a, .read-bar__container .body {
        height: 1.54rem
    }

        .read-bar.safari .read-bar__container .body .home i.icon-home {
            margin: .1rem auto 0
        }

.ticket {
    margin: 0 .4rem .64rem
}

.episode-detail {
    position: relative;
    z-index: 0;
    display: block;
    margin: 0 auto;
    padding-top: 1.1733rem;
    width: 100%;
    max-width: 768px;
    text-align: center
}

    .episode-detail figure.cImg {
        position: relative;
        z-index: 1;
        text-align: center
    }

        .episode-detail figure.cImg, .episode-detail figure.cImg img {
            float: left;
            clear: both;
            margin: 0 auto;
            padding: 0;
            max-width: 720px;
            background: #21293c;
            width: 100%;
        }

            .episode-detail figure.cImg img {
                width: 100%;
                height: auto
            }

            .episode-detail figure.cImg.mh300 {
                display: flex;
                margin: auot;
                width: 100%;
                min-height: 500px;
                text-align: center;
                align-items: center
            }

                .episode-detail figure.cImg.mh300 img {
                    width: 100px;
                    height: 100px
                }

    .episode-detail p {
        display: none;
        margin-top: 20px;
        width: 60px;
        border: 2px solid #333;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 16px
    }

        .episode-detail .imgbg, .episode-detail p.p0 {
            display: none
        }

    .episode-detail .mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        z-index: 3;
        display: none;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        max-width: 768px;
        background: 0 0;
        background-image: linear-gradient(-180deg,rgba(51,51,51,.2),#21293c)
    }

    .episode-detail.hidden {
        overflow: hidden;
        min-height: 30vh
    }

    .episode-detail.off {
        overflow: hidden;
        height: 1520px
    }

.episode-tips button {
    display: none;
    margin: 0 2%;
    padding-top: 2rem;
    width: 96%;
    height: 0;
    max-width: 640px;
    border: 0;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer
}

    .episode-tips button.logintips {
        background-image: url(../../logintips.png)
    }

    .episode-tips button.buytips {
        background-image: url(../../buytips.png)
    }

    .episode-tips button.apptips {
        background-image: url(../../apptips.png)
    }

.episode-side {
    position: relative;
    display: flex;
    padding: 0;
    background-color: #21293c
}

    .episode-side:before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        border-bottom: 1px solid #1b2334;
        content: "";
        transform: scaleY(.5)
    }

    .episode-side .col {
        color: #9fa7ba;
        text-align: center;
        font-size: .4rem;
        flex: 1
    }

        .episode-side .col button {
            width: 100%;
            height: 2.5rem;
            border: 0;
            background-color: transparent;
            color: inherit;
            font-size: inherit
        }

            .episode-side .col button:hover {
                background-color: #36425a;
                cursor: pointer
            }

        .episode-side .col i[class^=icon-] {
            display: block;
            margin: 0 auto .5em;
            width: .7rem;
            height: .7rem;
            background-size: 100% 100%;
            background-repeat: no-repeat
        }

        .episode-side .col .icon-fav {
            background-image: url(../img/bar1_nor2.png)
        }

        .episode-side .col .icon-dir {
            background-image: url(../img/detail.png)
        }

        .episode-side .col .icon-laud {
            background-image: url(../img/ic_like_nor.png)
        }

        .episode-side .col .active .icon-fav {
            background-image: url(../img/collection.png)
        }

        .episode-side .col .active .icon-laud {
            background-image: url(../img/ic_like_sel.png)
        }

.episode-pagination {
    display: flex;
    padding: 0
}

    .episode-pagination .col {
        text-align: center;
        flex: 1
    }

    .episode-pagination .line {
        width: 1px;
        height: 2rem;
        background-color: #1b2334;
        -webkit-transform: scaleX(.5);
        -moz-transform: scaleX(.5);
        -o-transform: scaleX(.5);
        transform: scaleX(.5);
        -ms-transform: scaleX(.5)
    }

    .episode-pagination .col a {
        display: block;
        width: 100%;
        height: 2rem;
        border: 0;
        background-color: transparent;
        color: #9fa7ba;
        text-align: center;
        font-size: .4rem;
        line-height: 2rem
    }

        .episode-pagination .col a.next:after, .episode-pagination .col a.prev:before {
            display: inline-block;
            margin-top: -3px;
            width: .4267rem;
            height: .4267rem;
            background-image: url(../img/read_icon_previous.png);
            background-size: .4267rem;
            background-repeat: no-repeat;
            content: "";
            vertical-align: middle;
            -o-background-size: .4267rem
        }

        .episode-pagination .col a.next:after {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
            -ms-transform: rotate(180deg)
        }

        .episode-pagination .col a:hover {
            background-color: #36425a;
            cursor: pointer
        }

.down-app {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 1.533rem;
    background: #21293c;
    text-align: center
}

    .down-app a {
        display: block;
        color: #eda400;
        text-decoration: underline;
        font-size: .4rem;
        line-height: 1.333rem
    }

        .down-app a i {
            position: relative;
            top: .15rem;
            display: inline-block;
            margin-right: .1rem;
            background-size: 100% 100%
        }

            .down-app a i.icon-xz {
                width: .5334rem;
                height: .6667rem;
                background-image: url(../img/icon_bottomIndex_phone_v7.png)
            }

            .down-app a i.icon-task {
                top: .14rem;
                width: .5334rem;
                height: .5334rem;
                background-image: url(../img/icon_bottomIndex_gift_v7.png)
            }

#read_list {
    display: block;
    min-height: 250px;
    background: #21293c
}

    #read_list, #read_list > li {
        float: left;
        width: 100%
    }

        #read_list > li:hover {
            background-color: #36425a;
            cursor: pointer
        }

        #read_list > li a {
            display: block;
            overflow: hidden;
            margin: 0 3%;
            width: 94%;
            height: 1.333rem;
            color: #9fa7ba;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .3733rem;
            line-height: 1.333rem;
            -o-text-overflow: ellipsis
        }

            #read_list > li a span {
                position: relative;
                top: 5px;
                display: inline-block;
                overflow: hidden;
                margin-right: 5px;
                width: .45rem;
                height: .45rem;
                border-radius: 50%;
                background: #36425a;
                color: #fff;
                text-align: center;
                font-size: .3rem;
                line-height: .45rem
            }

                #read_list > li a span.on1 {
                    background: #f54545
                }

                #read_list > li a span.on2 {
                    background: #ff8547
                }

                #read_list > li a span.on3 {
                    background: #ffac39
                }

#topimg.tooltip-bar, .tooltip-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    width: auto;
    background-color: #21293c;
    line-height: 1.6rem
}

    #topimg.tooltip-bar:before, .tooltip-bar:before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        border-top: 1px solid #1b2334;
        content: "";
        transform: scaleY(.5)
    }

#topimg.tooltip-bar {
    position: fixed;
    top: none;
    right: 0;
    bottom: 1.6rem;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 2.6rem;
    border-bottom: 1px solid #1b2334;
    background: #21293c
}

    #topimg.tooltip-bar .box {
        border-radius: .2rem
    }

    #topimg.tooltip-bar.on {
        bottom: 1.6rem;
        transition: all .2s ease-in-out
    }

    #topimg.tooltip-bar.off {
        bottom: 0;
        transition: all .2s ease-in-out
    }

.tooltip-bar__row {
    display: flex
}

    .tooltip-bar__row .col {
        padding: 0 .1rem;
        border-left: 1px solid #1b2334;
        text-align: center;
        flex: 1
    }

        .tooltip-bar__row .col a, .tooltip-bar__row .col button {
            display: flex;
            width: 100%;
            height: 1.6rem;
            border: 0;
            border-radius: 1rem;
            background-color: transparent;
            color: #999;
            font-size: .3733rem;
            justify-content: center;
            align-items: center;
        }

            .tooltip-bar__row .col a .menu, .tooltip-bar__row .col button .icon-fav, .tooltip-bar__row .col button .icon-laud {
                display: inline-block;
                margin-top: -4px;
                width: .625rem;
                height: .625rem;
                background-size: cover;
                background-repeat: no-repeat;
                vertical-align: middle
            }

            .tooltip-bar__row .col button .icon-laud {
                margin-right: 3px;
                background-image: url(../img/ic_like_nor.png)
            }

            .tooltip-bar__row .col button .icon-fav {
                margin-right: 3px;
                background-image: url(../img/bar1_nor2.png)
            }

            .tooltip-bar__row .col a .menu {
                margin-right: 3px;
                background-image: url(../img/detail.png)
            }

            .tooltip-bar__row .col button.active .icon-laud {
                margin-right: 3px;
                background-image: url(../img/ic_like_sel.png)
            }

            .tooltip-bar__row .col button.active .icon-fav {
                margin-right: 3px;
                background-image: url(../img/collection.png)
            }

            .tooltip-bar__row .col button:hover {
                background-color: #36425a;
                cursor: pointer
            }

        .tooltip-bar__row .col.next {
            height: 100%;
            border: 0;
            flex: 1
        }

            .tooltip-bar__row .col.next a {
                color: #2f374a;
                font-size: .3733rem
            }

            .tooltip-bar__row .col.next.ok {
                background-image: url(../img/action.png);
                background-size: cover;
                background-repeat: no-repeat
            }

                .tooltip-bar__row .col.next.ok a {
                    color: #fff
                }

.chapter-fav#del {
    display: none
}

.vip_banner {
    margin-top: .4rem
}

    .vip_banner .swiper-container {
        overflow: hidden;
        margin-bottom: .2rem;
        height: 5rem
    }

    .vip_banner .swiper-slide {
        width: 8.9333rem;
        height: 5rem;
        border-radius: .34rem
    }

        .vip_banner .swiper-slide > a {
            display: block;
            width: 100%;
            height: 100%
        }

        .vip_banner .swiper-slide .thumb_img {
            width: auto;
            height: 4.6rem;
            border-radius: .34rem;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat
        }

        .vip_banner .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%
        }

    .vip_banner .swiper-slide-active {
        box-shadow: 0 0 8px 2px rgba(0,0,0,.5)
    }

        .vip_banner .swiper-slide-active .thumb_img {
            height: 5rem
        }

    .vip_banner .swiper-pagination-bullet {
        background: rgba(0,0,0,.8)
    }

    .vip_banner .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 100px;
        background-color: #111
    }

.vip_searchBar {
    position: sticky;
    top: 0;
    z-index: 99;
    display: block;
    padding: .4rem .5333rem;
    background-color: #21293c
}

.vip_search {
    display: flex;
    padding: 0 .4rem;
    height: .8rem;
    border-radius: .8rem;
    background-color: #9fa7ba;
    color: #36425a;
    font-size: .3733rem;
    line-height: .8rem;
    align-items: center;
    box-align: center
}

.icon_vip_search {
    margin-right: .16rem;
    width: .5rem;
    height: .5rem;
    background: url(../img/nav_icon_search.png) no-repeat;
    background-size: 100% 100%
}

.vip_searchBar .action.icon button {
    position: absolute;
    top: .4rem;
    right: .2rem;
    overflow: hidden;
    width: .75rem;
    height: .75rem;
    border: 0;
    background-color: transparent;
    background-size: cover;
    text-indent: -99999px
}

.vip-features {
    margin: 0 .4rem;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 10px 10px 4px rgba(15,22,36,.2)
}

.vip-features__row {
    display: flex
}

.vip-features__text {
    color: #a6a9b2
}

.vip-features__bar {
    display: flex;
    margin: .32rem;
    padding: .32rem 0 .64rem;
    font-size: .3733rem;
    align-items: center
}

    .vip-features__bar .text {
        color: #282828;
        font-size: .3733rem;
        flex: 1
    }

        .vip-features__bar .text .arrow {
            width: .4rem;
            height: .4rem;
            background-image: url(../img/n19__home_icon_xq3.png)
        }

        .vip-features__bar .text .arrow, .vip-features__bar .text .vip_icon_arrow {
            display: inline-block;
            margin-top: -4px;
            background-size: cover;
            vertical-align: middle
        }

        .vip-features__bar .text .vip_icon_arrow {
            width: .32rem;
            height: .32rem;
            background-image: url(../img/vip_icon_arrow.png)
        }

    .vip-features__bar .action {
        border-radius: .5333rem
    }

        .vip-features__bar .action a {
            display: block;
            width: 2.6667rem;
            height: .8rem;
            color: #a6a9b2;
            text-align: center;
            line-height: .8rem
        }

    .vip-features__bar .features_img {
        margin-right: .2667rem;
        width: 1.2533rem;
        height: 1.2533rem;
        border-radius: 50%
    }

    .vip-features__bar .features_aside {
        line-height: 1.6;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

        .vip-features__bar .features_aside .name {
            color: #fff;
            font-weight: 600;
            font-size: .4267rem
        }

        .vip-features__bar .features_aside .title {
            color: #fff;
            font-weight: 600;
            font-size: .3267rem
        }

        .vip-features__bar .features_aside .subtitle, .vip-features__bar .features_aside .subtitle a {
            color: #a6a9b2;
            font-size: .2933rem
        }

.vip-features .vip-features__bar .is_vip {
    margin-right: .2667rem;
    width: 52px;
    height: 56px;
    background: url(../img/vip_maozi.png);
    background-size: 100% 100%
}

.vip-features .is_vip img {
    margin: 10px 0 0 4px
}

.cy_vip_books #scroll-books .item .thumbnail .rank {
    left: 0;
    border-radius: none;
    border-top-right-radius: .1333rem;
    border-top-left-radius: 0
}

.bm-box__head.tl-head .more a {
    height: .48rem;
    color: #a6a9b2;
    line-height: .48rem
}

    .bm-box__head.tl-head .more a .icon-arrow {
        background-image: url(../img/icon_star_v7.png)
    }

.swiper-rank .swiper-wrapper .item .rank {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: .6933rem;
    height: .48rem;
    border-radius: .1333rem 0 0 0;
    background-image: -webkit-linear-gradient(-45deg,#e7e7e7,#d3d3d3 34%,#bfbfbf 81%);
    background-image: -ms-linear-gradient(-45deg,#e7e7e7 0,#d3d3d3 34%,#bfbfbf 81%);
    color: #fff;
    text-align: center
}

.swiper-rank .swiper-wrapper .item:first-child .rank {
    background-image: -webkit-linear-gradient(-45deg,#e11,#ff6344)
}

.swiper-rank .swiper-wrapper .item:nth-child(2) .rank {
    background-image: -webkit-linear-gradient(-45deg,#ff7200,#ff8c00 66%)
}

.swiper-rank .swiper-wrapper .item:nth-child(3) .rank {
    background-image: -webkit-linear-gradient(-45deg,#fe9002,#fead08 34%,#fdca0e 81%)
}

.cy_vip_free .books-row .item {
    position: relative
}

.books-row .item .thumbnail .chapter2 span {
    position: absolute;
    top: .3rem;
    left: 0;
    z-index: 2;
    padding: 1px 6px 1px 4px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: #e3fff3;
    box-shadow: 0 0 15px 0 rgb(0 0 0/20%);
    color: #2ea14d;
    font-size: .32rem
}

    .books-row .item .thumbnail .chapter2 span.end {
        background-color: #ddd;
        color: #999
    }

.tack_mask, .vip_mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8)
}

.vip_mask_body {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 98;
    width: 6.1867rem;
    border-radius: .2667rem;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%)
}

.vip_mask_title {
    margin: .3rem auto;
    color: #fff;
    text-align: center;
    font-size: .5rem
}

.vip_mask_cont {
    color: #67b299;
    font-size: .3467rem
}

.mask_cont {
    padding: .5333rem;
    border-bottom-right-radius: .2667rem;
    border-bottom-left-radius: .2667rem;
    background-color: #21293c;
    color: #797979;
    font-size: .3467rem;
    line-height: 1.7
}

.icon_close_mask {
    display: block;
    margin: 0 auto;
    width: .6rem;
    height: .6rem;
    background-image: url(../img/icon_close.png);
    background-size: cover
}

.mo-tasks {
    padding: 0 .4rem .4rem;
    background-color: #21293c
}

.mo-tasks__head {
    position: relative;
    height: 1.2rem;
    line-height: 1.2rem
}

    .mo-tasks__head .title {
        color: #282828;
        font-weight: 700;
        font-size: 16px
    }

.mo-tasks__list .item {
    position: relative;
    display: flex;
    padding: .2rem 0;
    align-items: center
}

    .mo-tasks__list .item .text {
        margin-top: .1rem;
        line-height: .52rem
    }

        .mo-tasks__list .item .text span {
            color: #ff5e03
        }

    .mo-tasks__list .item .body {
        flex: 1
    }

    .mo-tasks__list .item .action {
        margin-right: .32rem
    }

    .mo-tasks__list .item .body .title {
        color: #a6a9b2;
        font-size: .4rem
    }

    .mo-tasks__list .item .body .text {
        color: #6c6f7a;
        font-size: .32rem
    }

    .mo-tasks__list .item .action a {
        display: block;
        width: 2.24rem;
        height: .8rem;
        border-radius: .6933rem;
        text-align: center;
        font-size: .3467rem;
        line-height: .8rem
    }

    .mo-tasks__list .item .action .nor {
        background: #3f4759
    }

    .mo-tasks__list .item .action .disabled, .mo-tasks__list .item .action .nor {
        width: 2.24rem;
        border-radius: 100px;
        color: #a6a9b2;
        font-size: .3467rem
    }

    .mo-tasks__list .item .action .active {
        background: #64b1c1;
        color: #fff
    }

.pp-list {
    margin: .6rem 0 .8rem;
    padding: 0 .64rem
}

    .pp-list p.tips {
        margin: -.3rem auto .3rem;
        padding: 0;
        color: #67b299
    }

.pp-list__item {
    margin-bottom: .48rem
}

    .pp-list__item button {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1.3333rem;
        border: 0;
        border-radius: 1.3333rem;
        background-color: transparent;
        background-color: #37435b;
        color: #fff;
        text-align: left;
        text-indent: .3rem;
        font-size: .4rem;
        line-height: 1.3333rem
    }

        .pp-list__item button i {
            display: inline-block;
            margin-top: -3px;
            margin-right: .1rem;
            width: .7rem;
            height: .7rem;
            background-size: .7rem;
            background-repeat: no-repeat;
            vertical-align: middle
        }

        .pp-list__item button .icon-wechat {
            background-image: url(../img/n19__my_payvip_wechat_popup.png)
        }

        .pp-list__item button .icon-alipay {
            background-image: url(../img/n19__myvip_pay_zfb_popup.png)
        }

        .pp-list__item button .icon-pp {
            background-image: url(../img/n19__my_payvip_pp_popup.png)
        }

        .pp-list__item button .icon-qq {
            background-image: url(../img/n19__my_payvip_qq_popup.png)
        }

        .pp-list__item button .icon-visa {
            background-image: url(../img/n19__my_payvip_visa_popup.png)
        }

        .pp-list__item button .icon-my {
            background-image: url(../img/n19__my_payvip_my_popup.png)
        }

        .pp-list__item button .icon-kf {
            background-image: url(../img/n19__my_icon_setting2.png)
        }

        .pp-list__item button span {
            color: #999;
            font-size: .3rem
        }

.pp-list .paycode {
    display: block;
    margin: 0 auto 10px
}

    .pp-list .paycode, .pp-list .paycode img {
        width: 5rem;
        height: 5rem;
        text-align: center
    }

.n20_tack_tips {
    padding: .4rem;
    background-color: #21293c
}

    .n20_tack_tips a, .n20_tack_tips em b, .n20_tack_tips span {
        color: #fff;
        font-size: .4rem
    }

    .n20_tack_tips em {
        float: right;
        color: #a6a9b2;
        text-align: right;
        font-size: .32rem
    }

    .n20_tack_tips.user_tpis {
        padding: 0 .4rem .3rem
    }

.n_20_tack_page {
    position: relative;
    height: 9.3rem;
    background: url(../img/ic_employee_header.png) no-repeat top;
    background-size: 100%
}

    .n_20_tack_page .back {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        width: 1.1733rem;
        height: 1.1733rem;
        cursor: pointer
    }

        .n_20_tack_page .back i {
            display: block;
            margin: .3rem;
            width: .7733rem;
            height: .7733rem;
            border-radius: .6rem;
            background: url(../img/icon_red_page_back.png) no-repeat 50%;
            background-color: rgba(0,0,0,.1);
            background-size: .24rem .4rem;
            -o-background-size: .24rem .4rem
        }

        .n_20_tack_page .back:hover i {
            background-color: rgba(0,0,0,.2)
        }

.tack_name {
    position: relative;
    padding-top: .2667rem;
    color: #fff;
    text-align: center;
    font-size: .4533rem
}

.tack_jingdou {
    display: block;
    margin: 20px auto;
    width: 100px
}

.tack_status {
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: .48rem
}

.tack_day {
    margin-top: .2067rem;
    color: #a6a9b2;
    text-align: center;
    font-size: .3467rem
}

.tack_panel {
    margin: 0 4% 1rem
}

.tack_panel_bd {
    padding: .5333rem .4rem;
    border-top-right-radius: .2667rem;
    border-top-left-radius: .2667rem;
    background: url(../img/dashangBg.png) no-repeat 50%
}

.tack_panel_bottom {
    overflow: hidden;
    height: .9333rem;
    border-bottom-right-radius: .2667rem;
    border-bottom-left-radius: .2667rem;
    background-color: #f8f8f8;
    color: #999;
    text-align: center;
    font-size: .32rem;
    line-height: .9333rem
}

.icon_tack_wenhao {
    display: inline-block;
    margin-top: -3px;
    width: .3333rem;
    height: .3333rem;
    background: url(../img/tack_icon_wenhao.png);
    background-size: 100% 100%;
    vertical-align: middle
}

.tack_panel_bd_day, .tack_panel_bd_dian, .tack_panel_bd_dou {
    display: flex;
    justify-content: space-between;
    box-pack: space-between
}

.tack_panel_bd .douzi {
    margin: 0 .125rem;
    width: .8rem;
    height: 1.114rem;
    border-radius: .1rem;
    text-align: center;
    font-size: .35rem;
    line-height: .46rem
}

    .tack_panel_bd .douzi span {
        display: block;
        color: #a6a9b2;
        font-size: .3rem
    }

.tack_panel_bd_dou .no {
    background-color: rgba(0,0,0,.1);
    color: #fff
}

.tack_panel_bd_dou .yes span {
    color: #455973
}

.tack_panel_bd_dou .yes {
    position: relative;
    background-color: #ecd046;
    color: #364463
}

.tack_panel_bd_dian {
    position: relative;
    margin-top: .1333rem;
    padding: 0 .4rem
}

    .tack_panel_bd_dian .dian {
        width: .2133rem;
        height: .2133rem;
        border-radius: 50%
    }

    .tack_panel_bd_dian .no {
        background: #fff
    }

    .tack_panel_bd_dian .yes {
        background: #ecd046
    }

    .tack_panel_bd_dian .dian_jindu {
        position: absolute;
        top: 50%;
        left: 0;
        margin: -.0267rem .4rem 0;
        height: .0533rem;
        background-color: #ecd046
    }

.tack_panel_bd_day {
    margin-top: .1333rem;
    padding: 0 .2133rem;
    color: #fff;
    font-size: .32rem
}

    .tack_panel_bd_day .yes {
        color: #ecd046
    }

.tack_get_mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9991;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.9)
}

.tack_get_mask_body {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%)
}

.tack_panel_bd.userhome {
    margin: 0;
    padding: 0 .2rem .2rem;
    border-radius: .2rem;
    background: #21293c
}

    .tack_panel_bd.userhome .title {
        float: left;
        display: block;
        margin: 0 2% .3rem;
        width: 96%;
        color: #fff
    }

        .tack_panel_bd.userhome .title .fl {
            float: left;
            font-size: .35rem
        }

        .tack_panel_bd.userhome .title .fr {
            float: right;
            font-size: .3rem
        }

    .tack_panel_bd.userhome .tack_panel_bd_dou {
        width: 100%
    }

    .tack_panel_bd.userhome .douzi {
        padding-top: .1rem;
        width: 1rem;
        height: 1.4rem;
        background-color: rgba(0,0,0,.08);
        color: #999
    }

        .tack_panel_bd.userhome .douzi span {
            height: .4rem;
            color: #999
        }

        .tack_panel_bd.userhome .douzi em {
            display: block;
            height: .4rem;
            font-size: .4rem
        }

        .tack_panel_bd.userhome .douzi.yes {
            background-color: rgba(248,182,45,.05);
            color: #f8b62d
        }

            .tack_panel_bd.userhome .douzi.yes span {
                color: #fff
            }

.mask_get_img {
    display: block;
    margin: 0 auto;
    width: 6rem
}

.mask_get_status {
    color: #fff;
    text-align: center;
    font-size: .8rem
}

.mask_get_num {
    margin-top: .1333rem;
    color: #ffd946;
    text-align: center;
    font-size: .56rem
}

.mask_get_btn {
    margin: .7rem auto 0;
    width: 3.0667rem;
    height: .8533rem;
    border-radius: 100px;
    background-color: #ffd741;
    box-shadow: 0 4px 1px rgba(245,177,7,.8);
    color: #423300;
    text-align: center;
    font-size: .4267rem;
    line-height: .8533rem
}

@keyframes xing {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

#czhd {
    display: none
}

    #czhd .tack_get_mask_body img {
        display: block;
        margin: 0 auto;
        width: 8rem;
        -webkit-animation: xing .3s linear
    }

    #czhd .mask_get_close {
        position: absolute;
        bottom: -1.95rem;
        left: 50%;
        width: .75rem;
        height: .75rem;
        background: url(../img/icon_close.png) no-repeat;
        background-size: 100%;
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -o-transform: translate(-50%);
        transform: translate(-50%);
        -ms-transform: translate(-50%)
    }

.icon_detail_wenhao {
    display: inline-block;
    margin-left: .08rem;
    width: .2667rem;
    height: .2667rem;
    background: url(../img/icon_detail_wenhao.png);
    background-size: 100% 100%
}

.books-row {
    padding: 0 .26rem
}

    .books-row .item a {
        margin: 0 .06rem
    }

    .bm-headline img, .books-row img {
        border-radius: 3px
    }

.bm-headline, .books-fluid {
    padding: 0 .26rem
}

.iframe_chat {
    display: block;
    width: 100%;
    height: auto;
    background: #3875ea url(../img/chatload.gif) no-repeat center 35%;
    background-size: 200px
}

.helplink {
    display: block;
    margin: -10px auto 0;
    padding: 10px 1%;
    width: 98%;
    height: 2rem;
    border-bottom: 1rem solid #3875ea;
    background: #3875ea;
    color: #fff;
    text-align: center;
    font-size: .38rem;
    line-height: .8rem
}

    .helplink a {
        display: inline-block;
        margin: 0 5px;
        padding: 0 .2rem;
        height: .6rem;
        border-radius: .6rem;
        background: #fff;
        color: #3875ea;
        font-size: .3733rem;
        line-height: .6rem
    }

.my_vip_back_bar {
    position: relative;
    height: 1.1733rem;
    background: 0 0;
    color: #fff;
    text-align: center;
    font-size: .4533rem;
    line-height: 1.1733rem
}

    .my_vip_back_bar .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.1733rem;
        height: 1.1733rem;
        background: url(../img/n20_icon_back.png) no-repeat 50%;
        background-size: .24rem .4rem
    }

.my_vip_header {
    background: #21293d url(../img/ic_employee_header.png) 0 0 no-repeat;
    background-size: 100%
}

.my_vip_user_img {
    width: 52px;
    height: 52px;
    border-radius: 50%
}

.my_vip_main {
    border-top-right-radius: .4rem;
    border-top-left-radius: .4rem;
    background-color: #21293c
}

    .my_vip_main.cztips {
        margin-top: -.5rem;
        padding: 0 .5rem .6rem;
        width: auto
    }

    .my_vip_main .title {
        margin-bottom: .5333rem;
        color: #64b1c1;
        font-weight: 600;
        font-size: .48rem;
        line-height: 1
    }

        .my_vip_main .title:after {
            display: block;
            margin-top: -5px;
            width: 50px;
            height: 10px;
            border-radius: 0;
            background-color: #0f1627;
            content: ""
        }

#scroll-love_rank {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
    padding: 0 .133333rem;
    width: auto;
    background-color: #21293c;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    #scroll-love_rank::-webkit-scrollbar {
        display: none
    }

    #scroll-love_rank .love_rank {
        float: left;
        overflow: hidden;
        width: 33.33333%
    }

.scroll-love_rank_top .more a .icon-arrow {
    position: relative;
    margin-top: -4px;
    width: .32rem;
    height: .32rem
}

#scroll-love_rank .love_rank .thumb_img {
    display: block;
    padding-top: 129%;
    width: 100%;
    height: 0
}

#scroll-love_rank .love_rank a {
    display: block
}

#scroll-love_rank .love_rank .thumbnail {
    position: relative;
    overflow: hidden;
    margin: 0 .06rem;
    width: auto;
    border-radius: .1rem;
    text-align: center
}

#scroll-love_rank .love_rank .title {
    overflow: hidden;
    padding-top: .4em;
    padding-bottom: .2em;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .3733rem;
    -o-text-overflow: ellipsis
}

#scroll-love_rank .love_rank .tags {
    padding-bottom: 1em;
    color: #a6a9b2;
    font-size: .2933rem
}

#scroll-love_rank .rank .num {
    height: .9067rem;
    color: #fff;
    text-align: center;
    font-size: .32rem;
    line-height: .8067rem
}

#scroll-love_rank .rank {
    position: absolute;
    top: .12rem;
    left: .12rem;
    width: .74rem;
    height: .9067rem;
    background-image: url(../img/icon_0.png);
    background-size: cover
}

    #scroll-love_rank .rank.num-1 {
        background-image: url(../img/icon_one.png)
    }

    #scroll-love_rank .rank.num-2 {
        background-image: url(../img/icon_two.png)
    }

    #scroll-love_rank .rank.num-3 {
        background-image: url(../img/icon_three.png)
    }

#jueseList {
    display: none
}

    #jueseList .books-row {
        float: left;
        display: block;
        overflow: hidden;
        margin: .5rem auto;
        width: auto
    }

        #jueseList .books-row .item {
            width: 33.78378%
        }

            #jueseList .books-row .item .desc {
                display: -webkit-box;
                overflow: hidden;
                width: 90%;
                height: auto;
                max-height: 1rem;
                text-align: left;
                white-space: pre-line;
                line-height: .45rem;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical
            }

.my_vip_main .subtitle {
    margin: .4rem 0;
    color: #5c5c5c;
    font-size: .3467rem;
    line-height: 1.7
}

.currency {
    display: block;
    margin: 0 auto .3rem;
    padding-bottom: .3rem;
    width: 100%;
    border-bottom: 1px solid #eee;
    text-align: center
}

    .currency span {
        display: none;
        height: .8rem;
        color: #111;
        font-weight: 600;
        font-size: .48rem;
        line-height: .8rem
    }

    .currency button.btn {
        display: inline-block;
        margin: 0 .2rem;
        padding: 0 .3rem;
        width: auto;
        height: .6rem;
        outline: 0;
        border: none;
        border-radius: 100px;
        background: #fafafa;
        color: #333;
        font-size: .35rem;
        line-height: .4rem;
        cursor: pointer
    }

        .currency button.btn.active {
            background: #f66;
            color: #fff
        }

.ul_title {
    color: #64b1c1;
    font-weight: 600;
    font-size: .48rem
}

    .ul_title em {
        color: #a6a9b2;
        font-weight: 400;
        font-size: .25rem
    }

    .ul_title span {
        float: left;
        font-size: .4rem
    }

        .ul_title span.fr {
            float: right
        }

        .ul_title span:after {
            display: block;
            margin-top: -5px;
            width: 30px;
            height: 10px;
            border-radius: 0;
            background-color: #0f1627;
            content: ""
        }

    .ul_title.cztips {
        position: relative;
        top: -.5rem;
        z-index: 9991;
        padding: 0 5%;
        width: 90%;
        background: 0 0
    }

.ul_list {
    display: flex;
    padding: 0 0 .4rem;
    justify-content: space-between
}

    .ul_list .item {
        position: relative;
        display: flex;
        padding-bottom: .2rem;
        width: 47%;
        height: auto;
        border: 1px solid #37435b;
        border-radius: .1867rem;
        background: #37435b;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

        .ul_list .item.svip {
            width: 100%
        }

        .ul_list .item .item_day {
            margin-top: .2rem;
            color: #f66;
            font-weight: 500;
            font-size: .3733rem
        }

        .ul_list .item .item_price {
            color: #67b299;
            font-weight: 500;
            font-size: .3467rem
        }

        .ul_list .item.svip .item_price {
            color: #4b65f2
        }

        .ul_list .item .item_price .item_num {
            font-size: .5867rem
        }

        .ul_list .item.svip .item_price .item_num {
            margin-right: 15px;
            color: #67b299
        }

        .ul_list .item .item_oldPrice {
            margin-top: 3px;
            color: #a6a9b2;
            font-size: .3rem
        }

            .ul_list .item .item_oldPrice b {
                color: #67b299
            }

            .ul_list .item .item_oldPrice em {
                margin: 0 3px;
                color: #64b1c1;
                font-size: .35rem
            }

                .ul_list .item .item_oldPrice em i {
                    margin-left: 5px;
                    padding: 1px 5px;
                    border-radius: 20px;
                    background: #4b65f2;
                    color: #fff;
                    font-size: .28rem
                }

        .ul_list .item .item_status {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 .1333rem;
            border-top-right-radius: .1867rem;
            border-bottom-left-radius: .1867rem;
            background-color: #d1d1d1;
            color: #fff;
            font-size: .2933rem;
            line-height: 1.5
        }

    .ul_list .active {
        border: 1px solid #ffcc1c;
        background-color: #21293Cdf5;
        box-shadow: 0 0 30px 0 rgba(0,0,0,.3)
    }

    .ul_list .item .item_status.on {
        background-color: #67b299
    }

    .ul_list .item .item_status.vip {
        background-color: #7a27fc
    }

    .ul_list .item .item_status.cur {
        background-color: #16aaf6
    }

    .ul_list .item .item_status.hot {
        background-color: #f60
    }

    .ul_list .item .item_status.new {
        background-color: #67b299
    }

    .ul_list .item .item_status.svip {
        background-color: #232323
    }

    .ul_list .item.active i.selected {
        position: absolute;
        top: 5px;
        left: 5px;
        display: block;
        width: .6rem;
        height: .6rem;
        border-radius: .6rem;
        background: url(../img/radio_button_on.png);
        background-size: 100% 100%
    }

    .ul_list .item .item_btn {
        margin-top: .1867rem;
        padding: 0 .32rem;
        height: .5333rem;
        border: none;
        border-radius: 100px;
        background-color: #ffcc1c;
        font-size: .2933rem;
        line-height: .5333rem
    }

        .ul_list .item .item_btn span {
            font-size: .4rem
        }

    .ul_list .item .mar40 {
        height: .72rem;
        border: none
    }

#moneylist {
    margin-bottom: 20px
}

.mask_text {
    color: #666;
    font-size: .32rem
}

.mask_go_buy {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: 1.3333rem;
    outline: 0;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-weight: 500;
    font-size: .4267rem;
    line-height: 1.3333rem;
    cursor: pointer
}

    .mask_go_buy i {
        display: inline-block;
        margin-top: -4px;
        margin-right: 5px;
        width: 36px;
        height: 36px;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: middle
    }

    .mask_go_buy .icon-wepay {
        background-image: url(../img/my_payvip_wechat_popup.png)
    }

    .mask_go_buy .icon-alipay {
        background-image: url(../img/myvip_pay_zfb_popup.png)
    }

    .mask_go_buy.btn-zfb {
        box-shadow: 0 1px 2px 1px #92d8fa;
        color: #fff
    }

    .mask_go_buy.btn-wx {
        box-shadow: 0 1px 2px 1px #83ffbc;
        color: #fff
    }

    .mask_go_buy.btn-sign {
        margin-top: -.2rem;
        width: 4rem;
        background: url(../img/action.png) no-repeat 50%;
        box-shadow: 0 0 10px 2px #5eee71
    }

.choice-pay {
    cursor: pointer
}

#alertFrame {
    background: url(../img/register_bg.jpg);
    background-color: #1f1f1f;
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat
}

    #alertFrame.bd {
        background: #252d3d url(../img/my_vip_header_bg.png) no-repeat 0 0;
        background-size: 100%
    }

.register {
    position: relative;
    display: block;
    display: none;
    width: 100%;
    height: 100%;
    height: 100vh;
    background: 0 0;
    background-image: url(../img/registerbottom.png);
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat
}

    .register.active {
        display: block;
        animation: bounceInTop .3s ease forwards
    }

    .register.bd {
        background: 0 0
    }

@media only screen and (min-width:1024px) {
    #alertFrame {
        max-width: 414px
    }
}

.register .input_wrap {
    position: relative;
    z-index: 2;
    margin-top: 5vh;
    padding: 0 1.0667rem
}

.register .input_phone {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0 .5rem;
    width: 100%;
    height: 1.3333rem;
    outline: 0;
    border: none;
    border-radius: 100px;
    background: #3b4355;
    color: #a6a9b2;
    font-size: .3733rem
}

    .register .input_phone.bd {
        background: #36425a;
        color: #a6a9b2
    }

.register .input_phone_yzm {
    padding: 0;
    text-align: center
}

.register .input_wrap_text {
    position: relative
}

.register .input_label.light {
    color: #67b299
}

.register .input_phone::-webkit-input-placeholder {
    background-color: #3b4355;
    color: #a6a9b2
}

.register .input_phone.bd::-webkit-input-placeholder {
    background-color: #3b4355;
    color: #a6a9b2;
    text-align: center
}

.register .is_next {
    display: block;
    margin: .5rem auto;
    width: 100%;
    height: 1.0933rem;
    outline: 0;
    border: 1px solid #3b4355;
    border-radius: 100px;
    background: 0 0;
    color: #d6d6d6;
    text-align: center;
    font-size: .3733rem;
    line-height: 1.0933rem
}

    .register .is_next.bd {
        border: 1px solid #0f1627;
        background: #0f1627
    }

.register .is_next_active {
    background-image: linear-gradient(90deg,#ffd316,#ffcc1c);
    color: #1f1f1f
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none !important
}

input[type=number] {
    -moz-appearance: textfield
}

.register .input_label {
    color: #bbb;
    text-align: center;
    font-size: .32rem
}

    .register .input_label > a {
        color: #ffcc1c
    }

    .register .input_label.input_bottom {
        position: fixed;
        right: 0;
        bottom: 1.5rem;
        left: 0;
        color: #a6a9b2
    }

        .register .input_label.input_bottom a {
            margin: 0 3px;
            color: #fff;
            font-size: .38rem
        }

.register .input_quick_title {
    padding: 0;
    color: #ddd;
    text-align: center;
    font-size: .3467rem
}

    .register .input_quick_title:before {
        margin-right: .2667rem;
        background-image: linear-gradient(90deg,#252525,#727273)
    }

    .register .input_quick_title:after, .register .input_quick_title:before {
        display: inline-block;
        width: 1.3333rem;
        height: 1px;
        content: "";
        vertical-align: middle
    }

    .register .input_quick_title:after {
        margin-left: .2667rem;
        background-image: linear-gradient(90deg,#727273,#252525)
    }

.register .input_quick_qq, .register .input_quick_wx {
    display: flex;
    margin: .5333rem auto 0;
    width: 5.8667rem;
    height: 1.0933rem;
    border: 2px solid #67b299;
    border-radius: 100px;
    background-image: -webkit-linear-gradient(-40deg,#215b68 19%,#3f543e 97%);
    color: #67b299;
    align-items: center;
    justify-content: center
}

    .register .input_quick_qq .icon_quick_qq {
        display: inline-block;
        margin-right: .16rem;
        width: .4533rem;
        height: .4933rem;
        background: url(../img/icon_quick_qq.png) no-repeat 50%;
        background-size: 100% 100%
    }

    .register .input_quick_wx .icon_quick_wx {
        display: inline-block;
        margin-right: .16rem;
        width: .64rem;
        height: .5067rem;
        background: url(../img/icon_quick_wx.png) no-repeat 50%;
        background-size: 100% 100%
    }

.register .tips {
    top: .5333rem;
    left: 50%;
    padding: .2667rem;
    border-radius: 5px;
    background-color: #21293c;
    color: #1f1f1f;
    transform: translate(-50%)
}

.register .jump, .register .tips {
    position: absolute;
    font-size: .3467rem
}

.register .jump {
    top: 0;
    right: 0;
    padding: 0 .5333rem;
    height: 1.1733rem;
    color: #fff
}

#alertFrame .agreeBox {
    float: right;
    display: block;
    margin: 15px 10px;
    width: auto;
    text-align: right
}

    #alertFrame .agreeBox span {
        float: right;
        margin-left: 10px;
        width: auto
    }

    #alertFrame .agreeBox label {
        float: right;
        margin-right: 5px;
        width: auto;
        height: .497rem;
        color: #fff;
        line-height: .497rem
    }

    #alertFrame .agreeBox .auto-switch {
        float: right;
        width: .924rem;
        height: .497rem;
        border-radius: .497rem
    }

        #alertFrame .agreeBox .auto-switch:before {
            width: .8886rem;
            height: .463rem;
            border-radius: .463rem
        }

        #alertFrame .agreeBox .auto-switch:after {
            width: .463rem;
            height: .463rem;
            border-radius: .463rem
        }

        #alertFrame .agreeBox .auto-switch:checked:after {
            -webkit-transform: translateX(.4088rem);
            -moz-transform: translateX(.4088rem);
            -o-transform: translateX(.4088rem);
            transform: translateX(.4088rem);
            -ms-transform: translateX(.4088rem)
        }

#alertFrame .link_btn {
    margin: 0 auto;
    width: 100%;
    text-align: center
}

    #alertFrame .link_btn a {
        display: inline-block;
        margin: 10px;
        width: 1rem;
        height: 1rem;
        color: #1f1f1f;
        text-indent: -999999px;
        font-size: 0
    }

        #alertFrame .link_btn a.wx {
            background: url(../img/wx.png) no-repeat 50%;
            background-size: 1rem
        }

        #alertFrame .link_btn a.qq {
            background: url(../img/qq.png) no-repeat 50%;
            background-size: 1rem
        }

        #alertFrame .link_btn a.wb {
            background: url(../img/wb.png) no-repeat 50%;
            background-size: 1rem
        }

.register .agree {
    float: left;
    display: block;
    margin: 20px 10px;
    width: 100%;
    text-align: center
}

    .register .agree a {
        padding-right: 10%;
        color: #ffc92b;
        font-size: .45rem
    }

.register .line_foot {
    padding: 2px 0 .1rem;
    width: 100%;
    text-align: center
}

    .register .line_foot span {
        margin: 0 10px;
        color: #fff
    }

    .register .line_foot a {
        display: inline-block;
        height: 30px;
        color: #fff;
        font-size: .3rem;
        line-height: 30px
    }

.getdd {
    margin: 30px auto 0;
    text-align: center;
    opacity: .9
}

    .getdd.bd {
        opacity: 1
    }

    .getdd img {
        width: 80%;
        border-radius: .4rem
    }

.mh_bind_tips {
    display: flex;
    padding: 1.0667rem 1.3333rem;
    color: #999;
    font-size: .3467rem;
    line-height: .64rem;
    align-items: flex-start
}

    .mh_bind_tips .icon_bindtips {
        display: inline-block;
        margin: 6px;
        width: .3733rem;
        height: .3733rem;
        background: url(../img/icon_bindtips.png) no-repeat;
        background-size: 100% 100%;
        flex: 0 0 auto
    }

.public_mask_body_title {
    padding-top: .5333rem;
    color: #282828;
    text-align: center;
    font-size: .48rem
}

#gold-tips {
    display: none
}

    #gold-tips.show {
        display: flex
    }

#adtips a.close, #app-tips a.close, #login-tips a.close {
    position: absolute;
    top: .3rem;
    right: .3rem;
    z-index: 98;
    display: block;
    margin: auto;
    width: .6rem;
    height: .6rem;
    background-image: url(../img/icon_close.png);
    background-size: 100% 100%
}

#app-tips, #login-tips {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 97;
    display: none;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
    transition: all .5s ease-in-out
}

    #app-tips.off, #login-tips.off {
        bottom: -10rem;
        display: block
    }

    #app-tips.on, #login-tips.on {
        bottom: 0;
        display: block
    }

.boxlog {
    float: left;
    display: block;
    background: #21293c
}

.boxlog, .buybox .tbot {
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.buybox .tbot {
    color: #eda500;
    text-align: center;
    font-size: .4rem;
    line-height: 40px
}

    .buybox .tbot span b {
        margin: 0 2px
    }

.buybak, .buylog {
    float: left;
    margin: .3rem 4% 0;
    padding: 10px 0 0;
    width: 92%;
    height: auto;
    border-bottom: 1px solid #36425a;
    border-radius: .3rem;
    background: #36425a;
    line-height: 40px
}

    .buybak div.thead, .buylog .thead {
        float: left;
        margin: 0 auto;
        padding: 0 2%;
        width: 96%;
        height: 40px;
        background: #36425a;
        color: #64b1c1;
        text-align: center;
        font-size: .35rem
    }

        .buybak div.thead em, .buylog .thead em {
            font-size: .3rem
        }

        .buybak div.thead span, .buybox li span {
            display: inline-block;
            overflow: hidden;
            width: calc((100% - 15px) / 4);
            height: 40px;
            line-height: 40px
        }

    .buybak ul li, .buylog ul li {
        float: left;
        width: 100%;
        height: 40px;
        border-top: 1px solid #36425a;
        text-align: center
    }

        .buybak ul li:nth-of-type(odd), .buylog ul li:nth-of-type(odd) {
            background: #414d65
        }

        .buybak ul li:first-child, .buylog ul li:first-child {
            border-top: 0
        }

        .buybak ul li:hover, .buylog ul li:hover {
            background: #4a556c
        }

        .buybak ul li span {
            border-left: 1px solid #36425a;
            color: #a6a9b2;
            font-size: .3rem
        }

            .buybak ul li span.b1 {
                border-left: 0
            }

            .buybak ul li span.b3 {
                color: #67b299;
                font-size: .4rem
            }

.buylog {
    width: 92%
}

    .buylog .thead span {
        display: inline-block;
        width: calc((100% - 15px) / 3)
    }

    .buylog ul li span {
        display: inline-block;
        color: #a6a9b2;
        font-size: .3rem;
        line-height: 40px
    }

    .buylog span.b1 {
        padding-left: 2%;
        width: 48%;
        text-align: left
    }

    .buylog span.b2 {
        width: 24%;
        text-align: center
    }

    .buylog span.b3 {
        padding-right: 2%;
        width: 24%;
        text-align: right
    }

    .buylog ul li span a {
        float: left;
        overflow: hidden;
        width: 100%;
        color: #a6a9b2;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .32rem
    }

    .buylog ul li:hover a {
        color: #f66
    }

.tglog {
    border: 0;
    background: #414d65
}

    .tglog ul li span.b1, .tglog ul li span.b2, .tglog ul li span.b3 {
        width: 32%;
        font-size: .32rem
    }

    .tglog ul li span.b2 {
        font-size: .3rem
    }

    .tglog ul li span.b1 b {
        color: #f66
    }

    .tglog ul li span.b2 b {
        margin-right: 2px;
        font-size: .6rem
    }

    .tglog ul li span.b4 {
        width: 48%;
        text-align: left
    }

    .tglog ul li span.b5 {
        width: 48%;
        text-align: right
    }

    .tglog ul li:nth-of-type(odd) {
        background: #414d65
    }

.fbot {
    float: left;
    overflow: hidden;
    width: 100%;
    height: 10px;
    border-left-bottom-radius: .3rem;
    border-right-bottom-radius: .3rem
}

.t-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999996;
    visibility: hidden;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    -webkit-transition: opacity .3s 0s,visibility 0s .3s;
    transition: opacity .3s 0s,visibility 0s .3s
}

    .t-popup#needPay {
        background: 0 0
    }

    .t-popup.is-visible {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity .3s 0s,visibility 0s 0s;
        transition: opacity .3s 0s,visibility 0s 0s
    }

.t-popup-container {
    position: relative;
    margin: 4em auto;
    padding-top: 2em;
    width: 90%;
    max-width: 25pc;
    text-align: center;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden
}

.is-visible .t-popup-container {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.circle-box {
    position: fixed;
    right: .32rem;
    bottom: 7.5rem;
    z-index: 96;
}

    .circle-box a {
        display: -webkit-box;
        display: -ms-flexbox;
        margin-top: 10px;
        width: 1rem;
        height: 1rem;
        border: 0;
        border-radius: 1.067rem;
        background-color: rgba(0,0,0,.4);
        background-position: 50%;
        background-repeat: no-repeat;
        text-align: center
    }

        .circle-box a img {
            width: 1rem;
            height: 1rem;
            border-radius: 1.067rem
        }

    .circle-box a {
        background-size: .7rem
    }

        .circle-box a#myuser {
            background-image: url(../img/ico_myuser.png);
            background-size: .8rem
        }

        .circle-box a#autoscroll {
            background-image: url(../img/ico_autoscroll.png)
        }

            .circle-box a#autoscroll.on {
                background-image: url(../img/ico_pause.png)
            }

        .circle-box a#smenu {
            background-image: url(../img/ico_menu.png);
            background-size: .6rem
        }

        .circle-box a#feedback {
            background-image: url(../img/ico_feedback.png)
        }

        .circle-box a#refresh {
            background-image: url(../img/ico_refresh.png);
            background-size: .7rem
        }

        .circle-box a#pause, .circle-box a .title {
            display: none
        }

    .aside-nav.on, .circle-box.on {
        right: .32rem;
        transition: all .2s ease-in-out
    }

    .aside-nav.off, .circle-box.off {
        right: -3rem;
        transition: all .2s ease-in-out
    }

.aside-nav {
    position: fixed;
    right: .32rem;
    bottom: 6.3rem;
    z-index: 95;
    width: 160px;
    height: 160px;
    opacity: .75;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

    .aside-nav .aside-menu {
        z-index: 96;
        margin: auto;
        text-align: center;
        font-size: .4rem;
        line-height: 1rem
    }

    .aside-nav .aside-menu, .aside-nav a {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1rem;
        height: 1rem;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background-color: rgba(0,0,0,.6);
        cursor: pointer
    }

    .aside-nav a {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 1.067rem;
        font-size: .2rem;
        opacity: 0;
        -webkit-transition: background .25s,-webkit-transform .3s;
        -moz-transition: transform .3s,background .25s,-moz-transform .3s;
        transition: background .25s,-webkit-transform .3s;
        transition: transform .3s,background .25s;
        transition: transform .3s,background .25s,-webkit-transform .3s,-moz-transform .3s;
        -webkit-animation: jello .5s;
        -moz-animation: jello .5s;
        animation: jello .5s
    }

        .aside-nav a button, .aside-nav a i, .aside-nav label.aside-menu i {
            float: left;
            display: block;
            margin: .15rem;
            width: .7rem;
            height: .7rem;
            background-position: 50%;
            background-size: 100% 100%;
            text-align: center;
            opacity: 1
        }

    .aside-nav label.aside-menu i {
        margin: .1rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/ico_more_3.png);
        opacity: 1
    }

    .aside-nav label.aside-menu.close i {
        background-image: url(../img/ico_close.png)
    }

    .aside-nav .aside-huan {
        z-index: 96;
        margin: auto;
        text-align: center;
        font-size: .4rem;
        line-height: 1rem
    }

    .aside-nav .aside-huan, .aside-nav a {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1rem;
        height: 1rem;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background-color: rgba(0,0,0,.6);
        cursor: pointer
    }

        .aside-nav a button, .aside-nav a i, .aside-nav label.aside-huan i {
            float: left;
            display: block;
            margin: .15rem;
            width: .7rem;
            height: .7rem;
            background-position: 50%;
            background-size: 100% 100%;
            text-align: center;
            opacity: 1
        }

    .aside-nav label.aside-huan i {
        margin: .1rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/ico_more_huan.png);
        opacity: 1
    }

    .aside-nav label.aside-huan.close i {
        background-image: url(../img/ico_close.png)
    }

    .aside-nav a#huan0 i {
        margin: .07rem 0 0 .13rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/icon_huan0.png)
    }

    .aside-nav a.selected#huan0 i {
        background-image: url(../img/icon_huan0_on.png)
    }

    .aside-nav a#huan1 i {
        margin: .07rem 0 0 .13rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/icon_huan1.png)
    }

    .aside-nav a.selected#huan1 i {
        background-image: url(../img/icon_huan1_on.png)
    }

    .aside-nav a#huan2 i {
        margin: .07rem 0 0 .13rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/icon_huan2.png)
    }

    .aside-nav a.selected#huan2 i {
        background-image: url(../img/icon_huan2_on.png)
    }

    .aside-nav a#huan3 i {
        margin: .07rem 0 0 .13rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/icon_huan3.png)
    }

    .aside-nav a.selected#huan3 i {
        background-image: url(../img/icon_huan3_on.png)
    }

    .aside-nav a#home i {
        margin: .07rem 0 0 .13rem;
        width: .8rem;
        height: .8rem;
        background-image: url(../img/n19__home_tabbar_icon_home.png)
    }

    .aside-nav a#autourl i {
        background-image: url(../img/ico_autourl.png)
    }

    .aside-nav a#autourl.auto i {
        background-image: url(../img/ico_autourl_a.png)
    }

    .aside-nav a#autoscroll i {
        background-image: url(../img/ico_autoscroll.png)
    }

    .aside-nav a#smenu i {
        margin: .2rem;
        width: .6rem;
        height: .6rem;
        background-image: url(../img/ico_menu.png)
    }

    .aside-nav a#feedback i {
        background-image: url(../img/ico_feedback.png)
    }

    .aside-nav a#fava i {
        background-image: url(../img/ico_fava.png)
    }

    .aside-nav a#tmchat {
        background: 0 0
    }

        .aside-nav a#tmchat i {
            margin: auto;
            width: 1rem;
            height: 1rem;
            background-image: url(../img/icon_help_other.png)
        }

    .aside-nav a.menu-top.on {
        -webkit-transform: translate3d(0,-260%,0);
        -moz-transform: translate3d(0,-260%,0);
        transform: translate3d(0,-260%,0)
    }

    .aside-nav a.menu-first.on {
        -webkit-transform: translate3d(0,-135%,0);
        -moz-transform: translate3d(0,-135%,0);
        transform: translate3d(0,-135%,0)
    }

    .aside-nav a.menu-second.on {
        -webkit-transform: translate3d(-120%,-70%,0);
        -moz-transform: translate3d(-120%,-70%,0);
        transform: translate3d(-120%,-70%,0)
    }

    .aside-nav a.menu-third.on {
        -webkit-transform: translate3d(-120%,70%,0);
        -moz-transform: translate3d(-120%,70%,0);
        transform: translate3d(-120%,70%,0)
    }

    .aside-nav a.menu-fourth.on {
        -webkit-transform: translate3d(0,135%,0);
        -moz-transform: translate3d(0,135%,0);
        transform: translate3d(0,135%,0)
    }

    .aside-nav a.off, .aside-nav a.off i {
        -webkit-animation: conceal .3s linear forwards;
        animation: conceal .3s linear forwards
    }

    .aside-nav a.on, .aside-nav a.on i {
        -webkit-animation: display .3s linear forwards;
        animation: display .3s linear forwards
    }

@-webkit-keyframes display {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

@keyframes display {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes conceal {
    0% {
        opacity: 1
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 0
    }
}

@keyframes conceal {
    0% {
        opacity: 1
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes jello {
    0%,11.1%,to {
        -webkit-transform: none;
        transform: none
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@-moz-keyframes jello {
    0%,11.1%,to {
        -moz-transform: none;
        transform: none
    }

    22.2% {
        -moz-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -moz-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -moz-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -moz-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -moz-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -moz-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {
    0%,11.1%,to {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        -moz-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        -moz-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        -moz-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        -moz-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        -moz-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        -moz-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.animated {
    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,800px,0);
        transform: translate3d(0,800px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-moz-keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -moz-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -moz-transform: translate3d(0,800px,0);
        transform: translate3d(0,800px,0)
    }

    60% {
        opacity: 1;
        -moz-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -moz-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -moz-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    to {
        -moz-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -moz-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,800px,0);
        -moz-transform: translate3d(0,800px,0);
        transform: translate3d(0,800px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        -moz-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        -moz-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        -moz-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    to {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    animation-name: bounceInUp;
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s
}

.fadein {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999998;
    visibility: hidden;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    -webkit-transition: opacity .3s 0s,visibility 0s .3s;
    transition: opacity .3s 0s,visibility 0s .3s
}

    .fadein.visible {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity .3s 0s,visibility 0s 0s;
        transition: opacity .3s 0s,visibility 0s 0s
    }

.fadein-wrap {
    position: fixed;
    top: 30%;
    left: 50%;
    z-index: 99999;
    margin-top: -2.6667rem;
    margin-left: -3.8667rem;
    padding: .6667rem 0 0;
    width: 7.7333rem;
    border-radius: .2667rem;
    background-color: #263146;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
    text-align: center;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-backface-visibility: hidden
}

.fadein.visible .fadein-wrap {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.fadein-wrap .title {
    margin-bottom: .3rem;
    color: #64b1c1;
    font-weight: 500;
    font-size: .48rem
}

    .fadein-wrap .title span {
        display: block;
        margin-top: -.5rem;
        margin-bottom: .2rem;
        width: 100%;
        height: 1.2rem;
        text-indent: -9999999px
    }

        .fadein-wrap .title span.ximimanhua {
            background: url(../logo/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.boluomanhua {
            background: url(../logo/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.danciyuan {
            background: url(../../logo/danciyuan/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.danmanzhijia {
            background: url(../../logo/danmanzhijia/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.fanmugu {
            background: url(../../logo/fanmugu/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.jimeimanhua {
            background: url(../../logo/jimeimanhua/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.meidanmanhua {
            background: url(../../logo/meidanmanhua/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.nibashe {
            background: url(../../logo/nibashe/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.qiredanman {
            background: url(../../logo/qiredanman/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.qiremh {
            background: url(../../logo/qiremh/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.wamanmanhua {
            background: url(../../logo/wamanmanhua/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

        .fadein-wrap .title span.yidanmanhua {
            background: url(../../logo/yidanmanhua/pc.png) 50% no-repeat;
            background-size: auto 1.2rem
        }

.fadein-wrap .btn {
    margin-top: .4rem;
    width: 5.3333rem;
    height: 1.0667rem;
    border: none;
    border-radius: 1.0667rem;
    background-color: #36425a;
    color: #a6a9b2;
    text-align: center;
    font-size: .4rem;
    line-height: 1.0667rem;
    cursor: pointer
}

    .fadein-wrap .btn.wxbtn {
        color: #fff
    }

.fadein-wrap .by {
    margin: .4rem auto 0;
    padding: .3rem 0;
    border-top: 1px dashed #36425a;
    border-bottom-right-radius: .2667rem;
    border-bottom-left-radius: .2667rem;
    color: #a6a9b2;
    font-size: .3rem;
    line-height: .45rem
}

    .fadein-wrap .by a {
        margin: 0 2px;
        color: #555;
        font-weight: 500
    }

.fadein-wrap .close {
    position: absolute;
    top: .2rem;
    right: .2rem;
    overflow: hidden;
    width: .64rem;
    height: .64rem;
    border-radius: 50%;
    background-image: url(../img/close.png);
    background-position: 50%;
    background-size: .4rem;
    background-repeat: no-repeat;
    text-indent: -999px;
    cursor: pointer
}

.fadein-wrap .line {
    bottom: -1rem;
    width: 1px;
    height: 1.2rem;
    background-color: #263146
}

.fadein-wrap .bclose, .fadein-wrap .closead, .fadein-wrap .line {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
    -ms-transform: translate(-50%)
}

.fadein-wrap .bclose, .fadein-wrap .closead {
    bottom: -1.75rem;
    width: .75rem;
    height: .75rem;
    background: url(../img/icon_close.png) no-repeat;
    background-size: 100%;
    cursor: pointer
}

.fadein-wrap .bdTips {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    color: #fff;
    font-size: .4rem;
    line-height: .8rem
}

.tipsBox .content {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    color: #a6a9b2;
    font-size: .3733rem;
    line-height: .6rem
}

.tipsBox .green {
    margin: 20px auto 0;
    color: #00b36b;
    font-size: .3rem;
    line-height: .3rem
}

.tipsBox .radio {
    position: relative;
    top: 3px;
    display: inline-block;
    margin-right: 2px;
    width: .4267rem;
    height: .4267rem;
    cursor: pointer
}

.tipsBox .check_radio {
    background: url(../img/addr_radio.png);
    background-size: 100% 100%
}

.tipsBox .check_radio_active {
    background: url(../img/addr_radio_active.png);
    background-size: 100% 100%
}

.tipsBox .select {
    margin-top: .3rem;
    color: #a6a9b2;
    font-size: .3467rem
}

    .tipsBox .select .scheck {
        color: #00b36b
    }

.tipsBox .red {
    margin: 20px auto 0;
    color: #f66;
    font-size: .4rem;
    line-height: .5rem
}

#userout .tipsBox .input {
    margin-top: .3rem;
    width: 80%;
    border: 1px solid #3b4355;
    border-radius: 1.0667rem;
    background-color: #3b4355;
    color: #a6a9b2;
    text-align: center;
    line-height: 1rem
}

#userout .tipsBox .content {
    font-size: .35rem
}

.txpay-tips {
    padding: 0
}

    .txpay-tips .title {
        padding: .2rem;
        color: #67b299;
        font-weight: 500;
        font-size: .48rem
    }

    .txpay-tips .content {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        color: #a6a9b2;
        text-align: center;
        font-size: .32rem;
        line-height: .6rem
    }

        .txpay-tips .content.payerror {
            background: url(../img/c_collection_mark.png) no-repeat 100% 100%;
            background-size: 2.2rem
        }

.fadein .btn_bar {
    margin: .4rem auto;
    padding-top: .4rem;
    width: 90%;
    height: 1.3rem;
    border-top: 1px dashed #202634;
    font-size: .4267rem
}

    .fadein .btn_bar .btn {
        float: left;
        margin: 0 3%;
        width: 44%
    }

#security .fadein-wrap {
    padding: .6667rem 0 .8rem
}

#security .tipsBox .content {
    font-size: .35rem
}

#security .fadein-wrap .btn {
    color: #67b299
}

    #security .fadein-wrap .btn.no {
        background: #2b364b;
        color: #424d63
    }

.fadein-wrap.paymain {
    background: #fff
}

    .fadein-wrap.paymain .btn_bar.kefu {
        margin: 0 auto;
        border: 0
    }

        .fadein-wrap.paymain .btn_bar.kefu .btn {
            margin: 0;
            color: #3f85ff;
            font-size: .32rem;
            line-height: 1rem
        }

.fadein-wrap.paymain {
    top: 50%;
    left: 50%;
    margin-top: -260px;
    margin-left: -150px;
    padding: 0;
    width: 300px
}

    .fadein-wrap.paymain .box {
        position: relative;
        overflow: hidden;
        margin: 0;
        width: 300px;
        height: 460px;
        border-radius: 20px;
        text-align: center
    }

        .fadein-wrap.paymain .box .payload {
            position: absolute;
            top: 10px;
            left: 0;
            z-index: 99;
            display: block;
            width: 300px;
            height: 370px;
            background: #fff url(../../load.svg) no-repeat center 30%;
            background-size: 80px
        }

            .fadein-wrap.paymain .box .payload span {
                display: block;
                margin-top: 250px;
                width: 100%;
                height: 70px;
                color: #333;
                font-size: .5rem;
                line-height: 35px
            }

        .fadein-wrap.paymain .box .warring {
            position: relative;
            z-index: 4;
            padding-top: 50px;
            width: 220px;
            height: 180px;
            background: #fff;
            color: #999;
            font-size: .5rem;
            line-height: 40px
        }

        .fadein-wrap.paymain .box .paymoney {
            margin: 10px auto 5px;
            width: 100%;
            height: 1.3rem;
            background: #fff url(../img/moneybg.png) no-repeat 50%;
            color: #333;
            font-size: .5rem;
            line-height: 1.1rem
        }

            .fadein-wrap.paymain .box .paymoney b {
                font-size: .8rem
            }

        .fadein-wrap.paymain .box .paycode {
            position: relative;
            z-index: 2;
            overflow: hidden;
            margin: 0 auto 10px;
            border: 0;
            border-radius: .2rem;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,.05),0 6px 20px 0 rgba(0,0,0,.04)
        }

            .fadein-wrap.paymain .box .paycode, .fadein-wrap.paymain .box .paycode img {
                width: 220px;
                height: 220px;
                background: #fff url(../../loadcode.gif) no-repeat 50%;
                background-size: 220px
            }

                .fadein-wrap.paymain .box .paycode img {
                    margin: 0 auto
                }

        .fadein-wrap.paymain .box .payico {
            position: absolute;
            top: 87px;
            left: 87px;
            z-index: 3;
            display: block;
            padding: 0;
            width: 40px;
            height: 40px;
            border: 3px solid #fff;
            border-radius: 20%
        }

            .fadein-wrap.paymain .box .payico.ico2, .fadein-wrap.paymain .box .payico.icoalipay {
                background: #fff url(../img/n19__myvip_pay_zfb_popup.png) no-repeat 50%;
                background-size: 40px
            }

            .fadein-wrap.paymain .box .payico.ico1, .fadein-wrap.paymain .box .payico.icowxpay {
                background: #fff url(../img/n19__my_payvip_wechat_popup.png) no-repeat 50%;
                background-size: 40px
            }

            .fadein-wrap.paymain .box .payico.ico3, .fadein-wrap.paymain .box .payico.icoqqpay {
                background: #fff url(../img/n19__my_payvip_qq_popup.png) no-repeat 50%;
                background-size: 40px
            }

        .fadein-wrap.paymain .box .paytime, .fadein-wrap.paymain .box .paytips {
            margin: 0 auto;
            width: 100%;
            color: #111;
            font-size: .3rem;
            line-height: 20px
        }

        .fadein-wrap.paymain .box .paytips2 {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            color: #3f85ff;
            font-size: .35rem;
            line-height: 22px
        }

        .fadein-wrap.paymain .box .paytime {
            overflow: hidden;
            margin: 10px auto 0;
            height: .7rem
        }

            .fadein-wrap.paymain .box .paytime span {
                display: inline-block;
                margin: 0 5px;
                padding: .1rem;
                width: .9rem;
                height: .4rem;
                border-radius: .3rem;
                background: #06c05f;
                color: #fff;
                line-height: .4rem
            }

    .fadein-wrap.paymain .btn_bar {
        margin: -10px 0 0;
        padding: 0;
        width: 100%;
        height: 1.5rem;
        border-top: 1px solid #3f85ff
    }

    .fadein-wrap.paymain .btn.fl, .fadein-wrap.paymain .btn.fr {
        margin: 0;
        width: 65%;
        height: 1.5rem;
        border-radius: 0;
        border-bottom-left-radius: .2667rem;
        background: #3f85ff;
        color: #fff;
        font-size: .45rem;
        line-height: 1rem
    }

    .fadein-wrap.paymain .btn.fr {
        width: 35%;
        border-bottom-right-radius: .2667rem;
        background: #fff;
        color: #333
    }

    .fadein-wrap.paymain .close {
        z-index: 5
    }

    .fadein-wrap.paymain .box iframe {
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        border: 0
    }

    .fadein-wrap.paymain .bt, .fadein-wrap.paymain .btn {
        background: #fff
    }

.fadein-wrap .bt {
    display: flex;
    margin: .8rem auto;
    color: #393939;
    font-size: .4rem;
    align-items: center;
    justify-content: center
}

    .fadein-wrap .bt .btn {
        margin: 0 .1333rem;
        width: 3.1rem;
        height: 1.2rem;
        border-radius: 1.2rem;
        background-color: #37435b;
        color: #fff;
        text-align: center;
        font-size: .4rem;
        line-height: 1.2rem
    }

.fadein-wrap.paymain .bt .btn {
    border: 1px solid #ddd;
    background: #fff;
    color: #333
}

#chax-tips .txpay-tips .content, #fxpay-tips .txpay-tips .content, #no-pay .txpay-tips .content {
    text-align: left;
    font-size: .35rem;
    line-height: .7rem
}

    #no-pay .txpay-tips .content span {
        display: inline-block;
        margin: 10px 2px 0;
        padding: 0 5px;
        width: auto;
        height: .7rem;
        outline: 0;
        border: none;
        border-radius: 100px;
        background-image: linear-gradient(90deg,#77c1fe,#3383fc);
        color: #fff;
        line-height: .7rem
    }

    #no-pay .txpay-tips .content p {
        display: block;
        width: 100%;
        height: .1rem
    }

#clickbox .tipsBox {
    top: 45%
}

#spread.fadein {
    background-image: -webkit-linear-gradient(-40deg,rgba(61,73,96,.9) 19%,rgba(27,35,52,.9) 50%)
}

.fadein-wrap.spread {
    background: #21293c
}

#spread .spread {
    top: 18%;
    margin-left: -48%;
    padding: 0;
    width: 96%
}

.spread .box {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    border-radius: .2667rem
}

    .spread .box .time {
        position: absolute;
        top: .2rem;
        right: .2rem;
        z-index: 9;
        display: inline-block;
        width: 1rem;
        height: .5rem;
        border-radius: .48rem;
        background-color: rgba(0,0,0,.3);
        color: #fff;
        table-layout: fixed;
        text-align: center;
        text-indent: 0;
        word-wrap: break-all;
        line-height: .5rem;
        cursor: pointer;
        word-break: normal
    }

        .spread .box .time a {
            color: #fff
        }

    .spread .box .iframespread iframe, .spread .box .img {
        width: 100%;
        min-height: 12rem
    }

    .spread .box img {
        width: 100%
    }

.spread .showbuy, .spread .tips {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    color: #a6a9b2;
    text-align: center;
    font-size: .3rem;
    line-height: .8rem;
    cursor: pointer
}

.spread .showbuy {
    display: none
}

.spread .tips {
    margin: 0 auto;
    color: #a6a9b2;
    font-size: .35rem
}

.spread .btn {
    margin: .2rem auto .5rem;
    box-shadow: 0 10px 10px 4px rgba(15,22,36,0);
    color: #fff
}

    .spread .btn b {
        margin: 0 2px;
        font-weight: 400
    }

.spread .by {
    margin: 0 auto;
    padding: .4rem;
    height: .3rem;
    line-height: .3rem
}

    .spread .by a {
        padding: 0 .1rem;
        color: #999
    }

    .spread .by .info {
        float: right;
        width: 40%;
        text-align: right
    }

        .spread .by .info b {
            color: #67b299
        }

    .spread .by .field {
        position: relative;
        float: left;
        width: 60%;
        text-align: left
    }

.spread .closead {
    bottom: -1.2rem;
    width: 3rem;
    height: 1rem;
    background: 0 0;
    line-height: 1rem
}

    .spread .closead a {
        color: #fff;
        font-size: .4rem
    }

.fadein-wrap.outwin {
    top: 17%;
    margin-left: -45%;
    padding: 0;
    width: 90%
}

.outwin .title {
    margin-bottom: 0;
    padding: .1rem 0;
    color: #67b299;
    text-align: left;
    font-weight: 500;
    font-size: .48rem
}

.outwin-body {
    display: block;
    padding: 20px 10px 0;
    text-align: left
}

    .outwin-body .name {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 30px
    }

        .outwin-body .name span {
            color: red;
            font-size: .7em
        }

    .outwin-body .form-list {
        display: block;
        margin: 0 0 10px;
        padding: 0 5%;
        width: 90%
    }

    .outwin-body .form-line {
        display: block;
        margin: 0;
        width: 100%;
        color: #9fa7ba;
        font-size: .4rem
    }

        .outwin-body .form-line label {
            display: block;
            width: 100%;
            height: 1rem;
            line-height: 1rem
        }

            .outwin-body .form-line label input {
                margin-right: 5px
            }

    .outwin-body .form-text textarea {
        display: block;
        margin: 10px 0 15px;
        padding: 2%;
        width: 96%;
        height: 2rem;
        border: 0;
        border-radius: .2rem;
        background-color: #36425a;
        color: #fff;
        font-size: .35rem;
        line-height: .4rem
    }

    .outwin-body .form-bline {
        margin: 10px auto;
        padding: 15px 0;
        text-align: center
    }

        .outwin-body .form-bline button {
            display: inline-block;
            margin-right: 10px;
            width: 4rem;
            height: 1.2rem;
            border: 1px solid #67b299;
            border-radius: 2rem;
            background-color: #67b299;
            color: #fff;
            text-align: center;
            font-size: .4rem;
            line-height: 20px;
            cursor: pointer
        }

            .outwin-body .form-bline button.cancel-button {
                width: 2.2rem;
                border: 1px solid #67b299;
                border-radius: .6rem;
                background: 0 0;
                color: #67b299;
                cursor: pointer
            }

            .outwin-body .form-bline button:hover {
                border: 1px solid #67b299;
                background-color: #67b299;
                color: #fff;
                opacity: .5
            }

    .outwin-body .a-radio {
        display: none
    }

    .outwin-body .b-radio {
        position: relative;
        display: inline-block;
        margin-right: 5px;
        width: 16px;
        height: 16px;
        border: 0;
        border-radius: 50%;
        background-color: #36425a;
        vertical-align: middle
    }

        .outwin-body .b-radio:before {
            position: absolute;
            top: 50%;
            left: 50%;
            display: none;
            margin-top: -8px;
            margin-left: -8px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #67b299;
            background-image: url(../img/addr_radio_active.png);
            background-size: cover;
            background-repeat: no-repeat;
            content: "";
            font-size: 0
        }

    .outwin-body .a-radio:checked ~ .b-radio:before {
        display: block
    }

.d-flex .field input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0
}

    .d-flex .field input + .text:before {
        display: inline-block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: -3px;
        margin-right: 5px;
        padding: 0 .1rem;
        width: .4rem;
        height: .4rem;
        border: 0;
        background-image: url(../img/addr_radio.png);
        background-size: cover;
        background-repeat: no-repeat;
        content: "";
        vertical-align: middle
    }

    .d-flex .field input:checked + .text:before {
        background-image: url(../img/addr_radio_active.png);
        background-size: cover;
        background-repeat: no-repeat
    }

.mask50 {
    top: 0;
    z-index: 96;
    display: flex;
    display: none;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.mask50, .v-popup {
    position: fixed;
    left: 0;
    width: 100%
}

.v-popup {
    right: 0;
    bottom: 0;
    z-index: 9999999;
    margin: 0 auto;
    padding-top: 4rem;
    max-width: 720px;
    background-image: url(../img/renwubg.png);
    background-position: 100% 0;
    background-size: 6rem;
    background-repeat: no-repeat
}

.v-popup-top__bg {
    width: 100%;
    height: 1rem;
    background-image: url(../img/v-popupbg.png);
    background-position: top;
    background-size: 100%
}

.v-popup-main {
    position: relative;
    z-index: 9999;
    margin: 0 auto;
    padding: 0 1%;
    width: 98%;
    background-color: #21293c
}

.v-popup-bar {
    height: 45px;
    border-top: 1px solid #21293c;
    background-color: #21293c;
    color: #a6a9b2;
    text-align: center;
    font-size: .32rem;
    line-height: 45px
}

    .v-popup-bar.d-flex {
        display: flex;
        padding: 0 .4rem 1rem;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        -moz-box-pack: justify;
        justify-content: space-between
    }

        .v-popup-bar.d-flex .field {
            position: relative
        }

            .v-popup-bar.d-flex .field .text {
                position: relative;
                z-index: 1;
                color: #a6a9b2;
                font-size: .35rem
            }

            .v-popup-bar.d-flex .field input {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 2;
                width: 100%;
                height: 100%;
                opacity: 0
            }

        .v-popup-bar.d-flex .info b {
            color: #eda400
        }

.v-popup-main__primary, .v-popup-main__word {
    color: #9fa7ba;
    text-align: center;
    line-height: 1.6
}

.v-popup-main__word {
    margin-top: .5em
}

    .v-popup-main__word a {
        color: #eda400
    }

        .v-popup-main__word a.fh-btn {
            padding-left: 25px;
            background-image: url(../img/read_icon_previous.png);
            background-position: 0;
            background-size: 20px;
            background-repeat: no-repeat;
            color: #a6a9b2;
            font-size: .4rem
        }

.v-popup-main__word {
    color: #a6a9b2;
    font-size: .3467rem;
    line-height: 1.8
}

.v-popup-main__word2 {
    padding: .2667rem 1.0667rem 0;
    color: #a6a9b2;
    text-align: center;
    font-weight: 500;
    font-size: .4267rem;
    line-height: 1rem
}

    .v-popup-main__word2 h3 {
        color: #fff;
        font-weight: 700
    }

    .v-popup-main__word2 b {
        color: #f66;
        font-size: .5rem
    }

.v-popup-main-box {
    padding: .2667rem;
    color: #a6a9b2;
    text-align: center;
    font-size: .35rem;
    line-height: .8rem
}

.v-popup-main__primary .highlight, .v-popup-main__title .highlight, .v-popup-main__word .highlight {
    color: #f66
}

.v-popup-main__primary {
    font-size: .4533rem
}

.v-popup-main__title {
    color: #67b299;
    text-align: center;
    font-size: .4267rem
}

.v-popup-action {
    padding: 0 1.3333rem
}

    .v-popup-action button {
        width: 100%;
        height: 1.2rem;
        border: 0;
        border-radius: 1.2rem;
        box-shadow: 0 10px 10px 4px rgba(15,22,36,.2);
        text-align: cetner;
        font-size: .4rem;
        line-height: 1.2rem
    }

.v-popup .no_login button {
    margin-top: 1rem
}

.v-popup .no_money button {
    margin: .6rem 0 .5rem
}

.v-popup .no_login, .v-popup .no_money {
    padding-bottom: 1.2rem
}

.v-popup#adtips a.close, .v-popup#login-tips a.close {
    top: -.5rem
}

.v-popup#gold-tips .no_money, .v-popup#login-tips .v-popup-main {
    background-color: #21293c
}

.v-popup#buy-tips .v-popup-bar, .v-popup#buy-tips .v-popup-main {
    background-color: #3b455a
}

.v-popup#buy-tips {
    padding-top: 0;
    background: 0 0
}

.v-popup-head {
    display: flex;
    margin-bottom: -2px;
    height: 1.9rem;
    background: url(../img/popup_head_change.png) no-repeat top;
    background-size: 100% 100%
}

.v-popup .mar50 {
    height: .5333rem
}

.v-popup-head .h_item {
    position: relative;
    display: flex;
    height: 1.12rem;
    border-top-right-radius: .2667rem;
    color: #9fa7ba;
    text-align: center;
    font-size: .4rem;
    line-height: 1.12rem;
    flex: 1;
    align-self: flex-end;
    align-items: center;
    justify-content: center
}

.v-popup-head .active {
    height: 1.44rem;
    border-top-right-radius: .2667rem;
    border-top-left-radius: .2667rem;
    color: #67b299;
    font-weight: 500;
    font-size: .4267rem;
    line-height: 1.44rem
}

.v-popup-head-active {
    background: url(../img/popup_head_change_active.png);
    background-size: 100% 100%
}

.v-popup .mask_body {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;
    padding: .6667rem .48rem .9333rem;
    width: 100%;
    border-top-right-radius: .2667rem;
    border-top-left-radius: .2667rem;
    background-color: #21293c;
    box-shadow: 0 0 30px 0 rgb(0 0 0/30%)
}

#adtips {
    display: none
}

    #adtips.visible {
        display: block
    }

    #adtips.v-popup .no_login button {
        margin-top: .3rem
    }

.pay-popup .mask_body {
    display: flex;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    height: calc(100vh - 3.5rem)
}

    .pay-popup .mask_body .modal-close button {
        position: absolute;
        top: -.4rem;
        right: .2rem;
        z-index: 99;
        padding: 0;
        width: .8rem;
        height: .8rem;
        border: 0;
        border-radius: 50%;
        background: url(../img/ico_close.png) no-repeat 50%;
        background-color: #21293c;
        background-size: cover;
        text-indent: -999999px
    }

.pay-popup .iframe iframe {
    position: relative;
    top: -.4rem;
    z-index: 98;
    display: flex;
    width: 10rem;
    height: 100vh;
    background-color: #21293c
}

.v-popup .mask_body .title {
    font-weight: 600;
    font-size: .48rem
}

.v-popup .mask_body .subtitle {
    margin-top: .4rem;
    color: #5c5c5c;
    font-size: .3467rem
}

.popup-action {
    display: flex;
    padding: 0 .4rem;
    justify-content: space-between
}

    .popup-action .btn {
        position: relative;
        width: 4.4rem;
        height: 1.2rem;
        border: none;
        border-radius: 1.2rem;
        background-color: transparent;
        font-weight: 500;
        font-size: .4rem
    }

    .popup-action .btn_right {
        border: 1px solid #67b299;
        color: #67b299
    }

    .popup-action .icon_btnRight_text {
        position: absolute;
        top: -.4rem;
        left: 50%;
        display: block;
        padding: .08rem .2rem;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        border-top-left-radius: 100px;
        background-color: #1bcb66;
        color: #fff;
        font-size: .2667rem
    }

.no_overflow {
    overflow: hidden;
    height: 100%
}

.doing-wrap {
    background-color: #426464;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/bg_hd-expire.png)
}

    .doing-wrap .title {
        padding-top: 3rem;
        color: #ffd451;
        font-size: .5rem
    }

    .doing-wrap .subtitle {
        margin-top: .3rem;
        color: #8dafa4;
        font-size: .35rem
    }

    .doing-wrap .content {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        color: #ddd;
        text-align: left;
        font-size: .35rem;
        line-height: .6rem
    }

    .doing-wrap .date {
        margin-top: .3rem
    }

        .doing-wrap .date a {
            color: #8dafa4;
            font-size: .35rem
        }

    .doing-wrap .btn {
        display: block;
        margin: .6rem auto 0;
        width: 6rem;
        height: 1.3rem;
        border-radius: 100px;
        background-image: url(../img/action.png);
        background-size: cover;
        background-repeat: no-repeat;
        color: #333;
        font-size: .5rem;
        line-height: 1.3rem;
        cursor: pointer
    }

.doing .fadein-wrap .by {
    border-top: 1px dashed #365757;
    color: #6f8e8e
}

.mescroll {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    border: 0;
    background: 0 0;
    margin-bootom: 30px
}

@media (max-width:641px) {
    .mescroll {
        margin-bootom: 30px
    }
}

.mescroll-downwarp {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    background-color: #21293c;
    text-align: center
}

.mescroll-downwarp-reset {
    -webkit-transition: height .3s;
    transition: height .3s
}

.mescroll-downwarp .downwarp-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    width: 100%;
    min-height: 30px
}

.mescroll-upwarp {
    visibility: hidden;
    padding: 0;
    height: 0;
    text-align: center
}

.mescroll-hardware {
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 0
}

@media (max-width:641px) {
    .mescroll-hardware {
        margin-bottom: 160px;
        height: 20px;
        -webkit-transform: translateZ(0);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000
    }

    .mescroll-downwarp .downwarp-tip, .mescroll-upwarp .upwarp-nodata, .mescroll-upwarp .upwarp-tip {
        display: inline-block;
        display: none;
        color: #a6a9b2;
        vertical-align: middle;
        font-size: .3rem
    }
}

.mescroll-downwarp .downwarp-tip, .mescroll-upwarp .upwarp-tip {
    margin-left: 8px
}

.mescroll-downwarp .downwarp-progress, .mescroll-upwarp .upwarp-progress {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid;
    border-color: grey grey transparent;
    border-radius: 50%;
    vertical-align: middle
}

.mescroll-rotate {
    -webkit-animation: mescrollRotate .6s linear infinite;
    animation: mescrollRotate .6s linear infinite
}

@-webkit-keyframes mescrollRotate {
    0% {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes mescrollRotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.mescroll-empty {
    padding-top: 20px;
    width: 100%;
    text-align: center
}

    .mescroll-empty .empty-icon {
        width: 45%
    }

    .mescroll-empty .empty-tip {
        margin-top: 6px;
        color: grey;
        font-size: 14px
    }

    .mescroll-empty .empty-btn {
        margin: 20px auto;
        padding: 10px;
        max-width: 50%;
        border: 1px solid #65aadd;
        border-radius: 6px;
        background-color: #21293c;
        color: #65aadd
    }

        .mescroll-empty .empty-btn:active {
            opacity: .75
        }

.mescroll-totop {
    position: fixed;
    right: 10px;
    bottom: 180px;
    width: 1rem;
    height: 1rem;
    border-radius: 1.067rem;
    background-image: url(../img/to-top.png);
    background-position: 50%;
    background-size: 1rem;
    background-repeat: no-repeat;
    text-indent: -999999px;
    opacity: 0;
    cursor: pointer
}

.mescroll-fade-in, .mescroll-lazy-in {
    -webkit-animation: mescrollFadeIn .5s linear forwards;
    animation: mescrollFadeIn .5s linear forwards
}

@-webkit-keyframes mescrollFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mescrollFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.mescroll-fade-out {
    pointer-events: none;
    -webkit-animation: mescrollFadeOut .5s linear forwards;
    animation: mescrollFadeOut .5s linear forwards
}

@-webkit-keyframes mescrollFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes mescrollFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.mescroll-bar::-webkit-scrollbar-track {
    background-color: transparent
}

.mescroll-bar::-webkit-scrollbar {
    display: none;
    width: 6px
}

.mescroll-bar::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #ccc
}

    .mescroll-bar::-webkit-scrollbar-thumb:hover {
        background-color: #36425a
    }

.mescroll-downwarp .downwarp-mascot {
    width: 100%;
    height: 50px;
    background-image: url(../img/topload.gif);
    background-position: 50%;
    background-size: 50px;
    background-repeat: no-repeat
}

#ui-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999996;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3)
}

#ui-mask-box {
    position: fixed !important;
    top: 2rem;
    left: 5%;
    z-index: 9999997;
    display: block;
    width: 90%;
    height: 2rem;
    border-radius: .3rem;
    background-color: #35363a;
    color: #fff;
    text-align: center;
    font-size: .4rem;
    line-height: 1.65rem
}

    #ui-mask-box, #ui-mask-box.on {
        transition: all .2s ease-in-out
    }

        #ui-mask-box.on {
            top: 0;
            float: none
        }

        #ui-mask-box.state1 {
            background-color: rgba(217,83,79,.95)
        }

        #ui-mask-box.state2 {
            background-color: rgba(103,178,153,.95)
        }

        #ui-mask-box.state3 {
            background-color: rgba(91,192,222,.95)
        }

        #ui-mask-box.state4 {
            background-color: rgba(240,173,78,.95)
        }

        #ui-mask-box div.close {
            z-index: 9999998;
            float: none;
            display: block;
            overflow: hidden;
            margin: 0 auto;
            width: 80px;
            height: 8px;
            border-radius: 6px;
            background-color: #fff;
            cursor: pointer
        }

@media only screen and (min-width:1024px) {
    #ui-mask-box {
        max-width: 390px
    }
}

#ui-mask-box.chatalert {
    height: 1.3rem;
    border-radius: .2rem;
    background-color: hsla(0,0%,100%,.95);
    box-shadow: 0 1px 10px 1px rgba(0,0,0,.3);
    text-align: left;
    line-height: 1.3rem
}

    #ui-mask-box.chatalert .msg {
        display: block;
        width: 90%;
        height: 1.3rem;
        color: #111
    }

    #ui-mask-box.chatalert i.ico {
        position: relative;
        top: .2rem;
        display: inline-block;
        margin: 0 5px 0 10px;
        width: .8rem;
        height: .8rem;
        border-radius: 50%;
        background: url(../img/icon_kf.jpg) no-repeat 50%;
        background-size: cover
    }

    #ui-mask-box.chatalert .close {
        position: absolute;
        top: .35rem;
        right: .2rem;
        width: .6rem;
        height: .6rem;
        background: url(../img/search_icon_clean.png) no-repeat;
        background-size: cover
    }

    #ui-mask-box.chatalert.on {
        top: .5rem
    }

.spinner {
    position: fixed;
    bottom: 5%;
    left: 50%;
    z-index: 9999998;
    margin-left: -60px;
    width: 120px;
    height: 120px;
    background: url(../img/loadbg.gif) no-repeat 50%;
    background-size: 100%
}

.lazy {
    background-image: url(../img/placeholder-unruly.png);
    background-position: 50%;
    background-size: cover
}

    .lazy:after {
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);
        content: "";
        transform: skewX(-20deg);
        animation: ray .5s linear .2s infinite alternate;
        animation-iteration-count: 1
    }

.bm-headline.books-fluid .item .thumbnail .thumb_img.lazy {
    background-position: 50% 10%
}

.calwh.lazy {
    background: #fff
}

.elink {
    display: block;
    margin: 0 auto;
    width: 96%
}

    .elink li {
        float: left;
        margin: 0 .1rem .2rem 0
    }

    .elink a {
        display: inline-block;
        padding: 0 .7em;
        height: .5rem;
        border: 0 solid #eee;
        border-radius: .5rem;
        color: #a6a9b2;
        table-layout: fixed;
        word-wrap: break-all;
        line-height: .5rem;
        word-break: normal
    }

#footerbg {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
    height: 3rem;
    background-image: url(../img/footerbg.png);
    background-position: 100% 0;
    background-size: cover
}

@media only screen and (min-width:1024px) {
    html {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        background-color: #21293c;
        font-size: 37.5px !important
    }

    .cm-tabbar.fixed, html {
        max-width: 414px
    }

    .v-newcomers {
        right: 50%;
        transform: translate(188px)
    }

    .v7_recharge .cp_v7_container {
        left: 50%;
        margin-left: -188px;
        width: 414px
    }

    .v7_bottom {
        position: fixed;
        bottom: 1.2rem;
        left: 50%;
        z-index: 99;
        box-sizing: border-box;
        padding: 0 .26rem;
        width: 414px;
        transform: translate(-50%)
    }

    .episode-detail .item img {
        display: block;
        margin: 0 auto;
        height: auto !important;
        max-width: 768px;
        piaddig: 0
    }

    .mask-box {
        right: 0;
        z-index: 9;
        display: block
    }

    .mask-box, .v7_end {
        position: fixed;
        bottom: 0;
        left: 50%;
        width: 414px;
        transform: translate(-50%)
    }

    .v7_end {
        display: flex;
        box-sizing: border-box;
        padding: 0 .4rem;
        height: 2.2667rem;
        justify-content: space-between;
        align-items: center
    }

    .read-bar, .v7_end {
        background-color: #21293c
    }

    .read-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 50%;
        width: 414px;
        height: 1.34rem;
        transform: translate(-50%)
    }

    .w1024 {
        margin: 0 auto;
        width: 100%
    }
}

.thumb_img {
    position: relative;
    display: block;
    margin: 0 auto
}

    .thumb_img:before {
        position: absolute;
        top: 0;
        left: -75%;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(left,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,0) 100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0,hsla(0,0%,100%,0)),color-stop(50%,hsla(0,0%,100%,.2)),color-stop(100%,hsla(0,0%,100%,0)));
        background: -webkit-linear-gradient(left,hsla(0,0%,100%,0),hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,0));
        background: -o-linear-gradient(left,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,0) 100%);
        content: "";
        -webkit-transform: skewX(-25deg);
        -moz-transform: skewX(-25deg)
    }

    .thumb_img:hover:before {
        left: 150%;
        transition: left 1.5s ease 0s
    }

.v7_buy_vip_text {
    margin: 0 auto;
    width: 98%
}

    .v7_buy_vip_text p {
        height: .6rem;
        color: #a6a9b2;
        font-size: .32rem;
        line-break: 1.8
    }

        .v7_buy_vip_text p a {
            color: #64b1c1;
            font-size: .32rem
        }

.v7_buy_vip_title {
    padding: 0 0 .2667rem .4rem;
    font-weight: 600;
    font-size: .5067rem
}

.v7_mask .v7_mask_tips2 {
    width: 7.7333rem;
    height: 5.3333rem
}

.v7_mask .v7_mask_success, .v7_mask .v7_mask_tips2 {
    display: flex;
    border-radius: .2667rem;
    background-color: #21293c;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.v7_mask .v7_mask_success {
    width: 6.6667rem;
    height: 7.5333rem
}

.v7_mask .icon_success {
    display: block;
    margin-top: .4rem;
    width: 2.8rem;
    border: 0
}

.v7_mask .v7_mask_success .title {
    color: #eda400;
    font-weight: 500;
    font-size: .5333rem
}

.v7_mask .v7_mask_success .cont {
    margin-top: .2667rem;
    color: #5c5c5c;
    font-size: .4rem
}

.v7_mask .v7_mask_success .btn {
    margin-top: .6rem;
    width: 4.7467rem;
    height: 1.04rem;
    border: 0;
    border-radius: 1.04rem;
    background: linear-gradient(90deg,#ffe153,#ffc421);
    color: #423300;
    font-weight: 500;
    font-size: .4rem
}

.v-hidden {
    visibility: hidden
}

.v-hidden-2, .v-hidden-2#footerbg, .v-hidden-3 {
    display: none
}

.wall {
    position: relative;
    display: block;
    margin: 20px 2%
}

    .wall .item {
        display: block;
        margin: 0 0 10px;
        padding-bottom: 10px;
        border-radius: 8px;
        background: #262f40;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        transition: all .22s
    }

        .wall .item .img {
            float: left;
            display: block;
            margin: 10px
        }

            .wall .item .img img {
                display: block;
                margin: 0;
                width: 100%;
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                -o-transition: all .3s;
                transition: all .3s
            }

        .wall .item h2, .wall .item p {
            display: block;
            margin: 0 12px;
            color: #ddd;
            text-align: left;
            text-transform: uppercase;
            font-weight: 400;
            line-height: 22px
        }

        .wall .item h2 {
            color: #fff;
            font-size: 16px
        }

        .wall .item p {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #36425a;
            background: url(../img/hot.png) no-repeat left 12px;
            background-size: 16px;
            color: #949494;
            text-align: left;
            text-indent: 18px;
            font-size: 12px
        }

            .wall .item p span.fr {
                float: right;
                text-align: right
            }

        .wall .item:hover {
            top: -5px;
            background-color: #263146;
            box-shadow: 0 34px 20px -24px rgba(117,134,167,.2);
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
            -ms-transform: translateY(-3px)
        }

            .wall .item:hover img {
                transform: scale(1.02)
            }

            .wall .item:hover h2 {
                color: #fff
            }

.newsinfo {
    display: block;
    padding-bottom: 20px;
    width: 100%;
    max-width: 1200px;
    color: #9fa7ba;
    text-indent: 5px
}

    .newsinfo span {
        float: right;
        display: inline-block;
        margin-right: 10px;
        height: .5rem;
        font-size: .3rem
    }

        .newsinfo span i {
            position: relative;
            top: 2px;
            display: inline-block;
            margin-right: 5px;
            width: .35rem;
            height: .35rem;
            background: url(../img/icon-user-outline.png) no-repeat 50%;
            background-size: .35rem;
            text-align: left
        }

            .newsinfo span i.icon-clock {
                background: url(../img/icon-clock.png) no-repeat 50%;
                background-size: .35rem
            }

            .newsinfo span i.icon-eye-outline {
                background: url(../img/icon-eye-outline.png) no-repeat 50%;
                background-size: .35rem
            }

        .newsinfo span.fl {
            float: left
        }

.news-title {
    padding: 10px 2%;
    color: #fff;
    font-weight: 700;
    font-size: .55rem;
    line-height: .8rem
}

.newstext {
    padding: 10px 2%;
    width: 96%;
    background-color: #21293c;
    color: #9fa7ba;
    letter-spacing: 1px;
    font-size: .42rem;
    line-height: .7rem
}

    .newstext p {
        margin: 10px 0;
        text-align: left
    }

    .newstext h1, .newstext h2, .newstext h3, .newstext h4, .newstext h5, .newstext h6 {
        border-left: 10px solid #ffd139;
        color: #ffd139;
        text-indent: 5px;
        font-weight: 700
    }

    .newstext b, .newstext strong {
        background-color: #ffd139;
        color: #111;
        font-weight: 700
    }

    .newstext img {
        margin: 10px auto;
        width: auto;
        max-width: 100%;
        border: 0
    }

    .newstext iframe {
        margin-bottom: 10px;
        width: 100%;
        height: 320px;
        max-width: 640px;
        text-align: center
    }

    .newstext table {
        margin: 0 auto;
        padding: 0;
        border: 1px solid #a6a9b2;
        border-collapse: collapse;
        table-layout: fixed;
        text-indent: 0
    }

    .newstext tr {
        margin: 0;
        padding: 0
    }

    .newstext td, .newstext th {
        margin: 0;
        padding: 1px 3px;
        border: 1px solid #a6a9b2;
        border-top: none;
        text-align: center
    }

    .newstext table p {
        text-indent: 0
    }

    .newstext a {
        border-bottom: 1px dashed #eee;
        color: #ffd139
    }

        .newstext a:hover {
            border-bottom: 1px dashed #fff;
            color: #fff
        }

    .newstext .bd-carousel, .newstext .smalltext {
        display: inline-block;
        margin-bottom: .2rem;
        padding: .2rem .3rem;
        border-radius: 8px;
        background-color: #ffd139;
        color: #111
    }

    .newstext .bd-carousel {
        padding: 0
    }

        .newstext .bd-carousel .bd-carousel__container .item a {
            padding: .1rem .2rem;
            border-bottom: 0
        }

        .newstext .bd-carousel .bd-carousel__container .item .body .title {
            color: #111;
            font-size: .46rem
        }

        .newstext .bd-carousel .bd-carousel__container .item .desc {
            color: #333;
            -webkit-line-clamp: 4
        }

    .newstext .next, .newstext .pre {
        border-bottom: 0;
        color: #d8d8d8;
        font-size: .32rem
    }

    .newstext .pre {
        float: left;
        display: block;
        margin: 15px 0;
        padding-top: 15px;
        width: 100%;
        border-top: 1px dashed #a6a9b2
    }

        .newstext .next a, .newstext .pre a {
            border-bottom: 0;
            color: #d8d8d8;
            font-size: .32rem
        }

.fadein-wrap.WeChat {
    top: 20%;
    background-color: transparent;
    box-shadow: 0 0 0 transparent
}

    .fadein-wrap.WeChat img {
        width: 8rem
    }

.tag-container {
    display: flex;
    flex-wrap: wrap;
    z-index: 99;
    overflow: hidden;
    margin: 0;
    height: auto;
    background-color: #21293c;
}

    .tag-container .col a {
        display: inline-block;
        padding: 0;
        font-size: .3467rem;
        margin-right: 0.5rem;
        height: .72rem;
        color: #a6a9b2;
        line-height: .72rem;
    }

        .tag-container .col a.active {
            position: relative;
            color: #67b299;
            font-size: .4rem;
            transform: scale(1.04);
            -ms-transform: scale(1.04);
        }