* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.w960 {
  width: 960px;
  margin: 0 auto;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
header {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}
header .logo {
  margin: 0;
  font-size: 25px;
  color: #6888e1;
  font-weight: 700;
}
header .logo img {
  width: 100px;
}
header .search form {
  overflow: hidden;
}
header .search form input[type="text"] {
  float: left;
  width: 270px;
  height: 36px;
  text-indent: 10px;
  font-size: 14px;
  flex-grow: 2;
  outline: none;
  border: 2px #5e7ce0 solid;
  border-right: none;
  background: transparent;
}
header .search form input[type="submit"] {
  float: left;
  color: #c8dadf;
  background: #5e7ce0;
  padding: 0 12px;
  font-size: 15px;
  border: none;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
}
header .user a {
  display: inline-block;
  width: 100px;
  height: 36px;
  background: #5e7ce0;
  color: #c8dadf;
  line-height: 36px;
  font-size: 15px;
  text-align: center;
  border-radius: 2px;
}
header .user a:hover {
  background: #284296;
}
header .haslogin {
  line-height: 36px;
  height: 36px;
  font-size: 18px;
  margin: 0;
}
header .haslogin a {
  color: #71757f;
}
header .haslogin a:hover {
  color: #5e7ce0;
  text-decoration: underline;
}
header .haslogin .logout:hover {
  color: #ff6363;
  text-decoration: none;
}
.breadcrumb {
  margin-bottom: 1%;
}
.breadcrumb ul {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.breadcrumb ul li {
  color: #71757f;
  font-size: 16px;
  white-space: nowrap;
}
.breadcrumb ul li a {
  color: #5e8ee8;
  white-space: nowrap;
}
.breadcrumb ul li a:hover {
  color: #344899;
}
.mheader {
  display: none;
  justify-content: space-between;
  padding: 0 1rem;
  line-height: 2;
  border-bottom: 1px solid #babbc0;
  margin-bottom: 10px;
  align-items: center;
}
.mheader .m {
  font-size: 18px;
  font-weight: bold;
  color: #5e7ce0;
}
.mheader .l a,
.mheader .r a {
  font-size: 25px;
  color: #81858e;
}
.rank {
  display: flex;
  margin-bottom: 10px;
}
.rank .l {
  flex: 1;
  border: 3px solid #e9edfa;
  padding-bottom: 10px;
}
.rank .l h2 {
  color: #252b3a;
  font-size: 1rem;
  background: #e9edfa;
  padding: 12px 16px;
}
.rank .l .list {
  display: flex;
  padding: 0 15px;
  margin-bottom: 12px;
  overflow: hidden;
  flex-wrap: wrap;
}
.rank .l .list dl {
  padding-top: 16px;
  margin: 0;
  padding: 1rem 0 0;
  flex: 32.3%;
  max-width: 32.3%;
  border: none;
  margin-right: 1%;
}
.rank .l .list dl a {
  float: left;
  width: 5.3rem;
  height: 6rem;
  color: #787ce0;
}
.rank .l .list dl a:hover {
  color: #3359d8;
}
.rank .l .list dl a img {
  width: 4.8rem;
  height: 6rem;
  border-radius: 2px;
  background-color: #f6f7f9;
}
.rank .l .list dl dt {
  overflow: hidden;
  height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.rank .l .list dl dd {
  overflow: hidden;
  margin: 0.5rem 0;
  height: 2.5rem;
  text-align: justify;
  white-space: break-spaces;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #7b7c8d;
}
.rank .l .list 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 .l .list dl dd:last-child a {
  color: #71757f;
  color: var(--font-color);
  flex: 1;
  text-align: left;
}
.rank .l .list dl dd:last-child .status {
  color: #43c59e;
  border: 1px solid #43c59e;
}
.rank .l .list dl dd:last-child .wordcount {
  color: #fcc798;
  border: 1px solid #fcc798;
  margin: 0 3px;
}
.rank .l .list dl dd:last-child .type {
  color: #728ce3;
  border: 1px solid #728ce3;
}
nav {
  background: #5e7ce0;
  margin-bottom: 15px;
}
nav ul {
  overflow: hidden;
}
nav ul li {
  float: left;
  width: 7.6%;
}
nav ul li a {
  display: block;
  color: #c8dadf;
  font-size: 17px;
  height: 48px;
  line-height: 48px;
  text-align: center;
}
nav ul li a:hover {
  background: #3359d8;
}
.msearch {
  display: none;
  justify-content: center;
  margin-bottom: 10px;
  padding: 0 2%;
}
.msearch form {
  overflow: hidden;
  flex: 1;
}
.msearch form input[type="text"] {
  float: left;
  width: 80%;
  height: 45px;
  text-indent: 10px;
  font-size: 15px;
  outline: none;
  border: 2px #5e7ce0 solid;
  border-right: none;
  background: transparent;
}
.msearch form input[type="submit"] {
  float: left;
  color: #c8dadf;
  background: #5e7ce0;
  padding: 0 12px;
  font-size: 16px;
  border: none;
  height: 45px;
  line-height: 45px;
  cursor: pointer;
  width: 20%;
}
.msearch form input[type="submit"]:hover {
  background-color: #3359d8;
}
.booklist {
  flex: 32%;
  max-width: 32%;
  border: 3px solid #e9edfa;
}
.booklist h2 {
  color: #252b3a;
  font-size: 1rem;
  background: #e9edfa;
  padding: 12px 16px;
}
.booklist ul li {
  display: flex;
  margin: 0 15px;
  overflow: hidden;
  line-height: 2.4rem;
  height: 2.4rem;
  border-top: 1px solid #d7d8da;
}
.booklist ul li:nth-child(1) {
  border-top: none;
}
.booklist ul li em {
  color: #ff6600;
}
.booklist ul li span {
  color: #71757f;
  font-size: 14px;
}
.booklist ul li .title {
  flex: 1;
  font-size: 15px;
  color: #787ce0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 4px;
}
.booklist ul li .title:hover {
  color: #3359d8;
}
.booklist ul li .author {
  float: right;
  color: #71757f;
}
.updatebox {
  display: flex;
  margin-top: 10px;
}
.updatebox .l {
  width: 666px;
  flex: 1;
  border: 3px solid #e9edfa;
}
.updatebox .l h2 {
  color: #252b3a;
  font-size: 1rem;
  background: #e9edfa;
  padding: 12px 16px;
}
.updatebox .l ul li {
  display: flex;
  height: 2.4rem;
  font-size: 0.875rem;
  line-height: 2.4rem;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 1rem;
  border-top: 1px solid #d7d8da;
}
.updatebox .l ul li:nth-child(1) {
  border-top: none;
}
.updatebox .l ul li .sort,
.updatebox .l ul li .updatetime {
  color: #71757f;
}
.updatebox .l ul li .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  flex: 1;
  margin: 0 4px;
}
.updatebox .l ul li .title a {
  color: #5e7ce0;
  font-size: 15px;
  font-weight: 700;
}
.updatebox .l ul li .title a:hover {
  color: #3448a6;
}
.updatebox .l ul li .newchapter {
  flex: 1;
  display: unset;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.updatebox .l ul li .newchapter a {
  color: #5e7ce0;
}
.updatebox .l ul li .newchapter a:hover {
  color: #3359d8;
}
.updatebox .l ul li .author {
  width: 10%;
  text-align: left;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.updatebox .l ul li .author a {
  color: #71757f;
}
.updatebox .l ul li .updatetime {
  width: 80px;
  text-align: right;
}
.updatebox .r {
  width: 32.4%;
  margin-left: 13px;
  border: 3px solid #e9edfa;
}
.updatebox .r h2 {
  color: #252b3a;
  font-size: 1rem;
  background: #e9edfa;
  padding: 12px 16px;
}
.updatebox .r ul li {
  display: flex;
  margin: 0 15px;
  overflow: hidden;
  line-height: 2.4rem;
  height: 2.4rem;
  border-top: 1px solid #d7d8da;
}
.updatebox .r ul li:nth-child(1) {
  border-top: none;
}
.updatebox .r ul li span {
  color: #71757f;
  font-size: 14px;
}
.updatebox .r ul li .title {
  flex: 1;
  font-size: 15px;
  color: #787ce0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 4px;
}
.updatebox .r ul li .title:hover {
  color: #3448a6;
}
.updatebox .r ul li .author {
  float: right;
  color: #71757f;
}
.hotauthorbox,
.recommtopicbox,
.recommbook,
.hotbook,
.link,
.authorall,
.finishbox,
.readrecordbox {
  border: 3px solid #e9edfa;
}
.hotauthorbox h2,
.recommtopicbox h2,
.recommbook h2,
.hotbook h2,
.link h2,
.authorall h2,
.finishbox h2,
.readrecordbox h2 {
  padding: 12px 16px;
  background: #e9edfa;
  font-size: 1rem;
}
.hotauthorbox ul,
.recommtopicbox ul,
.recommbook ul,
.hotbook ul,
.link ul,
.authorall ul,
.finishbox ul,
.readrecordbox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 16px 16px 16px;
  overflow: hidden;
}
.hotauthorbox ul li,
.recommtopicbox ul li,
.recommbook ul li,
.hotbook ul li,
.link ul li,
.authorall ul li,
.finishbox ul li,
.readrecordbox ul li {
  width: 7.7%;
  margin-top: 16px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border: 1px solid #e9edfa;
}
.hotauthorbox ul li a,
.recommtopicbox ul li a,
.recommbook ul li a,
.hotbook ul li a,
.link ul li a,
.authorall ul li a,
.finishbox ul li a,
.readrecordbox ul li a {
  display: block;
  color: #5e7ce0;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hotauthorbox ul li a:hover,
.recommtopicbox ul li a:hover,
.recommbook ul li a:hover,
.hotbook ul li a:hover,
.link ul li a:hover,
.authorall ul li a:hover,
.finishbox ul li a:hover,
.readrecordbox ul li a:hover {
  background: #e9edfa;
}
.readrecordbox .history_clear {
  float: right;
  color: #5e7ce0;
  font-size: 14px;
  cursor: pointer;
}
.readrecordbox .history_clear:hover {
  color: #344899;
}
.readrecordbox .list {
  display: flex;
  padding: 0 15px;
  margin-bottom: 12px;
  overflow: hidden;
  flex-wrap: wrap;
}
.readrecordbox .list dl {
  padding-top: 16px;
  margin: 0;
  padding: 1rem 0 0;
  flex: 32.3%;
  max-width: 32.3%;
  border: none;
  margin-right: 1%;
}
.readrecordbox .list dl a {
  float: left;
  width: 5.3rem;
  color: #787ce0;
}
.readrecordbox .list dl a:hover {
  color: #3359d8;
}
.readrecordbox .list dl a img {
  width: 4.8rem;
  height: 6rem;
  border-radius: 2px;
  background-color: #f6f7f9;
}
.readrecordbox .list dl dt {
  overflow: hidden;
  height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.readrecordbox .list dl dd {
  overflow: hidden;
  margin: 5px 0;
  text-align: justify;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #7b7c8d;
  text-overflow: ellipsis;
}
.readrecordbox .list dl dd:last-child span {
  color: #141414;
  font-size: 12px;
  float: right;
  cursor: pointer;
  color: #5e7ce0;
  border: 1px solid #5e7ce0;
  padding: 0 3px;
  border-radius: 3px;
}
.readrecordbox .list dl dd:last-child span:hover {
  color: #344899;
  border: 1px solid #344899;
}
.readrecordbox .emptycontent {
  color: #71757f;
  font-size: 17px;
  line-height: 5;
  text-align: center;
}
.page {
  text-align: center;
  font-weight: 700;
  border-top: 1px dotted #d7d8da;
}
.page a {
  display: inline-block;
  margin: 0 10px;
  font-size: 16px;
  color: #5e7ce2;
  padding: 0.5rem;
}
.page a:hover {
  color: #3448a5;
}
.bookvote {
  margin-top: 12px;
  padding: 0.5rem 0 0;
  border: 0;
  border-top: 3px solid var(--border-color-card);
  text-align: justify;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-top: 3px solid #e9edfa;
}
.bookvote legend {
  padding: 0 0.5rem;
}
.bookvote p {
  color: #71757f;
}
.bookvote p a {
  color: #5e7ce0;
}
.bookvote p a:hover {
  color: #3359d8;
}
.tip {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: #141414;
  border-radius: 50px;
  color: #ffffff;
  font-size: 14px;
  z-index: 100;
}
footer {
  margin-top: 1rem;
  border-top: 1px solid #d7d8da;
  text-align: center;
}
footer div {
  padding: 1rem;
}
footer p {
  color: #71757f;
  font-size: 0.75rem;
}
.hotbook ul li,
.authorall ul li,
.link ul li,
.hotauthorbox ul li {
  width: 12.7%;
}
.finishbox ul li {
  width: 32.3%;
}
@media screen and (max-width: 768px) {
  .w960 {
    width: 100%;
  }
  .page {
    width: 100%;
  }
  .page a {
    margin: 0;
  }
  .readrecordbox .list dl {
    flex: 100%;
    max-width: 100%;
  }
  .breadcrumb {
    margin: 0 0 2% 0;
    padding-left: 2%;
  }
  nav {
    display: block;
  }
  nav ul li {
    width: 16.6%;
  }
  .search,
  .user {
    display: none;
  }
  header {
    display: none;
  }
  .mheader {
    display: flex;
  }
  .msearch {
    display: flex;
  }
  .rank .l .list dl {
    flex: 100%;
    max-width: 100%;
  }
  .updatebox {
    flex-wrap: wrap;
  }
  .updatebox .l {
    max-width: 100%;
  }
  .updatebox .l ul li .newchapter,
  .updatebox .l ul li .updatetime {
    display: none;
  }
  .updatebox .l ul li .author {
    text-align: right;
  }
  .updatebox .r {
    width: 100%;
    flex: 100%;
    margin-left: 0;
  }
  .bookvote {
    padding: 5px 20px 0 20px;
  }
  .hotbook ul li,
  .authorall ul li,
  .link ul li,
  .finishbox ul li,
  .hotauthorbox ul li {
    width: 30%;
  }
}
