@font-face {
    font-family: "icon";
    src: url('//at.alicdn.com/t/font_1185892_hpotkr9gw3u.eot?t=1607674621035');
    /* IE9 */
    src: url('//at.alicdn.com/t/font_1185892_hpotkr9gw3u.eot?t=1607674621035#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('//at.alicdn.com/t/font_1185892_hpotkr9gw3u.woff?t=1607674621035') format('woff'), url('//at.alicdn.com/t/font_1185892_hpotkr9gw3u.ttf?t=1607674621035') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1185892_hpotkr9gw3u.svg?t=1607674621035#icon') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: icon!important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-font-setting:before {
    content: "\e68e";
}

.icon-check-tip:before {
    content: "\e69c"
}

.icon-click:before {
    content: "\e602"
}

.icon-check:before {
    content: "\e6f3"
}

.icon-vip:before {
    content: "\e62f"
}

.icon-detail:before {
    content: "\e674"
}

.icon-user:before {
    content: "\e601"
}

.icon-bookcase:before {
    content: "\e610"
}

.icon-more:before {
    content: "\e624"
}

.icon-reward:before {
    content: "\e600"
}

.icon-ck:before {
    content: "\e62c"
}

.icon-font-larger:before {
    content: "\e60d"
}

.icon-font-smaller:before {
    content: "\e611"
}

.icon-home:before {
    content: "\e63c"
}

.icon-menu:before {
    content: "\e6e4"
}

.icon-pre:before {
    content: "\e9c4"
}

.icon-catalogue:before {
    content: "\e693"
}

.icon-revert:before {
    content: "\e638"
}

.icon-down:before {
    content: "\e6a4"
}

.icon-down:after {
    content: "倒序"
}

.icon-top:before {
    content: "\e6a5"
}

.icon-top:after {
    content: "正序"
}

.icon-moon:before {
    content: "\e643"
}

.icon-download:before {
    content: "\e60a"
}

.icon-less:before {
    content: "\e629"
}

.icon-sun:before {
    content: "\e668"
}

.icon-read-list:before {
    content: "\e6a3"
}

.icon-setting:before {
    content: "\e78a"
}

a,b,body,button,dd,del,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,hr,html,i,iframe,input,label,li,ol,p,pre,span,strong,table,tbody,td,textarea,th,u,ul {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all
}

body,html {
    width: 100%;
    height: 100%;
    max-width: 750px;
    margin: 0 auto;
}

html {
    font-size: 16px;
    font-size: calc(100% + 2 * (100vw - 375px)/ 39);
    font-size: calc(16px + 2 * (100vw - 375px)/ 39)
}

@media screen and (max-width: 320px) {
    html {
        font-size:14px
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size:calc(112.5% + 4 * (100vw - 414px)/ 586);
        font-size: calc(18px + 4 * (100vw - 414px)/ 586)
    }
}

@media screen and (min-width: 600px) {
    html {
        font-size:calc(125% + 4 * (100vw - 600px)/ 400);
        font-size: calc(20px + 4 * (100vw - 600px)/ 400)
    }
}

@media screen and (min-width: 1600px) {
    html {
        font-size:calc(137.5% + 6 * (100vw - 1000px)/ 1000);
        font-size: calc(22px + 6 * (100vw - 1000px)/ 1000)
    }
}

body,button,input,select,textarea {
    font-family: sans-serif
}

button,h1,h2,h3,h4,h5,h6,input,select,textarea {
    font-size: 100%
}

body {
    background-size: 100%;
    color: #333;
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    font-size: 150%;
    -webkit-user-select: none;
    fill: currentColor;
    -webkit-tap-highlight-color: rgba(248,230,228,0);
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none
}

em,i {
    font-style: normal
}

ol,ul {
    list-style: none
}

input,select,textarea {
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none
}

input[type=text] {
    -webkit-border-radius: 0
}

button,button:active,button:focus,input[type=button],input[type=file],input[type=submit] {
    cursor: pointer;
    -webkit-appearance: none;
    outline: 0;
    border: none
}

a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    text-decoration: none;
    color: inherit;
    outline: 0
}

body.iphone a[href]:active,body.iphone button:active {
    background-image: none
}

.careMsak {
    width: 100%;
    height: 100%;
    background-color: rgba(51,51,51,.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}

.er-box {
    position: relative;
    width: 296px
}

.detail-content {
    width: 85%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-rasdiusa: 10px;
    z-index: 20;
    display: none
}

#stop-box {
    padding-top: 35px;
    padding-bottom: 38px
}

.mask-title {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 70%;
    margin: 2rem auto 15px
}

.care-title {
    font-size: 18px;
    color: #AC8624
}

.mask-line {
    border-top: 1px solid #AC8624;
    width: 50px;
    margin-top: 12px
}

.erImg {
    width: 218px;
    height: 218px;
    display: block;
    margin: 0 auto 16px
}

.care-hint {
    font-size: 13px;
    color: #000;
    text-align: center;
    height: 25px;
    line-height: 25px
}

.i-know {
    width: 100%;
    height: 46px;
    line-height: 46px;
    background-color: #f2f2f2;
    color: #9d9d9d;
    font-size: 13px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-rasdiusa: 0 0 10px 10px;
    border-top: 1px solid #d6d6d6
}

.poup {
    position: fixed;
    bottom: 0;
    bottom: -30rem;
    left: 0;
    z-index: 9;
    width: 100%;
    border-top: 1px solid #ddd;
    background: #fff;
    color: #333;
    text-align: center
}

.btn-care {
    width: 74px;
    height: 24px;
    border: 1px solid #F25449;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 13px;
    color: #F25449;
    outline: 0;
    background-color: transparent;
    margin: 18px 0;
}

.care-our {
    font-size: 14px;
    line-height: 15px;
    color: #33373D;
    margin-top: 2px
}

.more-content {
    color: #878487;
    font-size: 13px;
    line-height: 13px;
    margin-top: 6px
}

.flex {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box
}

.flex-box {
    -webkit-box-align: center;
    align-items: center;
    -webkit-align-items: center
}

.flex-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.flex-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.flex-one {
    flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1
}

.flex-direction {
    flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%)
}

.display-row1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.display-row2 {
    overflow: hidden;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.display-row3 {
    overflow: hidden;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all
}

#readerPage {
    background-color: #c2b192;
    background-image: url(../images/skin-default.jpg);
    background-repeat: repeat-y;
    background-size: contain;
    padding-top: 1rem;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0
}

.header-title {
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    max-width: 750px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    height: 2rem;
    line-height: 2rem;
    font-size: .75rem;
    padding: 0 1rem;
    font-weight: 400;
    color: #666;
    border: none;
    background: #c2b192;
    background-image: url(../images/skin-default.jpg);
    z-index: 9;
}

.control-panel-tap {
    background: rgba(0,0,0,.2);
    position: fixed;
    left: 25%;
    right: 25%;
    top: 8rem;
    border: 2px solid #fff;
    border-radius: .5rem;
    bottom: 8rem;
    z-index: 6;
    color: #fff;
    text-align: center;
    padding: 30% 0;
    font-size: 1rem
}

.control-panel-tap.hidden {
    opacity: 0
}

.control-panel-tap .icon-click {
    font-size: 6rem
}

.control-panel-mask {
    background: rgba(0,0,0,.2);
    position: fixed;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 750px;
    top: 0;
    bottom: 0;
    z-index: 10
}

.control-panel header {
    color: #dedede;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    top: -3.1rem;
    background: rgba(0,0,0,.88);
    transition: all .2s ease;
    z-index: 9
}

.control-panel.active header {
    top: 0
}

.control-panel footer {
    color: #eee;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    bottom: -3.25rem;
    height: 3.2rem;
    background: rgba(0,0,0,.88);
    transition: all .2s ease;
    z-index: 9
}

.control-panel.active footer {
    bottom: -.2rem;
    margin: 0
}

.control-panel footer a {
    display: block;
    line-height: 1.4;
    width: 3em;
    text-align: center;
    font-size: 1rem;
    padding: .35rem;
    color: #dedede
}

.control-panel footer a p {
    font-size: .5em;
    margin: 0
}

.control-panel header a {
    text-align: center;
    display: block;
    width: 3rem;
    line-height: 3rem;
    height: 3rem;
    font-size: 1rem
}

.control-panel .ctrl-right {
    position: fixed;
    top: 6rem;
    right: -6em;
    background: #000;
    color: #eee;
    border-radius: 3rem 0 0 3rem;
    font-size: 0.875rem;
    padding: .3rem .5rem .3rem .875rem;
    transition: all .2s ease;
    z-index: 9
}

.control-panel.active .ctrl-right {
    right: 0
}

.control-panel .more {
    background: rgba(0,0,0,.88);
    position: fixed;
    right: 0;
    top: 3rem;
    color: #eee;
    opacity: 0;
    padding: .5rem 0;
    transition: all .2s ease;
    z-index: -1
}

@media (min-width:750px) {
    .control-panel .more{
        right: calc((100% - 750px) / 2);
    }
}

.control-panel.more-active .more {
    opacity: 1;
    z-index: 10
}

.control-panel .more a {
    display: block;
    line-height: 2rem;
    font-size: .875rem;
    padding: 0 1rem;
    color: #dedede
}

.control-panel .more a .icon {
    margin-right: .75rem
}

.control-panel .setting {
    background: rgba(0,0,0,.88);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    right: 0;
    font-size: 1rem;
    bottom: -5.99rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #eee;
    transition: all .2s ease;
    z-index: 8
}

.control-panel .setting .setting-font {
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.control-panel .setting .setting-font a {
    display: block;
    height: 2.4rem;
    line-height: 2.4rem;
    text-align: center;
    width: 15%
}

.control-panel.setting-active .setting {
    bottom: 3rem
}

.control-panel .setting .progress {
    background: #666;
    position: relative;
    margin-top: 1.1rem;
    height: .2rem;
    width: 70%;
    border-radius: 1rem;
    overflow: hidden
}

.control-panel .setting .progress .value {
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    transition: .2s all ease;
    background: #F25449
}

.control-panel .setting .setting-skin {
    padding: .5rem 5%
}

.control-panel .setting .setting-skin a.skin-item {
    border-radius: 4px;
    background: #fff;
    display: block;
    height: 2rem;
    width: 22%;
    box-sizing: border-box;
    background-image: url(../images/skin-default.jpg);
    position: relative;
    background-size: contain;
    overflow: hidden;
    font-family: icon!important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.control-panel .setting .setting-skin a.skin-item[data-skin=blue] {
    background: url(https://res.luochu.com/m/images/food.png);
}

.control-panel .setting .setting-skin a.skin-item[data-skin=green] {
    background: url(../images/skin-green.png?v=1)
}

.control-panel .setting .setting-skin a.skin-item[data-skin=pink] {
    background-color: #f8e6e4;
    background-image: url(../images/skin-pink.png);
    background-size: 232px 232px
}

.chapter-content {
    font-size: 1.25rem;
    line-height: 1.8;
    padding: 1rem
}

.chapter-content h1 {
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 400;
    margin: 1em 0
}

.chapter-content p {
    text-align: justify;
    margin-bottom: .25rem
}

.chapter-content div:nth-last-child(1) {
    position: relative;
    z-index: 8;
}

.btn-container {
    padding: 1rem 0 2rem 0;
    font-size: 1.15rem;
    color: #F25449;
    line-height: 1.8;
    z-index: 7;
    position: relative
}

.btn-container .btn {
    color: #eee;
    background-color: #F25449;
    text-align: center;
    display: block;
    border-radius: 2rem;
    font-size: 1rem;
    line-height: 2.5;
    margin-bottom: .5rem
}

.catalogue-container {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    z-index: 10
}

.catalogue-container.active {
    visibility: visible
}

.catalogue-container .catalogue-mask {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.44);
    transition: .2s all ease;
    opacity: 0
}

.catalogue-container.active .catalogue-mask {
    opacity: 1
}

.catalogue {
    position: absolute;
    right: -88%;
    width: 88%;
    top: 0;
    bottom: 0;
    background: #fbfbfb;
    font-size: .875rem;
    z-index: 11;
    box-sizing: border-box;
    transition: .2s all ease
}

.catalogue h2 {
    text-align: center;
    color: #F25449;
    font-size: 1rem;
    line-height: 3rem;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    background: #fff;
    width: 88%;
    right: -88%;
    transition: .2s all ease;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.22)
}

.catalogue-container.active .catalogue,.catalogue-container.active .catalogue h2 {
    right: 0
}

.catalogue h2 .icon {
    position: absolute;
    right: 0;
    display: block;
    top: 0;
    height: 3rem;
    line-height: 3rem;
    width: 3.5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 400
}

.catalogue a {
    display: block;
    padding: 0 1rem;
    box-sizing: border-box;
    line-height: 2.5rem;
    border-bottom: 1px solid #f5f5f5
}

.catalogue .chapters {
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll
}

.catalogue a.current {
    color: #F25449
}

.catalogue a.place-holder {
    border-color: rgba(248,230,228,0);
    text-align: center
}

.catalogue a p {
    width: 90%;
    overflow: hidden
}

.catalogue a i {
    display: block;
    font-weight: 700;
    color: #ff9800
}

.catalogue-container .loading {
    width: 4rem;
    height: 2rem;
    margin: 1rem auto;
    display: none
}

.catalogue-container .loading.show {
    display: block
}

.loading span {
    display: inline-block;
    width: 6px;
    height: 100%;
    border-radius: 4px;
    background: rgba(242,84,73,.85);
    -webkit-animation: load 1s ease infinite
}

@-webkit-keyframes load {
    0%,100% {
        height: 1rem;
        background: rgba(242,84,73,.85);
        margin: .5rem 0
    }

    50% {
        height: 2rem;
        margin: 0 0;
        background: rgba(242,84,73,.85)
    }
}

.loading span:nth-child(2) {
    -webkit-animation-delay: .2s
}

.loading span:nth-child(3) {
    -webkit-animation-delay: .4s
}

.loading span:nth-child(4) {
    -webkit-animation-delay: .6s
}

.loading span:nth-child(5) {
    -webkit-animation-delay: .8s
}

.subscribe-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 100%;
    z-index: 8;
}

.subscribe-panel form {
    padding: 0 15px 1rem 15px;
    background-color: #c2b192;
    background-image: url(../images/skin-default.jpg);
    background-size: contain;
    float: left;
    width: 100%;
    box-sizing: border-box
}

.subscribe-panel form:after {
    content: '';
    clear: both
}

.subscribe-panel .panel-title {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    margin-bottom: .75rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: #444;
    text-align: center;
    font-size: .875rem;
    font-weight: 700
}

.subscribe-panel .panel-title .panel-title-line {
    display: block;
    border-top: 1px solid #b8a481;
    height: 1px;
    margin-top: .625rem;
    box-sizing: border-box;
    flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1
}

.subscribe-panel .panel-title .panel-title-text {
    display: block;
    margin: 0 .625rem
}

.subscribe-panel .btn {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
    height: 3rem;
    -webkit-border-radius: .26rem;
    border-radius: .25rem;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 3rem;
    box-sizing: border-box
}

.subscribe-panel .btn-submit {
    margin-top: .75rem;
    outline: 0;
    border: none;
    background-color: #F25449;
    color: #fff
}

.subscribe-panel .btn-o {
    display: block;
    border: 1px solid #F25449;
    color: #F25449;
}

.subscribe-panel p {
    text-indent: 0;
    font-size: .75rem;
    line-height: 2;
    color: #333;
    text-align: left;
    margin-bottom: 0
}

.subscribe-panel p.auto-subTip {
    color: #777;
    line-height: 1rem;
    padding-bottom: .5rem
}

.subscribe-panel p.auto-subTip .icon-check {
    color: #F25449;
    margin-right: .5rem;
    font-size: 1rem
}

.subscribe-panel .money {
    padding: 0 5px;
    color: #F25449
}

.subscribe-panel .old-price {
    color: #999;
    text-decoration: line-through
}

.subscribe-panel .transit {
    height: 3rem;
    background-image: url(../images/skin-default-gc.png);
    background-size: contain
}

.subscribe-panel .icon-check {
    color: #F25449;
    margin-right: .5rem;
    font-size: 1rem;
}

/*.subscribe-panel .transit{background-image:-webkit-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));background-image:-moz-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));background-image:-o-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));background-image:-ms-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));background-image: linear-gradient(to top,#f5f5f6,#f2f4f4,rgba(185,230,242,0));}*/
body[data-fontsize='-4'] .chapter-content {
    font-size: .55em
}

body[data-fontsize='-4'] .control-panel .setting .progress .value {
    right: 100%
}

body[data-fontsize='-3'] .chapter-content {
    font-size: .6em
}

body[data-fontsize='-3'] .control-panel .setting .progress .value {
    right: 87.5%
}

body[data-fontsize='-2'] .chapter-content {
    font-size: .65em
}

body[data-fontsize='-2'] .control-panel .setting .progress .value {
    right: 75%
}

body[data-fontsize='-1'] .chapter-content {
    font-size: .75em
}

body[data-fontsize='-1'] .control-panel .setting .progress .value {
    right: 62.5%
}

body[data-fontsize='0'] .chapter-content {
    font-size: .85em
}

body[data-fontsize='0'] .control-panel .setting .progress .value {
    right: 50%
}

body[data-fontsize='1'] .chapter-content {
    font-size: .95em
}

body[data-fontsize='1'] .control-panel .setting .progress .value {
    right: 37.5%
}

body[data-fontsize='2'] .chapter-content {
    font-size: 1.05em
}

body[data-fontsize='2'] .control-panel .setting .progress .value {
    right: 25%
}

body[data-fontsize='3'] .chapter-content {
    font-size: 1.15em
}

body[data-fontsize='3'] .control-panel .setting .progress .value {
    right: 12.5%
}

body[data-fontsize='4'] .chapter-content {
    font-size: 1.25em
}

body[data-fontsize='4'] .control-panel .setting .progress .value {
    right: 0
}

body.default .control-panel .setting .setting-skin a.skin-item[data-skin=default] {
    border: 2px solid #F25449
}

body.default .control-panel .setting .setting-skin a.skin-item[data-skin=default]:before {
    content: "\e69c";
    position: absolute;
    right: 0;
    top: 0;
    color: #F25449;
    line-height: 1
}

body.blue #readerPage {
    background: url(https://res.luochu.com/m/images/food.png);
}

body.blue .header-title {
    background: url(https://res.luochu.com/m/images/food.png);
}

body.blue .subscribe-panel .transit {
    background-image: -webkit-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));
    background-image: -moz-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));
    background-image: -o-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));
    background-image: -ms-linear-gradient(to top,#b9e6f2,#b9e6f2,rgba(185,230,242,0));
    background-image: linear-gradient(to top,#f5f5f6,#f2f4f4,rgba(185,230,242,0));
}

body.blue .subscribe-panel form {
    padding: 0 15px 1rem 15px;
    background: #f4f5f5;
    background-size: contain;
}

/*body.blue .subscribe-panel .btn-o{background:#b9e6f2}*/
body.blue .subscribe-panel .panel-title .panel-title-line {
    border-top: 1px solid #e9e9e9;
}

body.blue .control-panel .setting .setting-skin a.skin-item[data-skin=blue] {
    border: 2px solid #F25449
}

body.blue .control-panel .setting .setting-skin a.skin-item[data-skin=blue]:before {
    content: "\e69c";
    position: absolute;
    right: 0;
    top: 0;
    color: #F25449;
    line-height: 1
}

body.green #readerPage {
    background: url(../images/skin-green.png?v=1);
    background-size: 50px 50px;
    background-repeat: repeat;
}

body.green .header-title {
    background: url(../images/skin-green.png?v=1);
    background-size: 365px 317px;
    background-repeat: repeat;
}

body.green .subscribe-panel .transit {
    background-image: -webkit-linear-gradient(to top,#f6f1e7,#f6f1e7,rgba(248,243,233,0));
    background-image: -moz-linear-gradient(to top,#f6f1e7,#f6f1e7,rgba(248,243,233,0));
    background-image: -o-linear-gradient(to top,#f6f1e7,#f6f1e7,rgba(248,243,233,0));
    background-image: -ms-linear-gradient(to top,#f6f1e7,#f6f1e7,rgba(248,243,233,0));
    background-image: linear-gradient(to top,#f6f1e7,#f6f1e7,rgba(248,243,233,0));
}

body.green .subscribe-panel form {
    padding: 0 1rem;
    background: #f8f3e9;
    background-repeat: repeat
}

body.green .subscribe-panel .btn-o {
    background: rgba(248,230,228,0)
}

body.green .subscribe-panel .panel-title .panel-title-line {
    border-top: 1px solid #d8e3dd;
}

body.green .control-panel .setting .setting-skin a.skin-item[data-skin=green] {
    border: 2px solid #F25449
}

body.green .control-panel .setting .setting-skin a.skin-item[data-skin=green]:before {
    content: "\e69c";
    position: absolute;
    right: 0;
    top: 0;
    color: #F25449;
    line-height: 1
}

body.pink #readerPage {
    background-color: #f8e6e4;
    background-image: url(../images/skin-pink.png);
    background-size: 232px 232px;
    background-repeat: repeat
}

body.pink .header-title {
    background-color: #f8e6e4;
    background-image: url(../images/skin-pink.png);
    background-size: 232px 232px;
    background-repeat: repeat
}

body.pink .subscribe-panel .transit {
    background-image: -webkit-linear-gradient(to top,#f8e6e4,#f8e6e4,rgba(248,230,228,0));
    background-image: -moz-linear-gradient(to top,#f8e6e4,#f8e6e4,rgba(248,230,228,0));
    background-image: -o-linear-gradient(to top,#f8e6e4,#f8e6e4,rgba(248,230,228,0));
    background-image: -ms-linear-gradient(to top,#f8e6e4,#f8e6e4,rgba(248,230,228,0));
    background-image: linear-gradient(to top,#f8e6e4,#f8e6e4,rgba(248,230,228,0))
}

body.pink .subscribe-panel form {
    padding: 0 1rem;
    background-color: #f8e6e4;
    background-image: url(../images/skin-pink.png);
    background-size: 232px 232px;
    background-repeat: repeat;
    background: #f8e6e4
}

body.pink .subscribe-panel .btn-o {
    background: rgba(248,230,228,0)
}

body.pink .subscribe-panel .panel-title .panel-title-line {
    border-top: 1px solid #e7d7d6;
}

body.pink .control-panel .setting .setting-skin a.skin-item[data-skin=pink] {
    border: 2px solid #F25449
}

body.pink .control-panel .setting .setting-skin a.skin-item[data-skin=pink]:before {
    content: "\e69c";
    position: absolute;
    right: 0;
    top: 0;
    color: #F25449;
    line-height: 1
}

body.night #readerPage {
    background: #202020;
    color: #636363
}

body.night .header-title {
    background: #202020;
    color: #636363
}

body.night .ctrl-item-mode-change .icon-moon:before {
    content: "\e668"
}

body .ctrl-item-mode-change p::after {
    content: '夜间'
}

body.night .ctrl-item-mode-change p::after {
    content: '日间'
}

body.night .catalogue {
    background: #202020
}

body.night .catalogue h2 {
    background: #202020
}

body.night .catalogue a {
    color: #666;
    border-bottom: 1px solid #333
}

body.night .catalogue a.current {
    color: #F25449;
}

body.night .subscribe-panel form {
    padding: 0 15px;
    background: #202020;
    background-size: contain
}

body.night .subscribe-panel .transit {
    background-image: -webkit-linear-gradient(to top,#202020,#202020,rgba(32,32,32,0));
    background-image: -moz-linear-gradient(to top,#202020,#202020,rgba(32,32,32,0));
    background-image: -o-linear-gradient(to top,#202020,#202020,rgba(32,32,32,0));
    background-image: -ms-linear-gradient(to top,#202020,#202020,rgba(32,32,32,0));
    background-image: linear-gradient(to top,#202020,#202020,rgba(32,32,32,0))
}

body.night .subscribe-panel .btn-o {
    background: #202020
}

body.night .subscribe-panel .panel-title .panel-title-line {
    border-top: 1px solid #666
}

body.night .subscribe-panel p {
    color: #666
}

body.locked {
    overflow: hidden
}

.followLeader {
    position: fixed;
    z-index: 8;
    right: 0;
    bottom: 1rem;
    background: rgba(0,0,0,.88);
    font-size: .625rem;
    color: #eee;
    padding: .5rem .5rem .5rem .75rem;
    border-radius: 3rem 0 0 3rem;
    transition: all .3s ease;
    right: -11rem
}

.followLeader.show {
    right: 0
}

.followLeader .flex {
    align-items: center;
    align-content: center
}

.followLeader img {
    width: 1.5rem;
    margin: .3rem .5rem 0 0;
    vertical-align: middle;
    border-radius: 50%
}

.followLeader div p:last-child {
    font-size: .5rem;
    color: #999
}

.followLeader a {
    display: inline-block;
    color: #F25449;
    border-radius: 4px;
    border: 1px solid #F25449;
    font-size: .625rem;
    padding: 4px 8px;
    margin-top: 12px
}

.followLeader .close-panel {
    position: absolute;
    right: 0;
    top: 0px;
    padding: 0 .5rem;
    line-height: 1.8;
    font-size: 0.625rem;
    color: #999999;
    border-bottom-left-radius: 4px;
}

.followLeader .close-panel img {
    margin: 0;
    width: 0.5rem;
    height: 0.5rem;
}

.articlecon h1 {
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 400;
    margin: 1em 0;
}

.module-container {
    background-color: #fff;
}

.module-container .module-header {
    position: relative;
    margin-bottom: -14px;
    padding: 14px;
    font-size: 16px;
    line-height: 24px;
}

.module-container .module-header .module-title {
    font-weight: 400;
}

.module-container .module-header .module-title:before {
    display: inline-block;
    margin-right: 5px;
    width: 4px;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(290deg, rgba(224, 95, 81, .66), rgba(224, 95, 81, 1));
    content: " ";
}

.module-container .module-content {
    padding-bottom: 14px;
}

.normal-book {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    padding: .9375rem 14px;
    border-bottom: 1px solid #f1f1f1;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
}

.module-container img.cover {
    display: block;
    width: min(20vw, 150px);
    height: min(26.67vw, 200px);
    border: 1px solid #eee;
    -webkit-border-radius: .3125rem;
    border-radius: .3125rem;
    box-shadow: 0 4px 8px 0 rgba(51, 55, 61, .1);
}

.normal-book .book-info {
    display: flex;
    margin-left: 16px;
    text-align: left;
    justify-content: space-between;
    align-items: inherit;
    flex-direction: column;
    flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1;
}

.normal-book .title {
    display: -webkit-box;
    overflow: hidden;
    color: #000;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.normal-book .book-intro {
    display: -webkit-flex;
    display: -webkit-box;
    overflow: hidden;
    height: 40px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.normal-book .other {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

.detail {
    color: #666;
    font-size: 13px;
}

.normal-book .detail {
    text-align: right;
    font-size: 12px;
    -webkit-flex: 2;
    flex: 2;
    -webkit-box-flex: 2;
}

.bgcolor-yellow-o {
    background: #fff;
    color: #2795f7;
}

.bgcolor-main-o {
    background: #fff;
    color: #04b8ac;
}

.normal-book .detail em {
    position: relative;
    min-width: 30px;
    border-radius: 3px;
    font-size: 11.25px;
    line-height: 15px;
    display: inline-block;
    text-align: center;
    padding: 0 .25em;
    -webkit-transform: scale(1);
    transform: scale(1);
    vertical-align: bottom;
    height: 15px;
}

.bgcolor-yellow-o::after {
    border-color: #2795f7;
}

.bgcolor-main-o::after {
    border-color: #04b8ac;
}

.normal-book .detail em::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    border-radius: 5px;
    vertical-align: bottom;
    top: -1px;
}

.footer .copyright a:link, .footer .copyright a:visited {
    color: #333;
    text-decoration: none;
}

.footer .copyright {
    padding: 15px;
    color: #bbb;
    text-align: center;
    font-size: 14px;
}

nav[aria-label="breadcrumb"] .breadcrumb li {
    display: inline;
}