@charset "UTF-8";
.forgetpw {
  color: #fff;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2 {
  margin-bottom: 2%;
}

.mt-2 {
  margin-top: 2%;
}

.mobonly {
  display: block;
}

.none {
  display: none !important;
}

.contents {
  height: calc(100% - 112px);
  overflow: auto;
}

.toplogo {
  background: #39304D;
  width: 100%;
  padding: 12px 20px 2px 20px;
}

.toplogo img {
  max-width: 40px;
}

.indexpage {
  height: auto;
  padding: 0 0px;
  width: 100%;
  margin: 0 auto;
  /**.mainview{
    width: 95%;
    margin: 0 auto;
    max-width: 700px;
    z-index: 3;
    position: relative;
  }

  .q-title{
    img{
      width: 100%;
      max-width: 245px;
    }
  }*/
}

.indexpage .toparea {
  padding: 0vh 0vw 0px 0vw;
}

.indexpage .logo {
  margin: 0 0 10px 0;
}

.indexpage .logo img {
  max-width: 245px;
}

.indexpage .dbg {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  right: 0;
  z-index: 0;
}

.topindex {
  background: #1F1A30;
  height: 100%;
}

.topindex form {
  margin: 0 0 5% 0;
}

.topindex .secboard {
  padding: 0 30px;
  max-width: 600px;
  margin: 0 auto;
}

.qusetiontime {
  background: #1F1A30;
  /*.q-title{
    img{
      width: 100%;
      max-width: 245px;
    }
  }*/
}

.qusetiontime input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.qusetiontime .custom-file-upload {
  border: 1px solid #707070;
  display: inline-block;
  text-align: center;
  padding: 70px 0;
  cursor: pointer;
  border-radius: 10px;
  background: #39304D;
  font-size: 2.5em;
  margin: 0 0 0 0;
}

.qusetiontime .label {
  display: block;
  float: left;
  text-align: left;
  margin: 0 0 5px 0;
  width: 100%;
  font-size: 18px;
  letter-spacing: 0;
  color: #B2B2B2;
  padding: 0 0 10px 0;
}

.btnarea {
  position: fixed;
  bottom: 0;
  background-color: #171424;
  z-index: 2;
  border-radius: 15px 15px 0 0;
}

.btnarea .fourbtn {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 15px 0px;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.btnarea .fourbtn .singlebtn {
  margin: 0 0px;
}

.btnarea .fourbtn .singlebtn a {
  background: #39304D;
  padding: 15px 13px 10px 13px;
  border-radius: 10pt;
}

.btnarea .fourbtn .singlebtn a:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#17F1DE), to(#035C8F));
  background: linear-gradient(#17F1DE, #035C8F);
}

.btnarea .fourbtn .singlebtn a p {
  text-align: center;
  letter-spacing: 0px;
  font-size: 14px;
  color: #fff;
}

.btnarea .fourbtn .singlebtn a p i {
  font-size: 2em;
  margin: 0 0 5px 0;
}

.board {
  width: 100%;
  /*background: aqua;*/
  height: 50px;
  margin: 0% auto;
  max-width: 600px;
  z-index: 2;
  position: relative;
}

.board .que-ansarea {
  padding: 10vh 0px 5vh 0;
}

.board .que-ansarea .point-circle {
  border: 2px solid #17F1DE;
  border-radius: 999em;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}

.board .que-ansarea .point-circle p {
  text-align: center;
  font-size: 45px;
  font-weight: bolder;
  line-height: 320px;
  width: 320px;
  height: 320px;
}

.board .que-ansarea .point-circle p:before {
  content: "我的點數";
  width: 100%;
  color: #fff;
  font-size: 45px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -65%);
          transform: translate(-50%, -65%);
}

.board .que-ansarea .point-circle .money {
  color: #17F1DE;
}

.board .que-ansarea .secboard {
  padding: 0 30px;
}

.board .que-ansarea .secboard p {
  color: #17F1DE;
  text-align: center;
  font-size: 35px;
  line-height: 1em;
  font-weight: bold;
  padding: 0 0 5% 0;
  letter-spacing: 0.5px;
}

.board .que-ansarea .secboard .qrpic {
  padding: 20px 20px;
  background: #fff;
  text-align: center;
  border-radius: 15px;
}

.board .que-ansarea .secboard .sttrans {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
}

.board .que-ansarea .secboard .confirm {
  border: 1px solid #707070;
  border-radius: 15px;
  padding: 15px 15px;
  background: #39304D;
  text-align: center;
}

.board .que-ansarea .secboard .confirm .titles {
  color: #B2B2B2;
  font-size: 1.25em;
  letter-spacing: 0;
  padding: 15px 0 15px 0;
}

.board .que-ansarea .secboard .confirm .innerval {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  padding: 0px 0 15px 0;
}

.board .que-ansarea .secboard .confirm .hr {
  height: 2px;
  background: #B2B2B2;
}

.board .que-ansarea .secboard .mine {
  font-size: 20px;
  color: #B2B2B2;
}

.board .que-word {
  width: 85%;
  margin: 0 auto;
}

.board .que-word p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  color: #e7d8b1;
  font-size: 1rem;
}

.horse.qusetiontime {
  background: #202020;
}

.horse.btnarea {
  background: #2D2D2D;
}

.horse.btnarea .fourbtn .singlebtn a {
  background: #424242;
}

.horse .toplogo {
  background: #FFC72A;
}

.horse .board .que-ansarea {
  padding: 10vh 0px 5vh 0;
}

.horse .board .que-ansarea .point-circle {
  border: 2px solid #FFC72A;
}

.horse .board .que-ansarea .point-circle .money {
  color: #FFC72A;
}

.horse .board .que-ansarea .point-circle p {
  line-height: 350px;
}

.horse .board .que-ansarea .point-circle p:before {
  content: "今日點數";
  font-size: 35px;
  -webkit-transform: translate(-50%, -60%);
          transform: translate(-50%, -60%);
}

.horse .board .secboard p {
  color: #FFC72A;
  font-size: 30px;
}

.horse .board .secboard .fromnow {
  padding: 20px 10px;
  color: #fff;
  font-weight: bold;
  font-size: 1.8em;
}

.horse .board .secboard .history {
  background: #FFC72A;
  padding: 20px 10px;
  color: #000;
  font-weight: bold;
  font-size: 1.8em;
  border-radius: 10px;
}

.horse .board .secboard label i {
  margin: 0 5px 0 0;
}

.horse .tranrecord thead {
  background: #FFC72A;
  color: #000;
  border-radius: 10px 10px 0 0;
}

.horse .tranrecord thead th {
  padding: 8px 10px;
}

.horse .tranrecord tbody tr {
  letter-spacing: 0px;
  font-size: 14px;
  background: #2D2D2D;
  color: #fff;
}

.horse .tranrecord tbody tr:nth-child(odd) {
  background: #424242;
}

.horse .tranrecord tbody tr td {
  padding: 8px 2%;
}

.horse .input {
  background: #424242;
  padding: 12px 15px;
}

.horse .input:focus {
  border: 1px solid #FFC72A;
}

.horse input[type="submit"] {
  background: #FFC72A;
  color: #000;
  font-weight: bold;
}

.pages {
  color: #fff;
  font-size: 14px;
  margin: 5% 0 0 0;
}

@media only screen and (min-width: 768px) {
  .indexpage .toparea {
    padding: 0px 0px 0px 0;
  }
  .indexpage .toparea.top-sm {
    padding: 20px 33% 0px 33%;
  }
  .indexpage .openmap {
    width: 55%;
    max-width: 350px;
  }
  .indexpage .openmap p {
    font-size: 1.6rem;
    font-weight: bold;
    -webkit-transform: translate(0%, -190%);
            transform: translate(0%, -190%);
  }
  .indexpage .logo {
    margin: 0 0 10px 0;
  }
  .indexpage .logo img {
    max-width: 300px;
  }
  .btnarea .fourbtn {
    max-width: 500px;
  }
}

@media screen and (min-width: 1000px) {
  .mobonly {
    display: none;
  }
  .webonly {
    display: block;
  }
  .topindex {
    height: 100%;
  }
  .topindex .secboard {
    max-width: 500px;
  }
  .indexpage {
    height: 100%;
  }
}

@media (max-width: 340px) {
  .btnarea .fourbtn .singlebtn a {
    padding: 15px 10px 10px 10px;
  }
}

@media screen and (max-height: 790px) {
  .dbg {
    position: relative !important;
  }
}
/*# sourceMappingURL=page.css.map */