/* -----------------------
  focus
----------------------- */
.focus {
  overflow: hidden;
  position: relative;
  transition: all 2s ease;
}
.focus::before {
  content: '';
  width: 100%;
  height: 100%;
  background: url(../img/focus_bg.png) no-repeat left top / cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1);
  transform-origin: 20% 55%;
}
.focus.trigger.move::before {
  animation: zoomIn 2s ease-in-out forwards;
  animation-delay: 2s;
}

.focus .bg-top-box {
  margin-bottom: min(9.38vw, 90px);
}
.focus .bg-bottom-box {
  margin-top: min(6.56vw, 63px);
}

.focus .scope {
  display: grid;
  grid-template-columns: 1fr min(55.42vw, 532px) 1fr;
  grid-template-rows: 1fr min(55.42vw, 532px) 1fr;
  width: min(79.38vw, 762px);
  margin: 0 auto;
  transform: translate(max(-20.83vw, -200px), max(-31.25vw, -300px));
}
.focus .scope > p {
  grid-area: 1 / 1 / 4 / 4;
}
.focus .scope .scope-circle {
  grid-area: 2 / 2 / 3 / 3;
  display: grid;
  position: relative;
  z-index: 3;
  transform: scale(0);
  animation-delay: 2.6s;
}
.focus .scope .scope-circle p {
  grid-area: 1 / 1;
}
.focus .scope .scope-circle .circle-bg {
  animation: rotate 8s linear infinite;
  z-index: -1;
}

.focus.trigger.move .scope {
  animation: search 2s ease-in-out forwards;
}

@keyframes search {
  0% {
    transform: translate(max(-20.83vw, -200px), max(-31.25vw, -300px));
  }
  50% {
    transform: translate(max(-20.83vw, -200px), max(-31.25vw, -300px));
  }
  65% {
    transform: translate(min(7.29vw, 70px), min(31.25vw, 300px));
  }
  70% {
    transform: translate(min(7.29vw, 70px), min(31.25vw, 300px));
  }
  80% {
    transform: translate(min(34.38vw, 330px), min(18.75vw, 180px));
  }
  85% {
    transform: translate(min(34.38vw, 330px), min(18.75vw, 180px));
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(1);
    filter: blur(0);
  }
  80% {
    transform: scale(3.2);
    filter: blur(0);
  }
  100% {
    transform: scale(3.2);
    filter: blur(min(0.52vw, 5px));
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}