@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:#e9c1bd;
  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;}


/*KV區塊*/
#KV{background: url(../images/0924_01.jpg);position: relative;height:1020px;overflow: hidden;padding: 20px 0 50px 0;}
#KV .video-con{width: 587px;height: 333px;margin: 0 auto;margin-top: 130px;position: relative;}
#KV .logo{background: url(../images/logo.png);width: 212px;height: 139px;position: absolute;right: 10px;top: 10px;}
#KV .kv-title{background: url(../images/kv-til.png) no-repeat;width: 381px;height: 359px;position: absolute;bottom: 15px;right: 10px;}
#KV .kv-title .kv-p{background: url(../images/kv-p.png);width: 209px;height: 220px;position: absolute;top: 150px;left: 90px;}

/*TEXTURE區塊*/
#TEXTURE{background: url(../images/0924_02.jpg);position: relative;height:807px;overflow: hidden;padding: 20px 0 50px 0;}
#TEXTURE h1{background: url(../images/p-til.png);width: 640px;height: 275px;text-indent: -9999px;margin-top: 20px;}
#TEXTURE .tex01{background: url(../images/tex01.png);width: 170px;height: 211px;position: absolute;top: 300px;left: 20px;}
#TEXTURE .tex02{background: url(../images/tex02.png);width: 170px;height: 211px;position: absolute;top: 430px;right: 10px;}
#TEXTURE .tex03{background: url(../images/tex03.png);width: 170px;height: 211px;position: absolute;top: 540px;left: 40px;}
#TEXTURE .plus{background: url(../images/plus.png);width: 40px;height: 40px;position: absolute; bottom:10px;left: 65px;cursor: pointer; }
#TEXTURE .plus:hover{filter: brightness(1.2);}
#TEXTURE .sparkle{background:url('../images/sprkle.png');width: 210px;height: 211px;position: absolute;top: 320px;left: 60px;
animation-name: light2;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;}
#TEXTURE .bor-cube{font-weight: 400;font-size: 20px; position: absolute;max-width: 280px; border-radius: 10px;background-color: #fff;-webkit-filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.2));filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.2))}
#TEXTURE .bor-cube img{margin: 0 auto;}
#TEXTURE .bor-cube  .cross{position: absolute;top: 7px;right: 7px;cursor: pointer;}
#TEXTURE .bor-cube p{padding:40px 30px 20px 30px;line-height: 1.7;text-align: justify;text-justify: inter-ideograph;font-size: 20px;font-weight: 300;color: #393939;}
#TEXTURE #bro01{top: 300px;left: 180px;display: none;}
#TEXTURE #bro02{top: 420px;left: 180px;display: none;}
#TEXTURE #bro03{top: 580px;left: 180px;display: none;}

/*填單區塊*/
#FORM{background: url(../images/0924_03.jpg);position: relative;height: 2136px;overflow: hidden;z-index: 99;}
#FORM .form-bg{background:rgba(255,255,255,1); width: 580px;height: 2070px;margin:0 auto;margin-top: 20px;position: relative;overflow: hidden;}
#FORM h2{background: url(../images/form-til01.png);width: 500px;height: 44px;margin: 0 auto;text-indent: -9999px;margin-top: 50px;display: block;}
#FORM h1{background: url(../images/form-til02.png);width: 500px;height: 100px;margin: 0 auto;text-indent: -9999px;margin-top: 20px;display: block;}
#FORM p{text-align: justify;color: #97643e; font-size: 21px;line-height: 1.8;margin-top: 10px;letter-spacing: 1px;font-weight: 300;padding: 10px 40px;}
#FORM p span{color: #e3b264;}
#FORM .sett{background: url(../images/set.png);width: 570px;height: 422px;margin: 0 auto; margin-top: 10px;}
#FORM ul{width: 520px;margin: 0 auto;margin-top: 20px;}
#FORM li{font-size: 24px;font-weight: 300;margin-top: 20px;color: #000;}
#FORM li .check{float: left;}
#FORM li span{font-size: 17px;color: #000;font-weight: 300;line-height: 17px;text-align: justify;width: 470px;float: right;margin-bottom: 20px;margin-right: 10px;letter-spacing: 2px;}
#FORM li span a{text-decoration: underline;color: #000;}
#FORM input{color: #000; line-height:80px;height:80px;font-size:23px;padding-top:0px;width:490px;padding-left:20px;margin-left: 15px;font-weight: 300;border: 1px solid #aeaeae;outline: none; }
#FORM .go-btn{cursor: pointer; background: url(../images/enter.png);width: 458px;height: 120px;margin: 0 auto;filter: brightness(100%);text-indent: -9999px;margin-top: 20px;-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 .go-btn:hover{filter: brightness(110%);}
#FORM select#spot{width: 490px;height:80px;margin-left: 15px;font-size:22px;padding-left:20px;}
#FORM select#date{width: 40%;height:80px;margin-left: 15px;font-size:22px;padding-left:20px;}
#FORM select#time{width: 50%;height:80px;margin-left: 15px;font-size:22px;padding-left:20px;}
#FORM ol{width: 85%;margin: 0 auto;text-align: justify;}
#FORM ol li{list-style-position: outside; font-family:'微軟正黑體' ,'Microsoft JhengHei',sans-serif;list-style-type:decimal;clear: both; font-size: 20px;line-height: 1.8;margin-top: 5px;margin-left: 15px;}


/*影片區塊*/
#VIDEO{background: url(../images/0924_04.jpg);position: relative;height:389px;overflow: hidden;padding: 10px 0 50px 0;}
#VIDEO .video-con{width: 587px;height: 333px;margin: 0 auto;margin-top: 10px;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);}


/*LINE區塊*/
#LINE{background: url(../images/0924_05.jpg);position: relative;height:680px;overflow: hidden;padding: 10px 0 50px 0;}
#LINE .line-btn{background: url(../images/line.png);position:absolute;width: 300px;height: 97px;left:25px;cursor: pointer;    margin-top: -5px;}
#LINE .line-btn:hover{filter: brightness(0.9);}
#LINE .web-btn{background: url(../images/web.png);position:absolute;width: 261px;height: 97px;right: 27px;cursor: pointer; margin-top: -5px;}
#LINE .web-btn:hover{filter: brightness(0.9);}



.flow{background: url(../images/flow.gif);width: 71px;height: 220px;position: fixed;top: 280px;right: 0px;cursor: pointer;z-index: 100;}
@media only screen and (min-width: 0px) and (max-width: 640px) {
.flow{top: 780px;}
}

@-webkit-keyframes arrowred {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
50% {
  -webkit-transform: translateY(20%);
  transform: translateY(20%)
}
100% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
}@keyframes arrowred {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
50% {
  -webkit-transform: translateY(20%);
  transform: translateY(20%)
}
100% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
}
@keyframes light
{
0%   {
   transform:scale(1);
  }

  50%   {
  transform:scale(1.02);
  transform: rotate(5deg);
  }
100% {
  transform:scale(1);
  }
}
@-webkit-keyframes light
{
0%   {
   transform:scale(1);
  }

  50%   {
  transform:scale(1.02);
  transform: rotate(5deg);
  }
100% {
  transform:scale(1);
  }
}
@keyframes light2
{
0%   {
   transform:scale(0.8);
   opacity:0.8;
    transform: rotate(0deg);
  }

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

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