.cursor-pointer {
  cursor: pointer;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

.popup-content {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.popup-content .popup-close {
  position: absolute;
  top: 7%;
  right: 0%;
  width: 13%;
  padding: 3%;
}

.popup-content .popup-img {
  position: absolute;
  top: 33%;
  left: 50%;
  width: 80%;
  transform: translateX(-50%);
}

.popup-content .popup-btn {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 66%;
  transform: translateX(-50%);
}

.kv-main-area {
  position: relative;
  overflow: hidden;
}

.kv-main-area .kv-title {
  position: absolute;
  width: 90%;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

.kv-main-area .kv-subtitle {
  position: absolute;
  width: 44%;
  top: 19%;
  left: 49.5%;
  transform: translateX(-50%);
  opacity: 0;
}

.kv-main-area .kv-bg-gift {
  position: absolute;
  bottom: 0;
  left: 0;
}

.kv-main-area .cart {
  position: absolute;
  bottom: -33%;
  left: 4%;
  z-index: 99;
  width: 102%;
  animation: cart_move 2.3s ease 1.4s forwards;
}

@keyframes cart_move {
  0% { bottom: -33%; left: 4.5%; }
  100% { bottom: -33%; left: -120%; }
}

.kv-main-area .cart .cart-front {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 150;
}

.kv-main-area .kv1-gift {
  position: absolute;
  width: 40%;
  bottom: 0%;
  right: 0%;
  z-index: 200;
}

.kv-main-area .kv1-prod {
  position: absolute;
  z-index: 100;
}

.kv-main-area .kv1-prod-1 {
  width: 25%;
  top: -75%;
  left: 5%;
  z-index: 107;
  animation: toCart_prod1 1.3s ease-in-out 0s forwards;
}

@keyframes toCart_prod1 {
  0% { top: -75%; left: 5%; }
  100% { top: 10%; left: 15%; }
}

.kv-main-area .kv1-prod-2 {
  width: 21%;
  top: -45%;
  left: 5%;
  z-index: 102;
  animation: toCart_prod2 1.3s ease-in-out 0s forwards;
}

@keyframes toCart_prod2 {
  0% { top: -45%; left: 5%; }
  100% { top: 10%; left: 7%; }
}

.kv-main-area .kv1-prod-3 {
  width: 28%;
  top: -16%;
  left: 47%;
  z-index: 111;
  animation: toCart_prod3 1.1s ease-in-out 0s forwards;
}

@keyframes toCart_prod3 {
  0% { top: -16%; left: 47%; }
  100% { top: 26%; left: 47%; }
}

.kv-main-area .kv1-prod-4 {
  width: 20%;
  top: -31%;
  left: 16%;
  z-index: 111;
  animation: toCart_prod4 1.1s ease-in-out 0s forwards;
}

@keyframes toCart_prod4 {
  0% { top: -31%; left: 16%; }
  100% { top: 8%; left: 16%; }
}

.kv-main-area .kv1-prod-5 {
  width: 24%;
  top: -25%;
  left: 31%;
  z-index: 110;
  animation: toCart_prod5 1.2s ease-in-out 0s forwards;
}

@keyframes toCart_prod5 {
  0% { top: -25%; left: 31%; }
  100% { top: 5%; left: 31%; }
}

.kv-main-area .kv1-prod-6 {
  width: 24%;
  top: -25%;
  left: -1%;
  z-index: 101;
  animation: toCart_prod6 1.1s ease-in-out 0s forwards;
}

@keyframes toCart_prod6 {
  0% { top: -25%; left: -1%; }
  100% { top: 13%; left: 3%; }
}

.kv-main-area .kv1-prod-7 {
  width: 23%;
  top: -78%;
  left: 63%;
  z-index: 112;
  animation: toCart_prod7 1.3s ease-in-out 0s forwards;
}

@keyframes toCart_prod7 {
  0% { top: -78%; left: 63%; }
  100% { top: 8%; left: 45%; }
}

.kv-main-area .kv1-prod-8 {
  width: 34%;
  top: -78%;
  left: 27%;
  z-index: 109;
  animation: toCart_prod8 1.3s ease-in-out 0s forwards;
}

@keyframes toCart_prod8 {
  0% { top: -78%; left: 27%; }
  100% { top: -5%; left: 27%; }
}

.kv-main-area .kv1-prod-9 {
  width: 28%;
  top: -51%;
  left: 54%;
  z-index: 101;
  animation: toCart_prod9 1.2s ease-in-out 0s forwards;
}

@keyframes toCart_prod9 {
  0% { top: -51%; left: 54%; }
  100% { top: -8%; left: 45%; }
}

.kv2 .prod-area {
  opacity: 0;
}

.kv2 .prod-area .prod-item {
  position: absolute;
  width: 35%;
}

.kv2 .prod-area .prod-item .prod-img {
  position: absolute;
  z-index: 200;
}

.kv2 .prod-area .prod-item .prod-cart-front {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 250;
}

.kv2 .prod-area .prod-item .prod-cart-back.cart-left {
  transform: scaleX(-1);
}

.kv2 .prod-area .prod-item .prod-cart-front.cart-left {
  transform: scaleX(-1);
}

.prod-shu {
  top: 30.5%;
  left: 1%;
}

.prod-shu .prod-img {
  width: 52%;
  bottom: -16%;
  left: 21%;
  transform-origin: center right;
  animation: shake-shu 0.6s infinite linear;
}

@keyframes shake-shu {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.prod-pra {
  top: 30.5%;
  left: 35%;
}

.prod-pra .prod-img {
  width: 61%;
  bottom: -14%;
  left: 12%;
  transform-origin: bottom left;
  animation: shake-pra 0.6s infinite linear;
}

@keyframes shake-pra {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.prod-gab {
  top: 30.5%;
  left: 64%;
}

.prod-gab .prod-img {
  width: 50%;
  bottom: -17%;
  left: 19%;
  transform-origin: bottom bottom;
  animation: shake-gab 0.6s infinite linear;
}

@keyframes shake-gab {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.prod-hr {
  top: 59%;
  left: 1%;
}

.prod-hr .prod-img {
  width: 62%;
  bottom: -11%;
  left: 9%;
  transform-origin: top top;
  animation: shake-hr 0.6s infinite linear;
}

@keyframes shake-hr {
  0% { transform: rotate(4deg); }
  25% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(4deg); }
}

.kv2 .prod-area .prod-item.prod-lan {
  width: 29%;
} 

.prod-lan {
  top: 52%;
  left: 35.5%;
}

.prod-lan .prod-img {
  width: 65%;
  bottom: -1%;
  left: 16%;
  transform-origin: right right;
  animation: shake-lan 0.6s infinite linear;
}

@keyframes shake-lan {
  0% { transform: rotate(3deg); }
  25% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(3deg); }
}

.prod-ysl {
  top: 59%;
  left: 64%;
}

.prod-ysl .prod-img {
  width: 64%;
  bottom: -12%;
  left: 12%;
  transform-origin: center center;
  animation: shake-ysl 0.6s infinite linear;
}

@keyframes shake-ysl {
  0% { transform: rotate(4deg); }
  25% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(4deg); }
}

.prod-tak {
  top: 84%;
  left: 1%;
}

.prod-tak .prod-img {
  width: 48%;
  bottom: -7%;
  left: 25%;
  transform-origin: bottom right;
  animation: shake-tak 0.7s infinite linear;
}

@keyframes shake-tak {
  0% { transform: rotate(4deg); }
  25% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(4deg); }
}

.prod-bio {
  top: 84%;
  left: 31%;
}

.prod-bio .prod-img {
  width: 44%;
  bottom: -8%;
  left: 29%;
  transform-origin: bottom center;
  animation: shake-bio 0.7s infinite linear;
}

@keyframes shake-bio {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.prod-kie {
  top: 84%;
  left: 64%;
}

.prod-kie .prod-img {
  width: 41%;
  bottom: -9%;
  left: 19%;
  transform-origin: bottom center;
  animation: shake-kie 0.8s infinite linear;
}

@keyframes shake-kie {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}