.cover {
  position: relative;

  display: inline-block;

  height: 100%;
}

#viewpoint .cover{
  width: auto;
}
.cover .article-icon {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;

  width: 40px !important;
  height: 20px !important;

  transition: 0ms !important;
  pointer-events: none;
}

.cover .play-icon {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;

  width: 30px !important;
  height: 30px !important;

  transition: 0ms !important;
  pointer-events: none;
}

.x-center {
  left: 50% !important;

  transform: translateX(-50%) !important;
}

.y-center {
  bottom: 50% !important;

  transform: translateY(-50%) !important;
}

.x-y-center {
  top: 50% !important;
  left: 50% !important;

  transform: translate(-50%, -50%) !important;
}


.cover .big-play {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;

  width: 50px !important;
  height: 50px !important;

  transition: 0ms !important;
  pointer-events: none;
}

.cover .large-play {
  position: absolute;
  z-index: 2;
  left: 10px;

  width: 60px !important;
  height: 60px !important;

  transition: 0ms !important;
  pointer-events: none;
}

.left-top-icon {
  position: absolute;
  z-index: 2;
  top: 16px !important;
  left: 10px !important;

  width: 40px !important;
  height: 20px !important;

  transition: 0ms !important;
  pointer-events: none;
}

.recommend-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;

  width: 30px !important;
  height: 30px!important;

  transition: 0ms !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
}