@charset "UTF-8";

.lp_wrap .step .icon li {
  position: absolute;
  left: 6.666%;
  width: 86.667%;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .step .icon li:nth-child(1) {
  top: 10.07%;
  transition: 0.6s;
}
.lp_wrap .step .icon li:nth-child(2) {
  top: 19%;
  transition: 0.6s 0.3s;
}
.lp_wrap .step .icon li:nth-child(3) {
  top: 27.9%;
  transition: 0.6s 0.6s;
}
.lp_wrap .step .icon li.trigger.move,
.lp_wrap .step .icon li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .step .flow1 li {
  position: absolute;
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .step .flow1 li:nth-child(1) {
  top: 43.2%;
  left: 10.3%;
  width: 33.333%;
}
.lp_wrap .step .flow1 li:nth-child(2) {
  top: 42.7%;
  left: 56.3%;
  width: 33.333%;
}
.lp_wrap .step .flow1 li.trigger.move,
.lp_wrap .step .flow1 li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .step .flow2 li {
  position: absolute;
  opacity: 0;
}
.lp_wrap .step .flow2 li:nth-child(1) {
  top: 51.5%;
  left: 10.3%;
  width: 33.333%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow2 li:nth-child(2) {
  top: 50.67%;
  left: 54.5%;
  width: 35.067%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow2 li:nth-child(3) {
  top: 48.5%;
  left: 34.8%;
  width: 15.4666%;
  transform-origin: bottom left;
  transition: 0.6s 0.4s;
  transform: scale(0);
}
.lp_wrap .step .flow2 li.trigger.move,
.lp_wrap .step .flow2 li.trigger.move ~ li {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.lp_wrap .step .flow3 li {
  position: absolute;
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .step .flow3 li:nth-child(1) {
  top: 60.5%;
  left: 10.3%;
  width: 33.333%;
}
.lp_wrap .step .flow3 li:nth-child(2) {
  top: 61.33%;
  left: 56.2%;
  width: 33.333%;
}
.lp_wrap .step .flow3 li.trigger.move,
.lp_wrap .step .flow3 li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .step .flow4 li {
  position: absolute;
  opacity: 0;
}
.lp_wrap .step .flow4 li:nth-child(1) {
  top: 69.75%;
  left: 10.3%;
  width: 33.333%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow4 li:nth-child(2) {
  top: 69.8%;
  left: 56.3%;
  width: 33.333%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow4 li:nth-child(3) {
  top: 66.7%;
  left: 34.8%;
  width: 15.4666%;
  transform-origin: bottom left;
  transition: 0.6s 0.4s;
  transform: scale(0);
}
.lp_wrap .step .flow4 li.trigger.move,
.lp_wrap .step .flow4 li.trigger.move ~ li {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.lp_wrap .step .flow5 li {
  position: absolute;
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .step .flow5 li:nth-child(1) {
  top: 79.8%;
  left: 10.3%;
  width: 33.333%;
}
.lp_wrap .step .flow5 li.trigger.move,
.lp_wrap .step .flow5 li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .step .flow6 li {
  position: absolute;
  opacity: 0;
}
.lp_wrap .step .flow6 li:nth-child(1) {
  top: 89.8%;
  left: 10.3%;
  width: 33.333%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow6 li:nth-child(2) {
  top: 86%;
  left: 51.3%;
  width: 43.333%;
  transition: 0.6s;
  transform: translateY(20%);
}
.lp_wrap .step .flow6 li:nth-child(3) {
  top: 86%;
  left: 34.8%;
  width: 15.4666%;
  transform-origin: bottom left;
  transition: 0.6s 0.4s;
  transform: scale(0);
}
.lp_wrap .step .flow6 li.trigger.move,
.lp_wrap .step .flow6 li.trigger.move ~ li {
  opacity: 1;
  transform: scale(1) translateY(0);
}