@charset "UTF-8";

.lp_wrap .cospa .photo {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  overflow: hidden;
}
.lp_wrap .cospa .photo.trigger img {
  transition: 1.2s;
  transform: scale(1);
  transform-origin: 50% 44%;
}
.lp_wrap .cospa .photo.trigger.move img {
  transform: scale(1.6);
}
.lp_wrap .cospa .head li {
  position: absolute;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .head li:nth-child(1) {
  top: 30%;
  left: 6%;
  width: 19.2%;
  transition: 0.6s;
}
.lp_wrap .cospa .head li:nth-child(2) {
  top: 30%;
  left: 27.6%;
  width: 18%;
  transition: 0.6s 0.2s;
}
.lp_wrap .cospa .head li:nth-child(3) {
  top: 30.15%;
  left: 48%;
  width: 18.933%;
  transition: 0.6s 0.4s;
}
.lp_wrap .cospa .head li:nth-child(4) {
  top: 30.2%;
  left: 69.6%;
  width: 18.133%;
  transition: 0.6s 0.6s;
}
.lp_wrap .cospa .head li.trigger.move,
.lp_wrap .cospa .head li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .cospa .copy li {
  position: absolute;
}
.lp_wrap .cospa .copy li:nth-child(1) {
  top: 37.63%;
  left: 5.3%;
  width: 72.667%;
  transition: 0.8s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .cospa .copy li:nth-child(2) {
  top: 38%;
  left: 6.5%;
  width: 7.467%;
  transition: 0.6s 0.2s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(3) {
  top: 38.1%;
  left: 17.1%;
  width: 3.733%;
  transition: 0.6s 0.3s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(4) {
  top: 38.75%;
  left: 24.1%;
  width: 5.333%;
  transition: 0.6s 0.4s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(5) {
  top: 38.15%;
  left: 32%;
  width: 6%;
  transition: 0.6s 0.5s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(6) {
  top: 38.35%;
  left: 40.1%;
  width: 6.667%;
  transition: 0.6s 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(7) {
  top: 41.23%;
  left: 6%;
  width: 86.4%;
  transition: 0.8s 0.4s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .cospa .copy li:nth-child(8) {
  top: 41.7%;
  left: 40.1%;
  width: 4.933%;
  transition: 0.6s 0.6s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(9) {
  top: 41.7%;
  left: 48.5%;
  width: 4.933%;
  transition: 0.6s 0.7s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(10) {
  top: 41.9%;
  left: 56.1%;
  width: 6.667%;
  transition: 0.6s 0.8s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(11) {
  top: 41.6%;
  left: 64.7%;
  width: 6.4%;
  transition: 0.6s 0.9s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(12) {
  top: 41.7%;
  left: 73.2%;
  width: 5.867%;
  transition: 0.6s 1s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li:nth-child(13) {
  top: 41.6%;
  left: 82.2%;
  width: 4.533%;
  transition: 0.6s 1.1s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .cospa .copy li.trigger.move,
.lp_wrap .cospa .copy li.trigger.move ~ li {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0);
}
.lp_wrap .cospa .slider0 {
  position: absolute;
  top: 48.6%;
  left: 0%;
  width: 829.3333%;
  display: flex;
}
.lp_wrap .cospa .slider0 div {
  animation: 30s cospa_slide0 linear infinite
}
@keyframes cospa_slide0 {
  to {
    transform: translateX(-100%);
  }
}
.lp_wrap .cospa .icon {
  position: absolute;
  top: 51.6%;
  left: 66.4%;
  width: 34.667%;
}
.lp_wrap .cospa .slider_bg {
  position: absolute;
  top: 53.77%;
  left: 0%;
  width: 68%;
}
.lp_wrap .cospa .slider_bg .cont {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
.lp_wrap .cospa .slider_bg .slide {
  position: absolute;
  inset: 0;
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .cospa .slider_bg .slide2 {
  animation: 6s cospa_bg ease-in-out infinite;
}
.lp_wrap .cospa .slider_bg .slide3 {
  animation: 6s cospa_bg 2s ease-in-out infinite;
}
@keyframes cospa_bg {
  0%, 30% {
    clip-path: inset(0% 0% 0 100%);
  }
  35%, 65% {
    clip-path: inset(0%);
  }
  70%, 100% {
    clip-path: inset(0% 100% 0% 0%);
  }
}
.lp_wrap .cospa .slide li {
  position: absolute;
  top: 78.3%;
  left: 5.3%;
}
.lp_wrap .cospa .slide li:nth-child(1) {
  width: 58%;
  animation: 6s cospa_slide -2s ease-in-out infinite;
}
.lp_wrap .cospa .slide li:nth-child(2) {
  width: 57.333%;
  opacity: 0;
  animation: 6s cospa_slide ease-in-out infinite;
}
.lp_wrap .cospa .slide li:nth-child(3) {
  width: 57.333%;
  opacity: 0;
  animation: 6s cospa_slide 2s ease-in-out infinite;
}
@keyframes cospa_slide {
  0%, 30%  {
    top: 78.3%;
    opacity: 0;
    z-index: 3;
  }
  35%, 65% {
    top: 75.3%;
    opacity: 1;
    z-index: 2;
  }
  70%, 100% {
    top: 75.3%;
    opacity: 0;
    z-index: 1;
  }
}