:host {
  position: relative;
  display: block;
  background-image: url(/assets/image/square.png);
  background-size: cover;
  width: 245.5px;
  height: 414.5px;
  user-select: none;

  &:before {
    display: block;
    content: "";
    position: absolute;
    width: 260px;
    height: 380px;
    top: 0;
    left: -80px;
    background-color: #333;
    border-radius: 1px;
  }
}

.fang {
  position: absolute;
  top: 30px;
  left: -70px;
}

.wei {
  position: absolute;
  top: 126px;
  left: -10px;
}

.wave {
  position: absolute;
  top: 209px;
  left: -89px;
}

.name {
  position: absolute;
  width: 35px;
  left: -25px;
  top: 160px;
}

.jupiter-container {
  width: 231px;
  left: 161px;
  top: 49px;
  position: absolute;
  perspective: 1000px;

  @media screen and (max-width: 600px) {
    display: none;
  }

  &,
  & > * {
    will-change: transform;

    &.leaved {
      transition: transform 400ms ease-in-out;
    }
  }
}

.jupiter {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

.jupiter-cover {
  width: 169.5px;
  position: absolute;
  left: -14px;
  top: 18px;
  background-color: transparent;
  z-index: 3;
}

.back-block {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1;
  left: 10px;
  top: 10px;
}