*{
  margin: 0px;
  padding: 0px;
  font-family: 微軟正黑體,Adobe繁黑體Std B,Microsoft JhengHei, Lucida Sans Unicode, Arial, Helvetica, Verdan;    
}
.stampToptxt{
  color: #4a0b0b;
}
canvas#qr-canvas,#v {
    position: absolute;
    top: 79vw;
    left: 16vw;
    width: 68vw;
    height: 108vw;
}
html, 
body {
    height: 100%;
    overflow-x: hidden;
}
html.lock, body.lock {
    overflow: hidden;
}
.loader {
  border: 5vw solid #f3f3f377;
  border-radius: 50%;
  border-top: 5vw solid #fdb91277;
  width: 25vw;
  height:25vw;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  top:50%;
  left: 50%;
  margin: -15vw;
  position: absolute;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading,.GotStampPanel,.GotStampPanel2,.GotGamePanel,.errorgps,.QRcodePage{
  top:0px;
  width: 100%;
  height:100%;
  background-color: #00000066;
  position:fixed;
    overflow: auto;
    z-index: 1000;
    left: 0vw;
}.errorgps .howtoplayPanel {
    top: 18vw;
}
.GotStampPanel2 .stampToptxt {
    top: 40vw;
}
.Redeemed img{
display: none;
}
body{
  background-color: #fdb912
}
.GamePage{
  overflow-x:hidden;
}
.mainFrema,.howtoplay,.regPage,.GamePage{
  width: 100%;
  min-height: 100%;
    position: absolute;
}
.logo1{
  width: 100%;
      transform: scale(1.05);
    margin-top: 2vw;
    margin-left: -2vw;

}
.overbtn{
  opacity: 0.7;
}
.plk_title {
    width: 87%;
    margin: 27px auto;
    display: block;
}
.btn_play{
    width: 35vw;
    margin-top: 3vh;
    margin-bottom: 3vh;
}
.title1{font-size: 6.7vw;}
.title2{
  font-size: 4.4vw;
  line-height: 3vw;
}
.title{
  text-align: center;color: #4a0b0b
}
.bottombar {
    height: 3vh;
    background-color: rgb(109,52,133);
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.howtoplay {
}

.close_pop{
  margin-top: 2vh;
  margin-left:5vw;
  width: 12vw;
    position: absolute;
}
.howtoplaybtn_back,.regPagebtn_back,.GamePage_back{
  margin-top: 2vh;
  margin-left:5vw;
  width: 12vw;
  /* margin-bottom:  2vh; */
}
.QRcodePage .howtoplayTc {
    position: absolute;
    top: 45vw;
    left: 24vw;
    color: #4a0b0b;
}
.GamePage_howToPlay{
   margin-top: 2vh;
  right:5vw;
  width: 12vw;
}
.GamePage_back,.GamePage_howToPlay{

    position: absolute;
}
.howtoplayPanel,.howtoplayPanel2{
  position: relative;
  padding: 5%;
  padding-top: 1%;
}
.howtoplayPanel2{
  margin-top: 20vw
}
.howtoplayPanelBG {
    width: 90%;
    position: absolute;
    z-index: -1;
    margin: 0px auto;
}
.howtoplayPanelscrollbroder{
    margin-top: 27%;
    margin-left: 5%;
    font-size: 60px;
    width: 90%;
    height: 81%;
    overflow: auto;
}
.errorgps .howtoplayPanelscrollbroder{
    margin-top: 9%;

}
.howtoplayPanelscrollbroder td{
  vertical-align: top;
  color: #4a0b0b;
    padding-bottom: 3vh;
}
.GamePage > img {
    position: absolute;
}
.listnum {
    display: inline-block;
    width: 5vw;
    height: 5vw;
    vertical-align: top;
    background-color: #4a0b0b;
    line-height: 5.4vw;
    font-size: 2.7vw;
    text-align: center;
    color: #FFF;
    border-radius: 50%;
    margin-right: 4vw;
}
button.button.btn_play {
    height: 19vw;
}
button.nexthowtoplay,.RegNext,.StampNext,.RedeemNext,.sendToSerNext,.GamePage_howToPlay,.btn_play,.Donatebtn >button {
    width: 65vw;
    height: 11vw;
    font-size: 5vw;
    background-color: #440b0b;
    color: rgb(252,223,133);
    border-radius: 1vw;
    margin-bottom: 3vh;
    border: 0px;
}.RedeemNext{

    height: 13vw;
    width: 60vw;
    margin-top: 9vw;
}
.RegNext,.StampNext{
     margin-top: 3vh;
    margin-bottom: 9vh;
    height: 14vw;
}
.StampNext{

    margin-left: 5.1vw;
}
.regPanel {
       width: 82vw;
       background-color: rgb(253,224,134);
       margin: 3vh auto;
       padding: 3vw;
       border-radius: 2vw;
       font-size: 5vw;
}
.regtitle{
    font-size: 6vw;
    margin-bottom: 4vh;
    margin-top:4vh;
    margin-left: 4vw;
}.reginputRow {
    height: 16vw;
    border-radius: 1.3vw;
    background-color: rgb(234,203,122);
    margin-bottom: 3vw;
    
    width: 80%;
    margin-left: 10%;
}
.UnRedeemPanel .reginputRow{
  background-color: rgb(254,231,127);
}
.reginputRow input {
    font-size: 4vw;
    height: 8vw;
    margin-top: 4vw;
    margin-left: 4vw;
    width: 91%;
    border: 0px;
    background-color: transparent;
    color: #440b0b;
}
.UnRedeemPanel .reginputRow input{ 
  color: #440b0b;
  text-align: center;
}
.reginputRow input::placeholder { 
    color: #440b0bcc;font-weight: bold;

 }
.UnRedeemPanel .reginputRow input::placeholder { 
    color: rgba(181,158,62,192);font-weight: bold;

 }
 .regText{
    text-align: left;    font-size: 4vw;    padding: 1vw 9vw;
 }
 .GamePagePage .button{

    z-index: 100;
 }
 .regError{
    color: rgb(199,7,0);
    font-size: 4vw;
    height: 13vw;
    padding: 0px 11%;
    line-height: 5vw;
 }
 .GotGamePanel .regError{
    height: 7vw;
 }.howtoplayTc {
    font-size: 5vw;
}
.game_b{
  margin-top: 5%;
    position: absolute;
}
.gamebg{margin-top: -17%;width: 100%;}


.Stamp1 {
    background-image: url(/image/stamp1-1.png?v=0012);
    width: 48.194444vw;
    height: 52.361111vw;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    top: 12.7%;
    left: 6.2%;
    position: absolute;
}
.Stamp1.got{
  background-image: url("/image/stamp1-2.png?v=0012");
}
.Stamp1 img {
    width: 30%;
    top: 46%;
    position: absolute;
    left: -2%;
}



.Stamp2 {
    background-image: url(/image/stamp2-1.png?v=0012);
    width: 48.194444vw;
    height: 48.194444vw;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    top: 25.4%;
    left: 49%;
    position: absolute;
}
.Stamp2.got{
  background-image: url("/image/stamp2-2.png?v=0012");
}
.Stamp2 img {
    width: 30%;
    top: 43%;
    position: absolute;
    left: -5%;
}



.Stamp3{
  background-image: url("/image/stamp3-1.png?v=0012");
  width: 48.194444vw;
  height: 48.194444vw;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  top: 38.5%;
  left: 12%;
}
.Stamp3.got{
  background-image: url("/image/stamp3-2.png?v=0012");
}
.Stamp3 img {
    width:30%;
    top: 45%;
    position: absolute;
    left: -12%;
}

.Stamp4{
  background-image: url("/image/stamp4-1.png?v=0012");
  width: 48.194444vw;
  height: 48.194444vw;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  top: 56%;
  left: 38.5%;
  position: absolute;
}
.Stamp4.got{
  background-image: url("/image/stamp4-2.png?v=0012");
}
.Stamp4 img {
    width: 30%;
    top: 48%;
    position: absolute;
    left: 84%;
}

.Stamp_history_broder{
  border-radius: 6vw;
  background-color: #FFE082;
  margin: 6vw;
  padding: 3vw;
}
.Stamp5{
  background-image: url("/image/stamp5-1.png?v=0012");
  width: 48.194444vw;
  height: 52.361111vw;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  top: 68.3%;
  left: 3%;
  position: absolute;
}
.Stamp5.got{
  background-image: url("/image/stamp5-2.png?v=0012");
}
.Stamp5 img {
    width: 30%;
    top: 61%;
    position: absolute;
    left: 79%;
}

.Stamp_img {
   position: absolute;
    top: 0px;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background-position: 50%;
    background-size: cover;
    left: 25vw;
    top: 11vw;
}
.Stamp1_img {
    background-image: url(/image/stamp1-3.png?v=0012);

}

.Stamp2_img{
    background-image: url(/image/stamp2-3.png?v=0012);
  
}
.Stamp3_img{
    background-image: url(/image/stamp3-3.png?v=0012);
  
}
.Stamp4_img{
    background-image: url(/image/stamp4-3.png?v=0012);
  
}
.Stamp5_img{
    background-image: url(/image/pic_stamp5.svg?v=0012);
  width: 100vw;
    left: 0px;
}
.stamp_bg{
    width: 78vw;
    margin-left: 11vw;
    margin-top: 26vw;
}
.stamp_bg2{
    margin-top: 13vw;

}
.Stamp_top_txt_1_4{
  height: 29.6vw;
}
.GotStampPanel2 .Stamp_top_txt_3{

    font-size: 5.5vw;
    line-height: 7vw;
}
.GotStampPanel2  .Stamp_top_txt_1{  
    font-size: 5.5vw;
    line-height: 6vw;
}
.Stamp_top_txt_1{  
    font-size: 5.5vw;
    line-height: 8vw;
}
.Stamp_top_txt_2{  
}
.Stamp_top_txt_3{  
    font-size: 5.5vw;
    line-height: 8vw;
}
.GotStampPanel2 .Stamp_top_txt_3{

    font-size: 5.5vw;
    line-height: 7vw;
    margin-top: 3vw;
}
.GotStampPanel2 .Stamp_top_txt_4{  
    font-size: 4.2vw;
    padding: 0vw 5vw;
}

.Stamp_top_txt_4{  
    font-size: 4.2vw;
}
    padding: 0vw 5vw;
.stampToptxt .StampNext {
    width: 60vw;
    
    margin-top: 5vw;
    margin-left: 8vw;
}
.sendToSerNext{
   width: 60vw;
    
    margin-top: 5vw;    height: 25vw;
}
.redeemtext{

    font-size: 5vw;
}
.stampToptxt{
  position: absolute;
    top: 66vw;
    font-size: 5vw;
    width: 78vw;
    margin: 0px 11vw;
    text-align: center;

}
.GotStampPanel2 .Stamp_history{

    width: 68vw;
    height: 105vw;
    margin-top: 24.2vw;
    margin-left: 5vw;
    overflow: auto;

}
.Stamp_history {
    width: 61vw;
    height: 60.5vw;
    /* margin-top: 7.1vw; */
    /* margin-left: 5vw; */
    overflow: auto;
}
.Stamp_history_tc {
    font-size: 4vw;
    text-align: left;
    padding: 2vw;
}
.stampToptxt .title{

    position: absolute;
        top: 100vw;
}
.Stamp_history_en {
    font-size: 4vw;
    text-align: left;
    padding: 0vw 2vw

}

img.icon_redeem {
       width: 10vw;
    height: 10vw;
    object-fit: contain;
}
.RedeemPanel {
    position: absolute;
    top: 130vw;
    width: 78vw;
    margin-left: 11vw;
}
.redeemtext{
  font-size: 5vw
}

img.icon_redeem2 {
    width: 22vw;
    margin-bottom: 3vw;
    margin-top: 3vw;
}

.RedeemedPanel.RedeemPanel {
    background-color: rgb(254,224,133);
    padding-top: 5vw;
    width: 62vw;
    margin-left: 19vw;
    border-radius: 2vw;
    padding-bottom: 5vw;
}img.icon_tick {
    width: 8vw;
    margin-right: 2vw;
}
.Donatebtn{position: absolute;top: 369vw;left: 10vw;height: 25vw;width: 80vw;}
.Donatebtn >button{height: 100%;width: 100%;}
@media screen and (orientation: landscape) {
  .mainFrema{
    width: 100vw;
    margin: auto;
  }
  .howtoplayTc{
    font-size: 5vw
  }
  .nexthowtoplay{
    height: 15vw;
  }
}
@media screen and (orientation: portrait) {
   .mainFrema{
    width: 100vw;
  }
  
  .gamebg{
    width: 120%;
    margin-left: -10%;
  }
}