html, body {
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
  line-height: 2.5em;
}
h1{
  display: none;
}
.wrapper{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrapper.wrapper_star31{
  background-image: url(../images/bg_star31.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #101123;
}
.wrapper.wrapper_star31Ad{
  background-image: url(../images/bg_star31_2.jpg?20241014);
  background-position: center 45%;
  background-repeat: no-repeat;
  background-color: #040323;
  background-size:auto;
}
@media screen and (min-width: 768px) {
  .wrapper.wrapper_star31Ad{
    background-size: contain;
  }
}
.wrapper.wrapper_donut{
  background-image: url(../images/bg_donut.jpg?20240223);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000000;
}
.wrapper.wrapper_tmd{
  background-image: url(../images/bg_tmd.jpg?20240223);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #190072;
}
.content{
  position: relative;
  max-width: 900px;
  height: 1100px;
  max-height: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-justify: center;
      -ms-flex-justify: center;
          justify-content: center;
}
.wrapper.wrapper_star31 .content .button {
  position: absolute;
  display: block;
  width: 531px;
  height: 157px;
  bottom: 5%;
  padding-bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.wrapper.wrapper_star31Ad .content .button {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 720px;
  height: 105px;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}

@media screen and (min-width: 768px) {
  .wrapper.wrapper_star31Ad .content .button {
    width: 510px;
  }
}
.wrapper.wrapper_star31Ad .content .button a{
  width:48%;
  display: block;
  background-size:100% auto;
  background-repeat: no-repeat;
}
.wrapper.wrapper_star31Ad .content .button a.ios{
  background-image:url(../images/icon_appstore.png?202410142);
}
.wrapper.wrapper_star31Ad .content .button a.google{
  background-image:url(../images/icon_googleplay.png?202410142);
}
.wrapper.wrapper_donut .content .button {
  position: absolute;
  display: block;
  width: 531px;
  height: 157px;
  bottom: 17%;
  padding-bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.wrapper.wrapper_tmd .content .button {
  position: absolute;
  display: block;
  width: 523px;
  height: 178px;
  bottom: 6.5%;
  padding-bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.wrapper.wrapper_star31Ad .content .caption , .wrapper.wrapper_star31Ad .content .text{
  position: absolute;
  top: 59.5%;
  width: 693px;
}

@media screen and (min-width: 768px) {
  .wrapper.wrapper_star31Ad .content .caption ,.wrapper.wrapper_star31Ad .content .text {
    top: 57.5%;
    width: 510px;
  }
  .wrapper.wrapper_star31Ad .content .text{
    top: 70.5%;
  }
}

.wrapper.wrapper_star31Ad .content .caption p {
  color: #ffffff;
  font-size: 1em;
  padding: 0.5em 0.7em;
  text-shadow: black 0.1em 0.1em 0.2em, black 0.1em 0.1em 0.2em, black 0.1em 0.1em 0.2em;
  background-color: #061d2f;
  border-radius: 1em;
  line-height: 1.8em;

}

.wrapper.wrapper_star31Ad .content .text{
  top:67%;
}

.wrapper.wrapper_star31Ad .content .text p{
  color: #92b3ff;
  font-size: 1em;
  padding: 0.5em 0.7em;
  line-height: 2em;
}

.wrapper.wrapper_star31Ad .content .text p img{
  width: 2.5em;
}

.button.btn_star31{
  background-image: url(../images/button_star31.png);
}
.button.btn_star31Ad{
  //background-image: url(../images/button_star31_2.png);
}
.button.btn_donut{
  background-image: url(../images/button_donut.png);
}
.button.btn_tmd{
  background-image: url(../images/button_tmd.png);
}
.button.btn_star31 a{
  display: block;
  width: 100%;
  height: 157px;
}
.button.btn_star31Ad a{
  display: block;
  width: 100%;
  height: 157px;
}
.button.btn_donut a{
  display: block;
  width: 100%;
  height: 142px;
}
.button.btn_tmd a{
  display: block;
  width: 100%;
  height: 178px;
}

@media only screen and (max-width: 1279px){
  .wrapper{
    height: 100vh;
  }
  .wrapper.wrapper_star31Ad{
    background-position: center 35%;
    background-size:auto 100%;
  }
  .content{
    width: 100%;
  }
  .content .button {
    width: 55%;
    height: 0;
    padding-bottom: 16.5%;
    background-size: 100%;
    bottom: 2%;
  }
  .wrapper.wrapper_star31Ad .content .button,.wrapper.wrapper_star31Ad .content .text {
    top: 65%;
    width: 94%;
  }
  .wrapper.wrapper_star31Ad .content .caption,.wrapper.wrapper_star31Ad .content .text {
    position: absolute;
    top: 76%;
    width: 90%;
    font-size: 1.8em;
  }

  .wrapper.wrapper_star31Ad .content .text{
    top: 92%;
  }
  .button.btn_star31 a{
    height: 0;
    padding-bottom: 30.5%;
  }
  .button.btn_star31Ad a{
    height: 0;
    padding-bottom: 15.5%;
  }
  .button.btn_donut a{
    height: 0;
    padding-bottom: 30.5%;
  }
  .button.btn_tmd a{
    height: 0;
    padding-bottom: 34.5%;
  }
}

@media only screen and (max-width: 811px){
  .wrapper.wrapper_star31{
    background-size: 130%;
  }
  .wrapper.wrapper_donut{
    background-size: 130%;
  }
  .wrapper.wrapper_tmd{
    background-size: 130%;
  }
}

@media only screen and (max-width: 500px){
  .content .button {
    bottom: 12%;
  }
}