@charset "UTF-8";
@-webkit-keyframes shine {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shine {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes AniFloat {
  0% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
}

@keyframes AniFloat {
  0% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(3%);
            transform: translateY(3%);
  }
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI",'Microsoft JhengHei',"Noto Sans TC", "微軟正黑體", "Meiryo UI", Roboto, Helvetica, Arial, sans-serif;
  --mainTitle: 22px;
  --mainTxt: 18px;
  --mainPrice: 20px;
  --mainNote: 15px;
  --font-color-dark: #fff;
  --font-color-light: #111;
}

@media (min-width: 768px) {
  :root {
    --mainTitle: 32px;
    --mainTxt: 20px;
    --mainPrice: 20px;
    --mainNote: 15px;
  }
}

:root html:lang(ja-JP) *:not(.material-icons):not(.fa):not(.buttonicons) {
  --font: -apple-system, BlinkMacSystemFont,"Meiryo UI", Arial, sans-serif;
}

img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.pcMadness {
  background: #000;
}

.pcMadness .intro {
  color: #fff;
  margin-top: -8%;
  margin-bottom: 2%;
  text-align: center;
}

.pcMadness .intro h2 {
  font-size: 23px;
}

.pcMadness .intro h3 {
  font-size: 20px;
}

.pcMadness .tier {
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.pcMadness .tier__title {
  width: 100%;
  display: inline-block;
  padding: 30px 0;
  font-size: 23px;
  background-image: url(https://storage-asset.msi.com/event/2024/SG/pc-madness/images/tiered-title-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: 100% 100%;
}

.pcMadness .tier__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: unset;
      -ms-flex-align: unset;
          align-items: unset;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.pcMadness .tier__select {
  position: relative;
}

.pcMadness .tier__border {
  height: 87%;
  width: 50%;
  border: 2px solid #c511c8;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.pcMadness .tier__box {
  position: relative;
  margin: 10% 25px;
  padding: 0 0px 25px;
  border: 3.5px solid #a9c1ff;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: #1c021c;
}

.pcMadness .tier__box-icon {
  width: 180px;
  position: absolute;
  top: -20px;
  bottom: unset;
  left: 50%;
  right: unset;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  z-index: 10;
}

.pcMadness .tier__box-white {
  position: relative;
  background: #fff;
  margin-bottom: 10px;
  height: 100px;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%, 0 0);
          clip-path: polygon(50% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%, 0 0);
}

.pcMadness .tier__box h4 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 900;
}

.pcMadness .tier__box-item {
  position: relative;
  background: #c511c8;
  margin: 15px 25px;
  padding: 10px;
  z-index: 1;
}

.pcMadness .tier__box-itemTitle {
  position: relative;
  font-size: 20px;
  font-weight: 900;
  color: #fecdff;
  z-index: 1;
  background: #000;
  width: auto;
  display: inline-block;
}

@media (min-width: 996px) {
  .pcMadness .intro h2 {
    font-size: 33px;
  }
  .pcMadness .intro h3 {
    font-size: 28px;
  }
  .pcMadness .tier__title {
    width: 700px;
    font-size: 40px;
  }
  .pcMadness .tier__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: unset;
        -ms-flex-align: unset;
            align-items: unset;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .pcMadness .tier__box {
    margin: 10% 20px 0 0;
  }
  .pcMadness .tier__box:nth-last-child(1) {
    margin: 10% 0px 0 0;
  }
  .pcMadness .tier__box-icon {
    width: 250px;
    position: absolute;
    top: -68px;
    bottom: unset;
    left: 50%;
    right: unset;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
  }
}
/*# sourceMappingURL=main.css.map */