:root {
  --vh: 1vh;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  background-color: #000000;
  /*禁止文本缩放*/
  -webkit-text-size-adjust: 100%;
  transition: height 100ms;
}
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
  /*解决字体在移动端比例缩小后出现锯齿的问题*/
  -webkit-font-smoothing: antialiased;
  font-size: 0;
}
#app {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(var(--vh) * 100);
  max-height: 100vh;
  display: none;
  /* overflow: hidden; */
}
img {
  /*禁止ios长按图像保存*/
  -webkit-touch-callout: none;
}
#drama_download_banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 1.46rem;
}
.top_banner_btn {
  width: 100%;
  height: 1.2rem;
  align-items: center;
  padding: 0 0.32rem;
  background-color: #f0f0f0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.adLeft {
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: row;
  column-gap: 0.16rem;
}
.topBannerLogo {
  width: 0.88rem;
  height: 0.88rem;
}
.topBannerIntro h2 {
  font-weight: bold;
  font-size: 0.32rem;
  color: rgba(0, 0, 0, 0.9);
  line-height: 0.44rem;
}
.topBannerIntroText {
  height: 0.34rem;
  font-size: 0.26rem;
  font-weight: 400;
  line-height: 0.32rem;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.openBtn {
  display: inline-block;
  width: 1.6rem;
  height: 0.64rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.32rem;
  font-size: 0.32rem;
  font-weight: 500;
  color: #0a0b13;
  white-space: nowrap;
}
.bagImg {
  position: absolute;
  top: 1.15rem;
  right: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  /*height: 100%;*/
  object-fit: cover;
  filter: blur(4px);
  border: 0;
}
.bagAlpha {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: calc(100% + 1.2rem);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 51%, #000000 100%);
}
.logoIcon {
  display: none;
  position: absolute;
  top: 1.52rem;
  left: 50%;
  width: 1.81rem;
  height: 0.4rem;
  justify-content: center;
  z-index: 99;
  transform: translateX(-50%);
}
.contentBox {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  transition: height 100ms;
  padding: 1.2rem 0 2.42rem;
  width: 100vw;
  overflow-x: hidden;
}
.bookCoverWrap {
  /* flex: 1;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center; */
  padding: 1.28rem 0 0.88rem;
}
#drama_download_cover {
  min-height: 5.76rem;
  min-width: 3rem;
  /* padding: 0.32rem; */
  position: relative;
}
.bookCover {
  border: 0.05rem solid transparent;
  height: 5.12rem;
  border-radius: 0.19rem;
}
.bookViews {
  position: absolute;
  right: 0.53rem;
  bottom: 0.51rem;
  z-index: 2;
  font-size: 0.24rem;
  color: #ffffff;
  white-space: nowrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: row;
  visibility: hidden;
}
.bookViews::before {
  content: '';
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADnRSTlMA5tJNmhMGiIJewjksHU4PQUIAAACBSURBVCjPY6AZSG6fhiHGs1BQyABdMEhQUFAkAE2wUBAIlNEEFwqCgCuqIFgMYSxCEMNYQShQxhREGIsQRBiLEEQYixDENFYQCUzAJiiNTVAEm6AQPkHC2qWJdZIybm8SDhBXQoEMN5BgxClCDSScGC5hSzY8iggDESC5w4yBxgAA6rkdwvedDaoAAAAASUVORK5CYII=)
    0 0/100% 100% no-repeat;
  margin-right: 0.05rem;
}
.bookInfo {
  padding: 0 0.32rem;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bookName {
  /* height: 0.56rem; */
  font-size: 0.4rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.56rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0.1rem;
  text-align: center;
}
.bookTag {
  padding: 0 0 0.12rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.bookTagItem {
  font-size: 0.26rem;
  display: inline-block;
  max-width: 6.84rem;
  text-align: center;
  padding: 0 0.24rem;
  height: 0.56rem;
  line-height: 0.56rem;
  border-radius: 0.28rem;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0.06rem 0.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookInfo .bookDec {
  padding-top: 0.14rem;
  font-size: 0.32rem;
  font-weight: 400;
  line-height: 0.45rem;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
#drama_download_btn {
  position: fixed;
  left: 0;
  bottom: 0.9rem;
  padding: 0.32rem;
  z-index: 99;
  width: 100%;
  height: 1.52rem;
}
.downloadBtn {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 0.04rem 0.12rem 0.04rem #0505051f;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.44rem;
  color: #0a0b13;
  /*background: linear-gradient(300deg, #FF871F, #FF0045, #F40065);*/
  background: green;
  font-size: 0.36rem;
  font-weight: 500;
  white-space: nowrap;
}
.downloadBtn::before {
  content: '';
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADSCAMAAAAIR25wAAAAY1BMVEUAAAD/+OP/+93///7/++H///7///7/////++L//////////////////N///d7///////7///////////7//eH/+97///3//eD//OP/+eL//fD//vP//ej//OT//Oj//uv//esQOj7ZAAAAIXRSTlMADBOeKpaohxuPXoBnNCFwsHp1tjpMvURWQISObF5kdHticqQrAAASW0lEQVR42uzYi07bQBCFYcxFLaqKhETVhub2/k/ZnfXZ/DuedRoROxjJJ+GSFqg/zuyQcrdmzZo1a9asWbOcdLqXF958wXDdSCB+PRiYDoYe1cQvoXJXTht041D6sAXD9L0HMNYSYntZ9hh2OLhmOjnT0gKnkKusW0oPW5HFfdrSmqIXvvdcv+7VDVn5tGXtQXo5qboOQzMUyE5ZyJ7wB6YrHij33LkphUxDC1mA7hyoATzZ4tL/kStMugUsCl2GQHAo50z0Ia5TWvq8Q8UxkIduLors+mT2xG1BNFS3BKjF+V4lshRUdH/LdLz1nkAZy2AIWYSfg1IzBURampd0c6ke1izyGSiDUJFYbDbHsbtPNiLzKG11f58xcACx4Tyopjy+PCqeFlVs9bk1UcXWpiD6KZQzKSzFN8Xw3QLGP8JWABQ5F7NYFfq6PKuYVdUN1hweQHAuZzlUVum4zgxyozA4QyOenyPxKlBM321UtERHARQ5l7BiU2705hKpIL1qgVqct5yNbumeElwRxepjw04P4pUyAnKYjeV3lY3lzRJUzfFjw5LJS4qiCDKMKL9CRIM1bIrdd1eN30wqfqEQQRRkHjB/BgG2oasWiiVBT3M88VbczA0LMo8su91+v99WSQ93uwLry/ovar4fT2w6RIDw5HpMkyyHw/H47nI8HA4m2/UsugIVTPzomLwjebwIEP0kTtIY5q/l6ZT8sIdtrS5jUVU06bkEoKk7Us6A+n62W+PUlIecmmas7TapVFUTRU8yddNhEDUrEsg8adrEMYcomfNgN6Vi7a0qoZg+9nn4beZEoniMAOkIWUE2b8kDxxghFSupEipXBYqi7jFNVxNfio4QuYYMdLR+uGYyxrKujoeIiiZqmgilkgTyIoHsAMkD57mRouo/VlXt8vj12699oDgB14LYDIjc0G36hvLE0U/g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)
    0 / 100% no-repeat;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  animation: beforeScale 1s infinite linear;
  position: absolute;
  top: 0.15rem;
  right: 1.2rem;
  z-index: 1;
  /*开启硬件加速   解决页面闪白   保证动画流畅*/
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.downloadBtn::after {
  content: '';
  background: url('../image/point.png') 0/100% no-repeat;
  width: 0.8rem;
  height: 0.8rem;
  animation: afterScale 1s infinite linear;
  position: absolute;
  top: 0.55rem;
  right: 0.5rem;
  z-index: 2;
  /*开启硬件加速   解决页面闪白   保证动画流畅*/
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@-webkit-keyframes afterScale {
  0%,
  100% {
    top: 0.55rem;
    right: 0.5rem;
  }
  50% {
    top: 0.4rem;
    right: 0.7rem;
  }
}
@keyframes afterScale {
  0%,
  100% {
    top: 0.55rem;
    right: 0.5rem;
  }
  50% {
    top: 0.4rem;
    right: 0.7rem;
  }
}
@-webkit-keyframes beforeScale {
  0%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
  25% {
    transform: scale(1.5);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.8;
  }
  75% {
    transform: scale(2);
    opacity: 0.1;
  }
}
@keyframes beforeScale {
  0%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
  25% {
    transform: scale(1.5);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.8;
  }
  75% {
    transform: scale(2);
    opacity: 0.1;
  }
}
/*横屏 css*/
@media screen and (orientation: landscape) and (min-width: 500px) {
  #app {
    transform: translateZ(1px);
    overflow: hidden;
  }
  #drama_download_banner {
    display: none !important;
  }
  .logoIcon {
    display: inline-block !important;
    top: 0.24rem;
  }
  .contentBox {
    padding: 0.88rem 0 !important;
    flex-direction: row;
    justify-content: center;
  }

  .poster {
    width: 200px !important;
    overflow: visible !important;
    border-radius: 5px;
  }

  .poster_img {
    border-radius: 20px;
  }
  .bagImg {
    top: 0;
  }
  .bookCoverWrap {
    flex: 0;
  }
  #drama_download_cover {
    padding: 0;
    min-width: 2.5rem;
    min-height: 4.4rem;
  }
  .bookCover {
    width: 392px !important;
    height: 520px !important;
    /* height: 4.4rem !important; */
  }
  .bookViews {
    right: 0.21rem;
    bottom: 0.19rem;
  }
  .bookInfo {
    margin-left: 0.8rem;
    padding-bottom: 0;
    width: 6.8rem;
  }
  #drama_download_btn {
    margin-top: 0.32rem;
    position: relative;
    left: 0;
    bottom: 0;
    padding: 0;
    z-index: 99;
    height: 0.88rem;
  }
  #drama_download_chapter_cover {
    height: 85% !important;
    margin-bottom: 0 !important;
    width: 5rem !important;
    min-height: auto !important;
  }
  .lineBox .line {
    width: 1.5rem !important;
  }
}
.pauseIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 1.12rem;
  height: 1.12rem;
  transform: translate(-50%, -50%);
}
#drama_download_chapter_cover {
  display: none;
  height: 7.75rem;
  width: 100%;
  margin-bottom: 0.24rem;
  position: relative;
  z-index: 9;
  text-align: center;
  overflow: hidden;
  min-height: 7.75rem;
}
#drama_chapter_cover_bg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  filter: blur(50px);
  transform: translateY(-50%);
}
#drama_chapter_cover {
  height: 100%;
  position: relative;
  z-index: 1;
}
.controlBox {
  width: 100%;
  height: 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0.39rem 0.2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.lineBox {
  flex: 1;
  margin: 0 0.24rem;
  font-weight: 600;
  font-size: 0.24rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.lineBox .line {
  width: 4.07rem;
  height: 0.08rem;
  background-color: #ffffff;
  border-radius: 0.04rem;
  position: relative;
}
.lineBox .line::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -0.07rem;
  left: 0.04rem;
  z-index: 1;
  width: 0.22rem;
  height: 0.22rem;
  background-color: #ffffff;
  border-radius: 50%;
}
.collectBox {
  padding: 0.12rem 0 0.08rem;
  /*display: flex;*/
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  display: none;
}
.collectItemLeft {
  display: flex;
  align-items: center;
}
.collectItem {
  display: flex;
  align-items: center;
}
.collectItem:first-child {
  margin-right: 0.56rem;
}
#drama_views,
#drama_collect {
  font-weight: 500;
  font-size: 0.26rem;
  color: #ffffff;
  font-style: normal;
  margin-left: 0.12rem;
  white-space: nowrap;
}
.collectItemBtn {
  display: flex;
  align-items: center;
  padding: 0.12rem 0.2rem;
  background-color: #ffe6eb;
  border-radius: 0.28rem;
}
.collectItemBtn span {
  margin-left: 0.13rem;
  font-weight: 400;
  font-size: 0.24rem;
  color: yellow;
  text-align: center;
  font-style: normal;
  white-space: nowrap;
}

#shareA {
  height: 100%;
  width: 100%;
  font-size: 20px;
  display: none;
}

.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.poster {
  width: 3.6rem;
  height: 4.83rem;
  overflow: hidden;
  border-radius: 0.32rem;
}

.poster_img {
  width: 100%;
}

.poster_name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.28rem;
  font-weight: 600;
  margin: 0.16rem 0 0.64rem;
  width: 5.78rem;
  text-align: center;
}

.top {
  width: 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.top_item_box {
  width: 2.1rem;
}

.top_item_name {
  margin-top: 0.12rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  text-overflow: ellipsis;
  font-size: 0.24rem;
  font-weight: 600;
}

.top_item {
  position: relative;
  height: 2.8rem;
  border-radius: 0.1rem;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-radius: 0.1rem;
  overflow: hidden;
}
.vid {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.2rem;
  font-weight: 500;
  margin: 0 0.04rem 0.08rem;
}
.vid_img {
  width: 0.24rem;
  height: 0.24rem;
  margin: 0 0.04rem;
}
.submit_btn {
  border-radius: 1.26rem 1.26rem 1.26rem 1.26rem;
  font-size: 0.32rem;
  font-weight: 600;
  color: #000;
  line-height: 0.96rem;
  text-align: center;
  background-color: #3dff48;
  width: 6.54rem;
  height: 0.96rem;
  position: fixed;
  bottom: 0.5rem;
  animation: breathAnimation 0.9s infinite alternate;
  background: linear-gradient(90deg, #3dff48 0%, #f3ff0b 100%);
}
.finger {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  animation: breathAnimation 0.9s infinite alternate;
}

@keyframes breathAnimation {
  0% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.title_box {
  margin: 0.28rem 0 0.8rem;
  width: 100%;
  padding: 0 0.32rem;
  box-sizing: border-box;
}

.logo_text {
  width: 2rem;
}

.line-ellispsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookCover {
  width: 5.2rem;
  height: 6.88rem;
  border-radius: 0.2rem;
}
.bookTag {
  display: none !important;
}