@import '../style/common_mixin';


.player-preview-content {
  width: 100%;
  height: 100%;
  background-color: white;
  .lesson-header{
    width: 100%;
    position: absolute;
    top: 0;
    img{
      width: 100%;
      height: auto;
    }
    .title{
      font-family: 'BerlinSansFBDemi-Bold';
      color: #f5d11f;
      font-size: 4vw;
      font-weight: 900;
      width: 15%;
      height: 70%;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      line-height: 4vw;
    }
  }
  .left-box{text-align: right;padding-right: 1rem}
  .right-box{text-align: left;padding-left: 1rem}
  .left-box, .right-box{
    height: 100%;
    position: relative;
    .a, .b{
      width: 30%;
      height: 100%;
      display: inline-block;
      position: relative;
      margin: 0 .5rem
    }
    .a{
      width: 40%;
    }
  }
  .letter-box {
    //height: 100%;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    //margin-top: 5%;
    //margin-left: 8%;
    //margin-right: 8%;
    img{
      max-width: 100%;
      max-height: 100%;
      //position: absolute;
      //left: 0;
      height: 100%;
    }
    .letters{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      .letter{
        position: absolute;
        font-weight: 600;
        //width: calc(100% / 13);
        text-align: center;
        --cw: calc(100% / 13);
        width: var(--cw);
        line-height: calc( var(--cw) * 13);
        font-family: LiQiangXingShu;
        padding: 0 1rem;
        height: 20%;
        font-size: 7vmin;
      }
    }

  }
  .l-box{
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    font-weight: 900;
    img{
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: auto;
    }
  }


  .show-item-content {
    position: absolute;
    width: 100%;
    height: 100%;
    //background-color:rgba(255,255,255,1);

    display: flex;
    align-items: center;
    justify-content:center;
  }


}


