html:root
{
    --color-background-red: #ffedf0;
    --color-main-dark: #d40f51;
    --color-main: #ff5470;
    --color-border: #ffcdd5;
    --backimg-home: url(/images/default/home.svg) center no-repeat;
    --backimg-recommend: url(/images/default/idx_1.svg) center no-repeat;
    --backimg-library: url(/images/default/networksearch.svg) center no-repeat;
    --backimg-rank: url(/images/default/idx_2.svg) center no-repeat;
    --backimg-history: url(/images/default/fav.svg) center no-repeat;
    --backimg-user: url(/images/default/user.svg) center no-repeat;
    --backimg-naval: url(/images/default/naval.svg) center no-repeat;
    --backimg-startp: url(/images/default/home.svg) center no-repeat;
    --backimg-prep: url(/images/default/pstar.svg) center no-repeat;
    --backimg-nextp: url(/images/default/pend.svg) center no-repeat;
    --backimg-pagep: url(/images/default/menu.svg) center no-repeat;
    --backimg-sharep: url(/images/default/share.svg) center no-repeat;
}

html.novel:root
{
    --color-background-red: #f7ffff;
    --color-main-dark: #169348;
    --color-main: #5bb27e;
    --color-border: #c5f3d9;
    --backimg-home: url(/images/default/home.svg) center no-repeat;
    --backimg-recommend: url(/images/default/idx_1.svg) center no-repeat;
    --backimg-library: url(/images/default/networksearch.svg) center no-repeat;
    --backimg-rank: url(/images/default/idx_2.svg) center no-repeat;
    --backimg-history: url(/images/default/fav.svg) center no-repeat;
    --backimg-user: url(/images/default/user.svg) center no-repeat;
    --backimg-naval: url(/images/default/naval.svg) center no-repeat;
    --backimg-startp: url(/images/default/home.svg) center no-repeat;
    --backimg-prep: url(/images/default/pstar.svg) center no-repeat;
    --backimg-nextp: url(/images/default/pend.svg) center no-repeat;
    --backimg-pagep: url(/images/default/menu.svg) center no-repeat;
    --backimg-sharep: url(/images/default/share.svg) center no-repeat;
}

html.ink:root
{
    --color-background-red: #f4f4f4;
    --color-main-dark: #777;
    --color-main: #e50012;
    --color-border: #ddd;
    --backimg-home: url(/images/default/home.svg) center no-repeat;
    --backimg-recommend: url(/images/default/idx_1.svg) center no-repeat;
    --backimg-library: url(/images/default/networksearch.svg) center no-repeat;
    --backimg-rank: url(/images/default/idx_2.svg) center no-repeat;
    --backimg-history: url(/images/default/fav.svg) center no-repeat;
    --backimg-user: url(/images/default/user.svg) center no-repeat;
    --backimg-naval: url(/images/default/naval.svg) center no-repeat;
    --backimg-startp: url(/images/default/home.svg) center no-repeat;
    --backimg-prep: url(/images/default/pstar.svg) center no-repeat;
    --backimg-nextp: url(/images/default/pend.svg) center no-repeat;
    --backimg-pagep: url(/images/default/menu.svg) center no-repeat;
    --backimg-sharep: url(/images/default/share.svg) center no-repeat;
}

*
{
    -webkit-tap-highlight-color: transparent;
    outline: none;
    font-family: 'Microsoft JhengHei','Droid Sans',Noto,PingFang SC
}

html, body
{
    height: 100%;
}

h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, li, p, form
{
    margin: 0;
    list-style: none;
    padding: 0;
}

body
{
    padding: 0px 0 0 0px;
    margin: 0px auto;
    background-color: #f6f6f6;
}

    body::-webkit-scrollbar,
    .ztplist ul::-webkit-scrollbar
    {
        background-color: #ddd;
        width: 8px;
        transition: all 0.3s;
    }

    body::-webkit-scrollbar-thumb,
    .ztplist ul::-webkit-scrollbar-thumb
    {
        background-color: #999;
    }

.main
{
    margin: 0 auto;
    padding: 60px 0px 0px 0px;
    background-color: #f8f8f8;
    min-height: 100%;
    box-sizing: border-box;
}

    .main:after
    {
        content: "";
        display: block;
        clear: both;
        width: 100%;
        height: 0;
        overflow: hidden;
        opacity: 0;
    }

.loading
{
    display: none;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    opacity: 1;
    z-index: 9
}

    .loading .loadmask
    {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
    }

    .loading img
    {
        width: 180px;
        margin-left: -90px;
        height: auto;
        top: 50%;
        position: absolute;
        left: 50%;
        margin-top: -15px;
        display: none;
    }

.loadani
{
    width: 200px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px auto auto -100px;
    font-size: 0;
    transform-origin: center;
}

    .loadani span
    {
        display: inline-block;
        border: 0px solid transparent;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        background-color: var(--color-main);
        margin: 2px;
        box-sizing: border-box;
        border: 6px solid #fff;
        position: relative;
        animation: loadani 1.8s linear infinite;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2)
    }

        .loadani span:nth-child(1)
        {
            animation-delay: 0s;
        }

        .loadani span:nth-child(2)
        {
            animation-delay: 0.15s;
        }

        .loadani span:nth-child(3)
        {
            animation-delay: 0.3s;
        }

        .loadani span:nth-child(4)
        {
            animation-delay: 0.45s;
        }

        .loadani span:nth-child(5)
        {
            animation-delay: 0.6s;
        }

.loadmoreloading
{
    display: inline-block;
    padding: 15px 0;
    font-size: 0;
}

    .loadmoreloading span
    {
        display: inline-block;
        border: 0px solid transparent;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        background-color: #ddd;
        margin: 0 4px;
        box-sizing: border-box;
        position: relative;
        animation: loadani2 1s linear infinite;
        transform: scale(1)
    }

        .loadmoreloading span:nth-child(1)
        {
            animation-delay: 0s;
        }

        .loadmoreloading span:nth-child(2)
        {
            animation-delay: 0.15s;
        }

        .loadmoreloading span:nth-child(3)
        {
            animation-delay: 0.3s;
        }

        .loadmoreloading span:nth-child(4)
        {
            animation-delay: 0.45s;
        }

        .loadmoreloading span:nth-child(5)
        {
            animation-delay: 0.6s;
        }

@keyframes loadani
{
    0%
    {
        top: 0px
    }

    10%
    {
        top: -40px
    }

    20%
    {
        top: 0px;
    }

    30%
    {
        top: 40px;
    }

    40%
    {
        top: 0px;
    }

    100%
    {
        top: 0px;
    }
}

@keyframes loadani2
{
    0%
    {
        background-color: #ddd;
        transform: scale(1)
    }

    20%
    {
        background-color: var(--color-main);
        transform: scale(1.6)
    }

    40%
    {
        background-color: #ddd;
        transform: scale(1)
    }

    100%
    {
        background-color: #ddd;
        transform: scale(1)
    }
}

a
{
    text-decoration: none;
    color: #444;
    cursor: pointer;
}

button
{
    cursor: pointer;
}

.clear
{
    clear: both;
    height: 0px;
    line-height: 0px;
}

ul
{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

header
{
    height: 60px;
    position: fixed;
    top: 0px;
    z-index: 5;
    width: 100%;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

.headerbox
{
    display: block;
    margin: 0 auto;
    height: 60px;
    max-width: 1380px;
    padding: 0 10px;
    position: relative;
    text-align: center;
    font-size: 0;
    transition: position 0.3s,padding 0.3s;
}

header .logo
{
    position: relative;
    top: 0;
    left: 0px;
    height: 60px;
    font-size: 0px;
    color: var(--color-main);
    line-height: 60px;
    padding: 0px;
    font-family: CRCandGYukiha;
    float: left;
}

    header .logo svg
    {
        display: inline-block;
        height: 60px;
        width: 25px;
        vertical-align: top;
    }

    header .logo .logoimg
    {
        display: inline-block;
        height: 100%;
        width: auto;
        vertical-align: top;
        box-sizing: border-box;
        padding: 13px 0;
    }

header .lock
{
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    font-size: 0px;
    display: inline-block;
    white-space: nowrap;
    padding: 0 15px;
    font-family: 'Microsoft YaHei';
    cursor: pointer;
    color: #666;
    vertical-align: top;
}

    header .lock.open
    {
        color: var(--color-main);
    }

    header .lock > span
    {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 18px;
        border-radius: 20px;
        position: relative;
        background-color: #ddd;
        margin-right: 5px;
        opacity: 0.4;
    }

        header .lock > span > span
        {
            display: block;
            width: 14px;
            height: 14px;
            position: absolute;
            top: 2px;
            left: 2px;
            border-radius: 20px;
            background-color: #666;
            transition: all 0.2s;
        }

    header .lock.open > span
    {
        background-color: var(--color-border);
        opacity: 1;
    }

        header .lock.open > span > span
        {
            background-color: var(--color-main);
            left: 14px;
        }

    header .lock > b
    {
        font-size: 16px;
        vertical-align: middle;
        font-weight: normal;
    }

header ul
{
    display: block;
    height: 60px;
    width: auto;
    overflow: hidden;
}

    header ul li
    {
        display: inline-block;
        vertical-align: top;
        font-size: 18px;
        font-weight: bold;
        height: 60px;
        overflow: hidden;
        cursor: pointer;
    }

        header ul li a
        {
            color: #333;
            display: block;
            height: 60px;
            line-height: 60px;
            padding: 0px 15px;
            transition: all 0.2s;
            font-weight: normal;
            position: relative;
            cursor: pointer;
        }

            header ul li a img
            {
                display: inline-block;
                margin: 0 5px 0 0;
                width: 22px;
                height: 100%;
                margin-bottom: 0px;
                vertical-align: top;
                position: relative;
                opacity: 0;
            }

            header ul li a:before
            {
                content: "";
                display: block;
                width: 22px;
                height: 100%;
                top: 0;
                left: 15px;
                position: absolute;
            }

        header ul li.home a:before
        {
            background: var(--backimg-home);
            background-size: 100% auto;
        }

        header ul li.recommend a:before
        {
            background: var(--backimg-recommend);
            background-size: 100% auto;
        }

        header ul li.library a:before
        {
            background: var(--backimg-library);
            background-size: 100% auto;
        }

        header ul li.rank a:before
        {
            background: var(--backimg-rank);
            background-size: 100% auto;
        }

        header ul li.history a:before
        {
            background: var(--backimg-history);
            background-size: 100% auto;
        }

        header ul li.user a:before
        {
            background: var(--backimg-user);
            background-size: 100% auto;
        }

        header ul li.naval a:before
        {
            background: var(--backimg-naval);
            background-size: 100% auto;
        }

        header ul li:hover
        {
            background-color: #f3f3f3
        }

        header ul li a:hover
        {
            transform: scale(1.04);
            color: var(--color-main)
        }

header .tip
{
    display: none;
    position: absolute;
    top: 5px;
    right: 3px;
    background-color: var(--color-main);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    color: #fff;
    line-height: 20px;
    font-size: 11px;
}

.pace
{
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 2px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10000;
}

.pace-inactive
{
    display: none;
}

.pace .pace-progress
{
    background: #ffc4cd;
    position: fixed;
    z-index: 5000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

header ul li.nowreading:hover
{
    background-color: transparent;
}

.headright
{
    position: relative;
    right: 0;
    top: 0;
    height: 60px;
    line-height: 60px;
    padding: 0px;
    float: right;
}

.open18
{
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 20px;
    border-radius: 50px;
    box-sizing: border-box;
    padding: 3px 8px 3px 3px;
    background-color: #f3f3f3;
    margin-right: 20px;
    cursor: pointer;
    border: 2px solid #eee;
}

    .open18 > span
    {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid #ddd;
        margin-right: 4px;
        vertical-align: top;
        background-color: #fff;
    }

    .open18:hover
    {
        border-color: var(--color-border);
        background-color: #fef0f2;
        padding: 4px 9px 4px 4px;
    }

        .open18:hover > span
        {
            border-color: var(--color-border);
        }

    .open18 > span svg
    {
        display: none;
    }

    .open18.open b
    {
        color: var(--color-main);
    }

    .open18.open > span
    {
        border-color: var(--color-main);
    }

    .open18.open
    {
        border-color: var(--color-border);
        background-color: #fef0f2;
        padding: 3px 8px 3px 3px;
        color: var(--color-main);
    }

        .open18.open > span svg
        {
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            fill: var(--color-main);
            padding: 0px;
        }

    .open18 b
    {
        font-size: 14px;
        font-weight: normal;
        color: #666;
    }

.headuser
{
    display: inline-block;
    vertical-align: top;
    font-size: 0;
}
/*.headuser b { display: block; font-weight: normal; color: #666; font-size: 14px; }
        .headuser b a { display: inline-block; border: 2px solid var(--color-border); color: var(--color-main); border-radius: 30px; padding: 0 10px; line-height: 26px; height: 30px; box-sizing: border-box; vertical-align: middle; cursor: pointer; background-color: var(--color-background-red); }
        .headuser b span { display: inline-block; height: auto; vertical-align: middle; line-height: 20px; text-align: left; font-size: 14px; padding-right: 10px; }
            .headuser b span em { display: block; font-size: 11px; line-height: 14px; font-style: normal; color: #666; }*/
.headnav
{
    display: block;
    left: 0;
    height: auto;
    width: 100%;
    background: #333;
    background-size: cover;
    padding: 10px 0;
}

#homePageContent .headnav
{
    margin-bottom: 10px;
}

.imgbox
{
    position: relative;
    overflow: hidden;
    display: block;
}

    .imgbox:before
    {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        box-shadow: 0 0 15px rgba(0,0,0,0.15) inset;
    }

    .imgbox img
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-position: 50% 0%;
        object-fit: cover;
        transform: translateZ(0);
        transition: all 0.3s;
    }

        .imgbox img.imgmask
        {
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            height: auto;
        }

    .imgbox svg.imgmask
    {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }
    .imgbox .delhistory
    {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #f60;
        color: #fff;
        font-weight: bolder;
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 100;
        font-size: 28px;
        text-align: center;
        line-height: 34px;
        border-radius: 8px;
        box-shadow: 0 2px 5px #666;
    }
a:hover .imgbox img
{
    transform: scale(1.05)
}

.indexbanner
{
    width: 100%;
    padding: 30px 0 0px 0;
    background-color: #000;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom,#000,#333);
    overflow: hidden;
}

    .indexbanner > div
    {
        position: relative;
        margin: 0 auto;
        width: 600px;
        height: auto;
    }

    .indexbanner ul
    {
        font-size: 0;
        white-space: nowrap;
        width: 600px;
        height: auto;
        position: absolute;
        margin: 0 auto;
        display: block;
        top: 0;
        left: 0;
    }

        .indexbanner ul li
        {
            display: inline-block;
            vertical-align: top;
            white-space: nowrap;
            width: 600px;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            transition: all 0.3s;
            opacity: 0;
            transform: scale(0.5);
            transform-origin: center;
            transform: translate3d(0,0,0)
        }

    .indexbanner div.bannermask
    {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }

        .indexbanner div.bannermask img
        {
            display: block;
            width: 100%;
            height: auto;
        }

    .indexbanner ul li .imgbox
    {
        background-color: #000;
    }

        .indexbanner ul li .imgbox img
        {
            opacity: 0;
        }

    .indexbanner ul li h4
    {
        display: block;
        text-align: center;
        font-size: 22px;
        color: #fff;
        padding: 20px 0 10px 0;
        margin: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
        font-weight: normal;
    }

    .indexbanner ul li.now3
    {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        z-index: 3;
        box-shadow: 0 0 40px rgba(0,0,0,0.9);
        opacity: 1;
        transform: scale(1)
    }

        .indexbanner ul li.now3 .imgbox img
        {
            opacity: 1;
        }

    .indexbanner ul li.now2
    {
        left: -65%;
        transform: scale(0.9);
        display: block;
        z-index: 2;
        opacity: 1;
    }

    .indexbanner ul li.now4
    {
        left: 65%;
        transform: scale(0.9);
        display: block;
        z-index: 2;
        opacity: 1;
    }

    .indexbanner ul li.now1
    {
        left: -100%;
        transform: scale(0.7);
        display: block;
        z-index: 1;
        opacity: 1;
    }

    .indexbanner ul li.now5
    {
        left: 100%;
        transform: scale(0.7);
        display: block;
        z-index: 1;
        opacity: 1;
    }

    .indexbanner ul li.now2 .imgbox img, .indexbanner ul li.now4 .imgbox img
    {
        opacity: 0.5;
    }

    .indexbanner ul li.now1 .imgbox img, .indexbanner ul li.now5 .imgbox img
    {
        opacity: 0.1;
    }

    .indexbanner .leftbtn
    {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #fff;
        top: 50%;
        margin-top: -20px;
        left: 50%;
        margin-left: -320px;
        z-index: 3;
        border-radius: 50%;
        opacity: 0.8;
        cursor: pointer;
        display: block;
        transition: all 0.2s;
    }

    .indexbanner .rightbtn
    {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #fff;
        top: 50%;
        margin-top: -20px;
        left: 50%;
        margin-left: 280px;
        z-index: 3;
        border-radius: 50%;
        opacity: 0.8;
        cursor: pointer;
        display: block;
        transition: all 0.2s;
    }

    .indexbanner a.leftbtn:hover, .indexbanner a.rightbtn:hover
    {
        opacity: 1;
        transform: scale(1.1)
    }

    .indexbanner > div > a > svg
    {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 7px;
        fill: #666;
    }

.whitebox
{
    padding: 0px 0 15px 0;
    position: relative;
    margin: 20px 0 0px 0;
}

    .whitebox > div
    {
        position: relative;
        z-index: 1;
    }

    .whitebox:before
    {
        content: "";
        display: block;
        width: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        z-index: 0;
        height: 100%;
    }

.unsliderbox
{
    position: relative;
    background-color: #eee;
    width: 100%;
    padding-right: 0px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
}

.banner
{
    position: absolute;
    overflow: auto;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

    .banner li
    {
        list-style: none;
    }

    .banner ul li
    {
        float: left;
    }

    .banner .dots
    {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
    }

        .banner .dots li
        {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s,opacity .5s;
            -moz-transition: background .5s,opacity .5s;
            transition: background .5s,opacity .5s;
        }

            .banner .dots li.active
            {
                background: #fff;
                opacity: 1;
            }

    .banner .arrow
    {
        position: absolute;
        top: 200px;
        z-index: 2;
    }

    .banner #al
    {
        left: 15px;
    }

    .banner #ar
    {
        right: 15px;
    }

.headsearch
{
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: 100%;
    text-align: center;
    border: 0;
    background-color: unset;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 60px;
    font-size: 16px;
    color: #666;
    padding: 0;
    margin-left: 15px;
    white-space: nowrap;
}

header .logo .headsearch svg
{
    display: block;
    width: 34px;
    height: 34px;
    fill: var(--color-main);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    padding: 5px;
    background-color: var(--color-background-red);
    margin: 13px 5px 0 0;
    float: left;
}

.headsearch:hover
{
    transform: scale(1.1)
}

.inav
{
    display: block;
    width: auto;
    border-radius: 0;
    position: relative;
    z-index: 1;
    top: 0px;
    border-top: 0;
    box-sizing: border-box;
    vertical-align: top;
    float: left;
    height: 80px;
}

    .inav ul
    {
        display: block;
        font-size: 0;
        padding: 0;
        text-align: left;
    }

    .inav li
    {
        display: inline-block;
        width: auto;
        height: 80px;
        line-height: 120%;
        padding-left: 0px;
        box-sizing: border-box;
        font-size: 14px;
        text-align: left;
        box-sizing: border-box;
        padding: 0 5px;
        margin-bottom: 10px;
        vertical-align: top;
    }

        .inav li a
        {
            display: block;
            box-sizing: border-box;
            padding: 0 10px;
            height: 80px;
            text-align: center;
            color: #fff;
        }

        .inav li img
        {
            display: block;
            vertical-align: middle;
            width: 40px;
            height: 40px;
            margin: 5px auto;
        }

.tagnav
{
    display: block;
    width: auto;
    overflow: hidden;
    height: 80px;
    box-sizing: border-box;
    padding: 10px 0px 10px 0;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 0;
}

#homePageContent .tagnav
{
    margin-bottom: 10px;
}

.tagnav a
{
    color: #fff;
}

.tagnav dl
{
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    color: #fff;
    height: 60px;
    overflow: hidden;
}

.tagnav dt
{
    display: block;
    width: 84px;
    height: 60px;
    text-align: center;
    font-size: 16px;
    float: left;
    line-height: 60px;
    overflow: hidden;
}

    .tagnav dt a b
    {
        display: block;
        background-color: #111;
        width: auto;
        overflow: hidden;
        border-radius: 10px 0 0 10px;
    }

        .tagnav dt a b:after
        {
            display: inline-block;
            content: "";
            width: 15px;
            height: 30px;
            background: url(/images/default/righta.svg) center no-repeat;
            background-size: 80%;
            vertical-align: top;
            position: absolute;
            right: 0;
            bottom: 0;
        }

    .tagnav dt a
    {
        display: block;
        border-radius: 0;
        position: relative;
        line-height: 60px;
        height: 100%;
    }

        .tagnav dt a em
        {
            position: relative;
            font-size: 13px;
            width: auto;
            height: auto;
            text-align: center;
            color: #fff;
            opacity: 1;
            font-style: normal;
            line-height: 14px;
            border-radius: 0 0 0 0px;
            font-weight: bold;
            float: left;
            height: 100%;
            white-space: normal;
            width: 24px;
            text-align: center;
            box-sizing: border-box;
            padding: 15px 5px 0 5px
        }

.tagnav .tagnavdl:nth-child(3) dl dt a em
{
    padding-top: 8px;
}

.tagnav .tagnavdl:nth-child(1) dl dt
{
    background-color: #09aade
}

.tagnav .tagnavdl:nth-child(2) dl dt
{
    background-color: #ff568f
}

.tagnav .tagnavdl:nth-child(3) dl dt
{
    background-color: #30c237
}

.tagnav dd
{
    display: block;
    width: auto;
    overflow: auto;
}

.tagnav ul
{
    display: block;
    font-size: 0;
    height: 52px;
    overflow: hidden;
    border: 4px solid transparent;
    border-right: 0;
    padding-left: 0px;
}

    .tagnav ul li
    {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
        min-width: 33.33%;
        height: 26px;
        line-height: 26px;
        text-align: left;
        white-space: nowrap;
        padding: 0 2px;
        box-sizing: border-box;
    }

.twocat .tagnav ul li
{
    min-width: 20%;
}

.tagnav ul li a
{
    cursor: pointer;
    display: inline-block;
    padding: 0 8px;
    color: #fff;
    transition: all 0.2s;
    border-radius: 5px;
}

    .tagnav ul li a:hover
    {
        background-color: #fff;
        color: #000;
    }

.tagnav ul li span
{
    font-size: 14px;
    color: #ffadba;
    line-height: 100%;
    margin-left: 2px;
    position: relative;
}

.tagnav ul li a.cur span
{
    color: var(--color-main);
}

.tagnavdl
{
    display: inline-block;
    width: 34%;
    height: 60px;
    position: relative;
    box-sizing: border-box;
    padding: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    vertical-align: top;
}

.tagnav .tagnavdl:last-child
{
    width: 32%;
}

.twocat .tagnav .tagnavdl, .twocat .tagnav .tagnavdl:last-child
{
    width: 50%;
}

.tagnav .tagnavdl dl
{
    display: block;
    width: 100%;
    height: 100%;
}

.tagnav .tagnavdl dt
{
    display: block;
    height: 60px;
    border-radius: 10px 0 0 10px;
    background-color: #111;
    float: left;
}

.tagnav .tagnavdl dd
{
    display: block;
    width: auto;
    overflow: hidden;
    height: 60px;
    border-radius: 0 10px 10px 0;
    background-color: #222;
    box-sizing: border-box;
}

.tagnav .tagnavdl dt.mobilebtn
{
    display: none;
}

.catebox .tagnav .tagnavdl dl dd li a.cur
{
    background-color: #c83c53;
}

    .catebox .tagnav .tagnavdl dl dd li a.cur span
    {
        color: #fff;
    }

@media screen and (min-width:901px)
{
    .catebox .tagnav .tagnavdl dl:hover
    {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        height: auto;
    }

        .catebox .tagnav .tagnavdl dl:hover dd
        {
            height: auto;
            border-radius: 0 10px 10px 10px;
            padding: 5px;
            min-height: 60px;
        }

            .catebox .tagnav .tagnavdl dl:hover dd ul
            {
                max-height: 500px;
                overflow-y: auto;
                height: auto;
            }

                .catebox .tagnav .tagnavdl dl:hover dd ul::-webkit-scrollbar
                {
                    width: 10px;
                    background-color: #555;
                    border-radius: 5px;
                }

                .catebox .tagnav .tagnavdl dl:hover dd ul::-webkit-scrollbar-thumb
                {
                    background-color: #333;
                    border-radius: 5px;
                }

                .catebox .tagnav .tagnavdl dl:hover dd ul li
                {
                    height: 30px;
                    line-height: 30px;
                }
}

.pagetitle
{
    display: block;
    padding: 25px 0 10px 5px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: relative;
    line-height: 30px;
    margin: 0 auto;
    max-width: 1400px;
}

    .pagetitle a
    {
        color: #999;
        font-size: 13px;
        top: 27px;
        right: 10px;
        position: absolute;
        font-weight: 800;
        border: 3px solid #ddd;
        border-radius: 20px;
        padding: 0 10px;
        line-height: 24px;
        transition: all 0.2s;
        background-color: #fff;
    }

        .pagetitle a:hover
        {
            border-color: var(--color-border);
            color: #fff;
            background-color: var(--color-main)
        }

.searchbox .pagetitle
{
    padding: 20px 0 5px 0;
}

    .searchbox .pagetitle a
    {
        top: 20px;
    }

.coverbox
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    transition: opacity .3s; /*opacity:0;*/
    background-position: center;
    background-color: #fff;
}

    .coverbox img
    {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100%;
        opacity: 1;
    }

.main .nlist, .main .vlist, .main .hlist, .main .flist
{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6px;
}

.nlist
{
    display: block;
    font-size: 0;
}

    .nlist li
    {
        width: 50%;
        margin: 0;
        display: inline-block;
        vertical-align: top;
        padding: 10px;
        box-sizing: border-box;
    }

    .nlist.novel li
    {
        width: 33.33%;
    }

        .nlist.novel li a
        {
            transition: box-shadow 0.2s;
            position: relative;
        }

            .nlist.novel li a:hover
            {
                background-color: #fff;
                box-shadow: 0 0 15px rgba(0,0,0,0.1);
            }

                .nlist.novel li a:hover:before
                {
                    content: "";
                    display: block;
                    position: absolute;
                    z-index: 0;
                    top: -10px;
                    left: -10px;
                    width: 100%;
                    height: 100%;
                    border: 10px solid #fff;
                    box-shadow: 0 0 15px rgba(0,0,0,0.1)
                }

    .nlist li a
    {
        display: block;
        width: auto;
        padding: 0px;
    }

        .nlist li a:after
        {
            content: "";
            display: block;
            width: auto;
            clear: both;
            height: 0;
        }

    .nlist li .cover
    {
        width: 120px;
        position: relative;
        height: auto;
        left: 0px;
        top: 0px;
        overflow: hidden;
        border-radius: 0px;
        background: url(/images/default/empty2.gif) center no-repeat #fff;
        box-sizing: border-box;
        border: 0px solid rgba(0,0,0,0.03);
        float: left;
        background-size: 100% auto;
    }

    .nlist li .name
    {
        font-size: 18px;
        color: var(--color-main);
        margin: 0px;
        height: 44px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px 0 0 10px;
        -webkit-line-clamp: 2;
        Display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .nlist li a:hover .name
    {
        color: var(--color-main);
    }

    .nlist li .desc
    {
        -webkit-line-clamp: 3;
        height: auto;
        margin-bottom: 0;
        Display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 54px;
        overflow: hidden;
        color: #979797;
        line-height: 18px;
        font-size: 14px;
        margin: 5px 0;
        padding: 0 5px 0px 10px;
    }

    .nlist li .listdata
    {
        font-size: 12px;
        position: unset;
        margin-top: 5px;
        height: auto;
        line-height: 20px;
        padding: 0 0px 0 10px;
        overflow: hidden;
        width: auto;
    }

        .nlist li .listdata i
        {
            color: #ffbe24;
        }

        .nlist li .listdata span
        {
            color: #333;
            display: block;
            float: none;
            font-size: 13px;
            height: 20px;
            line-height: 20px;
            padding-right: 10px;
            white-space: nowrap;
        }

        .nlist li .listdata .score
        {
            display: inline-block;
        }

        .nlist li .listdata .readCount
        {
            display: inline-block;
        }

        .nlist li .listdata .score:before
        {
            display: block;
            width: 14px;
            height: 100%;
            background: url(/images/default/star.svg) center no-repeat;
            background-size: 100% auto;
            content: "";
            float: left;
            margin-right: 2px;
        }

        .nlist li .listdata .readCount:before
        {
            float: left;
            display: block;
            width: 14px;
            height: 100%;
            background: url(/images/default/eye.svg) center no-repeat;
            background-size: 100% auto;
            content: "";
            margin-right: 2px;
        }

.vlist
{
    display: block;
    font-size: 0;
    padding: 0
}

    .vlist li
    {
        width: 16.66%;
        margin-right: 0%;
        float: none;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        padding: 0 5px;
    }

    .vlist.novel li
    {
    }

.freelist .vlist li
{
}

.vlist li.nohis
{
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 30px;
    box-sizing: border-box;
}

    .vlist li.nohis h3
    {
        font-weight: normal;
        color: #666;
    }

.vlist li:last-child
{
    margin-right: 0px;
}

.vlist li .cover
{
    position: relative;
    max-height: unset;
    overflow: hidden;
    border-radius: 0px;
    height: auto;
    background-size: cover;
    background: url(/images/default/empty2.gif) center no-repeat #fff;
    background-size: 80% auto;
    border: 0px solid rgba(0,0,0,0.03);
    box-sizing: border-box;
    background-position: center;
}

html.novel .vlist li .cover span
{
    position: absolute;
    box-shadow: none
}

.vlist li .cover span em, .status em
{
    position: absolute;
    top: 0;
    left: 100%;
    width: auto;
    height: 100%;
    font-style: normal;
    color: #fff;
    display: block;
    white-space: nowrap;
    padding: 4px 8px;
    height: 24px;
    box-sizing: border-box;
}

.vlist li .coverbox
{
    transition: all 0.2s;
}

.vlist li a:hover .coverbox
{
    transform: scale(1.05)
}

body.novel .vlist li .cover
{
    width: 100%;
}

.vlist li .name
{
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    color: #000;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    overflow: hidden;
    transition: color 0.2s;
}

.vlist li a:hover .name
{
    color: var(--color-main)
}

.vlist li .listdata
{
    font-size: 0px;
    margin-top: 5px;
}

    .vlist li .listdata p
    {
        font-size: 12px;
        color: #999;
    }

        .vlist li .listdata p span
        {
            margin-left: 5px;
            color: var(--color-main);
        }

    .vlist li .listdata span
    {
        color: #666;
        display: inline-block;
        float: none;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        margin-right: 10px;
    }

        .vlist li .listdata span.author
        {
            display: block;
        }

    .vlist li .listdata .score:before
    {
        display: block;
        width: 14px;
        height: 100%;
        background: url(/images/default/star.svg) center no-repeat;
        background-size: 100% auto;
        content: "";
        float: left;
        margin-right: 2px;
    }

    .vlist li .listdata .readCount:before
    {
        float: left;
        display: block;
        width: 14px;
        height: 100%;
        background: url(/images/default/eye.svg) center no-repeat;
        background-size: 100% auto;
        content: "";
        margin-right: 2px;
    }

.vlist li a.del
{
    position: relative;
    width: 50%;
    height: 30px;
    z-index: 2;
    background-color: var(--color-border);
    color: #dc1f3e;
    border-radius: 10px;
    display: block;
    margin: 3px auto 0 auto;
    line-height: 27px;
    text-align: center;
    font-size: 24px;
    opacity: 0.3;
    transition: all 0.2s;
    border: 1px solid var(--color-main);
}

    .vlist li a.del:active
    {
        opacity: 0.5;
    }

.vlist li label.toggle
{
    display: block;
    font-size: 14px;
    background-color: #eee;
    padding: 7px;
    border-radius: 10px;
    min-width: 50%;
}

    .vlist li label.toggle input
    {
        float: left;
        width: 14px;
        height: 14px;
        margin: 2px 5px 0 4px;
        padding: 0;
    }

.vlist li p.desc
{
    font-size: 12px;
    color: #999;
    margin: 0;
    padding: 3px 0 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 18px;
    height: 36px;
}

.hlist
{
    font-size: 0;
    width: auto;
    margin: 0px;
}

    .hlist li
    {
        width: 25%;
        margin-bottom: 25px;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        padding: 0 5px;
    }

        .hlist li a
        {
            height: auto;
        }

        .hlist li:last-child
        {
            margin-bottom: 0;
            border-bottom: 0px;
        }

        .hlist li .cover
        {
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 0px;
            background: url(/images/default/empty2.gif) center no-repeat #fff;
            background-size: auto 100%;
        }

            .hlist li .cover span em
            {
                position: absolute;
                top: 0;
                left: 100%;
                width: auto;
                height: 100%;
                font-style: normal;
                color: #fff;
                display: block;
                white-space: nowrap;
                padding: 4px 8px;
                box-sizing: border-box;
            }

        .hlist li a:hover .cover img
        {
            transform: scale(1.05)
        }

        .hlist li .name
        {
            font-size: 16px;
            Display: block;
            padding: 40px 10px 25px 10px;
            box-sizing: border-box;
            position: absolute;
            text-align: right;
            width: 100%;
            bottom: 0;
            background: linear-gradient(0deg,rgba(0,0,0,.9),transparent);
            color: #fff;
            font-weight: 700;
            margin: 0;
        }

        .hlist li .desc
        {
            height: 44px;
            margin-bottom: 0;
            Display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin: 5px 0;
            color: #666;
            line-height: 22px;
            font-size: 14px;
            overflow: hidden;
            padding: 0 5px;
        }

.recommendlist
{
    padding: 30px 0 0 0;
}

    .recommendlist .hlist li .desc
    {
        height: 66px;
        margin-bottom: 0;
        Display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin: 5px 0;
        color: #666;
        line-height: 22px;
        font-size: 14px;
        overflow: hidden;
        padding: 0 5px;
    }

.hlist li .listdata
{
    font-size: 12px;
    position: absolute;
    right: 10px;
    bottom: 5px;
}

    .hlist li .listdata span
    {
        color: #ccc;
        display: inline-block;
        float: none;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        margin-left: 10px;
    }

    .hlist li .listdata .score:before
    {
        display: block;
        width: 14px;
        height: 100%;
        background: url(/images/default/star.svg) center no-repeat;
        background-size: 100% auto;
        content: "";
        float: left;
        margin-right: 2px;
    }

    .hlist li .listdata .readCount:before
    {
        float: left;
        display: block;
        width: 14px;
        height: 100%;
        background: url(/images/default/eye.svg) center no-repeat;
        background-size: 100% auto;
        content: "";
        margin-right: 2px;
    }

.recommendlist .hlist li
{
    width: 25%;
}

.recommendlist .hlist .cover
{
    background: unset;
}

.recommendlist .hlist .imgbox
{
    background: url(/images/default/empty2.gif) center no-repeat #fff;
    background-size: auto 100%;
}

.recommendlist .hlist li .name
{
    position: relative;
    bottom: auto;
    right: auto;
    text-align: left;
    color: #000;
    padding: 5px 5px 0 5px;
    background: unset;
    height: 30px;
    line-height: 20px;
}

.recommendlist .hlist .cover .status
{
    bottom: 30px;
    padding-bottom: 4px;
}

.recommendlist .hlist li .desc
{
    margin-top: 0;
}

.flist
{
    font-size: 0;
}

    .flist ul
    {
        font-size: 0;
        display: block;
    }

    .flist li
    {
        width: 33%;
        padding: 0px 5px 10px 5px;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .flist .flistbox
    {
        display: block;
        display: block;
        width: auto;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
        font-size: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08)
    }

    .flist li h3
    {
        height: 52px;
        line-height: 26px;
        overflow: hidden;
        color: #333;
        font-size: 18px;
        width: auto;
        box-sizing: border-box;
        padding: 0 18px 0px 0;
        margin-bottom: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flist li .imgbox
    {
        overflow: hidden;
        position: relative;
        display: inline-block;
        width: 40%;
        border-radius: 5px;
        overflow: hidden;
        vertical-align: top;
    }

    .flist li .info
    {
        display: inline-block;
        vertical-align: top;
        padding-left: 15px;
        box-sizing: border-box;
        width: 60%;
    }

    .flist li .listdata
    {
        position: relative;
        margin: 0 -5px;
    }

        .flist li .listdata > div
        {
            display: block;
            width: auto;
            margin: 0px 5px 0 5px;
            box-sizing: border-box;
            vertical-align: top;
            position: relative;
        }

            .flist li .listdata > div.next
            {
                margin-top: 10px;
            }

            .flist li .listdata > div a
            {
                font-size: 14px;
                background-color: #f3f3f3;
                padding: 0px;
                border-radius: 5px;
                display: block;
                border: 1px solid #eee;
                transition: border 0.3s,color 0.3s,box-shadow 0.3s;
                line-height: 100%;
                overflow: hidden;
            }

                .flist li .listdata > div a:hover
                {
                    border: 1px solid #ddd;
                    background-color: #fff;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 -2px 3px rgba(0,0,0,0.06) inset;
                }

                    .flist li .listdata > div a:hover b
                    {
                        color: var(--color-main);
                    }

                .flist li .listdata > div a em
                {
                    font-style: normal;
                    font-size: 14px;
                    padding: 0px 8px 8px 8px;
                    display: block;
                }

        .flist li .listdata div.hl
        {
            background-color: var(--color-main);
            border-radius: 5px;
        }

            .flist li .listdata div.hl a, .flist li .listdata p.hl b
            {
                color: #fff;
            }

        .flist li .listdata div span
        {
            font-size: 14px;
            display: block;
            padding: 8px;
        }

        .flist li .listdata div b
        {
            font-size: 14px;
            display: block;
            text-align: right;
            padding: 8px 0;
            position: relative;
            top: 0;
            right: 0;
            width: 100%;
            text-align: center;
            line-height: 15px;
            border-top: 1px solid rgba(0,0,0,0.07);
            box-sizing: border-box;
            border-radius: 0 0 7px 7px;
            box-shadow: 0 1px 1px #fff inset
        }

            .flist li .listdata div b:after
            {
                content: "";
                display: inline-block;
                vertical-align: top;
                height: 15px;
                width: 15px;
                background: url(/images/default/arrow-right-line.svg) center no-repeat;
                background-size: 100% auto;
                margin-left: 4px;
                opacity: 0.4;
            }

        .flist li .listdata div i
        {
            font-size: 12px;
            font-style: normal;
        }

    .flist li button.del
    {
        position: absolute;
        right: 5px;
        top: 0px;
        font-size: 18px;
        border: 0;
        width: 34px;
        height: 34px;
        border-radius: 0 10px 0 22px;
        background-color: #f0f0f0;
        color: #999;
        text-align: center;
        line-height: 24px;
        box-sizing: border-box;
        padding: 0 0 4px 4px;
        border: 2px solid #fff;
    }

        .flist li button.del:hover
        {
            background-color: #ccc;
            color: #fff;
        }

@media screen and (min-width:901px)
{
    .recommendlist .hlist li:nth-child(1), .recommendlist .hlist li:nth-child(2), .recommendlist .hlist li:nth-child(3)
    {
        width: 33.33%;
    }

        .recommendlist .hlist li:nth-child(1) .name, .recommendlist .hlist li:nth-child(2) .name, .recommendlist .hlist li:nth-child(3) .name
        {
            text-align: center;
            font-size: 22px;
            height: 40px;
            line-height: 30px;
            font-weight: normal;
        }

        .recommendlist .hlist li:nth-child(1) .desc, .recommendlist .hlist li:nth-child(2) .desc, .recommendlist .hlist li:nth-child(3) .desc
        {
            text-indent: 24px;
        }

        .recommendlist .hlist li:nth-child(1) .cover .status, .recommendlist .hlist li:nth-child(2) .cover .status, .recommendlist .hlist li:nth-child(3) .cover .status
        {
            bottom: 40px
        }

        .recommendlist .hlist li:nth-child(1) .listdata, .recommendlist .hlist li:nth-child(2) .listdata, .recommendlist .hlist li:nth-child(3) .listdata
        {
            bottom: 40px;
            background-color: rgba(0,0,0,0.7);
            right: 0;
            padding: 2px 5px 2px 0;
        }
}

.status
{
    position: absolute;
    bottom: 0px;
    left: 0;
    font-size: 12px;
    background-color: var(--color-main);
    color: #fff;
    padding: 4px 8px;
    font-weight: bold;
    z-index: 1;
    border-radius: 0;
}

.adult
{
    position: absolute;
    top: 0px;
    bottom: unset;
    right: 0;
    left: unset;
    font-size: 12px;
    background-color: #ff568f;
    color: #fff;
    padding: 4px 8px;
    font-weight: bold;
    z-index: 1;
    border-radius: 0px;
    padding-bottom: 4px;
}

    .adult.left
    {
        left: 0;
        right: unset;
        border-radius: 0;
    }

.status[data-status=finish]
{
    background-color: #4caf50;
}

.status[data-status=serialized]
{
    background-color: #d839d0;
}

.status[data-status=finish] em
{
    background-color: #217524;
}

.status[data-status=serialized] em
{
    background-color: #8b1685;
}

.lcrbox
{
    display: block;
    position: relative;
    width: 100%;
    font-size: 0;
    text-align: center;
    box-sizing: border-box;
}

    .lcrbox:after
    {
        content: "";
        display: block;
        width: 100%;
        clear: both;
        height: 0;
        overflow: hidden;
    }

    .lcrbox > div
    {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        height: 100%;
        z-index: 0;
    }

    .lcrbox .c
    {
        margin: 0 auto;
        width: 40%;
    }

    .lcrbox .l
    {
        float: left;
        width: 30%;
    }

    .lcrbox .r
    {
        float: right;
        width: 30%;
    }

    .lcrbox.index
    {
        padding: 100px 5px 0 5px;
        text-align: left;
        width: auto;
        max-width: 1400px;
        margin: 0 auto 10px auto;
        box-sizing: border-box
    }

        .lcrbox.index .l
        {
            width: 100%;
            position: absolute;
            top: -4px;
            left: 0;
            height: 80px;
            font-size: 0;
            z-index: 1;
        }

        .lcrbox.index .c
        {
            width: 45%;
            padding-right: 5px;
            display: inline-block;
            overflow: hidden;
        }

        .lcrbox.index .r
        {
            padding-left: 0px;
            width: 55%;
            position: absolute;
            top: 0;
            right: 5px;
            float: none;
            height: 100%;
            overflow: hidden;
        }

.tabbtn
{
    font-size: 0;
}

    .tabbtn a
    {
        font-size: 16px;
    }

.tabbox
{
    font-size: 14px;
}

.xm
{
    position: absolute;
    top: 100px;
    right: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 90px;
}

    .xm .pagetitle
    {
        display: none;
    }

    .xm .hlist
    {
        display: block;
        height: 100%;
        width: 100%;
        font-size: 0;
        padding: 0;
        margin: 0;
    }

        .xm .hlist li
        {
            position: relative;
            display: inline-block;
            width: 50%;
            height: 50%;
            overflow: hidden;
            margin-bottom: 0;
            padding: 0 0 10px 10px;
            border: 0;
            box-sizing: border-box;
        }

            .xm .hlist li a
            {
                display: block;
                overflow: hidden;
                border-radius: 5px;
                width: 100%;
                height: 100%;
            }

                .xm .hlist li a .cover
                {
                    width: 100%;
                    height: 100%;
                }

                    .xm .hlist li a .cover img
                    {
                        display: block;
                        width: 100%;
                        height: auto;
                        min-height: 100%;
                    }

.bookbox
{
    padding: 20px 10px 40px 10px;
    position: relative;
    max-width: 100%;
    margin: 0 auto 35px auto;
}

.bookinfo
{
    position: relative;
    z-index: 1;
    padding: 10px 0;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 160px;
}

.bookboxbg
{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

    .bookboxbg img
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transform: scale(1.1);
        filter: blur(30px);
        display: block;
        opacity: 0.4;
        color: #fff;
        box-shadow: 0 0 10px #000;
        min-height: 100%;
    }

.bookbox .cartoon
{
    font-size: 0;
    min-height: 150px;
}

.bookbox .cover
{
    float: left;
    width: auto;
    height: 150px;
    overflow: hidden;
    border-radius: 0px;
    padding-right: 0px;
    position: relative;
    background-size: cover;
    display:block;
}

    .bookbox .cover img
    {
        display: block;
        height: 100%;
        width: auto;
    }

.bookinforight {display:inline;}

.bookbox .title
{
    font-size: 0px;
    padding-left: 15px;
    display: block;
    overflow: hidden;
    line-height: 40px;
    padding: 5px 0 0px 15px;
}

    .bookbox .title b
    {
        font-weight: bold;
        font-size: 28px;
        display: inline-block;
        vertical-align: top;
        height: auto;
        line-height: 30px;
        color: #fff;
        margin-right: 10px;
    }

    .bookbox .title span
    {
        font-size: 12px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        padding: 0px;
        border-radius: 3px;
        color: #fff;
        line-height: 12px;
        background-color: #f95
    }

        .bookbox .title span a
        {
            display: block;
            padding: 5px 6px;
            color: #111;
            cursor: pointer;
        }

        .bookbox .title span.c1
        {
            background-color: #ffaab8
        }

        .bookbox .title span.c2
        {
            background-color: #fe9cff
        }

        .bookbox .title span.c3
        {
            background-color: #b2c1ff
        }

        .bookbox .title span.c4
        {
            background-color: #98e6ff
        }

        .bookbox .title span.c5
        {
            background-color: #9dfff3
        }

        .bookbox .title span.c6
        {
            background-color: #c9fc88
        }

        .bookbox .title span.c7
        {
            background-color: #fbffa5
        }

        .bookbox .title span.c8
        {
            background-color: #ffe9ae
        }

.bookbox .shortinfo, .bookbox .data, .bookbox .funbtn, .bookbox .desc
{
    display: block;
    overflow: hidden;
    font-size: 14px;
    padding-left: 15px;
    color: #fff;
    font-weight: normal;
}

.bookbox .desc
{
    line-height: 18px;
    height: 54px;
    overflow: hidden;
    text-indent: 24px;
    opacity: 1;
    overflow-y: auto;
}

    .bookbox .desc::-webkit-scrollbar
    {
        width: 6px;
        background-color: rgba(0,0,0,0.2)
    }

    .bookbox .desc::-webkit-scrollbar-thumb
    {
        background-color: rgba(0,0,0,0.5);
    }

.bookbox .data
{
    padding-bottom: 3px;
    opacity: 0.6;
}

    .bookbox .data span
    {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin-right: 12px;
    }

        .bookbox .data span svg
        {
            display: block;
            width: 14px;
            height: 100%;
            float: left;
            margin-right: 2px;
            fill: #fff;
        }

.bookbox .shortinfo
{
    padding-bottom: 5px;
}

    .bookbox .shortinfo .txt
    {
        display: inline-block;
        margin-right: 15px;
        opacity: 0.6;
    }

        .bookbox .shortinfo .txt a
        {
            color: #fff;
            font-weight: bold;
        }

    .bookbox .shortinfo.aboutzt .txt
    {
        opacity: 1;
    }

        .bookbox .shortinfo.aboutzt .txt font
        {
            opacity: 0.6;
        }

.bookbox a.bookztinfo
{
    font-size: 16px;
    color: #fff;
    opacity: 1;
}

    .bookbox a.bookztinfo:hover
    {
        color: #fc0;
    }

.rating-stars
{
    width: auto;
    text-align: center;
    position: relative;
    font-size: 0;
    padding-right: 60px;
    height: 36px;
    overflow: hidden;
    display: inline-block;
}

    .rating-stars input
    {
        font-size: 22px;
        width: 60px;
        height: 36px;
        line-height: 36px;
        display: block;
        border: 0;
        text-align: center;
        color: #f90;
        vertical-align: top;
        padding: 0;
        margin-left: 0px;
        border-radius: 0%;
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 0;
        cursor: pointer;
        background-color: transparent;
    }

    .rating-stars .rating-stars-container
    {
        font-size: 0px;
        display: inline-block;
        vertical-align: top;
    }

        .rating-stars .rating-stars-container .rating-star
        {
            display: inline-block;
            font-size: 0px;
            color: #fff;
            cursor: pointer;
            padding: 0px;
            height: 36px;
            width: 30px;
            text-align: center;
            border-radius: 8px;
            margin: 0 2px;
            transition: all 0.2s;
            opacity: 1;
            border: 0px solid transparent;
            box-sizing: border-box;
        }

            .rating-stars .rating-stars-container .rating-star svg
            {
                display: block;
                width: 100%;
                height: 100%;
            }

            .rating-stars .rating-stars-container .rating-star i
            {
                font-style: normal;
            }

            .rating-stars .rating-stars-container .rating-star.is--active
            {
                color: #fff;
                background-size: 100%;
            }

            .rating-stars .rating-stars-container .rating-star.is--hover
            {
                border-color: var(--color-border);
                background-size: 100%;
                border: 0px;
                background-color: #eee;
                border-radius: 50%;
            }

.ratingpop .rating-stars .rating-stars-container .rating-star
{
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 5px;
    vertical-align: top;
    border-radius: 50%;
}

.ratingpop .rating-stars
{
    height: auto;
    padding: 0;
}

    .ratingpop .rating-stars .rating-stars-container .rating-star svg
    {
        width: 100%;
        height: 100%;
        fill: #ccc;
    }

    .ratingpop .rating-stars .rating-stars-container .rating-star.is--active
    {
        background-color: #fff4e3;
        border-radius: 50%;
        border: 2px solid #f90;
    }

    .ratingpop .rating-stars .rating-stars-container .rating-star.is--hover
    {
        background-color: #fff4e3
    }

        .ratingpop .rating-stars .rating-stars-container .rating-star.is--hover svg,
        .ratingpop .rating-stars .rating-stars-container .rating-star.is--active svg
        {
            fill: #f90;
        }

.rating-stars .rating-stars-container .rating-star.is--no-hover
{
    color: #fff;
}

.ratingpop .ratingpoptxt
{
    text-align: center;
    padding: 10px 0 15px 0;
    font-size: 16px;
}

.ratingpop textarea
{
    display: block;
    border: 1px solid #ddd;
    background-color: #f3f3f3;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    padding: 8px;
}

.layui-m-layer-laypopchap .layui-m-layerbtn span
{
    border-radius: 0;
}

    .layui-m-layer-laypopchap .layui-m-layerbtn span:last-child
    {
        background-color: #999;
        color: #fff;
    }

@media screen and (max-width:900px)
{
    .rating-stars .rating-stars-container .rating-star
    {
        width: 24px;
    }
}

.ratingbtn
{
    display: inline-block;
    vertical-align: top;
    height: 36px;
    width: auto;
}

    .ratingbtn button
    {
        display: block;
        height: 36px;
        box-sizing: border-box;
        padding: 0 10px;
        border: 0;
        background-color: #f60;
        color: #fff;
        font-size: 16px;
        border-radius: 6px;
        font-weight: bold;
    }

.bookbox .funbtn .r:hover .ratingbtn button
{
    background-color: #f17309;
}

.bookbox .funbtn
{
    position: absolute;
    top: 100%;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    left: 50%;
    margin-left: -50%;
    width: 100%;
    height: auto;
    opacity: 1;
    padding: 15px;
    box-sizing: border-box;
    margin-top: 5px;
    text-align: right;
}

    .bookbox .funbtn .l
    {
        font-size: 0;
        float: left;
        font-size: 0;
    }

    .bookbox .funbtn .r
    {
        display: inline-block;
        vertical-align: top;
        padding: 0px 0 0 0;
        cursor: pointer;
    }

    .bookbox .funbtn .l a
    {
        display: inline-block;
        margin-right: 10px;
        padding: 8px 10px;
        background-color: var(--color-main);
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        min-width: 100px;
        text-align: center;
        box-sizing: border-box;
        height: auto;
        line-height: 20px;
    }

        .bookbox .funbtn .l a svg
        {
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            transform: scale(1.2);
            transform-origin: right;
        }

        .bookbox .funbtn .l a.apple
        {
            background-color: #000;
        }

            .bookbox .funbtn .l a.apple svg
            {
                fill: #fff;
            }

        .bookbox .funbtn .l a.androids
        {
            background-color: #000;
        }

            .bookbox .funbtn .l a.androids svg
            {
                fill: #fff;
            }

        .bookbox .funbtn .l a font
        {
            color: #fff;
            margin: 0 3px;
        }

    .bookbox .funbtn .l span.goloading
    {
        display: none;
        margin-right: 10px;
        padding: 8px 10px;
        background-color: #d12c47;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        min-width: 100px;
        text-align: center;
        box-sizing: border-box;
        height: auto;
        line-height: 20px;
    }

        .bookbox .funbtn .l span.goloading svg
        {
            display: inline-block;
            vertical-align: top;
            display: inline-block;
            vertical-align: top;
            width: auto;
            height: 20px;
            box-sizing: border-box;
            padding: 0px 0;
            fill: #fff;
            margin-right: 5px;
            animation: zuan linear 2s infinite;
        }

@keyframes zuan
{
    0%
    {
        transform: rotate(0deg)
    }

    100%
    {
        transform: rotate(360deg)
    }
}

.bookbox .funbtn .l a:active
{
    background-color: #d12c47;
}

.bookbox .funbtn .l a.act
{
    background-color: #999;
}

.bookbox .funbtn .l a.hide
{
    display: none;
}

.chaptitle
{
    font-size: 20px;
    padding: 10px;
    height: auto;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

    .chaptitle h4
    {
        text-align: left;
    }

.curchap
{
    margin: 0 auto 15px auto;
    max-width: 1400px;
    padding: 0px;
}

    .curchap a
    {
        display: block;
        border: 1px solid #ddd;
        padding: 12px;
        border-radius: 0px;
        background-color: #fff;
        font-size: 18px;
        line-height: 120%;
        position: relative;
        font-weight: bold;
        transition: all 0.2s;
        line-height: 30px;
    }

        .curchap a svg
        {
            display: inline-block;
            width: 30px;
            height: 30px;
            fill: #ccc;
            vertical-align: top;
        }

        .curchap a:hover
        {
            background-color: #f6f6f6;
        }

        .curchap a:after
        {
            content: "";
            display: block;
            width: auto;
            clear: both;
            height: 0;
            overflow: hidden;
        }

        .curchap a .lastchap span:last-child
        {
            font-size: 12px;
            display: inline-block;
            vertical-align: middle;
            position: absolute;
            right: 40px;
            top: 15px;
        }

        .curchap a .lastchap span:first-child
        {
            margin-right: 15px;
            color: var(--color-main)
        }

        .curchap a em
        {
            font-style: normal;
            margin: 0 10px;
            font-size: 14px;
            color: #999;
        }

            .curchap a em:after
            {
                content: ":";
                font-size: 10px;
            }

.chaplist
{
    margin: 0 auto 10px auto;
    max-width: 1400px;
    padding: 0px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
}

    .chaplist .chapterlist
    {
        font-size: 0;
        padding: 2px;
        width: auto;
        margin: 0px;
        background-color: #eee;
        border-top: 1px solid #ddd;
    }

.chapterlist li
{
    display: inline-block;
    width: 14.28%;
    box-sizing: border-box;
    padding: 2px;
}

    .chapterlist li a
    {
        border: 1px solid #ddd;
        color: #333;
        padding: 5px 20px 5px 8px;
        border-radius: 0px;
        background-color: #fff;
        font-size: 14px;
        display: block;
        position: relative;
    }

        .chapterlist li a:before, .curchap a:before
        {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-top: 2px solid #ccc;
            border-right: 2px solid #ccc;
            transform: rotate(45deg);
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -6px;
        }

.curchap em
{
    display: inline-block;
}

.chapterlist li a:hover
{
    border-color: var(--color-border);
    color: var(--color-main);
    background-color: var(--color-background-red)
}

.chapterlist li a h3
{
    font-weight: normal;
}

.chapterlist li a em
{
    font-style: normal;
    display: block;
    font-size: 13px;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 4px;
}

.chapterlist li a > span
{
    position: absolute;
    display: block;
    top: 5px;
    right: 5px;
}

    .chapterlist li a > span span
    {
        display: block;
        border-radius: 3px;
        font-size: 12px;
        padding: 2px 4px;
        overflow: hidden;
        color: #fff;
        line-height: 12px;
    }

        .chapterlist li a > span span.free
        {
            background-color: #58b605;
        }

        .chapterlist li a > span span.freeintime
        {
            background-color: var(--color-main);
        }

        .chapterlist li a > span span.login
        {
            background-color: #0092ff;
        }

        .chapterlist li a > span span.vfree
        {
            background-color: #12c637;
        }

        .chapterlist li a > span span.pfree
        {
            background-color: #a0c444;
        }

        .chapterlist li a > span span.coin
        {
            background-color: #f69700;
        }

.chapterPage
{
    display: inline-block;
    font-size: 0;
    padding: 0px 0 0 30px;
    vertical-align: top;
}

    .chapterPage li
    {
        display: inline-block;
        font-size: 20px;
        padding: 0px;
        vertical-align: top;
        margin-right: 30px;
        cursor: pointer;
        font-weight: 800;
        color: #666;
    }

        .chapterPage li a
        {
            color: #666;
        }

        .chapterPage li.cur
        {
            border-bottom: 2px solid var(--color-main);
            color: var(--color-main);
        }

            .chapterPage li.cur a
            {
                color: var(--color-main)
            }

.chapterPage
{
    border: 1px solid #ddd;
    border-width: 1px 0 0 0;
    border-radius: 0px;
    background-color: #fff;
    padding: 3px;
    margin-top: 10px;
    max-height: 160px;
    overflow-y: auto;
    display: block;
    text-indent: 0;
}

    .chapterPage ul
    {
        font-size: 0;
        text-indent: 0;
        display: block;
    }

    .chapterPage li
    {
        min-width: 10%;
        margin: 0;
        text-align: center;
        background-color: #eee;
        border: 3px solid #fff;
        border-radius: 7px;
        line-height: 34px;
        height: 40px;
        box-sizing: border-box;
        font-size: 14px;
    }

        .chapterPage li a
        {
            display: block;
        }

        .chapterPage li.cur
        {
            background-color: var(--color-main);
            color: #fff;
            border-bottom: 3px solid #fff;
        }

            .chapterPage li.cur a
            {
                color: #fff;
            }

@media screen and (max-width:1300px)
{
    .chapterlist li
    {
        width: 16.66%;
    }
}

@media screen and (max-width:1000px)
{
    .chapterlist li
    {
        width: 20%;
    }
}

@media screen and (max-width:900px)
{
    .chapterlist li
    {
        width: 25%;
    }
}

@media screen and (max-width:767px)
{
    .chapterlist li
    {
        width: 100%;
    }

        .chapterlist li a em
        {
            display: inline-block;
            padding: 0;
            white-space: nowrap;
            width: auto;
            max-width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chapterlist li a h3
        {
            display: inline;
        }

        .chapterlist li a > span
        {
            display: inline-block;
            position: unset;
        }

    .chaplistpop .chaptitle
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        background: #fff;
    }

    .chaplistpop .chapterlist
    {
        position: relative;
        z-index: 0;
        padding: 93px 5px 5px 5px;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
    }

        .chaplistpop .chapterlist li a
        {
            padding: 5px 20px 5px 5px !important;
            line-height: 30px;
        }
}


body.chapterp
{
    background-color: #666;
}

    body.chapterp .main
    {
        background-color: unset;
    }

    body.chapterp .headerbox
    {
        max-width: 1104px;
    }

.bookbody
{
    background-color: #ccc;
    max-width: 1104px;
    background-color: #fff;
    margin: 0 auto;
    box-sizing: border-box;
    border-right: 80px solid #ccc;
}

    .bookbody .chapterContent
    {
        margin: 0 auto;
    }

    .bookbody > h1
    {
        text-align: center;
        margin: 0;
        padding: 0 80px 0 0;
        font-style: normal;
        background-color: rgba(0,0,0,0.8);
        line-height: 24px;
        height: 24px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        display: none;
    }

        .bookbody > h1 em
        {
            font-size: 14px !important;
            font-style: normal;
            color: #fff;
            line-height: 24px;
            display: block;
        }

    .bookbody > h2
    {
        text-align: center;
        font-size: 22px;
        padding: 30px 0 0 0;
        margin: 0 auto;
    }

    .bookbody .pagetitle
    {
        padding-left: 40px;
    }

    .bookbody .nlist.novel, .bookbody .vlist
    {
        padding: 0 30px 30px 30px;
    }

.novelcontent
{
    padding: 4%;
    line-height: 220%;
}

.nocoin
{
    display: block;
    margin: 0 40px 20px 40px;
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 15px;
    border: 5px solid #eee;
}

    .nocoin .ye
    {
        padding-bottom: 5px;
        font-size: 0.85rem;
    }

    .nocoin .buy
    {
        padding-top: 0px;
        position: relative;
        min-height: 70px;
    }

    .nocoin .thisprice
    {
        font-size: 1.4rem;
        padding: 0 0 10px 0;
        line-height: 30px;
        color: var(--color-main);
    }

        .nocoin .thisprice span
        {
            font-size: 1rem;
        }

    .nocoin .autobuy
    {
        font-size: 0.8rem;
        line-height: 20px;
    }

        .nocoin .autobuy input
        {
            float: left;
            width: 16px;
            height: 16px;
            margin: 2px 4px 2px 0;
        }

    .nocoin .buybtn
    {
        position: absolute;
        top: 5px;
        right: 0;
    }

        .nocoin .buybtn button
        {
            height: 30px;
            line-height: 30px;
            border: 0;
            padding: 0 10px;
            font-size: 1rem;
            color: #fff;
            background-color: var(--color-main);
            border-radius: 5px;
            text-align: center;
            min-width: 100px;
        }

    .nocoin .sharebtn
    {
        position: absolute;
        top: 45px;
        right: 0;
    }

        .nocoin .sharebtn button
        {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            color: #fff;
            background-color: #0073d4;
            border: 0;
            text-align: center;
            min-width: 100px;
        }

.nologin
{
    text-align: center;
    padding: 0 0 15px 0;
}

    .nologin button
    {
        display: inline-block;
        padding: 10px 20px;
        font-size: 1.2em;
        border-radius: 5px;
        background-color: var(--color-main);
        color: #fff;
        border: 0;
    }

.popchapbox
{
    width: 100%;
    box-sizing: border-box !important;
    padding-left: 160px;
    position: relative;
    border-top: 40px solid transparent;
    height: 950px;
}

@media screen and (max-width:767px)
{
    .popchapbox
    {
        width: 320px;
    }
}

@media screen and (max-width:414px)
{
    .popchapbox
    {
        width: 350px;
    }
}

@media screen and (max-width:375px)
{
    .popchapbox
    {
        width: 315px;
    }
}

@media screen and (max-width:320px)
{
    .popchapbox
    {
        width: 270px;
    }
}

@media screen and (max-height:1180px)
{
    .popchapbox
    {
        height: 620px;
    }
}

@media screen and (max-height:980px)
{
    .popchapbox
    {
        height: 500px;
    }
}

@media screen and (max-height:780px)
{
    .popchapbox
    {
        height: 380px;
    }
}

@media screen and (max-height:580px)
{
    .popchapbox
    {
        height: 250px;
    }
}

@media screen and (max-height:380px)
{
    .popchapbox
    {
        height: 160px;
    }
}

.layui-m-layer-laypopchap .layui-m-layercont
{
    padding: 10px;
}

.layui-m-layer-laypopchap .chaptitle
{
    padding: 0px 0 8px 0;
    text-align: left;
    position: absolute;
    top: -40px;
    left: 0;
    width: auto;
    height: 100%;
}

.layui-m-layer-laypopchap .chapterPage
{
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px;
    margin-top: 40px;
    height: 100%;
    overflow-y: auto;
    display: block;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    box-sizing: border-box;
}

.popchaplist::-webkit-scrollbar
{
    width: 10px;
    background-color: #eee;
}

.popchaplist::-webkit-scrollbar-thumb
{
    background-color: #ccc;
}

.layui-m-layer-laypopchap .chapterPage ul
{
    font-size: 0;
    display: block;
    text-align: left;
}

.layui-m-layer-laypopchap .chapterPage li
{
    min-width: 100%;
    margin: 0;
    text-align: center;
    background-color: #eee;
    border: 3px solid #fff;
    border-radius: 7px;
    line-height: 34px;
    height: 40px;
    box-sizing: border-box;
    font-size: 16px;
}

    .layui-m-layer-laypopchap .chapterPage li a
    {
        display: block;
    }

    .layui-m-layer-laypopchap .chapterPage li.cur
    {
        background-color: var(--color-main);
        color: #fff;
        border-bottom: 3px solid #fff;
    }

        .layui-m-layer-laypopchap .chapterPage li.cur a
        {
            color: #fff;
        }

.popchaplist
{
    display: block;
    text-align: left;
    font-size: 0;
    height: 100%;
    overflow-y: auto;
}

    .popchaplist li
    {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        font-size: 1rem;
        text-align: left;
        position: relative;
    }

        .popchaplist li a
        {
            display: block;
            height: 40px;
            line-height: 40px;
        }

            .popchaplist li a:hover
            {
                background-color: #f3f3f3;
            }

        .popchaplist li h3
        {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 1rem;
            font-style: normal;
            text-align: left;
            padding: 0;
            overflow: hidden;
            white-space: nowrap;
            margin-left: 70px;
        }

            .popchaplist li h3 em
            {
                font-style: normal;
            }

        .popchaplist li a > span
        {
            display: block;
            float: left;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -9px;
            height: 18px;
            font-size: 11px;
            color: #fff;
            background-color: #4dc305;
            border-radius: 4px;
            padding: 0 0px;
            text-align: center;
            width: 50px;
            line-height: 18px;
            overflow: hidden;
        }

        .popchaplist li span > span
        {
            background-color: unset;
            border-radius: unset;
            position: unset;
            left: unset;
            top: unset;
            margin: unset;
            display: block;
        }

            .popchaplist li span > span.coin
            {
                background-color: #f60;
            }

.chaplistpop
{
    display: block;
}

@media screen and (max-width:767px)
{
    .chaplistpop
    {
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .chaplistpopbg
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: rgba(0,0,0,0.7);
    }

    .chaplistpop .chaplist
    {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90%;
        height: 60%;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
        overflow-y: auto;
    }
}

.popshare h4
{
    font-size: 1.5rem;
    margin: 0;
    padding: 0 0 20px 0;
    color: var(--color-main);
}

.popsharetxt
{
    font-size: 1rem;
    padding: 0 0 20px 0;
    text-align: left;
}

    .popsharetxt input
    {
        border: 1px solid #ddd;
        background-color: #f3f3f3;
        padding: 5px;
        text-align: center;
        margin-top: 10px;
    }

.popsharebtn
{
    text-align: center;
}

    .popsharebtn span
    {
        display: inline-block;
        font-size: 1.2rem;
        padding: 10px 25px;
        border-radius: 5px;
        color: #fff;
        border: 0;
        background-color: var(--color-main);
    }

.changeguess
{
    text-align: center;
    padding: 10px 0;
    position: relative;
}

    .changeguess button
    {
        display: inline-block;
        font-size: 16px;
        background-color: var(--color-main);
        color: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        border: 0;
        position: relative;
        z-index: 1;
    }

.catetabbox
{
    display: block;
    font-size: 0;
    padding: 25px 0 10px 0;
    margin: 0 auto;
    max-width: 1400px;
}

    .catetabbox h3
    {
        display: inline-block;
        font-size: 24px;
        font-weight: bold;
        color: var(--color-main);
        margin: 0;
        padding: 0 0 0 5px;
        height: 30px;
        line-height: 30px;
        vertical-align: top;
    }

    .catetabbox ul
    {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 0;
        padding-left: 25px;
        vertical-align: middle;
    }

        .catetabbox ul li
        {
            display: inline-block;
            font-size: 16px;
            color: #666;
            padding: 0 0px;
            cursor: pointer;
            margin: 0 20px;
            height: 28px;
            line-height: 30px;
            vertical-align: top;
        }

            .catetabbox ul li.now
            {
                color: var(--color-main);
                border-bottom: 2px solid var(--color-main);
            }

.catebox
{
    display: block;
    margin: 0 auto;
    padding: 0px 0;
    width: 100%;
    background-color: #333;
    position: relative;
    z-index: 3;
}

.cateopenbtn
{
    display: block;
    width: 60px;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -30px;
    background-color: #333;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    display: none;
}

    .cateopenbtn svg
    {
        display: block;
        width: auto;
        height: 20px;
        fill: var(--color-main);
        margin: 0 auto;
        transform: scale(1.6);
        position: relative;
        top: -5px;
    }

.catebox .tagnav
{
    padding: 15px 0;
    height: auto;
    overflow: visible;
}

.pagenav
{
    display: block;
}

    .pagenav a
    {
        display: inline-block;
        background-color: #fff;
        padding: 0px 10px;
        border-radius: 5px;
        border: 3px solid var(--color-border);
        font-size: 16px;
        margin: 0 5px 0px 0;
        height: 40px;
        line-height: 34px;
        box-sizing: border-box;
        font-weight: bold;
        color: var(--color-main)
    }

        .pagenav a:hover
        {
            background-color: var(--color-background-red)
        }

        .pagenav a span
        {
            margin-left: 5px;
            font-size: 20px;
            display: inline-block;
            vertical-align: top;
        }

    .pagenav b
    {
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        font-weight: bold;
        color: #666;
    }

.filterbox
{
    display: block;
    margin: 0 auto;
    max-width: 1400px;
    padding: 20px 5px;
    font-size: 0;
    height: 80px;
    text-align: right;
    box-sizing: border-box
}

    .filterbox .l
    {
        float: left;
        display: inline-block;
    }

    .filterbox .r
    {
        display: inline-block;
    }

    .filterbox ul
    {
        display: inline-block;
        border-radius: 6px;
        box-shadow: 0 2px 3px rgba(0,0,0,0.1);
        margin-left: 10px;
    }

    .filterbox .l ul
    {
        margin-left: 0;
    }

    .filterbox ul li
    {
        display: inline-block;
        border: 1px solid #ddd;
        width: auto;
        height: 40px;
        box-sizing: border-box;
        border-left: 0;
        overflow: hidden;
        background-color: #fff;
    }

        .filterbox ul li:first-child
        {
            border-left: 1px solid #ddd;
            border-radius: 6px 0 0 6px;
        }

        .filterbox ul li:last-child
        {
            border-radius: 0 6px 6px 0;
        }

        .filterbox ul li a
        {
            display: block;
            height: 38px;
            line-height: 38px;
            padding: 0 15px;
            font-size: 14px;
            color: #666
        }

            .filterbox ul li a.cur
            {
                background-color: var(--color-main);
                color: #fff;
            }

                .filterbox ul li a.cur:after
                {
                    content: "";
                    display: inline-block;
                    vertical-align: top;
                    height: 100%;
                    margin-left: 5px;
                    width: 14px;
                    background: url(/images/default/adown.svg) center no-repeat;
                    background-size: 170% auto;
                }

    .filterbox ul.select18
    {
        box-shadow: none;
    }

        .filterbox ul.select18 li
        {
            border: 1px solid #ddd;
            color: var(--color-main);
            background-color: #fff;
            height: 40px;
            margin-left: 5px;
            border-radius: 6px;
            box-shadow: 0 2px 3px rgba(0,0,0,0.1)
        }

            .filterbox ul.select18 li a
            {
                color: #999;
            }

                .filterbox ul.select18 li a svg
                {
                    display: none;
                }

            .filterbox ul.select18 li.cur
            {
                background-color: var(--color-background-red);
                border-color: var(--color-main)
            }

            .filterbox ul.select18 li a.cur svg
            {
                display: inline-block;
                fill: var(--color-main);
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }

            .filterbox ul.select18 li a.cur
            {
                background-color: var(--color-background-red);
                color: var(--color-main-dark);
                border-color: var(--color-main);
                font-weight: bold;
            }

                .filterbox ul.select18 li a.cur:after
                {
                    display: none;
                }

.rankbox
{
    margin: 0 auto;
    max-width: 1400px;
    padding: 20px 10px;
    font-size: 0;
}

.twocat .rankbox
{
    text-align: center;
}

.rankbox dl
{
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 10px;
}

html.novel .rankbox dl
{
}

.rankbox dl dt
{
    display: block;
    text-align: center;
    font-size: 24px;
    color: #333;
    padding-bottom: 20px;
}

    .rankbox dl dt.mobiledt
    {
        display: none;
    }

.rankbox dl dd
{
    display: block;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 20px;
    text-align: center;
}

    .rankbox dl dd h3
    {
        color: #333;
        font-size: 18px;
        padding-bottom: 5px;
        display: inline-block;
        margin: 0 10px;
        font-weight: normal;
        cursor: pointer;
    }

        .rankbox dl dd h3.now
        {
            color: var(--color-main);
            border-bottom: 2px solid var(--color-main);
        }

    .rankbox dl dd ul
    {
        display: block;
        padding-top: 15px;
        text-align: left;
    }

        .rankbox dl dd ul li
        {
            padding: 8px;
            font-size: 16px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }

            .rankbox dl dd ul li strong
            {
                display: inline-block;
                vertical-align: top;
                height: 20px;
                width: 20px;
                font-size: 12px;
                color: #fff;
                border-radius: 50%;
                background-color: #ccc;
                text-align: center;
                line-height: 20px;
                margin-right: 5px;
            }

            .rankbox dl dd ul li a:hover
            {
                color: var(--color-main)
            }

            .rankbox dl dd ul li:nth-child(1) strong
            {
                background-color: #ff5600
            }

            .rankbox dl dd ul li:nth-child(2) strong
            {
                background-color: #f69700
            }

            .rankbox dl dd ul li:nth-child(3) strong
            {
                background-color: #eecc00
            }

            .rankbox dl dd ul li.more
            {
                text-align: center;
                padding-top: 20px;
                display: block;
                clear: both;
                width: 100%;
            }

                .rankbox dl dd ul li.more a
                {
                    display: inline-block;
                    padding: 10px 15px;
                    border-radius: 50px;
                    background-color: var(--color-main);
                    color: #fff;
                }

.authorbox, .authorheadbox
{
    margin: 0 auto;
    max-width: 1400px;
    padding: 0px;
    font-size: 0;
    box-sizing: border-box;
}

.authorhead
{
    height: auto;
    padding: 0px;
    background-color: #fff;
    box-shadow: 0 -10px 10px rgba(0,0,0,0.05) inset;
    border-bottom: 1px solid #dedede
}

.authorheadbox
{
    box-sizing: border-box;
    padding: 0 10px;
    height: 300px;
    line-height: 300px;
}

    .authorheadbox:after
    {
        content: "";
        display: block;
        width: auto;
        height: 0;
        clear: both;
    }

.authorhead .face
{
    display: block;
    height: 260px;
    float: left;
    width: 260px;
    margin: 20px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 15px rgba(0,0,0,0.3)
}

.authorhead .info
{
    width: auto;
    overflow: hidden;
    padding: 0 0 10px 30px;
    height: auto;
    line-height: 100%;
    vertical-align: middle;
    display: inline-block;
}

    .authorhead .info h1
    {
        display: block;
        font-size: 30px;
        padding: 0 0 20px 0;
        vertical-align: top;
        line-height: 40px;
        margin: 0;
        white-space: nowrap;
    }

    .authorhead .info .score
    {
        font-size: 40px;
        color: var(--color-main);
        line-height: 40px;
    }

    .authorhead .info .btn
    {
        display: block;
        padding: 30px 0 0 0;
        height: 40px;
        line-height: 40px;
        font-size: 0;
    }

        .authorhead .info .btn a
        {
            display: inline-block;
            font-size: 16px;
            color: #fff;
            background-color: #999;
            padding: 0 15px;
            border-radius: 40px;
            margin-right: 5px;
        }

            .authorhead .info .btn a.selected
            {
                background-color: var(--color-main);
                padding: 0 15px 0 10px;
            }

                .authorhead .info .btn a.selected:before
                {
                    display: block;
                    float: left;
                    height: 40px;
                    width: 18px;
                    margin-right: 5px;
                    background: url(/images/default/check-line.svg) center no-repeat;
                    background-size: 100% auto;
                    content: "";
                }

.funbtn .hide, .loadmore
{
    display: none;
}

.page
{
    display: block;
    text-align: center;
    padding: 15px 0 30px 0;
}

    .page ul
    {
        display: block;
        font-size: 0;
    }

        .page ul li
        {
            display: inline-block;
            min-width: 36px;
            height: 36px;
            margin: 0px;
            border-radius: 0px;
            box-shadow: 0 4px 5px rgba(0,0,0,0.05);
            border: 1px solid #eee;
            border-left: 0;
            background-color: #fff;
            font-size: 14px;
            line-height: 36px;
        }

            .page ul li:first-child
            {
                border-left: 1px solid #eee;
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
            }

            .page ul li:last-child
            {
                border-top-right-radius: 6px;
                border-bottom-right-radius: 6px;
            }

            .page ul li a
            {
                display: block;
                padding: 0 8px;
                height: 36px;
                line-height: 37px;
                color: #666;
            }

                .page ul li a:hover
                {
                    background-color: #f3f3f3;
                }

            .page ul li.current
            {
                border: 1px solid var(--color-main);
                background-color: var(--color-main);
                color: #fff;
            }

            .page ul li.current
            {
            }

.userpage
{
    margin: 30px auto;
    max-width: 480px;
    background-color: #fff;
    border: 10px solid rgba(0,0,0,0.08);
    border-radius: 25px;
}

.myyqm
{
    display: block;
    position: relative;
    margin: 5px 15px 15px 15px;
    border: 5px solid var(--color-border);
    border-radius: 20px;
    padding: 10px;
}

    .myyqm dl
    {
        display: block;
        font-size: 0;
    }

        .myyqm dl dt
        {
            position: absolute;
            top: -12px;
            left: 0%;
            margin-left: 0px;
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: var(--color-main);
            padding: 0 5px;
        }

            .myyqm dl dt span
            {
                display: inline-block;
                background-color: #fff;
                height: 20px;
                padding: 0 10px;
            }

        .myyqm dl dd
        {
            display: block;
            margin: 0;
            width: 100%;
            padding-right: 80px;
            box-sizing: border-box;
            line-height: 180%;
        }

            .myyqm dl dd input
            {
                display: block;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 18px;
                color: var(--color-main);
                font-weight: 800;
                border: 0;
                width: 100%;
            }

            .myyqm dl dd.myyqmbtn
            {
                position: absolute;
                top: 50%;
                right: 10px;
                height: 40px;
                line-height: 40px;
                width: 70px;
                text-align: center;
                background-color: var(--color-main);
                text-align: center;
                margin-top: -20px;
                border-radius: 40px;
                overflow: hidden;
                padding: 0;
            }

                .myyqm dl dd.myyqmbtn.line
                {
                    display: block;
                    position: relative;
                    top: auto;
                    right: auto;
                    text-align: center;
                    width: auto;
                    height: auto;
                    padding-top: 5px;
                    background-color: transparent;
                    border-radius: 0;
                    margin-top: 0;
                    font-size: 0;
                }

            .myyqm dl dd textarea
            {
                font-size: 14px;
                line-height: 150%;
                display: block;
                padding: 10px 10px 0 10px;
                box-sizing: border-box;
                border: 0;
            }

            .myyqm dl dd.myyqmbtn button
            {
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
                background-color: transparent;
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
            }

            .myyqm dl dd.myyqmbtn.line button
            {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
                background-color: var(--color-main);
                border-radius: 40px;
                width: auto;
            }

            .myyqm dl dd.myyqmbtn button:active
            {
                background-color: rgba(0,0,0,0.05)
            }

            .myyqm dl dd input.bnum
            {
                font-size: 30px;
            }

.userhead
{
    display: block;
    background-size: 100% auto;
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.myheadbg
{
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    display: block;
}

.myheadbg2
{
    position: relative;
    z-index: 0;
    width: 80%;
    height: auto;
    display: block;
}

.userface
{
    position: absolute;
    top: 9%;
    left: 3%;
    width: 22%;
    height: auto;
    border-radius: 50%;
    border: 8px solid rgba(255,255,255,0.3);
    overflow: hidden;
}

    .userface:before
    {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 6px solid #fff;
        z-index: 2;
        position: absolute;
        border-radius: 50%;
    }

    .userface img
    {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 6px;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .userface button
    {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 35%;
        border: 0;
        background-color: rgba(0,0,0,0.3);
        z-index: 1;
        padding: 0 0 6px 0;
    }

        .userface button svg
        {
            display: block;
            width: 100%;
            height: 100%;
            fill: rgba(255,255,255,0.8);
            box-sizing: border-box;
            padding: 5px 0;
        }

.useredit
{
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
}

    .useredit button
    {
        border: 0;
        width: 100%;
        height: 100%;
        background: none;
    }

        .useredit button svg
        {
            display: block;
            width: 100%;
            height: 100%;
            fill: #fff;
        }

.username
{
    font-size: 18px;
    color: #fff;
    padding-bottom: 8px;
}

.userinfos
{
    position: absolute;
    top: 11%;
    left: 25%;
    margin-left: 20px;
    font-size: 12px;
    color: #fff;
    padding-right: 40px;
    box-sizing: border-box;
}

.userrefreshbtn
{
    position: absolute;
    top: 3%;
    right: 2.5%;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    display: block;
}

    .userrefreshbtn i
    {
        vertical-align: top;
        margin-right: 4px;
    }

.userheadtitle
{
    width: 50%;
    height: auto;
    padding: 0 0 15px 0;
    text-align: center;
    font-size: 18px;
    color: var(--color-main);
    position: absolute;
    left: 0;
    bottom: 0;
    font-weight: bold;
}

.usercoin
{
    display: inline-block;
    line-height: 20px;
    font-size: 12px;
    vertical-align: top;
    margin-right: 10px;
    height: 20px;
}

    .usercoin img
    {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        width: auto;
        position: relative;
        top: -2px;
    }

.uservip
{
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
}

    .uservip svg
    {
        display: block;
        height: 100%;
        width: auto;
        fill: #e2ff23;
        vertical-align: top;
        box-sizing: border-box;
        padding: 3px 0;
    }

    .uservip span
    {
        display: inline-block;
        vertical-align: top;
        height: 20px;
        line-height: 20px;
    }

.qiandao
{
    display: block;
    width: 94%;
    height: auto;
    position: absolute;
    left: 3%;
    top: 46%;
}

.qiandaobtn
{
    position: absolute;
    right: 0%;
    width: 18%;
    height: 100%;
    top: 0%;
    border-radius: 13px;
    box-sizing: border-box;
}

    .qiandaobtn a svg
    {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 8px;
        fill: #fff;
        position: absolute;
        top: 0px;
        left: 0;
        margin-left: 0px;
        z-index: 0;
        opacity: 0.1;
        padding: 10px;
    }

    .qiandaobtn > div
    {
        display: table;
        width: 100%;
        height: 100%;
    }

    .qiandaobtn a
    {
        font-size: 13px;
        display: table-cell;
        text-align: center;
        color: #fff;
        padding: 5px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        background-color: #724A45;
        background-image: linear-gradient(to top,#724A45,#9B6723);
        border-radius: 13px;
        z-index: 1;
    }

        .qiandaobtn a.graybtn
        {
            background-color: #666;
            background-image: linear-gradient(to top,#666,#999)
        }

        .qiandaobtn a .signed
        {
            display: none;
        }

        .qiandaobtn a .notsigned
        {
            display: unset;
        }

        .qiandaobtn a.graybtn .signed
        {
            display: unset;
        }

        .qiandaobtn a.graybtn .notsigned
        {
            display: none;
        }

        .qiandaobtn a.gitbtn
        {
            background-color: #a93ea4;
            background-image: linear-gradient(to top,#53234f,#a93ea4)
        }

.usereditpop
{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

    .usereditpop > h4
    {
        display: block;
        margin: 0;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #666;
        border-block: 1px solid #eee;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

.usereditpopbody
{
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    padding: 10px;
    z-index: 2;
}

    .usereditpopbody:after
    {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-top: 4px solid #eee;
        border-right: 4px solid #eee;
        background: #fff;
        transform: rotate(-45deg);
        position: absolute;
        left: 37px;
        bottom: -13px;
    }

    .usereditpopbody dl
    {
        display: block;
        width: auto;
        overflow: hidden;
    }

        .usereditpopbody dl:first-child
        {
            float: left;
            width: 60px;
            padding: 0 5px;
            height: 90px;
        }

        .usereditpopbody dl dt
        {
            display: block;
            height: 30px;
            line-height: 30px;
            color: #666;
        }

        .usereditpopbody dl dd
        {
            display: block;
            width: auto;
            height: 60px;
        }

        .usereditpopbody dl:first-child dd img
        {
            display: block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
        }

.usereditpopimgs
{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 155px 15px 60px 15px;
}

    .usereditpopimgs:before
    {
        position: absolute;
    }

    .usereditpopimgs ul
    {
        display: block;
        width: auto;
        height: 100%;
        overflow: auto;
        overflow-y: auto;
        border: 4px solid #eee;
        border-radius: 15px;
        font-size: 0;
        padding: 10px;
        box-sizing: border-box;
    }

        .usereditpopimgs ul li
        {
            display: inline-block;
            width: 33.33%;
            box-sizing: border-box;
            padding: 10px;
            position: relative
        }

            .usereditpopimgs ul li img
            {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 50%;
                transition: all 0.2s;
            }

            .usereditpopimgs ul li.select img
            {
                content: "";
                display: block;
                border: 4px solid #f90;
                box-sizing: border-box;
                transform: scale(1.1)
            }

.usereditpopbody dl:last-child
{
    padding: 0px 15px 0px 20px;
}

.usereditpopbody dl dd input
{
    display: block;
    border: 1px solid #ddd;
    background-color: #f3f3f3;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    line-height: 38px;
    margin-top: 0px;
    padding: 0 5px;
    position: relative;
    top: 10px;
}

.usereditpopfooter
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: center;
}

    .usereditpopfooter button
    {
        display: inline-block;
        border: 0;
        background: var(--color-main);
        color: #fff;
        padding: 5px 8px;
        margin: 0 3px;
        font-size: 14px;
        border-radius: 4px;
    }

        .usereditpopfooter button:hover
        {
            opacity: 0.8;
        }

        .usereditpopfooter button:first-child
        {
            background: #999;
        }

@media screen and (min-width:451px)
{
    .usereditpop
    {
        width: 450px;
        height: 700px;
        top: 120px;
        left: 50%;
        margin-left: -225px;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(0,0,0,0.3)
    }
}

.qiandaobtn a span
{
    position: relative;
    z-index: 1;
}

.qiandaotitle
{
    color: #9B6723;
    font-size: 15px;
    width: 93%;
    text-align: center;
    height: 20px;
    line-height: 20px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    font-weight: bold;
    left: 4%;
}

.qiandaoli
{
    position: absolute;
    left: 2.4%;
    bottom: 8%;
    z-index: 1;
    height: 48%;
    width: 79%;
}

    .qiandaoli ul
    {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
    }

        .qiandaoli ul li
        {
            display: block;
            vertical-align: top;
            font-size: 14px;
            font-weight: bold;
            float: left;
            height: 100%;
            width: 14%;
            box-sizing: border-box;
            padding-right: 6px;
            color: #FFF5A9;
            text-align: center;
            position: relative;
        }

            .qiandaoli ul li strong
            {
                background-color: #724A45;
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 6px;
                position: relative;
            }

            .qiandaoli ul li span
            {
                display: block;
                position: absolute;
                line-height: 24px;
                font-size: 16px;
                left: 0;
                bottom: 0;
                width: 100%;
                text-align: center;
            }

.EN .qiandaoli ul li span
{
    display: block;
    position: absolute;
    line-height: 24px;
    font-size: 12px;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.qiandaoli ul li i
{
    position: absolute;
    bottom: 55%;
    width: 100%;
    left: 0;
    font-size: 0px;
    box-sizing: border-box;
    padding-right: 6px;
}

    .qiandaoli ul li i svg
    {
        display: inline-block;
        width: 60%;
        height: auto;
    }

.qiandaoli i.hide
{
    display: none;
}
/*.qiandaoli i.show { display: unset; }*/

.qiandaotxt
{
    position: absolute;
    left: 0;
    bottom: 15px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #999;
    width: 100%;
    text-align: center;
    padding-right: 20%;
    box-sizing: border-box;
}

.facebookbox
{
    display: block;
    margin: 0 auto;
    max-width: 1400px;
    padding: 15px 10px;
}

.daytask
{
    display: block;
    position: relative;
    padding-right: 80px;
}

    .daytask div
    {
        height: 30px;
        line-height: 30px;
    }

        .daytask div img
        {
            display: inline-block;
            vertical-align: top;
            height: 100%;
            box-sizing: border-box;
            padding: 5px 0;
        }

    .daytask .btitle
    {
        font-size: 16px;
        color: #333;
    }

    .daytask .bimgtitle
    {
        width: auto;
        height: auto;
        padding-bottom: 5px
    }

        .daytask .bimgtitle img
        {
            display: block;
            width: 100%;
            height: auto;
            padding: 0;
            border-radius: 5px;
        }

    .daytask .stitle
    {
        font-size: 12px;
        color: #999;
        height: 16px;
        line-height: 16px;
    }

    .daytask .manbi
    {
        color: var(--color-main)
    }

    .daytask .popright
    {
        height: 60px;
        top: 50%;
        margin-top: -30px;
        text-align: center;
        right: 0;
        color: #999;
    }

        .daytask .popright.s
        {
            height: 30px;
            margin-top: -15px;
        }

    .daytask .tasklogo
    {
        float: left;
        width: 60px;
        height: 60px;
        margin-right: 10px;
        padding-top: 8px;
    }

        .daytask .tasklogo img
        {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
        }

.jianglism
{
    padding: 10px 5px 5px 5px;
    font-size: 14px;
    line-height: 150%;
}

    .jianglism > font
    {
        font-size: 15px;
        padding-top: 10px;
    }

    .jianglism b
    {
        display: block;
        color: var(--color-main);
    }

.leiji
{
    font-size: 14px;
    line-height: 150%;
    padding: 10px 0 0 0;
}

    .leiji h3
    {
        margin: 0;
        padding: 10px 15px;
        border-radius: 20px;
        background-color: #f3f3f3;
        display: block;
        font-size: 14px;
        font-weight: normal;
        color: #666;
        text-align: center;
    }

.leijilist
{
    font-size: 12px;
    color: #333;
}

    .leijilist ul li
    {
        color: #333;
        font-size: 14px;
    }

    .leijilist .item-title
    {
        font-size: 12px;
    }

        .leijilist .item-title i
        {
            font-style: normal;
            color: #999;
            margin-left: 5px;
        }

    .leijilist .item-inner
    {
        padding-right: 10px;
    }

    .leijilist .item-content
    {
        padding: 0 10px;
    }

    .leijilist ul li.item-content:last-child > div
    {
        border-bottom: 0;
        padding-bottom: 0;
    }

span.badge
{
    color: #f30;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    padding: 1px 4px;
}

span.goodge
{
    color: #27ae2e;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    padding: 1px 4px;
}

span.noact
{
    color: #22a3cc;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    padding: 1px 4px;
}

button.actbutton
{
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    line-height: 100%;
    border-radius: 30px;
    color: #fff;
    background-color: var(--color-main);
    border: 0;
}

.jianglism span.badge
{
    color: #fff;
}

.mylist
{
    margin: 0;
    padding: 0 20px 20px 20px;
}

    .mylist li
    {
        display: block;
        height: auto;
        line-height: 20px;
        border-bottom: 1px solid #eee;
        padding: 15px 0;
        position: relative;
    }

        .mylist li b.userTip
        {
            background-color: red;
            color: #fff;
            border-radius: 40px;
            width: 30px;
            height: 20px;
            line-height: 20px;
            margin-left: 10px;
            display: none;
            text-align: center;
            font-size: 12px;
            font-weight: normal;
        }

        .mylist li a:hover
        {
            color: var(--color-main);
        }

        .mylist li a > div
        {
            display: inline-block;
            vertical-align: top;
        }

            .mylist li a > div:first-child
            {
                width: 30px;
            }

            .mylist li > a > div > svg, .mylist li a > div img
            {
                display: block;
                width: 100%;
                height: 20px;
                fill: var(--color-main);
                box-sizing: border-box;
                padding: 0px 0;
            }

    .mylist .item-media svg
    {
        fill: var(--color-main)
    }

    .mylist .item-media .material-icons
    {
        color: var(--color-main)
    }

    .mylist .item-subtitle
    {
        color: #999;
        font-size: 13px;
    }

    .mylist li.usergender
    {
        height: 30px;
        line-height: 30px;
    }

        .mylist li.usergender label
        {
            background-color: var(--color-main);
            border-radius: 15px;
            padding: 3px 12px 3px 8px;
            color: #fff;
            border: solid 0px #ddd;
            margin-right: 5px;
        }

        .mylist li.usergender span
        {
            font-size: 14px;
            color: #666;
        }


.mylisttitle
{
    display: block;
    overflow: hidden;
}

.popright
{
    position: absolute;
    width: auto;
    height: 30px;
    line-height: 30px;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    color: var(--color-main);
    font-size: 14px;
}

    .popright img
    {
        display: inline-block;
        width: auto;
        height: 100%;
        vertical-align: top;
        padding: 0px;
        box-sizing: border-box;
    }

    .popright a
    {
        display: block;
        background-color: var(--color-main);
        color: #fff;
        font-size: 14px;
        padding: 0 10px;
        border-radius: 50px;
    }

        .popright a.disabled
        {
            background-color: #999;
        }

        .popright a:hover
        {
            color: #fff;
        }

.mylisttitle .title1
{
    font-size: 16px;
    color: #333;
    padding-bottom: 5px;
}

.mylisttitle .title2
{
    font-size: 12px;
    color: #999;
}

.duihuanstep
{
    padding: 0;
    font-size: 0;
    padding: 5px;
}

    .duihuanstep div
    {
        display: inline-block;
        width: 30%;
        padding: 10px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 130%;
        vertical-align: middle;
    }

    .duihuanstep span
    {
        display: inline-block;
        width: 5%;
        vertical-align: middle;
        position: relative;
    }

        .duihuanstep span svg
        {
            display: block;
            width: 24px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -12px auto auto -12px;
            fill: var(--color-main);
            opacity: 0.5;
        }

.duihuanlist
{
    border-top: 0px solid #eee;
    padding-top: 0px;
}

    .duihuanlist li
    {
        display: block;
        padding: 10px 10px 10px 10px;
        border-bottom: 1px solid #eee;
    }

    .duihuanlist .item-content
    {
        padding-left: 0;
        display: block;
        font-size: 0;
        position: relative;
    }

        .duihuanlist .item-content > div
        {
            display: inline-block;
        }

    .duihuanlist .item-media
    {
        width: 40px;
        height: 40px;
        overflow: hidden;
        padding: 0;
        border-radius: 50%;
        vertical-align: top;
        float: left;
        display: block;
    }

        .duihuanlist .item-media img
        {
            display: block;
            width: 100%;
            height: 100%;
        }

    .duihuanlist .item-inner
    {
        line-height: 150%;
        display: block;
        width: auto;
        overflow: hidden;
        padding-left: 10px;
        box-sizing: border-box;
        padding-right: 90px;
    }

    .duihuanlist .item-right
    {
        position: absolute;
        right: 0;
        font-size: 14px;
        top: 50%;
        margin-top: -15px;
    }

        .duihuanlist .item-right a
        {
            display: block;
            vertical-align: middle;
            background-color: var(--color-main);
            color: #fff;
            padding: 5px 15px;
            height: 20px;
            line-height: 20px;
            border-radius: 50px;
        }

.duihuanlisttitle
{
    font-size: 14px;
    color: var(--color-main);
    line-height: 150%;
}

    .duihuanlisttitle span, .duihuanlisttitle em
    {
        font-style: normal;
        font-size: 12px;
        color: #666;
        display: block;
        height: 18px;
        line-height: 18px;
    }

    .duihuanlisttitle span
    {
        height: auto;
        line-height: 120%;
        padding: 0 0 4px 0;
    }

    .duihuanlisttitle em
    {
        font-size: 14px;
        color: var(--color-main);
    }

        .duihuanlisttitle em img
        {
            display: inline-block;
            width: 16px;
            height: 100%;
            vertical-align: top;
            box-sizing: border-box;
        }

.changepwd
{
    padding: 20px;
}

    .changepwd table
    {
        margin-bottom: 20px;
    }

    .changepwd td
    {
        padding: 10px;
    }

    .changepwd button
    {
        display: block;
        margin: 0 auto;
        border: 0;
        background-color: var(--color-main);
        color: #fff;
        padding: 10px 15px;
        border-radius: 50px;
    }

.userpageback
{
    text-align: center;
    padding: 30px 0 0 0;
    height: 30px;
}

    .userpageback svg
    {
        display: inline-block;
        width: 40px;
        height: 40px;
        fill: #ccc;
    }

.headback
{
    display: none;
}

.layui-m-layersection .layui-m-layerchild.layui-m-anim-up, .layui-m-layersection .layui-m-layerchild.layui-m-anim-scale
{
    border: 5px solid #ddd;
    border-radius: 25px;
    overflow: hidden;
}

.layui-m-layerbtn
{
    background-color: #f2f2f2;
    color: #fff;
    border: 0;
}

    .layui-m-layerbtn span[yes]
    {
        color: #333;
    }

.loginbox dl
{
    margin: 0 auto;
    display: block;
    max-width: 300px;
    padding: 0 0 20px 0;
    position: relative;
}

    .loginbox dl dt
    {
        display: block;
        text-align: left;
        font-size: 16px;
        padding: 0 0 5px 10px;
        color: #666;
        pointer-events: none;
        position: absolute;
        line-height: 42px;
    }

    .loginbox dl dd
    {
        display: block;
    }

        .loginbox dl dd input
        {
            display: block;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f3f3f3;
            font-size: 14px;
            padding: 5px 10px;
            box-sizing: border-box;
            width: 100%;
            line-height: 30px;
            color: #000;
        }

.loginbtn
{
    text-align: center;
    padding: 0 0 20px 0;
}

    .loginbtn button
    {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-color: var(--color-main);
        border-radius: 6px;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        border: 0;
    }

.loginbox p
{
    display: block;
    font-size: 14px;
    line-height: 140%;
}

    .loginbox p a
    {
        color: var(--color-main);
        font-weight: bold;
    }

.loginother
{
    position: relative;
    top: 25px;
}

    .loginother span
    {
        margin: 0 5px;
        position: relative;
    }

    .loginother span
    {
        height: 36px;
        line-height: 36px;
        font-size: 16px;
    }

        .loginother span svg
        {
            width: 36px;
            height: 36px;
        }

.lineqrcode
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 3;
    box-sizing: border-box;
    padding: 55px 0 0 0;
}

    .lineqrcode h3
    {
        display: block;
        margin: 0;
        padding: 20px 0 10px 0 !important;
        font-size: 16px;
        text-align: center;
    }

    .lineqrcode .codeimg
    {
        display: inline-block;
        vertical-align: middle;
        border: 5px solid #eee;
        background-color: #eee;
        width: 240px;
        height: 240px;
    }

        .lineqrcode .codeimg img
        {
            display: block;
        }

    .lineqrcode .back
    {
        padding-top: 30px;
        text-align: center;
    }

    .lineqrcode button
    {
        display: inline-block;
        border: 0;
        font-size: 14px;
        background-color: #eee;
        color: #666;
        border-radius: 6px;
        padding: 10px 15px;
    }

.layui-m-layer-popsearch
{
    max-width: 800px;
    overflow: hidden;
    display: block;
}

@media screen and (min-height:1200px)
{
    .layui-m-layer-popsearch
    {
        height: 1100px
    }
}

@media screen and (min-height:1000px) and (max-height:1199px)
{
    .layui-m-layer-popsearch
    {
        height: 900px
    }
}

@media screen and (min-height:800px) and (max-height:999px)
{
    .layui-m-layer-popsearch
    {
        height: 700px
    }
}

.layui-m-layer-popsearch .layui-m-layerbtn
{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

.layui-m-layer-popsearch .layui-m-layercont
{
    box-sizing: border-box;
    height: 100%;
    padding: 30px 30px 80px 30px;
    overflow-x: hidden;
    overflow-y: auto;
}

.searchbox
{
    text-align: left;
}

.searchbar dl
{
    display: block;
    font-size: 0;
    position: relative;
    padding-right: 50px;
}

.searchbar dt
{
    display: block;
    width: 100%;
}

    .searchbar dt input
    {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ddd;
        background-color: #f3f3f3;
        border-radius: 50px;
        height: 40px;
        line-height: 38px;
        font-size: 16px;
        padding: 0 15px;
    }

.searchbar dd
{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
}

    .searchbar dd button
    {
        display: block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        border: 0px solid #ddd;
        background-color: var(--color-main);
        box-sizing: border-box;
        border-radius: 50px;
    }

        .searchbar dd button svg
        {
            display: block;
            width: 100%;
            height: 100%;
            fill: #fff;
            box-sizing: border-box;
            padding: 8px;
        }

.searchtags
{
    display: block;
    font-size: 0;
    width: 100%;
    overflow: hidden;
}

    .searchtags a
    {
        display: inline-block;
        margin: 0 5px 5px 0;
        background-color: #eee;
        color: #333;
        padding: 5px 10px;
        white-space: nowrap;
        font-size: 14px;
    }

        .searchtags a:hover
        {
            color: var(--color-main);
            background-color: #ffeef1;
        }

.searchresult
{
    border-top: 1px solid #eee;
    margin-top: 15px;
}

    .searchresult .pagetitle
    {
        font-size: 18px;
        padding-top: 15px;
    }

    .searchresult .nlist
    {
        width: 100%;
        overflow: hidden;
    }

        .searchresult .nlist li .cover .status
        {
            padding-bottom: 4px;
            line-height: 120%;
        }

.searchbox .nlist
{
    padding: 0;
    position: relative;
    z-index: 0;
}

    .searchbox .nlist ul
    {
        margin: 0 -10px;
    }

.headfav
{
    display: none;
    transition: position 0.3s;
}

.appdeskpop
{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 29891015;
    background-color: rgba(0,0,0,0.8);
    display: none;
}

    .appdeskpop > div
    {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        background-color: #fff;
    }

.safariadd2
{
    display: block;
    padding: 30px;
    width: auto;
    box-sizing: border-box;
    position: relative;
}

    .safariadd2 img
    {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
        overflow: hidden;
    }

    .safariadd2 > span
    {
        position: absolute;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        left: 40px;
        bottom: 36%;
        background-color: #fff;
        border-radius: 50px;
        padding: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2)
    }

span.safariadd
{
    text-align: center;
    padding: 0 15px 15px 15px;
    font-size: 14px;
    line-height: 35px;
    display: block;
    font-weight: bold
}

    span.safariadd img
    {
        display: inline-block;
        height: 35px;
        width: auto;
        box-sizing: border-box;
        vertical-align: top;
        border-radius: 5px;
        margin: 0 5px;
    }

.safariadd em
{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: var(--color-main);
    font-style: normal;
    margin-right: 5px;
}

.safariadd2 em
{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: var(--color-main);
    font-style: normal;
    margin-right: 5px;
}

a.headfavclose
{
    position: absolute;
    width: 40px;
    height: 40px;
    right: 5px;
    bottom: 10px;
}

    a.headfavclose svg
    {
        fill: #fff;
        opacity: 0.3;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px;
    }

.feedbackbox
{
    padding: 15px;
}

.feedbacktitle
{
    display: block;
    padding-bottom: 10px;
    height: 30px;
    line-height: 30px;
    position: relative;
}

    .feedbacktitle h3
    {
        display: block;
        font-size: 18px;
        color: #444;
    }

    .feedbacktitle span
    {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0;
    }

        .feedbacktitle span button
        {
            height: 30px;
            line-height: 30px;
            border: 0;
            padding: 0 10px;
            border-radius: 30px;
            font-size: 14px;
            color: #fff;
            background-color: #999;
            margin-left: 5px;
        }

.feedbacklist li
{
    display: block;
    padding: 0px 0 25px 0;
}

    .feedbacklist li .my
    {
        border-radius: 10px;
        padding: 10px 10px 25px 10px;
        background-color: #f3f3f3;
        display: block;
        position: relative;
    }

        .feedbacklist li .my:after
        {
            content: "";
            display: block;
            clear: both;
            width: auto;
            height: 0
        }

        .feedbacklist li .my:before
        {
            content: "";
            display: block;
            border: 10px solid transparent;
            width: 0;
            height: 0px;
            position: absolute;
            top: 100%;
            left: 0px;
            border-right: 10px solid #f3f3f3;
            transform: rotate(45deg);
            margin-top: -10px;
            border-bottom: 10px solid #fff;
        }

        .feedbacklist li .my dl
        {
            display: block;
        }

        .feedbacklist li .my dt
        {
            display: block;
            position: relative;
            font-size: 16px;
            line-height: 30px;
        }

            .feedbacklist li .my dt span
            {
                position: absolute;
                top: 0;
                right: 0;
                height: 30px;
                line-height: 30px;
            }

                .feedbacklist li .my dt span em
                {
                    font-size: 12px;
                    font-style: normal;
                    padding: 4px 5px;
                }

                    .feedbacklist li .my dt span em.red
                    {
                        color: #fff;
                        background-color: var(--color-main);
                        border-radius: 5px;
                    }

                    .feedbacklist li .my dt span em.green
                    {
                        color: #fff;
                        background-color: #4cc22a;
                        border-radius: 5px;
                    }

        .feedbacklist li .my dd
        {
            font-size: 12px;
            padding-bottom: 15px;
        }

            .feedbacklist li .my dd .time
            {
                display: block;
                opacity: 0.5;
            }

            .feedbacklist li .my dd .subtitle
            {
                display: block;
                font-size: 14px;
                padding-bottom: 4px;
            }

        .feedbacklist li .my .reply
        {
            float: right;
            width: 90%;
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            font-size: 14px;
        }

            .feedbacklist li .my .reply:after
            {
                position: absolute;
                right: 0px;
                top: 100%;
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-left: 10px solid #fff;
                content: "";
                display: block;
                transform: rotate(-45deg);
                margin-top: -10px
            }

.feedbackbtn
{
    display: block;
    padding: 0px 0 5px 0;
    text-align: center;
}

    .feedbackbtn a
    {
        display: inline-block;
        padding: 10px 15px;
        border-radius: 50px;
        background-color: var(--color-main);
        color: #fff;
    }

.popfeedback
{
    padding: 0px;
}

    .popfeedback h2
    {
        margin: 0;
        padding: 0 0 10px 0;
        text-align: center;
    }

.sendbox
{
    display: block;
    text-align: left;
}

    .sendbox h4
    {
        display: inline-block;
        vertical-align: top;
        line-height: 30px;
    }

    .sendbox select
    {
        display: inline-block;
        vertical-align: top;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        margin-left: 5px;
        border: 1px solid #ddd;
        background-color: #f3f3f3;
        padding: 0 10px;
    }

    .sendbox textarea
    {
        display: block;
        width: 100%;
        border: 1px solid #ddd;
        background-color: #f3f3f3;
        box-sizing: border-box;
        margin-top: 10px;
        border-radius: 5px;
    }

    .sendbox div
    {
        padding-top: 10px;
        text-align: center;
    }

        .sendbox div button
        {
            display: inline-block;
            border-radius: 50px;
            padding: 8px 20px;
            background-color: var(--color-main);
            color: #fff;
            border: 0;
            font-size: 16px;
        }

.blockbtn
{
    display: block;
    padding: 5px 0 0 0;
    position: relative;
}

    .blockbtn input
    {
        display: block;
        width: 100%;
        height: 32px;
        line-height: 30px;
        border: 1px solid #ddd;
        box-sizing: border-box;
        padding: 0 10px;
        color: #999;
        background-color: #f3f3f3;
    }

    .blockbtn button
    {
        position: absolute;
        top: 5px;
        right: 0;
        width: auto;
        height: 32px;
        line-height: 32px;
        border: 0;
        background-color: #999;
        color: #fff;
        padding: 0 10px;
    }

.addthis_toolbox
{
    display: block;
    font-size: 0;
    justify-content: space-between
}

    .addthis_toolbox a
    {
        display: inline-block;
        overflow: hidden;
        border-radius: 5px;
        padding: 0;
    }

#appbar
{
    display: none;
}

.wscreen
{
    display: block;
    width: auto;
    max-width: 1410px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 10px 0 10px;
}

    .wscreen img
    {
        width: 100%;
        height: auto;
    }

.mobileshow
{
    display: none;
}

.pcshow
{
    display: block;
}

.sitegg
{
    display: block;
    width: auto;
    max-width: 1410px;
    margin: 0 auto;
    border: 10px solid #f6f6f6;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.04);
    box-shadow: 0 0 35px rgba(0,0,0,0.1) inset;
    padding: 13px 15px;
    position: relative;
}

    .sitegg h3
    {
        position: absolute;
        top: 0;
        left: 0;
        padding: 4px 4px 4px 10px;
        color: #fff;
        background-color: var(--color-main);
        font-size: 14px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
    }

        .sitegg h3:after
        {
            position: absolute;
            right: -20px;
            top: -20px;
            width: 0;
            height: 0;
            overflow: hidden;
            display: block;
            content: "";
            border: 20px solid transparent;
            border-top: 20px solid var(--color-main);
            transform: rotate(135deg)
        }

    .sitegg div
    {
        font-size: 14px;
        line-height: 150%;
        text-indent: 55px;
    }

.popfqa
{
    position: fixed;
    bottom: 70px;
    right: 0px;
    width: auto;
    height: auto;
    z-index: 4;
}

    .popfqa a
    {
        display: inline-block;
        height: auto;
        line-height: 20px;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 50px 0 0 50px;
        color: #333;
        border: 3px solid #fff;
        background-color: var(--color-main);
        border-right: 0;
        box-shadow: 0 0 5px rgba(0,0,0,0.2)
    }

        .popfqa a svg
        {
            display: inline-block;
            vertical-align: top;
            height: 20px;
            width: auto;
            box-sizing: border-box;
            padding: 1px 0;
            fill: #fff
        }

        .popfqa a span
        {
            color: #fff;
        }

.fqapage
{
    margin: 0 auto;
    max-width: 1410px;
    padding: 10px;
    box-sizing: border-box;
}

.fqabox
{
    padding: 30px 0;
}

.fqalist
{
    border: 4px solid #eee;
    padding: 15px;
    border-radius: 20px;
    background-color: #fff;
}

    .fqalist li
    {
        display: block;
        font-size: 16px;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

        .fqalist li a
        {
            display: block;
        }

            .fqalist li a:hover
            {
                color: var(--color-main);
            }

    .fqalist ul li:last-child
    {
        border-bottom: 0;
    }

.layui-m-layer-popfqa .layui-m-layercont
{
    text-align: left;
    padding: 30px;
}

    .layui-m-layer-popfqa .layui-m-layercont h2
    {
        text-align: center;
        padding: 0 0 15px 0;
        margin: 0;
        border-bottom: 1px solid #ddd;
    }

    .layui-m-layer-popfqa .layui-m-layercont content
    {
        padding-top: 15px;
        display: block;
        font-size: 14px;
    }

.fbcombox
{
    margin: 0 auto;
    max-width: 1400px;
}

.layui-m-layer-way .layui-m-layercont
{
    padding: 30px;
}

.waybox
{
}

    .waybox h3
    {
        margin: 0;
        padding: 0;
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 10px;
        height: auto;
    }

    .waybox dl
    {
        display: block;
        font-size: 0;
        margin: 0;
        padding: 0;
    }

        .waybox dl dd
        {
            display: inline-block;
            vertical-align: top;
            width: 50%;
            font-size: 18px;
            padding: 10px;
            box-sizing: border-box;
        }

            .waybox dl dd a
            {
                display: block;
                border-radius: 10px;
                background-color: #f3f3f3;
                box-shadow: 0 0 10px rgba(0,0,0,0.1) inset;
                padding: 20px 0;
                font-weight: bold;
            }

                .waybox dl dd a:hover
                {
                    background-color: #eee;
                }

                .waybox dl dd a img
                {
                    display: block;
                    margin: 0 auto;
                    width: auto;
                    height: 40px;
                    padding-bottom: 10px;
                    padding-left: 10px;
                }

            .waybox dl dd:first-child a svg
            {
                fill: #47c22f;
            }

            .waybox dl dd:first-child a
            {
                color: #16a0b9;
            }

            .waybox dl dd:last-child a svg
            {
                fill: var(--color-main);
            }

            .waybox dl dd:last-child a
            {
                color: #cb3232;
            }

.novelct
{
    display: block;
    text-align: center;
    padding: 40px 80px 0 20px;
    position: fixed;
    left: 50%;
    width: auto;
    box-sizing: border-box;
    opacity: 1;
    z-index: 100;
    margin-left: 472px;
    margin-bottom: -10px
}

    .novelct ul
    {
        display: block;
        background-color: #fff;
        border-radius: 0 10px 10px 0;
        padding: 5px;
        font-size: 0;
    }

        .novelct ul li
        {
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 0px;
        }

            .novelct ul li span,
            .novelct ul li span svg
            {
                display: block;
                width: 100%;
                height: 100%;
            }

                .novelct ul li span svg
                {
                    fill: #666;
                    box-sizing: border-box;
                    padding: 10px;
                }

.emptytxt
{
    font-size: 16px;
    color: #666;
    text-align: left;
}

.pictures
{
    display: block;
    padding-bottom: 30px;
}

    .pictures img
    {
        width: 100%;
        display: block;
    }

.favus
{
    text-align: left;
    margin: 0px auto 0 auto;
    max-width: 1400px;
    padding: 20px 37px 15px 30px;
    position: relative;
}

.favusbox
{
    border: 3px solid #e4e4e4;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 25px 20px 15px 40px;
    min-height: 210px;
    display: block;
    background-color: #fff;
}

.favusboxleft
{
    position: absolute;
    width: 126px;
    height: 184px;
    background: url(/images/default/favus1.png) center no-repeat;
    background-size: contain;
    left: 0;
    bottom: 20px;
    z-index: 1;
}

.favustitle
{
    position: absolute;
    top: 0px;
    left: 60px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    padding: 0 15px;
    height: 32px;
    line-height: 32px;
    box-shadow: 4px 3px 0px rgba(0,0,0,0.05);
    font-weight: bold;
}

    .favustitle::after
    {
        content: "";
        display: block;
        width: 18px;
        height: 13px;
        top: 100%;
        left: 30px;
        margin-top: 0px;
        z-index: 1;
        background: url(/images/default/favus3.png) center no-repeat;
        background-size: contain;
    }

.favusboxright
{
    position: absolute;
    width: 47px;
    height: 101px;
    background: url(/images/default/favus2.png) center no-repeat;
    background-size: contain;
    right: 0;
    bottom: 20px;
    z-index: 1;
}

.favusbox dl
{
    display: inline-block;
    padding: 0 26px;
    border-right: 1px dashed #ccc;
    min-height: 160px;
    vertical-align: top;
}

    .favusbox dl:last-child
    {
        border-right: 0;
    }

    .favusbox dl.fbpagebox
    {
        width: 320px;
        float: left;
        position: relative;
        z-index: 2;
    }

        .favusbox dl.fbpagebox dd
        {
            max-height: 200px;
            overflow: hidden;
        }

    .favusbox dl dd
    {
        text-align: center;
        overflow: hidden;
    }

        .favusbox dl dd img
        {
            max-height: 100px;
            width: auto;
        }

        .favusbox dl dd .favitembox
        {
            display: block;
            width: auto;
            overflow: hidden;
        }

    .favusbox dl dt
    {
        display: block;
        text-align: center;
        font-size: 15px;
        padding: 0 0 10px 0;
        width: 100%;
    }

.favusbox:after
{
    content: "";
    display: block;
    clear: both;
    height: 0;
}

.favusbox span.facebookfavbox
{
    display: block;
    text-align: center;
}

    .favusbox span.facebookfavbox:before
    {
        content: "";
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        background: url(/images/default/Facebook.svg) center no-repeat;
        background-size: contain;
        border: 18px solid transparent;
    }

.favusbox a.googledown
{
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0;
    height: auto;
    display: inline-block;
    margin: 20px auto 0 auto;
    overflow: hidden;
    width: auto;
}

    .favusbox a.googledown img
    {
        display: block;
        width: auto;
        height: auto;
    }

.addthisbox
{
    text-align: center;
    padding: 15px 0 0 0;
}

    .addthisbox .addthis_toolbox
    {
        display: inline-block;
    }

.chapterdownbtn
{
    display: block;
    padding: 50px 0;
    text-align: center;
}

    .chapterdownbtn a, .chapterdownbtn span
    {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding: 0 25px;
        border-radius: 40px;
        background-color: #999;
        color: #fff;
        font-size: 28px;
        transition: all 0.2s;
        font-weight: bold;
    }

        .chapterdownbtn a:hover
        {
            transform: scale(1.04);
        }

        .chapterdownbtn a.nextz
        {
            background-color: var(--color-main)
        }

        .chapterdownbtn span.over
        {
            background-color: var(--color-main-dark)
        }

        .chapterdownbtn span.wait
        {
            background-color: #666;
        }

.artbox
{
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
    text-align: center;
}

    .artbox h1
    {
        display: inline-block;
        padding: 0 0 10px 0;
        border-bottom: 2px solid #999;
        font-size: 20px;
    }

.artcont
{
    text-align: left;
}

    .artcont h2
    {
        font-size: 16px;
        font-weight: bold;
        color: #f60;
        padding: 25px 0 0 0;
        border-top: 1px dashed #ccc;
        margin-top: 25px;
    }

        .artcont h2:first-child
        {
            border-top: 0;
            margin-top: 0;
        }

    .artcont p
    {
        font-size: 14px;
        line-height: 200%;
        padding: 10px 0 0 0;
    }

footer
{
    padding: 20px 0;
    text-align: center;
    background-color: #f3f3f3;
}

.footerform
{
    display: block;
    margin: 0 auto;
    max-width: 1400px;
    font-size: 12px;
}

    .footerform > p
    {
        display: block;
        float: left;
        padding: 0 10px;
    }

.copyrightlink
{
    display: block;
    text-align: center;
    font-size: 0;
    text-align: right;
    width: auto;
    overflow: hidden;
}

    .copyrightlink li
    {
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
        padding: 0 10px;
    }

        .copyrightlink li a:hover
        {
            color: var(--color-main)
        }

.footerform:after
{
    content: "";
    display: block;
    width: auto;
    height: 0;
    clear: both;
}

/*topic*/
.ztbox
{
    display: block;
}

.zthead
{
    width: auto;
    background: #333;
    background-image: linear-gradient(to bottom,#000,#333);
}

.ztheadh1
{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(8deg,#000 0%,rgba(0,0,0,0) 30%);
    left: 0;
    bottom: 0;
}

    .ztheadh1 span
    {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0 0 25px 30px;
        color: #fff;
        font-size: 40px;
    }

.ztheadbox
{
    margin: 0 auto;
    width: 1200px;
    height: auto;
    overflow: hidden;
    position: relative;
}

    .ztheadbox img
    {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: 50% 50%;
        max-height: 400px;
    }

.ztbody
{
    width: auto;
    background: #eee;
    background-image: linear-gradient(to bottom,#eee 0px,#fff 500px)
}

.ztbodybox
{
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    min-height: 500px;
    box-shadow: 0px -50px 40px rgba(0,0,0,0.1);
    box-sizing: border-box;
    padding: 30px;
}

.ztinfobox
{
    display: block;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
    font-size: 0;
}

    .ztinfobox:after
    {
        content: "";
        display: block;
        height: 0;
        width: auto;
        clear: both;
        overflow: hidden;
    }

.ztcont
{
    display: block;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
}

    .ztcont .zimg
    {
        margin-top: 50px;
    }

.ztconttxt
{
    display: block;
    overflow: hidden;
    padding-right: 20px;
    font-size: 1rem;
    line-height: 160%;
}

.ztcont:after
{
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

.ztcont img
{
    max-width: 100%;
}

.ztcont iframe
{
    max-width: 100%;
}

.ztbodybox h1.zth1
{
    font-size: 32px;
    line-height: 120%;
    padding-bottom: 0px;
}

    .ztbodybox h1.zth1 span
    {
        font-size: 70%;
    }

.ztbodybox h2.zth2
{
    font-size: 18px;
    line-height: 120%;
    padding-bottom: 0px;
}

.ztbodybox h3.zth3
{
    font-size: 18px;
    line-height: 120%;
    padding-bottom: 0px;
}

.ztbodybox h4.zth4
{
    font-size: 18px;
    padding: 0 0 15px 5px;
    color: #333;
    font-weight: bold;
}

.ztbodybox p
{
    font-size: 14px;
    line-height: 150%;
    margin: 1rem 0;
    text-indent: 1rem;
}

.ztbodybox a
{
    color: #0099ee;
    text-decoration: underline;
}

    .ztbodybox a:hover
    {
        color: #333;
    }

.zimg
{
    float: right;
    width: auto;
    max-width: 200px;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2)
}

    .zimg img
    {
        display: block;
        width: 100%;
        height: auto;
    }

.ztinfo
{
    display: inline-block;
    padding: 0 0 0px 0;
    overflow: hidden;
    padding-right: 30px;
    vertical-align: top;
    width: 70%;
    box-sizing: border-box;
    font-size: 1rem;
}

    .ztinfo.full
    {
        width: 100%;
    }

.ztinfotxt
{
    padding: 0;
}

.ztinfotxtbtn
{
    display: none;
}

.ztinfotxt p
{
    font-size: 16px;
    line-height: 150%;
}

.ztinfodata
{
    display: inline-block;
    font-size: 0;
    border: 10px solid #eee;
    width: 30%;
    vertical-align: top;
    box-sizing: border-box;
}

    .ztinfodata dl
    {
        display: inline-block;
        width: 100%;
        padding: 0px;
        border-bottom: 1px dashed #ccc;
        font-size: 14px;
        box-sizing: border-box;
        line-height: 120%;
        background-color: #fff;
        background-image: linear-gradient(to right,#f8f8f8 0%,#f8f8f8 30%,#fff 30%);
        line-height: 150%;
    }

        .ztinfodata dl:last-child
        {
            border-bottom: 0;
        }

        .ztinfodata dl dt
        {
            display: block;
            float: left;
            width: 30%;
            padding: 10px;
            box-sizing: border-box;
            color: #666;
            text-align: right;
            height: 120%;
        }

        .ztinfodata dl dd
        {
            display: block;
            overflow: hidden;
            width: 70%;
            padding: 10px;
            box-sizing: border-box;
        }

.ztbodybox h2.zth2
{
    display: inline-block;
    margin-bottom: 15px;
    background-color: var(--color-main);
    padding: 8px 20px 8px 14px;
    border-radius: 30px;
    color: #fff;
    margin-left: -50px;
}

    .ztbodybox h2.zth2:before
    {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        background-color: #fff;
        float: left;
        margin: 3px 13px 0 0;
        border-radius: 50%;
    }

.ztxl, .ztkeyword
{
    border-bottom: 1px dashed #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

    .ztxl a
    {
        text-decoration: none;
    }

    .ztxl .vlist
    {
        padding: 0;
    }

.ztkeyword
{
    text-align: center;
}

    .ztkeyword ul
    {
        display: block;
        font-size: 0;
    }

    .ztkeyword li
    {
        display: inline-block;
        vertical-align: top;
        width: auto;
        margin: 5px 10px 5px 0;
    }

        .ztkeyword li a
        {
            color: #fff;
            background-color: #e96522;
            text-decoration: none;
            height: 50px;
            line-height: 50px;
            padding: 0 25px 0 10px;
            white-space: nowrap;
            font-size: 24px;
            border: 1px solid #cf5f00;
            border-radius: 6px;
            display: block;
            font-weight: bold;
            transition: all 0.2s;
            position: relative;
        }

            .ztkeyword li a:after
            {
                content: "";
                display: block;
                position: absolute;
                right: 10px;
                top: 50%;
                width: 8px;
                height: 8px;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                transform: rotate(45deg);
                margin-top: -3px;
            }

            .ztkeyword li a:hover
            {
                color: #fc0;
                box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
                border-color: var(--color-border)
            }

.ztpoplist
{
    position: fixed;
    top: 420px;
    width: auto;
    font-size: 14px;
    text-align: right;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

    .ztpoplist .ztpoplistbox
    {
        display: block;
        margin: 0 auto;
        max-width: 1680px;
        box-sizing: border-box;
        padding: 0px;
        text-align: right;
    }

    .ztpoplist ul
    {
        display: inline-block;
        text-align: left;
        border-left: 1px solid #ddd;
        padding: 20px 0;
        width: 200px;
    }

    .ztpoplist li
    {
        display: block;
        line-height: 30px;
        position: relative;
        left: -15px;
        margin-bottom: 5px;
        pointer-events: auto;
    }

    .ztpoplist ul li a
    {
        display: inline-block;
        vertical-align: top;
        border: 1px solid #ddd;
        padding: 7px 14px 7px 7px;
        border-radius: 10px;
        line-height: 120%;
        background-color: #fff;
        text-decoration: none;
        font-size: 16px;
        color: #333;
    }

        .ztpoplist ul li a:hover
        {
            color: #0091e5
        }

        .ztpoplist ul li a:before
        {
            content: "";
            display: block;
            float: left;
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 50%;
            background-color: #f3f3f3;
            margin: 3px 6px 0 0;
        }

.ztmaodian
{
    position: relative;
    top: -70px;
}

.ztplist
{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    background-color: #fff;
}

    .ztplist .ztpbg
    {
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: -3%;
        width: 100%;
        height: auto;
    }

        .ztplist .ztpbg img
        {
            display: block;
            width: 106%;
            height: auto;
            filter: blur(10px);
        }

    .ztplist ul li p
    {
        display: block;
        font-size: 14px;
        padding: 0 15px 0px 15px;
        line-height: 20px;
        text-indent: 0px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
        color: #666;
    }

    .ztplist ul
    {
        font-size: 0;
        margin: 0 auto;
        max-width: 1366px;
        padding: 30px 20px 30px 20px;
        position: relative;
        z-index: 1;
        text-align: left;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .ztplist li
    {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        box-sizing: border-box;
        padding: 20px;
    }

        .ztplist li a
        {
            display: block;
            border: 0px solid #ddd;
            background-color: #fff;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            padding: 0px;
            border-radius: 0px;
        }

        .ztplist li h3
        {
            display: block;
            text-align: left;
            font-size: 20px;
            padding: 10px 15px 5px 15px;
            line-height: 120%;
        }

        .ztplist li .imgbox svg
        {
            display: block;
            width: 100%;
            height: auto;
            position: relative;
            z-index: 0;
        }

        .ztplist li .imgbox img
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
            z-index: 1;
            transition: all 0.2s;
        }

        .ztplist li a:hover .imgbox img
        {
            transform: scale(1.05)
        }

        .ztplist li a em
        {
            display: block;
            background-color: #999;
            color: #fff;
            padding: 7px 8px;
            border-radius: 4px;
            line-height: 100%;
            font-size: 12px;
            font-weight: bold;
            font-style: normal;
            margin-right: 15px;
            margin: 0 auto;
            width: 40px;
            text-align: center;
        }

        .ztplist li a:after
        {
            content: "";
            display: block;
            height: 10px;
            clear: both;
        }

        .ztplist li a:hover em
        {
            background-color: var(--color-main)
        }

.topicbanner
{
    display: block;
    width: auto;
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 10px;
}

    .topicbanner ul
    {
        font-size: 0;
        display: block;
    }

        .topicbanner ul li
        {
            display: inline-block;
            vertical-align: top;
            width: 33.33%;
            box-sizing: border-box;
            padding: 10px;
        }

            .topicbanner ul li a
            {
                display: block;
                border: 1px solid #ddd;
                border-radius: 0px;
                overflow: hidden;
                background-color: #fff;
                transition: all 0.2s;
            }

                .topicbanner ul li a:hover
                {
                    box-shadow: 0 4px 15px rgba(0,0,0,0.1)
                }

                    .topicbanner ul li a:hover h3
                    {
                        color: var(--color-main)
                    }

                .topicbanner ul li a h3
                {
                    display: block;
                    padding: 15px;
                    text-align: left;
                    font-size: 16px;
                    position: relative;
                    line-height: 100%;
                }

                    .topicbanner ul li a h3:after
                    {
                        content: "";
                        display: block;
                        width: 6px;
                        height: 6px;
                        border-top: 2px solid #ccc;
                        border-right: 2px solid #ccc;
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        margin-top: -4px;
                        transform: rotate(45deg)
                    }

@media screen and (max-width:1024px)
{
    .ztbodybox
    {
        padding-right: 30px;
        width: auto;
        padding: 20px;
    }

    .ztpoplist
    {
        display: none;
    }

    .ztbodybox h2.zth2
    {
        margin-left: 0;
        font-size: 16px;
    }

        .ztbodybox h2.zth2:before
        {
            margin-right: 10px;
        }

    .ztheadbox
    {
        height: auto;
        width: auto;
    }

        .ztheadbox img
        {
            width: 100%;
            margin-left: 0%;
        }

            .ztheadbox img.w
            {
                width: 150%;
                margin-left: -25%;
            }

    .zimg
    {
        width: 160px;
    }

    .ztplist li
    {
        width: 50%;
        padding: 10px;
    }

        .ztplist li a
        {
            padding: 0px;
        }

    .ztinfo
    {
        width: 100%;
        padding: 0;
    }

    .ztinfodata
    {
        width: 100%;
    }

    .ztxl, .ztkeyword
    {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

        .ztkeyword li a
        {
            font-size: 14px;
        }

    .topicbanner ul li a h3
    {
        padding: 10px;
    }
}

@keyframes topicbanner
{
    0%
    {
        transform: translateX(0)
    }

    30%
    {
        transform: translateX(0%)
    }

    33%
    {
        transform: translateX(-33.33%)
    }

    63%
    {
        transform: translateX(-33.33%)
    }

    66%
    {
        transform: translateX(-66.66%)
    }

    96%
    {
        transform: translateX(-66.66%)
    }

    100%
    {
        transform: translateX(0%)
    }
}

@media screen and (max-width:767px)
{

    .novelcontent
    {
        overflow-x: hidden;
    }

    .topicbanner
    {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0;
        border-left: 10px solid #fff;
        border-right: 10px solid #fff;
    }

        .topicbanner ul
        {
            width: 300%;
            animation: topicbanner 10s linear infinite;
        }

            .topicbanner ul li
            {
                padding: 0;
            }

    .ztheadh1
    {
        background-image: linear-gradient( 8deg,#000 0%,rgba(0,0,0,0) 50%);
    }

        .ztheadh1 span
        {
            font-size: 20px;
            padding: 0 0 10px 15px;
        }

    .ztplist
    {
        padding-top: 50px;
    }

        .ztplist ul
        {
            padding: 0px 0px;
        }

        .ztplist li
        {
            width: 100%;
        }

    .ztbodybox
    {
        padding: 15px 15px 15px 15px;
    }

    .ztpoplist
    {
        display: none;
    }

    .ztbodybox h2.zth2
    {
        margin-left: 0;
        background-color: transparent;
        color: var(--color-main);
        height: auto;
        padding: 0 0 10px 0;
        margin-bottom: 0;
    }

        .ztbodybox h2.zth2:before
        {
            margin-right: 10px;
            background-color: var(--color-main)
        }

    .ztheadbox
    {
        height: auto;
    }

    .zimg
    {
        max-width: 40%;
        float: left;
        margin: 0 10px 10px 0;
        clear: left;
    }

    .ztcont .zimg
    {
        margin: 0 15px 10px 0;
    }

    .ztconttxt
    {
        display: inline;
        padding: 0;
    }

    .ztinfo
    {
        padding-right: 0px;
        display: inline;
    }

    .ztxl .nlist.novel
    {
        margin: 0 -10px;
    }

    .ztinfodata
    {
        clear: both;
    }

    .ztbodybox h2.zth2
    {
        display: block;
        float: left;
        clear: both;
        position: relative;
        top: 0;
        left: 0;
        font-size: 18px;
    }

    .ztinfobox
    {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .ztcont
    {
        padding-bottom: 15px;
        margin-bottom: 15px;
        padding-top: 0px;
        position: relative;
    }

    .ztinfotxt
    {
        height: 120px;
        overflow: hidden;
    }

    .ztinfotxtbtn
    {
        display: block;
        height: 50px;
        text-align: center;
        position: relative;
    }

        .ztinfotxtbtn em
        {
            display: inline-block;
            border: 1px solid #ddd;
            border-radius: 30px;
            padding: 5px 15px;
            background-color: #fff;
            z-index: 2;
            position: relative;
            vertical-align: top;
            top: 0px;
            color: #666;
            font-size: 12px;
            font-style: normal;
            display: none;
            font-weight: bold;
        }

        .ztinfotxtbtn span
        {
            display: inline-block;
            border: 1px solid #ddd;
            border-radius: 30px;
            padding: 5px 15px;
            background-color: #fff;
            z-index: 2;
            position: relative;
            vertical-align: top;
            top: 0px;
            color: #666;
            font-size: 12px;
            font-weight: bold;
        }

        .ztinfotxtbtn:after
        {
            content: "";
            display: block;
            width: 100%;
            height: 100px;
            background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 80%);
            left: 0;
            top: -85px;
            z-index: 1;
            position: absolute;
            border-bottom: 1px dashed #ccc;
        }

    .ztinfo.open .ztinfotxt
    {
        height: auto;
        overflow: visible;
    }

    .ztinfo.open .ztinfotxtbtn span
    {
        display: none;
    }

    .ztinfo.open .ztinfotxtbtn em
    {
        display: inline-block
    }

    .ztinfo.open .ztinfotxtbtn:after
    {
        background-image: unset;
    }
}
/*topicend*/

/*1400px*/
@media screen and (max-width:1400px)
{
}
/*1100px*/
@media screen and (max-width:1200px)
{
    .twocat .rankbox dl
    {
        width: 50%;
    }

    .novelct
    {
        margin-left: 0;
        width: 100%;
        left: 0;
        margin-bottom: -23px;
        z-index: 4;
    }

    body.black .novelct ul
    {
        opacity: 0.8;
    }

    .novelct ul
    {
        display: inline-block;
        padding: 0;
        border: 1px solid #ddd;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -5px 5px rgba(0,0,0,0.05)
    }

        .novelct ul li
        {
            display: inline-block;
            margin: 0 10px;
        }

    .bookbody > h1
    {
        padding-right: 0;
    }

    header ul li a img
    {
        display: none;
    }

    .tagnav ul li
    {
        width: 33.33%;
    }

    .flist li
    {
        width: 50%;
    }

    .vlist li
    {
        width: 20%;
    }

    .vlist.novel li
    {
        width: 20%;
    }

    .nlist.novel li
    {
        width: 50%;
    }

    .bookbody
    {
        border-right: 0;
    }

    header ul li a:before
    {
        display: none;
    }
}
/*900px*/
@media screen and (max-width:900px)
{
    .filterbox ul li a
    {
        padding: 0 10px;
    }

    .favus
    {
        padding: 20px 20px 15px 20px;
        overflow: hidden;
    }

    .favusbox
    {
        padding: 30px 10px 0 30px;
    }

    .favusboxleft
    {
        left: -20px;
    }

    .favusboxright
    {
        right: -17px;
    }

    .favustitle
    {
        top: 3px;
        left: 50px;
    }

    .favusbox dl.android dt
    {
        max-width: 160px;
        line-height: 16px;
        height: 32px;
    }

    .favusbox dl
    {
        padding: 0 15px;
    }

        .favusbox dl.fbpagebox
        {
            width: 260px;
        }

    .favusbox a.googledown
    {
        width: 160px;
    }

        .favusbox a.googledown img
        {
            width: 100%;
        }

    .rating-stars input
    {
        font-size: 22px;
    }

    .rating-stars .rating-stars-container .rating-star
    {
        margin: 0 2px 0 0;
    }

    .authorheadbox
    {
        padding: 0 20px;
    }

    .flist li
    {
        width: 50%;
    }

    .filterbox
    {
        padding: 20px 10px;
    }

    .open18
    {
        margin-right: 10px;
    }

    .fqabox
    {
        padding: 10px;
    }

    .chapterlist li a > span
    {
        top: 5px;
        right: 5px;
    }

    .sitegg
    {
        border-color: #fff;
    }

    .wscreen
    {
        padding: 0;
    }

    .pcshow
    {
        display: none;
    }

    .tagnav ul li span
    {
        font-size: 14px;
    }

    .headfav
    {
        height: 98px;
        display: block;
        width: 100%;
        position: relative;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 0px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: var(--color-main);
    }

    body.showheadfav
    {
        padding-top: 98px;
    }

        body.showheadfav header
        {
            top: 98px;
        }

    .headfav .wtxt
    {
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        height: 28px;
        line-height: 28px;
        padding: 10px 0 10px 0px;
        white-space: nowrap;
        color: #fff;
    }

        .headfav .wtxt span.facebookfavbox
        {
            display: inline-block;
            width: 154px;
            height: 28px;
            vertical-align: top;
            overflow: hidden;
            padding: 0;
            line-height: 28px;
            margin-left: 15px;
        }

            .headfav .wtxt span.facebookfavbox *
            {
                vertical-align: top;
            }

    .headfav .wbtn
    {
        display: flex;
        font-size: 0;
        justify-content: space-between;
        height: 40px;
        padding: 0 45px 10px 5px;
        overflow: hidden;
    }

        .headfav .wbtn > a, .headfav .wbtn > span
        {
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            flex-grow: 1;
            color: #fff;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            margin: 0 5px;
            background-color: rgba(0,0,0,0.06);
            border-radius: 50px;
            text-align: center;
        }

        .headfav .wbtn img, .headfav .wbtn svg
        {
            display: inline-block;
            vertical-align: top;
            height: 40px;
            width: auto;
            box-sizing: border-box;
            fill: #fff;
            padding: 8px 0;
            margin-right: 10px;
        }

    .recommendlist .hlist li
    {
        width: 33.33%
    }

    header ul li a img
    {
        display: none;
    }
    /*.headuser b span { display: none; }*/
    .vlist li
    {
        width: 33.33%
    }

    .vlist.novel li
    {
        width: 33.33%
    }

    .hlist li
    {
        width: 50%;
    }

    .tagnav
    {
        padding: 10px;
    }

        .tagnav .tagnavdl dd
        {
            display: none;
        }

        .tagnav .tagnavdl dt
        {
            display: block;
            width: 100%;
            float: none;
            width: 100%;
            border-radius: 7px;
        }

    .headnav .tagnav .tagnavdl dt
    {
        border-radius: 7px;
    }

    .tagnav .tagnavdl dl
    {
        display: block;
        width: 100%;
        height: 100%;
    }

    .catebox
    {
        z-index: unset;
    }

        .catebox .tagnav .tagnavdl dl
        {
            position: relative;
            box-sizing: border-box;
            padding-right: 0px;
        }

            .catebox .tagnav .tagnavdl dl:hover, .catebox .tagnav .tagnavdl dl:hover dd
            {
                position: relative;
                background-color: unset;
                border-radius: 0;
            }

            .catebox .tagnav .tagnavdl dl ul
            {
                height: auto;
                padding: 0;
            }

        .catebox .tagnav
        {
            padding: 10px 5px;
        }

        .catebox .tagnavdl
        {
            height: auto;
        }

            .catebox .tagnavdl dl
            {
                padding-right: 30px;
            }

            .catebox .tagnavdl dt
            {
                height: 40px;
                line-height: 40px;
            }

        .catebox .tagnav dt a
        {
            line-height: 40px;
        }

    .tagnav .tagnavdl:nth-child(3) dl dt a em
    {
        padding-top: 12px;
        font-size: 11px;
        line-height: 11px;
    }

    body .catebox .tagnav .tagnavdl dt.mobilebtn
    {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0%;
        right: 0;
        border-radius: 0 10px 10px 0;
        background-color: transparent;
        z-index: 0;
    }

    .catebox .tagnav dt a b
    {
        padding-right: 20px;
    }

        .catebox .tagnav dt a b:after
        {
            display: none;
        }

    body .catebox .tagnav .tagnavdl dt.mobilebtn svg
    {
        display: block;
        width: 24px;
        height: 100%;
        fill: rgba(255,255,255,0.5);
        box-sizing: border-box;
        float: right;
    }

    .catebox .tagnavdl.sel
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        background-color: rgba(0,0,0,0.95);
        padding: 10px 10px 60px 10px;
        border: 0;
    }

    .twocat .catebox .tagnavdl.sel
    {
        width: 100%;
    }

    .catebox span.mobilebtn.close
    {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 10px;
        margin-left: -20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #999;
        color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 37px;
    }

    .catebox .tagnavdl.sel span.mobilebtn.close
    {
        display: block;
    }

    .catebox .tagnavdl.sel dl dt
    {
        display: none;
    }

    .catebox .tagnavdl.sel dl
    {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0;
    }

        .catebox .tagnavdl.sel dl dd
        {
            display: block;
            height: auto;
            border-radius: 0;
            background-color: unset;
        }

    body.opencatebox
    {
        height: 100%;
    }

    .catebox .tagnav .tagnavdl.sel dl dd li
    {
        height: 40px;
        line-height: 40px;
        min-width: 33.33%;
        margin-bottom: 5px;
    }

        .catebox .tagnav .tagnavdl.sel dl dd li:first-child
        {
            width: 100%;
            background-position-x: 98%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
        }

            .catebox .tagnav .tagnavdl.sel dl dd li:first-child a
            {
                text-align: center;
            }

        .catebox .tagnav .tagnavdl.sel dl dd li a
        {
            display: block;
            background-color: #222;
            position: relative;
        }

            .catebox .tagnav .tagnavdl.sel dl dd li a:hover
            {
                color: #fff;
            }

            .catebox .tagnav .tagnavdl.sel dl dd li a:active
            {
                background-color: #111;
            }

            .catebox .tagnav .tagnavdl.sel dl dd li a:after
            {
                content: "";
                display: block;
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                right: 5px;
                background: url(/images/default/righta.svg) center no-repeat;
                background-size: 80%;
                margin-top: -10px;
                opacity: 0.6;
            }

        .catebox .tagnav .tagnavdl.sel dl dd li:first-child a:after
        {
            display: inline-block;
            vertical-align: middle;
            position: unset;
            top: auto;
            right: auto;
            margin-top: -3px;
        }
}
/*767px*/
@media screen and (max-width:767px)
{

    .bookbody > h1
    {
        padding-right: 0;
    }

    .favus
    {
        padding: 20px 10px 10px 10px;
        overflow: hidden;
    }

    .favusbox dl.android dt
    {
        max-width: unset;
        height: unset;
        font-size: 14px;
    }

    .favusbox dl.fbpagebox
    {
        width: 100%;
        float: none;
    }

    .favusbox dl
    {
        display: block;
        width: 100%;
        border: 0;
        padding: 10px 0 10px 0;
        min-height: unset;
        display: inline-block;
        box-sizing: border-box;
        border-bottom: 1px dashed #ccc;
    }

        .favusbox dl:last-child
        {
            border: 0;
        }

        .favusbox dl.android
        {
        }

            .favusbox dl.android:last-child
            {
                border: 0;
            }

    .favustitle
    {
        left: 35px;
    }

    .favusbox
    {
        padding: 15px 10px 10px 10px;
        font-size: 0;
    }

        .favusbox a.googledown
        {
            margin-top: 0;
        }

    .favusboxleft
    {
        left: -35px;
        bottom: auto;
        top: 40px;
        transform: scale(0.8);
        transform-origin: top;
    }

    .favusboxright
    {
        display: none;
    }

    .favusbox dl dt
    {
        padding: 0 10px 5px 10px;
        box-sizing: border-box;
    }

    .favusbox dl.fbpagebox dt
    {
        padding-left: 20px;
    }

    .chapterlist li a
    {
        padding: 5px 20px 5px 5px;
    }

    .addthisbox
    {
        text-align: left;
        padding-left: 5px;
    }

    .loadani
    {
        transform: scale(0.8)
    }

    .qiandaotxt
    {
        bottom: 10px;
    }

    .novelct
    {
        padding: 20px 0 0 0;
        z-index: 4;
    }

        .novelct ul
        {
            position: relative;
            top: -11px;
            display: block;
            width: 100%;
            border-radius: 0;
            box-shadow: 0 -3px 3px rgba(0,0,0,0.05);
            border: 0px;
            border-block: 1px solid #eee;
        }

            .novelct ul li
            {
                width: 20%;
                margin: 0;
                height: 36px;
            }

                .novelct ul li span svg
                {
                    padding: 8px;
                }
    /*.layui-m-layer-laypopchap .layui-m-layercont { padding: 10px; }
    .layui-m-layer0 .layui-m-layerchild.layui-m-layer-laypopchap { width: auto; }*/
    .popchapbox
    {
        padding-left: 0;
        border-top: 90px solid transparent;
    }

    .layui-m-layer-laypopchap .chaptitle
    {
        width: 100%;
        height: 40px;
        top: -95px;
    }

    .layui-m-layer-laypopchap .chapterPage
    {
        width: 100%;
        height: 48px;
        top: -5px;
        white-space: nowrap;
        overflow-x: auto
    }

        .layui-m-layer-laypopchap .chapterPage::-webkit-scrollbar
        {
            display: none;
        }

        .layui-m-layer-laypopchap .chapterPage li
        {
            width: auto;
            display: inline-block;
            vertical-align: top;
            padding: 0 15px;
            min-width: unset;
            font-size: 0.8rem;
        }

    .authorheadbox
    {
        height: 130px;
        line-height: 130px;
        padding: 0 15px;
        position: relative;
    }

    .authorhead .face
    {
        height: 100px;
        margin: 15px 0;
        width: 100px;
    }

        .authorhead .face img
        {
            border: 0;
        }

    .authorhead .info
    {
        padding: 0 0 0 15px;
    }

        .authorhead .info h1
        {
            font-size: 18px;
            padding: 0 0 10px 0;
            line-height: 20px;
        }

        .authorhead .info .score
        {
            font-size: 18px;
            line-height: 20px;
        }

        .authorhead .info .btn
        {
            padding: 10px 0 0 0;
            line-height: 30px;
            height: 30px;
        }

            .authorhead .info .btn a
            {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
            }

                .authorhead .info .btn a.selected:before
                {
                    height: 30px;
                }

    .authorbox .filterbox
    {
        text-align: right;
        padding-top: 10px;
    }

        .authorbox .filterbox .l
        {
            float: left;
        }

        .authorbox .filterbox .r
        {
            display: inline-block;
            padding-top: 0;
        }

            .authorbox .filterbox .r ul
            {
                margin: 0;
            }

        .authorbox .filterbox .l .pagenav a
        {
            height: 36px;
            line-height: 30px;
            font-size: 14px;
        }

    .layui-m-layer-popfqa .layui-m-layercont
    {
        text-align: left;
        padding: 15px;
    }

        .layui-m-layer-popfqa .layui-m-layercont content
        {
            padding-top: 10px;
            display: block;
            font-size: 14px;
        }

    .catebox .tagnav .tagnavdl.sel dl dd li
    {
        min-width: 50%;
    }

    .catebox .tagnav dt a
    {
        font-size: 14px;
        line-height: 40px;
    }

    .tagnav dt a
    {
        font-size: 20px;
    }

    .nlist li, .nlist.novel li
    {
        width: 100%;
    }

    .catebox .tagnavdl.sel dl dd li
    {
        height: 40px;
        line-height: 40px;
        min-width: 50%;
    }

    .layui-m-layer-popsearch .layui-m-layercont
    {
        box-sizing: border-box;
        padding: 15px 15px 65px 15px;
    }

    .layui-m-layersection .layui-m-layerchild.layui-m-layer-popsearch.layui-m-anim-up
    {
        height: 100%;
        width: 100%;
        border: 0;
        border-radius: 0;
    }

    .pagebody
    {
        min-height: 100%;
    }

    body
    {
        background-color: #fff;
    }

        body.opensearchbox
        {
            height: 100%;
            overflow: hidden;
        }

            body.opensearchbox .layui-m-layermain,
            body.opensearchbox .layui-m-layersection,
            body.opensearchbox .layui-m-layersection .layui-m-layerchild.layui-m-layer-popsearch.layui-m-anim-up
            {
                height: 100%;
                overflow: hidden;
                display: block;
            }

            body.opensearchbox .layui-m-layer-popsearch .layui-m-layercont
            {
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
            }

    .headback
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 50px;
        display: block;
    }

        .headback svg
        {
            display: block;
            width: 100%;
            height: 100%;
            fill: #ccc;
            box-sizing: border-box;
            padding: 7px;
        }

    .userpage
    {
        padding-bottom: 0px;
        background-color: #fff;
        margin: 0 auto;
        border: 0;
        border-radius: 0;
        min-height: 100%;
    }

    .userpageback
    {
        display: none;
    }

    .main
    {
        padding: 50px 0px 0px 0px;
        background-color: unset;
    }

    .headerbox
    {
        text-align: left;
        padding-left: 45px;
        transition: position 0.3s,padding 0.3s;
        height: 50px;
    }

    .headsearch
    {
        line-height: 50px;
        font-size: 0;
        margin-left: 10px;
    }

    header .logo .headsearch svg
    {
        width: 34px;
        margin: 8px 0 0 0;
    }

    header .logo svg
    {
        height: 50px;
        width: 20px;
    }

    header
    {
        height: 50px;
    }

        header .logo
        {
            position: relative;
            padding: 0;
            height: 50px;
            line-height: 50px;
            font-size: 0px;
        }

        header .lock
        {
            left: auto;
            right: 15px;
            height: 50px;
            line-height: 50px;
            padding: 0
        }

        header ul
        {
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: #fff;
            z-index: 10;
            text-align: center;
            justify-content: space-between;
            border-top: 1px solid #eee;
            margin: 0;
            padding: 0;
            flex-flow: nowrap;
            padding-bottom: 0px;
        }

            header ul li
            {
                width: 20%;
                font-size: 13px;
                font-weight: normal;
                flex-grow: 1;
            }

                header ul li:hover
                {
                    background-color: unset;
                }

                header ul li a
                {
                    position: relative;
                    display: block;
                    font-size: 12px;
                    color: #333;
                    line-height: 150%;
                    padding: 0;
                    cursor: pointer;
                }

                    header ul li a span
                    {
                        display: block;
                        cursor: pointer;
                    }

                    header ul li a:hover
                    {
                        margin-top: 0px;
                        transform: scale(1);
                        background-color: var(--color-main);
                        color: #fff;
                    }

                header ul li.nowreading a:hover
                {
                    background-color: #eee;
                }

                header ul li.nowreading a
                {
                    display: block;
                    width: 60px;
                    height: 100%;
                    background-size: auto;
                }

                    header ul li.nowreading a img
                    {
                        display: inline-block;
                        width: 50px;
                        max-height: 100%;
                        height: 50px;
                        opacity: 1;
                        margin: 0;
                        padding: 0;
                        vertical-align: middle;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin: -25px auto auto -25px;
                    }

    html.ink header ul li.nowreading a img
    {
        display: none;
    }

    html.ink header ul li.nowreading a
    {
        display: block;
        width: 60px;
        height: 100%;
        background: url(/images/default/nowloading.gif) center no-repeat;
        background-size: auto;
    }

    header ul li a:active
    {
    }

    header ul li a:before
    {
        height: 24px;
        top: 8px;
        width: 24px;
        left: 50%;
        margin-left: -12px;
        display: inline-block;
    }

    header ul li a img
    {
        height: 24px;
        margin: 0 0 2px 0;
        padding-top: 8px;
        width: 24px;
        display: inline-block
    }

    header ul li.navnovel
    {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0 auto 0 48%;
        width: auto;
        height: 50px;
    }

        header ul li.navnovel a
        {
            line-height: 50px;
            height: 50px;
            padding: 0 10px;
        }

            header ul li.navnovel a:before
            {
                top: 0;
                height: 100%;
                left: 10px;
                margin-left: 0;
            }

            header ul li.navnovel a img
            {
                display: inline-block;
                margin: 0 5px 0 0;
                width: 22px;
                height: 100%;
                padding: 0;
            }

            header ul li.navnovel a span
            {
                display: inline;
                margin: 0;
                padding: 0;
                font-size: 15px;
            }

    .headright
    {
        height: 50px;
        line-height: 50px;
    }
    /*.headuser b span { display: none; }*/
    .lcrbox
    {
    }

        .lcrbox > div
        {
            position: relative;
            clear: none;
            width: auto;
            float: none;
            display: block
        }

        .lcrbox.index
        {
            padding: 0;
        }

            .lcrbox.index .c
            {
                width: auto;
                padding: 0;
                border-radius: 0;
            }

            .lcrbox.index .l
            {
                position: relative;
                width: auto;
            }

            .lcrbox.index .r
            {
                position: relative;
                width: auto;
            }

    .unsliderbox
    {
        border-radius: 0;
        padding: 0;
    }

    .inav ul li
    {
        display: inline-block;
        width: 25%;
        padding: 0;
        vertical-align: top;
        box-shadow: none;
        line-height: 150%;
    }

        .inav ul li a
        {
            padding: 10px 0;
            font-size: 14px;
            box-shadow: none;
            text-align: center;
            border: 0;
        }

    .xm
    {
        position: relative;
    }

    .inav li img
    {
        width: 30px;
        height: 30px;
    }

    .hlist li
    {
        width: 100%;
        margin-bottom: 15px;
    }

    .vlist li
    {
        width: 50%;
    }

    .vlist.novel li
    {
        width: 33.33%;
    }

    .freelist .vlist li
    {
        width: 50%;
    }

    .recommendlist .hlist li
    {
        width: 100%;
    }

    .hlist .imgbox img
    {
        position: relative;
    }

        .hlist .imgbox img.imgmask
        {
            display: none;
        }

    .hlist li .listdata
    {
        bottom: 2px;
    }

        .hlist li .listdata span
        {
            color: #999;
        }

    .vlist li .name
    {
        font-size: 16px;
    }

    .vlist li .listdata
    {
        margin-top: 2px;
    }

    .pagetitle
    {
        padding: 10px 0 5px 10px;
        font-size: 18px;
        box-sizing: border-box;
    }

        .pagetitle a
        {
            top: 10px;
            font-size: 12px;
        }

    .searchbox .pagetitle a
    {
        top: 17px;
        right: 0;
    }

    .vlist li .listdata span
    {
        font-size: 11px;
    }

    .indexbanner
    {
        padding: 20px 0 0 0;
    }

        .indexbanner > div
        {
            width: 90%;
            margin: 0 auto;
        }

        .indexbanner ul
        {
            width: 100%;
        }

            .indexbanner ul li
            {
                width: 100%;
            }

                .indexbanner ul li h4
                {
                    font-size: 18px;
                }

    .headnav
    {
        padding: 0;
    }

    .loading img
    {
        width: 100px;
        margin-left: -50px;
    }

    .recommendlist
    {
        padding-top: 10px;
    }

        .recommendlist .hlist li .name
        {
            font-size: 18px;
            padding: 8px 0 4px 0;
        }

        .recommendlist .hlist li .desc
        {
            padding: 0;
            height: auto;
        }

    .userpage .listbox
    {
        padding-top: 15px;
    }

    .qiandaotitle
    {
        font-size: 12px;
    }

    .qiandaoli ul li
    {
        font-size: 12px;
    }

        .qiandaoli ul li span
        {
            font-size: 14px;
        }

    .EN .qiandaoli ul li span
    {
        font-size: 8px;
    }

    .userhead
    {
        border-radius: 0;
    }

    .username
    {
        font-size: 16px;
    }

    .mylist li
    {
        padding: 15px 0;
    }

    .mylist.nopadding li
    {
        padding: 0;
    }

    .mylist.paddingli li
    {
        padding: 15px 0;
    }

    .mylist li .daytask
    {
        padding: 0px 0;
    }

    .mylist li a
    {
        display: block;
        padding: 15px 0;
    }

    .mylist li .popright a
    {
        padding: 0 10px;
    }

    .mylist li.usergender
    {
        height: 40px;
        line-height: 40px;
    }

    .twocat .rankbox
    {
        text-align: left;
    }

    .rankbox
    {
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

        .rankbox dl, .twocat .rankbox dl
        {
            width: 33.33%;
        }

            .rankbox dl dt
            {
                padding: 15px 0;
                font-size: 20px;
            }

            .rankbox dl dd
            {
                width: 300%;
                box-sizing: border-box;
                position: relative;
                transition: all 0.3s;
            }

        .rankbox dt.now
        {
            color: var(--color-main);
            font-weight: bold;
        }

        .rankbox dd.d1, .rankbox dd.d101
        {
            left: 0;
            padding: 15px 10px 15px 10px;
        }

        .rankbox dd.d2, .rankbox dd.d102
        {
            left: 200%;
        }

        .rankbox dd.d3, .rankbox dd.d103
        {
            left: 100%;
        }

        .rankbox dl dd ul
        {
            font-size: 0;
        }

            .rankbox dl dd ul li
            {
                padding: 10px 10px 10px 10px;
                width: 50%;
                display: inline-block;
                box-sizing: border-box;
            }

    .filterbox
    {
        text-align: left;
        padding: 7px 5px 5px 5px;
        height: auto;
        position: relative;
    }

        .filterbox ul
        {
            display: inline-block;
            border-radius: 5px;
            margin: 0 5px 5px 0;
        }

            .filterbox ul.select18
            {
                position: absolute;
                top: 9px;
                right: 5px;
            }

                .filterbox ul.select18 li
                {
                    height: 36px;
                    box-shadow: none;
                }

            .filterbox ul li
            {
                height: 36px;
            }

                .filterbox ul li a
                {
                    height: 34px;
                    line-height: 34px;
                    padding: 0 8px;
                }

                    .filterbox ul li a.cur:after
                    {
                        display: none;
                    }

        .filterbox .l, .filterbox .r
        {
            float: none;
            display: block;
            padding: 8px 5px 0 5px;
        }

        .filterbox .l
        {
            padding: 0 5px;
        }

        .filterbox.myfilter
        {
            padding: 15px 5px 10px 5px;
        }

    .rankbox dl dt
    {
        display: none;
    }

        .rankbox dl dt.mobiledt
        {
            display: block;
        }

    .twocat .rankbox dl dt.mobiledt
    {
        display: block;
        position: relative;
        left: 50%;
    }

    .rankbox dl
    {
        padding: 0;
    }
    /*.headuser b a { font-size: 12px; border: 2px solid var(--color-border) }*/
    .bookbox
    {
        padding: 0px;
        margin-bottom: 0;
    }

    .bookinfo
    {
        padding: 15px 15px 15px 15px!important;
        text-align:center;
    }

    .bookbox .title
    {
        line-height: 30px;
    }

        .bookbox .title b
        {
            font-size: 24px;
            display: block;
            margin: 0 0px 5px 0;
            line-height: 28px;
        }

    html.novel .bookbox .title b
    {
        display: block;
        margin: 0 0 5px 0;
    }

    .bookbox .data
    {
        padding: 5px 0;
    }

    .bookbox .title span
    {
        margin-right: 5px;
        margin-left: 0;
        vertical-align: top;
    }

    .bookbox .funbtn
    {
        text-align: left;
        position: relative;
        left: auto;
        margin: 0 -15px -15px -15px;
        clear: both;
        width: auto;
        overflow: visible;
        padding: 40px 0px 0px 0px;
        background-color: unset;
    }

        .bookbox .funbtn .l a
        {
            font-size: 14px;
            padding: 8px 10px;
            min-width: 60px;
            margin-right: 5px;
        }

        .bookbox .funbtn .l span.goloading
        {
            font-size: 16px;
            padding: 8px 15px;
        }

        .bookbox .funbtn .l
        {
            padding-bottom: 0px;
            background-color: #fff;
            padding: 10px;
            float: none;
            display: block;
        }

        .bookbox .funbtn .r
        {
            float: none;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            background-color: rgba(0,0,0,0.6);
            padding: 0;
        }

    .bookbox .cover
    {
        border-bottom: 0px solid transparent;
        width: auto;
        height: 200px;
        top: 0;
        left: 0;float:none;display:inline-block;
    }

        .bookbox .cover .status
        {
            padding-bottom: 4px;
            z-index: 2
        }

        .bookbox .cover img
        {
            display: block;
            height: auto;
            width: 100%;
            position: relative;
            z-index: 0;
            height: 100%;
            object-position: 50% 50%;
            object-fit: contain;
        }

        .bookbox .cover:after
        {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
            background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));
            z-index: 1
        }

    .bookbox .title, .bookbox .data, .bookbox .shortinfo, .bookbox .desc
    {
        padding-left: 0;
    }

    .chaptitle
    {
        padding: 10px 0;
        height: auto;
        font-size: 18px;
        text-align: center;
    }

    .chapterPage
    {
        padding-left: 0;
        display: block;
        font-size: 0;
        margin-top: 5px;
    }

    .chaplistpop .chapterPage
    {
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }

    .chapterPage li
    {
        width: 25%;
        font-size: 18px;
        text-align: center;
        border-bottom: 2px solid #f6f6f6;
        margin: 0;
        padding: 5px 0;
    }

    .chaplistpop .chapterPage li
    {
        padding: 0;
        font-size: 16px;
    }

    .chaplist
    {
        border-width: 1px 0;
    }

    .bookmenulist
    {
        display: block;
        padding: 0;
        position: relative;
    }

        .bookmenulist button
        {
            display: block;
            width: 100%;
            border: 0;
            background: #fff;
            padding: 8px 8px 8px 30px;
            position: relative;
            height: 51px;
            box-sizing: border-box;
            border-bottom: 1px solid #ddd;
            text-align: left;
            font-size: 16px;
            cursor: pointer;
        }

            .bookmenulist button:hover
            {
                background-color: #f6f6f6;
            }

            .bookmenulist button svg
            {
                display: block;
                width: 20px;
                height: 20px;
                top: 50%;
                margin-top: -10px;
                left: 5px;
                fill: #ccc;
                position: absolute;
            }

    .curchap
    {
        margin-bottom: 0;
    }

        .curchap a
        {
            display: block;
            padding: 8px 20px 8px 30px;
            white-space: nowrap;
            border: 0;
            border-block: 1px solid #ddd;
            height: 52px;
            box-sizing: border-box;
        }

            .curchap a svg
            {
                position: absolute;
                top: 50%;
                margin-top: -10px;
                left: 5px;
                width: 20px;
                height: 20px;
            }

            .curchap a em
            {
                display: inline-block;
                font-size: 11px;
                margin: 0 5px 0 0;
            }

            .curchap a .lastchap span:last-child
            {
                padding-left: 0;
                position: absolute;
                top: 50%;
                right: 25px;
                margin-top: -15px;
                opacity: 0.5;
                display: inline;
            }

        .curchap .lastchap
        {
            display: inline-block;
            padding: 0px;
            width: auto;
            white-space: normal;
            font-size: 14px;
            white-space: nowrap;
        }

        .curchap a .lastchap span
        {
            max-width: 175px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: top
        }

        .curchap a:after, .bookmenulist button:after
        {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-top: 2px solid #ccc;
            border-right: 2px solid #ccc;
            transform: rotate(45deg);
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -6px;
        }

        .curchap a:before
        {
            display: none;
        }

    .rating-stars
    {
        text-align: left;
        position: relative;
        padding-right: 10px;
        padding-left: 10px;
        display: inline-block;
        vertical-align: top;
        justify-content: space-between;
        flex-grow: 1;
        display: block;
        vertical-align: top;
        float: left;
    }

    .ratingbtn
    {
        display: block;
        width: auto;
        overflow: hidden;
        float: right;
        padding: 0 5px 0 0;
    }

        .ratingbtn button
        {
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
            font-size: 12px;
            padding: 0 5px;
        }

    html.ZH .ratingbtn button
    {
        font-size: 14px;
    }

    .rating-stars input
    {
        text-align: center;
        background: none;
        border: 0;
        font-size: 16px;
        position: absolute;
        top: 0;
        right: 0;
        height: 40px;
        line-height: 40px;
    }

    .rating-stars .rating-stars-container
    {
        display: inline-block;
        width: auto;
        vertical-align: top;
        flex-grow: 1;
        white-space: nowrap;
        flex-wrap: nowrap;
        text-align: center;
    }

    .ratingpop .rating-stars
    {
        display: block;
        text-align: center;
        float: none;
    }

        .ratingpop .rating-stars .rating-stars-container .rating-star
        {
            width: 10%;
            height: auto;
            padding: 0;
            border: 1px solid #fff !important;
        }

        .ratingpop .rating-stars .rating-stars-container
        {
            display: block;
        }

            .ratingpop .rating-stars .rating-stars-container .rating-star svg
            {
                width: 100%;
                height: auto;
                box-sizing: border-box;
                padding: 3px;
                border-radius: 50%;
                fill: #ccc;
            }

    .rating-stars .rating-stars-container .rating-star
    {
        margin: 0;
        background-color: unset;
        width: 20px;
    }

        .rating-stars .rating-stars-container .rating-star.is--active
        {
            color: #ffaab8;
            background-color: unset
        }

    .ratingpop .rating-stars .rating-stars-container .rating-star.is--active svg
    {
        background-color: #fff4e3;
        border: 1px solid #f90;
        fill: #f90;
    }

    .rating-stars .rating-stars-container .rating-star.is--hover
    {
        color: #ffaab8;
        background-color: unset;
        border: 0px;
        background-color: #fff4e3;
        border: 1px solid #f60;
    }

    .rating-stars .rating-stars-container .rating-star.is--no-hover
    {
        color: #fff;
    }

    .rating-stars input
    {
        font-size: 16px;
        position: relative;
        display: inline-block;
        width: 45px;
    }

    .ratingbtn
    {
        padding: 0 10px 0 0;
    }

    .bookbox .desc
    {
        height: auto;
        max-height: 100px;
        overflow: auto;
        padding-bottom: 15px;
        font-size: 13px;
        line-height: 16px;text-align:left;
    }

    .indexbanner .leftbtn
    {
        margin-left: 0;
        left: -10px;
        opacity: 1;
    }

    .indexbanner .rightbtn
    {
        margin-left: 0;
        right: -10px;
        left: auto;
        opacity: 1;
    }

    .page
    {
        display: none;
    }

        .page ul li
        {
            margin-bottom: 5px;
            border-radius: 0;
            margin-right: 5px;
            border: 1px solid #eee;
        }

    .loadmore
    {
        display: block;
        text-align: center;
        padding: 10px 0 100px 0;
        color: #666;
        margin-bottom: 0px;
    }

        .loadmore button
        {
            display: inline-block;
            border: 0;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            border-radius: 50px;
            background-color: #eee;
            color: #333;
        }

    .funbtn.funinfo
    {
        margin: 0;
        padding: 10px;
    }

    .emptytxt
    {
        text-align: center;
        color: #fc0
    }

    .catetabbox h3
    {
        padding-left: 10px;
        float: left;
    }

    .catetabbox
    {
        text-align: right;
    }

        .catetabbox ul
        {
            padding-left: 0;
        }

            .catetabbox ul li
            {
                margin: 0 25px 0 0;
            }

    .nocoin .buybtn,
    .nocoin .buybtn
    {
        position: unset;
        padding-top: 10px;
    }

    .nocoin .sharebtn,
    .nocoin .sharebtn
    {
        position: unset;
        text-align: center;
        width: 100%;
        padding: 10px 0 0 0;
        font-size: 14px;
    }

        .nocoin .sharebtn button
        {
            font-size: 14px;
        }

    footer
    {
        padding: 15px 0 120px 0;
        background-color: #f6f6f6;
    }

    .footerform > p
    {
        display: block;
        float: none;
        padding: 0 0 10px 0;
    }

    .copyrightlink
    {
        text-align: center;
    }
}
/*600px*/

@media screen and (max-width:767px)
{
    .flist li
    {
        width: 100%;
    }

        .flist li .flistbox
        {
            border: 1px solid #eee;
            padding: 10px;
        }

        .flist li button.del
        {
            top: 1px;
            right: 6px;
        }

        .flist li .info
        {
            padding-left: 10px;
        }

        .flist li h3
        {
            height: 26px;
            -webkit-line-clamp: 1;
            font-size: 16px;
        }

        .flist li .listdata div span,
        .flist li .listdata > div a em
        {
            font-size: 12px;
        }

    .flist .flistbox .infobtn
    {
        position: absolute;
        right: 15px;
        bottom: 20px;
        width: auto;font-size:0;
    }
    .flist .flistbox .infobtn button {
        display:inline-block;vertical-align:bottom;border:0px;background:#f60;border-radius:8px;color:#fff;padding:0px 10px;height:30px;line-height:30px;margin-left:8px;
    }
    .flist .flistbox .infobtn button:active {background:#999}
    .bookinfo
    {
        padding-top: 345px;
        overflow: hidden;
    }

    .bookbox .cover
    {
        height: 340px;
    }

    .addthis_toolbox
    {
        padding-left: 0px;
        margin-top: 20px;
    }

    .chapterPage
    {
        margin-top: 5px;
    }

    .nlist.novel
    {
        padding: 0;
    }

    .ztbodybox h4.zth4
    {
        padding: 0 0 5px 0;
    }
}

@media screen and (max-width:700px)
{
    .bookinfo
    {
        padding-top: 325px;
    }

    .bookbox .cover
    {
        height: 320px;
    }
}

@media screen and (max-width:660px)
{

    .bookinfo
    {
        padding-top: 285px;
    }

    .bookbox .cover
    {
        height: 280px;
    }
}

@media screen and (max-width:560px)
{

    .bookinfo
    {
        padding-top: 255px;
    }

    .bookbox .cover
    {
        height: 250px;
    }
}
/*420px*/
@media screen and (max-width:420px)
{
    .novelcontent
    {
    }

    .nocoin
    {
        margin: 0 25px 10px 25px;
    }

    .bookbody .pagetitle
    {
        padding-left: 25px;
        padding-bottom: 0px;
    }

    .bookbody .nlist.novel, .bookbody .vlist
    {
        padding: 5px 15px 15px 15px;
    }

    .bookbody .whitebox .nlist.novel
    {
        padding: 5px 5px 5px 5px;
    }

    .bookinfo
    {
        padding-top: 215px;
    }

    .bookbox .cover
    {
        height: 210px;
    }

    .novelct ul
    {
        top: -16px;
    }
}

@media screen and (max-width:380px)
{
    .layui-m-layer0 .layui-m-layer-laypopchap
    {
        width: 350px;
    }

    .bookinfo
    {
        padding: 10px;
        padding-top: 195px;
    }

    .bookbox .cover
    {
        height: 190px;
    }

    .mylist
    {
        padding: 0 10px;
    }

        .mylist.nopadding li
        {
            font-size: 13px;
        }
}

@media screen and (max-width:360px)
{
    .rating-stars .rating-stars-container .rating-star
    {
        width: 18px;
    }

    .ratingbtn button
    {
        font-size: 12px;
        padding: 0 6px;
    }
}

@media screen and (max-width:320px)
{
    .chapterPage li
    {
        width: 33.33%;
    }

    .filterbox ul li a
    {
        padding: 0 5px;
    }

    .mylist li a
    {
        padding: 10px 0;
    }

    .mylist li b.userTip
    {
        position: absolute;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }

    .userface
    {
        top: 5%;
        left: 2%;
        border-width: 5px;
    }

    .userinfos
    {
        left: 23%;
    }

    .mylist.nopadding li
    {
        font-size: 12px;
    }

    .username
    {
        font-size: 13px;
        padding-bottom: 3px;
    }

    .uservip
    {
        font-size: 11px;
    }

    .qiandaotxt
    {
        bottom: 5px;
    }

    .loadani
    {
        transform: scale(0.6)
    }

    header ul li.navnovel
    {
        margin-left: 35%;
    }

    .layui-m-layer0 .layui-m-layer-laypopchap
    {
        width: 290px;
    }

    .novelcontent
    {
    }

    .nocoin
    {
        margin: 0 15px 10px 15px;
        padding: 15px;
    }

    .bookbody .pagetitle
    {
        padding-left: 15px;
        padding-bottom: 0;
    }

    .bookbody .nlist.novel
    {
        padding: 0 5px 5px 5px;
    }

    .nocoin .buybtn
    {
        position: relative;
        top: auto;
    }

    .nocoin .sharebtn
    {
        position: relative;
        top: auto;
    }

        .nocoin .buybtn button, .nocoin .sharebtn button
        {
            padding: 0 15px;
        }

    .bookinfo
    {
        padding-top: 165px;
    }

    .bookbox .cover
    {
        height: 160px;
    }

    .filterbox ul li a,
    .duihuanstep div,
    .duihuanlist .item-right
    {
        font-size: 12px;
    }

    .duihuanstep div
    {
        line-height: 120%;
    }

    .rating-stars
    {
        overflow: unset;
    }

        .rating-stars .rating-stars-container
        {
            justify-content: space-between;
        }

            .rating-stars .rating-stars-container .rating-star
            {
                width: 17px;
            }

        .rating-stars input
        {
            font-size: 12px;
            width: 30px;
            position: absolute;
            left: 177px;
        }
}

@media screen and (max-width:320px)
{
    header ul li a
    {
        font-size: 10px;
    }

    .loginbox p
    {
        font-size: 12px;
        line-height: 120%;
    }

    .layui-m-layer-popfqa .layui-m-layercont content
    {
        padding-top: 10px;
        display: block;
        font-size: 12px;
    }

    .headfav .wtxt
    {
        font-size: 12px;
    }

        .headfav .wtxt span.facebookfavbox
        {
            margin-left: 5px;
        }

    header .logo .logoimg
    {
        display: none;
    }

    .headsearch
    {
        margin-left: 0;
    }

    header .logo .headsearch svg
    {
        margin: 8px 0 0 0;
        width: 34px;
    }
}

/*chapter*/
.iapics
{
    max-width: 800px;
    margin: 0px auto;
    font-size: 0;
}

    .iapics img
    {
        padding: 0px;
        margin: 0px;
        width: 100%;
        font-size: 0;
    }

a.picnext
{
    display: block;
    width: 150px;
    height: auto;
    border-radius: 100px;
    background-color: #ccc;
    border: 10px solid transparent;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    padding: 0px 0;
    text-align: center;
    margin: 0 auto;
}

    a.picnext img
    {
        display: inline-block;
        vertical-align: top;
        height: 30px;
        width: auto;
        margin-right: 10px;
    }

.picnexta
{
    padding: 20px 0;
}

    .picnexta span
    {
        display: block;
        width: 150px;
        height: auto;
        border-radius: 100px;
        background-color: #fff;
        border: 10px solid transparent;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        padding: 0px 0;
        text-align: center;
        margin: 0 auto;
    }

.footer
{
    position: fixed;
    left: 50%;
    top: 80px;
    padding: 20px;
    box-sizing: border-box;
    margin-left: 452px;
    z-index: 3;
}

.footerbox
{
    margin: 0 auto;
    border-radius: 0 15px 15px 0;
    background-color: #fff;
    box-shadow: 8px 0 8px rgba(0,0,0,0.1);
    border-left: 0px solid #eee;
}

.footer ul
{
    display: block;
    height: auto;
    width: auto;
    overflow: hidden; /**/
    display: block;
    border-radius: 0 15px 15px 0;
    min-width: 80px;
}

    .footer ul li
    {
        display: block;
        vertical-align: top;
        font-size: 18px;
        font-weight: bold;
        height: auto;
        overflow: hidden;
        border-radius: 0px;
        box-sizing: border-box;
        border: 0px solid #fff;
        border-bottom: 1px solid #eee;
        border-left: 0px solid #eee;
    }

        .footer ul li:last-child
        {
            border-bottom: 0;
        }

        .footer ul li a
        {
            color: #000;
            display: block;
            height: auto;
            line-height: 20px;
            padding: 10px 10px;
            transition: all 0.2s;
            font-weight: normal;
            text-align: center;
            background-color: #fff;
            font-size: 14px;
            position: relative;
        }

            .footer ul li a:before
            {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                left: 0;
                height: 25px;
            }

        .footer ul li.startp a:before
        {
            background: var(--backimg-startp);
            background-size: auto 100%;
        }

        .footer ul li.prep a:before
        {
            background: var(--backimg-prep);
            background-size: auto 100%;
        }

        .footer ul li.nextp a:before
        {
            background: var(--backimg-nextp);
            background-size: auto 100%;
        }

        .footer ul li.pagep a:before
        {
            background: var(--backimg-pagep);
            background-size: auto 100%;
        }

        .footer ul li.sharep a:before
        {
            background: var(--backimg-sharep);
            background-size: auto 100%;
        }

        .footer ul li a[url=none]
        {
            opacity: 0.2;
            pointer-events: none;
        }

        .footer ul li a img
        {
            display: block;
            width: auto;
            height: 25px;
            margin: 0 auto 3px auto;
            opacity: 0;
        }

        .footer ul li a:hover
        {
            transform: scale(1);
            color: #fff;
            background-color: var(--color-main)
        }

        .footer ul li a[url=none]
        {
            transform: scale(1);
            color: #000;
            background-color: #fff;
        }

@media screen and (max-width:1200px)
{
    .footer
    {
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        margin: 0;
        padding: 0px;
    }

    .footerbox
    {
        box-shadow: 0 0 10px rgba(0,0,0,.2); /*max-width: 980px;*/
        margin: 0 auto;
        border-radius: unset;
        overflow: hidden;
    }

    .footer ul
    {
        border-radius: 0px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

        .footer ul li
        {
            display: inline-block;
            flex-grow: 1;
            border-right: 1px solid #f3f3f3;
            border-bottom: 0;
            border-left: 0;
        }

            .footer ul li:last-child
            {
                border-right: 0;
            }

            .footer ul li a
            {
                padding: 10px 10px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
            }

                .footer ul li a img
                {
                    display: inline-block;
                    height: 30px;
                    width: 20px;
                    vertical-align: top;
                    margin-right: 3px;
                }
}

@media screen and (max-width:1200px) and (min-width:768px)
{
    .footer ul li a img
    {
        display: none;
    }

    .footer ul li a:before
    {
        width: 20px;
        height: 100%;
        position: relative;
        left: unset;
        top: unset;
        vertical-align: top;
        display: inline-block;
        background-size: 100% auto !important;
        margin-right: 5px;
    }
}

@media screen and (max-width:767px)
{
    .footer
    {
        padding: 0;
    }

    .footerbox
    {
        border-radius: 0;
    }

    .footer ul
    {
        border-radius: 0;
    }

        .footer ul li a
        {
            padding: 8px 0 5px 0;
            height: auto;
            line-height: 16px;
            font-size: 12px;
            display: block;
            height: 100%;
            box-sizing: border-box;
        }

            .footer ul li a img
            {
                display: block;
                margin: 0 auto 3px auto;
                width: 26px;
                height: 26px;
            }
}

/*language*/
html.JP body, html.JP .chapterlist li a h3
{
    font-size: 14px;
}

html.JP header ul li,
html.JP .rankbox dl dd h3
{
    font-size: 15px;
}

html.JP .pagetitle,
html.JP.catetabbox h3
{
    font-size: 18px;
}

    html.JP .pagetitle a,
    html.JP .footer ul li a,
    html.JP .myyqm dl dd.myyqmbtn button,
    html.JP .myyqm dl dd input
    {
        font-size: 12px;
    }

html.JP .chapterlist li a
{
    padding-bottom: 25px;
}

    html.JP .chapterlist li a > span
    {
        right: auto;
        left: 5px;
        top: auto;
        bottom: 5px;
    }
/*html.JP .tagnav dt a em {padding-top:8px;}
html.JP .tagnav .tagnavdl:nth-child(3) dl dt a em {padding-top:10px;font-size:13px;line-height:100%;}
html.JP .catebox .tagnav .tagnavdl:nth-child(3) dl dt a em {padding-top:3px;font-size:11px;line-height:100%;}
html.JP .catebox .tagnav dt a em {font-size:11px;padding-top:3px;line-height:100%;}
*/
html.JP .qiandaotitle
{
    line-height: 110%;
    width: 80%;
    left: 9%;
    bottom: 115%;
    height: auto;
}

html.JP .qiandaotxt
{
    padding: 0;
    text-align: center;
}

html.JP .favus span, html.EN .favus span
{
    line-height: 110%;
    padding: 0 10px 10px 10px;
}

html.EN body, html.EN .chapterlist li a h3
{
    font-size: 14px;
}

html.EN header ul li,
html.EN .rankbox dl dd h3
{
    font-size: 14px;
}

html.EN .pagetitle,
html.EN.catetabbox h3
{
    font-size: 18px;
}

    html.EN .pagetitle a,
    html.EN .footer ul li a,
    html.EN .qiandaotitle,
    html.EN .myyqm dl dd.myyqmbtn button,
    html.EN .myyqm dl dd input
    {
        font-size: 12px;
    }

html.EN .chapterlist li a
{
    padding-bottom: 25px;
}

    html.EN .chapterlist li a > span
    {
        right: auto;
        left: 5px;
        top: auto;
        bottom: 5px;
    }

html.EN .vlist li .cover span em,
html.EN .status em
{
    left: 0;
    top: 24px;
    font-size: 10px;
}

html.EN .vlist li .cover span,
html.EN .status
{
    padding-bottom: 28px;
    font-size: 10px;
}

    html.EN .vlist li .cover span.adult
    {
        padding-bottom: 4px;
    }

html.EN .hlist .status
{
    padding-bottom: 4px;
}

html.EN .bookbox .cover .status
{
    padding-bottom: 4px;
}

html .catebox .tagnav, html.JP .catebox .tagnav
{
    height: auto;
}

html .tagnav, html.JP .tagnav
{
    height: auto;
}

html .tagnavdl, html.JP .tagnavdl
{
    height: auto;
}

html .tagnav .tagnavdl dl dt, html.JP .tagnav .tagnavdl dl dt
{
    padding-left: 0px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    width: auto;
    border-radius: 10px 10px 0 0;
    float: none;
    margin: 0 auto;
}

html .tagnav dt a b, html.JP .tagnav dt a b
{
    height: 30px;
    line-height: 30px;
    border-radius: 0;
    padding: 0 10px 0 8px;
    background-color: rgba(0,0,0,0.4);
    font-size: 14px;
}

html .tagnav ul li, .tagnav ul li span, html.JP .tagnav ul li, .tagnav ul li span
{
    font-size: 12px;
}

html .tagnav .tagnavdl dl dt.mobilebtn, html.JP .tagnav .tagnavdl dl dt.mobilebtn
{
    padding-left: 0;
}

html .tagnav .tagnavdl dd, html.JP .tagnav .tagnavdl dd
{
    width: 100%;
    clear: both;
    border-radius: 0 0 10px 10px;
}

html .tagnav dt a em, html.JP .tagnav dt a em
{
    white-space: nowrap;
    width: auto;
    position: relative;
    top: auto;
    left: auto;
    height: 30px;
    text-align: center;
    width: auto;
    transform-origin: left top;
    padding: 0 8px 0 10px;
    line-height: 30px;
    margin: 0;
}

html .catebox .tagnav dt a em, html.JP .catebox .tagnav dt a em
{
    width: auto;
    top: 0px;
    font-size: 12px;
}

html .tagnav .tagnavdl:nth-child(3) dl dt a em, html.JP .tagnav .tagnavdl:nth-child(3) dl dt a em
{
    padding-top: 0;
}

html.JP .loginbox p, html.EN .loginbox p
{
    max-width: 300px;
    text-align: left;
    margin: 0 auto;
}

@media screen and (max-width:900px)
{
    html .catebox .tagnav .tagnavdl dl:hover dd, html.JP .catebox .tagnav .tagnavdl dl:hover dd
    {
        border-radius: 0 0 10px 10px;
        max-height: none;
        height: auto;
    }

    html .tagnav dl, html.JP .tagnav dl
    {
        padding-top: 0px;
        border-radius: 5px;
    }

    html .tagnav .tagnavdl dl dt, html.JP .tagnav .tagnavdl dl dt
    {
        border-radius: 7px;
        overflow: hidden;
        height: auto;
    }

        html .tagnav .tagnavdl dl dt.mobilebtn, html.JP .tagnav .tagnavdl dl dt.mobilebtn
        {
            width: 100%;
        }

            html .tagnav .tagnavdl dl dt.mobilebtn svg, html.JP .tagnav .tagnavdl dl dt.mobilebtn svg
            {
                width: 26px;
                float: right;
                height: 30px;
            }

    html .tagnav dt a em, html.JP .tagnav dt a em
    {
        background-color: rgba(0,0,0,0.5);
        display: block;
        width: 100%;
        height: 16px;
        line-height: 16px;
        position: relative;
        top: 0;
        left: 0;
        font-size: 11px;
        color: rgba(255,255,255,0.6);
    }

    html .tagnav .tagnavdl:nth-child(3) dl dt a em, html.JP .tagnav .tagnavdl:nth-child(3) dl dt a em
    {
        line-height: 16px;
    }

    html .catebox .tagnav .tagnavdl dl dt a em, html.JP .catebox .tagnav .tagnavdl:nth-child(3) dl dt a em
    {
        line-height: 30px;
        height: 30px;
    }
}

@media screen and (max-width:767px)
{
    html.EN .bookbox .title b
    {
        font-size: 18px;
        line-height: 120%;
    }

    html.JP .pagetitle, html.JP.catetabbox h3, html.JP .catetabbox h3, html.JP .catetabbox ul li, html, JP .curchap a
    {
        font-size: 14px;
    }

        html.EN.catetabbox h3, html.EN .catetabbox h3, html.EN .catetabbox ul li, html, EN .curchap a
        {
            font-size: 14px;
        }

            html.EN .footer ul li a
            {
                font-size: 11px;
            }

            html.JP .bookbox .funbtn .l a,
            html.EN .bookbox .funbtn .l a
            {
                margin: 3px;
            }

            html.JP .bookbox .funbtn .l,
            html.EN .bookbox .funbtn .l
            {
                padding: 7px;
            }

            html .tagnav dt a em, html.JP .tagnav dt a em
            {
                font-size: 10px;
                color: rgba(255,255,255,0.6);
                line-height: 16px;
                height: 16px;
            }

            html .catebox .tagnav .tagnavdl dl dt a em, html.JP .tagnav dt a em
            {
                height: 16px;
                line-height: 16px;
            }

            html .tagnav .tagnavdl:nth-child(3) dl dt a em, html.JP .tagnav .tagnavdl:nth-child(3) dl dt a em
            {
                font-size: 10px;
                line-height: 16px;
                height: 16px;
            }

            html .tagnav dt a b, html.JP .tagnav dt a b
            {
                background-color: rgba(0,0,0,0.2);
                font-size: 12px;
            }

            html .catebox .tagnav dt a em, html.JP .catebox .tagnav dt a em
            {
                width: 100%;
                font-size: 10px;
            }

            html .catebox .tagnav .tagnavdl dl dt b, html.JP .catebox .tagnav .tagnavdl dl dt b
            {
                padding-right: 22px;
            }

            html .tagnav .tagnavdl dl dt.mobilebtn, html.JP .tagnav .tagnavdl dl dt.mobilebtn
            {
                top: auto;
                bottom: 0;
                height: 100%;
            }

                html .tagnav .tagnavdl dl dt.mobilebtn svg, html.JP .tagnav .tagnavdl dl dt.mobilebtn svg
                {
                    padding-top: 16px;
                }

            html.EN .filterbox ul li a
            {
                padding: 0 8px;
            }
}

@media screen and (max-width:320px)
{
    html.JP .qiandaotitle, html.JP .filterbox ul li a
    {
        font-size: 11px;
    }

    html.JP .mylist.nopadding li
    {
        font-size: 11px;
    }

    html.EN .footer ul li a
    {
        font-size: 10px;
    }

    html .tagnav dt a b, html.JP .tagnav dt a b, html.JP .pagenav a, html.EN .pagenav a
    {
        font-size: 12px;
    }

    html .tagnav .tagnavdl dl dt.mobilebtn svg, html.JP .tagnav .tagnavdl dl dt.mobilebtn svg
    {
        width: 20px;
    }

    html .catebox .tagnav .tagnavdl dl dt b, html.JP .catebox .tagnav .tagnavdl dl dt b
    {
        padding-right: 20px;
    }
}



.adholder
{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
}

    .adholder h5
    {
        font-weight: normal;
        padding: 0;
        font-size: 20px;
        text-align: center;
        margin: 0;
        background-color: #ded;
        height: 40px;
        line-height: 40px;
    }


.gotoapp
{
    display: block;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.3)
}

    .gotoapp > span
    {
        display: block;
        font-size: 18px;
        color: var(--color-main);
        padding-bottom: 10px;
        font-weight: bold;
    }

    .gotoapp > h3
    {
        font-size: 16px;
        padding-bottom: 10px;
    }

        .gotoapp > h3 b
        {
            display: inline-block;
            margin: 0 5px;
            padding: 5px 8px;
            background-color: #f6f6f6;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1) inset;
            color: var(--color-main);
        }

    .gotoapp .setupbox
    {
        display: block;
    }
    /*.gotoapp .setupbox a { display: block; border: 2px solid #ddd; border-radius: 12px 12px 0 0; box-shadow: 0 4px 5px rgba(0,0,0,0.1); padding: 10px 10px 18px 10px; background-image: linear-gradient(to bottom, #fff, #f3f3f3); box-shadow: 0 0 3px #fff; border-width: 2px 2px 0 2px; }
            .gotoapp .setupbox a > span { display: block; text-align: center; font-style: normal; font-size: 14px; padding: 0 0 10px 0; min-height: 80px; font-size: 0; }
                .gotoapp .setupbox a > span em { display: inline-block; vertical-align: middle; line-height: 22px; font-style: normal; font-size: 18px; }
            .gotoapp .setupbox a img.applogo { display: inline-block; width: 66px; height: auto; vertical-align: middle; margin: 10px; border-radius: 10px; }
            .gotoapp .setupbox a img.googlelogo { display: inline-block; width: auto; height: auto; vertical-align: middle; max-width: 100%; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 12px; }*/
    .gotoapp .surprise
    {
        display: block;
        padding: 10px 10px 15px 10px;
        border-radius: 0 0 12px 12px;
        border-width: 0;
        border-color: #ddd;
        border-style: solid;
        background-color: var(--color-main);
        color: #fff;
        background-image: linear-gradient(to bottom,#ba55be,#9b2e8f);
        font-size: 0;
    }

        .gotoapp .surprise span
        {
            display: inline-block;
            font-size: 12px;
            margin: 0px;
            height: 20px;
            line-height: 20px;
            vertical-align: top;
        }

            .gotoapp .surprise span.yzm
            {
                padding: 0;
                font-size: 14px;
            }

            .gotoapp .surprise span b
            {
                background-color: rgba(0,0,0,0.5);
                color: #fc0;
                padding: 0px 8px;
                margin-left: 4px;
                position: relative;
                font-size: 16px;
                padding-right: 30px;
                line-height: 30px;
                display: inline-block;
                vertical-align: top;
                -webkit-touch-callout: all;
                -webkit-user-select: all;
                -moz-user-select: all;
                -ms-user-select: all;
                user-select: all;
            }

                .gotoapp .surprise span b input
                {
                    display: block;
                    width: 80px;
                    height: 30px;
                    border: 0;
                    background-color: transparent;
                    text-align: center;
                    color: #fc0;
                    font-size: 18px;
                }

                .gotoapp .surprise span b i
                {
                    position: absolute;
                    top: 50%;
                    right: 5px;
                    width: 18px;
                    height: 18px;
                    margin: -9px auto auto auto;
                }

                    .gotoapp .surprise span b i svg
                    {
                        display: block;
                        width: 18px;
                        height: 18px;
                        fill: #fc0;
                    }

            .gotoapp .surprise span.jt
            {
                width: 20px;
                height: 20px;
                position: relative;
            }

                .gotoapp .surprise span.jt:before
                {
                    content: "";
                    display: block;
                    width: 5px;
                    height: 5px;
                    border-width: 2px 2px 0 0;
                    border-color: #fc0;
                    border-style: solid;
                    transform: rotate(45deg);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -4px auto auto -4px;
                }

        .gotoapp .surprise div
        {
            height: auto;
            line-height: 30px;
            padding-top: 10px;
        }

            .gotoapp .surprise div span
            {
                line-height: 30px;
                height: 30px;
                vertical-align: middle;
            }

    .gotoapp a.gohome
    {
        display: inline-block;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        padding: 5px;
        margin-top: 10px;
    }

        .gotoapp a.gohome img
        {
            display: inline-block;
            height: 16px;
            vertical-align: top;
            margin-right: 3px;
        }

    .gotoapp.fixed
    {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: 76px;
        padding: 0;
        border-bottom: 1px solid #ccc;
        z-index: 4;
    }

        .gotoapp.fixed.nofixed
        {
            position: relative;
            top: auto;
            left: auto;
            z-index: unset;
            box-shadow: unset;
            border-block: 1px solid #ccc;
        }

        .gotoapp.fixed > h3
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 23px;
            line-height: 26px;
            font-size: 12px;
            z-index: 1;
            white-space: nowrap;
            padding: 0;
            background-color: #f3f3f3;
            background-image: linear-gradient(to bottom,#f3f3f3,#fff);
        }

            .gotoapp.fixed > h3 b
            {
                line-height: 18px;
                border: 0;
                padding: 0px;
                border-bottom: 1px solid var(--color-main);
                background: unset;
                box-shadow: none;
            }

        .gotoapp.fixed .setupbox
        {
            padding-top: 23px;
            margin: 0 auto;
        }

            .gotoapp.fixed .setupbox .setupboxf
            {
                border: 0;
                border-radius: 0;
                margin: 0;
                padding: 10px 10px 10px 44px;
                position: relative;
                height: 36px;
                overflow: hidden;
                z-index: 0;
                background: unset;
                text-align: left;
                display: inline-block;
            }
                /*.gotoapp.fixed .setupbox .setupboxf a {display:inline-block;vertical-align:top;border:0;padding:0;background:unset;height:36px;width:118px;margin-left:10px;transition:all 0.2s;}
    .gotoapp.fixed .setupbox .setupboxf a:hover {transform:scale(1.05)}*/
                .gotoapp.fixed .setupbox .setupboxf > span
                {
                    text-align: left;
                    min-height: unset;
                    padding: 0;
                    height: 34px;
                    line-height: 34px;
                }

                .gotoapp.fixed .setupbox .setupboxf img.applogo
                {
                    width: 36px;
                    height: 36px;
                    margin: 0px;
                    border-radius: 6px;
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                }

                .gotoapp.fixed .setupbox .setupboxf img.googlelogo
                {
                    position: relative;
                    height: 36px;
                    width: 120px;
                    border-radius: 6px;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                    object-fit: cover;
                    object-position: 50% 50%;
                    display: inline-block;
                    vertical-align: top;
                    box-sizing: border-box;
                    border: 1px solid #fff;
                }

                .gotoapp.fixed .setupbox .setupboxf > span em
                {
                    font-size: 14px;
                    line-height: 18px;
                    font-style: normal;
                    display: inline-block;
                    height: 36px;
                    vertical-align: top;
                    padding: 0 10px;
                    color: #000;
                }

.gotoappform
{
    display: block;
    height: 77px;
}

    .gotoappform.noh3
    {
        height: 54px;
    }

        .gotoappform.noh3 .gotoapp
        {
            height: 53px;
        }

        .gotoappform.noh3 h3
        {
            display: none;
        }

        .gotoappform.noh3 .gotoapp.fixed .setupbox
        {
            padding-top: 0px;
        }

.gofindbtn
{
    display: block;
    height: 54px;
    line-height: 54px;
    font-size: 0;
    color: #fff;
    display: block;
    text-align: left;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 500px;
}

.gofindbtnbutton
{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    padding: 0 20px 0 10px;
    position: relative;
}

.gofindbtn:after
{
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transform: rotate(45deg);
    right: 5px;
    top: 50%;
    margin-top: -4px;
}

.gofindbtn span
{
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 55px;
    position: absolute;
    left: -10px;
}

    .gofindbtn span:nth-child(1)
    {
        z-index: 2;
    }

    .gofindbtn span:nth-child(2)
    {
        z-index: 1;
        left: 8px;
    }

    .gofindbtn span:nth-child(3)
    {
        z-index: 0
    }

    .gofindbtn span svg
    {
        display: block;
        width: 30px;
        height: 100%;
        fill: #fff;
    }

    .gofindbtn span:nth-child(1) svg
    {
        width: 35px;
    }

.gofindbtn b
{
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 18px;
    color: #000;
    width: auto;
    position: absolute;
    top: 50%;
    left: 0;
    padding: 0 10px 0 43px;
    margin-top: -16px;
}

@media screen and (min-width:768px)
{
    .gofindbtn
    {
        max-width: unset;
        text-align: center;
        position: relative;
    }

        .gofindbtn span
        {
            position: absolute;
            left: auto;
            width: 20px;
        }

            .gofindbtn span:nth-child(2)
            {
                left: unset;
                margin-left: 20px;
            }

        .gofindbtn b
        {
            position: relative;
            top: auto;
            margin-top: 0;
            width: auto;
            padding: 0 0 0 58px;
            font-size: 15px;
            text-align: left;
        }

        .gofindbtn:after
        {
            right: -10px;
        }

    .logingoapp .gofindbtn > span
    {
        position: absolute;
    }

        .logingoapp .gofindbtn > span.fb
        {
        }

    .logingoapp .gofindbtn b
    {
        width: auto;
        overflow: hidden;
        text-align: left;
        padding: 0 20px 0 55px;
    }

    .logingoapp .gofindbtn:after
    {
        right: 5px;
    }
}

@media screen and (max-width:767px)
{
    .gofindbtn b
    {
        padding-left: 65px;
    }

    html.ZH .gofindbtn b
    {
        font-size: 14px;
    }

    html.ZH .logingoapp .gofindbtn b
    {
        padding-left: 70px;
        line-height: 22px;
    }

    .gofindbtn span
    {
        left: 0;
        margin-left: 10px;
    }

        .gofindbtn span:nth-child(2)
        {
            left: 0;
            margin-left: 30px;
        }

    html.JP .gofindbtn b
    {
        font-size: 14px;
    }

    html.EN .gofindbtn b
    {
        font-size: 14px;
    }
}

@media screen and (max-width:375px)
{
    html.EN .gofindbtn b
    {
        padding-left: 12px;
        padding-right: 12px;
    }

    html.EN .gofindbtn span
    {
        display: none;
    }

    html.JP .gofindbtn b
    {
        font-size: 13px;
    }
}

@media screen and (max-width:359px)
{
    .gofindbtn b
    {
        font-size: 11px;
        padding: 0 8px 0 10px;
    }

    html.ZH .gofindbtn b
    {
        padding-left: 60px;
        padding-right: 12px;
    }

    html.JP .gofindbtn b
    {
        font-size: 12px;
        padding-left: 60px;
    }

    .gofindbtn span
    {
        z-index: 0;
        opacity: 0;
        left: 5px;
    }

        .gofindbtn span:nth-child(2)
        {
            left: 45px;
        }

    html.ZH .gofindbtn span,
    html.JP .gofindbtn span
    {
        opacity: 1;
        left: -4px;
    }

        html.ZH .gofindbtn span:nth-child(2),
        html.JP .gofindbtn span:nth-child(2)
        {
            left: -5px;
        }
}

@media screen and (max-width:328px)
{
    html.EN .gofindbtn b,
    html.JP .gofindbtn b
    {
        padding-left: 10px;
        padding-right: 18px;
    }

    html.EN .gofindbtn b
    {
        font-size: 13px;
    }

    html.JP .gofindbtn span
    {
        display: none;
    }

    html.ZH .logingoapp .gofindbtn b
    {
        padding: 0px 15px 0 10px;
        line-height: 22px;
    }
}

.loginline
{
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    width: auto;
    line-height: 30px;
    background-color: #00c300;
    color: #fff;
    font-size: 14px;
    padding: 0 8px 0 0;
    border-radius: 4px;
}

    .loginline svg
    {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        padding: 3px;
        box-sizing: border-box;
        margin-right: 4px;
        border-right: 1px solid rgba(0,0,0,0.08);
    }

.loginmsg
{
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    width: auto;
    line-height: 30px;
    background-color: #336eb7;
    background-image: linear-gradient(to right,#336eb7 0%,#9c519b 60%,#e96767 100%);
    color: #fff;
    font-size: 14px;
    padding: 0 8px 0 0;
    border-radius: 4px;
}

    .loginmsg svg
    {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        padding: 3px;
        box-sizing: border-box;
        border-right: 1px solid rgba(0,0,0,0.1);
        margin-right: 4px;
    }

.loginfb
{
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    width: auto;
    line-height: 30px;
    background-color: #1877F2;
    color: #fff;
    font-size: 14px;
    padding: 0 8px 0 0;
    border-radius: 4px;
}

    .loginfb svg
    {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        padding: 4px;
        box-sizing: border-box;
        border-right: 1px solid rgba(0,0,0,0.1);
        margin-right: 4px;
    }

.nlogin
{
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    width: auto;
    line-height: 30px;
    background-color: var(--color-main);
    color: #fff;
    font-size: 14px;
    padding: 0 8px 0 0;
    border-radius: 4px;
}

    .nlogin svg
    {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        padding: 5px;
        box-sizing: border-box;
        margin-right: 4px;
        fill: #fff;
        border-right: 1px solid rgba(0,0,0,0.1);
    }

.nloginout
{
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    width: auto;
    line-height: 30px;
    background-color: #666;
    color: #fff;
    font-size: 14px;
    padding: 0 8px 0 0;
    border-radius: 6px 4px 4px 6px;
}

    .nloginout img
    {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        padding: 0px;
        box-sizing: border-box;
        margin-right: 5px;
        fill: #fff;
        border-radius: 4px 0 0 4px;
        background-color: #ddd;
    }

.logintxt
{
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    max-width: 150px;
    overflow: hidden;
    height: 28px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px;
    color: #666;
    text-align: left;
}

    .logintxt em
    {
        display: block;
        line-height: 12px;
        font-style: normal;
        color: #666;
    }

@media screen and (max-width:767px)
{
    .logintxt
    {
        display: none;
    }
}

.loginloading
{
    color: transparent;
}

    .loginloading:after
    {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 14px;
        margin-top: -7px;
        border-radius: 5px;
        animation: llani .3s linear infinite;
        background: #fff;
        margin-left: 7px;
    }

@keyframes llani
{
    0%
    {
        transform: rotate(0deg)
    }

    100%
    {
        transform: rotate(360deg)
    }
}

.gotoapp span.closethis
{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 100%;
    right: 0;
    background-color: rgba(125,125,125,0.6);
    border-radius: 0 0 0px 6px;
    overflow: hidden;
    padding: 0;
    display: block;
}

.black .gotoapp span.closethis
{
    background-color: #fff;
}

    .black .gotoapp span.closethis:after, .black .gotoapp span.closethis:before
    {
        border-top: 2px solid #000;
    }

.gotoapp span.closethis:before
{
    width: 20px;
    height: 0;
    border-top: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(45deg);
    margin: -1px auto auto -9px;
    content: "";
    display: block;
}

.gotoapp span.closethis:after
{
    width: 20px;
    height: 0;
    border-top: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    margin: -1px auto auto -9px;
    content: "";
    display: block;
}

.gotoapp.nofixed span.closethis
{
    display: none;
}

@media screen and (max-width:500px)
{
    .gotoappform .hide
    {
        display: none !important;
    }

    .gotoapp.fixed
    {
        top: 50px;
    }

        .gotoapp.fixed .setupbox .setupboxf
        {
            display: block;
            padding: 10px 130px 10px 44px;
        }

            .gotoapp.fixed .setupbox .setupboxf img.applogo
            {
                position: absolute;
                top: 50%;
                left: 5px;
                margin: -18px auto auto auto;
            }

            .gotoapp.fixed .setupbox .setupboxf > span em
            {
                padding: 0 5px;
                line-height: 17px;
                max-height: 34px;
                vertical-align: middle;
                overflow: hidden;
            }

            .gotoapp.fixed .setupbox .setupboxf a
            {
                position: absolute;
                top: 50%;
                right: 5px;
                margin: -19px auto auto auto;
                height: 55px
            }

    .gotoappform.noh3 .gotoapp
    {
        height: 55px;
    }
}

.logingoapp .gotoapp span.closethis
{
    display: none;
}

.logingoapp .gotoapp.fixed
{
    position: absolute;
    top: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-bottom: 1px solid #eee;
}

.logingoapp .gofindbtnbutton
{
    box-sizing: border-box !important;
    padding: 0 10px;
}

.logingoapp .gofindbtn span
{
    width: 15px;
}

@media screen and (max-width:767px)
{
    .logingoapp .gofindbtn b
    {
        padding: 0 15px 0 47px;
        font-size: 12px;
        line-height: 14px;
        margin-top: -21px
    }

    .tjapp
    {
        font-size: 14px !important;
    }
}

@media screen and (max-width:320px)
{
    .logingoapp .gofindbtn span
    {
        display: none;
    }

    .logingoapp .gofindbtn b
    {
        padding: 0 15px 0 10px;
        line-height: 110%;
    }

    .tjapp
    {
        font-size: 12px !important;
        line-height: 12px !important;
        height: auto !important;
    }

        .tjapp svg
        {
            margin-right: 5px !important;
        }

    .loginother span
    {
        font-size: 14px;
    }
}

.fmlpop
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 29891014;
    background: #fff;
    overflow: auto;
    display: none;
}

.fmlhead
{
    display: block;
    height: auto;
    padding: 10px;
    width: auto;
    background-color: #333;
    background-image: linear-gradient(to bottom,#000,#333);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
}

    .fmlhead div
    {
        display: block;
        position: relative;
        text-align: center;
        height: 25px;
    }

    .fmlhead span
    {
        display: inline-block;
        background-color: #15718a;
        background-image: linear-gradient(to bottom,#15718a,#0db2c3);
        position: relative;
        top: 10px;
        border-radius: 30px;
        padding: 4px 15px 6px 15px;
        font-size: 20px;
        position: relative;
    }

        .fmlhead span b
        {
            color: #ffcc00;
            font-size: 22px;
            padding: 0 5px;
        }

.fmlboxform
{
    margin: 0 auto;
    max-width: 500px;
    padding-bottom: 70px;
}

.fmlbox
{
    margin: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
    background: #eee;
    background-image: linear-gradient(to bottom,#fff 0%,#eee 97%,#fff 100%);
    padding: 5px;
}

    .fmlbox div span svg
    {
        fill: #fff;
        box-sizing: border-box;
        padding: 8px;
        width: 100%;
        height: 100%;
    }

    .fmlbox .line, .fmlbox .facebook, .fmlbox .messenger
    {
        display: block;
        width: auto;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background: #666;
        color: #fff;
        font-size: 24px;
    }

    .fmlbox .line
    {
        background: #06c755;
        transition: all 0.2s;
    }

    .fmlbox a:hover .line, .fmlbox a:active .line
    {
        background: #02dc5b
    }

    .fmlbox .line span
    {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        border-right: 1px solid rgba(0,0,0,0.1);
        height: 50px;
    }

    .fmlbox .messenger
    {
        background-image: linear-gradient(to right,#187cff 0%,#b040e4 70%,#f86b67 100%);
        transition: all 0.2s;
        position: relative
    }

        .fmlbox .messenger:after
        {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.2s;
            background: #fff;
            opacity: 0;
        }

    .fmlbox a:hover .messenger:after, .fmlbox a:active .messenger:after
    {
        opacity: 0.2;
    }

    .fmlbox .messenger span
    {
        display: inline-block;
        vertical-align: top;
        width: 50px;
    }

    .fmlbox .facebook
    {
        background: #3C5A99;
        transition: all 0.2s;
    }

    .fmlbox a:hover .facebook, .fmlbox a:active .facebook
    {
        background: #486FC1
    }

    .fmlbox .facebook span
    {
        display: inline-block;
        vertical-align: top;
        width: 50px;
    }

        .fmlbox .facebook span svg
        {
            padding: 10px;
        }

    .fmlbox .boximg
    {
        display: block;
        padding: 5px 10px 0 10px;
        text-align: center;
        font-size: 16px;
        color: #666;
        line-height: 24px;
    }

        .fmlbox .boximg p
        {
            display: block;
            padding: 0 0 5px 0;
            margin: 0;
        }

        .fmlbox .boximg img
        {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

    .fmlbox .boxtxt
    {
        display: block;
        text-align: left;
        font-size: 14px;
        color: #666;
        line-height: 24px;
        padding: 5px 10px 5px 10px;
    }

    .fmlbox .fmlimg
    {
        display: inline-block;
        vertical-align: top;
        width: 80px;
        height: 80px;
        padding: 5px;
        float: left;
        box-sizing: border-box;
        border-radius: 10px;
    }

    .fmlbox dl
    {
        display: block;
        height: 80px;
        width: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding-left: 10px;
    }

        .fmlbox dl dt
        {
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #333;
            font-weight: bold;
        }

        .fmlbox dl dd
        {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            color: #666;
        }

.fmlfooter
{
    padding: 5px 0;
    height: 40px;
    position: fixed;
    bottom: 5px;
    left: 50%;
}

    .fmlfooter button
    {
        display: block;
        margin: 0 auto;
        width: 40px;
        height: 40px;
        border: 0;
        background: #eee;
        border-radius: 50%;
        position: relative;
        margin-left: -20px;
        border: solid #bbb 2px;
    }

        .fmlfooter button:before
        {
            content: "";
            display: block;
            width: 0;
            height: 14px;
            border-right: 2px solid #ccc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotate(45deg);
            margin-top: -7px;
            margin-left: -1px;
        }

        .fmlfooter button:after
        {
            content: "";
            display: block;
            width: 0;
            height: 14px;
            border-right: 2px solid #ccc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotate(-45deg);
            margin-top: -7px;
            margin-left: -1px;
        }

@media screen and (min-width:768px)
{
    .fmlpop
    {
        width: 700px;
        left: 50%;
        margin-left: -350px;
        height: 600px;
        top: 50%;
        margin-top: -310px;
        box-shadow: 0 0 30px rgba(0,0,0,0.3);
        border: 10px solid #fff;
    }

    .fmlfooter
    {
        position: absolute;
    }
}

.tjapp
{
    position: relative;
    top: -35px;
    font-size: 16px;
    height: 22px;
    line-height: 24px;
}

    .tjapp svg
    {
        fill: var(--color-main);
        height: 100%;
        width: 22px;
        vertical-align: top;
        transform: rotate(-90deg)
    }

@media screen and (max-width:767px)
{
    html.EN .fmlhead,
    html.JP .fmlhead
    {
        font-size: 16px;
    }

        html.EN .fmlhead span,
        html.JP .fmlhead span
        {
            font-size: 15px;
        }

            html.EN .fmlhead span b,
            html.JP .fmlhead span b
            {
                font-size: 18px;
            }

    html.EN .fmlbox .line, html.EN .fmlbox .facebook, html.EN .fmlbox .messenger,
    html.JP .fmlbox .line, html.JP .fmlbox .facebook, html.JP .fmlbox .messenger
    {
        font-size: 18px;
    }

    html.EN .fmlbox dl dt,
    html.JP .fmlbox dl dt
    {
        font-size: 18px;
    }
}

@media screen and (max-width:320px)
{
    html.EN .fmlhead,
    html.JP .fmlhead
    {
        font-size: 14px;
    }

        html.EN .fmlhead span,
        html.JP .fmlhead span
        {
            font-size: 13px;
        }

            html.EN .fmlhead span b,
            html.JP .fmlhead span b
            {
                font-size: 16px;
            }

    html.EN .fmlbox .line, html.EN .fmlbox .facebook, html.EN .fmlbox .messenger,
    html.JP .fmlbox .line, html.JP .fmlbox .facebook, html.JP .fmlbox .messenger
    {
        font-size: 14px;
    }

    html.EN .fmlbox dl dt,
    html.JP .fmlbox dl dt
    {
        font-size: 14px;
    }
}

.msgmenu
{
    position: fixed;
    left: 0;
    bottom: 100px;
    height: 60px;
    border-radius: 0 50px 50px 0;
    background-color: #fff;
    opacity: 0.7;
    box-sizing: border-box;
    padding: 5px;
    width: 60px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10000;
}

    .msgmenu svg
    {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        fill: #fff;
        box-sizing: border-box;
        padding: 5px;
        transition: all 0.2s;
    }

    .msgmenu button:hover svg, .msgmenu button:active svg
    {
        transform: scale(1.1)
    }

    .msgmenu button
    {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--color-main);
        border: 0;
    }

.msgpop
{
    position: fixed;
    bottom: 180px;
    left: 10%;
    width: 80%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #fff;
    border-radius: 6px;
    animation: msgpop 4s forwards;
    box-sizing: border-box;
    padding: 10px;
    min-height: 70px;
    ;
    z-index: 10005
}

    .msgpop .msgface
    {
        float: left;
        width: 60px;
        height: 60px;
        margin-right: 10px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

        .msgpop .msgface img
        {
            display: block;
            width: 100%;
            height: 100%;
        }

    .msgpop .msginfo
    {
        width: auto;
        display: block;
        overflow: hidden;
    }

        .msgpop .msginfo h3
        {
            font-size: 16px;
            line-height: 120%;
            padding: 0 0 5px 0;
            margin: 0;
        }

    .msgpop .msgtxt
    {
        font-size: 14px;
        line-height: 120%;
        padding: 0 0 5px 0;
        margin: 0;
        color: #666;
    }

    .msgpop .msgspan
    {
        display: block;
        font-size: 12px;
        line-height: 16px;
        color: #999;
    }

        .msgpop .msgspan span
        {
            display: inline-block;
            vertical-align: top;
        }

            .msgpop .msgspan span.colortxt
            {
                color: var(--color-main);
            }

@keyframes msgpop
{
    0%
    {
        bottom: 180px;
    }

    90%
    {
        bottom: 80%;
        opacity: 1
    }

    100%
    {
        bottom: 100%;
        opacity: 0;
    }
}

.msgbox
{
    position: fixed;
    z-index: 10002;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.msgboxbg
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: transparent;
}

.msgform
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 10px 15px 20px 15px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 0px 0px 0 0;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
}

.msgformhead
{
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

    .msgformhead b
    {
        color: #f60;
    }

    .msgformhead div:first-child
    {
        display: block;
        float: left;
        width: auto;
    }

    .msgformhead div:last-child
    {
        display: block;
        width: auto;
        height: auto;
        overflow: hidden;
        text-align: right;
    }

    .msgformhead span.uparr
    {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
        transform: rotate(-45deg);
        margin: 2px 5px 0 8px;
    }

    .msgformhead span.downarr
    {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
        transform: rotate(135deg);
        margin: -3px 5px auto 8px;
    }

    .msgformhead div a
    {
        color: #666;
    }

        .msgformhead div a:hover,
        .msgformhead div a:active
        {
            color: var(--color-main)
        }

.msgformbody
{
    padding: 0 0px;
}

.msgnowlist
{
    display: block;
    font-size: 0;
    height: 50px;
    overflow: hidden;
    padding: 15px 0;
}

    .msgnowlist li
    {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        margin-left: -10px;
    }

        .msgnowlist li img
        {
            display: block;
            width: 100%;
            height: 100%;
        }

    .msgnowlist ul
    {
        display: block;
        white-space: nowrap;
        padding-left: 10px;
    }

.msgsend
{
    display: block;
    font-size: 0;
    position: relative;
    padding-right: 60px;
}

    .msgsend .sendbtn
    {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
    }

        .msgsend .sendbtn svg
        {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            fill: #fff;
            box-sizing: border-box;
            padding: 5px;
            transition: all 0.2s;
        }

        .msgsend .sendbtn button:hover svg, .msgsend .sendbtn button:active svg
        {
            transform: scale(1.1)
        }

        .msgsend .sendbtn button
        {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: var(--color-main);
            border: 0;
        }

    .msgsend .sendtxt
    {
        display: block;
        width: auto;
        overflow: hidden;
        min-height: 70px;
    }

        .msgsend .sendtxt textarea
        {
            display: block;
            width: 100%;
            height: auto;
            min-height: 70px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f3f3f3;
            box-sizing: border-box;
            padding: 5px;
        }

.msgformfooter
{
    text-align: center;
    padding: 15px 0 0 0;
    font-size: 14px;
    line-height: 18px;
}

    .msgformfooter span
    {
        display: inline-block;
        cursor: pointer;
        color: #666;
    }

        .msgformfooter span:hover
        {
            color: #000;
        }

        .msgformfooter span:before
        {
            content: "";
            display: inline-block;
            vertical-align: top;
            width: 18px;
            height: 18px;
            margin-right: 5px;
        }

        .msgformfooter span.close:before
        {
            background: url(/images/default/edit_select.png) center no-repeat;
            background-size: cover;
        }

        .msgformfooter span.open:before
        {
            background: url(/images/default/edit_selected.png) center no-repeat;
            background-size: cover;
        }

.msghistory
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
    overflow-y: auto;
    background-color: #fff;
    height: 100%;
}

.msgdlbox
{
    display: block;
    width: 100%;
    height: auto;
    padding: 0 15px 0 40px;
    box-sizing: border-box;
    position: relative
}

    .msgdlbox:before
    {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 26px;
        height: 100%;
        background: url(/images/default/timeline.png) left repeat-y #fff;
        background-size: 100% auto;
    }

.msghistory dl
{
    display: block;
    padding: 10px 0;
}

    .msghistory dl dt
    {
        display: inline-block;
        font-size: 12px;
        color: #fff;
        border-radius: 40px;
        height: 20px;
        line-height: 20px;
        background-color: #666;
        padding: 0 15px;
    }

    .msghistory dl dd
    {
        display: block;
        padding: 0px 0 0 0;
    }

.msghistory dd li
{
    display: block;
    clear: both;
    padding: 10px 0 15px 0;
}

    .msghistory dd li::after
    {
        content: "";
        display: block;
        height: 0;
        clear: both;
        width: 100%;
    }

    .msghistory dd li .commentli
    {
        display: block;
        background-color: #eee;
        padding: 10px;
        border-radius: 8px;
        position: relative;
        width: 80%;
    }

        .msghistory dd li .commentli.my
        {
            float: right;
        }

        .msghistory dd li .commentli .msgreport
        {
            position: absolute;
            bottom: 0;
            right: -30px;
            width: 20px;
            height: 20px;
            background: url(/images/default/msgreport.png) center no-repeat;
            background-size: cover;
        }

        .msghistory dd li .commentli.my .msgreport
        {
            display: none;
        }

        .msghistory dd li .commentli:after
        {
            content: "";
            display: block;
            position: absolute;
            left: 10px;
            bottom: -15px;
            height: 15px;
            width: 20px;
            background: url(/images/default/msgbox.png) top no-repeat;
            background-size: cover;
        }

        .msghistory dd li .commentli.my:after
        {
            left: unset;
            right: 10px;
            transform: rotateY(180deg)
        }

    .msghistory dd li .msgface
    {
        width: auto;
        height: 36px;
        overflow: hidden;
    }

        .msghistory dd li .msgface img
        {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            vertical-align: top;
        }

.msghistory dl dd .msgface span
{
    display: inline-block;
    vertical-align: top;
    line-height: 36px;
    margin-left: 5px;
}

.msghistory dd li .commentli.my .msgface span.name
{
    color: #0e9722
}

.msghistory dl dd .msgface span.date
{
    font-size: 12px;
    color: #999;
}

.msghistory dd li .msginfo
{
    width: auto;
    display: block;
    overflow: hidden;
}

    .msghistory dd li .msginfo h3
    {
        font-size: 16px;
        line-height: 120%;
        padding: 0 0 5px 0;
        margin: 0;
    }

.msghistory dd li .msgtxt
{
    font-size: 14px;
    line-height: 120%;
    padding: 0 0 5px 0;
    margin: 0;
    color: #666;
}

.msghistory dd li .msgspan
{
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #999;
    padding: 5px 0;
}

    .msghistory dd li .msgspan span
    {
        display: inline-block;
        vertical-align: top;
    }

        .msghistory dd li .msgspan span.colortxt
        {
            color: var(--color-main);
        }

.msghistory .emptyspace
{
    height: 300px;
    width: auto;
}

.nowreadingbox
{
    display: block;
    margin: 0 auto;
    padding: 20px;
    max-width: 1380px;
}

    .nowreadingbox h3
    {
        display: block;
        height: 50px;
        line-height: 50px;
        float: left;
    }

    .nowreadingbox .selectnowread
    {
        display: block;
        width: auto;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        padding: 0 0 0 40px;
    }

        .nowreadingbox .selectnowread li
        {
            display: inline-block;
            vertical-align: top;
            margin-right: 10px;
            font-size: 16px;
        }

            .nowreadingbox .selectnowread li.now button
            {
                color: var(--color-main);
                font-weight: bold;
            }

            .nowreadingbox .selectnowread li button
            {
                display: block;
                height: 50px;
                line-height: 50px;
                border: 0;
                background: none;
                padding: 0 10px;
                font-size: 16px;
            }

.nowreadface
{
    display: block;
    font-size: 0;
    padding: 0px;
    overflow: hidden;
    overflow: hidden;
    height: 50px;
    border-width: 10px 0 10px 10px;
    border-color: transparent;
    border-style: solid;
    margin: 0;
}

    .nowreadface span
    {
        display: inline-block;
        vertical-align: top;
        width: 35px;
        height: 50px;
        text-align: right;
    }

        .nowreadface span:first-child
        {
            margin-left: 20px;
        }

    .nowreadface img
    {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #ddd;
        position: relative;
        float: right;
        box-sizing: border-box;
    }

.nowreadlist .nlist
{
    margin: 0 -15px;
}

    .nowreadlist .nlist li a
    {
        background-color: #fff;
        padding: 15px;
        border-radius: 10px;
    }

    .nowreadlist .nlist li .listdata
    {
        height: auto;
    }

        .nowreadlist .nlist li .listdata span
        {
            white-space: normal;
            line-height: 120%;
            height: auto;
            color: #444;
            font-size: 14px;
            position: relative;
            overflow: visible;
            padding-right: 15px;
        }

            .nowreadlist .nlist li .listdata span:after
            {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                border-top: 2px solid #ccc;
                border-right: 2px solid #ccc;
                transform: rotate(45deg);
                margin-left: 5px;
                position: relative;
                top: -1px;
            }

    .nowreadlist .nlist li b
    {
        color: #f60;
    }

@media screen and (max-width:767px)
{
    .nowreadingbox
    {
        background-color: #f6f6f6;
        padding: 10px 10px 80px 10px;
    }

    .nowreadlist
    {
        background-color: #fff;
        border-radius: 10px;
    }

        .nowreadlist .nlist
        {
            margin: 0 -5px;
        }

            .nowreadlist .nlist li
            {
                padding: 10px 5px 5px 5px;
            }

                .nowreadlist .nlist li a
                {
                    padding: 5px;
                    border-radius: 5px;
                }

                .nowreadlist .nlist li .listdata span:after
                {
                    position: absolute;
                    right: 2px;
                    top: 50%;
                    margin-top: -5px;
                }

    .nowreadingbox h3
    {
        display: block;
        height: 30px;
        line-height: 30px;
        float: none;
        padding: 0px 0 9px 15px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        width: auto;
        margin: 0 -10px;
    }

    .nowreadingbox .selectnowread
    {
        height: 50px;
        line-height: 50px;
        padding: 0;
    }

        .nowreadingbox .selectnowread ul
        {
            font-size: 0;
        }

        .nowreadingbox .selectnowread li button
        {
            height: 50px;
            line-height: 50px;
            padding: 0;
            width: 100%;
            display: block;
        }

        .nowreadingbox .selectnowread li
        {
            display: inline-block;
            vertical-align: top;
            width: 33.33%;
            margin: 0;
        }
}

.commentbox
{
    margin: 0 auto;
    max-width: 1400px;
    padding: 15px;
}

.commentboxtitle
{
    font-size: 20px;
    font-weight: bold;
    padding: 0 0 3px 0;
}

.commentbox ul
{
    display: block;
    width: auto;
    font-size: 0;
    margin: 0px -5px;
}

    .commentbox ul li
    {
        display: inline-block;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }

.commentitem
{
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 10px;
    min-height: 70px;
    border: 1px solid #ddd;
}

    .commentitem .commentface
    {
        float: left;
        width: 60px;
        height: 60px;
        margin-right: 10px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

        .commentitem .commentface img
        {
            display: block;
            width: 100%;
            height: 100%;
        }

    .commentitem .commentinfo
    {
        width: auto;
        display: block;
        overflow: hidden;
    }

        .commentitem .commentinfo h3
        {
            font-size: 16px;
            line-height: 120%;
            padding: 0 0 5px 0;
            margin: 0;
        }

    .commentitem .commenttxt
    {
        font-size: 14px;
        line-height: 120%;
        padding: 0 0 5px 0;
        margin: 0;
        color: #666;
    }

    .commentitem .commentspan
    {
        display: block;
        font-size: 12px;
        line-height: 16px;
        color: #999;
    }

        .commentitem .commentspan span
        {
            display: inline-block;
            vertical-align: top;
        }

            .commentitem .commentspan span.colortxt
            {
                color: var(--color-main);
            }

.commentrating
{
    padding: 10px 0 0 0;
    text-align: center;
    font-size: 0;
}

    .commentrating .rating-stars
    {
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 6px 0 0 6px;
        border-right: 0;
        padding: 5px 60px 5px 15px;
    }

    .commentrating .ratingbtn button
    {
        border-radius: 0 6px 6px 0;
        padding: 5px 15px;
        height: 48px;
    }

    .commentrating .rating-stars input
    {
        height: 46px;
        line-height: 46px;
    }

@media screen and (max-width:767px)
{
    .commentrating .rating-stars .rating-stars-container .rating-star
    {
        width: 26px;
    }

    .commentrating .rating-stars
    {
        padding-right: 5px;
        float: none;
        border: 0;
        padding: 0;
        text-align: center;
    }

        .commentrating .rating-stars input
        {
            height: 36px;
            line-height: 36px;
            font-size: 18px;
            margin-left: 5px;
        }

    .commentrating .ratingbtn
    {
        display: block;
        float: none;
        text-align: center;
        height: auto;
    }

        .commentrating .ratingbtn button
        {
            border-radius: 6px;
            font-size: 14px;
            padding: 0 15px;
            height: 38px;
            display: inline-block;
        }
}

@media screen and (max-width:320px)
{
    .commentrating .rating-stars .rating-stars-container .rating-star
    {
        width: 22px;
    }

    .commentrating .rating-stars input
    {
        position: unset;
        display: inline-block;
    }
}


#loginmsg
{
    color: red;
    padding-top: 5px;
}

.layui-m-layermain span[no]
{
    color:#333;
}