@import url(/static/css/page.css);

.biquge,
.biquge:root,
:root {
    --bs-body-color: #3a3a3a;
    --bs-border-color: rgba(0, 0, 0, .1);
    --bs-heading-color: #1a1a1a;
    --bs-border-radius: 2px;
    --bs-border-radius-sm: 2px;
    --bs-body-bg: #e9faff;
    --bs-link-color: #337ab7;
    --bs-link-hover-color: #f40;
    --bs-primary: #337ab7;
    --bs-primary-bg-subtle: #fef9ef;
    --bs-body-bg-rgb: 233, 250, 255;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 51, 122, 183;
    --bs-primary-bg-subtle-rgb: 254, 249, 239
}

.red,
.red:root {
    --bs-body-bg: #ffe7e9;
    --bs-link-color: #c62828;
    --bs-link-hover-color: #000;
    --bs-primary: #e53935;
    --bs-primary-bg-subtle: #ffebee;
    --bs-body-bg-rgb: 255, 205, 210;
    --bs-link-color-rgb: 198, 40, 40;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 229, 57, 53;
    --bs-primary-bg-subtle-rgb: 255, 235, 238
}

.pink,
.pink:root {
    --bs-body-bg: #ffeded;
    --bs-link-color: #ad1457;
    --bs-link-hover-color: #000;
    --bs-primary: #d81b60;
    --bs-primary-bg-subtle: #f5e4e4;
    --bs-body-bg-rgb: 235, 206, 206;
    --bs-link-color-rgb: 173, 20, 87;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 216, 27, 96;
    --bs-primary-bg-subtle-rgb: 245, 228, 228
}

.purple,
.purple:root {
    --bs-body-bg: #fcebff;
    --bs-link-color: #6a1b9a;
    --bs-link-hover-color: #f40;
    --bs-primary: #8e24aa;
    --bs-primary-bg-subtle: #f3e5f5;
    --bs-body-bg-rgb: 225, 190, 231;
    --bs-link-color-rgb: 106, 27, 154;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 142, 36, 170;
    --bs-primary-bg-subtle-rgb: 243, 229, 245
}

.deep-purple,
.deep-purple:root {
    --bs-body-bg: #efe6ff;
    --bs-link-color: #4527a0;
    --bs-link-hover-color: #f40;
    --bs-primary: #5e35b1;
    --bs-primary-bg-subtle: #ede7f6;
    --bs-body-bg-rgb: 209, 196, 233;
    --bs-link-color-rgb: 69, 39, 160;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 94, 53, 177;
    --bs-primary-bg-subtle-rgb: 237, 231, 246
}

.indigo,
.indigo:root {
    --bs-body-bg: #e9ecff;
    --bs-link-color: #283593;
    --bs-link-hover-color: #f40;
    --bs-primary: #3949ab;
    --bs-primary-bg-subtle: #e8eaf6;
    --bs-body-bg-rgb: 197, 202, 233;
    --bs-link-color-rgb: 40, 53, 147;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 57, 73, 171;
    --bs-primary-bg-subtle-rgb: 232, 234, 246
}

.blue,
.blue:root {
    --bs-body-bg: #e5f3ff;
    --bs-link-color: #1565c0;
    --bs-link-hover-color: #f40;
    --bs-primary: #1e88e5;
    --bs-primary-bg-subtle: #e3f2fd;
    --bs-body-bg-rgb: 187, 222, 251;
    --bs-link-color-rgb: 21, 101, 192;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 30, 136, 229;
    --bs-primary-bg-subtle-rgb: 227, 242, 253
}

.light-blue,
.light-blue:root {
    --bs-body-bg: #e3f6ff;
    --bs-link-color: #0277bd;
    --bs-link-hover-color: #f40;
    --bs-primary: #039be5;
    --bs-primary-bg-subtle: #e1f5fe;
    --bs-body-bg-rgb: 179, 229, 252;
    --bs-link-color-rgb: 2, 119, 189;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 3, 155, 229;
    --bs-primary-bg-subtle-rgb: 225, 245, 254
}

.cyan,
.cyan:root {
    --bs-body-bg: #e5fcff;
    --bs-link-color: #00838f;
    --bs-link-hover-color: #f40;
    --bs-primary: #00acc1;
    --bs-primary-bg-subtle: #e0f7fa;
    --bs-body-bg-rgb: 178, 235, 242;
    --bs-link-color-rgb: 0, 131, 143;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 0, 172, 193;
    --bs-primary-bg-subtle-rgb: 224, 247, 250
}

.teal,
.teal:root {
    --bs-body-bg: #e8fffd;
    --bs-link-color: #00695c;
    --bs-link-hover-color: #f40;
    --bs-primary: #00897b;
    --bs-primary-bg-subtle: #e0f2f1;
    --bs-body-bg-rgb: 178, 223, 219;
    --bs-link-color-rgb: 0, 105, 92;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 0, 137, 123;
    --bs-primary-bg-subtle-rgb: 224, 242, 241
}

.green,
.green:root {
    --bs-body-bg: #eeffee;
    --bs-link-color: #2e7d32;
    --bs-link-hover-color: #f40;
    --bs-primary: #43a047;
    --bs-primary-bg-subtle: #e8f5e9;
    --bs-body-bg-rgb: 200, 230, 201;
    --bs-link-color-rgb: 46, 125, 50;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 67, 160, 71;
    --bs-primary-bg-subtle-rgb: 232, 245, 233
}

.light-green,
.light-green:root {
    --bs-body-bg: #f7ffed;
    --bs-link-color: #558b2f;
    --bs-link-hover-color: #f40;
    --bs-primary: #7cb342;
    --bs-primary-bg-subtle: #f1f8e9;
    --bs-body-bg-rgb: 220, 237, 200;
    --bs-link-color-rgb: 85, 139, 47;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 124, 179, 66;
    --bs-primary-bg-subtle-rgb: 241, 248, 233
}

.lime,
.lime:root {
    --bs-body-bg: #fdffea;
    --bs-link-color: #9e9d24;
    --bs-link-hover-color: #f40;
    --bs-primary: #c0ca33;
    --bs-primary-bg-subtle: #f9fbe7;
    --bs-body-bg-rgb: 240, 244, 195;
    --bs-link-color-rgb: 158, 157, 36;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 192, 202, 51;
    --bs-primary-bg-subtle-rgb: 249, 251, 231
}

.yellow,
.yellow:root {
    --bs-body-bg: #fffce5;
    --bs-link-color: #f9a825;
    --bs-link-hover-color: #000;
    --bs-primary: #fbc02d;
    --bs-primary-bg-subtle: #fffde7;
    --bs-body-bg-rgb: 255, 249, 196;
    --bs-link-color-rgb: 249, 168, 37;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 251, 192, 45;
    --bs-primary-bg-subtle-rgb: 255, 253, 231
}

.amber,
.amber:root {
    --bs-body-bg: #fff8e3;
    --bs-link-color: #ff8f00;
    --bs-link-hover-color: #000;
    --bs-primary: #ffa000;
    --bs-primary-bg-subtle: #fff8e1;
    --bs-body-bg-rgb: 255, 236, 179;
    --bs-link-color-rgb: 255, 143, 0;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 255, 160, 0;
    --bs-primary-bg-subtle-rgb: 255, 248, 225
}

.orange,
.orange:root {
    --bs-body-bg: #fff4e3;
    --bs-link-color: #ef6c00;
    --bs-link-hover-color: #000;
    --bs-primary: #fb8c00;
    --bs-primary-bg-subtle: #fff3e0;
    --bs-body-bg-rgb: 255, 224, 178;
    --bs-link-color-rgb: 239, 108, 0;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 251, 140, 0;
    --bs-primary-bg-subtle-rgb: 255, 243, 224
}

.deep-orange,
.deep-orange:root {
    --bs-body-bg: #ffebe5;
    --bs-link-color: #d84315;
    --bs-link-hover-color: #000;
    --bs-primary: #f4511e;
    --bs-primary-bg-subtle: #fbe9e7;
    --bs-body-bg-rgb: 255, 204, 188;
    --bs-link-color-rgb: 216, 67, 21;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-primary-rgb: 244, 81, 30;
    --bs-primary-bg-subtle-rgb: 251, 233, 231
}

.brown,
.brown:root {
    --bs-body-bg: #fff2ee;
    --bs-link-color: #5d4037;
    --bs-link-hover-color: #f40;
    --bs-primary: #795548;
    --bs-primary-bg-subtle: #efebe9;
    --bs-body-bg-rgb: 215, 204, 200;
    --bs-link-color-rgb: 93, 64, 55;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 121, 85, 72;
    --bs-primary-bg-subtle-rgb: 239, 235, 233
}

.brown1,
.brown1:root {
    --bs-body-bg: #fbf7f0;
    --bs-link-color: #333;
    --bs-link-hover-color: #f40;
    --bs-primary: #8a5c3f;
    --bs-primary-bg-subtle: #fff;
    --bs-body-bg-rgb: 251, 247, 240;
    --bs-link-color-rgb: 51, 51, 51;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 138, 92, 63;
    --bs-primary-bg-subtle-rgb: 255, 255, 255
}

.grey,
.grey:root {
    --bs-body-bg: #f5f5f5;
    --bs-link-color: #616161;
    --bs-link-hover-color: #f40;
    --bs-primary: #757575;
    --bs-primary-bg-subtle: #fafafa;
    --bs-body-bg-rgb: 245, 245, 245;
    --bs-link-color-rgb: 97, 97, 97;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 117, 117, 117;
    --bs-primary-bg-subtle-rgb: 250, 250, 250
}

.blue-grey,
.blue-grey:root {
    --bs-body-bg: #f2fbff;
    --bs-link-color: #455a64;
    --bs-link-hover-color: #f40;
    --bs-primary: #607d8b;
    --bs-primary-bg-subtle: #eceff1;
    --bs-body-bg-rgb: 207, 216, 220;
    --bs-link-color-rgb: 69, 90, 100;
    --bs-link-hover-color-rgb: 255, 68, 0;
    --bs-primary-rgb: 96, 125, 139;
    --bs-primary-bg-subtle-rgb: 236, 239, 241
}

*,
html {
    line-break: anywhere;
    text-decoration: none !important
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-font-smoothing: antialiased;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 100vh
}

.body-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    flex-basis: auto
}

#bookIntro i,
#chaptercontent i,
.panel-chapterlist dd i {
    text-transform: none;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-family: yahei !important;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700
}

.navbar {
    --bs-navbar-color: #eeeeee;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff
}

.bs5-logo {
    width: 1.8rem;
    height: 1.8rem
}

.offcanvas-title {
    color: #ffffff
}

.dropdown-toggle::after {
    vertical-align: .2em
}

.dropdown-toggle.show::after {
    vertical-align: .3em;
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent
}

.dropdown-item {
    color: var(--bs-primary)
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-primary)
}

.active>.page-link,
.page-link.active,
.page-link:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary)
}

.page-link:hover {
    opacity: .8;
    color: #fff
}

.form-control {
    border-color: var(--bs-primary);
    background-color: rgba(255, 255, 255, .5)
}

.navbar .form-control {
    background-color: rgba(255, 255, 255, .8)
}

.input-group-text {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary)
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bs-link-color);
    --bs-btn-hover-bg: var(--bs-link-color);
    --bs-btn-hover-border-color: var(--bs-link-color);
    --bs-btn-active-bg: var(--bs-link-color);
    --bs-btn-active-border-color: var(--bs-link-color);
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: var(--bs-link-color)
}

.navbar .btn-outline-primary {
    --bs-btn-bg: rgba(255, 255, 255, .8)
}

.subnav::-webkit-scrollbar {
    height: 0
}

.card {
    --bs-card-bg: transparent
}

.badge {
    --bs-badge-font-weight: 400
}

.alert-primary {
    --bs-alert-color: var(--bs-link-color);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-border-color);
    --bs-alert-link-color: var(--bs-link-hover-color)
}

#carousel1 .carousel1 {
    height: 20rem
}

#carousel1 .carousel1 .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    background-size: cover;
    background-position: 50%;
    opacity: .5
}

#carousel1 .carousel1 .cover {
    width: 120px;
    height: 150px
}

#carousel1 .carousel-caption .des,
.book-coverlist .des {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.book-coverlist .des {
    display: -webkit-box
}

img.bookcover {
    width: 100px;
    height: 125px
}

.bookcover img.cover {
    width: 8.1rem;
    height: 10.8rem
}

.listpage {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between
}

.listpage,
.listpage span {
    line-height: 2.375rem
}

.listpage span {
    text-align: center
}

.listpage .left,
.listpage .right {
    width: 25%
}

.listpage .left a,
.listpage .right a {
    display: block;
    height: 2.375rem;
    border-radius: var(--bs-border-radius-sm);
    color: #fff
}

.listpage a.before {
    opacity: .5
}

.listpage a.before,
.listpage a.onclick {
    background-color: var(--bs-link-color)
}

.listpage a.onclick:hover {
    background-color: var(--bs-link-hover-color)
}

.listpage .middle {
    flex: 1 1 auto !important;
    margin-left: 1rem;
    margin-right: 1rem
}

.listpage .middle .form-select {
    text-align: center
}

.input-group>.form-control:focus,
.input-group>.form-control:focus-visible,
.listpage .middle .form-select:focus,
.listpage .middle .form-select:focus-visible {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: none
}

#apage {
    background-color: var(--bs-body-bg)
}

#apage #content #chaptercontent {
    margin: 0 auto;
    word-wrap: break-word;
    font-size: 1.25rem;
    line-height: 1.8;
    word-break: break-all;
    line-break: anywhere;
    text-align: justify
}

#apage #content #chaptercontent p {
    overflow: hidden;
    text-indent: 2em;
    line-height: 1.8em;
    padding: 0 1rem
}

.reader {
    background-color: rgba(255, 255, 255, .15)
}

#ReadSet .btn {
    padding: 0;
    min-width: 1.6rem;
    height: 1.6rem;
    line-height: 1rem
}

.divider {
    width: 100%;
    height: 1rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15)
}

.layui-layer-btn a {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary) !important;
    color: #fff !important
}

@media (max-width:767px) {
    .navbar-brand {
        max-width: calc(100% - 6rem)
    }

    .offcanvas,
    .offcanvas-lg,
    .offcanvas-md,
    .offcanvas-sm,
    .offcanvas-xl,
    .offcanvas-xxl {
        --bs-offcanvas-width: 50%;
        min-width: 250px;
        max-width: 300px
    }

    #carousel1 .carousel-caption.carousel-caption-site {
        top: 10%
    }
}

@media (min-width:768px) {
    #carousel1 .carousel-caption {
        top: 15%
    }

    #carousel1 .carousel-caption .des {
        display: -webkit-box !important;
        height: 4.5rem
    }
}