.book {
  display: flex;
  flex-grow: 1;
  width: 80%;
  margin: 0 auto;
  height: calc(100vh - 153px - 120px);
}
.booklist {
  width: 280px;
  min-width: 200px;
  background-color: #e9c8cb28;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #bd1a2d;
}

::-webkit-scrollbar-thumb:hover {
  background: #bd1a2d;
}

.booklist .classifywarp {
  max-height: calc(100vh - 150px - 120px - 80px);
  overflow: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.39);
}
.booklist > div:not(.classifywarp) {
  background-color: #bd1a2d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  color: white;
  font-size: 26px;
  font-weight: 800;
}
.booklist .classifywarp .classify .title {
  background-color: #bd1a2d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.76);
}
.booklist .classifywarp .classify .item {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  transition: 0.3s;
}
.booklist .classifywarp .classify .item:hover {
  background-color: #ff89973b;
}
.bookcontent {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  overflow: hidden;
  align-items: center;
  gap: 0.5rem;
}
.bookwarp {
  width: 70%;
  height: 90%;
  border: 10px solid #CCC;
}
.btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page {
  background-color: white;
  overflow: auto;
  cursor: default;
}
.booktoolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.prev,
.next {
  width: 2rem;
  height: 2rem;
  background: #bd1a2d;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  background-color: #ff89973b !important;
}