html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
a,
img,
button,
select,
input,
form,
span,
em,
strong,
small {
  font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  outline-width: 0;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.box-mod img {
  display: block;
  margin: 0;
  padding: 0;
}

a img {
  border: 0;
}

button:active {
  opacity: 0.8;
}

div,
i,
button,
input,
a {
  *zoom: 1;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.topbar {
  min-width: 1200px;
  /* background-color: #314786; */
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.topbar-inner {
  padding: 0 8px;
  width: 1200px;
  margin: 0 auto;
  height: 70px;
  line-height: 70px;
}

.topbar-logo {
  line-height: 70px;
  font-size: 0;
  width: 150px;
  height: 70px;
  float: left;
  margin-right: 20px;
}

.topbar-logo img {
  vertical-align: middle;
}

.topbar-nav {
  float: right;
}

.topbar-nav .nav-item {
  float: left;
  margin-left: 50px;
}

.topbar-nav .nav-item a {
  font-size: 20px;
  color: #ffffff;
  display: block;
  font-weight: bold;
  padding: 0 10px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.topbar-nav.blue .nav-item a {
  color: #000;
}

.topbar-nav .nav-item a:hover {
  color: #c1c1c1;
}

.topbar-nav .nav-item a.avatar {
  color: #c1c1c1;
}

.index-img {
  width: 281px;
  height: 182px;
  background-image: url(../images/logo_imgbg_h.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
}

.cate-img {
  width: 220px;
  height: 160px;
}

.search-img {
  width: 281px;
  height: 182px;
}

.chapter-img {
  width: 100%;
  height: 100%;
}

.topbar-search {
  padding: 15px 0;
  height: 40px;
  float: left;
}

.topbar-search .field {
  height: 40px;
  border-radius: 40px;
  background-color: #000;
  margin-right: 20px;
}

.topbar-search .field input,
.topbar-search .field button {
  border: 0;
  height: 40px;
  background-color: transparent;
  vertical-align: top;
  float: left;
  line-height: 40px;
}

.topbar-search .field input {
  padding: 0 20px;
  width: 130px;
  font-size: 16px;
}

.topbar-search .field input::-webkit-input-placeholder {
  color: #736212;
  font-size: 16px;
}

.topbar-search .field button {
  width: 60px;
  height: 40px;
  background-image: url('../images/bar-search.png');
  overflow: hidden;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center;
}

.topbar-search .field input:-webkit-autofill {
  border-radius: 20px;
  background-color: #000;
  --webkit-box-shadow: 0 0 0px 1181818px #000 inset;
}

.topbar-action {
  float: left;
  line-height: 40px;
  padding: 15px 0;
  color: #fff;
  position: relative;
}

.topbar-action a {
  color: #fff;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

.topbar-action a:hover {
  color: #000;
}

.topbar-action .user img {
  width: 44px;
  height: 44px;
  border-radius: 44px;
}

.topbar-action .user .avatar {
  display: block;
  float: left;
}

.topbar-action .user .username {
  float: left;
  width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
  margin-left: 0.5em;
}

.dd-bg {
  background: url('../images/dd-bg.png') center 0 repeat-y;
}

.uu-bg {
  background: url('../images/dd-bg.png') center 0 repeat-y;
}

.box-mod {
  position: relative;
  padding: 0 8px;
  width: 1184px;
  margin: 0 auto;
}

.gray-bg {
  min-width: 1200px;
  background-color: #f7f7f7;
}

.white-bg {
  min-width: 1200px;
  background-color: #fff;
  position: relative;
}

.comics-head {
  padding: 60px 0 30px 0;
}

.comics-head__title,
.comics-nav__item {
  float: left;
  color: #282828;
  font-size: 16px;
}

.comics-nav__item {
  margin-left: 12px;
}

.comics-head__title {
  font-size: 22px;
  line-height: 28px;
}

.comics-nav__item a {
  min-width: 28px;
  height: 28px;
  padding: 0 15px;
  display: block;
  border-radius: 28px;
  padding: 0 15px;
  line-height: 28px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.comics-nav__item a:hover {
  background-color: #eee;
}

.comics-nav__item a.active {
  background: rgba(255, 217, 81, 1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), color-stop(100%, rgba(255, 200, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), to(rgba(255, 200, 49, 1)));
  background: linear-gradient(to right, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd951', endColorstr='#ffc831', GradientType=1);
}

.comic-box .thumb {
  background-image: url(../images/logo_imgbg_s.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
}

.comic-box .thumb img {
  width: 281px;
  height: 360px;
  display: block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 2px solid #fafafa;
  border-bottom: 0;
}

.comic-box .thumbA img {
  width: 285px;
  height: 184px;
}

.comic-box .container {
  border: 2px solid #fafafa;
  border-top: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #fff;
}

.comic-box .body {
  padding: 10px 15px;
}

.comic-box .body .title {
  font-size: 14px;
  color: #282828;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comic-box .body .title a {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.comic-box .body .title a:hover {
  text-decoration: underline;
  color: rgb(255, 135, 37);
}

.comic-box .row {
  font-size: 0;
  line-height: 0;
  margin-top: 10px;
}

.comic-box .row .col {
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  color: #aaa;
  margin-right: 10px;
}

.comic-box .foot {
  padding: 10px 15px;
  border-top: 2px solid #fafafa;
  font-size: 0;
  line-height: 0;
}

.comic-box .row .col i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -3px;
  background-size: contain;
}

.comic-box .row .col .icon-laud {
  background-image: url('../images/icon-laud.png');
  /* margin-top: -4px; */
  margin: -7px 2px 0 0;
}

.comic-box .row .col .icon-comment {
  width: 14px;
  background-image: url('../images/icon-comment.png');
  margin: 1px 2px 0 0;
}

.comic-box .foot .avatar,
.comic-box .foot .name {
  display: inline-block;
}

.comic-box .foot .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-image: url(../images/app_tx.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: #f2f2f2;
}

.comic-box .foot .avatar img {
  width: 26px;
  height: 26px;
  border-radius: 26px;
  vertical-align: top;
}

.comic-box .foot .name {
  font-size: 14px;
  color: #737374;
  line-height: 26px;
  vertical-align: top;
  margin-left: 10px;
}

.comics-col {
  float: left;
  width: 285px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.dd-container {
  padding-left: 40px;
  font-size: 16px;
  line-height: 26px;
}
.dd-container h2 {
  font-size: 18px;
  line-height: 30px;
}

.dd-container p,
.dd-container h3 {
  font-size: 16px;
  margin: 0;
}
strong,
.strong {
  font-weight: bold;
}
.dd-title {
  margin-top: 90px;
  margin-bottom: 10px;
  font-size: 26px;
  color: #181818;
}
.dd-tips {
  font-size: 16px;
  color: #999;
  margin: 10px 0;
}

.dd-main {
  margin: 40px 0 80px;
}
.dd-main .list {
  width: 280px;
  float: left;
}

.dd-main .list .btn {
  display: block;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  background-color: #000;
  color: #423300;
  font-size: 20px;
  text-align: center;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

.dd-main .list .btn:hover {
  background-color: #ecc70c;
}

.dd-main .list .ios {
  margin-top: 34px;
}

.dd-main .list .android {
  margin-top: 60px;
}

.dd-main .list .btn i {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-top: -5px;
  margin-right: 5px;
}

.dd-main .list .btn .icon-ios {
  background: url('../images/dd-ios.png') 50% 100%/100% no-repeat;
}

.dd-main .list .btn .icon-android {
  background: url('../images/dd-android.png') 50% 100%/100% no-repeat;
}
.rows-wide.bg {
  position: relative;
  padding: 100px 40px;
  background-color: #f5f5f5;
  min-width: 1120px;
}
.cp {
  position: relative;
  padding: 20px 0 8px 0;
  text-align: center;
}
.cp > img {
  width: 60%;
}
.cp-list {
  position: absolute;
  list-style: none;
  padding-left: 0;
  margin: 0;
  top: 0;
  left: 0;
  text-align: left;
  width: 100%;
  height: 100%;
}
.cp-list li {
  width: 19%;
  position: relative;
}
.cp-left {
  float: left;
}
.cp-right {
  float: right;
}
.cp-list li .cp-left h1 {
  font-size: 18px;
  color: #37a5f9;
  margin-bottom: 10px;
}
.cp-list li:nth-child(2n) {
  right: 0;
  position: absolute;
}
.cp-list li:nth-child(2n) > div:first-child {
  float: right !important;
}
.cp-list li:nth-child(2n) > div:nth-child(2) {
  float: left !important;
}
.cp-list li:first-child,
.cp-list li:nth-child(2) {
  top: 40px;
}
.cp-list li:nth-child(n + 3) {
  bottom: 5px;
  position: absolute;
  height: 100px;
}
.cp-list li > div:nth-child(2) {
  position: absolute;
}
.cp-list li:first-child > div:nth-child(2) {
  right: 0;
  top: 27px;
}
.qr-box {
  border-radius: 12px;
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 21px 0px rgba(196, 203, 208, 0.41);
  box-shadow: 0px 5px 21px 0px rgba(196, 203, 208, 0.41);
  width: 228px;
  height: 274px;
  float: left;
  text-align: center;
  margin-left: 40px;
}

.qr-box .title {
  font-size: 22px;
  padding: 26px 0 15px 0;
}

.col-744,
.col-456,
.col-600 {
  float: left;
}

.col-600 {
  width: 560px;
}
.col-600:first-child {
  margin-right: 60px;
}
.col-744 {
  width: 700px;
}

.col-456 {
  width: 440px;
}

.login-box {
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  -webkit-box-shadow: 0px 5px 54px 0px rgba(167, 172, 185, 0.3);
  box-shadow: 0px 5px 54px 0px rgba(167, 172, 185, 0.3);
  width: 558px;
  margin: 50px auto;
}

.login-form {
  padding: 60px 110px;
  min-height: 300px;
  height: auto;
  visibility: visible;
}

.login-ctrl {
  margin-bottom: 26px;
  position: relative;
}

.login-ctrl .message {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: -22px;
  color: #f75234;
  font-size: 14px;
}

.login-field,
.verify-field,
.error-field {
  height: 46px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 0 15px;
  position: relative;
}

.error-field {
  border-color: #f75234;
  background-color: #fdf6f5;
}

.verify-field {
  float: left;
}

.login-field input,
.verify-field input {
  border: 0;
  background-color: transparent;
  height: 46px;
  font-size: 18px;
  line-height: 46px;
}

.login-field input.wide-input {
  width: 100%;
}

.verify-field input {
  width: 163px;
}

.verify-action {
  float: right;
}

.verify-action button {
  width: 138px;
  height: 46px;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
}

.verify-action button.submit {
  background-color: #5ab2ff;
  color: #fff;
}

.verify-action button.default {
  background-color: #c1c1c1;
  color: #fff;
}

.password-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 48px;
}

.password-action button {
  width: 50px;
  height: 48px;
  background-color: transparent;
  border: 0;
  background-repeat: no-repeat;
  background-position: center;
}

.password-action button.hide {
  background-image: url('../images/icon-hidden.png');
}

.password-action button.show {
  background-image: url('../images/icon-view.png');
}

.login-form__title {
  font-size: 30px;
  text-align: center;
  margin-bottom: 30px;
}

.show-box {
  position: fixed;
  top: 50%;
  z-index: 999999;
  height: 60px;
  line-height: 55px;
  border-radius: 3px;
  left: 40%;
  background-color: #ffe6e5;
  border: 1px solid #f75234;
  padding: 0 40px;
  font-size: 16px;
  color: #282828;
  -moz-box-shadow: 2px 2px 5px #333333;
  -webkit-box-shadow: 2px 2px 5px #333333;
  box-shadow: 2px 2px 5px #333333;
}

.login-form .notice-box {
  position: relative;
  height: 44px;
  line-height: 44px;
  border-radius: 3px;
  background-color: #ffe6e5;
  border: 1px solid #f75234;
  margin-bottom: 10px;
  padding: 0 20px;
  font-size: 16px;
  color: #282828;
}

.login-form .notice-box .icon-error {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-image: url('../images/notice-error.png');
  vertical-align: middle;
  margin-top: -5px;
}

.login-form .media {
  text-align: center;
  font-size: 16px;
  color: #5c5c5c;
}

.slider-bar {
  background-color: #e8e8e8;
  height: 46px;
  border-radius: 4px;
  position: relative;
}

.slider-bg {
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  color: #5c5c5c;
  text-indent: 56px;
}

.slider-scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 46px;
  background-color: rgb(20, 184, 20);
  border-radius: 4px;
}

.slider-btn {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 44px;
  border: 1px solid #e9e9e9;
  background-color: #fff;
  border-radius: 4px;
  float: right;
}

.slider-btn.start {
  background-image: url('../images/drag-arrow.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.slider-scroll .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 16px;
  color: #fff;
  line-height: 46px;
  text-align: center;
  text-indent: -56px;
  z-index: 0;
  display: none;
}

.login-action a.login-link {
  display: block;
  line-height: 50px;
  text-align: center;
}

.login-action button,
.login-action a.login-link {
  height: 50px;
  border-radius: 50px;
  background: rgba(255, 217, 81, 1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), color-stop(100%, rgba(255, 200, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), to(rgba(255, 200, 49, 1)));
  background: linear-gradient(to right, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd951', endColorstr='#ffc831', GradientType=1);
  width: 100%;
  border: 0;
  font-size: 18px;
}

.login-other {
  text-align: center;
  font-size: 16px;
  padding: 20px 0;
}

.login-other a {
  color: #0e8fff;
  font-size: 16px;
}

.login-other a:hover {
  text-decoration: underline;
}

.login-social {
  text-align: center;
}

.login-social .head {
  height: 40px;
  line-height: 40px;
  position: relative;
}

.login-social .head .title {
  display: inline-block;
  padding: 0 20px;
  background-color: #fff;
  position: relative;
  font-size: 16px;
}

.login-social .head .line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: #f0f2f5;
}

.login-social .list {
  margin-top: 15px;
}

.login-social .list .item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 17px;
}

.login-social .list .item a {
  display: block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.login-social .list .item a:hover {
  opacity: 0.8;
}

.login-social .list .item a.wechat {
  background-image: url('../images/login-wechat.png');
}

.login-social .list .item a.qq {
  background-image: url('../images/login-qq.png');
}

.theme-dark {
  background-color: #333;
}

.theme-light {
  background-color: #f7f7f7;
}

.read-topbar {
  height: 64px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  width: 100%;
}

.read-topbar__container {
  position: absolute;
  padding: 8px 0px;
  left: 0;
  top: -64px;
  width: 100%;
  height: 48px;
  color: #fff;
  background-color: #1d1d1d;
  -webkit-transition: top 0.5s ease;
  -moz-transition: top 0.5s ease;
  transition: top 0.5s ease;
}

.inited .read-topbar__container,
.toolbar .read-topbar__container {
  top: 0px;
}

.read-topbar__container .pull-left,
.read-topbar__container .pull-right {
  padding: 0px 70px;
}

.read-topbar .logo {
  float: left;
}

.read-topbar .logo img {
  display: block;
}

.read-topbar .breadcrumb {
  line-height: 48px;
  float: left;
  margin-left: 40px;
}

.read-topbar .breadcrumb span,
.read-topbar .breadcrumb a {
  color: #dadada;
  font-size: 16px;
}

.read-topbar .breadcrumb a {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.read-topbar .breadcrumb a:hover {
  text-decoration: underline;
  color: #fff;
}

.read-topbar .breadcrumb span.active,
.read-topbar .breadcrumb a.active {
  color: #000;
}

.read-topbar .breadcrumb .separator {
  padding: 0 0.5em;
}

.read-topbar .action-row,
.read-topbar .action-col {
  float: left;
  height: 48px;
  line-height: 48px;
  color: #fff;
}

.read-topbar .action-col {
  margin-left: 30px;
  position: relative;
  z-index: 9;
}

.read-topbar .action-col a {
  font-size: 16px;
  color: #dadada;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.read-topbar .action-col a:hover {
  color: #000;
  text-decoration: underline;
}

.read-topbar .action-col a .icon-fav,
.read-topbar .action-col a .icon-phone {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -5px;
  margin-right: 3px;
}

.read-topbar .action-col a .icon-fav {
  background-image: url('../images/bar-icon-fav-default.png');
}

.read-topbar .action-col a .icon-phone {
  background-image: url('../images/bar-icon-phone.png');
}

.read-topbar .action-col a.active .icon-fav {
  background-image: url('../images/bar-icon-fav-active.png');
}

.read-topbar .action-col .avatar {
  padding: 2px;
  width: 44px;
  height: 44px;
}

.read-topbar .action-col .avatar img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 44px;
}

.up-box {
  position: absolute;
  left: 50%;
  top: 0;
  background-color: transparent;
  margin-left: -144px;
  width: 280px;
  height: 300px;
}

.up-box__container {
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 21px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 21px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  border: 4px solid #fff;
  position: relative;
  top: 48px;
  width: 272px;
  height: 250px;
  z-index: 999;
}

.up-box__container:after,
.up-box__container:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.up-box__container:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 4px;
  margin-left: -4px;
}

.up-box__container:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -6px;
}

.up-box__container {
  line-height: 1;
}

.up-box .username {
  font-size: 18px;
  text-align: center;
  padding: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-box .account {
  position: relative;
}

.up-box .account .col {
  float: left;
  width: 50%;
  text-align: center;
}

.up-box .account .number {
  padding: 10px 0;
  font-size: 18px;
}

.up-box .account .title {
  font-size: 14px;
  color: #5c5c5c;
}

.up-box .account .separator {
  position: absolute;
  left: 50%;
  bottom: 0;
  color: #d2d2d2;
}

.up-box .action {
  padding: 0 24px;
  margin-top: 30px;
  text-align: center;
}

.up-box .action .btn-primary {
  display: block;
  height: 38px;
  border-radius: 38px;
  background: rgba(255, 217, 81, 1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), color-stop(100%, rgba(255, 200, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), to(rgba(255, 200, 49, 1)));
  background: linear-gradient(to right, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd951', endColorstr='#ffc831', GradientType=1);
  text-align: center;
  line-height: 38px;
  color: #423300;
  width: 100%;
  border: 0;
  font-size: 16px;
}

.up-box .action .btn-default {
  height: 38px;
  border: 0;
  background-color: transparent;
  width: 100%;
  line-height: 38px;
  margin-top: 10px;
  font-size: 16px;
  color: #5c5c5c;
}

.up-box .action .btn-default .icon-logout {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-image: url('../images/up-logout.png');
  display: inline-block;
  margin-top: -5px;
}

.read-footbar {
  z-index: 5;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
}

.read-footbar__container {
  width: 100%;
  right: 0;
  bottom: -64px;
  position: absolute;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  transition: bottom 0.5s ease;
}

.theme-dark .read-footbar__container {
  background-color: rgba(29, 29, 29, 0.9);
  -pie-background: rgba(29, 29, 29, 0.9);
}

.theme-light .read-footbar__container {
  background-color: rgba(255, 255, 255, 0.9);
  -pie-background: rgba(255, 255, 255, 0.9);
}

.inited .read-footbar__container,
.toolbar .read-footbar__container {
  bottom: 0px;
}

.read-footbar__tools {
  padding: 0px 70px;
  height: 64px;
  float: right;
}

.read-footbar__tools .tools-item {
  float: left;
  position: relative;
}

.read-footbar__tools .tools-item button {
  width: 64px;
  height: 64px;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.read-footbar__tools .tools-item button:active {
  opacity: 0.7;
}

.read-footbar__tools .tools-item .icon-prev,
.read-footbar__tools .tools-item .icon-next,
.read-footbar__tools .tools-item .icon-list,
.read-footbar__tools .tools-item .icon-fullscreen,
.read-footbar__tools .tools-item .icon-switch {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: center;
}

.theme-dark .read-footbar__tools .tools-item .icon-prev {
  background-image: url('../images/dark-read_icon_tabpre.png');
}

.theme-dark .read-footbar__tools .tools-item .icon-next {
  background-image: url('../images/dark-read_icon_tabnewt.png');
}

.theme-dark .read-footbar__tools .tools-item .icon-list {
  background-image: url('../images/dark-read_icon_tabmenu.png');
}

.theme-dark .read-footbar__tools .tools-item .icon-fullscreen {
  background-image: url('../images/dark-read_icon_tabfullscreen.png');
}

.theme-dark .read-footbar__tools .tools-item .icon-switch {
  background-image: url('../images/dark-read_icon_switch.png');
}

.theme-light .read-footbar__tools .tools-item .icon-prev {
  background-image: url('../images/light-read_icon_tabpre.png');
}

.theme-light .read-footbar__tools .tools-item .icon-next {
  background-image: url('../images/light-read_icon_tabnewt.png');
}

.theme-light .read-footbar__tools .tools-item .icon-list {
  background-image: url('../images/light-read_icon_tabmenu.png');
}

.theme-light .read-footbar__tools .tools-item .icon-fullscreen {
  background-image: url('../images/light-read_icon_tabfullscreen.png');
}

.theme-light .read-footbar__tools .tools-item .icon-switch {
  background-image: url('../images/light-read_icon_switch.png');
}

.list-container {
  z-index: 2;
}

.theme-dark .list-container {
  position: fixed;
  bottom: 96px;
  width: 310px;
  background-color: #515151;
  right: 20px;
  border-radius: 10px;
  border: 1px solid #515151;
}

.theme-light .list-container {
  position: fixed;
  bottom: 96px;
  width: 310px;
  background-color: #fff;
  right: 20px;
  border-radius: 10px;
  border: 1px solid #e1e1e1;
}

.theme-dark .list-container .arrow {
  position: absolute;
  left: 86px;
  bottom: -12px;
  width: 18px;
  height: 12px;
  background-image: url('../images/dark-dialog-arrow.png');
  background-repeat: no-repeat;
}

.theme-light .list-container .arrow {
  position: absolute;
  left: 86px;
  bottom: -14px;
  width: 18px;
  height: 14px;
  background-image: url('../images/light-dialog-arrow.png');
  background-repeat: no-repeat;
}

.theme-dark .list-container__head {
  height: 46px;
  line-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid #464646;
}

.theme-light .list-container__head {
  height: 46px;
  line-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid #f4f4f4;
}

.theme-dark .list-container__head .title {
  float: left;
  color: #fff;
  font-weight: 18px;
}

.theme-light .list-container__head .title {
  float: left;
  color: #282828;
  font-weight: 18px;
}

.list-container__head .action {
  float: right;
}

.list-container__head .action button {
  width: 46px;
  height: 46px;
  line-height: 46px;
}

.theme-dark .list-container__head .action button .icon-back {
  background-image: url('../images/dark-iconback.png');
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.theme-light .list-container__head .action button .icon-back {
  background-image: url('../images/light-iconback.png');
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.list-scroll {
  padding: 16px 10px 16px 16px;
  position: relative;
}

.list-scroll__inner {
  max-height: 670px;
  overflow: hidden;
  overflow-y: auto;
}

.theme-dark .list-scroll__inner .item {
  font-size: 14px;
  color: #dadada;
  border-bottom: 1px solid #464646;
  height: 40px;
  line-height: 40px;
  margin-right: 12px;
}

.theme-light .list-scroll__inner .item {
  font-size: 14px;
  color: #282828;
  border-bottom: 1px solid #f4f4f4;
  height: 40px;
  line-height: 40px;
  margin-right: 12px;
}

.list-scroll__inner .item button,
.list-scroll__inner .item a {
  color: inherit;
  width: 100%;
  float: none;
  height: auto;
  text-align: left;
  line-height: inherit;
}

.list-scroll__inner .item a {
  display: block;
}

.list-scroll__inner .item .active {
  color: #ff9204;
}

.list-scroll__inner .item .title {
  color: inherit;
  float: left;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-scroll__inner .item a:hover .title {
  text-decoration: none;
  color: #ff9204;
}

.list-scroll__inner .item .icon-unlock,
.list-scroll__inner .item .icon-lock {
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  float: right;
  margin-top: 8px;
}

.list-scroll__inner .item .icon-unlock {
  background-image: url('../images/unlock.png');
}

.list-scroll__inner .item {
  position: relative;
}

.list-scroll__inner .item .icon-lock {
  position: absolute;
  top: 20px;
  right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -8px;
  background-size: contain;
  background-image: url('../images/icon-lock.png');
}

.read-main {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: margin 0.2s linear;
  transition: margin 0.2s linear;
  color: #fff;
}

.theme-light .read-main__body .item img {
  transform: none;
  box-shadow: 1px 1px 6px 0px #333;
}

.read-main__body {
  text-align: center;
  padding: 1em;
  margin: 64px 0px;
}

.read-main__body .item {
  font-size: 0;
  line-height: 0;
  margin: 0px auto 0px;
}

.theme-dark .read-main__body .item {
  background-color: #3c3c3c;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: block;
}

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

.clearfix {
  *zoom: 1;
}

.theme-dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.theme-dark ::-webkit-scrollbar-track {
  background: 0 0;
}

.theme-dark ::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 3px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}

.theme-light ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.theme-light ::-webkit-scrollbar-track {
  background: 0 0;
}

.theme-light ::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 3px;
}

.theme-light ::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}

.box-wrapper {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 16px 0px rgba(167, 172, 185, 0.06);
  box-shadow: 0px 5px 16px 0px rgba(167, 172, 185, 0.06);
}

.box-wrapper button {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.box-wrapper button:active {
  opacity: 0.7;
}

.mt-20 {
  margin-top: 20px;
}

.book-detail {
  padding: 64px 30px;
}

.book-detail__cover,
.book-detail__main {
  float: left;
}

.book-detail__cover {
  width: 270px;
}

.book-detail__main {
  width: 870px;
}

.book-detail__main .column {
  font-size: 16px;
  margin-bottom: 1em;
  color: #141414;
}

.book-detail__main .column lable,
.book-detail__main .column span {
  font-size: inherit;
  color: #909090;
}

.book-detail__head {
  line-height: 58px;
}

.book-detail__head .title {
  font-size: 26px;
  color: #0e0e0e;
  float: left;
}

.book-detail__head .hot {
  float: right;
  color: #ff9204;
  font-size: 28px;
}

.book-detail__head .icon-hot {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-image: url('../images/reqi_icon.png');
  margin-top: -6px;
}

.book-detail__tags .item {
  display: inline-block;
}

.book-detail__tags .item lable {
  display: block;
  border: 1px solid #d5d5d6;
  border-radius: 3px;
  padding: 0 3px;
}

.book-detail__body {
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.875;
  min-height: 100px;
}

.book-detail__body .label {
  color: #0e0e0e;
  font-size: inherit;
}

.book-detail__body .content {
  color: #5c5c5c;
  font-size: inherit;
}

.book-detail__body .more {
  color: #ff9204;
  font-size: inherit;
}

.book-detail__bar .pull-left .item {
  float: left;
  margin-right: 20px;
}

.book-detail__bar .pull-left .item .primary-btn {
  border-radius: 22px;
  display: block;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  background-color: #ffdb49;
  text-align: center;
  line-height: 46px;
  background-image: -webkit-linear-gradient(-4deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(-4deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  width: 154px;
  height: 46px;
  color: #0e0e0e;
  font-size: 18px;
}

.book-detail__bar .pull-left .item .primary-btn:hover {
  opacity: 0.8;
}

.book-detail__bar .pull-left .item .fav-btn {
  border-radius: 22px;
  display: block;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  line-height: 44px;
  border: 1px solid #aeaeae;
  transition: color 0.2s linear;
  width: 154px;
  color: #0e0e0e;
  font-size: 18px;
}

.book-detail__bar .pull-left .item .fav-btn.active {
  color: #909090;
}

.book-detail__bar .pull-left .item .fav-btn .icon-fav {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-image: url('../images/detail-icon-fav-default.png');
}

.book-detail__bar .pull-left .item .fav-btn.active .icon-fav {
  background-image: url('../images/detail-icon-fav-active.png');
}

.book-detail__bar .pull-right .item {
  float: left;
  margin-left: 2.5em;
}

.book-detail__bar .pull-right .item button {
  font-size: 18px;
  line-height: 46px;
}

.book-detail__bar .pull-right .item .icon-share,
.book-detail__bar .pull-right .item .icon-mobile {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-top: -6px;
  margin-left: 5px;
}

.book-detail__bar .pull-right .item .icon-share {
  background-image: url('../images/icon_share.png');
}

.book-detail__bar .pull-right .item .icon-mobile {
  background-image: url('../images/icon_shouji.png');
}

.book-chapters__head {
  height: 86px;
  line-height: 86px;
  padding: 0 30px;
  border-bottom: 1px solid #f0f2f5;
  overflow: hidden;
}

.book-chapters__head .title {
  float: left;
  font-size: 26px;
}

.book-chapters__head .title small {
  font-size: 20px;
  color: #909090;
}

.book-chapters__head .action {
  float: right;
}

.book-chapters__head .action button {
  font-size: 18px;
  color: #ff9204;
}

.book-chapters__head .action button .icon-order {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-image: url('../images/icon-order-asc.png');
  margin-top: -3px;
}

.book-chapters__head .action button.active .icon-order {
  background-image: url('../images/icon-order-desc.png');
}

.book-chapters {
  padding: 20px;
}

.book-chapters .item {
  float: left;
  padding: 9px;
  width: 368px;
}

.book-chapters .item a {
  display: block;
  padding: 0 48px 0 16px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  background-color: #f7f7f7;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.book-chapters .item a:hover {
  background-color: #eee;
}

.book-chapters .item a.active {
  color: #ff9204;
}

.book-chapters .item a.active:hover {
  background-color: #f7f7f7;
}

.sticky-fav {
  position: fixed;
  left: 50%;
  margin-left: 480px;
  top: 50%;
}

.sticky-fav .btn {
  width: 98px;
  height: 98px;
  overflow: hidden;
  text-indent: -999px;
  background-color: transparent;
  border: 0;
}

.theme-light .sticky-fav .btn {
  background-image: url('../images/light-sticky-fav-default.png');
}

.theme-dark .sticky-fav .btn {
  background-image: url('../images/dark-sticky-fav-default.png');
}

.options-bar {
  margin-top: 24px;
  margin-bottom: 40px;
}

.options-bar .pull-left {
  position: relative;
}

.options-bar .pull-left input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.options-bar .pull-left .text {
  position: relative;
  z-index: 1;
}

.options-bar .pull-left .text .checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/remember-checkbox-default.png');
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
}

.options-bar .pull-left input:checked ~ .text .checkbox {
  background-image: url('../images/remember-checkbox-checked.png');
}

.options-bar .pull-right a:hover {
  text-decoration: underline;
}

.options-bar .pull-right a.register-link {
  color: #0e8fff;
}

.dashboard-box {
  width: 1200px;
  margin: 20px auto 0 auto;
}

.dbc-205,
.dbc-975 {
  float: left;
}

.dbc-205 {
  width: 205px;
}

.dbc-975 {
  width: 975px;
  margin-left: 20px;
}

.db-box {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0px 5px 16px 0px rgba(167, 172, 185, 0.06);
  box-shadow: 0px 5px 16px 0px rgba(167, 172, 185, 0.06);
}

.db-nav {
  overflow: hidden;
}

.db-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.db-nav ul li {
  height: 64px;
  line-height: 64px;
  text-align: center;
}

.db-nav ul li a {
  display: block;
  -webkit-box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  font-size: 16px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.db-nav ul li a:hover {
  background-color: #f5f5f5;
}

.db-nav ul li a.active,
.db-nav ul li a:focus {
  background-color: #000;
}

.db-nav ul li a i {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-top: -4px;
}

.db-nav ul li a .icon-account {
  background-image: url('../images/nav-account.png');
}

.db-nav ul li a .icon-wallet {
  background-image: url('../images/nav-wallet.png');
}

.db-nav ul li a .icon-bill {
  background-image: url('../images/nav-bill.png');
}

.db-nav ul li a .icon-feedback {
  background-image: url('../images/nav-feedback.png');
}

.db-panel {
  padding: 28px;
}

.dbc-5p {
  float: left;
  width: 459px;
}

.db-user .avatar {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ededed;
  float: left;
}

.db-user .body {
  float: left;
  margin-left: 12px;
  padding: 10px 0;
}

.db-user .name {
  font-size: 22px;
}

.db-user .lvl {
  display: inline-block;
  width: 46px;
  height: 18px;
  border: 1px solid #909090;
  border-radius: 20px;
  line-height: 18px;
  font-size: 14px;
  color: #909090;
  text-align: center;
  vertical-align: middle;
  margin-top: -3px;
}

.db-user .id {
  font-size: 16px;
  color: #5c5c5c;
}

.db-user .name,
.db-user .id {
  margin: 8px 0;
}

.card-row .item {
  float: right;
  width: 184px;
  height: 52px;
  text-align: center;
  padding: 16px 0;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.card-row .item .number {
  font-size: 24px;
  color: #0f0f0f;
}

.card-row .item .title {
  font-size: 14px;
  color: #909090;
}

.dbc-5p .action-bar {
  float: right;
  width: 392px;
  margin-top: 30px;
}

.dbc-5p .action-bar .pull-left button {
  border-radius: 18px;
  background-image: -webkit-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  width: 164px;
  height: 38px;
  border-radius: 38px;
  border: 0;
  background-color: #000;
  font-size: 16px;
  color: #423300;
}

.dbc-5p .action-bar .switch {
  line-height: 38px;
  position: relative;
}

.dbc-5p .action-bar .switch input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.dbc-5p .action-bar .switch label {
  font-size: 16px;
  color: #5c5c5c;
}

.switch-wrapper {
  border-radius: 9px;
  width: 42px;
  height: 20px;
  float: right;
  background-color: #dcdcdc;
  position: relative;
  margin-top: 8px;
  margin-left: 10px;
  -webkit-transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch-wrapper .dot {
  border-radius: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch input:checked ~ .switch-wrapper {
  background-color: #ffd843;
}

.switch input:checked ~ .switch-wrapper .dot {
  left: 22px;
}

.db-books {
  margin-top: 20px;
}

.db-books__head {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}

.db-books__head .action {
  float: right;
}

.db-books__head .action button {
  background-color: transparent;
  border: 0;
  font-size: 16px;
}

.db-books__head .action .icon-edit {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-image: url('../images/action-edit.png');
  margin-top: -3px;
  margin-right: 5px;
}

.db-books__head .action .check-box,
.db-books__head .action .buttons {
  float: left;
}

.db-books__head .action .buttons button {
  margin-left: 15px;
}

.db-books__head .action .check-box {
  position: relative;
  font-size: 16px;
}

.db-books__head .action .check-box input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  filter: alpha(opacity=0);
}

.db-books__head .action .check-box span {
  font-size: 16px;
}

.db-books__head .action .check-box .icon-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-image: url('../images/book_icon_selected_n.png');
  background-repeat: no-repeat;
  margin-top: -6px;
}

.db-books__head .action .check-box input:checked ~ .label .text {
  color: #ff9204;
}

.db-books__head .action .check-box input:checked ~ .label .icon-check {
  background-image: url('../images/book_icon_selected_s.png');
}

.db-books__head .action .buttons .btn-outline {
  width: 114px;
  height: 32px;
  line-height: 30px;
  border-radius: 6px;
  border: 1px solid #909090;
  color: #909090;
  font-size: 16px;
}

.db-books__head .action .buttons .btn-outline.active {
  border-color: #ff9204;
  color: #ff9204;
}

.db-books__head .action .buttons .btn-primary {
  border-radius: 6px;
  background-image: -webkit-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  width: 94px;
  line-height: 34px;
  height: 34px;
  color: #423300;
  background-color: #ffd843;
}

.db-tabs {
  float: left;
}

.db-tabs .item {
  float: left;
}

.db-tabs .item a {
  display: block;
  padding: 0 27px;
  font-size: 18px;
  position: relative;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.db-tabs .item a:hover {
  color: #ff9204;
}

.db-tabs .item a.active {
  color: #ff9204;
  pointer-events: none;
}

.db-tabs .item a i {
  display: block;
  opacity: 0;
  width: 0%;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  left: 50%;
  height: 3px;
  background-color: #ff9204;
  bottom: 0px;
  filter: alpha(opacity=0);
}

.db-tabs .item a.active i {
  width: 30px;
  height: 3px;
  opacity: 1;
  margin-left: -15px;
  filter: alpha(opacity=100);
}

.db-book__list {
  padding: 30px 18px;
}

.db-book__list .item {
  float: left;
  width: 140px;
  margin: 0 8px 20px 8px;
}

.db-book__list .item .thumb {
  position: relative;
  margin-bottom: 10px;
  width: 140px;
  height: 186px;
}

.db-book__list .item .title {
  font-size: 16px;
  color: #0f0f0f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

.db-book__list .item .info {
  margin-top: 5px;
  font-size: 14px;
  color: #909090;
}

.db-book__list .item:hover a {
  text-decoration: none;
}

.db-book__list .item:hover .title {
  color: #ff9204;
}

.db-book__list .item .thumb-mask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.db-book__list .item .thumb-mask input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
  filter: alpha(opacity=0);
}

.db-book__list .item .thumb-mask .check-box {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
}

.db-book__list .item .thumb-mask .check-box i {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url('../images/pic_choose_n.png');
}

.db-book__list .item .thumb-mask input:checked ~ .check-box i {
  background-image: url('../images/radio_button_on.png');
}

.db-account__head {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}

.db-account__head .title {
  font-size: 20px;
  color: #0f0f0f;
  padding-left: 18px;
}

.db-table {
  min-height: 750px;
  height: auto;
  visibility: visible;
}

.db-table table {
  border-collapse: collapse;
}

.db-table thead th {
  text-align: left;
}

.db-table thead th,
.db-table tbody td {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.db-table tbody td {
  color: #5c5c5c;
}

.db-table tbody td .typo-red {
  color: #ff5420;
}

.db-table tbody td .typo-green {
  color: #19a554;
}

.db-table .pdl-40 {
  padding-left: 40px;
}

.db-table .pdr-40 {
  padding-right: 40px;
}

.db-table tbody tr td {
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

.db-table tbody tr:hover td {
  background-color: #f5f5f5;
}

.db-table tbody td .title {
  font-size: 16px;
}

.db-table tbody td .info {
  font-size: 14px;
  color: #5c5c5c;
  margin-top: 5px;
}

.db-table tbody td .info label {
  display: inline-block;
  width: 40px;
  height: 18px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
  margin-right: 5px;
}

.db-table tbody td .info .green {
  background-color: #53c117;
}

.db-table tbody td .info .blue {
  background-color: #3399f0;
}

.db-table tbody td .info .red {
  background-color: #f95a45;
}

.db-table thead .typo-16 th {
  font-size: 16px;
}

.guide-box {
  margin: 20px auto;
  min-height: 800px;
  height: auto;
  visibility: visible;
}

.guide-box__list {
  padding: 12px 96px;
}

.guide-box__list .item {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}

.guide-box__list .item p {
  margin: 0;
  padding: 0;
}

.guide-box__list .item .title {
  font-size: 19px;
  color: #0e0e0e;
}

.guide-box__list .item .text {
  font-size: 14px;
  color: #828282;
  margin-top: 10px;
}

.guide-box__list .contact {
  padding: 24px 0;
}

.guide-box__list .contact .title {
  font-size: 19px;
  color: #0e0e0e;
}

.guide-box__list .contact .content {
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  color: #828282;
  margin-top: 15px;
}

.guide-box__list .contact .content a {
  font-size: 0;
  line-height: 0;
}

.guide-box__list .contact .content a img {
  vertical-align: top;
  margin-right: 14px;
}

.db-form {
  width: 740px;
  margin: 40px auto 110px auto;
  min-height: 700px;
}

.db-form .input-field,
.db-form .textarea-field {
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 0 25px;
}

.db-form .input-field input,
.db-form .textarea-field textarea {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  resize: none;
  width: 100%;
  outline-width: 0;
  font-size: 16px;
}

.db-form .input-field input {
  height: 50px;
}

.db-form .textarea-field {
  padding: 25px;
}

.db-form .textarea-field textarea {
  height: 250px;
}

.db-form .action {
  text-align: center;
  margin-top: 70px;
}

.db-form .action button {
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  font-size: 18px;
  margin: 0 24px;
}

.db-form .action .btn-primary {
  border-radius: 22px;
  background-image: -webkit-linear-gradient(-4deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(-4deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  width: 180px;
  height: 46px;
  background-color: #ffd843;
}

.db-form .action .btn-outline {
  border-width: 1px;
  color: #909090;
  border-color: #909090;
  border-style: solid;
  border-radius: 22px;
  width: 178px;
  height: 44px;
}

.footer {
  position: relative;
  padding: 30px 0;
  min-width: 1200px;
  line-height: 32px;
}

.footer small {
  color: #676767;
}

.footer span {
  color: #181818;
}

.footer small a {
  color: #676767;
}

.mask-box {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
  -pie-background: rgba(0, 0, 0, 0.6);
}

.modal {
  z-index: 9;
  position: fixed;
  width: 620px;
  border-radius: 5px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  margin-left: -310px;
  margin-top: -310px;
}

.modal-title {
  font-size: 32px;
  text-align: center;
  padding: 32px 0;
}

.modal .close {
  position: absolute;
  width: 32px;
  height: 32px;
  right: 15px;
  top: 15px;
}

.modal .close button {
  background-color: transparent;
  border: 0;
  background-image: url('../images/modal-close.png');
  width: 32px;
  height: 32px;
  overflow: hidden;
  text-indent: -999px;
}

.pls-box {
  width: 350px;
  margin: 0 auto;
}

.pls-box .list {
  padding-top: 20px;
}

.pls-box .list .item {
  position: relative;
  margin-bottom: 32px;
}

.pls-box .list .item input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.pls-box .list .item button {
  border-width: 1px;
  border-color: rgb(210, 210, 210);
  border-style: solid;
  border-radius: 4px;
  width: 348px;
  height: 86px;
  background-color: #fff;
  padding: 0;
  margin: 0;
  font-size: 18px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 86px;
  text-indent: 100px;
  text-align: left;
}

.pls-box .list .item input:checked ~ button {
  border-width: 2px;
  border-color: rgb(255, 156, 0);
  background-color: rgb(255, 253, 242);
  width: 346px;
  height: 84px;
  line-height: 84px;
  text-indent: 99px;
}

.pls-box .list .item button .icon-alipay,
.pls-box .list .item button .icon-wepay {
  display: inline-block;
  width: 42px;
  height: 42px;
  vertical-align: middle;
  margin-top: -8px;
  margin-right: 10px;
}

.pls-box .list .item button .icon-alipay {
  background-image: url('../images/payment-alipay.png');
}

.pls-box .list .item button .icon-wepay {
  background-image: url('../images/payment-wepay.png');
}

.pls-box .notice {
  text-align: center;
  font-size: 16px;
  margin-top: 40px;
}

.pls-box .action {
  margin-top: 24px;
  margin-bottom: 100px;
}

.pls-box .action button,
.plc-box .action button {
  border-radius: 34px;
  background-image: -webkit-linear-gradient(8deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(8deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  width: 350px;
  height: 68px;
  border: 0;
  background-color: #ffd843;
  font-size: 20px;
  color: #423300;
}

.plc-box .list {
  padding: 0 30px;
}

.plc-box .list .item {
  margin: 10px;
  float: left;
  width: 260px;
  position: relative;
}

.plc-box .list .item input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  filter: alpha(opacity=0);
}

.plc-box .list .item .appear {
  border-width: 1px;
  border-color: #ccc;
  border-style: solid;
  border-radius: 4px;
  background-color: #fff;
  width: 258px;
  height: 132px;
  line-height: 132px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.plc-box .list .item .appear label {
  width: 53px;
  height: 53px;
  position: absolute;
  left: -1px;
  top: -1px;
}

.plc-box .list .item .appear label.reward {
  background-image: url('../images/plc-label-1.png');
  z-index: 1;
}

.plc-box .list .item .appear label.first {
  background-image: url('../images/plc-label-2.png');
  z-index: 1;
}

.plc-box .list .item .appear .inner {
  display: inline-block;
  vertical-align: middle;
  line-height: 30px;
  margin-top: -3px;
}

.plc-box .list .item .appear .title {
  font-size: 20px;
  color: #0f0f0f;
}

.plc-box .list .item .appear .text,
.plc-box .list .item .appear .append {
  font-size: 18px;
  color: #787878;
}

.plc-box .action {
  width: 350px;
  margin: 60px auto;
}

.plc-box .list .item input:checked ~ .appear {
  border-width: 2px;
  border-color: rgb(255, 168, 0);
  background-color: rgb(255, 253, 242);
  width: 256px;
  height: 130px;
}

.plc-box .list .item input:checked ~ .appear .title,
.plc-box .list .item input:checked ~ .appear .append {
  color: #ff9204;
}

.plc-box .list .item input:checked ~ .appear label {
  left: -2px;
  top: -2px;
}

.plc-box .list .item input:checked ~ .appear .inner {
  margin-top: -6px;
}

.topbar-search {
  position: relative;
}

.suggestion-wrap {
  position: absolute;
  width: 340px;
  left: -20px;
  top: 65px;
  display: none;
  opacity: 0;
  z-index: 999;
}

.suggestion-box {
  background-color: #fff;
  border-radius: 5px;
  line-height: 1.2;
  -webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1);
}

.suggestion-tl {
  padding-bottom: 10px;
}

.suggestion-tl .head {
  padding: 6px 20px 0 20px;
  line-height: 32px;
  height: 32px;
}

.suggestion-tl .head .title {
  font-size: 14px;
  color: #aaa;
  float: left;
}

.suggestion-tl .head .action {
  float: right;
}

.suggestion-tl .head .action button {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  vertical-align: top;
  background-image: url('../images/search-delete.png');
  background-repeat: no-repeat;
  background-position: right center;
}

.suggestion-words {
  padding: 10px 0;
}

.suggestion-tl .item a,
.suggestion-words .item a {
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-words .item a {
  font-size: 16px;
}

.suggestion-tl .item a:hover,
.suggestion-words .item a:hover,
.suggestion-words .item a .matche {
  color: #ff9204;
}

.suggestion-words .item a .matche {
  font-size: inherit;
}

.suggestion-tl.bottom-line {
  border-bottom: 1px solid #f0f2f5;
}

.suggestion-wrap.show {
  display: block;
  opacity: 0;
  -webkit-animation: showSuggestion 0.2s linear forwards;
  animation: showSuggestion 0.2s linear forwards;
  z-index: 999;
}

.suggestion-wrap.hide {
  display: none;
}

@-webkit-keyframes showSuggestion {
  from {
    opacity: 0;
    top: 0;
  }

  to {
    opacity: 1;
    top: 65px;
  }
}

@keyframes showSuggestion {
  from {
    opacity: 0;
    top: 0;
  }

  to {
    opacity: 1;
    top: 65px;
  }
}

.result-title {
  float: left;
  color: #282828;
  font-size: 22px;
}

.result-title .matche {
  color: #ff9204;
  font-size: inherit;
}

.load-more {
  width: 560px;
  height: 50px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 50px;
}

.load-more a {
  display: block;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  background-color: transparent;
  border: 0;
  width: 100%;
  text-align: center;
}

.book-chapters .item a .icon-lock,
.book-chapters .item a .icon-unlock {
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -12px;
}

.book-chapters .item a .icon-lock {
  background-image: url('../images/lock.png');
}

.book-chapters .item a .icon-unlock {
  background-image: url('../images/unlock.png');
}

.modal .login-form {
  padding-top: 100px;
}

.modal .login-ctrl {
  margin-bottom: 36px;
}

.modal .login-field input {
  font-size: 16px;
}

.modal .options-bar .pull-left .text,
.modal .options-bar .pull-right a {
  font-size: 16px;
}

.cate-mod {
  margin: 0 auto;
  padding: 0 8px;
  width: 1184px;
}

.cate-mod__head {
  padding: 38px 0;
}

.cate-mod__row {
  margin: 10px 0 0 0;
  float: left;
  width: 100%;
}

.cate-mod__topic {
  float: left;
  /* margin-right: 2px; */
  margin: 0 5px 10px 0;
}

.cate-mod__topic a {
  display: block;
  padding: 0 16px;
  line-height: 28px;
  border-radius: 14px;
  color: #282828;
  font-size: 16px;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

.cate-mod__topic a.active,
.cate-mod__topic a:focus {
  background: rgba(255, 217, 81, 1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), color-stop(100%, rgba(255, 200, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), to(rgba(255, 200, 49, 1)));
  background: linear-gradient(to right, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd951', endColorstr='#ffc831', GradientType=1);
}

.cate-mod__topic a:hover {
  background-color: #eee;
}

.cate-mod__topic a.active:hover {
  color: inherit;
}

.comic-list .item {
  border-radius: 4px;
  border: 2px solid #fafafa;
  float: left;
  width: 281px;
  margin-right: 21px;
  margin-bottom: 21px;
}

.comic-list .item .thumb {
  background-image: url(../images/logo_imgbg_s.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
}

.comic-list .item .thumb a,
.comic-list .item .thumb a img {
  width: 281px;
  height: 360px;
  display: block;
}

.comic-list .item .body {
  padding: 10px;
}

.comic-list .item .author {
  margin: 5px 0;
}

.comic-list .item .title,
.comic-list .item .chapters,
.comic-list .item .author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comic-list .item .title a {
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
  font-size: 16px;
}

.comic-list .item .title a:hover {
  color: #ff9204;
  text-decoration: underline;
}

.comic-list .item .chapters {
  color: #ff9204;
}

.comic-list .item .author {
  color: #909090;
}

.comic-list .item .chapters,
.comic-list .item .author {
  font-size: 14px;
}

.dataPagination {
  margin: 40px auto 0;
  height: 50px;
  text-align: center;
}

.dataPagination .ui-pagination-page-item {
  height: 38px;
  padding: 5px 25px;
  margin: 0 5px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  line-height: 38px;
  background-color: #fff;
  font-size: 14px;
  -webkit-transition: color 0.2s linear, background-color 0.2s linear;
  transition: color 0.2s linear, background-color 0.2s linear;
  display: inline-block;
}

.dataPagination .ui-pagination-page-item:hover {
  color: #fff;
  color: #001111;
  background-color: #000;
}

.dataPagination .ui-pagination-page-item.active {
  color: #001111;
  background-color: #000;
  padding: 5px 25px;
}

.rank-table {
  margin-top: 15px;
}

.rank-table table {
  border-collapse: collapse;
}

.rank-table td,
.rank-table th {
  border: 1px solid #f5f5f5;
  text-align: left;
  padding: 10px 18px;
  font-weight: 400;
  color: #828282;
  font-size: 14px;
}

.rank-table td {
  text-align: center;
}

.rank-table .typo-red {
  color: #ff5420;
  font-size: 14px;
}

.rank-table button {
  background: rgba(255, 217, 81, 1);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), color-stop(100%, rgba(255, 200, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 217, 81, 1)), color-stop(15%, rgba(255, 217, 81, 1)), to(rgba(255, 200, 49, 1)));
  background: linear-gradient(to right, rgba(255, 217, 81, 1) 0%, rgba(255, 217, 81, 1) 15%, rgba(255, 200, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd951', endColorstr='#ffc831', GradientType=1);
  width: 120px;
  height: 32px;
  border-radius: 16px;
  border: 0;
  margin-left: 10px;
}

.guide-box__list .contact .content .number {
  display: inline-block;
  font-size: 16px;
  color: #ff730b;
  font-weight: 400;
  border: 1px dashed #ff730b;
  background-color: #fffde2;
  padding: 0 20px;
  height: 31px;
  line-height: 31px;
  margin-right: 10px;
}

.payment-mod {
  width: 1100px;
  margin: 0 auto;
}

.payment-mod__head {
  padding: 32px 0;
  position: relative;
}

.payment-mod__head .text {
  color: #0f0f0f;
  font-size: 16px;
  margin: 10px 0;
  line-height: 1.2;
  position: relative;
}

.payment-mod__head .text span {
  color: #ff5420;
  font-size: inherit;
}

.payment-mod__head .amount {
  font-size: 20px;
  color: #0f0f0f;
  line-height: 1.4;
  position: absolute;
  right: 0;
  bottom: 36px;
}

.payment-mod__head .amount .price {
  font-size: 26px;
  color: #ff5420;
  font-weight: 600;
}

.payment-main {
  border-radius: 6px;
  background-color: #fefefe;
  box-shadow: 0px 4px 24px 0px rgba(167, 172, 185, 0.24);
  width: 1100px;
  margin: 0 auto;
  padding-top: 58px;
  padding-bottom: 80px;
}

.payment-main .col {
  float: left;
  width: 50%;
}

.payment-main .col .qr {
  width: 248px;
  margin: 0 auto;
  text-align: center;
}

.payment-main .col .qr .media {
  width: 246px;
  height: 246px;
  border: 1px solid #e7e7e7;
  margin: 15px 0;
}

.payment-main .col .qr .media img {
  display: block;
  padding: 17px;
  width: 212px;
  height: 212px;
}

.payment-main .col .qr .title {
  font-size: 23px;
}

.payment-main .col .qr .title .icon-wepay {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  background-image: url('../images/icon-wepay.png');
  background-repeat: no-repeat;
  margin-top: -4px;
  margin-right: 5px;
}

.payment-main .col .qr .tips .icon-scan {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-image: url('../images/icon-scan.png');
  background-repeat: no-repeat;
  vertical-align: middle;
}

.payment-main .col .qr .tips .body {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  line-height: 24px;
  margin-left: 5px;
}

.payment-back {
  margin: 40px 0;
}

.payment-back a {
  font-size: 18px;
  color: #488ae5;
}

.lock-head {
  height: 32px;
  line-height: 32px;
  position: relative;
  text-align: center;
  margin-top: 52px;
  margin-bottom: 32px;
}

.lock-head .title {
  display: inline-block;
  line-height: 32px;
  background-color: #fff;
  padding: 0 10px;
  position: relative;
  color: #909090;
}

.lock-head .line {
  width: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -170px;
  border-bottom: 1px solid #eee;
}

.lock-body {
  text-align: center;
}

.lock-body .title {
  font-size: 26px;
}

.lock-body .title span {
  font-size: inherit;
}

.lock-body .title .typo-orange {
  color: #ff5420;
}

.lock-body .op {
  font-size: 18px;
  color: #909090;
  margin: 5px 0;
}

.lock-body .om {
  font-size: 18px;
  color: #5c5c5c;
  margin: 24px 0;
}

.lock-body .om a {
  font-size: inherit;
  color: #0e8fff;
  text-decoration: underline;
}

.lock-body .om a:hover {
  text-decoration: none;
}

.lock-body .action {
  margin: 0 50px 40px 50px;
}

.lock-body .action button {
  border-radius: 32px;
  background-image: -moz-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -webkit-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  background-image: -ms-linear-gradient(-14deg, rgb(255, 225, 83) 19%, rgb(255, 194, 31) 97%);
  height: 64px;
  width: 100%;
  border: 0;
  background-color: #ffd33d;
  font-size: 18px;
  color: #423300;
}

.lock-body .tips {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
  color: #ff5104;
}

.lock-body .tips .icon-warning {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('../images/icon_gantan.png');
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -6px;
}

.lock-bar {
  height: 82px;
  border-top: 1px solid #f0f2f5;
  line-height: 82px;
  padding: 0 48px;
  font-size: 16px;
  color: #909090;
}

.lock-bar .left,
.lock-bar .right,
.lock-bar .right .text {
  color: inherit;
  font-size: inherit;
}

.lock-bar .left {
  float: left;
}

.lock-bar .right {
  float: right;
  position: relative;
}

.lock-bar .right input {
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  top: 50%;
  margin-top: -16px;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.lock-bar .right .text .checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/remember-checkbox-default.png');
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
}

.lock-bar .right input:checked ~ .text .checkbox {
  background-image: url('../images/remember-checkbox-checked.png');
}

.book-detail__bar .pull-right .item {
  position: relative;
}

.drop-wrapper {
  position: absolute;
  left: -50px;
  top: 46px;
  z-index: 5;
  display: none;
}

.drop-wrapper .share-list {
  background-color: #fff;
  border-radius: 5px;
  list-style: none;
  margin: 0;
  box-shadow: 0px 5px 16px 0px rgba(178, 179, 184, 0.36);
  padding: 12px 30px;
  white-space: nowrap;
}

.drop-wrapper .share-list li {
  padding: 12px 0;
}

.drop-wrapper .share-list li a {
  font-size: 13px;
  color: #909090;
  height: 30px;
  line-height: 30px;
  transition: color 0.2s linear;
  display: block;
}

.drop-wrapper .share-list li a:hover {
  color: #f75234;
}

.drop-wrapper .share-list li a i {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 10px;
}

.drop-wrapper .share-list li a .icon-moment {
  background-image: url('../images/share_icon_pyq.png');
}

.drop-wrapper .share-list li a .icon-wechat {
  background-image: url('../images/share_icon_wechat.png');
}

.drop-wrapper .share-list li a .icon-qq {
  background-image: url('../images/share_icon_qq.png');
}

.drop-wrapper .share-list li a .icon-qzone {
  background-image: url('../images/share_icon_qzone.png');
}

.drop-wrapper .share-list li a .icon-weibo {
  background-image: url('../images/share_icon_weibo.png');
}

.drop-wrapper .arrow {
  position: absolute;
  width: 13px;
  height: 9px;
  background-image: url('../images/drop-arrow.png');
  left: 70%;
  top: -9px;
}

.drop-wrapper .app-qr {
  background-color: #fff;
  border-radius: 5px;
  list-style: none;
  margin: 0;
  box-shadow: 0px 5px 16px 0px rgba(178, 179, 184, 0.36);
  padding: 20px 36px;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

.drop-wrapper .app-qr .text {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
  color: #5c5c5c;
}

/*--分享样式--*/
.qrcode-share {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.spread {
  background: #fff;
  position: absolute;
  width: 350px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

.spread .title {
  height: 35px;
  line-height: 35px;
  display: block;
  text-align: center;
  background: #f7f7f7;
}

.chapter .entry {
  height: 150px;
  margin: 10px;
  margin-left: 95px;
}

.spread .bottom {
  line-height: 40px;
  text-align: center;
  height: 50px;
  background: #f7f7f7;
}

/*--阅读页二维码--*/
.qrcode-box {
  position: absolute;
  left: 50%;
  top: 0;
  background-color: transparent;
  margin-left: -84px;
  width: 200px;
  height: 200px;
}

.qrcode-box__container {
  line-height: 1;
}

.qrcode-box__container {
  background-color: #fff;
  box-shadow: 0px 5px 21px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  border: 4px solid #fff;
  position: relative;
  top: 48px;
  width: 160px;
  height: 150px;
  z-index: 999;
}

.qrcode-box__container:after,
.qrcode-box__container:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.qrcode-box__container:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 4px;
  margin-left: -4px;
}

.qrcode-box__container:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -6px;
}

.qrcode-box .qrcode {
  font-size: 18px;
  text-align: center;
  padding: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link {
  min-width: 1200px;
  background: #ffffff;
  border-bottom: 1px solid #fff;
}

.link_inner {
  padding: 0 8px;
  width: 1184px;
  margin: 0 auto;
  padding: 20px 0;
}

.link_inner_title {
  color: #181818;
  font-size: 20px;
  padding-bottom: 10px;
}

.link_inner a {
  color: #181818;
  margin-right: 20px;
}

.footer_inner {
  position: relative;
  padding: 0 20px;
  width: 1184px;
  margin: 0 auto;
}
.swiper-container {
  width: 100%;
  height: auto;
  padding: 0 !important;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  height: auto !important;
  border-radius: 0px;
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  background-color: #f2f2f2;
  background-image: url(../images/logo_imgbg_h.png);
  overflow: hidden;
  display: inline-block;
  transition-property: all;
}

.swiper-slide a {
  display: flex;
}

.swiper-slide img {
  width: 100%;
}

#progressEffect {
  position: absolute;
  z-index: 10;
  top: 20px;
  left: 20px;
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 30px !important;
}

.colorbga {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 100%;
  z-index: 10;
  background: transparent;
}

.colorbgb {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 100%;
  z-index: 10;
  background: transparent;
}

.colorbga .swiper-button-prev,
.colorbgb .swiper-button-next {
  width: 70px;
  height: 70px;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.colorbga .swiper-button-prev {
  right: auto;
  left: 60px;
}

.colorbgb .swiper-button-next {
  left: auto;
  right: 60px;
}

.colorbga .swiper-button-prev:after,
.colorbgb .swiper-button-next:after {
  font-size: 27px;
}

.op0 {
  opacity: 0;
}

.detail-mod {
  width: 1184px;
  padding-bottom: 100px;
  margin: 20px auto;
}

.detail-mod .detail-left {
  width: 873px;
  margin-right: 27px;
  float: left;
}

.detail-mod .detail-right {
  width: 284px;
  float: left;
}

.detail-mod .detail-bottom {
  clear: both;
}

.detail-mod .detail-mod-box {
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 3px 0 rgba(106, 115, 133, 0.08);
}

.detail-introduce .col i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -3px;
  background-size: contain;
}

.detail-introduce .col .icon-tag {
  background-image: url('../images/icon-tag.png');
  /* margin: -7px 2px 0 0; */
}

.detail-introduce .col .icon-keyword {
  background-image: url('../images/icon-keyword.png');
  /* margin: -7px 2px 0 0; */
}

.detail-introduce .col .icon-notice {
  background-image: url('../images/icon-notice.png');
}

.detail-introduce .col .icon-collection {
  background-image: url('../images/icon-collection.png');
}

.detail-introduce .col .icon-collectioned {
  background-image: url('../images/icon-collectioned.png');
}

.detail-introduce ul,
.detail-introduce ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-head {
  line-height: 28px;
  font-size: 22px;
  color: #282828;
  /* float: left; */
}

.detail-head-center {
  text-align: center;
}

.detail-introduce {
  min-height: 320px;
}

.detail-introduce .top-thumb {
  width: 250px;
  height: 320px;
  margin-right: 33px;
  background-image: url(../images/logo_imgbg_s.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
  float: left;
}

.detail-introduce .top-thumb img {
  width: 250px;
  height: 320px;
}

.detail-introduce .info {
  width: 850px;
  font-size: 14px;
  /* float: left; */
  display: inline-block;
}

.detail-introduce li {
  display: inline-block;
}

.detail-introduce .info .title {
  margin-bottom: 11px;
  font-size: 28px;
  font-weight: bold;
}

.detail-introduce .info .author {
  margin-bottom: 15px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.56);
}

.detail-introduce .info .wordlist,
.detail-introduce .info .newchapter {
  width: 100%;
  line-height: 2;
  color: #bbb;
}

.detail-introduce .info .wordlist li {
  margin-right: 5px;
}

.detail-introduce .info .wordlist li a,
.detail-introduce .info .newchapter a {
  color: #bbb;
}

.detail-introduce .info .wordlist li a:visited,
.detail-introduce .info .newchapter a:visited {
  color: #bbb;
}

.detail-introduce .info .wordlist li a:hover,
.detail-introduce .info .newchapter a:hover {
  color: rgb(136, 135, 135);
}

.detail-introduce .info .wordlist li a:active,
.detail-introduce .info .newchapter a:active {
  color: rgb(136, 135, 135);
}

.detail-introduce .info .col,
.detail-introduce .info .col {
  width: 16px;
  margin-right: 8px;
  float: left;
}

.detail-introduce .info .newchapter a {
  margin: 0;
}

.detail-introduce .info .briefintroduce {
  margin: 10px 0;
  color: rgba(0, 0, 0, 0.56);
}

.detail-introduce .info .btnlist button {
  height: 44px;
  font-size: 16px;
  padding: 10px 40px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.detail-introduce .info .btnlist .btn-start {
  margin-right: 16px;
  color: #fff;
  background-color: #fac43c;
}

.detail-introduce .info .btnlist .btn-start:hover {
  background-color: #f0b92e;
}

.detail-introduce .info .btnlist .btn-start:active {
  background-color: #f0b92e;
}

.detail-introduce .info .btnlist .btn-start:visited {
  background-color: #f0b92e;
}

.detail-introduce .info .btnlist .btn-collection {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: #fff;
}

.detail-introduce .info .btnlist .btn-collection:hover {
  background-color: rgba(250, 196, 60, 0.2);
}

.detail-introduce .info .btnlist .btn-collection:active {
  background-color: rgba(250, 196, 60, 0.2) e;
}

.detail-introduce .info .btnlist .btn-collection:visited {
  background-color: rgba(250, 196, 60, 0.2);
}

.detail-chapter-box ul,
.detail-chapter-box ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-chapter-box ul {
  margin-top: 20px;
  letter-spacing: -8px;
}

.detail-chapter-box ul li {
  display: inline-block;
  letter-spacing: normal;
}

.detail-chapter-box ul li a {
  position: relative;
  width: 196px;
  height: 42px;
  line-height: 42px !important;
  padding: 0 12px;
  margin-bottom: 16px;
  margin-right: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-block;
}

.detail-chapter-box ul li a span {
  width: 90%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail-chapter-box ul li a i {
  position: absolute;
  top: 16px;
  right: 5px;
  /* bottom: 0;
  left: 0; */
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -3px;
  background-size: contain;
}

.detail-chapter-box ul li a .icon-lock {
  background-image: url('../images/icon-lock.png');
  /* margin: -7px 2px 0 0; */
}

.detail-chapter-box ul li a .icon-locked {
  background-image: url('../images/icon-locked.png');
  /* margin: -7px 2px 0 0; */
}

.detail-chapter-box ul li:nth-child(4n + 4) a {
  margin-right: 0;
}

.detail-chapter-box ul li a:hover {
  background-color: rgba(250, 196, 60, 0.2);
}

.detail-chapter-box ul li a:active {
  background-color: rgba(250, 196, 60, 0.2);
}

.detail-chapter-box ul li a:visited {
  background-color: rgba(250, 196, 60, 0.2);
}

.detail-qrcode p {
  margin: 10px;
  text-align: center;
  color: rgba(0, 0, 0, 0.56);
}

.detail-qrcode img {
  width: 180px;
  height: 180px;
  margin: auto;
  display: block;
}

.detial-update-box {
  margin-top: 20px;
}

.detial-update-box .item {
  height: 76px;
  padding: 10px 0;
  margin-bottom: 10px;
}

.detial-update-box .item:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}

.detial-update-box .item .thumb {
  position: relative;
  width: 119px;
  height: 76px;
  margin-right: 15px;
  background-image: url(../images/logo_imgbg_h.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
  float: left;
}

.detial-update-box .item .thumb a {
  width: 119px;
  height: 76px;
  display: block;
}

.detial-update-box .item .thumb img {
  width: 119px;
  height: 76px;
}

.detial-update-box .item .thumb .briefintroduce {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 99px;
  height: 46px;
  padding: 15px 10px;
  background-color: rgba(0, 0, 0, 0.2);
  display: none;
}

.item .thumb .briefintroduce p {
  margin: 0;
  font-size: 12px;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.detial-update-box .item:hover .thumb .briefintroduce {
  display: block;
  transition: all 0.5s ease;
}

.detial-update-box .item .body {
  width: 110px;
  display: inline-block;
}

.detial-update-box .item .body .title {
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.detial-update-box .item .body .title a {
  font-size: 14px;
  font-weight: bold;
}

.detial-update-box .item:hover .body .title a {
  color: #fac43c;
}

.detial-update-box .item .body .author {
  margin-bottom: 5px;
  font-size: 12px;
  color: #bbb;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.detial-update-box .item .body .chapters {
  font-size: 12px;
  color: #bbb;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.detail-bottom-box {
  height: 312px;
  margin-top: 20px;
}

.detail-bottom-box .item {
  margin-right: 20px;
  float: left;
}

.detail-bottom-box .item:last-child {
  margin: 0;
}

.detail-bottom-box .item .thumb {
  width: 212.8px;
  height: 270px;
  background-image: url(../images/logo_imgbg_s.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
}

.detail-bottom-box .item .thumb a {
  width: 212.8px;
  height: 270px;
  display: block;
}

.detail-bottom-box .item .thumb img {
  width: 212.8px;
  height: 270px;
}

.detail-bottom-box .item .body {
  width: 100%;
  height: 32px;
  line-height: 32px;
  margin-top: 10px;
}

.detail-bottom-box .item .body a {
  height: 32px;
  font-size: 16px;
  display: block;
}

.detail-bottom-box .item:hover .body a {
  color: #fac43c;
}

.down {
  position: relative;
  font-size: 0;
}

.down_list {
  position: absolute;
  bottom: 16%;
  right: 18%;
  width: 20%;
  height: 35%;
}

.down_list a {
  display: inline-block;
  height: 50%;
  width: 100%;
  background: transparent;
}

.ovfHiden {
  overflow: hidden;
  height: 100%;
}

#charges-box {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: none;
}

#charges-box .blackbg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#charges-box .charges-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 345px;
  border-radius: 10px;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  text-align: center;
  z-index: 2;
}

#charges-box .alert-head {
  background: #ffd704;
  padding: 42px;
  border-radius: 10px;
}

#charges-box .alert-head img {
  vertical-align: middle;
}

#charges-box .alert-head h2 {
  padding-top: 20px;
  font-size: 20px;
  color: #834e00;
  font-weight: bold;
}

#charges-box .alert-head .close {
  position: absolute;
  top: 5px;
  right: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -3px;
  background-size: contain;
  cursor: pointer;
}

#charges-box .alert-head .icon-close {
  position: absolute;
  top: 20px;
  right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: -3px;
  background-size: contain;
  background-image: url('../images/modal-close.png');
}

#charges-box .alert-main p {
  padding: 20px 20px 0;
  font-size: 16px;
  color: gray;
  font-weight: bold;
}

#charges-box .alert-main p a {
  font-size: 16px;
  color: #0e8fff;
  font-weight: bold;
  text-decoration: underline;
}

#charges-box .alert-main p a:hover {
  color: #0d7fe2;
}

#charges-box .alert-main img {
  width: 160px;
  margin: 26px 0 32px 0;
}

.search-mod {
  margin: 0 auto;
  padding: 0 8px;
  width: 1184px;
}

#searchHead {
  padding: 0 0 40px;
  margin: 40px 0 30px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #f2f2f2;
}

#searchHead strong {
  font-size: 20px;
  color: #fac43c;
  font-weight: bold;
}

.detail-author-box.swiper-container {
  height: 200px;
  background-color: #fff;
}

.detail-author-box .swiper-slide {
  height: 180px !important;
  margin: 10px;
}

.detail-author-box .swiper-slide:first-child {
  margin: 10px 10px 10px 0;
}

.detail-author-box .swiper-slide:last-child {
  margin: 10px 0 10px 10px;
}

.detail-author-box .colorbga,
.detail-author-box .colorbgb {
  width: 60px;
  height: 240px;
  z-index: 10;
  background: transparent;
}

.detail-author-box .colorbga .swiper-button-prev,
.detail-author-box .colorbgb .swiper-button-next {
  top: 110px;
  width: 50px;
  height: 50px;
  color: #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.detail-author-box .colorbga .swiper-button-prev {
  left: auto;
  right: 0;
}

.detail-author-box .colorbgb .swiper-button-next {
  right: auto;
  left: 0;
}

.detail-author-box .colorbga .swiper-button-prev:after,
.detail-author-box .colorbgb .swiper-button-next:after {
  font-size: 27px;
}

.detail-author-box .swiper-slide {
  position: relative;
  background-color: transparent;
}

.detail-author-box .thumb {
  background-image: url(../images/logo_imgbg_h.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: #f2f2f2;
}

.detail-author-box .thumb,
.detail-author-box .thumb a,
.detail-author-box .thumb a img {
  height: 150px;
  display: block;
  border-radius: 10px;
}

.detail-author-box .briefintroduce {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
}

.detail-author-box .briefintroduce p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  margin: 0;
  font-size: 14px;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  transform: translate(-50%, -50%);
  display: none;
}

.detail-author-box .body,
.detail-author-box .body .title,
.detail-author-box .body .title a {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  display: block;
}

.detail-author-box .swiper-slide:hover .title a {
  color: #fac43c;
}

.detail-author-box .swiper-slide:hover .briefintroduce {
  display: block;
}

.detail-author-box .swiper-slide:hover .briefintroduce p {
  display: -webkit-box;
}