.read {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
.read .readimg img {
  width: 210px;
  height: 260px;
  box-shadow: 0 0 5px #444;
  border-radius: 6px;
}
.read .readinfo {
  padding: 0 5% 0 1%;
  width: 100%;
}
.read .readinfo p {
  padding: 0.3%;
  line-height: 30px;
}
.read .readinfo p span {
  margin-right: 5%;
}
.read .readinfo .subtitle {
  color: #c1c1c1;
}
.read .readinfo .label {
  display: flex;
  line-height: 30px;
  padding: 0.3%;
}
.read .readinfo .label li {
  margin-right: 1%;
}
.read .readinfo .label li a {
  color: #c1c1c1;
}
.read .readinfo .reads {
  position: absolute;
  bottom: 0;
}
.read .readinfo .reads .btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 100px;
  border-radius: 8px;
  background: linear-gradient(90deg, #953f67 0%, #95414c 100%);
  box-shadow: 0 0 16px 0 rgba(255, 88, 96, 0.3);
  position: relative;
  padding-left: 10px;
}
.read .readinfo .reads .btn:hover {
  background: linear-gradient(90deg, #95414c 0%, #953f67 100%);
}
.intro {
  padding: 1%;
  color: #c1c1c1;
}
.chapters {
  margin-top: 1%;
}
.chapters ul {
  display: flex;
  flex-wrap: wrap;
}
.chapters ul li {
  width: calc(25% - 20px);
  height: 36px;
  line-height: 36px;
  margin: 10px 10px 0 10px;
  box-shadow: 0 0 5px 0 rgba(255, 88, 96, 0.5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* WebKit 前缀，用于旧版浏览器 */
  line-clamp: 1;
  /* 标准属性，用于现代浏览器 */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease;
  /* 添加过渡效果 */
}
.chapters ul li:hover {
  background-color: #95414c;
}
.chapters ul li a {
  display: block;
  width: 100%;
  color: #c1c1c1;
  padding-left: 3%;
}
.readcontent {
  box-shadow: 0 0 16px 0 rgba(255, 88, 96, 0.3);
  padding: 3%;
  color: #9d9d9d;
}
.readcontent h1 {
  text-align: center;
  font-size: 22px;
}
.readcontent .contents {
  font-size: 18px;
  word-wrap: break-word;
}
.readcontent .contents img {
  width: 100%;
}
.readcontent .readpage {
  display: flex;
  justify-content: center;
  padding: 1%;
}
.readcontent .readpage p {
  padding: 1%;
}
.readcontent .readpage p a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: 100px;
  border-radius: 8px;
  background: linear-gradient(90deg, #953f67 0%, #95414c 100%);
  box-shadow: 0 0 16px 0 rgba(255, 88, 96, 0.3);
  position: relative;
}
.readcontent .readpage p a:hover {
  background: linear-gradient(90deg, #95414c 0%, #953f67 100%);
}
/* 移动端自适应样式 */
@media only screen and (max-width: 768px) {
  .read img {
    width: 129px!important;
    height: 168px!important;
  }
  .readinfo {
    padding: 0 0 0 2%!important;
    flex-direction: row!important;
  }
  .readinfo p {
    padding: 0.5% 0 !important;
    margin: 0 2%;
    line-height: 24px!important;
  }
  .readinfo h1 {
    font-size: 20px;
  }
  .readinfo ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .readinfo .label {
    margin: 0 2%!important;
    line-height: 24px!important;
  }
  .readinfo .reads .btn {
    height: 30px!important;
    width: 78px!important;
    border-radius: 3px!important;
    padding: 0!important;
  }
  .chapters ul li {
    margin: 5px 5px 0 5px !important;
    width: calc((100% / 2) - 10px) !important;
  }
}