@charset "utf-8";

.lp_wrap .supply .head {
  position: absolute;
  top: 18.4%;
  left: 11.2%;
  width: 77.6%;
  transition: 1.07s;
  mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  mask-size: 250% 100%;
  mask-position: 100% 0%;
}
.lp_wrap .supply .head.move {
  mask-position: 0% 0%;
}
.lp_wrap .supply .arrow {
  position: absolute;
  bottom: 13.9%;
  left: 7.6%;
  width: 84.8%;
  transition: 0.6s 1s;
  opacity: 0;
}
.lp_wrap .supply .arrow.move {
  opacity: 1;
}
.lp_wrap .supply .graph li {
  position: absolute;
  bottom: 13.9%;
  width: 8%;
  clip-path: inset(100% 0% 0% 0%);
}
.lp_wrap .supply .graph li:nth-child(1) {
  left: 10.3%;
  transition: 0.6s;
}
.lp_wrap .supply .graph li:nth-child(2) {
  left: 20.6%;
  transition: 0.6s 0.1s;
}
.lp_wrap .supply .graph li:nth-child(3) {
  left: 30.8%;
  transition: 0.6s 0.2s;
}
.lp_wrap .supply .graph li:nth-child(4) {
  left: 41%;
  transition: 0.6s 0.3s;
}
.lp_wrap .supply .graph li:nth-child(5) {
  right: 41%;
  transition: 0.6s 0.4s;
}
.lp_wrap .supply .graph li:nth-child(6) {
  right: 30.8%;
  transition: 0.6s 0.5s;
}
.lp_wrap .supply .graph li:nth-child(7) {
  right: 20.6%;
  transition: 0.6s 0.6s;
}
.lp_wrap .supply .graph li:nth-child(8) {
  right: 10.3%;
  transition: 0.6s 0.7s;
}
.lp_wrap .supply .arrow.move ~ .graph li {
  clip-path: inset(0%);
}