@charset "utf-8";
/*
######## 字體大小 ############
超大字 3.6vw
特大字 2.4vw
大字 1.6vw
中字 1.3vw;
小字 1.1vw
特小字 0.9vw;
超小字 0.7vw;

mobile
超大字 12vw
特大字 9vw
大字  6vw
中字  4.8vw;
小字 4vw;
特小字 3.6vw
超小字 3.2vw
to
超大字 10vw
特大字 8vw
大字  5vw
中字  4.2vw;
小字 3.6vw;
特小字 3.2vw
超小字 3vw
*/

/*正式開始*/
html, body{background:#FFF;font-weight:200;}
.show400{display:none!important;}
.show400inline{display:none!important;}
.hide400{display:initial;}
/* 字大小*/
.f08{font-size:0.8vw;line-height:1.2vw;}
.f10{font-size:1vw;line-height:1.4vw;}
.f12{font-size:1.2vw;line-height:1.7vw;}
.f15{font-size:1.5vw;line-height:2.2vw;}
.f20{font-size:2vw;line-height:2.8vw;}
.f30{font-size:3vw;line-height:4.5vw;}
.f50{font-size:5vw;line-height:7vw;}
.cffffff{color:#ffffff;}
.c595959{color:#595959;}
.c124e80{color:#124e80;}
.cEAB070{color:#EAB070;}
.c000000{color:#000000;}
.c9d887b{color:#9d887b;}
.cff0000{color:#ff0000;}
.ce1ce81{color:#e1ce81;}
.cutblock{position:relative;z-index:9;overflow:hidden;}/*共用..基本div 設定 relative;*/
.m00{margin:0;}
.m11{margin:1vw;}
.m10{margin:1vw 0;}
.m20{margin:2vw 0;}
.op0{opacity:0;}

select {  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;  appearance: none;  outline: 0;  box-shadow: none;  border: 0 !important;  background-image: none;}
select::-ms-expand {  display: none;}
.selectbox select{color:#393939;width:100%;padding: 0 0 0 .5vw;height:2.6vw;font-size:1.2vw;line-height:2.6vw;position: relative;display: block;background: rgba(138,149,173,0.3);}
.selectbox::after {  content: '\25BC';  position: absolute;  color: #eeeeee;  top: 0;  right: 0;  bottom: 0;  padding: 0 1vw;  background: #64899e;  pointer-events: none;  font-size:1.2vw;line-height:2.6vw;}
.selectbox:hover::after {  color: #ffffff;}
.selectbox::after {  -webkit-transition: .25s all ease;  -o-transition: .25s all ease;  transition: .25s all ease;}
.b{font-weight:800;}
.centerwrap{position:relative;width:68%;margin:0 auto;}
p{margin:1vw 0;}
p.m00{margin:0;}
p.b{margin-bottom:-0.8vw;}
ol{list-style: decimal inside;}
ol li{margin:0.3vw 0;}
ol li ol{margin-left:1.5vw;list-style:none;}
ol li ol li{
  counter-increment: my-awesome-counter;
}
ol li ol li:before {
  content: "(" counter(my-awesome-counter) ")";
  padding-right: 8px;
  letter-spacing: 0.1vw;
}
/*首頁*/
header{position:absolute;z-index:99;padding:1vw 2%;width:96%;}
.logoimg{float:left;height:2.6vw;}
.menuwrap{float:right;display:inline-block;}
.menuwrap span{position:relative;display:inline-block;margin-top:0.4vw;font-size:1.2vw;line-height:1.2vw;color:#fff;text-align:center;width:7vw;border-right:1px solid #fff;font-weight:500;}
.menuwrap span a{color:#fff;}
.menuwrap span:first-child{border-left:1px solid #fff;}
.menuwrap span img{position:absolute;left:50%;transform:translateX(-50%);bottom:-0.9vw;height:0.7vw;display:none;}
.menuwrap span.on img{display:block;}
.cut1text{position:absolute;top:42.5vw;left:0;width:100%;z-index:3;}
.submenu{position:absolute;top:37.5vw;left:0;width:100%;z-index:3;text-align:center;}
.submenubtn{width:12vw;display:inline;margin:0 1vw;-webkit-transition: all 0.3s; transition: all 0.3s;border-radius:1.1vw;}
.submenubtn:hover{box-shadow: 0.1vw 0.1vw 1vw rgba(0,0,0,0.5);-moz-box-shadow: 0.1vw 0.1vw 1vw  rgba(0,0,0,0.5);-webkit-box-shadow: 0.1vw 0.1vw 1vw  rgba(0,0,0,0.5);margin-top:-0.2vw;}
.cut2text{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%;z-index:3;}
.cut2gift{position:relative;text-align:center;}
.giftitem{position:relative;display:inline-block;}
.giftitem img{height:17vw;}
.cut3text{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%;z-index:3;}
.cut3p1{padding:0 3vw;}
.cut4text{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%;z-index:3;}
.cut4side{margin-left:8vw;margin-right:-8vw;}
#mapcut{height:20vw;background:#999999;}
footer{padding:1vw 0;background:#124e80;}
footer span{margin:0 1vw;}
/*遊戲頁*/
.gameblock{position:fixed;top:0;left:0;width:100%;height:100%;background:url(../img/gamebg.jpg) center center no-repeat; background-size:cover;overflow:hidden;}
#gamebox{position:absolute;width:64vw;height:33vw;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);background:#00335f;}
.gameslogan{position:absolute;width:20.5vw;left:-12vw;bottom:3vw;z-index:3;}
#gameqbox{position:relative;margin:0 0 1vw 0;}
#gameabox{position:relative;}
#gamecontent{position:absolute;width:74%;padding:0 4%;height:100%;top:0;right:0;z-index:1;}
#gameinfobox{position:relative;color:#fff;font-weight:400;text-align:right;padding:2vw 0 1vw 0;}
#infoqcnt{margin:0 0.5vw;font-size:1.2em;font-weight:800;}
#infotimetext{color:#ffec30;font-weight:400;}
#infotime{color:#ff0000;margin:0 0.5vw;font-weight:800;font-size:1.2em;}
.aselect{position:relative;height:5.2vw;width:40%;padding:0.3vw 2%;margin-left:4.5%;margin-bottom:1vw;float:left;border:0.3vw solid #124e80;}
.aselect.on{border:0.3vw solid #ffa42f;}
.aok{position:absolute;right:1vw;bottom:-0.8vw;height:2.4vw;width:2.4vw;border:0.4vw solid #ff0000;border-radius:1.6vw;}

.gamenextwrap{margin-top:2vw;}
.gamebtn{width:10vw;margin-left:3vw;}
.gamenext{float:right;}
/* gamepop */
#gamepop{position:fixed;z-index:999;width:26%;top:50%;left:50%;padding:1vw 0;transform:translateX(-50%) translateY(-50%);background:rgba(255,255,255,0.85);border:0.3vw solid #ffa42f;text-align:center;}
#gameresbox{position:absolute;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%);}
/* formpop */
#formpop{position:fixed;z-index:998;width:42%;top:50%;left:50%;padding:0.3vw;transform:translateX(-50%) translateY(-50%);background:rgba(255,255,255,1);border:0.3vw solid #fff;text-align:center;}
#formpopin{position:relative;border:0.3vw solid #00335f;overflow-y:auto;max-height:80vh;z-index:1;}
#formpopclose{position:absolute;top:-0.3vw;right:-0.3vw;z-index:2;text-align:center;border:0.6vw solid #fff;background:#124e80;height:3vw;width:3vw;}
#formpopclose i{font-size:2.2vw;line-height:3vw;}
.formbox{padding:1vw 0;}
.formline{margin:0.3vw;}
.formline span{padding:0.3vw 0;margin:0 1px;display:inline-block;border:1px solid #00335f;}
.formline span:nth-child(1){width:18%;}
.formline span:nth-child(2){width:18%;}
.formline span:nth-child(3){width:50%;}
.formline span.tr{background:#00335f;}
.formline input{width:60%;padding:0.5vw 1vw;margin:0.3vw auto;border:1px solid #ccc;}
.formline textarea{width:60%;padding:0.5vw 1vw;margin:0.3vw auto;border:1px solid #ccc;height:6vw;}
/* 1000 以下顯示  平板版本--影片改圖騙    */
@media screen and (max-width: 979px) {
  h1,h2{margin:3vw 0;}
  h3,h4{margin:0;}
  .show400{display:block!important;}
  .show400inline{display:inline-block!important;}
  .hide400{display:none!important;}
  .centerwrap{position:relative;width:90%;margin:0 auto;}
  .m11{margin:3vw;}
  .m10{margin:3vw 0;}
  .m20{margin:6vw 0;}
  .f08{font-size:2.4vw;line-height:3.4vw;}
  .f10{font-size:3vw;line-height:4.2vw;}
  .f12{font-size:3.6vw;line-height:5.1vw;}
  .f15{font-size:4.5vw;line-height:6.6vw;}
  .f20{font-size:6vw;line-height:8.4vw;}
  .f30{font-size:9vw;line-height:15vw;}
  .f50{font-size:15vw;line-height:22vw;}
  p{margin:3vw 0;}
   header{position:absolute;z-index:99;padding:3vw 2%;width:96%;}
  .logoimg{position:relative;float:left;height:6vw;z-index:99;}
  i.mmenuicon{position:relative;float:right;font-size:6vw;line-height:8vw;width:8vw;z-index:99;color:#fff;-webkit-transition: .5s all ease;  -o-transition: .5s all ease;  transition: .5s all ease;}
  .menuwrap{position:fixed;width:100%;height:calc(100% - 16vw);top:0;left:101%;padding-top:16vw;background:#444444;float:none;display:block;z-index:97;}
  .menuwrap span{position:relative;display:block;margin:6vw 0;font-size:3.6vw;line-height:5vw;color:#fff;text-align:center;width:100%;border-right:0;font-weight:500;}
  .menuwrap span:first-child{border-left:0;}
  .menuwrap span img{position:absolute;left:50%;transform:translateX(-50%);bottom:-2vw;height:2vw;display:none;}
  .menuwrap span.on img{display:block;}
  .cut1text{position:absolute;top:140vw;left:0;width:100%;z-index:3;}
  .submenu{position:absolute;top:67vw;left:0;width:100%;z-index:3;text-align:center;}
  .submenubtn{width:30vw;display:block;margin:5vw auto;}
  .submenubtn:hover{box-shadow: 0.1vw 0.1vw 0vw rgba(0,0,0,0.5);-moz-box-shadow: 0.1vw 0.1vw 0vw  rgba(0,0,0,0.5);-webkit-box-shadow: 0.1vw 0.1vw 0vw  rgba(0,0,0,0.5);margin-top:5vw;}
  .giftitem img{height:auto;width:50vw;}
  .cut3text{margin-top:-10vw;}
  .cut3p1{padding:0 0 30vw 0;}
  .cut4side{margin:0;}
  .cut4text{margin-top:-4vw;}
  .cut4logo{width:80%;margin:3vw auto 5vw auto;}
  #mapcut{height:80vw;background:#999999;}
  /*遊戲頁*/
  .gameblock{overflow-y:auto;}
  #gamebox{position:absolute;width:94%;height:80%;top:10vw;min-height:135vw;left:3%;transform:none;background:#00335f;}
  .gameslogan{position:absolute;width:100%;left:0;bottom:auto;top:-8vw;z-index:3;}
  #gameqbox{margin:3vw 0;}
  #gamecontent{position:absolute;width:90%;padding:0 5%;height:80%;top:16vw;right:0;z-index:1;}
  #infoqcnt{margin:0 1vw;}
  #infotime{margin:0 1vw;}
  .aselect{position:relative;width:70%;padding:0.3vw 5%;height:auto;margin-left:10%;margin-bottom:3vw;float:left;border:1vw solid #124e80;}
  .aselect.on{border:1vw solid #ffa42f;}
  .aok{position:absolute;right:3vw;bottom:-2vw;height:6vw;width:6vw;border:1vw solid #ff0000;border-radius:4vw;}

  .gamenextwrap{margin-top:0vw;text-align:right;}
  .gamebtn{width:30vw;margin:0 6vw;}
  .gamenext{float:none;}
  #gamepop{position:fixed;z-index:999;width:70%;top:50%;left:50%;padding:3vw 0;transform:translateX(-50%) translateY(-50%);background:rgba(255,255,255,0.8);border:1vw solid #ffa42f;text-align:center;}
  #gameresbox{position:absolute;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%);}
  /* formpop */
  #formpop{position:fixed;z-index:998;width:90%;padding:1vw;border:1vw solid #fff;}
  #formpopin{border:1vw solid #00335f;overflow-y:auto;max-height:80vh;z-index:1;}
  #formpopclose{position:absolute;top:-1vw;right:-1vw;border:2vw solid #fff;height:9vw;width:9vw;}
  #formpopclose i{font-size:7vw;line-height:9vw;}
  .formbox{padding:3vw 0;}
  .formline{margin:1vw;}
  .formline span{padding:1vw 0;margin:0 1px;display:inline-block;border:1px solid #00335f;}
  .formline span:nth-child(1){width:15%;}
  .formline span:nth-child(2){width:25%;}
  .formline span:nth-child(3){width:50%;}
  .formline input{width:80%;padding:1.5vw 3vw;margin:1vw auto;border:1px solid #ccc;}
  .formline textarea{width:80%;padding:1.5vw 3vw;margin:1vw auto;border:1px solid #ccc;height:20vw;}
  footer{padding:5vw 0;background:#124e80;}
  footer span{display:inline-block;margin:2vw 2%;width:80%;}
}