* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
}
.mywrapper {
  padding: 0;
  background-color: #35353d;
  max-width: 1440px;
  margin: auto;
}
/* 카드 뒤집기 */
#section4,
#section7 {
  height: 60vw;
  max-height: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-inline: 4vw;
  overflow: hidden;
  align-items: center;
}
#section7 {
  height: 60vw;
}
.card-container {
  width: 25%;
  perspective: 1000px;
  display: flex;
  justify-content: center;
}
.spinImg,
.flipImg {
  position: absolute;
}
.flip-wrap {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
#section7 .flip-wrap {
  width: 96%;
  margin-top: 2%;
}
#section4 .flip-wrap {
  width: 90%;
}
#section4 .c1 .flip-wrap,
#section4 .c3 .flip-wrap {
  animation: rotateCard1 9s ease infinite forwards;
}
#section4 .c2 .flip-wrap,
#section4 .c4 .flip-wrap {
  transform: rotateY(180deg);
  animation: rotateCard2 9s ease infinite forwards;
}
@keyframes rotateCard1 {
  50% {
    transform: rotateY(0deg);
  }
  66% {
    transform: rotateY(180deg);
  }
  83% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotateCard2 {
  17% {
    transform: rotateY(180deg);
  }
  33% {
    transform: rotateY(360deg);
  }
  83% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(540deg);
  }
}
.card-front,
.card-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
/* 카드 박스 */
.cardbox-back {
  transform: translateZ(26px) rotateY(0deg);
}
.cardbox-side {
  transform: translateZ(13px) rotateY(90deg);
}
.cardbox-front {
  transform: translateZ(0) rotateY(180deg);
}
.cardbox-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-273px) rotateY(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.c1 .cardbox-wrap,
.c3 .cardbox-wrap {
  transform: translateZ(-273px) rotateY(-180deg);
  animation: rotateAnimation1 9s ease infinite forwards;
}
.c2 .cardbox-wrap,
.c4 .cardbox-wrap {
  animation: rotateAnimation2 9s ease infinite forwards;
}
@keyframes rotateAnimation1 {
  50% {
    transform: translateZ(-273px) rotateY(-180deg);
  }
  66% {
    transform: translateZ(-273px) rotateY(0deg);
  }
  83% {
    transform: translateZ(-273px) rotateY(0deg);
  }
  100% {
    transform: translateZ(-273px) rotateY(180deg);
  }
}
@keyframes rotateAnimation2 {
  17% {
    transform: translateZ(-273px) rotateY(0deg);
  }
  33% {
    transform: translateZ(-273px) rotateY(180deg);
  }
  83% {
    transform: translateZ(-273px) rotateY(180deg);
  }
  100% {
    transform: translateZ(-273px) rotateY(360deg);
  }
}
.c3 .cardbox-wrap,
.c3 .flip-wrap,
.c3 .cardbox {
  animation-delay: 0.4s !important;
}
.c4 .cardbox-wrap,
.c4 .flip-wrap,
.c4 .cardbox {
  animation-delay: 0.4s !important;
}