@font-face {
  font-family: Good-Brush;
  src: url(https://storage-asset.msi.com/event/2021/gnp/MSI-Hot-Deal-DS502/font/Good-Brush.ttf);
}

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

#DS502 .kv {
  position: relative;
  padding: 2% 0;
  font-family: Good-Brush, serif;
}

@media (max-width: 960px) {
  #DS502 .kv {
    padding: 6% 0 2%;
  }
}

#DS502 .kv__title {
  position: absolute;
  top: 2%;
  left: 10%;
  text-align: center;
  z-index: 10;
}

@media (max-width: 960px) {
  #DS502 .kv__title {
    left: 50%;
    top: 1%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 100%;
  }
}

#DS502 .kv__title h1 {
  font-size: 10vw;
  letter-spacing: 8px;
}

@media (max-width: 960px) {
  #DS502 .kv__title h1 {
    font-size: 18vw;
    letter-spacing: 2px;
  }
}

#DS502 .kv__title h1 span {
  color: #ff0000;
}

#DS502 .kv__title p {
  font-size: 1.7vw;
  margin-top: -3%;
}

@media (max-width: 960px) {
  #DS502 .kv__title p {
    font-size: 4vw;
  }
}

#DS502 .kv__txt {
  position: absolute;
  color: #fff;
  z-index: 10;
  top: 40%;
  left: 10%;
  font-size: 3.3vw;
  -webkit-transform: rotate(2.5deg);
          transform: rotate(2.5deg);
  text-align: center;
  line-height: 120%;
}

@media (max-width: 960px) {
  #DS502 .kv__txt {
    font-size: 9vw;
    top: 33%;
  }
}

#DS502 .kv__txt .biggerTxt {
  font-size: 5vw;
}

@media (max-width: 960px) {
  #DS502 .kv__txt .biggerTxt {
    font-size: unset;
  }
}

#DS502 .kv__txt .redTxt {
  color: #ff0000;
  font-size: 3.9vw;
}

@media (max-width: 960px) {
  #DS502 .kv__txt .redTxt {
    font-size: unset;
  }
}

#DS502 .intro {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 1366px) {
  #DS502 .intro {
    width: 90%;
  }
}

#DS502 .intro__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 960px) {
  #DS502 .intro__flex {
    display: block;
  }
}

#DS502 .intro__flex-pic {
  width: 30%;
  margin: 2%;
}

@media (max-width: 960px) {
  #DS502 .intro__flex-pic {
    width: 50%;
    display: block;
    margin: 0 auto;
  }
}

#DS502 .intro__flex-pic2 {
  width: 50%;
}

@media (max-width: 960px) {
  #DS502 .intro__flex-pic2 {
    width: 100%;
  }
}

#DS502 .intro__flex2 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

#DS502 .intro__flexTxt {
  width: 70%;
  margin: 2%;
}

@media (max-width: 960px) {
  #DS502 .intro__flexTxt {
    width: 100%;
  }
}

#DS502 .intro__flexTxt h2 {
  font-family: Good-Brush, serif;
  font-size: 50px;
  letter-spacing: 2px;
}

@media (max-width: 960px) {
  #DS502 .intro__flexTxt h2 {
    font-size: 40px;
  }
}

#DS502 .intro__flexTxt p {
  font-size: 20px;
}

#DS502 .intro__flexTxt-btn {
  display: inline-block;
  background-color: #ff161c;
  color: #fff;
  margin: 2% 0;
  font-size: 20px;
  padding: 1% 2%;
  border-radius: 1rem;
}

#DS502 .intro__flexTxt-pic {
  margin-top: 20px;
}

#DS502 .intro__flexTxt2 {
  width: 50%;
}

@media (max-width: 960px) {
  #DS502 .intro__flexTxt2 {
    width: 100%;
  }
}

#DS502 .redeem {
  width: 80%;
  margin: 5% auto;
  text-align: center;
}

@media (max-width: 1366px) {
  #DS502 .redeem {
    width: 90%;
  }
}

#DS502 .redeem__title {
  font-family: Good-Brush, serif;
  color: #ff0000;
  font-size: 50px;
  letter-spacing: 2px;
}

#DS502 .redeem__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
  margin-top: 3%;
}

@media (max-width: 768px) {
  #DS502 .redeem__flex {
    display: block;
  }
}

#DS502 .redeem__flex .arrow {
  margin-top: 4.5%;
}

@media (max-width: 1366px) {
  #DS502 .redeem__flex .arrow {
    margin-top: 6.5%;
  }
}

@media (max-width: 1366px) and (max-width: 768px) {
  #DS502 .redeem__flex .arrow {
    display: none;
  }
}

#DS502 .redeem__flexBox {
  width: 30%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #DS502 .redeem__flexBox {
    width: 90%;
  }
}

#DS502 .redeem__flexBox-icon {
  border: 10px solid #7c7c7c;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
}

#DS502 .redeem__flexBox-txt {
  margin: 5% 0 7%;
  font-size: 20px;
}

#DS502 .redeem__btn a {
  border: 2px solid #000;
  border-radius: 1rem;
  margin: 10px;
  padding: 1%;
  display: inline-block;
  color: #000;
  font-size: 20px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#DS502 .redeem__btn a:hover {
  background-color: #000;
  color: #fff;
}

#DS502 .wtb {
  text-align: center;
  margin: 5% auto 0;
}

#DS502 .wtb__title {
  font-family: Good-Brush, serif;
  font-size: 50px;
}
/*# sourceMappingURL=main.css.map */