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

@-webkit-keyframes border-shine {
  0% {
    border: 2px solid #fff;
  }
  50% {
    border: 2px solid #ffffff6c;
  }
  100% {
    border: 2px solid #fff;
  }
}

@keyframes border-shine {
  0% {
    border: 2px solid #fff;
  }
  50% {
    border: 2px solid #ffffff6c;
  }
  100% {
    border: 2px solid #fff;
  }
}

@-webkit-keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

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

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

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

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

: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;
  overflow: hidden;
  vertical-align: bottom;
}

picture {
  display: -ms-grid;
  display: grid;
}

@font-face {
  font-family: 'BankGothic';
  src: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/fonts/BankGothicLight_2.ttf");
}

@font-face {
  font-family: 'DINPro-Medium';
  src: url("https://event.msi.com/msifonts/fonts/DINPro-Medium.otf") format("opentype");
  src: url("https://event.msi.com/msifonts/fonts/dinpro-light-webfont.eot?#iefix") format("embedded-opentype"), url("https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.woff") format("woff"), url("https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.ttf") format(" truetype"), url("https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.svg") format("svg");
}

#msiology .common-title {
  font-size: 18px;
  font-family: 'DINPro-Medium';
  position: relative;
}



#msiology .button {
  font-family: geom-graphic, sans-serif;
  margin-bottom: 20px;
  color: #fff;
  width: 90%;
  margin: 0 auto 20px;
}

#msiology .button__box {
  background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  padding: 7px 15px;
  border-radius: 6px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: bolder;
  margin-bottom: 10px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  cursor: pointer;
  letter-spacing: 2.5px;
}

#msiology .button__box-icon {
  margin-right: 15px;
  max-width: 25px;
}

@media (min-width: 996px) {
  #msiology .button {
    margin: 0 auto 15px;
  }
  #msiology .button__box {
    padding: 7px 35px;
  }
  #msiology .button__box:hover {
    background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg-hover.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
  }
}

@media (min-width: 1300px) {
  #msiology .button {
    margin: 0 auto 20px;
  }
  #msiology .button__box {
    font-size: 20px;
  }
  #msiology .button__box-icon {
    max-width: unset;
  }
}



#msiology .popupBox {
  z-index: 100;
}

#msiology .popupBox__area h2 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  font-size: 35px;
  font-family: inherit !important;
}

#msiology .popupBox__area .card {
  position: relative;
  background-color: #84848487;
  -webkit-box-shadow: inset 0 0 40px #ffffffc7;
          box-shadow: inset 0 0 40px #ffffffc7;
  border-radius: 10px;
  padding: 4%	4%	0;
  text-align: center;
}

#msiology .popupBox__area .card--border {
  border: 2px solid #fff;
  -webkit-animation-name: border-shine;
          animation-name: border-shine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot {
  background-color: #fff;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: absolute;
  opacity: 1;
}

#msiology .popupBox__area .card__dot--1 {
  top: 50%;
  left: -0.48%;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot--2 {
  top: -0.6%;
  left: 5%;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot--3 {
  top: -3%;
  left: 9.5%;
  width: 5px;
  height: 5px;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot--4 {
  top: -0.6%;
  right: 7%;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot--5 {
  top: -2%;
  right: 5%;
  width: 5px;
  height: 5px;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__dot--6 {
  top: 70%;
  right: -0.4%;
  -webkit-animation-name: shine;
          animation-name: shine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__crystal {
  position: absolute;
  z-index: 20;
}

#msiology .popupBox__area .card__crystal--1 {
  left: -18%;
  top: 18%;
  -webkit-animation-name: AniFloat2;
          animation-name: AniFloat2;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__crystal--2 {
  left: -4%;
  bottom: 8%;
  -webkit-animation-name: AniFloat2;
          animation-name: AniFloat2;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__crystal--3 {
  right: 10%;
  top: -8%;
  -webkit-animation-name: AniFloat1;
          animation-name: AniFloat1;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card__crystal--4 {
  right: -15%;
  bottom: 20%;
  -webkit-animation-name: AniFloat1;
          animation-name: AniFloat1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popupBox__area .card .button-test {
  background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 20px;
  padding: 7px 35px;
  border-radius: 6px;
  border: 1px solid #fff;
  color: #fff;
  margin-bottom: 10px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  cursor: pointer;
}

#msiology #msi_form {
  overflow-y: auto;
  text-align: left;
  padding: 2% 1%;
  outline: none;
  font-size: 1.2rem;
}

#msiology #msi_form h6 {
  color: #fff;
  font-size: 100%;
  font-weight: bolder;
  font-family: geom-graphic, sans-serif;
}

#msiology #msi_form input {
  background: #eeeeee;
  border: 0px;
  color: #000;
  padding: 5px;
  font-size: 90%;
  outline: none;
  width: 100%;
}

#msiology #msi_form select {
  background: #eeeeee;
  color: #000;
  padding: 5px;
  font-size: 90%;
  outline: none;
  width: 100%;
}

#msiology #msi_form ul {
  margin-left: 0px;
}

#msiology #msi_form ul li {
  list-style: none;
  margin: 8px 0;
  font-size: 90%;
}

#msiology #msi_form ul li label {
  margin-left: 5px;
}

#msiology #msi_form ul li input {
  width: auto;
}

#msiology #msi_form .form-send {
  display: block;
  color: white;
  z-index: 3;
  margin: 20px auto 0;
  text-align: center;
  border-radius: 50px;
}

#msiology #msi_form .form-send button {
  background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  display: inline-block;
  font-size: 30px;
  padding: 7px 35px;
  border-radius: 6px;
  border: 1px solid #fff;
  color: #fff;
  font-weight: bolder;
  margin-bottom: 10px;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit !important;
}

#msiology #msi_form .form-send button.linkBtn {
  background: none;
}

#msiology #msi_form .checkSty {
  line-height: 1.2;
  font-size: 16px;
}

#msiology #msi_form .checkSty a {
  color: #fff;
  padding-bottom: 0px;
  border-bottom: 1px solid rgba(238, 214, 255, 0.8);
}

#msiology #msi_form .checkSty label {
  color: #fff;
  margin-left: 5px;
}

#msiology #msi_form .checkSty input {
  width: auto;
}

#msiology #msi_form #form-send {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#msiology #msi_form #form-send .form-send {
  width: auto !important;
}

#msiology #msi_form #form-send .question-group {
  margin-bottom: 2.5%;
  width: 100%;
}

#msiology #msi_form #form-send .error>h6{
  color: rgb(255, 0, 0);
}

#msiology #msi_form #form-send .error>label{
  color: rgb(255, 0, 0);
}


#msiology #msi_form #form-send .question-group:nth-of-type(1) {
  width: 50%;
  padding-right: 1%;
}

#msiology #msi_form #form-send .question-group:nth-of-type(2) {
  width: 50%;
}

#msiology #msi_form #form-send .question-group:nth-last-of-type(1) {
  margin: 0 auto;
}

@media (min-width: 996px) {
  #msiology #msi_form .form-send button {
    font-family: inherit !important;
  }
  #msiology #msi_form .form-send button:hover {
    background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg-hover.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
  }
}

#msiology label > input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: gray;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#msiology .popCALENDAR__crystal {
  position: absolute;
  z-index: 20;
}

#msiology .popCALENDAR__crystal--1 {
  left: -80%;
  top: 0%;
  -webkit-animation-name: AniFloat2;
          animation-name: AniFloat2;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popCALENDAR__crystal--2 {
  left: -45%;
  bottom: 0%;
  -webkit-animation-name: AniFloat2;
          animation-name: AniFloat2;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popCALENDAR__crystal--3 {
  right: -60%;
  top: -25%;
  -webkit-animation-name: AniFloat1;
          animation-name: AniFloat1;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popCALENDAR__crystal--4 {
  right: -90%;
  bottom: -5%;
  -webkit-animation-name: AniFloat1;
          animation-name: AniFloat1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popCALENDAR__title {
  font-family: geom-graphic, sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  font-size: 25px;
  margin: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#msiology .popCALENDAR__box {
  background-image: url("https://storage-asset.msi.com/event/2022/nb/MSIology-January-2023-The-Leap-to-Singularity/images/btbg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: cover;
  padding: 7px 35px;
  border-radius: 6px;
  border: 2px solid #fff;
  margin: 0 auto 30px;
  width: 300px;
  -webkit-animation-name: border-shine;
          animation-name: border-shine;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#msiology .popCALENDAR__box--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#msiology .popCALENDAR__box--icon {
  display: inline-block;
  width: 60px;
}

#msiology .popCALENDAR .contact {
  text-align: center;
}

#msiology .popCALENDAR .contact__title {
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
}

#msiology .popCALENDAR .contact__icon {
  display: inline-block;
  margin: 0 5px;
  max-width: 40px;
  opacity: 0.8;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

#msiology .popCALENDAR .contact__icon:hover {
  opacity: 1;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}
/*# sourceMappingURL=main2.css.map */