@charset "utf-8";
/*
  * danny 2016023

  $Reset
  $body,html
  $共用
  $Mobile
  $Pc

*/





/* $Reset
--------------------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote{margin:0; padding:0; } fieldset, img {border:0; } address, caption, cite, code, dfn, em, var {font-style:normal; font-weight:normal; } ol, ul {list-style:none; } q:before, q:after {content:''; } abbr, acronym {border:0; }





/* $font
--------------------------------------------------------------------------------------*/
/* cwTeXYen (Chinese Traditional) http://www.google.com/fonts/earlyaccess */
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

:before ,:after{ font-family:'FontAwesome';}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-family: Verdana,"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif;}





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}





/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-size: 16px; background: #efefef;/*  -webkit-text-size-adjust:none; */}





/* header */
header{ width: 100%; height: 60px; background: #fff; }
header h3{ width: 62px; height: 46px; background:url(../image/logo.gif) no-repeat; background-size:cover; float: left; margin:8px 0 0 5%;}
header h3>a{ display: block; width: 100%; height: 100%; }
header nav ul{ font-size: 0; text-align:right; padding-top: 13px; box-sizing:border-box;  }
header nav li{ display: inline-block; font-size: 14px; line-height: 18px; margin-right: 20px; width: 30px;   }
header nav li a{ color: #747474; text-decoration: none; }





/* mainContent */
.mainContent{ box-sizing:border-box;}
/* index */
.indexbg{ background: url(../image/index.jpg) no-repeat; background-size:cover; }
.btn_start{ width: 100%; }

/* activities */
.activities{ box-sizing:border-box; padding: 0 0 5% 0; }
.activities .topimg{ display: block; width: 100%; height: auto;}
.activities .main{ padding: 0 5% 5%; }
.activities .main p{ font-size: 0.875em; color: #555; line-height: 1.5em;}
.activities .main .tit{ color: #8ea413; font-size: 1em; line-height: 2em; }
.activities .main .twocol{ margin-bottom:15px; }
.activities .main .twocol .circle{ width: 18vw; height: 18vw; line-height: 60px; background: #c8d84f; color: #fff; border-radius:100%; font-size: 0.875em; text-align: center; font-style:italic; margin-right:2%;}
.activities .main ol{ list-style:decimal; font-size: 0.75em; line-height: 1.5em;}
.activities .main ol li{ margin: 0 0 20px 20px; }
.activities .main ol li:last-child{ margin: 0 0 0px 20px; }
/* step_1_1 */
.step_1_1{ box-sizing:border-box; padding: 0 0 5% 0; }
.step_1_1 img{ display: block; width: 100%; height: auto;}
.step_1_1 p{ font-size: .75em; color: #1d1d1d; }
.step_1_1 input[type="checkbox"]{-webkit-appearance:none; width: 15px; height: 15px; vertical-align: text-bottom; background:#fff; border:1px solid #a4a4a4;}
.step_1_1 input[type="checkbox"]:checked{ background: #d7e952; }
/* step_1_2 */
.step_1_2{ box-sizing:border-box; padding: 5% 5%; }
.step_1_2 p{ font-size: 1.125em; color: #494949; }
/* step_1_3 */
.step_1_3{ box-sizing:border-box; padding: 5% 5%; }
.step_1_3 p{ color: #494949; }
/* series */
.series-box{ width: 100%; height: 35px; background: #fff; position: relative;}
.series_ui{ width: 100%; height: 35px; position: absolute; }
.series_ui li{ width: 30px; height: 30px; line-height: 30px; background: #b0b0b0; border-radius:5px; position: absolute; color: #fff; text-align: center; }
.series_ui li:first-child{ left:5px; top:3px;  }
.series_ui li:last-child{ right:5px; top:3px;  }
.series_ui li>a{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.series_name-box{ width: 75%; height: 35px; margin: 0 auto;  position: relative; overflow: hidden;}
.series_name{ font-size: 0; position: absolute;   }
.series_name li{ display: inline-block; font-size: 18px; color: #363636; line-height: 35px; text-align: center; }
/* product */
.product-box{ width: 100%; height: 140px; position: relative;}
.product_ui{ width: 100%; height: 110px; position: absolute; }
.product_ui li{ width: 37px; height: 37px; line-height: 37px; background: #d7e952; border-radius:100%; position: absolute; color: #fff; text-align: center; font-size: 0.6em; }
.product_ui li:first-child{ left:5px; top:45px;  }
.product_ui li:last-child{ right:5px; top:45px;  }
.product_ui li>a{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.product_item-box{ width: 85%; height: 110px; margin: 0 auto;  position: relative; overflow: hidden; }
.product_item{ font-size: 0; position: absolute; }
.product_item li{ display: inline-block; }
/*.product_item li.active{ background: #fff; }*/
.product_item li>img{ display: block; width: 70%; margin: 0 auto;  }
.product_item li.active>img{ width: 100%; margin: 0 auto;  }
.product_name{ font-size:0.75em; }
.introtxt{ font-size: 1.125em;}
/* step_1_4 */
.step_1_4{ box-sizing:border-box; padding: 5% 5%; }
.step_1_4 p{ color: #494949; font-size: 0.75em; line-height: 1.5em;  }
.step_1_4 h3{ width: 70%; height: 0;  padding-bottom: 31%; background:url(../image/tit.gif) no-repeat; background-size:cover; margin: 0 auto 20px;   }
.step_1_4 input[type="checkbox"]{-webkit-appearance:none; width: 15px; height: 15px; vertical-align: text-bottom; background:#fff; border:1px solid #a4a4a4;}
.step_1_4 input[type="checkbox"]:checked{ background: #d7e952; }
.step_1_4 input[type="text"]{-webkit-appearance:none; width: 100%; height: 40px; line-height: 40px; background:#fff; border:1px solid #a4a4a4; margin-bottom:10px; box-sizing:border-box; padding:2%; color: #353535; font-size: 0.9375em; font-family: Verdana,"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; }
/* finish */
.finish{ box-sizing:border-box; padding: 5% 5%; }
.font_14px{ font-size: 0.875em;  }
.tit{font-size: 1.875em; }
/* productlist */
.porductlist{  }
.productlist li{ background: #e5e4e4; padding:5% 0 5% 5%; box-sizing:border-box; font-size: 0;}
.productlist li:nth-child(even){ background: #efefef;}
.productlist .product_photo{  float: left; width: 36%; height: 36vw; background: #fff; overflow: hidden; padding: 0;}
.productlist .product_photo img{ display: block; width: 90%; margin: 8% auto;}
.product_system{ padding: 3%; font-size: 12px; color: #1d1d1d; box-sizing:border-box;}
.productlist .product_info{  float: left; width: 64%; min-height: 36vw; overflow: hidden; padding: 0; }
.productlist .product_info_name{ height: 50px; padding:3%; box-sizing: border-box; color: #fff; margin-bottom:3%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a1a1a1+0,b5b5b5+39,c1c1c1+73 */
background: #a1a1a1; /* Old browsers */
background: -moz-linear-gradient(left,  #a1a1a1 0%, #b5b5b5 39%, #c1c1c1 73%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #a1a1a1 0%,#b5b5b5 39%,#c1c1c1 73%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #a1a1a1 0%,#b5b5b5 39%,#c1c1c1 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#c1c1c1',GradientType=1 ); /* IE6-9 */
}
.product_tit{ font-size: 13px; line-height: 1.5em; font-weight:bold; }
.product_detail{ color: #fff; font-size: 12px; }
.product_explain{ padding: 0 3%; color: #6e6e6e; font-size: 10px; }
/* list */
.list-box{  }
.list{}
.list li{ border:10px solid #fff; background: #fff; }
.list li img{ width: 100%;  }





/* step 共用 */
.btn{ font-size: 0; text-align: center; }
.btn li{ display: inline-block; height: 40px; line-height: 40px; background: #d7e952; font-size: 18px; color: #545454; position: relative;}
.btn li>a{ position: absolute; display: block; width: 100%; height:100%; }
.btn i{ color: #fff; }
.btn_circle{ border-radius:100%; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #fff;}
.photo-box{ width: 100%; height: 90vw; background: #fff; border:1px solid #363636; position: relative; overflow: hidden; }
.photo-box img{ position: absolute; width: 100%;   }
.photoview-box{ width: 100%; height: 90vw; background: #fff; position: relative; overflow: hidden; }
.photoview-box img{ position: absolute; width: 100%;   }
.bgphoto{ width: 100%; }
.productitem{ width: 30%; }





/* footer */
footer{ width: 100%; height: 70px; background: #fff; color: #535353; text-align: center; box-sizing:border-box; padding:8px 0 0 0;}
footer h5{ font-size: 0.75em; font-weight: normal; line-height: 30px; }
footer nav{}
footer nav ul{ font-size: 0; text-align: center; margin:5px 0 0 0; }
footer nav li{ display: inline-block; font-size: 14px; line-height: 12px; padding:0px 10px; border-right: 1px solid #535353; }
footer nav li:last-child{ border-right:0px; }
footer nav li>a{ color: #535353; text-decoration: none; }





/* pupinfo */
.pupinfo{ position: absolute; top:60px; width: 100%; height: 100%; background:rgba(0,0,0,.9); z-index: 100; box-sizing:border-box; }
.pupinfo p{ font-size: 1em; color: #fff; line-height: 1.5em; text-align: center;   }
.closebtn{ text-align:right; font-size: 0px; margin:2% 0 15% 0;}
.closebtn li{ display: inline-block; width: 26px;  height: 26px; position: relative; margin-right: 2%;  }
.closebtn li>a{ cursor: pointer; position: absolute; left: 0; top: 0; width: 100%;  height: 100%;}
.closebtn li:before{ display: block; content: ""; width: 26px; height: 2px; background: #fff; transform: translateY(13px) rotate(-45deg);}
.closebtn li:after{ display: block; content: ""; width: 26px; height: 2px; background: #fff; transform:  translateY(11px) rotate(45deg);}





/* other */
.w220{ width: 220px; }
.w45p{ width: 45%; }
.w48p{ width: 48%; }
.w60p{ width: 60%; }
.w70p{ width: 70%; }
.w80p{ width: 80%; }
.w100p{ width: 100%; }
.alignCenter{ text-align:center; }
.marginRight_1p{ margin-right: 1%; }
.marginRight_2p{ margin-right: 2%; }
.marginRight_3p{ margin-right: 3%; }
.marginTop_10px{ margin-top:10px; }
.marginTop_20px{ margin-top:20px; }
.marginBottom_10px{ margin-bottom:10px; }
.marginBottom_20px{ margin-bottom:20px; }
.marginBottom_30px{ margin-bottom:30px; }
.colorYellow,p.colorYellow{ color: #d7e952;}
.colorGreenYellow,p.colorGreenYellow{ color: #8ea413;}
.colorWhite,p.colorWhite{ color: #fff; }
.colorRed,p.colorRed{ color: #ff3c00; }





/* loading */
.loaders{ position: absolute; top:60px; width: 100%; height: 100%; background:rgba(0,0,0,.9); z-index: 100; box-sizing:border-box; }
.loaders ol li .loader { position: relative; margin: 20% auto;}
.loaders ol li .pl-circles .loader { width: 100px; height: 60px;}
.loaders ol li .pl-circles .loader span, .loaders ol li .pl-circles .loader:before, .loaders ol li .pl-circles .loader:after { position: absolute; display: block; width: 10px; height: 10px; border-radius: 50%; opacity: 0.2; background: #fff;}
.loaders ol li .pl-circles .loader span { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: lightUp 1.5s linear infinite 0.5s;}
.loaders ol li .pl-circles .loader:before, .loaders ol li .pl-circles .loader:after { content: "";}
.loaders ol li .pl-circles .loader:before { top: 50%; left: 0; transform: translate(0, -50%); animation: lightUp 1.5s linear infinite;}
.loaders ol li .pl-circles .loader:after { top: 50%; right: 0; transform: translate(0, -50%); animation: lightUp 1.5s linear infinite 1s;}

/* Animations */
@keyframes lightUp {  0% { opacity: 0.2; }  40% { opacity: 1; }  60% { opacity: 0.2; }  100% { opacity: 0.2; } }





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
/* mainContent */
.mainContent{ box-sizing:border-box; max-width:768px; margin: 0 auto;}
/* activities */
.activities .main .twocol .circle{ width: 80px; height: 80px; line-height: 80px; }
/* series */
/* product */
.product-box{ width: 100%; height: 260px; position: relative;}
.product_ui li:first-child{ top:80px;  }
.product_ui li:last-child{ top:80px;  }
.product_item-box{ height: 220px;}
/* productlist */
.productlist .product_photo{  height: 276px;}
.productlist .product_info{  min-height: 276px; }
.productlist .product_info_name{ height: 80px;}
/* step 共用 */
.photo-box{ height: 690px;}
.photoview-box{ height:690px;}
.btn_start{ width: 768px; }

}