@charset "UTF-8";

.lp_wrap .face .photo li {
  position: absolute;
  width: 50%;
  overflow: hidden;
}
.lp_wrap .face .photo li:nth-child(1) {
  top: 0%;
  left: 0%;
}
.lp_wrap .face .photo li:nth-child(2) {
  top: 0%;
  right: 0%;
}
.lp_wrap .face .photo li:nth-child(3) {
  top: 33.25%;
  left: 0%;
}
.lp_wrap .face .photo li:nth-child(4) {
  top: 33.25%;
  right: 0%;
}
.lp_wrap .face .photo li:nth-child(5) {
  bottom: 0%;
  left: 0%;
}
.lp_wrap .face .photo li:nth-child(6) {
  bottom: 0%;
  right: 0%;
}
.lp_wrap .face .photo li.trigger img,
.lp_wrap .face .photo li.trigger ~ li img {
  transition: 1.2s 0.6s;
  transform: scale(1) translateY(0);
}
.lp_wrap .face .photo li.trigger.move img{
  transform: scale(1.62) translateY(1.5%);
}

.lp_wrap .face .photo li.trigger.move ~ li:nth-child(2) img {
  transform: scale(1.63) translate(1.2%,1.1%);
}

.lp_wrap .face .photo li.trigger.move ~ li:nth-child(3) img {
  transform: scale(1.6) translate(-1.2%,-0.9%);
}

.lp_wrap .face .photo li.trigger.move ~ li:nth-child(4) img {
  transform: scale(1.64) translate(-2.2%,0.8%);
}

.lp_wrap .face .photo li.trigger.move ~ li:nth-child(5) img {
  transform: scale(1.59) translate(-1.3%, 1.6%);
}

.lp_wrap .face .photo li.trigger.move ~ li:nth-child(6) img {
  transform: scale(1.56) translate(-0.5%,0.9%);
}

.lp_wrap .face .photo01 li {
  position: absolute;
  width: 50%;
  overflow: hidden;
}
.lp_wrap .face .photo01 li:nth-child(1) {
  top: 0%;
  left: 0%;
}
.lp_wrap .face .photo01 li:nth-child(2) {
  top: 0%;
  right: 0%;
}
.lp_wrap .face .photo01 li:nth-child(3) {
  top: 33.25%;
  left: 0%;
}
.lp_wrap .face .photo01 li:nth-child(4) {
  top: 33.25%;
  right: 0%;
}
.lp_wrap .face .photo01 li:nth-child(5) {
  bottom: 0%;
  left: 0%;
}
.lp_wrap .face .photo01 li:nth-child(6) {
  bottom: 0%;
  right: 0%;
}

.lp_wrap .face .photo01 li img{
  opacity: 0;
  transition: 0.5s 1.3s ease;
}

.lp_wrap .face .photo01 li.trigger.move img,
.lp_wrap .face .photo01 li.trigger.move ~ li img {
  opacity: 1;
}

.lp_wrap .face .photo02 li {
  position: absolute;
  width: 50%;
  overflow: hidden;
}
.lp_wrap .face .photo02 li:nth-child(1) {
  top: 0%;
  left: 0%;
}
.lp_wrap .face .photo02 li:nth-child(2) {
  top: 0%;
  right: 0%;
}
.lp_wrap .face .photo02 li:nth-child(3) {
  top: 33.25%;
  left: 0%;
}
.lp_wrap .face .photo02 li:nth-child(4) {
  top: 33.25%;
  right: 0%;
}
.lp_wrap .face .photo02 li:nth-child(5) {
  bottom: 0%;
  left: 0%;
}
.lp_wrap .face .photo02 li:nth-child(6) {
  bottom: 0%;
  right: 0%;
}

.lp_wrap .face .photo02 li.trigger img,
.lp_wrap .face .photo02 li.trigger ~ li img {
  opacity: 0;
}

.lp_wrap .face .photo02 li.trigger.move img,
.lp_wrap .face .photo02 li.trigger.move ~ li img {
  animation: faceAnime 2.0s 1.8s ease infinite;
}

@keyframes faceAnime{
  0%,49%{
    opacity: 0;
  }
  50%,100%{
    opacity: 1;
  }
  
}

.lp_wrap .face .cover {
  position: absolute;
  top: 12.5%;
  left: 4.5%;
  width: 92.125%;
}
.lp_wrap .face .graph {
  position: absolute;
  top: 30.15%;
  left: 18.75%;
  width: 62.5%;
  aspect-ratio: 1 / 1;
  transform: rotateY(180deg);
}
.lp_wrap .face .graph svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform:rotate(245deg);
}
.lp_wrap .face .graph svg circle {
  fill: transparent;
  stroke: #eb6161;
  stroke-width: 14;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}
.lp_wrap .face .graph.trigger.move svg circle {
  animation: 1s face_graph ease-in-out forwards;
}
@keyframes face_graph {
  0% {
    stroke-dashoffset: 1600;
  }
  100%{
    stroke-dashoffset: 234;
  }
}
.lp_wrap .face .check {
  position: absolute;
  top: 26.4%;
  left: 29.8%;
  width: 56.375%;
  transition: 0.6s 0.4s;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.lp_wrap .face .graph.trigger.move ~ .check {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.lp_wrap .face .copy {
  position: absolute;
  top: 22.2%;
  left: 10%;
  width: 50.875%;
  transition: 0.6s 0.8s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .face .graph.trigger.move ~ .copy {
  opacity: 1;
  transform: translateY(0);
}