.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-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url("../../assets/common_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  .top-part {
    height: 35%;
    min-width: 60%;
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      //width: 40%;
      height: 60%;
      margin-right: 1.5rem;
      object-fit: contain;
    }
    .title {
      font-size: 2.5rem;
      color: #ffb00f;
      background-color: white;
      padding: 0.5rem 1rem;
      border-radius: 1rem;
    }
  }
  .opt-container {
    height: 55%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .opt-wrap {
      width: 30%;
      height: 45%;
      position: relative;
      background-color: #ffffff;
      margin: 1rem;
      border-radius: 0.8rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3rem solid #ffffff;

      .opt-circle {
        width: 2.5rem;
        height: 2.5rem;
        background-color: #ffffff;
        position: absolute;
        border-radius: 50%;
        left: -1rem;
        top: -1rem;
        text-align: center;
        line-height: 2.5rem;
        font-size: 24px;
        font-weight: 500;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .text {
        font-size: 28px;
        font-weight: 500;
      }

      .audio {
        color: white;
        background-color: #00BCD4;
        border-radius: 5px;
        font-size: 5vh;
        font-weight: 500;
        width: 13vh;
        cursor: pointer;
      }
    }
  }
  .left-ufo {
    width: 10%;
    object-fit: contain;
    position: absolute;
    left: 15vh;
    bottom: 20vh;
  }
  .right-ufo {
    width: 10%;
    object-fit: contain;
    position: absolute;
    right: 15vh;
    bottom: 20vh;
  }
}
