.bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    position: absolute;
  }
  :global {
    .leave {
      transition: all 1s ease-in 1s;
      opacity: 1;
      z-index: 55;
      transform: rotate(0deg);
      -webkit-animation: fade-out-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation: fade-out-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .enter {
      transition: all 1s ease-in 1s;
      opacity: 0;
      z-index: 55;
      transform: rotate(0deg);
      -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
      animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }
  }
}
