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

  &.playing {
    bottom: 44px;
  }
  &.open {
    bottom: 139px;

    &.playing {
      bottom: 157px;
    }
  }
  .pinBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    &.right {
      gap: 46px;
    }
    > div,
    > div > a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      line-height: 14px;
      color: #ffdf9e;
      cursor: pointer;

      &:hover,
      &.active,
      &.opened {
        color: #ffd800;
      }
      img,
      .icon {
        width: 34px;
        height: 34px;
      }
      p {
        margin-top: 5px;
      }
    }
  }
}

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

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

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

.pinBottom-border {
  position: relative;
  top: -22px;
  margin: 0 14px;
  object-fit: contain;
}

.icon-share {
  background: url('/images/wsyd/share.png') no-repeat center / contain;
}

.icon-viewer {
  background: url('/images/wsyd/viewer.png') no-repeat center / contain;
}

#thumb {
  .icon-slot {
    transition: background ease-in 0.2s;
    background: url('/images/wsyd/unlike.png') no-repeat center / contain;
  }

  &.active .icon-slot {
    background-image: url('/images/wsyd/like.png');
  }
}

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

    &.playing {
      bottom: 27px;
    }
    &.open {
      bottom: 95px;

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

      &.left {
        position: absolute;
        left: 10px;
        bottom: 7px;
        margin: 0;
        padding: 20px 0 27px;
        flex-direction: column;
        justify-content: center;
        width: 50px;
        background: url('/images/wsyd/menu-bg2.jpg') no-repeat center top / cover;

        &::before {
          content: '';
          position: absolute;
          top: -50px;
          left: 0px;
          width: 63px;
          height: 76px;
          background: url('/images/wsyd/menu-img.png') no-repeat center / contain;
          z-index: 1;
        }
      }
      &.right {
        padding: 20px 0 27px;
        gap: 30px;
        position: absolute;
        right: 10px;
        bottom: 7px;
        flex-direction: column;
        justify-content: center;
        width: 50px;
        background: url('/images/wsyd/menu-bg2.jpg') no-repeat center top / cover;
      }
      > div,
      > div > a {
        font-size: 10px;

        img,
        .icon {
          width: 17px;
          height: 17px;
        }
        p {
          margin-top: 4px;
          letter-spacing: 1px;
        }
      }
    }
    .pinBottom-border {
      display: none;
    }
  }
}

@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;
  }
}
