@charset "UTF-8";
@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir/Avenir-BookOblique.eot");
  src: url("../fonts/Avenir/Avenir-BookOblique.eot?#iefix") format("embedded-opentype"), url("../fonts/Avenir/Avenir-BookOblique.woff2") format("woff2"), url("../fonts/Avenir/Avenir-BookOblique.ttf") format("truetype"), url("../fonts/Avenir/Avenir-BookOblique.svg#avenir") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AgencyFB";
  src: url("../fonts/AgencyFB/AgencyFB-Bold.eot");
  src: url("../fonts/AgencyFB/AgencyFB-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/AgencyFB/AgencyFB-Bold.woff2") format("woff2"), url("../fonts/AgencyFB/AgencyFB-Bold.ttf") format("truetype"), url("../fonts/AgencyFB/AgencyFB-Bold.svg#AgencyFB") format("svg");
  font-weight: normal;
  font-style: normal;
}
.service-card, .nav-menu-item {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.burger::before, .burger::after, .burger span, .burger-btn, .nav-menu, .nav, .nav-logo {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.icon-kv1_icon_1 {
  background: url(../images/svg/kv1_icon_1.svg) no-repeat center/contain;
}

.icon-kv1_icon_2 {
  background: url(../images/svg/kv1_icon_2.svg) no-repeat center/contain;
}

.icon-kv1_icon_3 {
  background: url(../images/svg/kv1_icon_3.svg) no-repeat center/contain;
}

.icon-kv1_icon_4 {
  background: url(../images/svg/kv1_icon_2.svg) no-repeat center/contain;
  -webkit-filter: grayscale(50%);
          filter: grayscale(50%);
}

.icon-kv2_icon_1 {
  background: url(../images/svg/kv2_icon_1.svg) no-repeat center/contain;
}

.icon-kv2_icon_2 {
  background: url(../images/svg/kv2_icon_2.svg) no-repeat center/contain;
}

.icon-kv2_icon_3 {
  background: url(../images/svg/kv2_icon_3.svg) no-repeat center/contain;
}

.icon-kv2_icon_4 {
  background: url(../images/svg/kv2_icon_4.svg) no-repeat center/contain;
}

.icon-kv4_icon_1 {
  background: url(../images/svg/kv4_icon_1.svg) no-repeat center/contain;
}

.icon-kv4_icon_2 {
  background: url(../images/svg/kv4_icon_2.svg) no-repeat center/contain;
}

.icon-kv4_icon_3 {
  background: url(../images/svg/kv4_icon_3.svg) no-repeat center/contain;
}

.icon-kv4_icon_4 {
  background: url(../images/svg/kv4_icon_4.svg) no-repeat center/contain;
}

:root {
  --header-height: 7.625rem;
  --logo-width: 18.75rem;
}

.mobile {
  --header-height: 55px;
  --logo-width: 220px;
}

html {
  font-family: "Poppins", "微軟正黑體", "微软雅黑", sans-serif;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 12px;
  }
}

body {
  width: 100%;
  min-height: 100vh;
  background: white;
  -webkit-overflow-scrolling: touch;
}
body.no-scroll {
  max-height: 100vh;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

a,
ul,
li {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  list-style: none;
  padding: 0;
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus,
ul:focus,
li:focus {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: inherit;
}

button {
  border: none;
  background-color: transparent;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
button:focus {
  outline: none;
}

h1 {
  font-size: 0;
  display: none;
}

strong {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-weight: normal;
}

img {
  display: block;
}

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  resize: none;
}
input:focus,
textarea:focus {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

select:focus {
  outline: none;
}

main {
  position: relative;
}

input,
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-width: 1px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
  --width: 1400px;
  max-width: calc(var(--width) + 40px);
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}
.container.large {
  --width: 1634px;
}

.loader-mask {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 10;
}
.loader-mask.active {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.loader-logo {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--logo-width) / 2);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: var(--logo-width);
  aspect-ratio: 23/6;
  background: center/contain no-repeat url(../images/YS_LOGO.svg);
  -webkit-animation: show-logo 1s ease-out forwards;
          animation: show-logo 1s ease-out forwards;
}
.active .loader-logo {
  -webkit-animation: move-logo 1s ease-out forwards;
          animation: move-logo 1s ease-out forwards;
}

@-webkit-keyframes show-logo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show-logo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes move-logo {
  to {
    top: 3.875rem;
    left: calc(50% - (1634px + 40px) / 2 + 20px);
  }
}
@keyframes move-logo {
  to {
    top: 3.875rem;
    left: calc(50% - (1634px + 40px) / 2 + 20px);
  }
}
@media screen and (max-width: 1674px) {
  @-webkit-keyframes move-logo {
    to {
      top: 3.875rem;
      left: 20px;
    }
  }
  @keyframes move-logo {
    to {
      top: 3.875rem;
      left: 20px;
    }
  }
}
@media screen and (max-width: 1024px) {
  @-webkit-keyframes move-logo {
    to {
      top: 27px;
      left: 20px;
      width: 150px;
    }
  }
  @keyframes move-logo {
    to {
      top: 27px;
      left: 20px;
      width: 150px;
    }
  }
}
header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
}

.nav-logo {
  width: var(--logo-width);
  position: relative;
  z-index: 2;
  display: block;
  position: absolute;
  top: auto;
  left: 20px;
  bottom: auto;
}
.nav-logo img {
  width: 100%;
}
.nav-logo img.default {
  display: block;
}
.nav-logo img.scroll {
  display: none;
}
.scroll .nav-logo img.default {
  display: none;
}
.scroll .nav-logo img.scroll {
  display: block;
}

.mobile .nav-logo {
  width: 156px;
}

.nav {
  height: var(--header-height);
  background-color: transparent;
}
.nav .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  position: relative;
}
.nav.scroll {
  height: 5rem;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 0px 20px rgba(4, 16, 49, 0.3607843137);
          box-shadow: 0px 0px 20px rgba(4, 16, 49, 0.3607843137);
}
.nav.scroll img {
  width: 80%;
}
.mobile .nav.scroll {
  height: 3.75rem;
}

.nav-menu {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 3.125rem;
  height: 100%;
}
.mobile .nav-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 80px 30px 0;
  gap: 25px;
}
.mobile .nav-menu::after {
  content: "";
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
.mobile .nav-menu.active {
  left: 0;
}

.nav-menu-item {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  color: rgba(255, 255, 255, 0.8980392157);
  padding: 0 0.3125rem;
}
.nav-menu-item:hover {
  color: #67ddff;
}
.scroll .nav-menu-item {
  color: #4D4D4D;
}
.scroll .nav-menu-item.active, .scroll .nav-menu-item:hover {
  color: #058FBF;
}

.mobile .nav-menu-item {
  font-size: 20px;
  line-height: 31px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #343434;
}

.burger-btn {
  height: 100%;
  z-index: 10;
  --color: #fff;
  position: relative;
}
.scroll .burger-btn {
  --color: #1F51B2;
}

.burger-btn.close {
  --color: #343434;
}
.burger-btn.close .burger span {
  opacity: 0;
}
.burger-btn.close .burger::before {
  width: 26px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 4px;
          transform-origin: 4px;
}
.burger-btn.close .burger::after {
  width: 26px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 2px;
          transform-origin: 2px;
}

.burger {
  width: 20px;
  height: 16px;
  display: block;
  position: relative;
}
.burger span {
  background-color: var(--color);
  width: 20px;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
.burger::before, .burger::after {
  content: "";
  display: inline-block;
  background-color: var(--color);
  width: 20px;
  height: 2px;
}
.burger::before {
  position: absolute;
  top: 0;
  left: 0;
}
.burger::after {
  position: absolute;
  left: 0;
  bottom: 0;
}

footer {
  background: #959EAA;
  width: 100%;
  height: 4.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.copy-right {
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  font-weight: normal;
  color: #FFFFFF;
  padding: 0 20px;
}
.mobile .copy-right {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: normal;
}

.heading {
  font-size: 4.6875rem;
  line-height: 6.25rem;
  font-weight: bold;
  color: #1F51B2;
  letter-spacing: 1.40625rem;
  height: 6.25rem;
  overflow: hidden;
  position: relative;
}
.heading strong {
  display: block;
  -webkit-animation: heading 1s ease-in-out forwards;
          animation: heading 1s ease-in-out forwards;
  font-weight: inherit;
}
.mobile .heading {
  text-align: center;
  font-size: 3.125rem;
  letter-spacing: 1rem;
}

[data-aos=heading-up] {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
[data-aos=heading-up].aos-animate {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.text {
  font-size: 1.125rem;
  line-height: 2rem;
  font-weight: normal;
  color: #545454;
  letter-spacing: 0.1125rem;
}
.text.small {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: normal;
  letter-spacing: initial;
}

.txt-right {
  text-align: right;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.white {
  color: #fff;
}

.kv {
  background: -webkit-gradient(linear, left top, right top, from(#8221ff), color-stop(40%, #6912f3), to(#250b85));
  background: linear-gradient(90deg, #8221ff 0%, #6912f3 40%, #250b85 100%);
  padding: 20.625rem 0 31.25rem;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}
.kv > * {
  z-index: 1;
}
.kv .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 0;
  min-height: 100%;
  min-width: 100%;
}
.kv .text {
  max-width: 43.75rem;
  width: 46%;
  font-size: 1.125rem;
  line-height: 2rem;
  font-weight: normal;
}
.mobile .kv {
  text-align: center;
  padding: 15rem 0 18.75rem;
  height: 86vh;
}
.mobile .kv .text {
  width: 100%;
}

.kv-heading {
  font-family: "Avenir";
  font-size: 6.875rem;
  line-height: 8.75rem;
  font-weight: bold;
  color: #67DDFF;
  text-shadow: 0px 15px 50px #581890;
  white-space: nowrap;
}
.mobile .kv-heading {
  font-size: 5rem;
}

.kv-deco {
  display: block;
  aspect-ratio: 1/1;
  position: absolute;
}
.kv-deco.icon-kv1_icon_1 {
  width: 5.25rem;
  top: 15%;
  left: 50%;
  -webkit-animation: deco-rotate 20s infinite linear;
          animation: deco-rotate 20s infinite linear;
}
.kv-deco.icon-kv1_icon_2 {
  width: 3.5625rem;
  top: 15%;
  left: 10%;
  -webkit-animation: deco-rounding 20s infinite linear;
          animation: deco-rounding 20s infinite linear;
}
.kv-deco.icon-kv1_icon_3 {
  width: 6.0625rem;
  top: 60%;
  left: 8%;
  -webkit-animation: deco-rotate 20s infinite linear;
          animation: deco-rotate 20s infinite linear;
}
.kv-deco.icon-kv1_icon_4 {
  width: 4rem;
  top: 76%;
  left: 20%;
  -webkit-animation: deco-rounding 20s infinite linear;
          animation: deco-rounding 20s infinite linear;
}
.kv-deco.circle {
  width: 5.1875rem;
  top: 65%;
  left: 40%;
  border-radius: 50%;
  border: solid 1px #fff;
  -webkit-animation: deco-flip 10s infinite linear;
          animation: deco-flip 10s infinite linear;
}
.mobile .kv-deco.icon-kv1_icon_2 {
  top: 10%;
  left: 5%;
}

@-webkit-keyframes deco-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes deco-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes deco-flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes deco-flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes deco-rounding {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes deco-rounding {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}
.intro-sec {
  margin-bottom: -11.25rem;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1607843137);
          box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1607843137);
  border-radius: 15px;
  min-height: 21.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 3.125rem 1.25rem;
  -webkit-transform: translateY(-11.25rem);
          transform: translateY(-11.25rem);
}
.mobile .intro-sec {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
  -webkit-transform: translateY(-8.25rem);
          transform: translateY(-8.25rem);
}

.intro-card {
  padding: 0 2%;
  position: relative;
}
.intro-card .icon {
  width: 5rem;
  aspect-ratio: 1/1;
  text-align: center;
  display: block;
  margin-bottom: 1.875rem;
}
.intro-card .title {
  color: #703DC3;
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: bold;
  margin-bottom: 0.625rem;
}
.intro-card:not(:nth-child(1))::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 1px;
  height: 80%;
  background: #d8d8d8;
}
.mobile .intro-card:not(:nth-child(1)) {
  padding-top: 20px;
  border-top: solid 1px #d8d8d8;
}
.mobile .intro-card:not(:nth-child(1))::after {
  display: none;
}
.mobile .intro-card:not(:nth-child(1)) .icon {
  margin: 12px 0 0 8px;
}

.mobile .intro-card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 3fr;
  grid-template-columns: 1fr 3fr;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}
.mobile .intro-card .icon {
  -ms-grid-row-span: 2;
  grid-row: 2 span;
}

.about-sec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5%;
  padding: 6.25rem 0 12.5rem;
}
.about-sec .content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.about-sec .img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 42.5rem;
}
.about-sec .img img {
  max-width: 100%;
}
.about-sec .heading {
  margin-bottom: 1.25rem;
}
.about-sec .text {
  max-width: 37.125rem;
}
.mobile .about-sec {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
  padding: 100px 0 64px;
}
.mobile .about-sec .img {
  margin-top: 20px;
  max-width: 80%;
}

.deco-heading {
  font-family: "AgencyFB";
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: bold;
  letter-spacing: 0.375rem;
  color: #5C5C5C;
  text-transform: uppercase;
  position: relative;
}
.deco-heading .img {
  width: 6.25rem;
  display: block;
  position: absolute;
  right: calc(100% + 10px);
  bottom: 0;
}
.mobile .deco-heading {
  text-align: center;
}
.mobile .deco-heading .img {
  width: 5rem;
  right: auto;
  left: 0;
}

.service-sec {
  width: 100%;
  position: relative;
  background: #FFFFFF;
  padding: 6.875rem 0 8.75rem;
}
.service-sec > * {
  z-index: 1;
}
.service-sec .heading {
  margin-bottom: 2.1875rem;
}
.service-sec .text.sub {
  margin-bottom: 5rem;
}
.service-sec::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/kv4.webp) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}
.mobile .service-sec {
  padding: 6.875rem 0 5rem;
}
.mobile .service-sec .heading {
  overflow: visible;
  line-height: 48px;
  margin-bottom: 3.1875rem;
}

.service-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 2%;
}
.service-group > div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mobile .service-group {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

.service-card {
  background: #fff;
  -webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1019607843);
          box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1019607843);
  border-radius: 15px;
  padding: 1.5625rem 1.5625rem 3.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  height: 100%;
}
.service-card .title {
  font-size: 1.5rem;
  line-height: 2.1875rem;
  font-weight: bold;
  letter-spacing: 1.2px;
  color: #432fe3;
  text-align: center;
  margin-bottom: 0.9375rem;
}
.service-card .icon {
  width: 6.5625rem;
  aspect-ratio: 1/1;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  margin-bottom: 1.875rem;
}
.service-card .content {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: normal;
  letter-spacing: 0px;
  color: #545454;
}
@media (hover: hover) {
  .service-card:hover {
    background: #FF9031;
  }
  .service-card:hover .title,
.service-card:hover .content {
    color: #fff;
  }
}
.mobile .service-card {
  padding: 20px 35px 45px;
  height: 318px;
}
.mobile .service-card .icon {
  margin-bottom: 30px;
}
.mobile .service-card .content {
  font-size: 1.125rem;
  line-height: 1.875rem;
  font-weight: normal;
}

.animate-icon {
  display: inline-block;
  width: 100%;
  max-height: 11.25rem;
  margin-bottom: 30px;
  aspect-ratio: 1/1;
}
.mobile .animate-icon {
  margin-bottom: 10px;
}

.hiring-sec {
  background: #FFFFFF;
  padding: 6.875rem 0 8.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
}
.hiring-sec .heading {
  margin-bottom: 0.9375rem;
}
.hiring-sec .content {
  width: 43%;
  padding-left: 15%;
  z-index: 1;
}
.mobile .hiring-sec {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
  padding-bottom: 40px;
}
.mobile .hiring-sec .content {
  width: 100%;
  padding: 0 30px;
}

.hiring-img {
  width: 50%;
  position: relative;
  z-index: 1;
}
.hiring-img span {
  display: block;
}
.hiring-img img {
  width: 100%;
  position: relative;
  display: block;
}
.hiring-img .img-0 {
  position: relative;
  z-index: 1;
}
.hiring-img .img-0::before {
  content: "";
  display: block;
  -webkit-transform: translate(-10%, 50%);
          transform: translate(-10%, 50%);
  width: 12.5rem;
  height: 2rem;
  background: #6A15E1;
}
.hiring-img .img-1 {
  width: 100%;
  -webkit-transform: translateY(1.25rem);
          transform: translateY(1.25rem);
  margin-top: -1.25rem;
  position: relative;
}
.hiring-img .img-2 {
  width: 60%;
  margin: 0 10% 0 auto;
  z-index: 1;
  position: relative;
}
.hiring-img .img-3 {
  position: relative;
  width: 8%;
  position: absolute;
  right: 0;
  bottom: 2%;
}
.mobile .hiring-img {
  width: 80%;
}
.mobile .hiring-img .img-0::before {
  content: "";
  display: block;
  -webkit-transform: translate(-10%, 5%);
          transform: translate(-10%, 5%);
  width: 12.5rem;
  height: 1.25rem;
  background: #6A15E1;
}

[class^=hiring-deco-img-] {
  z-index: 0;
  display: block;
  width: 25%;
  aspect-ratio: 975/350;
  position: absolute;
  background: url(../images/kv5_bg.webp) no-repeat center/cover;
}

.hiring-deco-img-1 {
  top: 0;
  left: 0;
  -webkit-transform: rotate(180deg) translateX(35%);
          transform: rotate(180deg) translateX(35%);
}

.hiring-deco-img-2 {
  bottom: 0;
  left: 35%;
}

.hiring-deco-img-3 {
  top: 0;
  right: 0;
  -webkit-transform: rotate(-90deg) translateX(35%);
          transform: rotate(-90deg) translateX(35%);
  -webkit-transform-origin: right;
          transform-origin: right;
}

.hiring-deco-col {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3%;
  height: 65%;
  background: url(../images/kv5_line.webp) top/contain;
}

.hiring-deco-text {
  font-family: "AgencyFB";
  position: absolute;
  top: 50%;
  left: 10%;
  font-size: 18.125rem;
  line-height: 18.125rem;
  font-weight: bold;
  letter-spacing: 0px;
  color: #555555;
  opacity: 0.05;
}

.contact-sec {
  min-height: 38vw;
  background: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3.125rem 16%;
  background: url(../images/kv6.webp) no-repeat right/cover;
}
.contact-sec .heading {
  margin-bottom: 2.5rem;
}
.contact-sec .content {
  max-width: roRem(530);
}
.mobile .contact-sec {
  padding: 5rem 15%;
  background: url(../images/kv6.webp) no-repeat right/cover;
}

.contact-item {
  font-size: 1.125rem;
  line-height: 1.875rem;
  font-weight: 600;
  color: #555555;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.5625rem;
  gap: 0.9375rem;
}

.contact-icon {
  height: 3.375rem;
  aspect-ratio: 1/1;
}
.contact-icon.address {
  background: url(../images/kv6_address.webp) no-repeat center/contain;
}
.contact-icon.mail {
  background: url(../images/kv6_mail.webp) no-repeat center/contain;
}
.contact-icon.phone {
  background: url(../images/kv6_phone.webp) no-repeat center/contain;
}

.cubes {
  width: 12vmin;
  height: 12vmin;
  -webkit-transform: rotateX(60deg) rotateZ(-45deg);
          transform: rotateX(60deg) rotateZ(-45deg);
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  overflow: visible;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 9000px;
          perspective: 9000px;
  position: absolute;
  top: 40%;
  right: 25%;
}

.cube,
.large-shadow {
  height: 10vmin;
  width: 10vmin;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: center center -0.5vmin;
          transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}
.cube > .cube-wrap,
.large-shadow > .cube-wrap {
  -webkit-animation: cube 8s infinite both;
          animation: cube 8s infinite both;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: center center -0.5vmin;
          transform-origin: center center -0.5vmin;
  will-change: transform;
}
@-webkit-keyframes cube {
  from, to, 20%, 60% {
    -webkit-animation-timing-function: step-start;
            animation-timing-function: step-start;
    -webkit-transform: none;
            transform: none;
  }
  40% {
    -webkit-transform: rotateY(-1turn);
            transform: rotateY(-1turn);
  }
}
@keyframes cube {
  from, to, 20%, 60% {
    -webkit-animation-timing-function: step-start;
            animation-timing-function: step-start;
    -webkit-transform: none;
            transform: none;
  }
  40% {
    -webkit-transform: rotateY(-1turn);
            transform: rotateY(-1turn);
  }
}
.cube[data-cube^="1"],
.large-shadow[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bg-top: #A0EBE8;
  --color-bg-bottom: #89E4E4;
  --color-fl-top: #4EAFBC;
  --color-fl-bottom: #43A5B2;
}
.cube[data-cube^="2"],
.large-shadow[data-cube^="2"] {
  --color-bg-top: #89E4E4;
  --color-bg-bottom: #76DEE5;
  --color-fl-top: #43A5B2;
  --color-fl-bottom: #3D93A9;
}
.cube[data-cube^="3"],
.large-shadow[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bg-top: #76DEE5;
  --color-bg-bottom: #63D3D4;
  --color-fl-top: #3D93A9;
  --color-fl-bottom: #3B8D9F;
}
.cube[data-cube^="11"], .cube[data-cube^="21"], .cube[data-cube^="31"],
.large-shadow[data-cube^="11"],
.large-shadow[data-cube^="21"],
.large-shadow[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-fr-top: #2D505F;
  --color-fr-bottom: #2D4F63;
}
.cube[data-cube^="12"], .cube[data-cube^="22"], .cube[data-cube^="32"],
.large-shadow[data-cube^="12"],
.large-shadow[data-cube^="22"],
.large-shadow[data-cube^="32"] {
  --color-fr-top: #2D4F63;
  --color-fr-bottom: #2A5262;
}
.cube[data-cube^="13"], .cube[data-cube^="23"], .cube[data-cube^="33"],
.large-shadow[data-cube^="13"],
.large-shadow[data-cube^="23"],
.large-shadow[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-fr-top: #2A5262;
  --color-fr-bottom: #2A5467;
}
.cube[data-cube$="2"],
.large-shadow[data-cube$="2"] {
  -webkit-transform: translateZ(calc(10vmin + 2px));
          transform: translateZ(calc(10vmin + 2px));
}
.cube[data-cube$="3"],
.large-shadow[data-cube$="3"] {
  -webkit-transform: translateZ(calc(-10vmin - 2px));
          transform: translateZ(calc(-10vmin - 2px));
}

.large-shadows {
  -webkit-transform: translateZ(-21vmin);
          transform: translateZ(-21vmin);
}

.large-shadow {
  background: black;
  height: 10vmin;
  width: 10vmin;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-animation: large-shadow 8s infinite both;
          animation: large-shadow 8s infinite both;
  -webkit-filter: var(--shadow-filter, blur(3vmin));
          filter: var(--shadow-filter, blur(3vmin));
  opacity: 0.2;
  will-change: transform;
}
@-webkit-keyframes large-shadow {
  from, 80%, to {
    -webkit-transform: scale(1.5, 3);
            transform: scale(1.5, 3);
  }
  20% {
    -webkit-transform: scale(1.5, 2);
            transform: scale(1.5, 2);
  }
  40%, 60% {
    -webkit-transform: scale(1.5, 5);
            transform: scale(1.5, 5);
  }
  50% {
    -webkit-transform: scale(1, 5);
            transform: scale(1, 5);
  }
}
@keyframes large-shadow {
  from, 80%, to {
    -webkit-transform: scale(1.5, 3);
            transform: scale(1.5, 3);
  }
  20% {
    -webkit-transform: scale(1.5, 2);
            transform: scale(1.5, 2);
  }
  40%, 60% {
    -webkit-transform: scale(1.5, 5);
            transform: scale(1.5, 5);
  }
  50% {
    -webkit-transform: scale(1, 5);
            transform: scale(1, 5);
  }
}

[class^=cube-] {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  top: 0;
  left: 0;
}
[class^=cube-], [class^=cube-]:before {
  will-change: transform;
  -webkit-animation: any 8s infinite both;
          animation: any 8s infinite both;
}
[class^=cube-]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube-top {
  -webkit-animation-name: cube-top;
          animation-name: cube-top;
  overflow: hidden;
}
.cube-top:before, .cube-top:after {
  will-change: transform;
}
.cube-top:before {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#CBFEFF), to(transparent)), -webkit-gradient(linear, left top, left bottom, from(var(--color-bg-top)), to(var(--color-bg-bottom)));
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}
.cube-top:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DFF4F0;
  -webkit-animation: cube-top-flash 8s infinite both;
          animation: cube-top-flash 8s infinite both;
}
@-webkit-keyframes cube-top-flash {
  from, 50%, 60%, to {
    opacity: 0;
  }
  52% {
    opacity: 0.9;
  }
}
@keyframes cube-top-flash {
  from, 50%, 60%, to {
    opacity: 0;
  }
  52% {
    opacity: 0.9;
  }
}
@-webkit-keyframes cube-top {
  20% {
    -webkit-transform: translateZ(-8vmin);
            transform: translateZ(-8vmin);
  }
  40%, 60%, 80% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes cube-top {
  20% {
    -webkit-transform: translateZ(-8vmin);
            transform: translateZ(-8vmin);
  }
  40%, 60%, 80% {
    -webkit-transform: none;
            transform: none;
  }
}

.cube-front-left {
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  overflow: hidden;
}
.cube-front-left:before {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-fl-top)), to(var(--color-fl-bottom))), -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), color-stop(60%, transparent));
  background-image: linear-gradient(to bottom, var(--color-fl-top), var(--color-fl-bottom)), linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: auto auto 1px 100%;
  background-repeat: no-repeat;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-animation-name: cube-front-left;
          animation-name: cube-front-left;
  will-change: transform;
}
@-webkit-keyframes cube-front-left {
  20% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
  }
  40%, 60% {
    -webkit-transform: translateX(-8vmin) scaleX(0.2);
            transform: translateX(-8vmin) scaleX(0.2);
  }
  80% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes cube-front-left {
  20% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
  }
  40%, 60% {
    -webkit-transform: translateX(-8vmin) scaleX(0.2);
            transform: translateX(-8vmin) scaleX(0.2);
  }
  80% {
    -webkit-transform: none;
            transform: none;
  }
}

.cube-front-right {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.cube-front-right:before {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--color-fr-top)), to(var(--color-fr-bottom)));
  background-image: linear-gradient(to right, var(--color-fr-top), var(--color-fr-bottom));
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-animation-name: cube-front-right;
          animation-name: cube-front-right;
  will-change: transform;
}
@-webkit-keyframes cube-front-right {
  20% {
    -webkit-transform: scaleY(0.2);
            transform: scaleY(0.2);
  }
  40%, 60% {
    -webkit-transform: translateY(8vmin) scaleY(0.2);
            transform: translateY(8vmin) scaleY(0.2);
  }
  80% {
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes cube-front-right {
  20% {
    -webkit-transform: scaleY(0.2);
            transform: scaleY(0.2);
  }
  40%, 60% {
    -webkit-transform: translateY(8vmin) scaleY(0.2);
            transform: translateY(8vmin) scaleY(0.2);
  }
  80% {
    -webkit-transform: none;
            transform: none;
  }
}

.cube-bottom {
  -webkit-transform: translateZ(-10vmin);
          transform: translateZ(-10vmin);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-bg-top)), to(var(--color-bg-bottom)));
  background-image: linear-gradient(to bottom, var(--color-bg-top), var(--color-bg-bottom));
  -webkit-animation-name: cube-bottom;
          animation-name: cube-bottom;
}
@-webkit-keyframes cube-bottom {
  from, 20%, 80%, to {
    -webkit-transform: translateZ(calc(-10vmin + 1px)) scale(0.95);
            transform: translateZ(calc(-10vmin + 1px)) scale(0.95);
  }
  40%, 60% {
    -webkit-transform: translateZ(-2vmin) scale(0.95);
            transform: translateZ(-2vmin) scale(0.95);
  }
}
@keyframes cube-bottom {
  from, 20%, 80%, to {
    -webkit-transform: translateZ(calc(-10vmin + 1px)) scale(0.95);
            transform: translateZ(calc(-10vmin + 1px)) scale(0.95);
  }
  40%, 60% {
    -webkit-transform: translateZ(-2vmin) scale(0.95);
            transform: translateZ(-2vmin) scale(0.95);
  }
}
.cube-bottom:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DFF4F0;
  -webkit-animation: cube-bottom-flash 8s infinite both;
          animation: cube-bottom-flash 8s infinite both;
  will-change: transform;
}
@-webkit-keyframes cube-bottom-flash {
  from, 40%, 50%, to {
    opacity: 0;
  }
  45% {
    opacity: 0.9;
  }
}
@keyframes cube-bottom-flash {
  from, 40%, 50%, to {
    opacity: 0;
  }
  45% {
    opacity: 0.9;
  }
}

[class^=shadow] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-filter: var(--shadow-filter, blur(20px));
          filter: var(--shadow-filter, blur(20px));
}
[class^=shadow], [class^=shadow]:before {
  will-change: transform;
}
[class^=shadow]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #214354;
  opacity: 0.7;
}

.shadow-y {
  -webkit-animation: shadow-y 8s infinite both;
          animation: shadow-y 8s infinite both;
}
.shadow-y[data-cube^="11"], .shadow-y[data-cube^="21"] {
  left: 10%;
}
.shadow-y[data-cube^="13"], .shadow-y[data-cube^="23"] {
  left: -10%;
}
@-webkit-keyframes shadow-y {
  to, 40%, 60%, 80%, from {
    -webkit-transform: translateY(-100%) scale(2, 0.75);
            transform: translateY(-100%) scale(2, 0.75);
  }
  20% {
    -webkit-transform: scale(2, 1);
            transform: scale(2, 1);
  }
}
@keyframes shadow-y {
  to, 40%, 60%, 80%, from {
    -webkit-transform: translateY(-100%) scale(2, 0.75);
            transform: translateY(-100%) scale(2, 0.75);
  }
  20% {
    -webkit-transform: scale(2, 1);
            transform: scale(2, 1);
  }
}
.shadow-y:before {
  -webkit-animation: shadow-y-inverse 8s infinite both;
          animation: shadow-y-inverse 8s infinite both;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
@-webkit-keyframes shadow-y-inverse {
  to, 40%, 60%, 80%, from {
    opacity: 0.9;
    -webkit-transform: scale(2, 1);
            transform: scale(2, 1);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%) scale(2, 0.75);
            transform: translateY(-100%) scale(2, 0.75);
  }
}
@keyframes shadow-y-inverse {
  to, 40%, 60%, 80%, from {
    opacity: 0.9;
    -webkit-transform: scale(2, 1);
            transform: scale(2, 1);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%) scale(2, 0.75);
            transform: translateY(-100%) scale(2, 0.75);
  }
}

.shadow-flip {
  width: 2vmin;
  height: 50%;
  top: -1vmin;
  left: calc(50% - 1vmin);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-filter: var(--shadow-filter, blur(1vmin));
          filter: var(--shadow-filter, blur(1vmin));
  -webkit-animation: shadow-flip 8s infinite both;
          animation: shadow-flip 8s infinite both;
  overflow: visible;
}
@-webkit-keyframes shadow-flip {
  from, 20%, 40%, 50%, to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  45% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
@keyframes shadow-flip {
  from, 20%, 40%, 50%, to {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  45% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
.shadow-flip:before {
  -webkit-animation: shadow-flip-inverse 8s infinite both;
          animation: shadow-flip-inverse 8s infinite both;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  opacity: 0;
}
@-webkit-keyframes shadow-flip-inverse {
  from, 20%, 40%, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 0;
  }
  45% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0.6;
  }
}
@keyframes shadow-flip-inverse {
  from, 20%, 40%, 50%, to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 0;
  }
  45% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0.6;
  }
}

.shadow-z {
  -webkit-animation: shadow-z 8s infinite both;
          animation: shadow-z 8s infinite both;
  overflow: visible;
  will-change: transform;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.shadow-z[data-cube^="11"] {
  --shadow-z-left: 50%;
  --shadow-z-top: 50%;
}
.shadow-z[data-cube^="21"], .shadow-z[data-cube^="31"] {
  --shadow-z-left: 50%;
  --shadow-z-top: 0;
}
.shadow-z[data-cube^="32"] {
  --shadow-z-left: 0;
  --shadow-z-top: 0;
  --shadow-x-scale: 2;
}
.shadow-z[data-cube^="33"] {
  --shadow-z-left: -50%;
  --shadow-z-top: 0;
}
@-webkit-keyframes shadow-z {
  from, 40%, 60%, 80%, to {
    -webkit-transform: scale(var(--shadow-x-scale), 2);
            transform: scale(var(--shadow-x-scale), 2);
  }
  20% {
    -webkit-transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2);
            transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2);
  }
}
@keyframes shadow-z {
  from, 40%, 60%, 80%, to {
    -webkit-transform: scale(var(--shadow-x-scale), 2);
            transform: scale(var(--shadow-x-scale), 2);
  }
  20% {
    -webkit-transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2);
            transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2);
  }
}
.shadow-z:before {
  -webkit-animation: shadow-z-inverse 8s infinite both;
          animation: shadow-z-inverse 8s infinite both;
}
@-webkit-keyframes shadow-z-inverse {
  40%, 60% {
    -webkit-transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2);
            transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2);
  }
  45% {
    opacity: 0;
  }
  from, 40%, 55% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
  from, 20%, 80%, to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}
@keyframes shadow-z-inverse {
  40%, 60% {
    -webkit-transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2);
            transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2);
  }
  45% {
    opacity: 0;
  }
  from, 40%, 55% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
  from, 20%, 80%, to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

.cube[data-cube="111"] > .cube-wrap, .cube[data-cube="111"] > .cube-wrap:before, .cube[data-cube="111"] > .cube-wrap:after,
.cube[data-cube="111"] > .cube-wrap > [class^=cube-],
.cube[data-cube="111"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="111"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 258ms;
          animation-delay: 258ms;
}
.cube[data-cube="111"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 258ms;
          animation-delay: 258ms;
}

[class^=shadow-][data-cube="111"]:before,
.large-shadow[data-cube="111"] {
  -webkit-animation-delay: 258ms;
          animation-delay: 258ms;
}

.cube[data-cube="112"] > .cube-wrap, .cube[data-cube="112"] > .cube-wrap:before, .cube[data-cube="112"] > .cube-wrap:after,
.cube[data-cube="112"] > .cube-wrap > [class^=cube-],
.cube[data-cube="112"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="112"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 62ms;
          animation-delay: 62ms;
}
.cube[data-cube="112"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 62ms;
          animation-delay: 62ms;
}

[class^=shadow-][data-cube="112"]:before,
.large-shadow[data-cube="112"] {
  -webkit-animation-delay: 62ms;
          animation-delay: 62ms;
}

.cube[data-cube="113"] > .cube-wrap, .cube[data-cube="113"] > .cube-wrap:before, .cube[data-cube="113"] > .cube-wrap:after,
.cube[data-cube="113"] > .cube-wrap > [class^=cube-],
.cube[data-cube="113"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="113"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 274ms;
          animation-delay: 274ms;
}
.cube[data-cube="113"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 274ms;
          animation-delay: 274ms;
}

[class^=shadow-][data-cube="113"]:before,
.large-shadow[data-cube="113"] {
  -webkit-animation-delay: 274ms;
          animation-delay: 274ms;
}

.cube[data-cube="121"] > .cube-wrap, .cube[data-cube="121"] > .cube-wrap:before, .cube[data-cube="121"] > .cube-wrap:after,
.cube[data-cube="121"] > .cube-wrap > [class^=cube-],
.cube[data-cube="121"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="121"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 68ms;
          animation-delay: 68ms;
}
.cube[data-cube="121"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 68ms;
          animation-delay: 68ms;
}

[class^=shadow-][data-cube="121"]:before,
.large-shadow[data-cube="121"] {
  -webkit-animation-delay: 68ms;
          animation-delay: 68ms;
}

.cube[data-cube="122"] > .cube-wrap, .cube[data-cube="122"] > .cube-wrap:before, .cube[data-cube="122"] > .cube-wrap:after,
.cube[data-cube="122"] > .cube-wrap > [class^=cube-],
.cube[data-cube="122"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="122"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 128ms;
          animation-delay: 128ms;
}
.cube[data-cube="122"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 128ms;
          animation-delay: 128ms;
}

[class^=shadow-][data-cube="122"]:before,
.large-shadow[data-cube="122"] {
  -webkit-animation-delay: 128ms;
          animation-delay: 128ms;
}

.cube[data-cube="123"] > .cube-wrap, .cube[data-cube="123"] > .cube-wrap:before, .cube[data-cube="123"] > .cube-wrap:after,
.cube[data-cube="123"] > .cube-wrap > [class^=cube-],
.cube[data-cube="123"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="123"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 53ms;
          animation-delay: 53ms;
}
.cube[data-cube="123"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 53ms;
          animation-delay: 53ms;
}

[class^=shadow-][data-cube="123"]:before,
.large-shadow[data-cube="123"] {
  -webkit-animation-delay: 53ms;
          animation-delay: 53ms;
}

.cube[data-cube="131"] > .cube-wrap, .cube[data-cube="131"] > .cube-wrap:before, .cube[data-cube="131"] > .cube-wrap:after,
.cube[data-cube="131"] > .cube-wrap > [class^=cube-],
.cube[data-cube="131"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="131"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 211ms;
          animation-delay: 211ms;
}
.cube[data-cube="131"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 211ms;
          animation-delay: 211ms;
}

[class^=shadow-][data-cube="131"]:before,
.large-shadow[data-cube="131"] {
  -webkit-animation-delay: 211ms;
          animation-delay: 211ms;
}

.cube[data-cube="132"] > .cube-wrap, .cube[data-cube="132"] > .cube-wrap:before, .cube[data-cube="132"] > .cube-wrap:after,
.cube[data-cube="132"] > .cube-wrap > [class^=cube-],
.cube[data-cube="132"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="132"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 109ms;
          animation-delay: 109ms;
}
.cube[data-cube="132"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 109ms;
          animation-delay: 109ms;
}

[class^=shadow-][data-cube="132"]:before,
.large-shadow[data-cube="132"] {
  -webkit-animation-delay: 109ms;
          animation-delay: 109ms;
}

.cube[data-cube="133"] > .cube-wrap, .cube[data-cube="133"] > .cube-wrap:before, .cube[data-cube="133"] > .cube-wrap:after,
.cube[data-cube="133"] > .cube-wrap > [class^=cube-],
.cube[data-cube="133"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="133"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 238ms;
          animation-delay: 238ms;
}
.cube[data-cube="133"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 238ms;
          animation-delay: 238ms;
}

[class^=shadow-][data-cube="133"]:before,
.large-shadow[data-cube="133"] {
  -webkit-animation-delay: 238ms;
          animation-delay: 238ms;
}

.cube[data-cube="211"] > .cube-wrap, .cube[data-cube="211"] > .cube-wrap:before, .cube[data-cube="211"] > .cube-wrap:after,
.cube[data-cube="211"] > .cube-wrap > [class^=cube-],
.cube[data-cube="211"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="211"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 260ms;
          animation-delay: 260ms;
}
.cube[data-cube="211"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 260ms;
          animation-delay: 260ms;
}

[class^=shadow-][data-cube="211"]:before,
.large-shadow[data-cube="211"] {
  -webkit-animation-delay: 260ms;
          animation-delay: 260ms;
}

.cube[data-cube="212"] > .cube-wrap, .cube[data-cube="212"] > .cube-wrap:before, .cube[data-cube="212"] > .cube-wrap:after,
.cube[data-cube="212"] > .cube-wrap > [class^=cube-],
.cube[data-cube="212"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="212"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 268ms;
          animation-delay: 268ms;
}
.cube[data-cube="212"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 268ms;
          animation-delay: 268ms;
}

[class^=shadow-][data-cube="212"]:before,
.large-shadow[data-cube="212"] {
  -webkit-animation-delay: 268ms;
          animation-delay: 268ms;
}

.cube[data-cube="213"] > .cube-wrap, .cube[data-cube="213"] > .cube-wrap:before, .cube[data-cube="213"] > .cube-wrap:after,
.cube[data-cube="213"] > .cube-wrap > [class^=cube-],
.cube[data-cube="213"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="213"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 228ms;
          animation-delay: 228ms;
}
.cube[data-cube="213"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 228ms;
          animation-delay: 228ms;
}

[class^=shadow-][data-cube="213"]:before,
.large-shadow[data-cube="213"] {
  -webkit-animation-delay: 228ms;
          animation-delay: 228ms;
}

.cube[data-cube="221"] > .cube-wrap, .cube[data-cube="221"] > .cube-wrap:before, .cube[data-cube="221"] > .cube-wrap:after,
.cube[data-cube="221"] > .cube-wrap > [class^=cube-],
.cube[data-cube="221"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="221"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 156ms;
          animation-delay: 156ms;
}
.cube[data-cube="221"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 156ms;
          animation-delay: 156ms;
}

[class^=shadow-][data-cube="221"]:before,
.large-shadow[data-cube="221"] {
  -webkit-animation-delay: 156ms;
          animation-delay: 156ms;
}

.cube[data-cube="222"] > .cube-wrap, .cube[data-cube="222"] > .cube-wrap:before, .cube[data-cube="222"] > .cube-wrap:after,
.cube[data-cube="222"] > .cube-wrap > [class^=cube-],
.cube[data-cube="222"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="222"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 167ms;
          animation-delay: 167ms;
}
.cube[data-cube="222"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 167ms;
          animation-delay: 167ms;
}

[class^=shadow-][data-cube="222"]:before,
.large-shadow[data-cube="222"] {
  -webkit-animation-delay: 167ms;
          animation-delay: 167ms;
}

.cube[data-cube="223"] > .cube-wrap, .cube[data-cube="223"] > .cube-wrap:before, .cube[data-cube="223"] > .cube-wrap:after,
.cube[data-cube="223"] > .cube-wrap > [class^=cube-],
.cube[data-cube="223"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="223"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 96ms;
          animation-delay: 96ms;
}
.cube[data-cube="223"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 96ms;
          animation-delay: 96ms;
}

[class^=shadow-][data-cube="223"]:before,
.large-shadow[data-cube="223"] {
  -webkit-animation-delay: 96ms;
          animation-delay: 96ms;
}

.cube[data-cube="231"] > .cube-wrap, .cube[data-cube="231"] > .cube-wrap:before, .cube[data-cube="231"] > .cube-wrap:after,
.cube[data-cube="231"] > .cube-wrap > [class^=cube-],
.cube[data-cube="231"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="231"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 102ms;
          animation-delay: 102ms;
}
.cube[data-cube="231"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 102ms;
          animation-delay: 102ms;
}

[class^=shadow-][data-cube="231"]:before,
.large-shadow[data-cube="231"] {
  -webkit-animation-delay: 102ms;
          animation-delay: 102ms;
}

.cube[data-cube="232"] > .cube-wrap, .cube[data-cube="232"] > .cube-wrap:before, .cube[data-cube="232"] > .cube-wrap:after,
.cube[data-cube="232"] > .cube-wrap > [class^=cube-],
.cube[data-cube="232"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="232"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 87ms;
          animation-delay: 87ms;
}
.cube[data-cube="232"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 87ms;
          animation-delay: 87ms;
}

[class^=shadow-][data-cube="232"]:before,
.large-shadow[data-cube="232"] {
  -webkit-animation-delay: 87ms;
          animation-delay: 87ms;
}

.cube[data-cube="233"] > .cube-wrap, .cube[data-cube="233"] > .cube-wrap:before, .cube[data-cube="233"] > .cube-wrap:after,
.cube[data-cube="233"] > .cube-wrap > [class^=cube-],
.cube[data-cube="233"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="233"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 293ms;
          animation-delay: 293ms;
}
.cube[data-cube="233"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 293ms;
          animation-delay: 293ms;
}

[class^=shadow-][data-cube="233"]:before,
.large-shadow[data-cube="233"] {
  -webkit-animation-delay: 293ms;
          animation-delay: 293ms;
}

.cube[data-cube="311"] > .cube-wrap, .cube[data-cube="311"] > .cube-wrap:before, .cube[data-cube="311"] > .cube-wrap:after,
.cube[data-cube="311"] > .cube-wrap > [class^=cube-],
.cube[data-cube="311"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="311"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 210ms;
          animation-delay: 210ms;
}
.cube[data-cube="311"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 210ms;
          animation-delay: 210ms;
}

[class^=shadow-][data-cube="311"]:before,
.large-shadow[data-cube="311"] {
  -webkit-animation-delay: 210ms;
          animation-delay: 210ms;
}

.cube[data-cube="312"] > .cube-wrap, .cube[data-cube="312"] > .cube-wrap:before, .cube[data-cube="312"] > .cube-wrap:after,
.cube[data-cube="312"] > .cube-wrap > [class^=cube-],
.cube[data-cube="312"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="312"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 248ms;
          animation-delay: 248ms;
}
.cube[data-cube="312"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 248ms;
          animation-delay: 248ms;
}

[class^=shadow-][data-cube="312"]:before,
.large-shadow[data-cube="312"] {
  -webkit-animation-delay: 248ms;
          animation-delay: 248ms;
}

.cube[data-cube="313"] > .cube-wrap, .cube[data-cube="313"] > .cube-wrap:before, .cube[data-cube="313"] > .cube-wrap:after,
.cube[data-cube="313"] > .cube-wrap > [class^=cube-],
.cube[data-cube="313"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="313"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 86ms;
          animation-delay: 86ms;
}
.cube[data-cube="313"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 86ms;
          animation-delay: 86ms;
}

[class^=shadow-][data-cube="313"]:before,
.large-shadow[data-cube="313"] {
  -webkit-animation-delay: 86ms;
          animation-delay: 86ms;
}

.cube[data-cube="321"] > .cube-wrap, .cube[data-cube="321"] > .cube-wrap:before, .cube[data-cube="321"] > .cube-wrap:after,
.cube[data-cube="321"] > .cube-wrap > [class^=cube-],
.cube[data-cube="321"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="321"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 288ms;
          animation-delay: 288ms;
}
.cube[data-cube="321"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 288ms;
          animation-delay: 288ms;
}

[class^=shadow-][data-cube="321"]:before,
.large-shadow[data-cube="321"] {
  -webkit-animation-delay: 288ms;
          animation-delay: 288ms;
}

.cube[data-cube="322"] > .cube-wrap, .cube[data-cube="322"] > .cube-wrap:before, .cube[data-cube="322"] > .cube-wrap:after,
.cube[data-cube="322"] > .cube-wrap > [class^=cube-],
.cube[data-cube="322"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="322"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 1ms;
          animation-delay: 1ms;
}
.cube[data-cube="322"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 1ms;
          animation-delay: 1ms;
}

[class^=shadow-][data-cube="322"]:before,
.large-shadow[data-cube="322"] {
  -webkit-animation-delay: 1ms;
          animation-delay: 1ms;
}

.cube[data-cube="323"] > .cube-wrap, .cube[data-cube="323"] > .cube-wrap:before, .cube[data-cube="323"] > .cube-wrap:after,
.cube[data-cube="323"] > .cube-wrap > [class^=cube-],
.cube[data-cube="323"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="323"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 149ms;
          animation-delay: 149ms;
}
.cube[data-cube="323"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 149ms;
          animation-delay: 149ms;
}

[class^=shadow-][data-cube="323"]:before,
.large-shadow[data-cube="323"] {
  -webkit-animation-delay: 149ms;
          animation-delay: 149ms;
}

.cube[data-cube="331"] > .cube-wrap, .cube[data-cube="331"] > .cube-wrap:before, .cube[data-cube="331"] > .cube-wrap:after,
.cube[data-cube="331"] > .cube-wrap > [class^=cube-],
.cube[data-cube="331"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="331"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 139ms;
          animation-delay: 139ms;
}
.cube[data-cube="331"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 139ms;
          animation-delay: 139ms;
}

[class^=shadow-][data-cube="331"]:before,
.large-shadow[data-cube="331"] {
  -webkit-animation-delay: 139ms;
          animation-delay: 139ms;
}

.cube[data-cube="332"] > .cube-wrap, .cube[data-cube="332"] > .cube-wrap:before, .cube[data-cube="332"] > .cube-wrap:after,
.cube[data-cube="332"] > .cube-wrap > [class^=cube-],
.cube[data-cube="332"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="332"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 286ms;
          animation-delay: 286ms;
}
.cube[data-cube="332"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 286ms;
          animation-delay: 286ms;
}

[class^=shadow-][data-cube="332"]:before,
.large-shadow[data-cube="332"] {
  -webkit-animation-delay: 286ms;
          animation-delay: 286ms;
}

.cube[data-cube="333"] > .cube-wrap, .cube[data-cube="333"] > .cube-wrap:before, .cube[data-cube="333"] > .cube-wrap:after,
.cube[data-cube="333"] > .cube-wrap > [class^=cube-],
.cube[data-cube="333"] > .cube-wrap > [class^=cube-]:before,
.cube[data-cube="333"] > .cube-wrap > [class^=cube-]:after {
  -webkit-animation-delay: 297ms;
          animation-delay: 297ms;
}
.cube[data-cube="333"] > .cube-wrap [class^=shadow-] {
  -webkit-animation-delay: 297ms;
          animation-delay: 297ms;
}

[class^=shadow-][data-cube="333"]:before,
.large-shadow[data-cube="333"] {
  -webkit-animation-delay: 297ms;
          animation-delay: 297ms;
}