@import '../../style/variable';

.#{$namespace} {
  &-img-player {
    position: relative;

    width: 100%;
    height: 100%;

    &__img {
      position: relative;

      width: 100%;
      height: 100%;

      display: none;

      &--active {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      &-img {
        width: auto;
        height: 100%;
      }

      &-text {
        padding-left: 50px;
        padding-right: 50px;

        position: absolute;
        left: 0;
        right: 0;
        bottom: 60px;

        text-align: center;

        font-weight: 500;
        font-size: 40px;
        color: #FFFFFF;
      }
    }

    &__vdo {
      width: 100%;
      height: 100%;

      display: none;

      &--active {
        display: block;
      }
    }

    &__dp {
      position: absolute;

      width: 84px;
      height: auto;

      &--tr {
        top: 20px;
        right: 54px;
      }

      &--br {
        bottom: 20px;
        right: 54px;
      }

      &--c {
        left: 50%;
        top: 50%;

        transform: translate3d(-50%,- 50%, 0);
      }

      &--tl {
        top: 20px;
        left: 54px;
      }

      &--bl {
        bottom: 20px;
        left: 54px;
      }
    }
  }
}