@charset "UTF-8";

.lp_wrap .power_wrap {
  position: relative;
  overflow: hidden;
  clip-path: inset(0%);
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 12;
}
.lp_wrap .power_wrap section {
  position: absolute;
  left: 0%;
  width: 100%;
  height: calc(100% / 4);
}
.lp_wrap .power_wrap section:nth-of-type(1) {
  top: 0%;
}
.lp_wrap .power_wrap section:nth-of-type(2) {
  top: 20%;
}
.lp_wrap .power_wrap section:nth-of-type(3) {
  top: 40%;
}
.lp_wrap .power_wrap section:nth-of-type(4) {
  top: 60%;
}
.lp_wrap .power_wrap section .bg1::after {
  content: "";
  display: block;
  position: fixed;
  top: 0%;
  width: 100%;
  max-width: 750px;
  height: 50vh;
  height: 50dvh;
  opacity: 0;
  transition: 1s;
}
.lp_wrap .power_wrap section .bg2::after {
  content: "";
  display: block;
  position: fixed;
  bottom: 0%;
  width: 100%;
  max-width: 750px;
  height: 50vh;
  height: 50dvh;
  opacity: 0;
  transition: 1s;
}
.lp_wrap .power_wrap .power_part1 .bg1::after {
  opacity: 1;
  background: url(../image/power1-bg1.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part1 .bg2::after {
  opacity: 1;
  background: url(../image/power1-bg2.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part1.trigger.move .bg1::after {
  background: url(../image/power1-bg1.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_wrap .power_part1.trigger.move .bg2::after {
  background: url(../image/power1-bg2.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_part1 .top {
  position: fixed;
  bottom: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(120%);
}
.lp_wrap .power_part1 .under {
  position: fixed;
  top: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(-120%);
}
.lp_wrap .power_wrap .power_part1.trigger.move .top,
.lp_wrap .power_wrap .power_part1.trigger.move .under {
  transform: translateX(0);
}
.lp_wrap .power_part1 .slider_wrap {
  position: fixed;
  top: 40.2%;
  left: 0%;
  width: 151%;
}
.lp_wrap .power_part1 .deco {
  position: fixed;
  top: 41%;
  left: 29.5%;
  width: 35.6%;
  transition: 0.8s 0.4s;
  opacity: 0;
  animation: 1s power_deco ease-in-out alternate infinite;
}
.lp_wrap .power_wrap .power_part1.trigger.move .deco {
  opacity: 1;
}
@keyframes power_deco {
  0% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(8%);
  }
}
@media screen and (min-width: 2200px) {
  .lp_wrap .power_wrap .power_part1 .bg1::after,
  .lp_wrap .power_wrap .power_part1.trigger.move .bg1::after {
    background: url(../image/power1-bg1.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_wrap .power_part1 .bg2::after,
  .lp_wrap .power_wrap .power_part1.trigger.move .bg2::after {
    background: url(../image/power1-bg2.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_part1 .slider_wrap {
    top: 45.5%;
  }
  .lp_wrap .power_part1 .deco {
    top: 46%;
  }
}
@media screen and (min-width: 751px) {
  .lp_wrap .power_part1 .top {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part1 .under {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part1 .slider_wrap {
    left: 50%;
    margin-left: -375px;
    max-width: 1130px;
  }
  .lp_wrap .power_part1 .deco {
    left: 50%;
    margin-left: -150px;
    max-width: 267px;
  }
}
.lp_wrap .power_wrap .power_part2 .bg1::after {
  background: url(../image/power2-bg1.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part2 .bg2::after {
  background: url(../image/power2-bg2.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part2.trigger.move .bg1::after {
  background: url(../image/power2-bg1.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_wrap .power_part2.trigger.move .bg2::after {
  background: url(../image/power2-bg2.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_part2 .top {
  position: fixed;
  bottom: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(120%);
}
.lp_wrap .power_part2 .under {
  position: fixed;
  top: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(-120%);
}
.lp_wrap .power_wrap .power_part2.trigger.move .top,
.lp_wrap .power_wrap .power_part2.trigger.move .under {
  transform: translateX(0);
}
.lp_wrap .power_part2 .slider_wrap {
  position: fixed;
  top: 40.3%;
  left: 0%;
  width: 198%;
  transition: 0.6s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part2.trigger.move .slider_wrap {
  opacity: 1;
}
.lp_wrap .power_part2 .deco {
  position: fixed;
  top: 40.9%;
  left: 34%;
  width: 31.733%;
  animation: 1s power_deco ease-in-out alternate infinite;
  transition: 0.8s 0.4s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part2.trigger.move .deco {
  opacity: 1;
}
@media screen and (min-width: 2200px) {
  .lp_wrap .power_wrap .power_part2 .bg1::after,
  .lp_wrap .power_wrap .power_part2.trigger.move .bg1::after {
    background: url(../image/power2-bg1.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_wrap .power_part2 .bg2::after,
  .lp_wrap .power_wrap .power_part2.trigger.move .bg2::after {
    background: url(../image/power2-bg2.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_part2 .slider_wrap {
    top: 45.5%;
  }
  .lp_wrap .power_part2 .deco {
    top: 46%;
  }
}
@media screen and (min-width: 751px) {
  .lp_wrap .power_part2 .top {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part2 .under {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part2 .slider_wrap {
    left: 50%;
    margin-left: -375px;
    max-width: 1510px;
  }
  .lp_wrap .power_part2 .deco {
    left: 50%;
    margin-left: -120px;
    max-width: 238px;
  }
}
.lp_wrap .power_wrap .power_part3 .bg1::after {
  background: url(../image/power3-bg1.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part3 .bg2::after {
  background: url(../image/power3-bg2.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part3.trigger.move .bg1::after {
  background: url(../image/power3-bg1.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_wrap .power_part3.trigger.move .bg2::after {
  background: url(../image/power3-bg2.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_part3 .top {
  position: fixed;
  bottom: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(120%);
}
.lp_wrap .power_part3 .under {
  position: fixed;
  top: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(-120%);
}
.lp_wrap .power_wrap .power_part3.trigger.move .top,
.lp_wrap .power_wrap .power_part3.trigger.move .under {
  transform: translateX(0);
}
.lp_wrap .power_part3 .slider_wrap {
  position: fixed;
  top: 40.2%;
  left: 0%;
  width: 274%;
  transition: 0.6s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part3.trigger.move .slider_wrap {
  opacity: 1;
}
.lp_wrap .power_part3 .deco {
  position: fixed;
  top: 43.8%;
  left: 26.8%;
  width: 42.667%;
  animation: 1s power_deco ease-in-out alternate infinite;
  transition: 0.8s 0.4s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part3.trigger.move .deco {
  opacity: 1;
}
@media screen and (min-width: 2200px) {
  .lp_wrap .power_wrap .power_part3 .bg1::after,
  .lp_wrap .power_wrap .power_part3.trigger.move .bg1::after {
    background: url(../image/power3-bg1.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_wrap .power_part3 .bg2::after,
  .lp_wrap .power_wrap .power_part3.trigger.move .bg2::after {
    background: url(../image/power3-bg2.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_part3 .slider_wrap {
    top: 45.8%;
  }
  .lp_wrap .power_part3 .deco {
    top: 47.5%;
  }
}
@media screen and (min-width: 751px) {
  .lp_wrap .power_part3 .top {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part3 .under {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part3 .slider_wrap {
    left: 50%;
    margin-left: -375px;
    max-width: 2060px;
  }
  .lp_wrap .power_part3 .deco {
    left: 50%;
    margin-left: -170px;
    max-width: 320px;
  }
}
.lp_wrap .power_wrap .power_part4 .bg1::after {
  background: url(../image/power4-bg1.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part4 .bg2::after {
  background: url(../image/power4-bg2.jpg) center center / 200% no-repeat;
}
.lp_wrap .power_wrap .power_part4.trigger.move .bg1::after {
  background: url(../image/power4-bg1.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_wrap .power_part4.trigger.move .bg2::after {
  background: url(../image/power4-bg2.jpg) center center / 130% no-repeat;
}
.lp_wrap .power_part4 .top {
  position: fixed;
  bottom: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(120%);
}
.lp_wrap .power_part4 .under {
  position: fixed;
  top: 50%;
  left: 10.334%;
  width: 79.333%;
  transition: 0.8s;
  transform: translateX(-120%);
}
.lp_wrap .power_wrap .power_part4.trigger.move .top,
.lp_wrap .power_wrap .power_part4.trigger.move .under {
  transform: translateX(0);
}
.lp_wrap .power_part4 .slider_wrap {
  position: fixed;
  top: 40.3%;
  left: 0%;
  width: 162%;
  transition: 0.6s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part4.trigger.move .slider_wrap {
  opacity: 1;
}
.lp_wrap .power_part4 .deco {
  position: fixed;
  top: 45.5%;
  left: 31.4%;
  width: 36.533%;
  animation: 1s power_deco ease-in-out alternate infinite;
  transition: 0.8s 0.4s;
  opacity: 0;
}
.lp_wrap .power_wrap .power_part4.trigger.move .deco {
  opacity: 1;
}
@media screen and (min-width: 2200px) {
  .lp_wrap .power_wrap .power_part4 .bg1::after,
  .lp_wrap .power_wrap .power_part4.trigger.move .bg1::after {
    background: url(../image/power4-bg1.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_wrap .power_part4 .bg2::after,
  .lp_wrap .power_wrap .power_part4.trigger.move .bg2::after {
    background: url(../image/power4-bg2.jpg) center center / cover no-repeat;
  }
  .lp_wrap .power_part4 .slider_wrap {
    top: 45.7%;
  }
  .lp_wrap .power_part4 .deco {
    top: 47.5%;
  }
}
@media screen and (min-width: 751px) {
  .lp_wrap .power_part4 .top {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part4 .under {
    left: 50%;
    margin-left: -300px;
    max-width: 595px;
  }
  .lp_wrap .power_part4 .slider_wrap {
    left: 50%;
    margin-left: -375px;
    max-width: 1230px;
  }
  .lp_wrap .power_part4 .deco {
    left: 50%;
    margin-left: -140px;
    max-width: 274px;
  }
}
.lp_wrap .power_wrap section.trigger.move .bg1::after,
.lp_wrap .power_wrap section.trigger.move .bg2::after {
  opacity: 1;
}