/* screen - index */

.main-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #727272;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.frame-1213 {
  background-color: transparent;
  min-height: 700px;
  min-width: 390px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  transform-origin: top left;
}

.frame-1213 .bg {
  display: none;
}

.frame-1213 .frame-1198 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  left: 12px;
  position: absolute;
  top: 14px;
  width: 366px;
}

.frame-1213 .frame-10-1 {
  height: 52px;
  position: relative;
  width: 249.33px;
}

.frame-1213 .may88-1 {
  background-image: url(../img/image-13-2@2x.webp);
  background-size: 100% 100%;
  height: 36px;
  left: calc(50.00% - 125px);
  position: absolute;
  top: 7px;
  width: 176px;
}

.frame-1213 .image-2-1 {
  aspect-ratio: 1;
  height: 52px;
  left: calc(50.00% + 73px);
  position: absolute;
  top: 0;
  width: 52px;
}

.frame-1213 .line-1-1 {
  height: 31px;
  left: 189px;
  position: absolute;
  top: 13px;
  width: 1px;
}

.frame-1213 .sn-ma-tri-nhn-giftcode-1 {
  margin-left: -2.00px;
  object-fit: contain;
  position: relative;
  width: 275px;
}

.frame-1213 .ghost_lose-1-1 {
  aspect-ratio: 0.58;
  height: 539px;
  position: relative;
  width: 316px;
}

.frame-1213 .x2-161-1 {
  aspect-ratio: 1.46;
  height: 402px;
  left: 0;
  mix-blend-mode: lighten;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 324px;
}

.frame-1213 .x2-159-1 {
  aspect-ratio: 1.46;
  height: 700px;
  left: 0;
  mix-blend-mode: lighten;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 390px;
}

.frame-1213 .x2-162-1 {
  aspect-ratio: 1.46;
  height: 469px;
  left: 0;
  mix-blend-mode: color-dodge;
  object-fit: cover;
  position: absolute;
  top: 149px;
  width: 371px;
}

.bolt-layer {
  opacity: 0;
}

.bolt-layer.is-strike {
  -webkit-animation: bolt-hit 0.3s ease-out forwards;
  animation: bolt-hit 0.3s ease-out forwards;
}

@-webkit-keyframes bolt-hit {
  0% { opacity: 0; }
  8% { opacity: 1; }
  22% { opacity: 0.2; }
  38% { opacity: 1; }
  55% { opacity: 0.35; }
  72% { opacity: 1; }
  100% { opacity: 0.85; }
}

@keyframes bolt-hit {
  0% { opacity: 0; }
  8% { opacity: 1; }
  22% { opacity: 0.2; }
  38% { opacity: 1; }
  55% { opacity: 0.35; }
  72% { opacity: 1; }
  100% { opacity: 0.85; }
}
/* screen - index */

.index {
  background-color: transparent;
  min-height: 1080px;
  min-width: 1920px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  transform-origin: top left;
}

.index .image-13 {
  display: none;
}

.index .frame-10 {
  height: 78px;
  left: calc(50.00% - 187px);
  position: absolute;
  top: 50px;
  width: 374px;
}

.index .may88 {
  background-image: url(../img/image-13-1@2x.webp);
  background-size: 100% 100%;
  height: 54px;
  left: calc(50.00% - 187px);
  position: absolute;
  top: 11px;
  width: 265px;
}

.index .image-2 {
  aspect-ratio: 1;
  height: 78px;
  left: calc(50.00% + 109px);
  width: 78px;
}

.index .line-1 {
  height: 46px;
  left: 283px;
  object-fit: cover;
  position: absolute;
  top: 20px;
  width: 1px;
}

.index .sn-ma-tri-nhn-giftcode {
  height: 143px;
  left: calc(50.00% - 480px);
  object-fit: contain;
  position: absolute;
  top: 122px;
  width: 960px;
}

.index .ghost_lose-1 {
  aspect-ratio: 0.56;
  height: 683px;
  left: calc(50.00% - 235px);
  object-fit: cover;
  position: absolute;
  top: 217px;
  width: 399px;
}

.index .group-5 {
  height: 1449px;
  left: 484px;
  position: absolute;
  top: -275px;
  width: 1133px;
}

.index .x2-161 {
  height: 647px;
  left: 0;
  mix-blend-mode: lighten;
  top: 275px;
  width: 815px;
}

.index .x2-159 {
  height: 1080px;
  left: 58px;
  mix-blend-mode: lighten;
  top: 275px;
  width: 1290px;
}

.index .x2-162 {
  height: 949px;
  left: 116px;
  mix-blend-mode: color-dodge;
  top: 384px;
  width: 772px;
}

.index .image {
  position: absolute;
  top: 0;
}

.index .x2 {
  aspect-ratio: 1.46;
  object-fit: cover;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .main-container {
    background-image: url(../img/bg.webp);
  }
  .screen.index { 
    display: none;
   }
  .screen.frame-1213 { 
    display: block;
   }
}
@media screen and (min-width: 768px) {
  .main-container {
    background-image: url(../img/image-13.webp);
  }
  .screen.index { 
    display: block;
   }
  .screen.frame-1213 { 
    display: none;
   }
}