/* ±âº» ¼³Á¤ (PC ¹öÀü, 30% Ãà¼Ò ¹Ý¿µ) */
.cube-wrapper div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.axis-switcher {
  animation: switch 6s steps(1) infinite;
}

@keyframes switch {
  16.6666666667% { transform: rotate(0.5turn); }
  33.3333333333% { transform: rotate3d(1, 0, 0, 90deg); }
  50% { transform: rotate3d(0, 0, 1, 90deg); }
  66.6666666667% { transform: rotate3d(1, 0, 0, 90deg) rotate(0.5turn); }
  83.3333333333% { transform: rotate3d(0, 0, 1, 90deg) rotate(0.5turn); }
}

.cube {
  transform: rotateX(-35deg) rotateY(45deg);
  color: #83af9b;
}

.cube__comp:first-child * {
  transform: rotateX(-90deg) translateZ(9.45em);
}

.cube__comp:first-child :before {
  top: -2.75625em;
  box-shadow: 0em 0em white, 0em 6.3em white, 6.3em 0em white, 6.3em 6.3em white, 12.6em 0em white, 12.6em 6.3em white;
}

.cube__comp:last-child {
  animation: r 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.cube__face {
  backface-visibility: hidden;
  transform: rotateX(90deg) translateZ(9.45em);
}

.cube__face:before {
  position: absolute;
  left: -9.05625em;
  width: 5.5125em;
  height: 5.5125em;
  border-radius: 4px;
  top: -9.05625em;
  box-shadow: 0em 0em white, 6.3em 0em white, 12.6em 0em white;
  background: white;
  content: "";
}

.cube__face:nth-child(1) { transform: rotateY(0deg) translateZ(9.45em); }
.cube__face:nth-child(2) { transform: rotateY(90deg) translateZ(9.45em); }
.cube__face:nth-child(3) { transform: rotateY(180deg) translateZ(9.45em); }
.cube__face:nth-child(4) { transform: rotateY(270deg) translateZ(9.45em); }

.cube__face:last-child:before {
  top: -9.05625em;
  box-shadow: 0em 0em white, 0em 6.3em white, 0em 12.6em white, 6.3em 0em white, 6.3em 6.3em white, 6.3em 12.6em white, 12.6em 0em white, 12.6em 6.3em white, 12.6em 12.6em white;
}

@keyframes r {
  to { transform: rotateY(-90deg); }
}

/* ¹ÝÀÀÇü ¼³Á¤ */