@charset "UTF-8";

.lp_wrap .htu .step li {
  position: absolute;
}
.lp_wrap .htu .step li:nth-child(1) {
  top: 28.1%;
  left: 28.8%;
  z-index: 1;
  width: 14.267%;
  transition: 0.6s;
}
.lp_wrap .htu .step li:nth-child(2) {
  top: 23.2%;
  left: 37.1%;
  width: 28.533%;
  transition: 0.6s 0.15s;
}
.lp_wrap .htu .step li:nth-child(3) {
  top: 28.1%;
  left: 59.3%;
  z-index: 1;
  width: 14.267%;
  transition: 0.6s 0.3s;
}
.lp_wrap .htu .step li:nth-child(4) {
  top: 23.2%;
  left: 67.4%;
  width: 27.733%;
  transition: 0.6s 0.45s;
}
.lp_wrap .htu .step li.trigger,
.lp_wrap .htu .step li.trigger ~ li:nth-child(3) {
  transform: translateX(-20%);
  opacity: 0;
}
.lp_wrap .htu .step li.trigger.move,
.lp_wrap .htu .step li.trigger.move ~ li:nth-child(3) {
  transform: translateX(0%);
  opacity: 1;
}
.lp_wrap .htu .step li.trigger ~ li:nth-child(2),
.lp_wrap .htu .step li.trigger ~ li:nth-child(4) {
  transform: translateY(20%);
  opacity: 0;
}
.lp_wrap .htu .step li.trigger.move ~ li:nth-child(2),
.lp_wrap .htu .step li.trigger.move ~ li:nth-child(4) {
  transform: translateY(0%);
  opacity: 1;
}
.lp_wrap .htu .slider_wrap1,
.lp_wrap .htu .slider_wrap2 {
  position: absolute;
  left: 0%;
  width: 100%;
  cursor: grab;
}
.lp_wrap .htu .slider_wrap1:active,
.lp_wrap .htu .slider_wrap2:active {
  cursor: grabbing;
}
.lp_wrap .htu .slider_wrap1 {
  top: 40.5%;
}
.lp_wrap .htu .slider_wrap2 {
  top: 71.9%;
}
.lp_wrap .htu .slider_wrap1 .slick-slide img,
.lp_wrap .htu .slider_wrap2 .slick-slide img {
  width: 89.586%;
  margin: auto;
}
.lp_wrap .htu .slider_wrap1 .slick-dots,
.lp_wrap .htu .slider_wrap2 .slick-dots {
  display: flex;
  justify-content: center;
  bottom: -11.3%;
  height: 7%;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li,
.lp_wrap .htu .slider_wrap2 .slick-dots li {
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  margin: 0% 1.5%;
  transition: 0.4s;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li:nth-child(1),
.lp_wrap .htu .slider_wrap2 .slick-dots li:nth-child(1) {
  background: url("../image/htu-dots1.png") center center / contain no-repeat;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li:nth-child(2),
.lp_wrap .htu .slider_wrap2 .slick-dots li:nth-child(2) {
  background: url("../image/htu-dots2.png") center center / contain no-repeat;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li:nth-child(3),
.lp_wrap .htu .slider_wrap2 .slick-dots li:nth-child(3) {
  background: url("../image/htu-dots3.png") center center / contain no-repeat;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li.slick-active:nth-child(1),
.lp_wrap .htu .slider_wrap2 .slick-dots li.slick-active:nth-child(1) {
  background: url("../image/htu-dots1-on.png") center center / contain no-repeat;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li.slick-active:nth-child(2),
.lp_wrap .htu .slider_wrap2 .slick-dots li.slick-active:nth-child(2) {
  background: url("../image/htu-dots2-on.png") center center / contain no-repeat;
}
.lp_wrap .htu .slider_wrap1 .slick-dots li.slick-active:nth-child(3),
.lp_wrap .htu .slider_wrap2 .slick-dots li.slick-active:nth-child(3) {
  background: url("../image/htu-dots3-on.png") center center / contain no-repeat;
}