@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: #f9f9f9;
    background-attachment: fixed;
    background-size: cover;


}



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


.progress {
  background:#59b4e9;
  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: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -150px 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/1208_01.jpg);position: relative;height:1200px;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: 420px;height: 250px;position: absolute;left: 165px;top:50px;}
#KV .kv-title2{background: url(../images/product.png) no-repeat;width: 192px;height: 550px;position: absolute;bottom: 0px;left: 20px;}
#KV .btn01{background: url(../images/go.png) no-repeat;width: 290px;height: 62px;position: absolute;top: 1063px;left: 232px;cursor: pointer;}
#KV .btn01:hover{background: url(../images/goa.png);}


/*REPAIR區塊*/
#REPAIR {background: #fff;position: relative;height:422px;overflow: hidden;}
#REPAIR .video-con{width: 750px;height: 422px;position: absolute;left: 0px;top: 0px;}
#REPAIR .bvideo01{background: url(../images/1208_02.jpg);top: 0;left: 0;width: 750px;height: 422px;z-index: 2; position: absolute;}
#REPAIR iframe{;width: 750px;height: 422px;z-index: 1;position: absolute;top: 0; left: 0; }

#REPAIR .play01{z-index: 3; background-image:url('../images/play.png');cursor: pointer; width: 198px;height: 198px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;
  animation-name: shine;
  animation-delay: 1s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;}
#REPAIR .play01:before{content:url('../images/play-a.png');width:0;height:0;visibility:hidden;}
#REPAIR .play01:hover{background-image:url('../images/play-a.png');
-webkit-transform: scale(1.1);
    transform: scale(1.1);}


/*ART區塊*/
#ART {background: url(../images/1208_04.jpg);position: relative;height:1275px;overflow: hidden;padding: 20px 0 50px 0;}
#ART .ART-title1{background: url(../images/til2.png) no-repeat;width: 750px;height: 138px;position: absolute;top: 40px;left: 0px;}
#ART .ART-cube{background: url(../images/step.png) no-repeat;width: 341px;height: 400px;position: absolute;top: 780px;right: 70px;}
#ART .ART-cube2{background: url(../images/step2.png) no-repeat;width: 341px;height: 208px;position: absolute;top: 890px;left: 80px;}
#ART .new01{background: url(../images/new01.jpg) no-repeat;width: 750px;height: 600px;position: absolute;top: 200px;left: 0px;}
#ART .new02{background: url(../images/new02.png) no-repeat;width: 304px;height: 167px;position: absolute;top: 640px;left: 80px;}
#ART .new03{background: url(../images/new03.jpg) no-repeat;width: 750px;height: 472px;position: absolute;top: 800px;right: 0px;}


/*填單區塊*/
#FORM{background: url(../images/1208_05.jpg);position: relative;height: 1525px;overflow: hidden;z-index: 99;}
#FORM .form-bg{background:rgba(255,255,255,1);width: 700px;height: 1340px;margin:0 auto;margin-top: 30px;position: relative;overflow: hidden;}
#FORM h2{background: url(../images/form-til.png);width: 750px;height: 166px;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: #000; font-size: 29px;line-height: 2;margin-top: 10px;letter-spacing: 1px;font-weight: 300;padding: 10px 70px;}
#FORM p span{color: #e3b264;}
#FORM p.smm{text-align: justify;color: #000; font-size: 19px;line-height: 2;margin-top: 0px;letter-spacing: 1px;font-weight: 300;padding: 10px 70px;}
#FORM ul{width: 620px;margin: 0 auto;margin-top: 40px;}
#FORM li{font-size: 24px;font-weight: 300;margin-top: 20px;color: #000;}
#FORM li .check{float: left;}
#FORM li span{font-size: 21px;color: #000;font-weight: 300;line-height: 17px;text-align: justify;width: 555px;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:85px;height:85px;font-size:23px;padding-top:0px;width:580px;padding-left:20px;margin-left: 15px;font-weight: 300;border: 1px solid #aeaeae;outline: none; }
#FORM .go-btn{cursor: pointer; background: url(../images/btnn.jpg);width:620px;height: 134px;position: absolute;top: 1080px;left: 40px; 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{background: url(../images/btnna.jpg);}
#FORM select#area{width: 30%;height:85px;margin-left: 15px;font-size:22px;padding-left:20px;}
#FORM select#spot{width: 60%;height:85px;margin-left: 15px;font-size:22px;padding-left:20px;}
#FORM ol{width: 85%;margin: 0 auto;text-align: justify;}
#FORM ol li{font-family: sans-serif,Arial, Helvetica,sans-serif;list-style-type:decimal;clear: both; font-size: 20px;line-height: 1.8;margin-top: 5px;margin-left: 15px;}
#FORM ol li span{font-family: 'Noto Sans TC', sans-serif;}

/*MOBILE-COUPON*/
#m-form1 {background-repeat: no-repeat;background-color: #fff;background-position: center top;background-image: url(../images/coupon.jpg);height: 1745px;width: 100%;}
.m-content1 {height: 100%;width: 750px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;position: relative;}
#coup-name {
    font-size: 28px;
    color: #000;
    position: absolute;
    left: 150px;
    top: 1010px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-phone {
    font-size: 28px;
    color: #000;
    position: absolute;
    left: 150px;
    top:1122px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-mail {
    font-size: 28px;
    color: #000;
    position: absolute;
    left: 150px;
    top: 1233px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#coup-store {
    font-size: 28px;
    color: #000;
    position: absolute;
    left: 150px;
    top: 1333px;
    font-family: "Adobe 繁黑體 Std B", "Noto Sans CJK TC Light", "Arial Unicode MS", iLiHei, "微軟正黑體";
}
#check-btn {
    position: absolute;
    height: 126px;
    width: 600px;
    left: 76px;
    top: 1480px;
}




}

@-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);
  }
}
@keyframes shine
{
0%   {
  transform:scale(1) ;
  }
50%   {
  transform:scale(1.2) ;
  }
100%   {
  transform:scale(1) ;
  }
}
@keyframes shine2
{
0%   {
  transform:scale(0.5) rotate(0deg) ;

  }
50%   {
  transform:scale(1.4) rotate(20deg);
  }
100%   {
  transform:scale(0.5)rotate(0deg) ;
  }
}
@keyframes shine3
{
0%   {
  transform:scale(0.5) rotate(0deg) ;

  }
50%   {
  transform:scale(1.4) rotate(0deg);
  }
100%   {
  transform:scale(0.5)rotate(0deg) ;
  }
}