.pinBottom-container {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 15px;
  width: 1087px;
  height: 102px;
  transition: all 0.5s;
  transform: translate(-50%);
  background: url('/images/sea/menu-bg.png') no-repeat center / 100% 100%;
  z-index: var(--z-index-top);

  &.playing {
    bottom: 35px;
  }
  &.open {
    bottom: 130px;

    &.playing {
      bottom: 148px;
    }
  }
  .pinBottom {
    display: flex;
    align-items: center;
    gap: 34px;

    &.left {
      position: relative;
      margin-right: 28px;
      padding-right: 36px;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 2px;
        height: 49px;
        background: url('/images/sea/border.png') no-repeat center / contain;
        transform: translateY(-50%);
      }
    }
    > div,
    > div > a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      cursor: pointer;

      &:hover,
      &.active,
      &.opened {
        color: #ecd2a8;
      }
      img,
      .icon {
        width: 39px;
        height: 36px;
      }
      p {
        margin-top: 12px;
      }
    }
  }
}

#pullTab {
  .icon {
    background: url('/images/sea/auto.png') no-repeat center / contain;
  }
  &.opened .icon {
    background-image: url('/images/sea/auto-suspend.png');
  }
}

#volume {
  .icon {
    background: url('/images/sea/Volume btn_on.png') no-repeat center / contain;
  }
  &.active .icon {
    background-image: url('/images/sea/Volume btn_off.png');
  }
}

.terms2,
#vr {
  display: none !important;
}

.icon-fullscreen {
  background: url('/images/sea/enlarge_on.png') no-repeat center / contain;
}
.icon-fullscreen-exit {
  background: url('/images/sea/narrow_off.png') no-repeat center / contain;
}

@media only screen and (max-width: 600px) {
  .pinBottom-container {
    bottom: 0;
    width: 100%;
    height: unset;
    background: none;

    &.playing {
      bottom: 20px;
    }
    &.open {
      bottom: 88px;

      &.playing {
        bottom: 108px;
      }
    }
    .pinBottom {
      gap: 15px;

      &.left {
        position: absolute;
        left: 4px;
        bottom: 0;
        margin: 0;
        padding: 28px 0 18px;
        flex-direction: column;
        justify-content: center;
        width: 51px;
        background: url('/images/sea/mobile/bg.png') no-repeat center top / cover;
      }
      &.right {
        padding: 60px 0 37px;
        gap: 30px;
        position: absolute;
        right: 4px;
        bottom: 0;
        flex-direction: column;
        justify-content: center;
        width: 51px;
        background: url('/images/sea/mobile/bg.png') no-repeat center top / cover;
      }
      > div,
      > div > a {
        font-size: 10px;

        img,
        .icon {
          width: 19.5px;
          height: 18px;
        }
        p {
          margin-top: 3px;
        }
      }
    }
  }
}

@media only screen and (max-width: 487px), (max-height: 487px) {
  .pinBottom-container.drawerOpen.duringTour {
    bottom: 6px;
  }
  #gui .pinBottom.open.noScroll {
    bottom: 93px;
  }
  .pinBottom.open.noScroll.playing {
    bottom: 108px;
  }
}
