body {
  overflow: hidden;
}


figure {
  width: 30%;
  z-index: 999;
  position: relative;
  word-break: keep-all;
  animation: rising 70s;
  animation-fill-mode: none;
  line-height: 1.5;
  bottom: -150%; 
}

figure:hover {
  cursor: pointer;
  animation-play-state: paused;
}

.photo {
  width: 100%;
  box-shadow: 0px 0px 100px orangered;
  z-index: 999;
  position: relative;
}

.sun {
  width: 800px;
  height: 800px;
  position: absolute;
  margin: auto;
  left: 50%;
  top: 90%;        
  transform: translate(-50%);
  background: #ffffff;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 1) 0%,
    rgba(255, 215, 0, 1) 30%,
    rgb(255, 255, 255) 65%,
    rgb(255, 255, 255) 100%
  );
  border-radius: 100%;
  animation: sunrise 50s;
  animation-fill-mode: none;
}

@keyframes sunrise {
  to {
    top: 40%;
  }
}

@keyframes rising {
  to {
    bottom: 100%;
  }
}
@media (min-width: 1440px) {
  .sun {
    width: 1000px;
    height: 1000px;
  }
}

@media (min-width: 1800px) {
  .sun {
    width: 1200px;
    height: 1200px;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  .sun {
    width: 100vw;
    height: 100vw;
  }
  figure {
    width: 50%;
  }
}