@import "../../../globaStyle.less";

@keyframes blur {
  0% {
    filter: blur(75px);
  }
  100% {
    filter: blur(0px);
  }
}
.zxCon{
  padding: 30px;
  box-sizing: border-box;
  font-size: 36px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
.bookNull{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 224px;
  image{
    width: 528px;
    height: 336px;
  }
  text{
    margin-top: 32px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 44px;
  }
}
.book_details {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .details_top{
    flex: 1;
    overflow-y: auto;
  }
  .header {
    width: 750px;
    height: 396px;
    // background: @bg_E9;
    background-color: #FFF;
    margin-bottom: 22px;
    position: relative;
    .back{
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0.4;
      filter: blur(30px);
      .backImg{
        
        transform: scale(1.2);
        // animation-name: blur;
        // animation-duration: 2s;
        // animation-iteration-count: 1;
        // animation-delay: 0s;
        width: 100%;
      }
    }
    
    .content{
      padding: 0 30px;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 750px;
      height: 396px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
    }
    .left {
      width: 440px;
      margin-top: 70px;
      display: flex;
      flex-flow: column nowrap;
      .title {
        width: 100%;
        height: 56px;
        font-size: @fs_40;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: @fw_500;
        color: @cl_333;
        line-height: 56px;
        margin-bottom: 20px;
        .hide_font(1,nowrap);
        display: inline-block;
      }
      .author {
        width: 100%;
        height: 40px;
        font-size: @fs_28;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: @fw_400;
        color: @cl_666;
        line-height: 40px;
        margin-bottom: 20px;
      }
      .describe {
        width: 100%;
        height: 40px;
        font-size: @fs_28;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: @fw_400;
        color: @cl_999;
        line-height: 40px;
        margin-bottom: 32px;
      }
      .tags {
        width: 100%;
        display: flex;
        justify-content: left;
        flex-flow: row wrap;
        .tag{
          font-size: @fs_24;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: @fw_400;
          color: @cl_666;
          padding: 8px 22px;
          // height: 50px;
          // line-height: 50px;
          background: @bg_F8;
          border-radius: @r_10;
          margin-bottom: 14px;
          margin-right: 14px;
        }
      }
    }
    .right {
      width: 194px;
      margin-top: 68px;
      .img {
        width: 194px;
        height: 260px;
        background: @bg_D8;
        border-radius: @r_10;
      }
    }
  }
  .center {
    width: 690px;
    height: 660px;
    font-size: @fs_36;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: @fw_400;
    color: @cl_666;
    line-height: 60px;
    margin:20px auto 0;
    .hide_font(11,pre-warp);
  }
  .btn {
    width: 690px;
    // height: 96px;
    margin: 20px auto 58px;
    .adCon{
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 20px;
    }
    .img {
      width: 690px;
      height: 96px;
    }
    .vip_btn{
      width: 690rpx;
      height: 86rpx;
      line-height: 86rpx;
      text-align: center;
      background: linear-gradient(90deg, #FF2442 0%, #FF5E74 100%);
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      font-style: normal;
      text-transform: none;
      margin:30rpx 0 ;
    }
  }
}