#banner {
  position: relative;
  background: no-repeat center/cover;
  background-image: url(../img/banner/bn_bg.jpg);
  width: 100%;
  aspect-ratio: 1920/937;
  overflow: hidden;
}

.gril-group {
  position: absolute;
  top: 6%;
  right: 12%;
  width: 40%;
  max-width: 760px;
}

.spotlight-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spotlight {
  position: absolute;
  width: 12%;
  max-width: 240px;
  height: auto;
  transform-origin: top center;
}
.spotlight img {
  width: 100%;
  opacity: 0;
  transform-origin: top center;
}
.spotlight:nth-of-type(odd) img {
  animation: spotlight-show 4.8s linear infinite alternate;
}
.spotlight:nth-of-type(even) img {
  animation: spotlight-show 5.1s linear infinite alternate-reverse;
}
.spotlight-01 {
  top: 72%;
  left: -20%;
  transform: rotate(-94deg);
}
.spotlight-02 {
  top: 20%;
  left: -20%;
  transform: rotate(-60deg);
}
.spotlight-02 img {
  animation-delay: 0.4s !important;
}
.spotlight-03 {
  top: -20%;
  left: -4%;
  transform: rotate(-30deg);
}
.spotlight-03 img {
  animation-delay: 1.1s !important;
}
.spotlight-04 {
  top: -20%;
  left: 20%;
  transform: rotate(30deg);
}
.spotlight-04 img {
  animation-delay: 1.9s !important;
}
.spotlight-05 {
  top: -20%;
  left: 28%;
  transform: rotate(-30deg);
}
.spotlight-05 img {
  animation-delay: 2.3s !important;
}
.spotlight-06 {
  top: -20%;
  right: 32%;
  transform: rotate(30deg);
}
.spotlight-07 {
  top: -20%;
  right: 24%;
  transform: rotate(-24deg);
}
.spotlight-07 img {
  animation-delay: 0.5s !important;
}
.spotlight-08 {
  top: -20%;
  right: -2%;
  transform: rotate(24deg);
}
.spotlight-08 img {
  animation-delay: 1.3s !important;
}
.spotlight-09 {
  top: 24%;
  right: -20%;
  transform: rotate(72deg);
}
.spotlight-09 img {
  animation-delay: 2.2s !important;
}
.spotlight-10 {
  top: 80%;
  right: -20%;
  transform: rotate(100deg);
}
.spotlight-10 img {
  animation-delay: 2.7s !important;
}

.hand-cont {
  position: absolute;
  right: 14%;
  bottom: 0;
  width: 40%;
  max-width: 640px;
  aspect-ratio: 1/1;
}

.heart {
  position: absolute;
  width: 10%;
  max-width: 60px;
  height: auto;
  aspect-ratio: 1/1;
  margin: 4% 0;
  animation: fade-up-down 1.2s ease infinite alternate;
}
.heart-01 {
  width: 8%;
  max-width: 40px;
  top: 24%;
  left: 8%;
  transform: rotate(-30deg);
}
.heart-02 {
  top: 32%;
  left: 40%;
  transform: rotate(-20deg);
  animation-delay: 0.3s;
}
.heart-03 {
  top: 2%;
  right: 40%;
  transform: rotate(30deg);
  animation-delay: 0.7s;
}
.heart-04 {
  top: 16%;
  right: 8%;
  transform: rotate(20deg);
  animation-delay: 0.5s;
}

.hand {
  position: absolute;
  width: 40%;
  max-width: 240px;
  margin: 4% 0;
  animation: fade-up-down 1s ease-in-out infinite alternate;
}
.hand-y {
  left: 8%;
  bottom: -16%;
}
.hand-g {
  right: 8%;
  bottom: -10%;
  animation-delay: 0.3s;
}

.slogn {
  position: absolute;
  top: 8%;
  left: 12%;
  width: 40%;
  max-width: 680px;
  animation: fade-scale 0.8s ease infinite alternate;
}

@media screen and (max-width: 1280px) {
  .hand-cont {
    right: 10%;
  }
  .slogn {
    left: 8%;
  }
}
@media screen and (max-width: 800px) {
  #banner {
    aspect-ratio: 1/1;
  }
  .gril-group {
    width: 88%;
    right: 6%;
  }
  .spotlight {
    width: 20%;
  }
  .hand-cont {
    right: 50%;
    transform: translateX(50%);
  }
  .slogn {
    width: 68%;
    top: 2%;
    left: 16%;
  }
}
@keyframes fade-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes spotlight-show {
  0% {
    opacity: 0;
    transform: rotate(30deg);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-30deg);
  }
}
@keyframes fade-up-down {
  0% {
    margin: 4% 0;
  }
  100% {
    margin: 0 0 8%;
  }
}/*# sourceMappingURL=banner.css.map */