@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import 'reset.css';
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', sans-serif;
}
a,a:hover {text-decoration: none; outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    _height:100%;
     color: #fff;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    background: #000;
    background: url(../images/bg.jpg)center;
    background-attachment: fixed;

}



#WRAP {  
    position:relative;
    width:100%;
    max-width:640px;
    min-width:300px;
    height:auto;
    margin:0 auto;
    overflow:hidden;
    background: #000;
}


.progress {
  background: #567dbb;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999999999;
  text-align: center;
  top: 0;
  color: #000; }


.progress-text {
  position: fixed;
  top: 50%;
  left: 0;
  width: 400px;
  text-align: center;
  font-size: 20px;
  font-family: 'Noto Sans TC', sans-serif; }

.loading {
  width: 400px;
  height: 80px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -200px; }

.blk{color: #191919;}
.btn{width: 180px;line-height: 60px;background-color: none; color: #000;text-align: center;font-weight: 300;font-size: 21px;letter-spacing: 3px;cursor: pointer;
-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;}
.btn:hover{background-color: #000000;color: #fff;}

.hover{-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;}
.bg-blk{background: rgba(0,0,0,0.8);
 -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;}


/*影片區塊*/
#VIDEO{background: url(../images/0923_01.jpg);position: relative;height:524px;overflow: hidden;padding: 20px 0 50px 0;}
#VIDEO .video-con{width: 587px;height: 333px;margin: 0 auto;margin-top: 130px;position: relative;}
#VIDEO .bvideo{background: url(../images/video-bg.png);top: 0;left: 0;width: 587px;height: 333px;z-index: 2; position: absolute;}
#VIDEO iframe{;width: 587px;height: 333px;z-index: 1;position: absolute;top: 0; left: 0; }
#VIDEO .play{z-index: 3; background-image:url('../images/play.png');cursor: pointer; width: 96px;height: 101px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -48px;
-webkit-transform: scale(1);
    transform: scale(1);}
#VIDEO .play:before{content:url('../images/play-a.png');width:0;height:0;visibility:hidden;}
#VIDEO .play:hover{background-image:url('../images/play-a.png');
-webkit-transform: scale(1.1);
    transform: scale(1.1);}
#VIDEO .coming{background-image:url('../images/video-bg-c.png');width: 587px;height: 333px;position: absolute;z-index: 5;}
/*名人區塊*/
#celebrity{background: url(../images/0923_02.jpg);position: relative;height: 1131px;overflow: hidden;}
#celebrity h1{background: url(../images/til01.png);width: 640px;height: 66px;text-indent: -9999px;margin: 0 auto;margin-top: 10px;}
#celebrity p{font-size: 24px;line-height: 1.8;color: #fff;font-weight: 300;letter-spacing: 3px;text-align: center;margin-top: 10px;} 
#celebrity .celebrity-con{width: 100%;padding: 0 25px;margin-top: 20px;height: 240px;}
#celebrity .cele{width: 102px;float: left;margin: 8px;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%);cursor: pointer;opacity: 0.5;transition: all 0.2s linear;}
#celebrity .cele:hover{opacity: 1;}
#celebrity li.active{opacity: 1;}
#celebrity .cele img{width: 100%;}
#celebrity .owl-carousel{clear: both;text-align: center;width: 640px;height: 750px;margin-top: 40px;position: relative;z-index: 100;}
#celebrity .owl-carousel .item{width: 555px;height: 739px;margin: 0 auto;display: inline-block;}
#celebrity .owl-carousel .item .cele-img{width: 555px;height: 449px;}
#celebrity .owl-carousel .item .cele-box{background: url(../images/word-bg.jpg)center;width: 555px;height: auto;padding: 30px 40px;font-size: 21px;line-height: 1.6; color: #b5d6ff; font-weight: 300;text-align: justify;letter-spacing: 3px;}
#celebrity .owl-carousel .item .poo{width: 188px;height: 209px;position: absolute;top: 250px;right: 20px;transform: rotate(15deg);}
#celebrity .owl-carousel .item img{width: 100%;}
#celebrity .owl-carousel .owl-nav{position: absolute;width: 100%;top: 15%;background: none;}
#celebrity .owl-carousel .owl-prev{background:url('../images/nav.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 62px;height: 130px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;}
#celebrity .owl-carousel .owl-next{background:url('../images/nav.png') ;background-size: cover;position: absolute;width:62px;height: 130px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;}
#celebrity .owl-carousel .owl-dots{z-index: 9999;position: absolute;bottom: 0;width: 100%;}
#celebrity .owl-carousel .owl-theme .owl-dots .owl-dot span{width: 12px;height: 12px;background: #fff;opacity: 0.6;}
#celebrity .owl-carousel .owl-theme .owl-dots .owl-dot.active span{background: #fff;opacity: 1;}

/*日夜區塊*/
#DAYNIGHT{background: url(../images/0923_03.jpg);position: relative;height: 849px;overflow: hidden;}
#DAYNIGHT h1{background: url(../images/til02.png);width: 640px;height: 183px;text-indent: -9999px;margin: 0 auto;margin-top: 30px;}
#DAYNIGHT .day{background: url(../images/day.png);width: 243px;height: 156px;position: absolute;top: 620px;left: 20px;}
#DAYNIGHT .night{background: url(../images/night.png);width: 243px;height: 156px;position: absolute;top: 250px;right: 20px;}
#DAYNIGHT .plus{background: url(../images/plus.png);cursor: pointer; width:60px;height: 63px;top: 150px;left: 50%;margin-left: -31px;position: absolute;
animation-name: press2;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;}
#DAYNIGHT .plus:hover{background: url(../images/plus-1.png);}
#DAYNIGHT .bor-cube{position: absolute;max-width: 280px; border-radius: 10px;background-color: #fff;-webkit-filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.3));filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.3))}
#DAYNIGHT .bor-cube  .cross{position: absolute;top: 5px;left: 5px;cursor: pointer;}
#DAYNIGHT .bor-cube p{padding: 30px;line-height: 1.8;text-align: justify;text-justify: inter-ideograph;color: #1d3161;font-size: 19px;letter-spacing: 1px;}

#DAYNIGHT #bro01{top: 360px;left: 30px;display: none;}
#DAYNIGHT #bro02{top: 500px;right: 30px;display: none;}

#DAYNIGHT .sparkle04{background:url('../images/sprkle.png');width: 219px;height: 208px;position: absolute;top: 320px;left: 160px;
animation-name: light2;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;}

/*文章區塊*/
#ARTICLE{background: url(../images/0923_04.jpg);position: relative;height: 667px;overflow: hidden;}
#ARTICLE h1{background: url(../images/til03.png);width: 640px;height: 65px;text-indent: -9999px;margin: 0 auto;margin-top: 40px;}
#ARTICLE .owl-carousel{text-align: center;width: 640px;height: 550px;margin-top: 0px;position: relative;z-index: 2;}
#ARTICLE .owl-carousel .item{width: 640px;height: 590px;margin: 0 auto;display: inline-block;}
#ARTICLE .owl-carousel .item img{width: auto;filter: brightness(1);cursor: pointer;}
#ARTICLE .owl-carousel .item img:hover{width: auto;filter: brightness(1.3);}
#ARTICLE .owl-carousel .item h3{text-align: center;margin-top: 10px;font-size: 25px;line-height: 1.8;font-weight: 400;color: #171717;letter-spacing: 0px;}
#ARTICLE .owl-carousel .item .btn-more{background: url(../images/more.png);width: 164px;height: 46px;cursor: pointer;filter: brightness(1); margin: 0 auto;}
#ARTICLE .owl-carousel .item .btn-more:hover{filter: brightness(1.4);}
#ARTICLE .owl-carousel .owl-nav{position: absolute;width: 100%;top: 18%;background: none;}
#ARTICLE .owl-carousel .owl-prev{background:url('../images/nav-red.png') ;transform: rotate(180deg);background-size: cover; position: absolute; width: 64px;height: 133px;text-indent: -9999px;left: 10px;top: 2%;opacity: 1;}
#ARTICLE .owl-carousel .owl-next{background:url('../images/nav-red.png') ;background-size: cover;position: absolute;width:64px;height: 133px;text-indent: -9999px;right: 10px;top: 2%;opacity: 1;}
#ARTICLE .owl-carousel .owl-dots{z-index: 9999;position: absolute;bottom: 0;width: 100%;}
#ARTICLE .owl-carousel .owl-theme .owl-dots .owl-dot span{width: 12px;height: 12px;background: #fff;opacity: 0.6;}
#ARTICLE .owl-carousel .owl-theme .owl-dots .owl-dot.active span{background: #fff;opacity: 1;}

/*組合區塊*/
#SET{background: url(../images/0923_05.jpg);position: relative;height: 820px;overflow: hidden;}
#SET .set-con{background: url(../images/set-bg.png);width: 490px;height: 780px;left: 50%;position: absolute;margin-left: -245px;top: 20px;}
#SET .set-gif{background: url(../images/setbg.png);width: 358px;height: 418px;position: relative;margin: 0 auto;}
#SET .set-gif img{position: absolute;width: 358px;height: 418px;}
#SET .owl-carousel{background: url(../images/setbg.png);width: 358px;height: 418px;position: relative;margin: 0 auto;margin-top: 15px;}
#SET .buy-con{width: 100%;padding: 0 20px;margin-top: 255px;}
#SET .buy{line-height: 60px;text-align: center;filter: brightness(1);font-size: 21px; background: #1f3f6e;cursor: pointer; color: #b5d6ff;width: 45%;margin: 0 10px;float: left;}
#SET .buy:hover{filter: brightness(1.4);}
/*填單區塊*/
#FORM{background: url(../images/0923_06.jpg)top;position: relative;height: 1108px;overflow: hidden;}
#FORM h1{background: url(../images/til06.png);width: 640px;height: 128px;text-indent: -9999px;margin: 0 auto;margin-top: 30px;}
#FORM .game-con{padding: 50px; background: url(../images/form-bg.png);width:640px;height: 1043px;position: relative;margin-top: 20px; }
#FORM .game-con p{font-size: 22px;line-height: 1.8;margin-top: 30px;padding: 15px;letter-spacing: 2px;font-weight: 300;text-align: justify;}
#FORM .game-con .geni-con{position: absolute;top: 0;}
#FORM .game-con .geni{background: url(../images/geni.png);width: 189px;height: 484px;top: 260px;left: 70px;position: absolute;}
#FORM .game-con .drip{background: url(../images/Series.png);width: 116px;height: 373px;top: 270px;left: 260px;position: absolute;}
#FORM .game-con .clickarea{cursor: pointer; background: url(../images/press-area.png);width:167px;height: 166px;position: absolute;top: 230px;left: 235px;
animation-name: press;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;
  filter: brightness(1); }
  #FORM .game-con .clickarea:hover{filter: brightness(1.2);}
#FORM .game-con .hand{background: url(../images/hand.png);width: 44px;height: 45px;position: absolute;top: 340px;left: 370px;
animation-name: light3;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;
animation-direction:alternate;
-webkit-animation-direction:alternate;}
#FORM .game-con .presstil{background: url(../images/press.png);width: 231px;height: 181px;position: absolute;top: 400px;right: 50px;}
#FORM .game-con .extra{width: 507px;height: 168px;position: absolute;bottom: 60px;left: 65px;}
#FORM .game-con .drop{background: url(../images/drop.png);width: 70px;height: 70px;top: 600px;left: 281px;position: absolute;opacity: 0;}
.dropact{animation-name: drop;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;}
.slight{ filter:drop-shadow(0 0 0.75rem #ffffff);-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.6s linear;
   -o-transition: all 0.6s linear;
   -ms-transition: all 0.6s linear;
   transition: all 0.6s linear;}
#FORM .lugo{display: none; background: url(../images/luge.png);width: 640px;height: 1108px;position: absolute;top: 0px;}
#FORM .game-con .circle-light{opacity: 0;background: url(../images/circle-light.png);width: 353px;height: 224px;position: absolute;top: 630px;left: 140px;}
.circle-effect{animation-name: circlee;
  animation-duration: 1.5s;
  animation-delay: 1.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite ;}

#FORM .form-con{background: url(../images/092w3_06.jpg);display: none;top: 0; position: absolute;width: 640px;height: 1108px;}
#FORM .form-con .result-img{width: 566px;height: 346px;margin: 0 auto;margin-top: 50px;}
#FORM .form-con p{font-size: 22px;line-height: 1.8;margin-top: 10px;padding:0 45px;letter-spacing: 2px;font-weight: 300;text-align: justify;}
#FORM .form-con ul{width: 550px;margin: 0 auto;margin-top: 20px;}
#FORM .form-con li{font-size: 24px;font-weight: 300;margin-top: 20px;color: #000;}
#FORM .form-con li .check{float: left;}
#FORM .form-con li span{font-size: 21px;color: #fff;font-weight: 300;line-height: 21px;text-align: justify;width: 500px;float: right;margin-bottom: 40px;letter-spacing: 2px;}
#FORM .form-con li span a{text-decoration: underline;color: #fff;}
#FORM .form-con input{color: #000; line-height:80px;height:80px;font-size:23px;padding-top:0px;width:530px;padding-left:20px;margin-left: 15px;font-weight: 300;border: 1px solid #aeaeae;outline: none; }
#FORM .form-con .go-btn{clear: both; background:#b5d6ff; font-weight: 500;letter-spacing: 3px; width: 451px;height: 95px;margin: 0 auto;text-align: center;line-height: 95px;color: #000000;font-size: 24px;cursor: pointer;filter: brightness(100%);
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   -ms-transition: all 0.1s linear;
   transition: all 0.1s linear;}
#FORM .form-con .go-btn:hover{filter: brightness(125%);}

#FORM .gone{display: none;}
#FORM .show{display: block;}


#FORM .share-con{display: none;}
#FORM .share-con .share-bg{background: url(../images/share-bg.png);width: 640px;height: 800px;top: 250px;position: absolute;}
#FORM .share-con .share-btn{background: url(../images/fb-btn.png);width: 443px;height: 111px;position: absolute;top: 810px;left: 100px;cursor: pointer;filter: brightness(1);}
#FORM .share-con .share-btn:hover{filter: brightness(1.4);}

#privacy{width: 640px;height: auto;margin: 0 auto;font-weight: 200;font-size: 18px;line-height: 1.6;padding: 50px;overflow-x: auto;text-align: justify;height: 80vh;}


@-webkit-keyframes press {
  0% {
  -webkit-transform:scale(1);
}
50% {
  -webkit-transform:scale(1.1);
}
100% {
  -webkit-transform:scale(1);
}
}@keyframes press {
  0% {
  transform:scale(1);
}
50% {
  transform:scale(1.1);
}
100% {
  transform:scale(1);
}
}
@-webkit-keyframes press2 {
  0% {
  -webkit-transform:scale(0.8);
}
50% {
  -webkit-transform:scale(1.1);
}
100% {
  -webkit-transform:scale(0.8);
}
}@keyframes press2 {
  0% {
  transform:scale(0.8);
}
50% {
  transform:scale(1.1);
}
100% {
  transform:scale(0.8);
}
}
@keyframes drop
{
0%   {
   transform:scale(0);
   opacity: 0;
  }
10%   {
   transform:scale(0.7);
   opacity: 1;
  }
50%   {
  transform:scale(1);
  top: 600px;
  }
80% {
opacity: 1;
  }
80% {
  transform:scale(1);
  }
100% {
  transform:scale(0.7);
  top: 710px;
  }
}
@-webkit-keyframes drop{
0%   {
   transform:scale(0);
   opacity: 0;
  }
10%   {
   transform:scale(0.7);
   opacity: 1;
  }
50%   {
  transform:scale(1);
  top: 600px;
  }
80% {
opacity: 1;
  }
80% {
  transform:scale(1);
  }
100% {
  transform:scale(0.7);
  top: 710px;
  }
}
@keyframes light2
{
0%   {
  transform:scale(1.1) rotate(0deg);
   opacity:1;
  }

  50%   {
  transform:scale(0.3) rotate(30deg);
  opacity:0.8;

  }
100% {
  transform:scale(1.1) rotate(0deg);
  opacity:1;
  }
}
@-webkit-keyframes light2
{
0%   {
  transform:scale(1.1) rotate(0deg);
   opacity:1;
  }

  50%   {
  transform:scale(0.3) rotate(30deg);
  opacity:0.8;
  }
100% {
  transform:scale(1.1) rotate(0deg);
  opacity:1;
  }
}

@keyframes light3
{
0%   {
   top: 345px;
   left: 375px;
  }
25%   {

   top: 345px;
   left: 375px;
  }
  100%   {
   top: 335px;
   left: 365px;
  }

}
@-webkit-keyframes light3
{
0%   {
   top: 345px;
   left: 375px;
  }
25%   {
   top: 345px;
   left: 375px;
  }
  100%   {
   top: 335px;
   left: 365px;
  }
}


@keyframes circlee
{
0%   {
   transform:scale(0.1);
   opacity: 0.3;
  }
20%   {
   opacity: 1;   
  }
50%   {
   opacity: 1;
  }
100%   {
   transform:scale(1.4);
      opacity: 0;
  }

}
@-webkit-keyframes circlee
{
0%   {
   transform:scale(0.1);
   opacity: 0.3;
  }
20%   {
   opacity: 1;   
  }
50%   {
   opacity: 1;
  }
100%   {
   transform:scale(1.4);
      opacity: 0;
  }
}