@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, a, blockquote, th {
    margin: 0;
    padding: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 14px
}

ol, ul, li {
    list-style: none outside none
}

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

fieldset, img {
    border: 0 none
}

/*html { background: ##f5f5f5 }*/
html {
    scrollbar-gutter: stable
}

body {
    background: #f5f5f5;
    color: #333;
    font: 12px/1.5 PingFangSC-Regular, HelveticaNeue-Light, 'Helvetica Neue Light', 'Microsoft YaHei', sans-serif, "宋体";
    text-align: left
}

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

a img {
    border: none
}

a {
    outline: none;
    color: #333;
    text-decoration: none
}

a:hover, .red {
    color: #3eaf7c
}

a:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
label[role="button"]:focus-visible {
    outline: 2px solid #3eaf7c;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1000;
    transform: translateY(-150%);
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    background: #111827;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: transform .16s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
    outline: 2px solid #3eaf7c;
    outline-offset: 2px;
}

.red1 {
    color: #ff4040
}

.unlink {
    text-decoration: underline
}

.blue {
    color: #5fc3f3
}

.green {
    color: #360
}

.black {
    color: #000
}

.black3 {
    color: #333
}

.black6 {
    color: #666
}

.black9 {
    color: #999
}

.ccc {
    color: #ccc
}

.orange {
    color: #f60
}

.font12 {
    font-size: 12px !important
}

.font14 {
    font-size: 14px !important
}

.font16 {
    font-size: 16px !important
}

.font18 {
    font-size: 18px !important
}

.font20 {
    font-size: 20px !important
}

.font26 {
    font-size: 26px !important
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all
}

textarea {
    resize: none;
    outline: none;
    border: 1px solid #CCC;
    font: 12px/1.8 "microsoft yahei", Arial;
    padding-left: 5px
}

input {
    outline: none;
    border: none; /* padding-left: 5px; font-size: 13px;*/
    font-family: "microsoft yahei", Arial;
    *background: none
}

i, em, cite {
    font-style: normal
}

.layui-inline, input, label {
    vertical-align: middle
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    outline: 0
}

button, select {
    text-transform: none
}

/*select { -webkit-appearance: none; border: none }*/
input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

input[type="submit"], input[type="reset"], input[type="button"], button {
    -webkit-appearance: none
}

:-moz-placeholder {
    color: #999
}

::-moz-placeholder {
    color: #999
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999
}

.cf {
    zoom: 1
}

.cf:before, .cf:after {
    content: "";
    display: table;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden
}

.cf:after {
    clear: both
}

.clear {
    clear: both
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.fl {
    float: left
}

.fr {
    float: right
}

.block {
    display: block
}

.none, .hidden {
    display: none
}

/*base end*/
.channelWrap {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px
}

.channelWrap.channelBanner {
    padding-bottom: 14px
}

.wrap_left {
    width: 750px
}

.wrap_right {
    width: 250px
}

.wrap_inner {
    padding: 20px;
    border-radius: 6px;
    background: #fff;
}

.wrap_bg {
    border-radius: 6px;
    background: #fff;
}

.pad20 {
    padding: 20px
}

.pad20_nobt {
    padding: 20px 20px 0
}

.box_center {
    width: 1020px;
    margin: 0 auto;
    box-sizing: border-box
}

.topMain {
    height: 92px;
    background: #fff;
    overflow: visible;
    position: relative;
    z-index: 20
}

.topMain .box_center {
    display: flex;
    align-items: center;
    min-height: 92px;
    gap: 28px
}

.logo {
    width: 144px;
    float: none;
    padding: 0;
    flex: 0 0 144px;
    display: block;
    line-height: 0
}

.logo img {
    width: 144px;
    height: 48px;
    display: block;
    object-fit: contain;
    object-position: left center
}

.searchBar {
    width: 342px;
    margin-top: 0;
    overflow: visible;
    position: relative;
    flex: 0 0 342px
}

.searchBar .search /*, .searchBar .hotword*/
{
    width: 342px;
    overflow: visible;
    position: relative
}

.searchBar .s_int {
    width: 226px;
    padding: 0 38px 0 18px;
    height: 36px;
    line-height: 36px \9;
    vertical-align: middle;
    border: 1px solid #3eaf7c;
    border-right: none;
    color: #333;
    float: left;
    border-radius: 20px 0 0 20px;
    font-size: 14px; /*background: #fff;*/
    background: 0 0
}

.searchBar .search_clear {
    position: absolute;
    top: 50%;
    right: 64px;
    z-index: 2;
    display: none;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa0a6;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation
}

.searchBar .search_clear.is-visible {
    display: block
}

.searchBar .search_clear:hover,
.searchBar .search_clear:focus {
    color: #3eaf7c;
    background: rgba(62, 175, 124, .1);
    outline: 0
}

.searchBar .search_clear:focus-visible {
    box-shadow: 0 0 0 3px rgba(62, 175, 124, .22)
}

/*.searchBar .s_btn { width: 78px; height: 38px; line-height: 38px; background: #f65167; color: #fff; font-size: 16px; text-align: center; float: left; cursor: pointer; padding: 0 }
.searchBar .s_btn:hover { background:#E23249 }*/
.searchBar .search_btn {
    float: left;
    width: 58px;
    height: 38px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    background-color: #3eaf7c;
    cursor: pointer;
}

.searchBar .search_btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(62, 175, 124, 0.25);
}

.searchBar .search_btn,
.btn_red,
.btn_ora,
.btn_ora_white,
input[type="button"],
input[type="submit"],
label[role="button"] {
    touch-action: manipulation;
}

.searchBar .search_btn .icon {
    width: 18px;
    height: 18px;
    display: block;
    margin: 9px auto 0;
    fill: #fff;
}

.search-history-box {
    padding: 10px 12px 12px;
    border: 1px solid #e6ece9;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
}

.search-history-popover {
    position: absolute;
    top: 38px;
    left: 0;
    right: auto;
    width: 284px;
    box-sizing: border-box;
    z-index: 100;
    box-shadow: 0 14px 30px rgba(19, 32, 42, .14)
}

.search-history-popover[hidden] {
    display: none
}

.search-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px
}

.search-history-title {
    color: #6d7780;
    font-size: 13px
}

.search-history-clear-all {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3eaf7c;
    font-size: 13px;
    cursor: pointer
}

.search-history-box.has-items .search-history-clear-all {
    display: inline-block
}

.search-history-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 4px
}

.search-history-empty {
    grid-column: 1 / -1;
    padding: 6px 0 0;
    color: #9aa3ad;
    font-size: 13px;
    line-height: 22px
}

.search-history-item {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px
}

.search-history-item:hover {
    color: #3eaf7c
}

.search-history-item .js-search-history-keyword {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 0;
    color: #374151;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.search-history-item .js-search-history-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    min-height: 26px;
    border: 0;
    background: transparent;
    color: #8b949e;
    font-size: 18px;
    line-height: 1
}

.search-history-item .js-search-history-remove:hover,
.search-history-item .js-search-history-remove:focus {
    color: #d94b4b;
    background: transparent
}

.searchBar.history-open .s_int {
    border-radius: 20px 0 0 0
}

/*.hotword { padding-top: 3px }
.hotword a, .hotword span { color: #999; margin: 0 6px 0 5px }
.hotword a:hover { color: #666 }*/
.bookShelf {
    margin-top: 0;
    margin-left: auto;
    padding-left: 0;
    overflow: visible;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.theme_toggle_slot {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 4px 0 0 8px;
    flex: 0 0 auto;
}

.bookShelf .sj_link {
    height: 38px;
    line-height: 38px;
    padding-left: 30px;
    font-size: 15px;
    color: #404040;
    background: url(/images/icon_sj.png) no-repeat 6px 50%;
    float: none
}

.bookShelf .user_link {
    height: 38px;
    line-height: 38px;
    padding-left: 20px;
    font-size: 15px;
    color: #404040;
    float: none;
    display: inline-flex;
    align-items: center
}

.bookShelf .user_avatar_link {
    display: inline-flex;
    align-items: center;
    line-height: 1
}

.bookShelf .user_head {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    float: none;
    margin: 0
}

.bookShelf .user_name {
    max-width: 100px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.bookShelf .line {
    float: none;
    color: #ccc
}

/*.bookShelf img { position: absolute; top: 17px; left: 17px; z-index: 10 }*/
.mainNav {
    width: 100%;
    min-height: 56px;
    background: linear-gradient(180deg, #43b583 0%, #3eaf7c 100%);
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(45, 119, 86, .14)
}

.mainNav .box_center {
    display: flex;
    align-items: center;
    min-height: 56px
}

.mainNav .nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap
}

.mainNav .nav li {
    float: none
}

.mainNav .nav li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    line-height: 1;
    padding: 0 16px;
    color: rgba(255, 255, 255, .94);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease
}

.mainNav .nav li a:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .24);
    color: #fff
}

html.front-nav-home .mainNav .nav li[data-nav="home"] a,
html.front-nav-bookclass .mainNav .nav li[data-nav="bookclass"] a,
html.front-nav-ranking .mainNav .nav li[data-nav="ranking"] a,
html.front-nav-pay .mainNav .nav li[data-nav="pay"] a,
html.front-nav-author .mainNav .nav li[data-nav="author"] a,
.mainNav .nav li.on a {
    background: #f8fffb;
    color: #2c8a63;
    border-color: rgba(255, 255, 255, .78);
    box-shadow: 0 6px 16px rgba(26, 92, 65, .18)
}

.footer {
    padding: 0 0 20px; /*margin-top: 20px; background: #fbfaf8; border-top: 1px solid #e0e0e0; */
    text-align: center;
    font-size: 12px
}

.copyright ul li {
    color: #999;
    line-height: 26px
}

.copyright .menu {
    padding: 2px 0 6px;
    font-size: 12px
}

.copyright .line {
    display: inline-block;
    padding: 0 12px;
    color: #e5d9da
}

.copyright p {
    margin-top: 10px;
    color: #999
}

.code_bar img {
    margin-left: 66px
}

.rBar {
    float: right;
    width: 268px
}

.btn_gray, .btn_red, .btn_ora, .btn_ora_white, .btn_red1 {
    border-radius: 20px;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    cursor: pointer; /*padding: 0 34px; height: 34px; line-height: 34px;*/
    padding: 11px 36px;
    line-height: 1;
}

.btn_gray {
    border: 1px solid #dedede;
    background: #fafafa;
}

.btn_red, .btn_ora {
    border: 1px solid #3eaf7c;
    background: #3eaf7c;
    color: #fff
}

.btn_red1 {
    border: 1px solid #ff4040;
    background: #ff4040;
    color: #fff
}

.btn_ora_white {
    border: 1px solid #3eaf7c;
    color: #3eaf7c
}

.btn_ora_white:hover {
    background: #fefaf6
}

.btn_link {
    padding: 2px 6px;
    background: #3eaf7c;
    color: #fff;
    border-radius: 2px
}

.btn_gray:hover {
    background: #f0f0f0;
    color: #333
}

.btn_ora:hover, .btn_red:hover, .btn_link:hover {
    background: #3eaf7c;
    color: #fff
}

.btn_red1:hover {
    background: #fc2525;
    color: #fff
}

.pay_Checkout .btn_red, .btn_big {
    font-size: 16px;
    padding: 15px 0;
    border-radius: 4px;
    width: 196px;
}

i.vip {
    width: 26px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    font-size: 11px;
    color: #fff;
    background: #fe8034;
    border-radius: 2px;
    margin: 13px 0 0 3px;
    display: inline-block;
    transform: scale(0.88);
}

i.vip_b {
    width: 36px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 15px;
    color: #fff;
    background: #3eaf7c;
    border-radius: 4px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: 3px
}

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

.pageBox a, .pageBox span {
    display: inline-block;
    color: #999;
    padding: 6px 10px;
    margin: 0 5px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1
}

.pageBox .current, .pageBox a:hover {
    background: #3eaf7c;
    color: #fff
}

.manBody {
}

.manBody .mainNav {
    background: linear-gradient(180deg, #4a4950 0%, #3f3e44 100%);
    box-shadow: 0 10px 24px rgba(20, 20, 24, .22)
}

.manBody .searchBar .s_int {
    border: 1px solid #878689;
    border-right: none;
    background-position: 8px -22px
}

.manBody .mainNav .nav li a {
    color: rgba(248, 248, 252, .92)
}

.manBody .mainNav .nav li a:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    color: #fff
}

html.front-nav-home .manBody .mainNav .nav li[data-nav="home"] a,
html.front-nav-bookclass .manBody .mainNav .nav li[data-nav="bookclass"] a,
html.front-nav-ranking .manBody .mainNav .nav li[data-nav="ranking"] a,
html.front-nav-pay .manBody .mainNav .nav li[data-nav="pay"] a,
html.front-nav-author .manBody .mainNav .nav li[data-nav="author"] a,
.manBody .mainNav .nav li.on a {
    background: #f2f2f7;
    color: #34343b;
    border-color: rgba(255, 255, 255, .66);
    box-shadow: 0 6px 16px rgba(13, 13, 18, .26)
}

.nav_sub {
    margin-bottom: 16px
}

.nav_sub a {
    padding: 0
}

.nav_sub a + a {
    margin-left: 6px
}

.copyright .menu a {
    color: #666;
    font-size: 12px
}

.copyright .menu a:hover, .bookShelf .sj_link:hover {
    color: #3eaf7c
}

.rightList .more, .more_bar {
    margin: 1px 0;
    height: 34px;
    line-height: 34px;
    border-radius: 1px;
    background-color: #f7f7f7;
    text-align: center
}

.rightList .more a, .more_bar a {
    display: block;
    color: #666
}

.header, .footer {
    min-width: 1020px
}

/*base*/
.noborder {
    border: 0 !important
}

.nomargin {
    margin: 0 !important
}

.ml {
    margin-left: 12px
}

.mr {
    margin-right: 12px
}

.ml5 {
    margin-left: 5px
}

.ml10 {
    margin-left: 10px
}

.ml15 {
    margin-left: 15px
}

.ml20 {
    margin-left: 20px
}

.mr5 {
    margin-right: 5px
}

.mr10 {
    margin-right: 10px
}

.mr15 {
    margin-right: 15px
}

.mr20 {
    margin-right: 20px
}

.mt5 {
    margin-top: 5px
}

.mt10 {
    margin-top: 10px
}

.mt15 {
    margin-top: 15px
}

.mt20 {
    margin-top: 20px
}

.mb5 {
    margin-bottom: 5px
}

.mb10 {
    margin-bottom: 10px
}

.mb15 {
    margin-bottom: 15px
}

.mb20 {
    margin-bottom: 20px
}

.mb50 {
    margin-bottom: 50px
}

.pointer {
    cursor: pointer
}

.notindent {
    text-indent: inherit !important
}

.vm {
    vertical-align: middle !important
}

.border_t {
    border-top: 1px solid #eee
}

.border_b {
    border-bottom: 1px solid #eee
}

.border_l {
    border-left: 1px solid #eee
}

.border_r {
    border-right: 1px solid #eee
}

.layui-laypage-curr {
    background: #3eaf7c;
}

.layui-laypage-curr em {
    color: #fff;
}

.layui-disabled, .layui-disabled:hover {
    color: #d2d2d2 !important;
    cursor: not-allowed !important
}

#noFeedbackNote {
    line-height: 400px;
    text-align: center;
    border-top: 1px solid #eee;
}

#txtDescription {
    /*width: 900px;*/
    height: 288px;
    margin: 20px auto 20px;
    padding: 10px;


    /*新增样式*/
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
    font-size: 14px;
}

.userBox {
    margin: 0 auto
}


.layui-elem-quote {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 1.8;
    border-left: 5px solid #16b777;
    border-radius: 0 2px 2px 0;
    background-color: #fafafa;
}

@media (max-width: 991px) {
    body {
        min-width: 0;
    }

    .header,
    .footer {
        min-width: 0;
    }

    .box_center {
        width: auto;
        margin: 0 12px;
    }
}

@media (max-width: 768px) {
    html,
    body {
        min-width: 0;
        overflow-x: auto;
    }

    .header,
    .footer {
        min-width: 0;
    }

    .box_center {
        width: auto;
        margin: 0 12px;
    }

    .topMain {
        height: auto;
        padding: 12px 0;
        overflow: visible;
    }

    .topMain .box_center {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo shelf"
            "search search";
        column-gap: 10px;
        row-gap: 10px;
        align-items: center;
    }

    .logo {
        grid-area: logo;
        float: none;
        width: 128px;
        flex-basis: 128px;
        padding: 0;
        margin: 0;
        min-width: 0;
        text-align: left;
    }

    .logo img {
        width: 128px;
        height: 30px;
        max-width: 128px;
    }

    .searchBar {
        grid-area: search;
        width: 100%;
        flex: none;
        float: none;
        margin-top: 0;
        min-width: 0;
        overflow: visible;
    }

    .searchBar .search {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .searchBar .s_int {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        padding: 0 40px 0 12px;
    }

    .searchBar .search_clear {
        right: 62px;
        width: 34px;
        height: 34px;
        margin-top: -17px;
        line-height: 32px;
    }

    .searchBar .search_btn {
        flex: 0 0 58px;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 34px;
    }

    .searchBar .search_btn .icon {
        width: 16px;
        height: 16px;
        margin: 0;
    }

    .search-history-popover {
        top: 34px;
        width: calc(100% - 58px)
    }

    .bookShelf {
        grid-area: shelf;
        float: none;
        margin-top: 0;
        padding-left: 0;
        text-align: right;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        overflow: visible;
        white-space: nowrap;
        margin-left: auto;
        min-height: 28px;
    }

    .bookShelf .sj_link {
        line-height: 28px;
        height: 28px;
        float: none;
        padding-left: 20px;
        background-position: left 50%;
        background-size: 16px auto;
        font-size: 13px;
    }

    .bookShelf .user_link {
        line-height: 28px;
        height: 28px;
        float: none;
        padding-left: 0;
        font-size: 14px;
        white-space: nowrap;
        align-items: center;
    }

    .bookShelf .line {
        float: none;
        padding: 0 6px;
    }

    .theme_toggle_slot {
        width: 26px;
        height: 26px;
        margin: 0 0 0 4px;
    }

    .bookShelf .mr20 {
        margin-right: 6px !important;
    }

    .bookShelf .mr15 {
        margin-right: 6px !important;
    }

    .mainNav {
        min-height: 48px;
        margin-bottom: 10px;
    }

    .mainNav .box_center {
        width: auto;
        margin: 0 12px;
        min-height: 48px;
    }

    .mainNav .nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 7px 0;
        gap: 6px;
    }

    .mainNav .nav li {
        float: none;
        flex: 0 0 auto;
    }

    .mainNav .nav li a {
        margin: 0;
        height: 34px;
        line-height: 1;
        padding: 0 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .channelWrap {
        padding: 12px;
        border-radius: 4px;
        margin-bottom: 12px;
    }

    .footer {
        padding: 12px 0 18px;
    }

    .copyright ul li {
        line-height: 1.8;
    }

    .copyright .line {
        padding: 0 6px;
    }

    .friend_link a {
        margin: 0 6px;
    }
}

@media (max-width: 360px) {
    .mainNav .nav {
        gap: 4px;
    }

    .mainNav .nav li a {
        padding: 0 8px;
        font-size: 13px;
    }
}

/* Global dark theme (exclude reading page by JS) */
.js-book-cover-nav {
    cursor: pointer;
}

.bookShelf .theme_toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 4px 0 0 8px;
    padding: 0;
    line-height: 0;
    border-radius: 50%;
    border: 1px solid #d7dce3;
    color: #5f6b78;
    font-size: 0;
    background: #fff;
    vertical-align: middle;
}

.bookShelf .theme_toggle_slot + .theme_toggle {
    margin-left: 0;
}

.bookShelf .theme_toggle:hover {
    color: #3eaf7c;
    border-color: #8ac7aa;
}

.bookShelf .theme_toggle:focus {
    outline: 2px solid rgba(62,175,124,.45);
    outline-offset: 2px;
}

.bookShelf .theme_toggle .theme_toggle_icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.bookShelf .theme_toggle.is-to-dark .theme_toggle_icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5f6b78;
}

.bookShelf .theme_toggle.is-to-dark .theme_toggle_icon::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.bookShelf .theme_toggle.is-to-light .theme_toggle_icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f2b23b;
}

.bookShelf .theme_toggle.is-to-light .theme_toggle_icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 -8px 0 #f2b23b, 0 8px 0 #f2b23b, 8px 0 0 #f2b23b, -8px 0 0 #f2b23b, 6px 6px 0 #f2b23b, -6px -6px 0 #f2b23b, 6px -6px 0 #f2b23b, -6px 6px 0 #f2b23b;
}

.bookShelf .theme_toggle:hover.is-to-dark .theme_toggle_icon {
    background: #3eaf7c;
}

html.site-dark body,
body.site-dark {
    background: #11161c;
    color: #d1d7df;
}

html.site-dark body a,
body.site-dark a {
    color: #d5dce5;
}

html.site-dark body a:hover,
html.site-dark body .red,
body.site-dark a:hover,
body.site-dark .red {
    color: #6ad59d;
}

html.site-dark body .topMain,
body.site-dark .topMain {
    background: #1a2027;
}

html.site-dark body .searchBar .s_int,
body.site-dark .searchBar .s_int {
    color: #e8edf4;
    border-color: #4ca77f;
    background: #0f141a;
}

html.site-dark body .searchBar .s_int::placeholder,
html.site-dark body input::placeholder,
html.site-dark body textarea::placeholder,
body.site-dark .searchBar .s_int::placeholder,
body.site-dark input::placeholder,
body.site-dark textarea::placeholder {
    color: #8f9aa7;
}

html.site-dark body .searchBar .search_clear,
body.site-dark .searchBar .search_clear {
    color: #96a1ad;
}

html.site-dark body .searchBar .search_clear:hover,
html.site-dark body .searchBar .search_clear:focus,
body.site-dark .searchBar .search_clear:hover,
body.site-dark .searchBar .search_clear:focus {
    color: #8dd4af;
    background: rgba(141, 212, 175, .12);
}

html.site-dark body .search-history-box,
body.site-dark .search-history-box {
    border-color: #2b3845;
    background: #151b22;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .32)
}

html.site-dark body .search-history-title,
body.site-dark .search-history-title {
    color: #9daaba
}

html.site-dark body .search-history-empty,
body.site-dark .search-history-empty {
    color: #7f8b99
}

html.site-dark body .search-history-item,
body.site-dark .search-history-item {
    background: transparent
}

html.site-dark body .search-history-item:hover,
body.site-dark .search-history-item:hover {
    background: #1b2530
}

html.site-dark body .search-history-item .js-search-history-keyword,
body.site-dark .search-history-item .js-search-history-keyword {
    color: #dce6f0
}

html.site-dark body .search-history-item .js-search-history-remove,
body.site-dark .search-history-item .js-search-history-remove {
    color: #98a5b3
}

html.site-dark body .bookShelf .sj_link,
html.site-dark body .bookShelf .user_link,
html.site-dark body .bookShelf .line,
body.site-dark .bookShelf .sj_link,
body.site-dark .bookShelf .user_link,
body.site-dark .bookShelf .line {
    color: #d4dbe4;
}

html.site-dark body .bookShelf .theme_toggle,
body.site-dark .bookShelf .theme_toggle {
    border-color: #445262;
    color: #b8c2ce;
    background: #0f141a;
}

html.site-dark body .bookShelf .theme_toggle:hover,
body.site-dark .bookShelf .theme_toggle:hover {
    color: #73dca8;
    border-color: #66c99a;
}

html.site-dark body .bookShelf .theme_toggle.is-to-dark .theme_toggle_icon,
body.site-dark .bookShelf .theme_toggle.is-to-dark .theme_toggle_icon {
    background: #aab6c3;
}

html.site-dark body .bookShelf .theme_toggle.is-to-dark .theme_toggle_icon::after,
body.site-dark .bookShelf .theme_toggle.is-to-dark .theme_toggle_icon::after {
    background: #0f141a;
}

html.site-dark body .bookShelf .theme_toggle.is-to-light .theme_toggle_icon,
body.site-dark .bookShelf .theme_toggle.is-to-light .theme_toggle_icon {
    background: #f4c453;
}

html.site-dark body .bookShelf .theme_toggle.is-to-light .theme_toggle_icon::before,
body.site-dark .bookShelf .theme_toggle.is-to-light .theme_toggle_icon::before {
    box-shadow: 0 -8px 0 #f4c453, 0 8px 0 #f4c453, 8px 0 0 #f4c453, -8px 0 0 #f4c453, 6px 6px 0 #f4c453, -6px -6px 0 #f4c453, 6px -6px 0 #f4c453, -6px 6px 0 #f4c453;
}

html.site-dark body .bookShelf .theme_toggle:hover.is-to-dark .theme_toggle_icon,
body.site-dark .bookShelf .theme_toggle:hover.is-to-dark .theme_toggle_icon {
    background: #73dca8;
}

html.site-dark body .mainNav,
body.site-dark .mainNav {
    background: linear-gradient(180deg, #2f8e67 0%, #2a7f5d 100%);
    box-shadow: 0 10px 24px rgba(9, 30, 22, .32);
}

html.site-dark body .mainNav .nav li a,
body.site-dark .mainNav .nav li a {
    color: #edf8f2;
}

html.site-dark body .mainNav .nav li a:hover,
body.site-dark .mainNav .nav li a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

html.site-dark.front-nav-home body .mainNav .nav li[data-nav="home"] a,
html.site-dark.front-nav-bookclass body .mainNav .nav li[data-nav="bookclass"] a,
html.site-dark.front-nav-ranking body .mainNav .nav li[data-nav="ranking"] a,
html.site-dark.front-nav-pay body .mainNav .nav li[data-nav="pay"] a,
html.site-dark.front-nav-author body .mainNav .nav li[data-nav="author"] a,
html.site-dark body .mainNav .nav li.on a,
body.site-dark .mainNav .nav li.on a {
    background: #ecfff5;
    color: #206046;
    border-color: rgba(255, 255, 255, .82);
    box-shadow: 0 6px 16px rgba(6, 34, 24, .36);
}

body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}

html.site-dark body .channelWrap,
html.site-dark body .wrap_bg,
html.site-dark body .wrap_inner,
html.site-dark body .userBox,
html.site-dark body .my_l,
html.site-dark body .my_r,
html.site-dark body .my_bookshelf,
html.site-dark body .layui-elem-quote,
body.site-dark .channelWrap,
body.site-dark .wrap_bg,
body.site-dark .wrap_inner,
body.site-dark .userBox,
body.site-dark .my_l,
body.site-dark .my_r,
body.site-dark .my_bookshelf,
body.site-dark .layui-elem-quote {
    background: #1a2027 !important;
    color: #d1d7df;
    border-color: #2d3744 !important;
}

html.site-dark body table,
html.site-dark body th,
html.site-dark body td,
body.site-dark table,
body.site-dark th,
body.site-dark td {
    border-color: #2d3744;
}

html.site-dark body .updateTable,
html.site-dark body .dataTable,
html.site-dark body .rankTable,
html.site-dark body .classTable,
body.site-dark .updateTable,
body.site-dark .dataTable,
body.site-dark .rankTable,
body.site-dark .classTable {
    color: #cfd8e3 !important;
}

html.site-dark body .updateTable th,
html.site-dark body .rankTable th,
html.site-dark body .dataTable th,
html.site-dark body .classTable th,
body.site-dark .updateTable th,
body.site-dark .rankTable th,
body.site-dark .dataTable th,
body.site-dark .classTable th {
    background: #222d39 !important;
    color: #dbe5f0 !important;
    border-color: #334152 !important;
}

html.site-dark body .updateTable td,
html.site-dark body .rankTable td,
html.site-dark body .dataTable td,
html.site-dark body .classTable td,
body.site-dark .updateTable td,
body.site-dark .rankTable td,
body.site-dark .dataTable td,
body.site-dark .classTable td {
    background: #18212b !important;
    color: #cfd8e3 !important;
    border-color: #2d3744 !important;
}

html.site-dark body .updateTable tr:nth-child(2n) td,
html.site-dark body .rankTable tr:nth-child(2n) td,
html.site-dark body .dataTable tr:nth-child(2n) td,
html.site-dark body .classTable tr:nth-child(2n) td,
body.site-dark .updateTable tr:nth-child(2n) td,
body.site-dark .rankTable tr:nth-child(2n) td,
body.site-dark .dataTable tr:nth-child(2n) td,
body.site-dark .classTable tr:nth-child(2n) td {
    background: #141d26 !important;
}

html.site-dark body .updateTable .name a,
html.site-dark body .updateTable .chapter a,
html.site-dark body .updateTable .author a,
html.site-dark body .rankTable .name a,
html.site-dark body .rankTable .chapter a,
html.site-dark body .rankTable .author a,
html.site-dark body .classTable .name a,
html.site-dark body .classTable .chapter a,
html.site-dark body .classTable .author a,
html.site-dark body .dataTable a,
body.site-dark .updateTable .name a,
body.site-dark .updateTable .chapter a,
body.site-dark .updateTable .author a,
body.site-dark .rankTable .name a,
body.site-dark .rankTable .chapter a,
body.site-dark .rankTable .author a,
body.site-dark .classTable .name a,
body.site-dark .classTable .chapter a,
body.site-dark .classTable .author a,
body.site-dark .dataTable a {
    color: #d6e0ea !important;
}

html.site-dark body .updateTable .chapter a,
html.site-dark body .rankTable .chapter a,
html.site-dark body .classTable .chapter a,
body.site-dark .updateTable .chapter a,
body.site-dark .rankTable .chapter a,
body.site-dark .classTable .chapter a {
    color: #aab8c8 !important;
}

html.site-dark body input,
html.site-dark body textarea,
html.site-dark body select,
body.site-dark input,
body.site-dark textarea,
body.site-dark select {
    color: #e4eaf2;
    background: #121820;
    border-color: #35404d;
}

html.site-dark body .btn_gray,
body.site-dark .btn_gray {
    border-color: #3d4957;
    background: #222b35;
    color: #d3dbe6;
}

html.site-dark body .btn_ora_white,
body.site-dark .btn_ora_white {
    border-color: #57b286;
    color: #7fd9ad;
    background: #1a232d;
}

html.site-dark body .footer,
body.site-dark .footer {
    background: transparent;
}

html.site-dark body .copyright ul li,
html.site-dark body .copyright .menu a,
html.site-dark body .copyright .line,
html.site-dark body .copyright p,
body.site-dark .copyright ul li,
body.site-dark .copyright .menu a,
body.site-dark .copyright .line,
body.site-dark .copyright p {
    color: #8d98a6;
}

@media (max-width: 768px) {
    .bookShelf .theme_toggle {
        margin-top: 0;
        margin-left: 4px;
        width: 26px;
        height: 26px;
    }

    .bookShelf .theme_toggle .theme_toggle_icon {
        width: 12px;
        height: 12px;
    }

    .bookShelf .theme_toggle.is-to-light .theme_toggle_icon {
        width: 9px;
        height: 9px;
    }

    .bookShelf .theme_toggle.is-to-light .theme_toggle_icon::before {
        box-shadow: 0 -7px 0 #f2b23b, 0 7px 0 #f2b23b, 7px 0 0 #f2b23b, -7px 0 0 #f2b23b, 5px 5px 0 #f2b23b, -5px -5px 0 #f2b23b, 5px -5px 0 #f2b23b, -5px 5px 0 #f2b23b;
    }

    body.site-dark .bookShelf .theme_toggle.is-to-light .theme_toggle_icon::before {
        box-shadow: 0 -7px 0 #f4c453, 0 7px 0 #f4c453, 7px 0 0 #f4c453, -7px 0 0 #f4c453, 5px 5px 0 #f4c453, -5px -5px 0 #f4c453, 5px -5px 0 #f4c453, -5px 5px 0 #f4c453;
    }

    .topMain .box_center {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo shelf"
            "search search";
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
    }

    .topMain .box_center .logo {
        grid-area: logo;
        min-width: 0;
    }

    .topMain .box_center .bookShelf {
        grid-area: shelf;
        min-width: 0;
        margin-left: auto;
        justify-content: flex-end;
    }

    .topMain .box_center .searchBar {
        grid-area: search;
        min-width: 0;
    }

    .bookShelf {
        width: auto;
        max-width: none;
        gap: 5px;
        margin-left: auto;
        padding-bottom: 0;
    }

    .bookShelf .sj_link,
    .bookShelf .theme_toggle,
    .bookShelf .user_link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .bookShelf .user_link {
        padding-left: 0;
        font-size: 13px;
    }

    .bookShelf .line {
        padding: 0 3px;
    }
}