.content_wrapper {
  top: 122px !important;
}

.book-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: inherit;
  background-size: contain;
}
.book-icon-book {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M648.84736 775.49568c-40.73472 0-107.74528 11.63264-116.46976 37.84704h-37.84704c-11.65312-26.19392-75.71456-37.84704-116.49024-37.84704H162.6112v-564.8384h232.91904c49.50016 0 93.16352 26.19392 116.46976 64.04096 23.30624-37.84704 66.99008-64.04096 116.46976-64.04096H861.3888v564.85888H648.84736z m-154.3168-448.38912c0-46.57152-49.50016-78.60224-96.07168-78.60224H203.38688v486.23616h174.67392c37.86752 0 99.00032 0 116.49024 29.12256V327.10656z m329.0112-78.60224h-195.072c-49.47968 0-96.07168 32.01024-96.07168 78.60224v433.82784c17.48992-29.12256 78.60224-29.12256 116.46976-29.12256h174.6944V248.50432z m0 0" fill="rgb(0,0,0)"></path></svg>');
}
.book-icon-view {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M829.994667 512c-37.546667 133.717333-169.130667 234.666667-317.994667 234.666667-148.906667 0-280.490667-100.992-317.994667-234.666667 37.546667-133.717333 169.130667-234.666667 317.994667-234.666667 148.906667 0 280.490667 100.949333 317.994667 234.666667zM896 512c-38.826667-171.008-201.258667-298.666667-384-298.666667s-345.173333 127.658667-384 298.666667c38.826667 171.008 201.258667 298.666667 384 298.666667s345.173333-127.658667 384-298.666667z" fill="rgb(255,255,255)"></path><path d="M512 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m0 64a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="rgb(255,255,255)"></path></svg>');
}
.book-icon-download {
  background-image: url("/book/style/icon-download.png");
  background-repeat: no-repeat;
}

.book-cate {
  position: relative;
  padding: 30px 0;
}
.book-cate + .book-cate {
  border-top: 1px #eee solid;
}
.book-cate-title {
  margin-bottom: 20px;
}
.book-cate-title svg {
  display: inline-block;
  vertical-align: middle;
}
.book-cate-title i {
  font-size: 30px;
}
.book-cate-title b {
  font-size: 18px;
}
.book-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 5%;
  background: url(/book/style/item-bg-pc.png) repeat-y center top;
}
.book-item {
  min-width: 24%;
  max-width: 24%;
  height: 0;
  margin: 0 0.5%;
  padding-bottom: 39.5145%;
  position: relative;
  transition: transform 300ms;
  /* background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0,0.2)); */
}
.book-item .book-item-inner {
  height: 70%;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10%;
}
.book-item .book-img {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  position: relative;
  box-shadow: 4px 4px 10px rgb(0 0 0 / 30%);
  transition: transform 300ms, box-shadow 300ms;
  overflow: hidden;
  border-radius: 5px;
  min-width: 120px;
  background: #f1f1f1;
}
.book-item .book-img img {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  max-width: none;
}
.book-item .book-img::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  transition: width 300ms, height 300ms;
  background: linear-gradient(
    160deg,
    #fff 10%,
    #555 50%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 70%
  );
  box-shadow: -3px -3px 4px 0px rgb(0 0 0 / 20%);
  transform: rotate(310deg) translate(22px, 3px);
}
.book-item .book-img::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 0;
  top: 0;
  z-index: 5;
  transition: width 300ms, height 300ms;
  background: linear-gradient(
    21deg,
    #fff 10%,
    #555 50%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 70%
  );
  box-shadow: -3px -3px 4px 0px rgb(0 0 0 / 20%);
  transform: rotate(50deg) translate(22px, -3px);
}
.book-item .book-view {
  color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 50px;
  opacity: 0;
  transition: opacity 500ms;
}
.book-item .book-view i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: -30px;
}
.book-item .book-view b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 12px;
  text-align: center;
  font-weight: normal;
  color: #fff;
}
/* .book-item .book-title  {text-align: center;position: absolute;width: 100%;} */
.book-item .book-title {
  text-align: left;
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 10;
  background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.8));
  color: #fff;
  border-radius: 0px 0 5px 5px;
  padding: 4px 35px 4px 10px;
  box-sizing: border-box;
}
.book-item .book-title h3 {
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.book-item .book-download {
  font-size: 16px;
  opacity: 0.8;
  position: absolute;
  right: 10px;
  bottom: 4px;
  z-index: 20;
  line-height: 1;
}
.book-item .book-download:hover {
  opacity: 1;
}
.book-item .book-pages {
  color: rgb(255 255 255 / 100%);
  font-size: 12px;
  margin-top: 5px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 10;
  display: none;
}

.book-item:hover {
  transform: translate(0px, -3px);
}
.book-img:hover {
  box-shadow: 5px 5px 10px rgb(0 0 0 / 40%);
}
.book-img:hover .book-view {
  opacity: 0.8;
}
/* .book-img:hover::before { width:50px;height:21px;} */
.book-img:hover::after {
  width: 50px;
  height: 21px;
}
/*许以更好的未来*/
.book-cate.cid-4 .book-list{
	background-position: center -70px;
}
.book-cate.cid-4 .bid-1 {
	min-width: 30%;
}
.book-cate.cid-4 .bid-1 .book-item-inner{
	height: 40%;
  margin-top: 20%;
}

@media screen and (max-width: 700px) {
  .book-cate {
    position: relative;
    padding: 30px 5px;
  }
  .book-cate-title {
    margin-bottom: 0;
    padding: 10px 0;
    text-align: center;
    position: sticky;
    top: 50px;
    z-index: 100;
    background: #fff;
  }
  .book-list {
    background: url(/book/style/item-bg-mob.png) repeat-y center top / 100% auto;
  }
  .book-item {
    min-width: 49%;
    max-width: 49%;
    padding-bottom: 81.6145%;
  }
  .book-item .book-item-inner{
    /* height: 70%;
    margin-top: 10%; */
  }
  .book-item .book-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 30%;
    left: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    box-shadow: none;
    transform: none;
  }
  .book-item .book-img::after {
    display: none;
  }
  .book-item h3 {
    color: #000;
    font-size: 14px;
  }
  .book-item p {
    color: #888;
    font-size: 12px;
  }

  .book-item:hover {
    transform: none;
  }
  .book-img:hover {
    box-shadow: 5px 5px 10px rgb(0 0 0 / 40%);
  }
  .book-img:hover .book-view {
    opacity: 0;
  }
  .book-img:hover::after {
    width: 0px;
    height: 0px;
  }
  /*许以更好的未来*/
  .book-cate.cid-4 .book-list{
	  background-position: center 100%;
  }
  .book-cate.cid-4 .bid-1 {
	  min-width: 99%;
  }
  .book-cate.cid-4 .bid-1 .book-item-inner {
    height: 60%;
    margin-top: 13%;
  }
}