@charset "utf-8";
/* CSS Document */
body{ border:0; margin:0; padding:0; font-family: 微軟正黑體, 新細明體, Arial, Helvetica, sans-serif; font-size: 16px; }

.clear{ clear:both; }
.desktop-only{display:block;}
.mobile-only{display:none;}

#wrapper{ width:1024px; margin-left:auto; margin-right:auto; position:relative; }
#wrapper h2, #tnc h2{ color:#D9B082; font-size:34px;  margin-top: 0; }

#video-wrapper{ width:950px; margin-left: auto; margin-right: auto; position:relative; }
#banner{ position:relative; /*background:url('../../images/main-visual.jpg') top center no-repeat; background-size:100%; padding-top: 57%;*/ }
#footer{ background-color:#E2E2E2; }
#footer > div{ display:inline-block; margin:35px; font-size:12px; }
#footer > div img{ vertical-align:middle; margin-right: 3px; }
#banner img{ width:100%; }
#banner img{ position:relative; }
#banner a{ position:absolute; text-indent:-9999px; font-size:0; z-index:10; }
#banner a#btn-fb{  right:0; top:0; width:25%; height:15%; }
#banner a#btn-home{ left:0; top:0; width:20%; height:25%; }
#play-overlay{ display:block; position:absolute; top:0; right:0; width:100%; height:100%; background: url('../../images/play-overlay.png') center no-repeat; z-index: 999; }

#video{ text-align:center; }
#video p{ line-height:30px; font-size:18px; margin-bottom:35px; margin-top:35px; }
#video p span{ font-size:24px; color:#2F65B0; }
.content-item p span, .content-item .prod-desc span{ color:#2F65B0; }
#video h2, #video p{ padding-left:5%; padding-right:5%; }
#video h2 span{ font-size:44px; }
#video #btn-trial{ /*display:none;*/ margin-bottom: 50px; }
#btn-trial a, #btn-submit, .btn-more, #btn-tnc-close{ text-decoration:none; color:#FFF; background-color:#D9B082; padding:12px 30px; border-radius: 30px; }
#btn-tnc-close{ font-size:18px; }
#btn-submit{ border:none; font-size:18px; cursor:pointer; min-width: 176px; font-family: 微軟正黑體, 新細明體, Arial, Helvetica, sans-serif;  }
.btn-more, #btn-tnc-close{ min-width: 176px; display: inline-block; text-align:center;}
.prod-img{ margin-right:20px; }
.thankyou-wrapper{ max-width:768px; margin-left:auto; margin-right:auto; }

.content-item{ background: url('../../images/bottom-shadow.jpg') bottom repeat-x #FFFFFF; padding:30px 0px; padding-top:0; padding-bottom:50px; display:none; }
#step1.content-item{ display:block; }
.content-item p{ line-height:30px; }
.content-item h2{ margin-bottom:0; }
.content-item .prod-desc{ width:620px; margin-left:auto; margin-right:auto; margin-bottom:30px; }
.content-item .prod-desc img{ margin-right:35px; }
.content-item .prod-desc:after{ content:''; display:block; clear:both; }
.content-item .prod-desc span.remarks{ color:#000000; font-size:14px; }
.content-item table { margin-left:auto; margin-right:auto; }
.content-item table td{ color:#000000; font-weight:bold; padding-bottom:15px; vertical-align:top;  }
.content-item table td span.txt-col{ display:block; margin-bottom:10px; }
.content-item table td.radio-col{ vertical-align:middle; }
.content-item table td a{ color:#000000; }
.content-item table .district-label{ float:left; margin-right:10px; }
.content-item table .district-list{ float:left; width:75px; margin-left:0; }
.content-item table td:first-child{ padding-right:35px; width:50%; }
.content-item table td .btn-radio.first{ margin-left:15px; margin-right:25px; }
.content-item table input[type="text"], .content-item table input[type="tel"], .content-item table input[type="email"]{ font-size:24px; height:35px; width:100%; border:solid 1px #E8E8E8; -webkit-appearance: none;  }
.content-item table select{height:40px; width:100%; font-size:16px; padding-left:12px;  border:solid 1px #E8E8E8; background-color:#FFF;

}
.content-item table input[type="checkbox"]{ width:20px; height:20px; margin:0; padding:0; margin-right:10px; vertical-align:bottom; }
.content-item table input[type="radio"]{ width:16px; height:16px;  vertical-align:text-top; }
.content-item table input[type="radio"]:first-child{ margin-left:0; }
.content-item table .btn-radio{ margin-right:15px; }
.content-item label.error{ color:#F00; display:block; font-weight:normal; margin-top:5px; clear: both; }
.top-shadow{ width:100%; height:40px; background: url('../../images/top-shadow.jpg') top repeat-x;  }
img.ui-datepicker-trigger{ cursor:pointer; }
.datepicker-col{ position:relative; }
.datepicker-col .ui-datepicker-trigger{ position:absolute; right:1px; top:1px; }
.footer-remarks{ margin:30px; margin-left:35px; font-size:14px; }

#stateSel{ width:35%; float:left; }
#AddressRegion{ width:65%; float:left; margin-left:0; }

#step2{ text-align:center; }
#step2 p a.alink{ display:inline-block; }
#step2 p a.alink:first-child{ margin-right:20px; }
#step2 .line-break img{ margin-left:auto; margin-right:auto; }
#step2 .promo-list{ list-style:none; margin:0; padding:0; width:850px; margin-left: auto; margin-right: auto; }
#step2 .promo-list:after{ content:''; display:block; clear:both; } 
#step2 .promo-list li{ width:39.9%; float:left; padding:0 5%; }
#step2 .promo-list li:first-child{ border-right:1px dashed #376BB3; }
#step2 .promo-list li p.icon-desc{ text-align:left; }
#step2 .promo-list li p.icon-desc:after{ content:''; display:block; clear:both; } 
#step2 .promo-list li p.icon-desc img{ margin-right:10px; display:inline-block; width:20%;vertical-align: middle; }
#step2 .promo-list li p.icon-desc span{ display:inline-block; width:75%; vertical-align: middle;}
.content-item p a img, #tnc p a img, #video .alink img{ border:0; }

#Thankyou.content-item{ display:block; text-align:center; }
#Thankyou.content-item > p{ line-height:30px; margin-bottom:30px; }

#overlay{ display:none; position:fixed; width:100%; height:100%; background:url('../../images/overlay.png'); top:0; left:0;  z-index:1000; }
#tnc{ display:none; background-color:#FFF; width:850px; position:absolute; margin-left: auto; margin-right: auto; left:0; right:0; top:95px; z-index:1001; padding:50px; }
#tnc h2{ text-align:center; }
#tnc ol, #tnc ul{ padding:0; margin:0; padding-left:25px; }
#tnc table{ margin-top:20px;  border-collapse: collapse; }
#tnc table td, #tnc table th{ border:solid 1px #000; padding:10px; }
#tnc table th{ text-align:center; }
#tnc ol li, #tnc ul li{ margin-bottom:50px; }
#tnc #btn-close{ position:absolute; right: 1%; top: 0.5%; }
#tnc #btn-close img{ border:0; }
#tnc li a{ color:#000; }
#timer-popup{ position:absolute; top:45px; right:0; display:inline-block; background-color:#D9B082; border:solid 1px #FFFFFF; border-right:none; color:#FFF; opacity:0.9; padding:15px 20px; width:168px;  z-index: 999; display:none; }

.light{
background: -moz-linear-gradient(-45deg,  #D9B082 0%, #D9B082 40%, #ffffff 50%, #D9B082 60%, #D9B082 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#D9B082), color-stop(40%,#D9B082), color-stop(50%,#ffffff), color-stop(60%,#D9B082), color-stop(100%,#D9B082));
background: -webkit-linear-gradient(-45deg,  #D9B082 0%,#D9B082 40%,#ffffff 50%,#D9B082 60%,#D9B082 100%);
background: -o-linear-gradient(-45deg,  #D9B082 0%,#D9B082 40%,#ffffff 50%,#D9B082 60%,#D9B082 100%);
background: -ms-linear-gradient(-45deg,  #D9B082 0%,#D9B082 40%,#ffffff 50%,#D9B082 60%,#D9B082 100%);
background: linear-gradient(135deg,  #D9B082 0%,#D9B082 40%,#ffffff 50%,#D9B082 60%,#D9B082 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D9B082', endColorstr='#D9B082',GradientType=1 );
background-repeat: no-repeat;  
background-position:0px;
background-size:300%;  
}

.light{
  animation:light 1s infinite;
    -webkit-animation:light 1s infinite;
  
}
@keyframes light {
  0% {
        background-position:-300px; 
  }
  100% { 
        background-position:0px; 
  }
}       
@-webkit-keyframes light {
  0% {
        background-position:-300px; 
  }
  100% { 
        background-position:0px; 
  }
}


@media only screen and (max-width: 1024px) { 
  #wrapper, #video-wrapper{ width:100%; }
}

@media only screen and (max-width: 950px) {
  #tnc{ width:82%; padding: 4%; }
}

@media only screen and (max-width: 800px) {
  .desktop-only{display:none;}
  .mobile-only{display:block;} 
  #player{ height:320px; }
  #video p{ font-size:14px; line-height:25px; margin-bottom: 15px;  margin-top: 15px; }
  #video p span{ font-size:20px; }
  .content-item{ padding-left: 5%; padding-right: 5%; width: 90%; }
  .content-item table, .content-item .prod-desc{ width:100%; }
  .content-item table td{ display:block; height:auto; padding-bottom:20px; }
  .content-item table td.desktop-only{display:none;}
  .content-item table input[type="text"], .content-item table input[type="tel"], .content-item table input[type="email"], .content-item table select{ width:99%;  margin-left: 0px; -webkit-border-radius:0; 
    border-radius:0; padding: 0; }
  .content-item table td:first-child{ padding-right:0; width:100%; }
  .content-item table .district-label{ float: none; display: block; }
  .content-item table .district-list{ width:25%; }
  .content-item table td .btn-radio, .content-item table td .btn-radio.first{ margin-left:0px; margin-right:30px; margin-top: 5px; display: inline-block;}
  .content-item .alink, #video .alink, #tnc #btn-close{ zoom:0.8; }
  
  #stateSel{ width:40%; }
  #AddressRegion{ width:60%; }
  
  #step2 p a.alink:first-child{ margin-right:0px; margin-bottom:20px; }
  #step2 .line-break img{ width:100%; }
  #step2 .promo-list{ width:100%; }
  #step2 .promo-list li p img{ width:100%; }
  #step2 .promo-list li{ float:none; width:100%; padding:0; }
  #step2 .promo-list li:first-child{ border-right:none; border-bottom:1px dashed #376BB3; }
  
  #tnc{ top:4%; }
  #tnc ol li{ margin-bottom:30px; }
  #wrapper h2, #tnc h2{ font-size:24px; }
  #tnc h2{ padding-right:30px; }
  #video, .content-item{  }
  
  .top-shadow {
    width: 111.5%;
    position: relative;
    left: -6%;
  }
  .ui-datepicker{ left:5%!important; } 
  .prod-img{ margin-right:0px; float:none; }
  .thankyou-wrapper{ width:auto; }
  .mobile-center{ text-align:center; }
  .footer-remarks, #footer > div{ margin-left:5%; margin-right:5%; }
  .datepicker-col .ui-datepicker-trigger{ right:3px; }
}

@media only screen and (max-width: 400px) {
  .ui-datepicker{ width:88%; } 
  #step1 h2 img{ width:100%; }
  .content-item table input[type="text"], .content-item table input[type="tel"], .content-item table input[type="email"], .content-item table select{ }
}

@media only screen and (max-width: 370px) {
	#btn-trial a img, .content-item .alink img, #video .alink img{ width:100%; }
}