$my_width: percentage(4/12);

.body-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('../../assets/player-bg.png') !important;
  background-size: 100%;
}

.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}
  

.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 1rem;
  background: url("./assets/listen_choose_bg.jpg");
  background-position: center;
  background-size: 105% 114%;
  background-repeat: no-repeat;

  .img-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    .img-wrap {
      margin: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      position: relative;
      padding-bottom: 17%;
      height: 0;
      overflow: hidden;
      border: 0.8rem solid #fff;
      border-radius: 1rem;
      transform: scale(1);

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
      }
    }
  }

  .p-tool {
    width: 80%;
    max-height: 15rem;
    line-height: 5rem;
    margin-top: 1rem;

    &-left {
      width: 11rem;
      padding-left: 2rem;
      background-color: white;
      border-top-left-radius: 2.5rem;
      border-bottom-left-radius: 2.5rem;
      align-items: center;

      .p-tool-btn {
        width: 4rem;
        font-size: 2.5rem;
        color: #6cc1bb;
      }
      .p-tool-btn:active {
        transform: scale(1.2);
      }
    }
    &-right {
      padding: 1rem;
      background-color: white;
      border-top-right-radius: 2.5rem;
      border-bottom-right-radius: 2.5rem;
      color: #6cc1bb;
      font-size: 2.5rem;
      margin-left: 0.2rem;
      .i-text {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        line-height: 1.4;
        overflow-y: auto;
      }
    }
  }

  .input-group {
    width: 80%;
    margin: 2rem 0;

    .ant-btn{
      width: 6rem;
      height: 6rem;
      font-size: 2.5em;
    }
    .ant-input {
      height: 6rem;
      line-height: 3rem;
      font-size: 2.5em;
      outline: none;
      text-align: center;
    }
  }
}
