@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
html{font-size:15px;overflow-x: hidden;}

body{ margin:0; padding:0; background:rgb(0, 0, 0);font-size: 1rem;max-width: 1920px; margin: 0 auto;background:url(../images/bg.webp) repeat-x left top; background-size:100% auto;background-color:#070015;
    color: rgb(0, 0, 0);font-family:"Noto Sans TC", sans-serif, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; position:relative; }

*{ /*chrome*/-webkit-box-sizing:border-box; /*firefox*/-moz-box-sizing:border-box; box-sizing:border-box; }
*:focus { outline:none; }/*去除藍框*/
input,button,select,textarea{ outline:none }/*去除藍框*/
/* span{display: inline-block;} */
/*像素比例尺*/
.ruler{ height:18px;  background:url(../images/ruler.png) no-repeat left top; background-size: cover; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}
.clear{ height:0; clear:both; font-size:0em!important;}
img{ width:100%; height:auto; }
.l{ display:block; }  
.s{ display:none; }
body > table {
    z-index: 1;
    position: relative;
  }
.wrapper{width:100%;margin: 0 auto;position:relative;
    list-style-type: none;
    display: inline-block;
    transition: transform 0.3s ease-in-out;overflow: hidden;}
.top_coin{width:100%; height:100%;position:absolute;top: 0;left: 0;}
.coinmove1{width:15.5%;max-width:155px;top:0;right:-10%;position:absolute;z-index:1 }
.coinmove2{width:18.7%;max-width: 187px; top: -3vw;left: -10vw;position:absolute;z-index:9;}
.coinmove3{width: 22.3%;max-width: 223px; top: 12vw; left: -10vw;position:absolute;z-index:1 }
.coinmove4{width: 11.8%; max-width: 118px; top:26vw; left: 0%;position:absolute;z-index:1; }
.coinmove5{width: 19.9%;max-width: 199px; top: 30vw; left: 50vw;position:absolute;z-index:1 }
.coinmove6{width: 24.3%; max-width: 243px; top: 40vw; left: -15vw;position:absolute;z-index:1; }

.page{width:52%;max-width: 1000px;margin: 0 auto;position: relative;z-index:999; }
.top{width: 100%;position: relative;}
.logo{width:32%; position: relative;top:1vw;left: 2vw; animation-delay: 1.5s;}
.pp{width:76.9%;position: absolute;left:22vw;top: -1vw;}
.gift{width:56.5%;max-width: 565px;position: relative;top:-3vw;left: 5vw;}
.tt1{width: 100%;margin-top: -10vw;}
.tt2{width: 70%;margin: 0 auto; margin-top: -4vw;filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));}

.btn_block{width:90%;margin: 0 auto; position: relative;padding-top: 1vw;}
.btn_block ul{width: 80%;margin: 0 auto; display:flex;justify-content:center;justify-content:space-between;}
.btn_block ul li{width: 49%;filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));}
.btn_block li,.btn_block li a{background-repeat:no-repeat; background-size:100%; top:0; transition:all 0.3s; display:block;}
.btn_block li a{opacity:0;}
/* .btn_block li:hover a{ opacity:1; filter: brightness(1.1);} */
.btn_download{background-image:url("../images/btn_download.webp");animation:btn_ef 1s infinite alternate;}
.btn_download a{background-image:url("../images/btn_download_ov.webp");}
.btn_lottery{background-image:url("../images/btn_lottery.webp");animation:btn_ef 3s infinite alternate;}
.btn_lottery a{background-image:url("../images/btn_lottery_ov.webp");}

/* 按鈕HOVER不在手機啟動變成按兩次，把hover寫在這裡 */
@media (hover) {
  .btn_block li:hover a{ opacity:1; filter: brightness(1.1);}

}
/*----發光效果-----*/
.sparkle_box{width:100%;/* height:100px; */opacity:1;position:absolute;
	transition:all 0.2s ease-out; /*chrome*/-webkit-transition:all 0.2s ease-out; /*firefox*/-moz-transition:all 0.2s ease-out; }
.sparkle{position: absolute;opacity:1;top: 0;left: 0; }
.sparkle_box .sparkle:nth-child(1){width:12%;max-width:37px;top:3vw;left:-.5vw;animation:sparkle 0.5s infinite 0s;}
.sparkle_box .sparkle:nth-child(2){width:10%;max-width:27px;top:-.5vw;left:5vw;animation:sparkle 0.5s infinite 0.3s;}
.sparkle_box .sparkle:nth-child(3){width:19%;max-width:57px;top:-1.5vw;left:14vw;animation:sparkle 0.5s infinite 0.5s;}
.sparkle_box .sparkle:nth-child(4){width:10%;max-width:28px;top:4.5vw;left:15vw;animation:sparkle 0.5s infinite 0.8s;}

@keyframes sparkle {
	0%{
		transform: scale(1);opacity:0;
	}
	50%{
		transform: scale(1.1);opacity:1;
	}
	100%{
		transform: scale(1);opacity:0;
	}
}

.form{width: 100%;position: relative;}
.labar_block{width: 100%;position: relative;top: 1.5vw;}
.countdown_title{font-size: 3.5rem; color: #fffcf6;  position: absolute;  top: 4vw; left: 50%; transform: translateX(-50%);font-family:'微軟正黑體', sans-serif;	font-weight: bold;text-shadow: 0px 0px 10px rgba(2, 2, 2, 1),0px 0px 10px rgb(6, 6, 6),0px 0px 10px rgb(5, 5, 5); }
/* 倒數計時 */
.countdown{width: 100%;  font-size: 5rem;  color: #f8eedc;
  text-shadow: 0px 0px 10px rgba(2, 2, 2, 1),0px 0px 10px rgb(6, 6, 6),0px 0px 10px rgb(5, 5, 5);
  position: absolute; z-index: 1; top: 8vw;  left: 50%;  transform: translateX(-50%);  text-align: center;}
/*倒數*/
.minutes, .seconds, .milliseconds{ min-width:3rem; padding: 0 5px 0px 5px; background-color: #4a04479e;}

.labar{width: 100%;position: absolute;top: 3vw;left:52%;transform: translateX(-50%);}
/*填充框*/
.inputstyle{width: 45%;  position: absolute; /*  top: 18.8vw;  */left: 46.5%; transform: translateX(-50%);
  border: #b50707 3px solid;  vertical-align: middle;  color: #fffaf2;  background-color: #d6262600;
  font-size: 2.5rem;  font-family: '微軟正黑體', sans-serif;font-weight: bold;text-align: center;/*   height: 5rem; */
 -webkit-tap-highlight-color: rgba(0,0,0,0);caret-color: #58020200;}	
.inputstyle:hover{background-color:#b50707;/* 	padding:.5rem 0; */color: #fffaf2; } 
.inputstyle{
  -webkit-appearance: none;  /* Safari 和 Chrome */
  -moz-appearance: none;     /* Firefox */
  appearance: none;          /* 其它瀏覽器 */
  border: none;              /* 移除邊框 */
  background: none;          /* 移除背景 */
  color: inherit;            /* 繼承文字顏色 */
  padding: 0;                /* 移除內邊距 */
  margin: 0;                 /* 移除外邊距 */
  outline: none;}
.check{width: 100%; position: absolute;top: 0;left: 50%;transform: translateX(-50%);color: rgb(255, 255, 255);text-align: center;}
input[type='radio']:checked + label > span:before{
		content:" "; width:50%; height:50%; position: absolute; top:.25rem; left:.25rem; background:#fdfdfd;/*更改圈選圈的顏色*/border-radius:999em;color:rgb(15, 4, 17);
		animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1); animation-fill-mode: forwards;
    } 
.notetxt{font-family: '微軟正黑體', sans-serif;font-weight: bold;font-size: 1.2rem;}
.notetxt a{color: yellow;}
.notetxt a:hover{color: rgb(253, 208, 110);}
.notetxt a:visited{ color: yellow;}

@keyframes checkbox-check{
		 0%{ transform:scale(0); }
		100%{ transform:scale(1); }
    }

.labar_btn{width: 100%; position: relative; left:68%;  transform: translateX(-50%);}

.main{width:94.6%;left: 1.1vw;position: relative;}
.awards_block{padding-top: 1vw; margin-top: 3vw; background: url(../images/list_block_t.jpg) center top no-repeat,
  url(../images/list_block_b.jpg) center bottom no-repeat,
  url(../images/list_block_m.jpg) center repeat-y;background-size: 100% auto;
  position: relative;}

.list_litle{width:39.9%;max-width:390px;margin: 0 auto;}
.awards_block ul{width:100%;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content:space-between;padding: 0vw 3vw 5vw 3vw;}
.awards_block ul li{width: 33%;padding: 1rem;}
.awards_block ul li:nth-of-type(1){width: 100%;padding:0 16rem; }
.awards_block ul li:nth-of-type(8),.awards_block ul li:nth-of-type(9),.awards_block ul li:nth-of-type(10),.awards_block ul li:nth-of-type(11){width:25%; }
.finger{width: 30%;position: absolute;top:12vw;right: -2vw;animation:finger_ef 1.5s infinite alternate;z-index:999;}
.page_notice{width:100%;color: rgb(255, 249, 249);font-size: 1.1rem;line-height: 1.8;font-family: '微軟正黑體', sans-serif;background-color: #ac090a;padding:0rem 3vw 3vw 3vw;}
.page_notice ol{width:100%;list-style-type: decimal;margin-left: .5vw;}
.notice_title{position: relative;margin-left: -.5vw;font-size: 1.3rem;font-family:'微軟正黑體', sans-serif;font-weight: bold;}
.page_notice ol li a{color: yellow;}
.page_notice ol li a:hover{color: rgb(253, 208, 110);}
.page_notice ol li a:visited{ color: yellow;}

.pop{width: 100%;max-width: 860px; background: inherit;background-color: initial;}
.pop_block{width: 100%; min-height: calc(100vw *530 /910); background: url(../images/pop_block_bg.webp) center top no-repeat ;background-size: 100% auto;
  position: relative;}
.pop_info{width: 75%; padding-top:14vw;padding-bottom: 5vw; font-size: 1.5rem;color: yellow; font-family:'微軟正黑體', sans-serif;font-weight: bold;text-align: center;}
.pop_btn{width: 50%;}
.pop_block .btn_block ul li {width: 100%;}
.pop_tt{width: 80%;margin: 0 auto;padding:1vw 0 0 0;}

.lity { background: rgba(0,0,0,0.7);}
.lity-content {
  max-height:100vh; max-width: 100vw;
  overflow: auto;
}
.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 900px;
  max-height:900px;
  outline: none !important;

}

.lity-close {
  background: url(../images/close_btn.png) no-repeat center center / 100% auto; z-index: 999;
  transition: transform 0.5s ease; /* 添加動畫效果 */
}
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
  background: url(../images/close_btn_ov.png) no-repeat center center / 100% auto; z-index: 999;
  transform: rotate(180deg);
}
.lity-close,.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
  width: 12%;
  max-width: 100px;
  height: initial;
  aspect-ratio: 92 / 75;
  position: absolute;
  right: 0;
  top: 0;
  text-shadow: inherit;
  color: #9990;
}
.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background:inherit;
}
/*-----------COPYRIGHT---------*/
footer{width:100%;min-width: 320px;margin: 2rem auto 0;font-family: Arial;position:relative;z-index: 99;}
.footer_content{width:100%;max-width: 1000px;margin: 0 auto;padding:1rem 0;display:flex; display:-ms-flexbox; 
	flex-direction: row;  -ms-flex-direction: row; flex-wrap: wrap; -ms-flex-wrap: wrap;justify-content:center; -ms-flex-pack:center; 
	text-shadow:0 0 5px rgba(0,0,0,1),0 0 4px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1); }
.footer_logo{width:20%; max-width:185px; padding:0 0% 0 1%; filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 1) ); }
.footer_txt{ color:#FFF; font-size: .6rem; padding-top:1rem; }
.footer_txt p{padding:0 0 .4rem 0;white-space:nowrap;}
.footer_lvblock{width:100%; }
.footer_lv{width:100%; padding-top:1.15rem; padding-left:2%; margin:0 auto; display:flex;/*for all browser*/ display:-ms-flexbox;/*for ie10*/flex-direction: row;-ms-flex-direction: row;justify-content:center;-ms-flex-pack:center;}
.footer_left{width:15%; max-width:42px;}
.footer_right{ padding-left:.5rem; display:flex;/*for all browser*/ display:-ms-flexbox;/*for ie10*/flex-direction: column;-ms-flex-direction: column;justify-content:space-between;-ms-flex-pack:justify;}
.footer_txt2{color:#ececec; font-size: .5rem;white-space:nowrap;line-height: 1.5; }

@keyframes btn_ef{
0%,100% {
  filter: brightness(100%);
  }

  50% {
    filter: brightness(130%);

  }
}
@keyframes finger_ef{
0% {
   transform: translateX(10px);
    filter: brightness(100%);
    transform: scale(1);
  }
  25% {
    filter: brightness(130%);
    transform: scale(1.1);
  }
  50% {
    filter: brightness(100%);
    transform: scale(1);
  }
  75% {
    filter: brightness(130%);
    transform: scale(1.1);
  }
  100% {
    transform: translateX(0px);
    filter: brightness(100%);
    transform: scale(1);
  }
}  
@keyframes fly_ef{
    0%{
       opacity: 1;
        filter: brightness(1) blur(20px);
    }
     100%{
         opacity: 1;
         filter: brightness(0) blur(0);
     }
}
@keyframes btn_flash{
    0%{
      opacity: 0;
        filter: brightness(100%);
        transform:scale(.9);
    }
    100%{
      opacity: 1;
        filter: brightness(130%);
        transform: scale(1);
    }
}
@keyframes grow-and-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@media (max-width:1500px){
.notetxt{font-size: 1rem;}
}
@media (max-width:1440px){
  .tt1 {margin-top: -10vw;}
  .countdown_title {font-size: 2.5rem;}
  .countdown {font-size: 4rem;}
  .inputstyle {/* top: 19vw; */ font-size: 2.2rem;}
  .awards_block ul li:nth-of-type(1) {padding: 0 12rem;}
}
@media (max-width:1380px){
  .countdown {font-size: 3rem;}
  .inputstyle {font-size: 2rem;}
  .notetxt{font-size: .85rem;}
}
@media (max-width:1200px){
  .inputstyle {/* top: 17vw;  */font-size: 1.6rem;}

}
@media screen and (max-width:1000px) {	
  .page{width:80%;}
  .gift{width: 60%;top: 0;}
  .coinmove1{width:15.5%;max-width:155px;top:0;right:-10%;position:absolute;z-index:1 }
.coinmove2{width:13%;max-width: 187px; top: -3vw;left: -10vw;position:absolute;z-index:9;}
.coinmove3{width: 18%;max-width: 223px; top: 12vw; left: -10vw;position:absolute;z-index:1 }
.coinmove4{width:8%; max-width: 118px; top:30vw; left: -2vw;position:absolute;z-index:1; }
.coinmove5{width: 19.9%;max-width: 199px; top: 40vw; left: 70vw;position:absolute;z-index:1 }
.coinmove6{width: 24.3%; max-width: 243px; top: 40vw; left: -15vw;position:absolute;z-index:1; }
  .sparkle_box .sparkle:nth-child(1){width:12%;max-width:37px;top:3vw;left:-.5vw;animation:sparkle 0.5s infinite 0s;}
.sparkle_box .sparkle:nth-child(2){width:10%;max-width:27px;top:-.5vw;left:5vw;animation:sparkle 0.5s infinite 0.3s;}
.sparkle_box .sparkle:nth-child(3){width:19%;max-width:57px;top:-2vw;left:25vw;animation:sparkle 0.5s infinite 0.5s;}
.sparkle_box .sparkle:nth-child(4){width:10%;max-width:28px;top:4.6vw;left:29vw;animation:sparkle 0.5s infinite 0.8s;}
  .countdown_title {font-size: 3rem;}
  .countdown {font-size:3.5rem;top: 11vw;}
  .inputstyle {font-size: 2rem;}
  .awards_block ul li:nth-of-type(1) {padding: 0 12rem;}
  .awards_block ul li:nth-of-type(8),.awards_block ul li:nth-of-type(9),.awards_block ul li:nth-of-type(10),.awards_block ul li:nth-of-type(11){width:50%;padding: 1vw 8vw; }



	.footer_logo{width:100%;margin:0 auto;}
	.footer_txt{width:100%;margin:0 auto;  padding-top:0.2rem; text-align: center; }
	.footer_lv{ flex-wrap:wrap; -ms-flex-wrap: wrap;}
	.footer_left{ width:auto; margin-bottom:.5rem;}
	.footer_txt2 { white-space:normal; }

}
@media screen and (max-width:950px) {	
  .pop_info{padding-top: 15vw;padding-bottom:0vw;font-size: 1.4rem;}
  .lity-close,.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {top: -10vw;}
}


@media screen and (max-width:800px) {	
  .inputstyle {font-size: 1.8rem;}
  .countdown_title {font-size: 2.5rem;}
  .countdown {font-size:3rem;top: 11vw;}
  .pop_info{font-size: 1.2rem;}

}
@media screen and (max-width:700px) {	
  .inputstyle {font-size: 1.5rem;}
  .countdown_title {font-size: 2rem;}
  .countdown {font-size:2.5rem;top: 11vw;}
}

@media (max-width:680px){
  body{ background-size:150% auto;}
  .l{ display:none; }  
  .s{ display:block; }
  .page{width:100%;}
  .logo{width: 50%; left:5vw;top: 5vw;}
  .pp {left: 35vw;}
  .gift{width: 95%; top: 5vw; left: 2vw;}
  .top_coin{display: none;}
  .tt1{margin-top: -18vw;}
  .tt2{width: 90%; margin-top: -8vw;}
  .bar{width: 100%;position: fixed;bottom: 0;z-index: 999;}
  .inputstyle {width: 60%; font-size: 2.2rem;}
  .notetxt { font-size: 1rem;}
  .countdown_title {font-size: 2.3rem;top:5vw;}
  .countdown {font-size:2.8rem;top: 14vw;}

  .bar .countdown_title {font-size: 1.7rem; top: 13vw; left: 70%; transform: inherit;}
  .bar .countdown {font-size:2.5rem;top: 19vw;left: 80%;}
  /*倒數*/
  .minutes, .seconds, .milliseconds{ min-width:3rem; padding: 0 1px 0px 1px; background-color: #4a04479e;}
  .bar_tt{width: 50%;position: absolute;top:16vw;left: 10%;animation:finger_ef 1.5s infinite alternate;}

  .btn_block{width: 100%;padding-top: 5vw;}
  .labar_btn {left: 71%;}
  .btn_block ul {width: 90%;}
  .lity-close,.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { top: 0vw;}
  .list_litle{width:50%;}
  .awards_block ul li{width: 50%; padding: 1rem;}
  .awards_block ul li:nth-of-type(1) {padding: 0 8rem;}
  .awards_block ul li:nth-of-type(8),.awards_block ul li:nth-of-type(9),.awards_block ul li:nth-of-type(10),.awards_block ul li:nth-of-type(11){width:50%;padding: inherit; }
  .page_notice ol { width: 94%; margin-left: 4vw;}
  .main {width: 100%; left: 0;}
  .pop_block{width: 100%; min-height: calc(100vw*1264/815); background: url(../images/pop_block_bg_s.webp) center top no-repeat ;background-size: 100% auto;}
  .pop_info {width: 90%; margin: 0 auto;font-size: 1.3rem;padding-top: 75vw; }
  .pop_btn {width: 70%;/* padding: 5vw 0 3vw 0; */}
  footer{ margin:0rem auto 32.5vw auto;}
	.footer_right{ padding-left:.95rem; padding-right:.55rem; }
	.footer_txt2{ font-size:.6rem; }
	.footer_txt2 p{ text-indent:-1.1em; }
	
}
@media (max-width:600px){
  .notetxt { font-size: .7rem;}
}
@media (max-width:520px){
  .inputstyle {font-size: 1.6rem;}
  .countdown_title {font-size: 2rem;top:5vw;}
  .countdown {font-size:2.5rem;top: 14vw;}
  
  }
  @media (hover: none) {
    /* 移除所有的 :hover 樣式 */
    .some-class:hover {
      /* 確保在手機版中無效果 */
      background-color: initial;
      transform: none;
    }
  }
  @media (max-width:480px){
    .inputstyle {width: 55%; font-size: 1.5rem;}
    .bar .countdown_title {font-size: 1.5rem;top:13vw;}
    .bar .countdown {font-size:1.8rem;top: 20vw;}
    .awards_block ul li:nth-of-type(1) { padding: 0 6rem;}
    .page_notice {padding: 0rem 3vw 3vw 5vw;}
    .pop_info {width: 90%; margin: 0 auto; font-size: 1.2rem;}
    .pop_tt {width: 100%;}
    .notetxt { font-size: .65rem;}
    
    }

@media (max-width:428px){
    .pop_info { font-size: 1.2rem;}
    .pop_btn { padding-top: 2vw;}

    }

@media (max-width:375px){
      .pop_info { font-size: 1rem;}
      }