@charset "UTF-8";
html {
  background: -webkit-gradient(linear, left top, right top, from(#0eb8ff), color-stop(49.9%, #00e7ff), color-stop(50.01%, #ffd200), to(#ffa21b)), radial-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 75%) top no-repeat;
  background: linear-gradient(90deg, #0eb8ff, #00e7ff 49.9%, #ffd200 50.01%, #ffa21b), radial-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 75%) top no-repeat;
  background-size: auto, 1600px 800px;
  background-position-y: center, 50% -30%;
  background-blend-mode: color-dodge;
  min-height: 100vh;
  color: #fff;
  font: 400 60px/1.5 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

#main {
  position: relative;
  margin: 0 auto;
  /*height: 100vh;*/
  max-width: 1920px;
}

/*=====================*/
/* TOP SOCIAL-LINK BAR */
#header {
  background: #4152d5;
}

/*===================*/
/* MAIN PAGE CONTENT */
.dl-btn-container {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.dl-btn, .play-btn {
  display: block;
  bottom: 0;
  overflow: hidden;
  width: 500px;
  height: 167px;
}

.dl-btn:hover, .dl-btn:focus, .dl-btn:active, .play-btn:hover, .play-btn:focus, .play-btn:active {
  cursor: pointer;
  background-position: bottom;
  -webkit-animation: none;
          animation: none;
}

.dl-btn:hover::after, .dl-btn:focus::after, .dl-btn:active::after, .play-btn:hover::after, .play-btn:focus::after, .play-btn:active::after {
  visibility: hidden;
}

.dl-btn {
  position: absolute;
  left: 0%;
  background: url("../_img/dl-btn.png") top no-repeat;
  background-size: cover;
}

.play-btn {
  position: absolute;
  right: 0%;
  background: url("../_img/play-btn.png") top no-repeat;
  background-size: cover;
}

.hero {
  background: url("../_img/bg%EF%B9%96v=2.png") top no-repeat;
  background-size: cover;
  height: 1280px;
  width: 100%;
  max-width: 1920px;
  -o-object-fit: cover;
     object-fit: cover;
}

.article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  min-height: calc(100vh - 170px);
}

.article img {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.info {
  width: 100%;
  max-width: 1000px;
  height: 2500px;
  padding-top: 360px;
  margin: 0 auto;
  position: relative;
  background: url("../_img/fig-01%EF%B9%96v=3.png") center no-repeat;
  background-size: contain;
  text-align: center;
}

@media (max-width: 1000px) {
  .info {
    height: 250vw;
    padding-top: 37vw;
  }
}

.info .btns {
  margin-bottom: 20px;
  font-size: 0;
}

@media (max-width: 1000px) {
  .info .btns {
    margin-bottom: 2vw;
  }
}

.info .btns a {
  display: inline-block;
  vertical-align: middle;
  height: 96px;
  background: center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .info .btns a {
    height: 9.6vw;
  }
}

.info .btns a.btn-android {
  width: 360px;
  background-image: url("../_img/btn-android.png");
}

@media (max-width: 1000px) {
  .info .btns a.btn-android {
    width: 36vw;
  }
}

.info .btns a.btn-android:hover {
  background-image: url("../_img/btn-android2.png");
}

.info .btns a.btn-ios {
  width: 275px;
  margin-left: 10px;
  background-image: url("../_img/btn-ios.png");
}

@media (max-width: 1000px) {
  .info .btns a.btn-ios {
    width: 27.5vw;
    margin-left: 1vw;
  }
}

.info .btns a.btn-ios:hover {
  background-image: url("../_img/btn-ios2.png");
}

.rules {
  margin: 0 auto;
  line-height: 1.6;
  width: 920px;
  font-size: 27px;
}

.rules h2 {
  font-size: 1.5em;
  line-height: 1.2;
  margin: .5em 0;
}

.rules ul {
  list-style: none;
  padding-left: 0em;
  margin-bottom: 1.5em;
}

.rules li {
  margin-bottom: .5em;
}

.rules li::before {
  content: "*";
  position: absolute;
  -webkit-transform: translateX(-0.66em);
          transform: translateX(-0.66em);
}

.sr-only {
  position: fixed;
  top: -9in;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/*==================*/
/* FORMS AND MODALS */
html {
  font: 400 60px/1.5 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
}

/*=====================*/
/* KEYFRAMES AND MEDIA */
@media (max-width: 1000px) {
  html {
    font-size: 6vw;
    background-size: auto, 160vw 80vw;
  }
  /*#main{
        height:128vw;
    }*/
  #header {
    height: 10.8vw;
  }
  .social-links li {
    margin-left: .3vw;
  }
  .social-links a {
    width: 8.6vw;
    height: 8.6vw;
  }
  .dl-btn, .play-btn {
    width: 50vw;
    height: 16.7vw;
  }
  .hero {
    height: 128vw;
  }
  /*.article{
        min-height: calc(100vh - 17vw);
    }*/
  .rules {
    width: 92vw;
    font-size: 2.7vw;
  }
  #footer {
    padding: 3vw 0 3.5vw 0;
  }
  .foot {
    width: 64vw;
    height: 11vw;
  }
}

@media (max-width: 499px) {
  .rules {
    font-size: 13.5px;
    width: 90vw;
  }
}
/*# sourceMappingURL=main.css.map */