.default,.default:root,:root {
    --font-color: #71757f;
    --font-color-link: #5e7ce0;
    --font-color-hover: #344899;
    --bg-color-read: #f6f6f8;
    --bg-color-title: #e9edfa;
    --font-color-title: #252b3a;
    --bg-color-nav: #5e7ce0;
    --bg-color-nav-hover: #344899;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #e9edfa
}

.theme1,.theme1:root {
    --font-color: #71757f;
    --font-color-link: #43a047;
    --font-color-hover: #2e7d32;
    --bg-color-read: #e8f5e9;
    --bg-color-title: #c8e6c9;
    --font-color-title: #252b3a;
    --bg-color-nav: #43a047;
    --bg-color-nav-hover: #2e7d32;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #c8e6c9
}

.theme2,.theme2:root {
    --font-color: #71757f;
    --font-color-link: #cc6414;
    --font-color-hover: #9e3f00;
    --bg-color-read: #fff3e8;
    --bg-color-title: #ffe1c7;
    --font-color-title: #252b3a;
    --bg-color-nav: #cc6414;
    --bg-color-nav-hover: #9e3f00;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #ffe1c7
}

.theme3,.theme3:root {
    --font-color: #71757f;
    --font-color-link: #c4356e;
    --font-color-hover: #96114d;
    --bg-color-read: #ffedf3;
    --bg-color-title: #ffd4e3;
    --font-color-title: #252b3a;
    --bg-color-nav: #c4356e;
    --bg-color-nav-hover: #96114d;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #ffd4e3
}

.theme4,.theme4:root {
    --font-color: #71757f;
    --font-color-link: #6f42c9;
    --font-color-hover: #2a0c85;
    --bg-color-read: #f5f0ff;
    --bg-color-title: #e7d9ff;
    --font-color-title: #252b3a;
    --bg-color-nav: #6f42c9;
    --bg-color-nav-hover: #572db3;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #e7d9ff
}

.theme5,.theme5:root {
    --font-color: #71757f;
    --font-color-link: #3590cc;
    --font-color-hover: #0f6999;
    --bg-color-read: #ebf6ff;
    --bg-color-title: #d1ebff;
    --font-color-title: #252b3a;
    --bg-color-nav: #3590cc;
    --bg-color-nav-hover: #0f6999;
    --font-color-nav: #fff;
    --font-color-nav-hover: #fff;
    --border-color: #d7d8da;
    --border-color-card: #b1d3ee
}

@font-face {
    font-family: yahei;

}

#chaptercontent i,.bookintro i,.chapterlist 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
}

html {
    font-size: 14px;
    font-size: calc(14px + (200vw - 480px)/80)
}

@media screen and (min-width: 320px) {
    html {
        font-size:calc(16px + (200vw - 640px)/55)
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size:calc(18px + (200vw - 750px)/39)
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size:calc(22px + (400vw - 1656px)/186)
    }
}

@media screen and (min-width: 600px) {
    html {
        font-size:calc(26px + (400vw - 2400px)/400)
    }
}

@media screen and (min-width: 1000px) {
    html {
        font-size:30px
    }
}

html {
    background-color: #fff;
    color: #71757f;
    color: var(--font-color);
    font-family: sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    fill: currentColor;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

input,input[type=button],input[type=reset],input[type=submit] {
    border: none;
    resize: none
}

a,article,aside,body,button,dd,details,div,dl,dt,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,img,input,li,menu,nav,ol,p,section,select,table,tbody,td,textarea,th,tr,ul {
    -webkit-tap-highlight-color: transparent
}

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

img {
    width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}

a,article,aside,body,button,dd,details,div,dl,dt,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,img,input,li,menu,nav,ol,p,section,select,table,tbody,td,textarea,th,tr,ul {
    margin: 0;
    padding: 0
}

em,i {
    font-style: normal
}

li,ul {
    list-style-type: none
}

strong {
    font-weight: 400
}

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

textarea {
    resize: none
}

p {
    word-wrap: break-word
}

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

.clear {
    zoom:1}

a {
    color: #5e7ce0;
    color: var(--font-color-link)
}

a,a:hover {
    text-decoration: none
}

a:hover {
    color: #344899;
    color: var(--font-color-hover)
}

ol,ul {
    list-style: none
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-family: Microsoft YaHei
}

img {
    border: none
}

input {
    font-family: Microsoft YaHei
}

a:active,a:hover,a:link,a:visited {
    background: 0 0;
    -webkit-tap-highlight-color: transparent
}

hr {
    width: 100%;
    border-style: solid;
    border-color: #d7d8da;
    border-color: var(--border-color)
}

.m-mt {
    margin-top: .75rem
}

.m-mb {
    margin-bottom: .75rem
}

.m-ml {
    margin-left: 1rem
}

.m-mr {
    margin-right: 1rem
}

.m-pt {
    padding-top: .75rem
}

.m-pb {
    padding-bottom: .75rem
}

.m-pl {
    padding-left: .75rem
}

.m-pr {
    padding-right: .75rem
}

.noempty {
    min-height: calc(100vh - 12.5rem)
}

.container {
    margin: 0 auto;
    width: 100%
}

.article .container {
    display: flex;
    flex-direction: column
}

h4 {
    padding: .75rem 1rem;
    background-color: #e9edfa;
    background-color: var(--bg-color-title);
    color: #252b3a;
    color: var(--font-color-title);
    font-size: 1rem;
    line-height: 1;
    position: relative
}

h4 .pull-right {
    position: absolute;
    right: 1rem;
    color: #71757f;
    color: var(--font-color);
    font-weight: 400;
    font-size: .875rem;
    line-height: 1rem
}

.header {
    position: relative;
    padding: .5rem 1rem;
    border-bottom: 1px solid #babbc0
}

.header.header-home {
    border-bottom: none
}

.header .left {
    padding: 0 2rem;
    line-height: 2;
    font-weight: 700;
    color: #252b3a;
    color: var(--font-color-title);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.header .btn,.header .left {
    text-align: center;
    font-size: 1rem;
	margin-bottom: 10px;
}

.header .btn {
    position: absolute;
    top: .5rem;
    display: block;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 2px;
    background-position: .375rem .375rem;
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
    color: #5e7ce0;
    color: var(--bg-color-nav);
    text-indent: -9999px;
    line-height: 2rem;
    cursor: pointer
}

.header .btn.back {
    left: .75rem
}

.header .btn.back:before {
    position: absolute;
    top: .55rem;
    left: .75rem;
    width: .75rem;
    height: .75rem;
    border-top: 2px solid #71757f;
    border-left: 2px solid #71757f;
    content: "";
    transform: rotate(-45deg)
}

.header .btn.home {
    /* right: .75rem; */
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM3MTc1N2YnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J001MjYuNjM1IDU4LjA2N2EyMS41MDQgMjEuNTA0IDAgMDEtMjcuNTAyLjE3Nmw0NzQuOTggMzgxLjUwNWEzMS41MzkgMzEuNTM5IDAgMTAzOS40OTYtNDkuMTUxTDUzOC42MjkgOS4wMDRhNDEuNjAzIDQxLjYwMyAwIDAwLTUxLjk4OC4yMzRMMTEuNTc0IDM5OC42NzJhMzEuNTM5IDMxLjUzOSAwIDEwMzkuOTk0IDQ4LjhMNTI2LjYzNSA1OC4wNjZ6bTQ4Ni45NzQgNTA2LjAybC00NzQuOTgtMzgxLjUwNGE0MS42MDMgNDEuNjAzIDAgMDAtNTEuOTg4LjIwNUwxMS41NzQgNTcyLjE5MmEzMS41MzkgMzEuNTM5IDAgMTAzOS45OTQgNDguOGw2Ni43NjMtNTQuNzF2MzYxLjYxYTk0LjY0NSA5NC42NDUgMCAwMDk0LjY3NCA5NC42NDVoMjI4LjcyN1Y3NzUuMjYxYTE1Ljc5OSAxNS43OTkgMCAwMTE1Ljc0LTE1Ljc5OGgxMTAuNDczYzguNjg5IDAgMTUuNzY5IDcuMDggMTUuNzY5IDE1Ljc5OHYyNDcuMjc2aDIyOC43MjdhOTQuNjE2IDk0LjYxNiAwIDAwOTQuNjQ1LTk0LjYxNVY1NTkuNDY1bDY2Ljk5NyA1My44MzJhMzEuNTM5IDMxLjUzOSAwIDEwMzkuNTI2LTQ5LjIxem0tMTY5LjYzIDM2My44MDVjMCAxNy40MzctMTQuMSAzMS41MzktMzEuNTY3IDMxLjUzOUg2NDYuODJWNzc1LjIzMmE3OC44NzYgNzguODc2IDAgMDAtNzguODc1LTc4LjkwNUg0NTcuNDcyYTc4Ljg3NiA3OC44NzYgMCAwMC03OC44NDYgNzguOTA1djE4NC4xOTlIMjEzLjAzNGMtMTcuNDY2IDAtMzEuNTk3LTE0LjEzMS0zMS41OTctMzEuNTM5VjUxNC41MjdsMzMxLjQ0Ny0yNzEuNjc2TDg0My45OCA1MDguNzkzdjQxOS4xMjl6Jy8+PC9zdmc+)
}

.header .btn.user {
    left: .75rem;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM3MTc1N2YnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J00xMDI0IDUxMi4wNkMxMDI0IDIyOS45MDYgNzk0LjA5NCAwIDUxMS45NCAwUzAgMjI5LjkwNiAwIDUxMi4wNmMwIDE1NS40MSA3MC41MDkgMjk1LjIxNSAxODAuMiAzODkuMTg1IDEuMzMgMS4zMyAyLjY2MSAyLjY2IDUuMiAzLjg3QzI3NC4xNzIgOTc5LjYxNiAzODcuODU2IDEwMjQgNTEzLjI3IDEwMjRjMTIyLjc1NCAwIDIzNi40MzktNDQuMzg1IDMyNS4yMDktMTE2LjIyNCA1LjItMS4zMyA5LjE5LTUuMiAxMS43My05LjE5Qzk1Ni4xNTMgODAzLjI4MyAxMDI0IDY2Ni4xMzggMTAyNCA1MTIuMDZ6bS05NzYuOTU1IDBjMC0yNTYuMDMgMjA4Ljk4NS00NjUuMDE1IDQ2NS4wMTUtNDY1LjAxNVM5NzcuMDc1IDI1Ni4wMyA5NzcuMDc1IDUxMi4wNmMwIDEyNS40MTUtNDkuNTg1IDIzOC45NzctMTMwLjYxNSAzMjIuNjY5LTEzLjA2MS02MS40MzgtNTIuMjQ2LTE2NS45My0xNzIuNDYtMjMzLjc3NyAyNy40NTMtMzMuOTg0IDQzLjA1NC03OC4zNjkgNDMuMDU0LTEyNS40MTQgMC0xMTIuMzU0LTkxLjQzLTIwMy43ODUtMjAzLjc4NC0yMDMuNzg1cy0yMDMuNzg0IDkxLjQzLTIwMy43ODQgMjAzLjc4NWMwIDQ3LjA0NSAxNi45MyA5MC4xIDQzLjA1NCAxMjUuNDE0QzIzMS4yMzggNjY4LjggMTkyLjA1NCA3NzMuMjkyIDE4MC4zMjEgODM0LjczIDk3Ljk2MSA3NTIuMzY5IDQ3LjA0NSA2MzcuNDc1IDQ3LjA0NSA1MTIuMDZ6bTMwOC4yNzYtMzUuMzE0YzAtODYuMjMgNzAuNTEtMTU2Ljc0IDE1Ni43NC0xNTYuNzRzMTU2LjczOCA3MC41MSAxNTYuNzM4IDE1Ni43NFM1OTguMjkgNjMzLjQ4NSA1MTIuMDYgNjMzLjQ4NXMtMTU2LjczOS03MC41MS0xNTYuNzM5LTE1Ni43NHpNMjIyLjA0NiA4NzUuMTIzYzIuNjYtMzcuODU0IDIzLjQ2MS0xNjUuOTMgMTY0LjYtMjM3Ljc2OCAzNS4zMTQgMjcuNDU0IDc4LjM2OSA0My4wNTUgMTI1LjQxNCA0My4wNTUgNDcuMDQ2IDAgOTEuNDMtMTYuOTMyIDEyNi43NDUtNDQuMzg2IDEzOS44MDYgNzEuODQgMTYxLjk0IDE5Ny4yNTQgMTY1LjkzIDIzNy43Ny03OS43IDYzLjk3OC0xODEuNTMgMTAzLjE2LTI5MS4yMjQgMTAzLjE2LTExMS4xNDMuMTIxLTIxMS43NjYtMzcuNzM0LTI5MS40NjUtMTAxLjgzeicvPjwvc3ZnPg==)
}

.header .btn.history {
    right: .75rem;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM3MTc1N2YnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J002NCA2MjRhMzIgMzIgMCAxMDY0IDAgMzIgMzIgMCAxMC02NCAwem00NDggMzQ0YTQ1Ny40NCA0NTcuNDQgMCAwMS0zOTUuNzYtMjI5LjI4IDMyIDMyIDAgMTE1NS41Mi0zMiAzOTIgMzkyIDAgMTAtNDItMjgxLjg0bDUxLjY4LTUxLjY4YTMyIDMyIDAgMDE0NS4yOCA0NS4yOGwtMTE2IDExNkEzMiAzMiAwIDAxNTYgNTEyYTQ1NiA0NTYgMCAxMTQ1NiA0NTZ6bS00OC0zNzZhMzIgMzIgMCAwMS0zMi0zMlYzMjBhMzIgMzIgMCAwMTY0IDB2MjQwYTMyIDMyIDAgMDEtMzIgMzJ6bTAgMGEzMiAzMiAwIDAxLTMyLTMyVjMyMGEzMiAzMiAwIDAxNjQgMHYyNDBhMzIgMzIgMCAwMS0zMiAzMnptMjQwIDBINDY0YTMyIDMyIDAgMDEwLTY0aDI0MGEzMiAzMiAwIDAxMCA2NHonLz48L3N2Zz4=)
}

.header .btn:hover {
    color: #344899;
    color: var(--bg-color-nav-hover)
}

.link,.rank .left .update li span:last-child,.rank .left .update li span:nth-child(3) {
    display: none
}

.left p.special {
    display: none;
}

.nav {
    padding: .5rem;
    background-color: #5e7ce0;
    background-color: var(--bg-color-nav);
    font-size: .9375rem;
    line-height: 2rem
}

.nav ul li {
    float: left;
    width: 25%;
    text-align: center
}

.nav ul li a {
    display: block;
    color: #fff;
    color: var(--font-color-nav)
}

.nav ul li.active a,.nav ul li a:hover {
    border-radius: 5px;
    background-color: #344899;
    background-color: var(--bg-color-nav-hover);
    color: #fff;
    color: var(--font-color-nav-hover)
}

.breadcrumb {
    line-height: 2rem;
    padding: .75rem 1rem
}

.breadcrumb .container {
    display: flex;
    overflow: hidden;
    height: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start
}

.breadcrumb li {
    float: left;
    font-size: .875rem
}

#wrapper {
    background-color: #f6f6f8;
    background-color: var(--bg-color-read)
}

#wrapper .breadcrumb .container {
    height: auto;
    flex-direction: column
}

#wrapper .breadcrumb ol {
    display: flex;
    overflow: hidden;
    height: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.breadcrumb li:first-child {
    padding-left: 1rem;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM3MTc1N2YnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J001MjYuNjM1IDU4LjA2N2EyMS41MDQgMjEuNTA0IDAgMDEtMjcuNTAyLjE3Nmw0NzQuOTggMzgxLjUwNWEzMS41MzkgMzEuNTM5IDAgMTAzOS40OTYtNDkuMTUxTDUzOC42MjkgOS4wMDRhNDEuNjAzIDQxLjYwMyAwIDAwLTUxLjk4OC4yMzRMMTEuNTc0IDM5OC42NzJhMzEuNTM5IDMxLjUzOSAwIDEwMzkuOTk0IDQ4LjhMNTI2LjYzNSA1OC4wNjZ6bTQ4Ni45NzQgNTA2LjAybC00NzQuOTgtMzgxLjUwNGE0MS42MDMgNDEuNjAzIDAgMDAtNTEuOTg4LjIwNUwxMS41NzQgNTcyLjE5MmEzMS41MzkgMzEuNTM5IDAgMTAzOS45OTQgNDguOGw2Ni43NjMtNTQuNzF2MzYxLjYxYTk0LjY0NSA5NC42NDUgMCAwMDk0LjY3NCA5NC42NDVoMjI4LjcyN1Y3NzUuMjYxYTE1Ljc5OSAxNS43OTkgMCAwMTE1Ljc0LTE1Ljc5OGgxMTAuNDczYzguNjg5IDAgMTUuNzY5IDcuMDggMTUuNzY5IDE1Ljc5OHYyNDcuMjc2aDIyOC43MjdhOTQuNjE2IDk0LjYxNiAwIDAwOTQuNjQ1LTk0LjYxNVY1NTkuNDY1bDY2Ljk5NyA1My44MzJhMzEuNTM5IDMxLjUzOSAwIDEwMzkuNTI2LTQ5LjIxem0tMTY5LjYzIDM2My44MDVjMCAxNy40MzctMTQuMSAzMS41MzktMzEuNTY3IDMxLjUzOUg2NDYuODJWNzc1LjIzMmE3OC44NzYgNzguODc2IDAgMDAtNzguODc1LTc4LjkwNUg0NTcuNDcyYTc4Ljg3NiA3OC44NzYgMCAwMC03OC44NDYgNzguOTA1djE4NC4xOTlIMjEzLjAzNGMtMTcuNDY2IDAtMzEuNTk3LTE0LjEzMS0zMS41OTctMzEuNTM5VjUxNC41MjdsMzMxLjQ0Ny0yNzEuNjc2TDg0My45OCA1MDguNzkzdjQxOS4xMjl6Jy8+PC9zdmc+);
    background-position: 0;
    background-size: .875rem auto;
    background-repeat: no-repeat
}

.breadcrumb li+li:before {
    display: inline-block;
    padding: 0 .25rem;
    color: #babbc0;
    content: "/"
}

.breadcrumb li.active {
    flex: 1
}

.bookvote,.chapters,.login,.rank .left,.rank .right,.rank .taglist,.ranklist,.sort .content {
    overflow: hidden;
    margin: 0
}

.rank .left ul.update,.rank .right ul,.rank .taglist ul,.sort .content .booklist ul {
    margin: 0 1rem
}

.rank .left .content,.ranklist .content {
    overflow: hidden;
    margin: 0 0 .75rem
}

.ranklist .content p {
    text-indent: 2em;
    font-size: .875rem;
    width: 100%
}

.rank .left .content dl,.ranklist .content dl,.sort .content .booklist dl {
    overflow: hidden;
    margin: 0 1rem;
    padding: .75rem 0 0
}

.rank .left .content dl+dl,.ranklist .content dl+dl {
    margin-top: .75rem;
    border-top: 1px solid #d7d8da
}

.rank .left .content dl .cover,.ranklist .content dl .cover,.sort .content .booklist dl .cover {
    float: left;
    width: 5.3rem;
    height: 6rem
}

.rank .left .content dl img,.ranklist .content dl .cover img,.sort .content .booklist dl .cover img {
    width: 4.8rem;
    height: 6rem;
    border-radius: 2px;
    background-color: #f6f7f9
}

.rank .left .content dl dt,.ranklist .content dl dt,.sort .content .booklist dl dt {
    overflow: hidden;
    height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9375rem;
    line-height: 1.25rem;
    font-weight: 700
}

.rank .left .content dl dd,.ranklist .content dl dd,.sort .content .booklist dl dd {
    overflow: hidden;
    margin: .5rem 0;
    height: 2.5rem;
    text-align: justify;
    white-space: break-spaces;
    font-size: .875rem;
    line-height: 1.25rem
}

.rank .left .update li,.rank .right ul li,.sort .content .booklist ul li {
    display: flex;
    height: 2.4rem;
    font-size: .875rem;
    line-height: 2.4rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.rank .left .update li+li,.rank .right ul li+li,.sort .content .booklist ul li+li {
    border-top: 1px solid #d7d8da
}

.rank .right ul li a,.rank .right ul li span {
    float: left
}

.rank .right ul li span,.sort .content .booklist ul li span {
    font-size: .875rem
}

.rank .left .update li span:nth-child(2),.rank .right ul li a,.sort .content .booklist ul li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9375rem;
    flex: 1
}

.rank .left .update li a:nth-child(2),.rank .right ul li span+a,.sort .content .booklist ul li span+a {
    margin: 0 .25rem;
    font-weight: 700
}

.rank .left .update li span:nth-child(4),.rank .right ul li a:last-child,.sort .content .booklist ul li a:last-child {
    overflow: hidden;
    flex: unset;
    max-width: 30%;
    color: #71757f;
    color: var(--font-color);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem
}

.sort .content .booklist dl {
    padding: 1rem 0;
    border-bottom: 1px solid #d7d8da
}

.rank .left .update li span:nth-child(2) {
    margin: 0 .25rem;
    font-weight: 700
}

.ranklist .content dl dd.bookmark {
    overflow: hidden;
    margin: .2rem 0;
    height: 1rem;
    text-align: left;
    font-size: .75rem;
    line-height: 1rem
}

.ranklist .content dl dd.bookmark+dd {
    font-size: .75rem
}

.ranklist .content dl dd.history {
    overflow: hidden;
    margin: .5rem 0;
    height: 1rem;
    line-height: 1rem
}

.rank .left .content dl dd:last-child,.ranklist .content dl dd:last-child,.sort .content .booklist dl dd:last-child {
    display: flex;
    overflow: hidden;
    margin: 0;
    height: 1rem;
    line-height: 1rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.rank .left .content dl dd:last-child a,.ranklist .content dl dd:last-child a,.sort .content .booklist dl dd:last-child a {
    color: #71757f;
    color: var(--font-color);
    flex: 1;
    text-align: left
}

.rank .left .content dl dd:last-child span,.ranklist .content dl dd:last-child span,.sort .content .booklist dl dd:last-child span {
    margin-left: .25rem;
    padding: .1rem;
    border: 1px solid;
    border-radius: 2px;
    color: #fa9841;
    font-size: .75rem;
    line-height: 1
}

.rank .left .content dl dd:last-child span:nth-child(2),.ranklist .content dl dd:last-child span:nth-child(2),.sort .content .booklist dl dd:last-child span:nth-child(2) {
    color: #3ac295
}

.rank .left .content dl dd:last-child span:last-child,.ranklist .content dl dd:last-child span:last-child,.sort .content .booklist dl dd:last-child span:last-child {
    color: #5e7ce0;
    color: var(--bg-color-nav)
}

.rank .taglist ul {
    display: flex;
    overflow: hidden;
    margin-bottom: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.rank .taglist li {
    overflow: hidden;
    margin-top: .75rem;
    width: 23%;
    height: 1.5rem;
    border: 1px solid #d1ebff;
    border-color: var(--border-color-card);
    border-radius: 2px;
    background-color: #f6f6f8;
    background-color: var(--bg-color);
    text-align: center;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 700
}

.taglist li a {
    display: block
}

.rank .taglist li:hover {
    background-color: #f2f5fc;
    background-color: var(--bg-color-title)
}

.rank .taglist.newlist li {
    width: 48%;
    text-align: left
}

.rank .taglist.newlist li a {
    padding: 0 .5rem
}

.book .cover {
    float: left;
    margin-left: 1rem;
    width: 5rem;
    height: 5.99rem
}

.book .cover img {
    width: 4.5rem;
    height: 6rem;
    border-radius: 2px
}

.book .booktitle,.chapters .booktitle,.read .booktitle {
    display: flex;
    overflow: hidden;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

.book .booktitle h1,.chapters .booktitle h1,.read .booktitle h1 {
    padding: 1rem;
    color: #252b3a;
    font-size: 1.25rem;
    line-height: 1.5rem
}

.book .bookinfo .bookdes {
    display: flex;
    margin: 0 1rem 0 .5rem;
    padding: .5rem 0;
    border-top: 1px solid #dbdcdf;
    border-bottom: 1px solid #dbdcdf;
    flex-direction: column
}

.book .bookinfo .bookdes p {
    overflow: hidden;
    height: 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem
}

.book .bookinfo .bookintro {
    display: flex;
    overflow-y: auto;
    padding: .5rem 1rem;
    font-size: .8125rem;
    line-height: 1.25rem;
    flex-direction: column
}

.book .bookinfo .bookintro::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: #f5f5f5
}

.book .bookinfo .bookintro::-webkit-scrollbar-track {
    border-radius: 2px;
    background-color: #f5f5f5;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3)
}

.book .bookinfo .bookintro::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #999;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3)
}

.book .bookbtn {
    display: flex;
    padding: .75rem 1rem;
    border-top: 1px solid #dbdcdf;
    border-top-color: var(--border-color);
    justify-content: center;
    font-weight: 700
}

.book .bookbtn a {
    width: 50%;
    border: 1px solid #526ecc;
    border-color: var(--bg-color-nav);
    border-radius: 2px;
    background-color: #526ecc;
    background-color: var(--bg-color-nav);
    color: #fff;
    color: var(--font-color-nav);
    text-align: center;
    font-size: .9375rem;
    line-height: 2rem;
    cursor: pointer
}

.book .bookbtn a+a {
    margin-left: 10px;
    background-color: transparent;
    color: #526ecc;
    color: var(--bg-color-nav)
}

.book .bookbtn a:hover {
    border-color: #344899;
    border-color: var(--bg-color-nav-hover);
    background-color: #344899;
    background-color: var(--bg-color-nav-hover);
    color: #fff;
    color: var(--font-color-nav-hover);
    text-decoration: none
}

h1.tagtitle {
    padding: 10px;
    border: 2px solid #d7d8da;
    border-color: var(--border-color);
    color: #252b3a;
    color: var(--font-color-title);
    text-align: center;
    font-size: 20px
}

.chapters .booktitle h2 {
    padding: .75rem 1rem;
    border-color: var(--border-color-card);
    border-top: 1px solid #dbdcdf;
    font-size: .875rem
}

.chapterlist .all h4 {
    border-radius: 0
}

.chapterlist h3 {
    padding-bottom: 10px;
    border-color: var(--border-color);
    border-bottom: 1px solid #d7d8da;
    font-size: 14px
}

.chapters ul {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap
}

.chapterlist li {
    position: relative;
    padding: 0 3rem 0 1rem;
    height: 2.25rem;
    font-size: .875rem;
    line-height: 2.25rem
}

.chapterlist li:after {
    position: absolute;
    top: .875rem;
    right: 1rem;
    color: #babbc0;
    content: "";
    border-top: 1px solid;
    border-right: 1px solid;
    width: .5rem;
    height: .5rem;
    transform: rotate(45deg)
}

.chapterlist li+li {
    border-top: 1px solid #dbdcdf
}

.chapterlist li:nth-child(4n) {
    padding-right: 0
}

.chapterlist li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.chapterlist li a:visited {
    color: #71757f;
    color: var(--font-color)
}

.chapterlist li a.no {
    color: #d7d8da
}

.bookvote {
    margin: .75rem 1rem 0;
    padding: .5rem 0 0;
    border: 0;
    border-top: 3px solid var(--border-color-card);
    text-align: justify;
    font-size: .775rem;
    line-height: 1.25rem
}

.bookvote p {
    padding: 0
}

.bookvote legend {
    color: var(--font-color-title);
    text-align: center;
    font-weight: 700;
    padding: 0 .5rem
}

.bookvote p+p {
    margin-top: .5rem
}

#del_temp {
    margin-left: .5rem;
    padding: 2px 5px;
    max-width: 1.5rem;
    border: 1px solid;
    border-radius: 2px;
    color: #526ecc;
    color: var(--font-color-link);
    text-decoration: none;
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
    flex: auto
}

#del_temp:hover {
    color: #344899;
    color: var(--font-color-hover)
}

.morechapter {
    display: block;
    padding: .5rem 0;
    background-color: #5e7ce0!important;
    background-color: var(--bg-color-nav)!important;
    color: #fff;
    color: var(--font-color-nav);
    text-align: center;
    font-weight: 700;
    font-size: .875rem
}

.morechapter:hover {
    background-color: #344899!important;
    background-color: var(--bg-color-nav-hover)!important;
    color: #fff;
    color: var(--font-color-nav-hover)
}

.listpage {
    display: flex;
    padding: .5rem 1rem;
    height: 2rem;
    font-size: .75rem;
    line-height: 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
    font-weight: 700
}

.chapterlist .all .listpage+ul {
    border-top: 1px solid #dbdcdf;
    border-bottom: 1px solid #dbdcdf
}

.listpage span {
    text-align: center
}

.listpage .left {
    width: 25%
}

.listpage .left a,.listpage .right a {
    display: inline-block;
    width: 90%;
    border: 1px solid;
    border-radius: 2px
}

.listpage .left a:hover,.listpage .right a:hover,.morechapter:hover {
    text-decoration: none
}

.listpage .left a {
    float: left
}

.listpage .right a {
    float: right
}

.listpage .right {
    width: 25%
}

.listpage .middle {
    height: 2rem;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
    flex: 1;
    overflow: hidden
}

.listpage .middle em {
    width: 80%;
    height: 30px;
    color: #999;
    text-align: center;
    font-style: normal
}

.listpage .middle a,.listpage .middle em {
    float: left;
    display: inline-block;
    line-height: 36px
}

.listpage .middle a {
    width: 19%;
    height: 36px;
    vertical-align: middle
}

.listpage .middle select {
    clear: both;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: none;
    background: 0 0;
    text-align: center;
    font-weight: 700;
    border-radius: 2px
}

.listpage .middle select,.listpage .middle select option {
    outline: 0;
    font-size: .75rem;
    text-align: center
}

.listpage .onclick {
    background-color: #5e7ce0;
    background-color: var(--bg-color-nav);
    color: #fff;
    color: var(--font-color-nav)
}

.listpage .before {
    background-color: #cecece;
    color: #fff
}

.listpage .left a:hover,.listpage .right a:hover {
    background-color: #344899;
    background-color: var(--bg-color-nav-hover);
    color: #fff;
    color: var(--font-color-nav-hover)
}

.read {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

.read .readpage {
    margin: 0 auto;
    padding: .5rem;
    border-top: 1px dotted #d7d8da;
    border-bottom: 1px dotted #d7d8da;
    text-align: center;
    font-weight: 700
}

.read .readpage a {
    margin: 0 10px
}

.read .readpage .gray {
    color: #999
}

.read .readvote {
    margin: .75rem 1rem;
    text-align: justify;
    font-size: .875rem
}

.read .content {
    color: #252b3a;
    letter-spacing: .1em;
    font-size: 24px
}

.read .content p {
    margin: 1em 1rem 0;
    text-indent: 2em;
    word-wrap: break-word;
    line-height: 1.8;
    word-break: break-all;
    line-break: anywhere;
    text-align: justify
}

.read .content .report {
    margin: 15px 0;
    text-align: center;
    font-size: 16px
}

.read .content .report a {
    color: #f60
}

.read .content .report a:before {
    content: "\27a6"
}

#readSet .ra {
    display: inline-block;
    overflow: hidden;
    margin-top: -1px;
    margin-right: 5px;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #ccc;
    border-color: var(--bg-color-nav);
    background-color: var(--bg-color-nav);
    vertical-align: middle;
    border-radius: 2px
}

#readSet .rf {
    float: right;
    margin-left: .5rem;
    font-size: .875rem
}

#readSet .rf a {
    display: inline-table;
    padding: 0 .2rem;
    background-color: #5e7ce0;
    background-color: var(--bg-color-nav);
    color: #fff;
    color: var(--font-color-nav);
    text-align: center;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.3rem;
    border-radius: 2px
}

#readSet .rf .rf-default {
    margin: 0 .3rem
}

#readSet .rf .rf-large,#readSet .rf .rf-small {
    padding: 0 .5rem
}

.pages {
    display: flex;
    overflow: hidden;
    padding: .75rem 1rem;
    border-top: 1px solid #d7d8da;
    text-align: center;
    flex-direction: column;
    align-items: center
}

.pagination {
    display: inline-block;
    flex: 1
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    margin-left: 5px;
    padding: .25rem .5rem;
    min-width: 1rem;
    border: 1px solid #e9edfa;
    border-color: var(--border-color-card);
    border-radius: 5px;
    text-decoration: none;
    font-size: .875rem
}

.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
    z-index: 2;
    border-color: #d7d8da;
    border-color: var(--border-color-card);
    background-color: #ebf6ff;
    background-color: var(--bg-color-read)
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
    z-index: 3;
    background-color: #ebf6ff;
    background-color: var(--bg-color-read);
    color: #3448a5;
    color: var(--font-color-hover);
    cursor: default
}

.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
    border-color: #d7d8da;
    background-color: #fff;
    color: #777;
    cursor: not-allowed
}

.login form {
    display: flex;
    padding: 2rem 1rem 0;
    font-size: .875rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center
}

.login form .form-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap
}

.login form .form-group+.form-group {
    margin-top: 1rem
}

.login form .form-group .form-title {
    overflow: hidden;
    font-size: .875rem;
    line-height: 2rem
}

.login form .form-group .form-content {
    flex: 1
}

.login form .form-group .form-content input {
    width: 100%;
    height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    text-indent: .5rem;
    font-size: .875rem;
    line-height: 2rem
}

.login form .form-group .form-content input:focus,.login form .form-group .form-content input:focus-visible {
    outline: 0;
    border: 1px solid #344899;
    border-color: var(--bg-color-nav-hover)
}

.login form .form-submit {
    padding-top: 2rem
}

.login form .form-submit button {
    padding: 0 2rem;
    border: none;
    border-radius: 2px;
    background-color: #5e7ce0;
    background-color: var(--bg-color-nav);
    color: #fff;
    color: var(--font-color-nav);
    font-size: .875rem;
    cursor: pointer;
    height: 2rem;
    line-height: 2rem
}

.login form .form-submit button:hover {
    background-color: #344899;
    background-color: var(--bg-color-nav-hover);
    color: #fff
}

.nobook {
    width: 100%;
    text-align: center;
    line-height: 100px
}

form.search {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

form.search input {
    outline: 0;
    border: 2px solid #5e7ce0;
    border-color: var(--bg-color-nav);
    border-right: none;
    border-radius: 2px 0 0 2px;
    background-color: transparent;
    text-indent: .5rem;
    font-size: .875rem;
    line-height: 2rem;
    flex: 1
}

form.search input:focus,form.search input:hover {
    border-color: #344899;
    border-color: var(--bg-color-nav-hover)
}

form.search button {
    width: 4rem;
    border: none;
    border-radius: 0 2px 2px 0;
    background-color: #5e7ce0;
    background-color: var(--bg-color-nav);
    color: #fff;
    color: var(--font-color-nav);
    font-size: .875rem;
    cursor: pointer
}

form.search button:hover {
    background-color: #344899;
    background-color: var(--bg-color-nav-hover)
}

.footer {
    margin-top: .75rem;
    padding: 1rem;
    border-top: 1px solid #d7d8da;
    border-color: var(--border-color);
    font-size: .75rem
}

.footer p {
    text-align: center;
    line-height: 1rem
}

.layui-layer-btn {
    font-size: .8125rem
}

.hidden-xs {
    display: none!important
}


    .hidden-xs {
        display:unset!important
    }

    html {
        font-size: 16px
    }

    .pc-mt {
        margin-top: 15px
    }

    .pc-mb {
        margin-bottom: 15px
    }

    .pc-ml {
        margin-left: 15px
    }

    .pc-mr {
        margin-right: 15px
    }

    .pc-pt {
        padding-top: 15px
    }

    .pc-pb {
        padding-bottom: 15px
    }

    .pc-pl {
        padding-left: 15px
    }

    .pc-pr {
        padding-right: 15px
    }

    .container {
        /* width: 95%; */
       /*  max-width: 980px */
		width: 980px;
		margin: auto;
    }

    h4 {
        border-bottom: 1px solid #e9edfa;
        border-bottom-color: var(--border-color-card)
    }

    .header,.morechapter,.nav {
        display: block!important
    }

    .header {
        padding: 15px 0 0 0;
        border: none
    }

    .header .left {
        float: left;
        padding: 0;
        width: auto;
        text-align: center;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 24px;
        line-height: 24px
    }
.left p.special {
    display: revert;
}
    .header .left p {
        color: #f60;
        letter-spacing: 0;
        font-size: 12px
    }

    .header .right {
        float: right;
        margin-top: 6px
    }

    .header .search {
        float: left;
        display: flex;
        margin-top: 6px;
        margin-left: 25%;
        width: 35%;
        height: 35px;
        align-items: center
    }

    .header .search input {
        width: 270px;
        height: 32px;
        border-right: none;
        text-indent: 10px;
        font-size: 14px;
        flex-grow: 2
    }

    .header .search:hover input {
        border-color: #344899;
        border-color: var(--bg-color-nav-hover)
    }

    .header .btn,.header .search button {
        position: unset;
        width: 60px;
        height: 36px;
        border: none;
        background-color: #5e7ce0;
        background-color: var(--bg-color-nav);
        color: #fff;
        color: var(--font-color-nav);
        text-indent: 0;
        font-size: 14px;
        line-height: 36px;
        cursor: pointer
    }

    .header .btn:hover,.header .search:hover button {
        background-color: #344899;
        background-color: var(--bg-color-nav-hover);
        color: #fff;
        color: var(--font-color-nav-hover)
    }

    .header .btn {
        float: right;
        margin-left: 10px;
        padding-left: 20px;
        width: 80px;
        background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNmZmYnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J002NCA2MjRhMzIgMzIgMCAxMDY0IDAgMzIgMzIgMCAxMC02NCAwem00NDggMzQ0YTQ1Ny40NCA0NTcuNDQgMCAwMS0zOTUuNzYtMjI5LjI4IDMyIDMyIDAgMTE1NS41Mi0zMiAzOTIgMzkyIDAgMTAtNDItMjgxLjg0bDUxLjY4LTUxLjY4YTMyIDMyIDAgMDE0NS4yOCA0NS4yOGwtMTE2IDExNkEzMiAzMiAwIDAxNTYgNTEyYTQ1NiA0NTYgMCAxMTQ1NiA0NTZ6bS00OC0zNzZhMzIgMzIgMCAwMS0zMi0zMlYzMjBhMzIgMzIgMCAwMTY0IDB2MjQwYTMyIDMyIDAgMDEtMzIgMzJ6bTAgMGEzMiAzMiAwIDAxLTMyLTMyVjMyMGEzMiAzMiAwIDAxNjQgMHYyNDBhMzIgMzIgMCAwMS0zMiAzMnptMjQwIDBINDY0YTMyIDMyIDAgMDEwLTY0aDI0MGEzMiAzMiAwIDAxMCA2NHonLz48L3N2Zz4=);
        background-position: 14px 12px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        text-align: center
    }

.header .btn.home {
     display: none;
    }

    .header .btn.history {
        right: .75rem;
        background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBzdHlsZT0ndmVydGljYWwtYWxpZ246bWlkZGxlJyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNmZmYnIG92ZXJmbG93PSdoaWRkZW4nPjxwYXRoIGQ9J002NCA2MjRhMzIgMzIgMCAxMDY0IDAgMzIgMzIgMCAxMC02NCAwem00NDggMzQ0YTQ1Ny40NCA0NTcuNDQgMCAwMS0zOTUuNzYtMjI5LjI4IDMyIDMyIDAgMTE1NS41Mi0zMiAzOTIgMzkyIDAgMTAtNDItMjgxLjg0bDUxLjY4LTUxLjY4YTMyIDMyIDAgMDE0NS4yOCA0NS4yOGwtMTE2IDExNkEzMiAzMiAwIDAxNTYgNTEyYTQ1NiA0NTYgMCAxMTQ1NiA0NTZ6bS00OC0zNzZhMzIgMzIgMCAwMS0zMi0zMlYzMjBhMzIgMzIgMCAwMTY0IDB2MjQwYTMyIDMyIDAgMDEtMzIgMzJ6bTAgMGEzMiAzMiAwIDAxLTMyLTMyVjMyMGEzMiAzMiAwIDAxNjQgMHYyNDBhMzIgMzIgMCAwMS0zMiAzMnptMjQwIDBINDY0YTMyIDMyIDAgMDEwLTY0aDI0MGEzMiAzMiAwIDAxMCA2NHonLz48L3N2Zz4=)
    }

    .nav {
        padding: 0;
        height: 3rem;
        line-height: 3rem;
        font-size: 1rem
    }

    .nav .container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between
    }

    .nav ul li.active a,.nav ul li a:hover {
        border-radius: 0
    }

    #wrapper .breadcrumb .container {
        flex-direction: row;
        justify-content: space-between
    }

    #wrapper .breadcrumb .container ol {
        flex: 1
    }

    #wrapper .breadcrumb .container #readSet {
        margin-left: 100px
    }

    .noempty {
        min-height: calc(100vh - 273px)
    }

    .link,.rank,.sort {
        display: flex
    }

    .chapters,.link,.login,.rank .left,.rank .right,.rank .taglist,.ranklist,.sort .content {
        border: 3px solid #e9edfa;
        border-color: var(--border-color-card);
        border-radius: 2px
    }

    .bookvote {
        margin-right: 0;
        margin-left: 0
    }

    .bookvote legend {
        margin-left: 1rem;
        text-align: left
    }

    .rank .left ul.update,.rank .right ul,.sort .content .booklist ul {
        margin: 0
    }

    .rank .left ul.update li,.rank .right ul li,.sort .content .booklist ul li {
        margin: 0 1rem
    }

    .rank .left,.rank .taglist,.sort {
        flex: 1
    }

    .rank .right {
        margin-left: calc(1.7% - 2px);
        width: 31.8%
    }

    .rank .left .content,.ranklist .content,.sort {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .ranklist .content {
        justify-content: unset
    }

    .rank .left .content dl,.rank .left .content dl+dl,.ranklist .content dl,.ranklist .content dl+dl {
        float: left;
        margin: 0;
        padding: 1rem 0 0;
        width: 49%;
        border: none
    }

    .ranklist .content dl,.ranklist .content dl+dl {
        width: 32%
    }

    .ranklist .content dl:nth-child(3n),.ranklist .content dl:nth-child(3n+2) {
        padding-left: 2%
    }

    .sort .content {
        width: 31.8%
    }

    .sort .content:nth-child(n+4) {
        margin-top: 15px
    }

    .rank .left .update li {
        font-size: .875rem;
        justify-content: flex-start
    }

    .rank .left .update li span:last-child,.rank .left .update li span:nth-child(3) {
        display: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .rank .left .update li span:nth-child(3) {
        flex: 1
    }

    .rank .left .update li span:nth-child(4) a {
        color: #71757f;
        color: var(--font-color)
    }

    .rank .left .update li span:nth-child(4) {
        width: 15%;
        text-align: left
    }

    .rank .left .update li span:last-child {
        width: 80px;
        text-align: right
    }

    .rank .taglist li {
        margin-top: 1rem;
        width: 9%;
        height: 30px;
        line-height: 30px
    }

    .rank .taglist.newlist li {
        width: 19%
    }

    .link .content {
        padding: 1rem;
        font-size: .775rem
    }

    .book .booktitle h1,.chapters .booktitle h1,.read .booktitle h1 {
        font-size: 24px;
        line-height: 1.5
    }

    .book .cover {
        width: 155px;
        height: 185px
    }

    .book .cover img {
        width: 140px;
        height: 170px
    }

    .book .bookinfo .bookdes {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between
    }

    .book .bookinfo .bookdes p {
        /* width: 49% */
    }

    .book .bookinfo .bookintro {
        overflow: hidden;
        padding: .5rem 1rem 1rem 0;
        height: 6.5rem;
        line-height: 1.3rem
    }

    .book .bookinfo .bookintro p {
        overflow-y: auto
    }

    .chapters ul {
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
        flex-direction: row
    }

    .chapterlist li {
        padding: 0;
        width: 25%;
        height: 40px;
        border-top: none!important;
        border-bottom: 1px solid #dbdcdf;
        line-height: 40px
    }

    .chapterlist li a {
        padding: 0 1rem
    }

    .chapterlist li:after {
        display: none
    }

    .morechapter {
        margin: .75rem 30%;
        line-height: 1.8;
        border-radius: 2px
    }

    .chapterlist .all .listpage+ul {
        border: none
    }

    .listpage {
        padding: 15px;
        font-size: .875rem
    }

    h4+.listpage {
        border-bottom: 1px solid var(--border-color)
    }

    .listpage .middle,.listpage .middle select,.listpage .middle select option {
        font-size: .875rem
    }

    .read .content {
        margin: 0 2rem
    }

    .read .readvote {
        padding: 0 2rem
    }

    .pages {
        padding-top: 2rem;
        border-top: none
    }

    .login form {
        margin: 0 auto;
        padding: 2rem;
        width: 300px
    }

    .footer {
        margin-top: 1rem
    }

    .hidden-md {
        display: none!important
    }


.taglist.newlist {
    margin-top: 10px;
}
.content {
    margin: 5px;
    font-size: .775rem;
}
h1 {
    display: inline;
}

.page {
    text-align: center;
    padding: 10px 10px 10px 0 !important;
    font-size: 16px;
    border-top: 1px solid #eee;
    background: #fff;
    height: 45px;
    line-height: 45px;
}

.page a {
    width: 34px;
    height: 24px;
    padding: 5px 0;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.page a.number {
    border: 1px solid #eee;
}
span.current {
    border: 1px solid #eee;
    width: 34px;
    height: 24px;
    padding: 5px 0;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	background: #e9edfa;
}

.article {
    width: 980px;
    margin: auto;
}