@charset "UTF-8";
/*  共用樣式調整 */
body {
  background: #302f6f;
}
body:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("https://events.cdn-tkec.tw/events_net/events_net/20251205_MSI_brandday/images/BG.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 45px, top;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}

.bg01 {
  background: #0a0610;
}

/* 活動倒數樣式 */
.timearea {
  width: 100%;
  position: fixed;
  top: 45px;
  background: rgba(0, 0, 0, 0.7019607843);
  color: #f5f01e;
  font-size: 2.5em;
  word-break: keep-all;
}

#msi-container {
  width: 100%;
  position: relative;
}
#msi-container .background {
  position: relative;
  margin: 0 auto 0;
  padding-bottom: 35%;
}
#msi-container .background .title {
  width: 32%;
  position: absolute;
  left: 19%;
  top: 22%;
  -webkit-animation: tada 1.6s linear;
          animation: tada 1.6s linear;
}
#msi-container .background .title .subtitle {
  width: 45%;
  margin: -23.5% 48% 0;
}
#msi-container .background .title .subtitle swiper-container::part(wrapper) {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
#msi-container .background .product {
  width: 32%;
  position: absolute;
  right: 18%;
  top: 27%;
  -webkit-animation: upAndDown 0.8s linear infinite alternate;
          animation: upAndDown 0.8s linear infinite alternate;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.protop-box .bg01 {
  background: none;
  margin: 0 auto 0;
}

.sec2-box swiper-container::part(wrapper),
.sec3-box swiper-container::part(wrapper) {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

/*  電腦版其他尺寸 */
@media only screen and (max-width: 992px) {
  #msi-container .background {
    padding-bottom: 55vw;
  }
  #msi-container .background .title {
    width: 50%;
    left: 5vw;
    top: 15vw;
  }
  #msi-container .background .subtitle {
    width: 40%;
    left: 11vw;
    top: 47vw;
  }
  #msi-container .background .product {
    width: 50%;
    top: 14vw;
    right: 1vw;
  }
  body:before {
    background-size: 120% auto;
    background-position: -10vw 4vw, top;
  }
  section .title {
    width: 100%;
    margin: 0 auto -1%;
  }
  .sec1-box swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
}
/* 手機版 */
@media only screen and (max-width: 576px) {
  #msi-container .background {
    padding-bottom: 145vw;
  }
  #msi-container .background .product {
    width: 90%;
    top: 82vw;
    right: 0;
    left: 0;
    margin: 0 auto 0;
  }
  #msi-container .background .title {
    width: 90%;
    top: 27vw;
    left: 0;
    right: 0;
    margin: 0 auto 0;
  }
  body:before {
    background-size: 180% auto;
    background-position: -40vw 17vw, top;
  }
  section .title {
    width: 140%;
    margin: 0 -19vw -2vw;
  }
  .timearea {
    font-size: 1.5em;
  }
  .alert-text .title {
    width: 100%;
    margin: 0 auto 15px;
  }
}
@media only screen and (min-width: 993px) {
  section .title {
    margin: 0 auto 0;
  }
}