@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
}

.electroDeals {
  background: black;
}
.electroDeals .bg-flaot {
  position: fixed;
  z-index: 11;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  background: rgba(0, 255, 255, 0.03);
  width: 100vh;
  height: 50px;
  text-align: center;
  -webkit-transform: rotate(90deg) translateY(12px);
          transform: rotate(90deg) translateY(12px);
  -webkit-transform-origin: 25px 25px;
          transform-origin: 25px 25px;
  border-top: rgba(0, 255, 255, 0.1) solid 1px;
}
@media (min-width: 996px) {
  .electroDeals .bg-flaot {
    -webkit-transform: rotate(90deg) translateY(0px);
            transform: rotate(90deg) translateY(0px);
  }
}
.electroDeals .bg-flaot-box {
  margin-left: 150px;
  background: url(https://storage-asset.msi.com/event/2022/nb/13thGen-Cyborg/images/cyborg-float-outline.png) no-repeat top right, url(https://storage-asset.msi.com/event/2022/nb/13thGen-Cyborg/images/cyborg-float-outline2.png) no-repeat center left;
}
.electroDeals .bg-flaot h3 {
  margin: 0px;
  line-height: 50px;
  color: rgba(0, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
}
.electroDeals .popup-inner {
  background: #011c3c;
  color: #eee;
}
.electroDeals .popup-inner h5 {
  color: #00ffff;
}
.electroDeals .popup-inner .btnPopupClose:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.electroDeals .popup-inner a {
  color: #fff;
}
.electroDeals .popup-close {
  border: solid 4px #eee;
}
.electroDeals .popup-close::after, .electroDeals .popup-close::before {
  background: #eee;
}
.electroDeals .popup-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
          transform: translate(50%, -50%) rotate(180deg);
  background: #00ffff;
  border-color: #00ffff;
}
.electroDeals .popup-close:hover::after, .electroDeals .popup-close:hover::before {
  background: black;
}

.kv {
  background: url("https://storage-asset.msi.com/event/2023/NB/ID-ElectroDeals/images/kv-bg.jpg") no-repeat center bottom;
}
.kv__nb試用帳號 {
  margin: 0 auto;
  width: 80%;
  -webkit-animation: downAni 2s infinite alternate ease-in-out;
          animation: downAni 2s infinite alternate ease-in-out;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
@-webkit-keyframes downAni {
  from {
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
  }
}
@keyframes downAni {
  from {
    -webkit-transform: translateY(1em);
            transform: translateY(1em);
  }
}
@media (min-width: 1930px) {
  .kv__nb試用帳號 {
    width: 90%;
  }
}
.kv__nb試用帳號-img {
  display: block;
  background: url("https://storage-asset.msi.com/event/2023/NB/ID-ElectroDeals/images/kv-nb.png") no-repeat;
  background-size: contain;
}
.kv__nb試用帳號-glitch {
  display: block;
  background: url("https://storage-asset.msi.com/event/2023/NB/ID-ElectroDeals/images/kv-nb.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation: glitch-anim2 3s infinite alternate;
          animation: glitch-anim2 3s infinite alternate;
  mix-blend-mode: lighten;
}
@-webkit-keyframes glitch-anim2 {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
            clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  6% {
    -webkit-clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
            clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
    -webkit-transform: translate(5px);
            transform: translate(5px);
  }
  8% {
    -webkit-clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
            clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  9% {
    -webkit-clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
            clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  13% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  13.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  15% {
    -webkit-clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
            clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  20% {
    -webkit-clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
            clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  20.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  25% {
    -webkit-clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
            clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  30% {
    -webkit-clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
            clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  30.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  35% {
    -webkit-clip-path: polygon(0 47%, 70% 58%, 100% 70%, 0 55%);
            clip-path: polygon(0 47%, 70% 58%, 100% 70%, 0 55%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  40% {
    -webkit-clip-path: polygon(0 63%, 70% 63%, 100% 70%, 0% 30%);
            clip-path: polygon(0 63%, 70% 63%, 100% 70%, 0% 30%);
    -webkit-transform: translate(5px);
            transform: translate(5px);
  }
  45% {
    -webkit-clip-path: polygon(0 63%, 100% 63%, 10% 70%, 30% 80%);
            clip-path: polygon(0 63%, 100% 63%, 10% 70%, 30% 80%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  50% {
    -webkit-clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
            clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  52% {
    -webkit-clip-path: polygon(73% 12%, 48% 4%, 8% 10%, 21% -11%);
            clip-path: polygon(73% 12%, 48% 4%, 8% 10%, 21% -11%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  60% {
    -webkit-clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
            clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  60.1% {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    opacity: 1;
  }
}
@keyframes glitch-anim2 {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
            clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  6% {
    -webkit-clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
            clip-path: polygon(100% 100%, 100% 19%, 10% 40%, 90% 30%);
    -webkit-transform: translate(5px);
            transform: translate(5px);
  }
  8% {
    -webkit-clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
            clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  9% {
    -webkit-clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
            clip-path: olygon(10% 0%, 0% 30%, 50% 70%, 10% 40%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  13% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  13.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  15% {
    -webkit-clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
            clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  20% {
    -webkit-clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
            clip-path: polygon(90% 0%, 10% 35%, 100% 30%, 0 40%);
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  20.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  25% {
    -webkit-clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
            clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  30% {
    -webkit-clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
            clip-path: polygon(100% 10%, 8% 39%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }
  30.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  35% {
    -webkit-clip-path: polygon(0 47%, 70% 58%, 100% 70%, 0 55%);
            clip-path: polygon(0 47%, 70% 58%, 100% 70%, 0 55%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  40% {
    -webkit-clip-path: polygon(0 63%, 70% 63%, 100% 70%, 0% 30%);
            clip-path: polygon(0 63%, 70% 63%, 100% 70%, 0% 30%);
    -webkit-transform: translate(5px);
            transform: translate(5px);
  }
  45% {
    -webkit-clip-path: polygon(0 63%, 100% 63%, 10% 70%, 30% 80%);
            clip-path: polygon(0 63%, 100% 63%, 10% 70%, 30% 80%);
    -webkit-transform: translate(-5px);
            transform: translate(-5px);
  }
  50% {
    -webkit-clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
            clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  52% {
    -webkit-clip-path: polygon(73% 12%, 48% 4%, 8% 10%, 21% -11%);
            clip-path: polygon(73% 12%, 48% 4%, 8% 10%, 21% -11%);
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  60% {
    -webkit-clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
            clip-path: polygon(93% 47%, -235% 21%, -186% 55%, -61% 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  60.1% {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
            clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    opacity: 1;
  }
}
.kv__title {
  position: relative;
  padding-top: 4%;
  z-index: 12;
}
.kv__title img {
  padding: 0 15px;
}
@media (min-width: 1300px) {
  .kv__title img {
    padding: 0 35px;
  }
}
@media (min-width: 1930px) {
  .kv__title img {
    padding: 0 5px;
  }
}
.kv__title-light {
  position: absolute;
  bottom: 0;
  -webkit-animation-name: title-ani;
          animation-name: title-ani;
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  opacity: 0.7;
  mix-blend-mode: screen;
  z-index: 2;
}
@-webkit-keyframes title-ani {
  50% {
    opacity: 0.8;
  }
  52% {
    opacity: 0.9;
  }
  56% {
    opacity: 0.8;
  }
  58% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.8;
  }
}
@keyframes title-ani {
  50% {
    opacity: 0.8;
  }
  52% {
    opacity: 0.9;
  }
  56% {
    opacity: 0.8;
  }
  58% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.8;
  }
}
.kv__price {
  margin: 0 auto;
  width: 65%;
  padding-bottom: 6%;
}

.select {
  padding-top: 5em;
  padding-bottom: 2.4vh;
  position: relative;
  z-index: 1;
}
.select::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0));
  z-index: 1;
}
.select::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 5px;
  background: rgb(0, 239, 254);
  background: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(0, 239, 254, 0)), color-stop(50%, rgb(0, 239, 254)), color-stop(85%, rgba(0, 239, 254, 0)));
  background: linear-gradient(90deg, rgba(0, 239, 254, 0) 15%, rgb(0, 239, 254) 50%, rgba(0, 239, 254, 0) 85%);
  z-index: 2;
}
.select__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 996px) {
  .select__block {
    gap: 1%;
  }
}
.select__block-item {
  width: calc(33.3333333333% - 15px);
  position: relative;
  cursor: pointer;
  display: block;
  color: #00ffff;
  font-weight: bold;
  padding: 15px 5px;
  border-radius: 35px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  border: 2px solid rgba(0, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.6);
          box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.6);
  outline: none;
}
@media (min-width: 996px) {
  .select__block-item {
    width: 25%;
  }
}
.select__block-item.active {
  background: #00ffff;
  color: black;
}
.select__block p {
  text-align: center;
  font-size: 12px;
}
@media (min-width: 996px) {
  .select__block p {
    font-size: var(--text-sm);
  }
}

.btnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btnBox a {
  cursor: pointer;
}
.btnBox__top {
  text-shadow: 0px 0px 30px 10px rgba(0, 255, 255, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-filter: drop-shadow(0 0 5px rgb(0, 255, 255));
          filter: drop-shadow(0 0 5px rgb(0, 255, 255));
  width: 70px;
  height: 70px;
  border: 2px solid rgb(0, 255, 255);
  border-radius: 250px;
  margin-bottom: 30px;
}
.btnBox__top img {
  max-width: 50px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.btnBox__top span {
  color: white;
  font-size: 12px;
}

.title--main {
  color: #00ffff;
  margin: 30px 0;
  -webkit-animation-name: title--main-amimation;
          animation-name: title--main-amimation;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  text-shadow: 0px 0px 20px rgba(0, 255, 255, 0.8);
  text-align: center;
}

.buynow {
  background: rgb(0, 35, 75);
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 35, 75, 0)), color-stop(50%, rgb(0, 35, 75)), to(rgba(0, 35, 75, 0)));
  background: linear-gradient(90deg, rgba(0, 35, 75, 0) 0%, rgb(0, 35, 75) 50%, rgba(0, 35, 75, 0) 100%);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding-bottom: 5%;
}
.buynow::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 5px;
  background: rgb(0, 239, 254);
  background: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(0, 239, 254, 0)), color-stop(50%, rgb(0, 239, 254)), color-stop(85%, rgba(0, 239, 254, 0)));
  background: linear-gradient(90deg, rgba(0, 239, 254, 0) 15%, rgb(0, 239, 254) 50%, rgba(0, 239, 254, 0) 85%);
}
.buynow::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 5px;
  background: rgb(0, 239, 254);
  background: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(0, 239, 254, 0)), color-stop(50%, rgb(0, 239, 254)), color-stop(85%, rgba(0, 239, 254, 0)));
  background: linear-gradient(90deg, rgba(0, 239, 254, 0) 15%, rgb(0, 239, 254) 50%, rgba(0, 239, 254, 0) 85%);
}
.buynow h3 {
  text-align: center;
  font-size: 42px;
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.2em;
  font-family: "din_pro_bold";
  color: #9b0606;
}
.buynow__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin-bottom: 40px;
}
.buynow__block-item {
  width: 100%;
  color: #ffffff;
  padding: 0 40px 40px;
}
@media (min-width: 768px) {
  .buynow__block-item {
    width: 50%;
  }
}
@media (min-width: 996px) {
  .buynow__block-item {
    width: 33.3333333333%;
  }
}
.buynow__block-imgbox {
  position: relative;
  width: 85%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .buynow__block-imgbox img {
    height: 250px;
    width: auto;
  }
}
.buynow__block-bundle {
  position: absolute;
  width: 100%;
  bottom: 10px;
  right: -10%;
  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;
}
.buynow__block-bundle img {
  width: 50%;
  margin: 2px;
}
@media (min-width: 768px) {
  .buynow__block-bundle img {
    height: auto !important;
  }
}
.buynow__block h5 {
  font-size: var(--title-md);
  font-weight: 900;
  margin-left: 10px;
  text-align: center;
}
.buynow__block ul {
  margin-top: 10px;
}
.buynow__block ul li {
  list-style-type: disc;
  font-size: 16px;
  margin-bottom: 1em;
  line-height: 1.5em;
  opacity: 0.8;
  margin: 0;
  margin-left: 24px;
}
.buynow__block ul::before {
  content: "";
  display: block;
  width: 100%;
  background: url(https://storage-asset.msi.com/event/2023/NB/ID-ElectroDeals/images/wtb-line.png) no-repeat top left;
  background-size: 100%;
  height: 24px;
  margin: 20px 0;
}
.buynow__block ul::after {
  content: "";
  display: block;
  width: 100%;
  background: url(https://storage-asset.msi.com/event/2023/NB/ID-ElectroDeals/images/wtb-line.png) no-repeat top left;
  background-size: 100%;
  height: 24px;
  margin: 20px 0;
}
.buynow__block-oldprize {
  margin-bottom: 1em;
  line-height: 1.5em;
  opacity: 0.8;
  margin: 0;
  text-align: end;
  text-decoration: line-through;
  color: #3eb9b9;
  font-size: var(--block-text-xs);
}
.buynow__block-newprize {
  font-size: 22px;
  margin-bottom: 1em;
  line-height: 1.5em;
  font-weight: 900;
  text-align: end;
  color: #00ffff;
}
.buynow__block-box {
  overflow-y: scroll;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: start;
  padding-bottom: 15px;
}
.buynow__block-box a {
  width: calc(50% - 15px);
  height: 60px;
  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;
  text-align: center;
  color: #000000;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #00ffff;
}
.buynow__block-box a:nth-child(2n+1) {
  margin-right: 7.5px;
}
.buynow__block-box a:nth-child(n+3) {
  margin-top: 15px;
}
.buynow__block-box a img {
  max-width: 100%;
  max-height: 100%;
}
.buynow__block-box::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: rgba(0, 255, 255, 0.3);
}

/*glitched imgs*/
.effect-bg {
  position: relative;
  background-color: #000;
  background: url(https://storage-asset.msi.com/event/2022/nb/13thGen-Cyborg/images/cyborg-gallery-bg.jpg) fixed;
  width: 100%;
  color: #00ffff;
}
.effect-bg::before {
  content: "";
  left: 0px;
  right: 0px;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  -webkit-animation: glitch-anim linear 4s infinite alternate;
          animation: glitch-anim linear 4s infinite alternate;
  mix-blend-mode: overlay;
  background-size: 100%;
  background: rgba(0, 255, 255, 0.3);
}
@-webkit-keyframes glitch-anim {
  0% {
    -webkit-clip-path: polygon(100% 42%, 90% 70%, 0% 50%, 100% 50%);
            clip-path: polygon(100% 42%, 90% 70%, 0% 50%, 100% 50%);
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  2% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  6% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(3px);
            transform: translate(3px);
  }
  8% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  9% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  13% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  13.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  15% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
            clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  20% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
            clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-2px, 0, 0);
            transform: translate3d(-2px, 0, 0);
  }
  20.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  25% {
    -webkit-clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
            clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  30% {
    -webkit-clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
            clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-2px, 0, 0);
            transform: translate3d(-2px, 0, 0);
  }
  30.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  35% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  40% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  45% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  50% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  55% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  60% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
            clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  60.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
}
@keyframes glitch-anim {
  0% {
    -webkit-clip-path: polygon(100% 42%, 90% 70%, 0% 50%, 100% 50%);
            clip-path: polygon(100% 42%, 90% 70%, 0% 50%, 100% 50%);
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  2% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  6% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(3px);
            transform: translate(3px);
  }
  8% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  9% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
            clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  13% {
    -webkit-clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
            clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  13.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  15% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
            clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  20% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
            clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-2px, 0, 0);
            transform: translate3d(-2px, 0, 0);
  }
  20.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  25% {
    -webkit-clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
            clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  30% {
    -webkit-clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
            clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    -webkit-transform: translate3d(-2px, 0, 0);
            transform: translate3d(-2px, 0, 0);
  }
  30.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  35% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  40% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  45% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(-2px);
            transform: translate(-2px);
  }
  50% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  55% {
    -webkit-clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
            clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
  60% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
            clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  60.1% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
}

.common-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  -webkit-animation-name: btn_glitched;
          animation-name: btn_glitched;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  margin-top: 10px;
}
.common-btn::before {
  --outside: 2px;
  content: "";
  position: absolute;
  background: #0ff;
  width: calc(100% + var(--outside) * 2);
  height: 4%;
  top: 34%;
  left: -2px;
  display: block;
  -webkit-animation-name: hoverbefore;
          animation-name: hoverbefore;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.common-btn::after {
  display: block;
  content: "";
  position: absolute;
  background: #0ff;
  z-index: 0px;
  width: 94%;
  height: 40%;
  top: 30%;
  left: 3%;
  z-index: 0;
  -webkit-box-shadow: 0px 0px 30px 10px rgba(0, 255, 255, 0.8);
          box-shadow: 0px 0px 30px 10px rgba(0, 255, 255, 0.8);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  border-radius: 10px;
}
.common-btn span {
  background: url(https://storage-asset.msi.com/global/picture/image/feature/nb/Cyborg15-A13V/images/cyborg-button.png) no-repeat center center;
  background-size: contain;
  padding: 30px 110px;
  position: relative;
  text-shadow: 0px 0px 23px #fff, 0px 0px 13px #fff;
  z-index: 2;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  color: #000;
}

@-webkit-keyframes btn_glitched {
  0% {
    -webkit-transform: skew(-7deg);
            transform: skew(-7deg);
  }
  4% {
    -webkit-transform: skew(-7deg);
            transform: skew(-7deg);
  }
  5% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  50% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  51% {
    -webkit-transform: skew(10deg);
            transform: skew(10deg);
  }
  53% {
    -webkit-transform: skew(10deg);
            transform: skew(10deg);
  }
  54% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  100% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
}

@keyframes btn_glitched {
  0% {
    -webkit-transform: skew(-7deg);
            transform: skew(-7deg);
  }
  4% {
    -webkit-transform: skew(-7deg);
            transform: skew(-7deg);
  }
  5% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  50% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  51% {
    -webkit-transform: skew(10deg);
            transform: skew(10deg);
  }
  53% {
    -webkit-transform: skew(10deg);
            transform: skew(10deg);
  }
  54% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
  100% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
  }
}
/*sale*/
#msi_twYrsale {
  position: relative;
  z-index: 10;
  padding: 5em 0;
}
#msi_twYrsale .wtb__box-info.sub-info {
  width: 100%;
  background-color: rgba(0, 239, 254, 0.2);
  color: white;
  font-size: 20px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 5px;
  border: 1px solid rgba(0, 239, 254, 0.3);
  padding: 0.7em 0;
}
#msi_twYrsale .wtb__box-info.sub-info:hover {
  background-color: rgba(0, 239, 254, 0.6);
}
#msi_twYrsale .wtb__box-title li {
  list-style: none;
  text-align: left;
  color: black;
  padding: 10px;
  background: rgba(0, 239, 254, 0.8);
}/*# sourceMappingURL=main.css.map */