.project {
  background: #000;
  font-family: "century-gothic", sans-serif;
}
.project img {
  max-width: 100%;
  vertical-align: bottom;
}
.project picture {
  display: contents;
}
.project .kv {
  position: relative;
  background-repeat: no-repeat;
  background-position: bottom;
  background-position-y: -350px;
  background-image: url(https://storage-asset.msi.com/event/2026/th/new-gaming-series/images/kv-bg.jpg);
  background-image: -webkit-image-set(url(https://storage-asset.msi.com/event/2026/th/new-gaming-series/images/kv-bg.webp) type("image/webp"), url(https://storage-asset.msi.com/event/2026/th/new-gaming-series/images/kv-bg.jpg) type("image/jpeg"));
  background-image: image-set(url(https://storage-asset.msi.com/event/2026/th/new-gaming-series/images/kv-bg.webp) type("image/webp"), url(https://storage-asset.msi.com/event/2026/th/new-gaming-series/images/kv-bg.jpg) type("image/jpeg"));
  padding: 5% 0 2%;
}
@media (min-width: 1930px) {
  .project .kv::before {
    background: -webkit-gradient(linear, left top, right top, from(#000), color-stop(30%, transparent));
    background: linear-gradient(to right, #000, transparent 30%);
    position: absolute;
    left: 0;
    height: 100%;
    width: 15%;
    content: "";
    z-index: 15;
    top: 0;
  }
  .project .kv::after {
    background: -webkit-gradient(linear, right top, left top, from(#000), color-stop(30%, transparent));
    background: linear-gradient(to left, #000, transparent 30%);
    position: absolute;
    right: 0;
    height: 100%;
    width: 15%;
    content: "";
    z-index: 10;
    top: 0;
  }
}
.project .kv__intel {
  top: 30px;
  right: 30px;
  z-index: 20;
  text-align: left;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 30px;
}
@media (min-width: 996px) {
  .project .kv__intel {
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: right;
    width: 15%;
    max-width: 250px;
    margin-bottom: 0;
  }
}
.project .kv__intel img {
  max-width: 70px;
  display: block;
}
@media (min-width: 996px) {
  .project .kv__intel img {
    max-width: 100%;
  }
}
.project .kv__intel p {
  -webkit-filter: drop-shadow(0 0 10px #000);
          filter: drop-shadow(0 0 10px #000);
}
.project .kv__beams {
  position: absolute;
  bottom: 33%;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
  opacity: 0.5;
}
.project .kv > .msi__container {
  position: relative;
  z-index: 1;
}
.project .kv__wrap {
  max-width: 873px;
  margin: 0 auto;
  text-align: center;
  -webkit-filter: drop-shadow(0 0 30px #2e1738);
          filter: drop-shadow(0 0 30px #2e1738);
}
.project .kv__nbBox {
  position: relative;
}
.project .kv__nbBox-nb {
  will-change: transform;
}
.project .kv__nbBox-nb:nth-child(1) {
  -webkit-animation: kvNbFloat 2.8s ease-in-out infinite -1.6s;
          animation: kvNbFloat 2.8s ease-in-out infinite -1.6s;
  position: absolute;
  inset: 0;
}
.project .kv__nbBox-nb:nth-child(2) {
  -webkit-animation: kvNbFloat 2.8s ease-in-out infinite -2.5s;
          animation: kvNbFloat 2.8s ease-in-out infinite -2.5s;
  position: absolute;
  inset: 0;
}
.project .kv__nbBox-nb:nth-child(3) {
  -webkit-animation: kvNbFloat 2.8s ease-in-out infinite;
          animation: kvNbFloat 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .project .kv__nbBox-nb {
    -webkit-animation: none;
            animation: none;
  }
}
.project .kv__txt {
  margin-top: 20px;
}
.project .kv__txt h2 {
  margin: 15px 0;
  color: var(--color-white);
}
.project .kv__txt-info {
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(15%, rgb(255, 255, 255)), color-stop(85%, rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
  display: inline-block;
  padding: 0.5em 10%;
  font-size: var(--title-lg);
  color: #2f2466;
}
.project .offer {
  font-family: var(--fontA);
  padding: 50px 0;
  background: #000;
  color: #fff;
  position: relative;
}
@media (min-width: 996px) {
  .project .offer {
    padding: 0 0 2.5%;
  }
}
.project .offer .title--main-normal {
  color: #fff;
}
.project .offer__box {
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(70deg, #373737 0%, #6a6a6a 35%, #fff 50%, #6a6a6a 65%, #373737 100%) border-box;
  border: 2px solid transparent;
}
.project .offer__content {
  padding: 2.5% 25px 1.5%;
  text-align: center;
  position: relative;
  z-index: 3;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .offer__content {
    width: 90%;
  }
}
.project .offer__content h5 {
  background: -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(30%, rgba(239, 244, 255, 0.8)), color-stop(70%, rgba(239, 244, 255, 0.8)), color-stop(90%, transparent));
  background: linear-gradient(to right, transparent 10%, rgba(239, 244, 255, 0.8) 30%, rgba(239, 244, 255, 0.8) 70%, transparent 90%);
  font-size: 1.6rem;
  margin-top: 15px;
}
.project .offer__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 30px auto;
  gap: 30px 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 996px) {
  .project .offer__flex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.project .offer__flex .offerItem {
  border-radius: 28px;
  padding: 15px;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(70deg, #373737 0%, #6a6a6a 35%, #fff 50%, #6a6a6a 65%, #373737 100%) border-box;
  width: 100%;
  border: 2px solid transparent;
  -webkit-animation: borderLight 2s infinite linear;
          animation: borderLight 2s infinite linear;
  background-size: 200%;
}
.project .offer__flex .offerItem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E");
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  z-index: 1;
}
@-webkit-keyframes borderLight {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
@keyframes borderLight {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
.project .offer__flex .offerItem.item-01 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 65%;
          flex: 0 0 65%;
}
.project .offer__flex .offerItem h3 {
  left: 0;
  right: 0;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;
  margin-top: -30px;
}
.project .offer__flex .offerItem h3::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  width: 100%;
  margin: 0 auto;
}
.project .offer__flex .offerItem h3 span {
  font-size: var(--title-md);
  position: relative;
  z-index: 10;
  font-weight: bold;
  background: -webkit-gradient(linear, left top, right top, from(#aa6bf7), to(#4156ed));
  background: linear-gradient(to right, #aa6bf7, #4156ed);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding: 2px 20px;
}
.project .offer__flex .offerItem h3 span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #000;
  z-index: -1;
}
.project .offer__flex .offerItem h5 {
  font-size: var(--title-lg);
  font-weight: normal;
}
.project .offer__flex .offerItem__innerbox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 10px;
}
@media (min-width: 996px) {
  .project .offer__flex .offerItem__innerbox figure {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.project .offer__flex .offerItem__innerbox-title {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--title-md);
}
.project .offer__description {
  margin-top: 20px;
  text-align: center;
}
.project .offer__description h2 {
  margin-bottom: 10px;
  font-size: var(--title-xl);
}
.project .offer__description p + p {
  margin-top: 10px;
}
.project .disclaimer {
  padding-bottom: 50px;
  text-align: center;
}

@-webkit-keyframes kvNbFloat {
  0%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes kvNbFloat {
  0%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}/*# sourceMappingURL=main.css.map */