@charset "utf-8";

@font-face {
  font-family: 'MyriadPro-Regular';
  src:url('font/Myriad%20Pro/MyriadPro-Regular.eot');
  src: url('font/Myriad%20Pro/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
       url('font/Myriad%20Pro/MyriadPro-Regular.woff2') format('woff2'), 
       url('font/Myriad%20Pro/MyriadPro-Regular.woff')  format('woff'),
       url('font/Myriad%20Pro/MyriadPro-Regular/MyriadPro-Regular.ttf') format('truetype'),
       url('font/Myriad%20Pro/MyriadPro-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;}
  
  @font-face {
  font-family: 'CenturyGothic';
  src:url('font/Century%20Gothic/CenturyGothic.eot');
  src: url('font/Century%20Gothic/CenturyGothic.eot?#iefix') format('embedded-opentype'),
       url('font/Century%20Gothic/CenturyGothic.woff2') format('woff2'),
       url('font/Century%20Gothic/CenturyGothic.woff') format('woff'),
       url('font/Century%20Gothic/CenturyGothic.ttf') format('truetype'),
       url('font/Century%20Gothic/CenturyGothic.svg#CenturyGothic') format('svg');
  font-weight: normal;
  font-style: normal;

}

/* ===============  HTML5 display definitions  =============== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; } 
[hidden] { display: none; }

/* ===============  Base  =============== */
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  -webkit-font-smoothing: antialiased; height:100%;   }
body { display: none; width:100%; height:100%; margin: 0; overflow-x:hidden;  position:relative; 
	   font-size: 100%; line-height: 100%; font-weight:normal;
	   font-family: 'CenturyGothic', 'MyriadPro-Regular', 'Helvetica Neue', 'Helvetica', 'Arial', 'MHei', 'STHeitiTC-Light', 'Microsoft JhengHei', '微軟正黑體',  sans-serif;  
	   /*text-rendering: optimizeLegibility;*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern';
      -webkit-overflow-scrolling: touch; }
 
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } 
a{ text-decoration:none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }
a:active, a:hover { outline: 0; }
img { border: 0;}
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
dl, menu, ol, ul { margin: 0; }
ul{ list-style:none; list-style-image: none; }
table { border-collapse: collapse; border-spacing: 0; }

 
/* ===============  Forms  =============== */
form { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px;  }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;  }
button, input { line-height: normal; }
button, html input[type="button"], 
input[type="reset"], input[type="submit"] 
{ -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
input[type="text"], input[type="password"],textarea{ border:0; background:transparent}

/*藍色框消失*/
input,button,select,textarea{outline:none}
 *:focus { outline: none; }

 /*快速消失*/
input:focus, textarea:focus{ outline:none; }
input:focus:placeholder { color: transparent; }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder  { color: transparent; }
input:focus:-ms-input-placeholder  { color: transparent;}
/* ===============  Typography  =============== */

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
mark { background: #ff0; color: #000; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

hr{border:0;}

/* ===============  Global  =============== */
.txtRight{ text-align:right; }
.txtCenter{ text-align:center; }
.clear{ clear:both; }
.L{ float:left; }
.R{ float:right; }
.M{ margin-right:auto; margin-left:auto; }
.aa1{ opacity:.7; filter: alpha(opacity=70); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=70)";  }

 *:focus { outline: none; }

.aaMore{ text-transform:uppercase; font-size:.75rem; color:#000; font-family:'MyriadPro-Regular', '微軟正黑體'; display:inline-block; text-align:center; border:1px solid #000; position:absolute; z-index:999; bottom:4em;; left:0; width:238px; height:40px; line-height:40px; left:0; right:0; margin:auto;}
.aaMore:hover{background:#000; color:#FFF;}
.aascrollArrow { cursor: pointer; display:block; width:36px; height:36px; border-radius:50%; border:1px solid #BED62F; background:#000 url(../img/arrow-down.png) no-repeat center center; position:absolute; left:0; right:0; margin:auto; z-index:999; top:-1em}
.aascrollDown { display:block; width:36px; height:36px; border-radius:50%; border:1px solid #000; background:url(../img/arrow-down01.png) no-repeat center center; position:absolute; left:0; right:0; margin:auto; z-index:999; bottom:25%;cursor:pointer}
.aascrollDown:hover{ bottom:24%}
.aascrollDown01{ cursor: pointer; display:block; width:36px; height:36px; border-radius:50%; border:1px solid #FFF; background:url(../img/arrow-down.png) no-repeat center center; position:absolute; left:0; right:0; margin:auto; z-index:999; bottom:25%;}
.aascrollDown01:hover{ bottom:24%}
.aascrollDownPro{ cursor: pointer; display:block; width:36px; height:36px; border-radius:50%; border:1px solid #000; background:url(../img/arrow-down01.png) no-repeat center center; position:absolute; left:0; right:0; margin:auto; z-index:999; bottom:1.5em;}

.aascrollDownPro:hover{bottom:1em;}
.aaContact { font-size:.75rem; color:#BED62F;display:block; width:237px; height:40px; /*padding:1em 5em;*/; line-height:40px; text-align:center; background:#000; margin:auto;position:absolute; left:0; right:0; bottom:15%}
.aaContact:hover{background:#BED62F; color:#000; }
.aagoTop{  display:block; width:36px; height:36px; border-radius:50%; border:1px solid #000; background:#FFF url(../img/arrow-up.png) no-repeat center center; position:absolute; left:0; right:0; margin:auto; z-index:999; top:-5%;}
.aabtn-pro{display:inline-block; vertical-align:middle; width:19px; height:19px; background:url(../img/pro_btn.png) no-repeat center center; /*outline:solid 1px red; position:absolute; right:45%; margin:auto; bottom:28%; z-index:999;*/}
@media only screen and (max-width: 850px) {
	.aagoTop{ top:-3%}
	}
@media only screen and (max-height:800px) {
	.aascrollDownPro{bottom:1em; transform:scale(0.8); -webkit-transform:scale(0.8)}
	.aascrollDownPro:hover{bottom:.8em;}
	}
@media only screen and (max-width: 500px) {
	.aascrollDown01 {bottom:10%;transform:scale(0.8); -webkit-transform:scale(0.8)}
	.aascrollDown01:hover{ bottom:9%;}
	}
@media only screen and (max-height: 480px) {
	.aaMore {bottom:2em;}
}
@media only screen and (max-width: 400px) {
	.aascrollDownPro{bottom:.6em; transform:scale(0.6); -webkit-transform:scale(0.6)}
	.aascrollDownPro:hover{bottom:.5em;}
	}
@media only screen and (max-height: 480px) {
	.aaMore {bottom:2em;}
	}
/* ===============  Header  =============== */
.wrapperH100{ position: relative; height: 100%; width:100%; max-width:100%; overflow:hidden; }
.wrapper {position: relative; width:100%; max-width:100%; }
.container{ width:90%; margin:0 auto; max-width: 980px; position:relative;  }   /*maxWidth*/
.container01{ width:90%; margin:0 auto; max-width: 1440px; position:relative;  }


header{  }
.menu-bar {background:#1E1E1E; height:70px; border-bottom:1px solid #BDD630; position:relative;}
.logo{ position:absolute; top:15px; z-index:999;}

.menu-btn {width:47px; height:30px; position:absolute; right:0; z-index:999; top:25px; padding-left:24px; border-left:1px solid #353535; padding-top:5px;} 
.menu-btn div { width:100%; height:2px; background:#FFF; margin:4px auto; transition: all 0.3s; backface-visibility: hidden;}
.menu-btn.on .one {transform: rotate(45deg) translate(5px, 5px);}
.menu-btn.on .two {opacity: 0;}
.menu-btn.on .three {transform: rotate(-45deg) translate(3px, -3px);}

.searchBox{ background:url(../img/icon-search.jpg)}
.lang{font-size:11px; position:absolute; right:55px; color:#F0F0F0; top:35px; z-index: 10000;}
.lang > span{ cursor: pointer;}
.lang .langBox, .lang >　span{ display:inline-block}
.lang .langBox{ display:none;}
.lang .langBox a{ color:#FFF; display:inline-block; margin:0 10px;}
.lang .langBox a:hover{ color:#8B8585}

.menu { padding: 24px 15px; position: relative; width: 100%; display:inline-block; text-align:center;display:none; height:70px}
.menu li { font-size:.8rem; font-weight:bold; display:inline-block;}
.menu li a { padding: 10px 20px 12px;display: block;color: #fff;text-decoration: none;}
.menu li a.on{color:#BED62F;}
.menu > li > a:hover{ /*border-bottom:8px solid #e5e5e5; */color:#BED62F;}

	
.menu li ul {padding: 30px 15px; position:absolute; left:0; width:100%; color:#fff; background:#e5e5e5; display: none; z-index:99; height:70px;}
.menu li ul li { border-right: 1px solid #fff; font-weight:normal}
.menu li ul li:last-child{ border-right:none;}
.menu li ul li a { display: block; color:#000; padding:0 24px; }
.menu li ul li a:hover {color:#8D8D8D}
#addMenu{display:none;}
#phoneMenu{display:none;}
@media only screen and (max-width: 1000px) {
.menu{ background:#1E1E1E; height: auto; position:absolute; top:70px; left:0; z-index:99999; display:none;    }
.menu li{ display: block; text-align:left; position: relative;  }
.menu li ul{ position: relative; height:auto; padding:0;   }
.menu li ul li { border-right: none; }
.menu li ul li a { padding: 12px 20px; width:100%;}

.menu li.has-submenu > a:after {content: '+'; position: absolute;top: 0;right: 0;display: block;font-size: 1.5em;padding: 0.55em 0.5em; color:#BED62F}
.menu li.has-submenu > a:.active:after {content: "-";}

#pcMenu{display:none;}
#phoneMenu{display:block;}
#addMenu{display:block;}
}
 
.bannerIND{position:absolute; width:100%; height:100%; overflow:hidden;}
.bannerIND div { display:block; width:100%; height:100%; background:#FFF; }

.indexTitle {text-align:center; max-width:30em; margin: 6em auto 3.6em;}
.indexTitle h2 { font-size:3.25rem; color:#000; font-weight:bold; margin-bottom:50px; letter-spacing:1px; line-height:90%;}
.indexTitle h3 { font-size:3rem; color:#000; font-family: 'Source Code Pro', '微軟正黑體'; margin-bottom:32px;letter-spacing:-2px; font-weight:normal; }
.indexTitle p{ font-family:'MyriadPro-Regular', '微軟正黑體'; font-size:.8rem; color:#666; letter-spacing:1px;}
@media only screen and (max-width: 650px) {
	.indexTitle p { display:none}
	}
@media only screen and (max-width: 550px) {
	.indexTitle h3{display:none;}
}
@media only screen and (max-height:400px) {
	.indexTitle {margin:2.5em auto 0;}
	.indexTitle h3 {display:none;}
	}
.hotProducts { background:#E5E5E5;}
.hotProducts .container01 { padding:8em 0 13em;}
.hotProducts .tit{ text-align:center; padding-bottom:3.75em;}
.hotProducts .tit h3 { font-size:3rem; margin-bottom:.5em; font-weight:normal; letter-spacing:1px; line-height:110%}
.hotProducts .tit span { font-size:1.25rem; color:#666;}
.hotProducts .tit hr { width:94px; height:5px; background:#BED62F; margin:2em auto 0;}

.WF_indAD{ width:100%;}
.WF_indAD:after { content: ''; display: block; clear: both;}
.WF_indAD img{ vertical-align:top; width:100%; height:auto; }
.grid-sizerA, .grid-itemA { width:25%;}
.grid-itemA {overflow:hidden; position:relative;}

.w2{ width:50%; }
.WF_indAD .frame { position: absolute; top:0; height:100%; width:100%; border:2px solid #E5E5E5; /*transparent;*/ overflow:hidden;}

.mask{ display:block; padding:5px; position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:rgba(0,0,0,.8); overflow:hidden;
	 opacity:0; -moz-opacity: 0;  -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	 -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;  } 
.mask:hover{transform: scale3d(0.97,0.97,0.5); /*-webkit-transform: scale3d(0.97,0.92,1)*/;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;  }
.WF_indAD  span{ line-height:110%;width:80%;text-align:center; padding:1em 2em; margin:0 auto; display:block; opacity:0; }	 
.WF_indAD .mask{ display:table; }
.mask_txt_center{ width:80%; height:100%; display:table-cell; vertical-align:middle; text-align:center; }	
.mask_txt_center span{ font-size:1.1rem;}
.mask_txt_center span a{ color:#FFF;}
.mask_txt_center h3{font-size:3.5rem; margin-bottom:.5em; line-height:1em; color:#BED62D;}
.mask_txt_center h3 a{color:#BED62D; }
.mask_txt_center p{ font-size:.8rem; color:#C0C0C0; width:303px; margin:0 auto 2em;}
	
.plus{  display:block; text-align:center; margin:auto; position:relative;
		 font-size:2em; width: 1em; height:1em; line-height:1.5em;   color: #fff; border:solid 2px #fff;  
		 border-radius: 50em; -webkit-border-radius: 50em; -moz-border-radius: 50em; -ms-border-radius: 50em; 
		  }
.plus:before{ content: '+'; position:absolute; width:100%; display:inline-block; left:0; top:50%; margin-top: -24px; font-size:24px;}

.WF_indAD .plus{ color:#FFF; border-color: #BED62D;  transform: scale(.6); -webkit-transform: scale(.6);}


.grid-itemA:hover .mask, .grid-itemA:hover .plus, .grid-itemA:hover .mask span
{ opacity: 1; -moz-opacity: 1;  -khtml-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 

.grid-itemA:hover .plus, .grid-itemA:hover .mask span
{  transform: scale(1); -webkit-transform: scale(1);  }
	
@media only screen and (max-width: 1300px) {
	.mask_txt_center p{display:none;}
	}
@media only screen and (max-width: 1000px) {
	.mask_txt_center h3{ font-size:2.5rem}
	}
@media only screen and (max-width: 900px) {
	.mask_txt_center h3{ font-size:2rem}
	}
@media only screen and (max-width: 800px) {
	.mask_txt_center span {display:none;}
	}
@media only screen and (max-width: 600px){
	.mask_txt_center h3{ font-size:1rem}
	.plus{ width:.8em; height:.8em;}
	.plus:before { font-size:12px;}

	}
@media only screen and (max-width: 450px){
	.mask_txt_center h3{ font-size:.8rem}
	}
.latestNews .container { padding:10em 0 13em;}
.latestNews .tit{ text-align:center; padding-bottom:3.75em;}
.latestNews .tit{ text-align:center; padding-bottom:3.75em;}
.latestNews .tit h3 { font-size:3rem; margin-bottom:.5em; font-weight:normal; letter-spacing:1px;}
.latestNews .tit span { font-size:1.25rem; color:#666;}
.latestNews .tit hr { width:94px; height:5px; background:#BED62F; margin:2em auto 0;}
.botm15{bottom:15%;}
@media only screen and (max-width: 480px) {
	.grid-sizerA, .grid-itemA { width:100%;}
	.w50{width:100%}
	.mask_txt_center h3 { font-size:3rem;}
	}
@media only screen and (max-width: 450px) {
	.indexTitle h2 {font-size:2.8rem;}
	.hotProducts .tit h3{font-size:2.5rem; }
	.latestNews .tit h3{ font-size:2.5rem;}
	.hotProducts .container01{ padding:4em 0 7em;}
	.latestNews .container{ padding:4em 0 7em;}
	.botm10{bottom:10%;}
}	

@media only screen and (max-width: 400px) {
	.mask_txt_center h3 { font-size:2rem;}
	}
@media only screen and (max-width: 400px) {
	.indexTitle h2 {font-size:2.3rem;}
	}
.newsIND{ max-width:979px; margin:auto;}
.newsIND li {width:50%;text-align:center;}
.newsIND li:nth-child(odd) { border-right:1px solid #CCC}
.newsIND li .inner {width:80%; margin:0 auto; text-align:center;}
.newsIND li .inner .img { margin:auto; width:130px; height:130px; margin-bottom:1.8em; border:1px solid #000; border-radius:50%; position:relative; }
.newsIND li .inner .img .date { font-size:1.8rem; color:#000; font-weight:bold; line-height:110%; position:absolute; top:25%; left:0; right:0; margin:auto;}
.newsIND li .inner .img .date span { display:block;}
.newsIND li .inner .img img{ border-radius:50%; display:none; }
.newsIND li .inner .img:hover img{ display:block;   -webkit-filter : brightness(.5) ; filter : brightness(.5) ;}
.newsIND li .inner .img:hover .date { color:#bed62f;}
.newsIND li .inner a p{ font-size:1.1rem; color:#000; font-family:'MyriadPro-Regular', '微軟正黑體';max-width:245px; margin:0 auto .8em; line-height:150%;}
.newsIND li .inner a small{ font-size:.8rem; color:#333; max-width:313px; margin:auto; display:block; line-height:150%;}
@media only screen and (max-width: 700px) {
	.newsIND li:nth-child(odd) { border-right:0}
	}
.contactSide{ background:#333; padding:4em 0; position:relative;}
.contactBox li{ display:inline-block; width:50%; margin-right:-4px; vertical-align:top;}
.contactBox li:first-child { border-right:1px solid #505050;}
.contactBox li div{ display:inline-block; margin-right:-4px; vertical-align:top;}
.contactBox li .img{ width:20%;}
.contactBox li .img img{ max-width:100%;}
.contactBox li:nth-child(2) .img img { float:right}
.contactBox li .txt {width:80%; letter-spacing:1px;}
.contactBox li .txt .inner { width:78%; margin:auto; display:block;}
.contactBox li .txt h5{ font-size:1.1rem; color:#FFF; font-family:'CenturyGothic', '微軟正黑體'; margin-bottom:1.4em; line-height:150%;}
.contactBox li .txt p{ margin-bottom:1.7em; line-height:150%;}
.contactBox li .txt p, .contactBox li .txt span{ font-size:.8rem; color:#C4C4C4; font-family:'MyriadPro-Regular', '微軟正黑體'}
.contactBox li .txt a{ font-size:.75rem; color:#FFF; padding:.5em 5em .5em .5em; border:1px solid #BED62F; position:relative;}
.contactBox li .txt a:hover{ background:#BED62F;}
.contactBox li .txt a:after{ position:absolute; content:'+'; color:#BED62F; right:9px; margin:auto;}
.contactBox li .txt span.regular{ font-size:1.1rem; font-weight:normal;}
.contactBox li .txt span.white{ color:#FFF;}

@media only screen and (max-width: 750px) {
	.contactBox li { width:100%; margin-bottom:50px}
	.contactBox li:first-child { border-right:none; padding-bottom:50px; border-bottom:1px solid #505050;}
	.contactBox li .txt span{display:block;}
	.contactBox li .txt span.white {margin-top:10px}
	.contactSide {padding:1.5em 0 1em;}
	}


/* =============== 產品頁  =============== */
.productsIND{position:absolute; width:100%; height:100%; overflow:hidden; display:none;}
.productsIND div {width:100%; height:100%;}

#productsIND_pc{ display:block; }
#productsIND_phone{ display:none;}

.productTitle{ text-align:left; width:100%; height:100%; }
.productTitle > .inner{ max-width:980px; margin:auto; width:90%; height:100%;}
.productTitle > .inner .table{display:table; width:100%; height:100%;}
.productTitle > .inner .table .table-cell{display:table-cell; vertical-align:middle;  width:100%; height:100%; }
.productTitle h1{ font-size:6.5rem; color:#BED62D; font-weight:normal; margin-bottom:50px; line-height:95%; width:50%; }
.productTitle span{ font-size:1.8rem; color:#FFF; margin-bottom:24px; display:inline-block;line-height:110%; width:22.5em;}
.productTitle p{ font-size:1.1rem; color:#757575; line-height:150%; margin-bottom:50px; width:22.5em;}
.productTitle a{ fon-size:.75rem; color:#BED62D;display:block; width:240px; height:42px; border:1px solid #BED62D; text-align:center; line-height:42px; margin-top:2em;}
.productTitle a:hover{  background:#BED62D; color:#FFF;}
.productsIND .pic{ position:absolute; right:0;}


.productTitle-C{ text-align:center; width:100%; height:100%; }
.productTitle-C > .inner{ max-width:1440px; margin:auto;width:100%; height:100%;}
.productTitle-C > .inner .table{display:table; width:100%; height:100%;}
.productTitle-C > .inner .table .table-cell{display:table-cell; vertical-align:top;  width:100%; height:100%;  padding:3em}
.productTitle-C h1{ font-size:6.5rem; color:#BED62D; font-weight:normal; line-height:95%; width:50%; margin:auto}
.productTitle-C span{ font-size:1.8rem; color:#FFF; margin-top:50px; margin-bottom:24px; display:block;line-height:110%;}
.productTitle-C p{ font-size:1.1rem; color:#757575; line-height:150%; max-width:22.5em; margin:0 auto 50px;}
.productTitle-C a{ fon-size:.75rem; color:#BED62D;display:block; width:240px; height:42px; border:1px solid #BED62D; text-align:center; line-height:42px; margin:2em auto 0;}
.productTitle-C a:hover{  background:#BED62D; color:#FFF;}
.productsIND-C .pic{ position:absolute; right:0;}


.productTitle-R{  width:100%; height:100%; }
.productTitle-R > .inner{ max-width:1440px; margin:auto; width:90%; height:100%; direction:rtl}
.productTitle-R > .inner .inner02 { direction:ltr; width:0%; margin:auto; background:pink}
.productTitle-R > .inner .table{display:table; width:100%; height:100%; }
.productTitle-R > .inner .table .table-cell{display:table-cell;  width:100%; height:100%; vertical-align:middle}
.productTitle-R h1{ font-size:6.5rem; color:#BED62D; font-weight:normal; line-height:95%; }
.productTitle-R span{ font-size:1.8rem; color:#FFF; margin-top:50px; margin-bottom:24px; display:block;line-height:110%;}
.productTitle-R p{ font-size:1.1rem; color:#757575; line-height:150%; margin-bottom:50px;}
.productTitle-R a{ fon-size:.75rem; color:#BED62D;display:block; width:240px; height:42px; border:1px solid #BED62D; text-align:center; line-height:42px; margin-top:2em}
.productTitle-R a:hover{  background:#BED62D; color:#FFF;}
.productsIND-R .pic{ position:absolute; right:0;}


.content{ }
.content .container{ padding:6em 0 8em;}
.content .tit{ text-align:center; margin-bottom:4em;}
.content .tit h3 {font-size:3rem; margin-bottom:.75em; font-weight:normal; line-height:110%;}
.content .tit p { color:#6A6A6A; max-width:555px; margin:auto; font-family:'MyriadPro-Regular', '微軟正黑體'; letter-spacing:2px; line-height:150%;}

@media only screen and (max-width: 1000px) {
	
	.productTitle h1, .productTitle-C h1, .productTitle-R h1{ font-size:5rem; padding:.5rem; margin-bottom:20px}
	.productTitle p, .productTitle-C p, .productTitle-R p{font-size:.9rem;}
	.productTitle-R{right:5%}
	}
@media only screen and (max-width: 800px) {
	#productsIND_pc{ display:none; }
	#productsIND_phone{ display:block;}
	
	.productTitle > .inner{width:95%;}
	.productTitle > .inner .table .table-cell { vertical-align:top; padding-top:50px;}
	.productTitle{ text-align:center;}
	.productTitle h1 {font-size:3rem; margin:0 auto 30px; width:90%;}
	.productTitle span { font-size:1.5rem; width:100%; max-width:90%}
	.productTitle p{ font-size:.8rem;  max-width:22.5em; margin:auto}
	.productTitle a{ margin:2em auto 0;}
	
	}
@media only screen and (max-width: 480px) {
	.productTitle h1 { font-size:2.5rem;}
	.productTitle a{ margin:1em auto 0; width:200px; height:35px; line-height:35px;}
	}
@media only screen and (max-width: 450px) {
	.content .container{ padding-top:2.5em;}
	.content .tit{margin-bottom:2em; }
	.content .tit h3 {font-size:2rem;}
	}
@media only screen and (max-width: 400px) {
	.productTitle h1 { font-size:2.2rem;}
	}
	
.btnSide{text-align:center; margin-bottom:2.5em; width:100%;}
.btnSide a{ font-size:.8rem; color:#000; font-weight:bold; display:inline-block; padding:13px 18px; text-align:center;border:1px solid transparent; letter-spacing:.5px;}
.btnSide a:hover{ border:1px solid #000;}
.btnSide a.on {border:1px solid #000;}

.select-box01 {  padding: 0;margin: 0; border: 1px solid #000; width:100%; overflow: hidden; background: #fff url(../img/arrow-select.png) no-repeat 98% 50%; display:none; margin-bottom:50px;}
.select-box01:after{ clear:both; content:''; display:block;}
.select-box01 select {font-family:'MyriadPro-Regular', '微軟正黑體';  border:none; padding: 5px 8px;width: 100%;box-shadow: none; background-color: transparent; background-image: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.select-box01 select:focus {outline: none;}

@media only screen and (max-width: 600px) {
	.btnSide{ display:none!important;}
	.select-box01 { display:block;}
	}
.productBox{ margin-bottom:4em;}
.productBox li { display:inline-block; width:49%; background:#F5F5F5; border:1px solid #D2D2D2; padding:4.6em 4.6em 2.6em; text-align:center; margin-right:-4px; margin-bottom:2%; vertical-align:top; min-height:490px;}
.productBox li .img img{  max-width:100%; }
.productBox li .img {min-height:216px; margin-bottom:2em;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }
.productBox li .img:hover { transform: scale(1.1); -webkit-transform: scale(1.1); }
.productBox li .txt h5{ font-size:1.5rem; margin-bottom:1.6em; /*min-height: 60px;*/ line-height:120%;}
.productBox li .txt h5 a { color:#000}
.productBox li .txt p{ font-size:.9rem;  max-width:375px; margin:auto; font-family:'MyriadPro-Regular', '微軟正黑體'}
.productBox li .txt p a{color:#515151;}
.productBox li:nth-child(odd) {margin-right:1.8%;}
.productBox li .txt .pro_plus{ font-size:1.5em; display:block; width:34px; height:34px; line-height:34px; border:1px solid #000; border-radius:50%; color:#000;  text-align:center; margin:0 auto;}
.productBox li .txt .pro_plus:hover{ transform: scale(1.2); -webkit-transform: scale(1.2);}
@media only screen and (max-width: 880px) {
	.productBox li{padding: 4em 2em 2.6em}
	}
@media only screen and (max-width: 800px) {
	.productBox li{ width:100%; padding:2.5em; min-height:auto;}
	}
@media only screen and (max-width: 400px) {
	.productBox li{padding:1.2em;}
	.productBox li .img{ margin-bottom:12px}
	.productBox li .txt .pro_plus:hover{ transform: scale(1.1); -webkit-transform: scale(1.1);}
	}
.products {position:relative}
.pro_list li .container{display:table; width:90%; margin:auto; /*min-height:470px;*/ padding-top:1em}
.pro_list li:nth-child(odd){background:#EEE; }
.pro_list li .container .txt {display:table-cell; vertical-align:middle; width:50%; }
.pro_list li .container .txt h4 { margin-bottom:37px;}
.pro_list li .container .txt h4 a{  font-size:2.25rem; line-height:110%;}
.pro_list li .container .txt p{ margin-bottom:45px; line-height:150%; font-family:'MyriadPro-Regular', '微軟正黑體'; max-width:375px;}
.pro_list li .container .txt p a{ font-size:.9rem; color:#515151; }
.pro_list li:nth-child(even) .container .txt{ direction:ltr}

.pro_list li:nth-child(even) .container .txt p{text-align:left;}
.pro_list li .container .txt a{font-size:.7rem; color:#000; position:relative;}
.pro_list li .container .txt > a:before{ font-size:1.5rem; display:inline-block; width:34px; height:34px; border:2px solid #000; border-radius:50%; content:'+'; line-height:34px; text-align:center; margin-right:5px}
/*.pro_list li .container .txt > a:before:hover{ transform: scale(1.2); -webkit-transform: scale(1.2);}*/

.pro_list li .container .img {display:table-cell; vertical-align:middle; width:50%; }
.pro_list li .container .img img{ max-width:100%;}
.pro_list li:nth-child(odd) .container .img{text-align:right;}
.pro_list li:nth-child(even) {direction:rtl;}

.pro_img02{ position:absolute; bottom:0;}
.pro_img05{ position:absolute; bottom:0; right:5%;}
@media only screen and (max-width: 600px) {
	.pro_list li .container .txt, .pro_list li .container .img { display:block; width:100%;}
	.pro_list li .container .txt {padding:1em; text-align:center;}
	.pro_list li .container .txt p {max-width:100%}
	}


.newsbg{background:url(../img/newsbg.png) no-repeat center center; background-size:cover;}
.newsBox{}
.newsBox li{display:inline-block; text-align:center; margin-bottom:2.25em; /*box-shadow:1px 1px 7px rgba(0,0,0,.1);*/ width:33.3%; margin-right:-4px; vertical-align:top}
/*.newsBox li:nth-child(3n) { margin-right:0;}*/
.newsBox li .inner{ width:95%; margin:auto; box-shadow:1px 1px 7px rgba(0,0,0,.1);padding-bottom:2.5em; background:#FFF; min-height:450px;}
.newsBox li .img {position:relative;  min-height:275px}
.newsBox li .img img{ max-width:100%;}
.newsBox li .img > a{ display:block; width:34px; height:34px; border:2px solid #bed62d; border-radius:50%; background:#000; position:absolute; left:0; right:0; margin:auto; bottom:-5%; color:#FFF; line-height:32px; z-index:999}
.newsBox li .word { }
.newsBox li .word a h5 {font-size:1.1rem; color:#000; max-width:260px; margin:3em auto 1em; line-height:150%;}
.newsBox li .word a p{ font-size:.8rem; color:#333; max-width:285px; margin:auto; line-height:150%; font-family:'MyriadPro-Regular', '微軟正黑體';}
.newsBox li .img .mask{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:rgba(0,0,0,.8); overflow:hidden;
	 opacity:0; -moz-opacity: 0;  -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	 -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;  }
.newsBox li .img .mask .date{ color:#FFF; display:block; width:133px; height:133px; border-radius:50%; border:1px solid #FFF; margin:auto; position:absolute; top:25%; left:0; right:0; line-height:180%}
.newsBox li .img .mask .date span{ font-size:1.8rem; font-weight:bold; display:block}
.newsBox li .img .mask .date span:first-child { ;margin-top:30%}
.newsBox li .img:hover .mask{opacity: 1; -moz-opacity: 1;  -khtml-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.newsBox li .img .mask .play { display:block; background:url(../img/icon-play.png) no-repeat center center; width:100%; height:100%; }
@media only screen and (max-width:800px) {
	.newsBox li{ width:50%}
	.newsBox li .word a h5 {padding:0 .5em}
	.newsBox li .word a p { max-width:100%; padding:0 .8em;}
	}
@media only screen and (max-width:600px) {
	.newsBox li .img{max-width:100%;}
	.newsBox li{ width:100%}
	
	}

#lightbox-panel{ position:fixed; top:0;	left:0; right:0; width:80%; max-width:800px; margin:auto; background:#FFF; padding:5em 4.6em 6em; z-index:1001; display:none; height:100%;}
  
#lightbox-panel .date { font-size:3rem; font-weight:bold; max-width:105px; margin:36px auto 57px; }
#lightbox-panel .date span {display:block;}
#lightbox-panel .date span:first-child { margin-bottom:.75em;}
#lightbox-panel .title{ font-size:1.75rem; font-weight:bold; line-height:110%; text-align:center; max-width:415px; width:100%; margin:36px auto;}
#lightbox-panel p { font-size:.9rem; line-height:150%; margin-bottom:2.5em}
#lightbox-panel img { max-width:100%;}
#lightbox-panel .x{ background:url(../img/icon-x.png) no-repeat; width:17px; height:20px; position:absolute; right:1.6em; top:2em;}
#lightbox-panel .fb{ background:url(../img/icon-fb01.png) no-repeat; width:8px; height:19px; position:absolute;  right:4.25em; top:2em;}

.x-bottom{ background:url(../img/icon-x.png) no-repeat; width:17px; height:20px; position:absolute; margin:auto; bottom:-45%; left:0; right:0; }
#lightbox {display:none; background: rgba(0,0,0,0.8); position:fixed; top:0px; left:0px; min-width:100%; min-height:100%;height:100%;z-index:1000;}

.newsBack{ text-align:center; padding:4em 0;}
.newsBack .date{ font-size:3rem;}
.newsBack .date span{ font-weight:bold; display:block; margin-bottom:10px;}
.newsBack .date span:first-child{margin-bottom:.75em;}
.newsBack .tit{ font-size:1.75rem; font-weight:bold; line-height:110%; max-width:415px; margin:36px auto;}
.newsBack img{  max-width:100%; width:100%; height:100%;}
.newsBack p{ font-size:.9rem; line-height:150%; text-align:left; margin-bottom:2.5em; /*padding:0 16%*/}
@media only screen and (max-width:800px) {
	#lightbox-panel{width:100%; max-width:100%; padding:2.5em 2em;}
	}

.tableRWD { width:100%; max-width:100%; font-family:'MyriadPro-Regular', '微軟正黑體'; letter-spacing:.5px;}
.tb_style1 th { font-size:.8rem; padding: 1.25em 1.6em; vertical-align:middle; color: #000; border-top:solid 7px #000;border-bottom:solid 1px #000; font-weight: bold; text-align:left;}
.tb_style1 td { font-size:.8rem; padding: 1.6em; }
.tb_style1 td { border-bottom:1px solid #000; vertical-align:middle; }
.tb_style1 td > ul > li{ margin-bottom:.8em; }
.tableRWD th.w20{width:20%;}
.tableRWD th.w10{width:10%;}
.txtCenter{text-align:center;}
.tb_style2 { color: #333; }
.tb_style2 th { font-size:.8rem; padding:20px 0 15px; vertical-align:middle; border-bottom:solid 1px #B2B2B2; border-top:solid 1px #B2B2B2; font-weight: bold; text-align:left; background:#FBFBFB;}
.tb_style2 td { font-size:.8rem; padding:10px 0; border-bottom:1px solid #B2B2B2; vertical-align:middle;}
/*.tb_style2 td:last-child { border-bottom:1px solid #B2B2B2;}*/


@media only screen and (max-width: 750px) {

	.tableRWD table, .tableRWD thead, .tableRWD tbody, 
	.tableRWD th, .tableRWD td, .tableRWD tr{
		 display: block;
		}
	.tableRWD thead tr{ position: absolute; top: -9999px; left: -9999px; }
	.tableRWD tr { }
	.tableRWD td {   /* Behave  like a "row" */
		position: relative; padding-left: 47%; white-space: normal; text-align:left;color:#000;
	}
	.tableRWD td:before{ 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 0; padding:  0;
		width: 6em;/* white-space: nowrap;*/ text-align:left; font-weight:bold; color:#000
	}
	
	/* Label the data*/
	.tableRWD td:before{ content: attr(data-title); }
	
	/* rwd table style*/
	.tb_style1 tr{ padding:.5em 1em;  margin-bottom: 1em; border:solid 1px #333; border-bottom: solid 1px #333;   }
	.tb_style2 tr{ padding:.5em 1em;  margin-bottom: 1em; border:solid 1px #333; border-bottom: solid 1px #333;   }
	
	.openingTime ul li { line-height:180%;}
	.tb_style1 td { padding-top: 1em; padding-bottom: 1em; }
	.tb_style1 tr td:last-child{ border-bottom:none; }
	.tb_style2 tr td:last-child{ border-bottom:none; }
	}

.productMore{position:absolute; width:100%; height:100%;overflow:hidden;}
.productMore div { width:100%; height:100%; text-align:center;  }
.productMore .slick-slide {padding-bottom:200px}
.productMore .img { max-width:980px; margin:auto; text-align:center; display:inherit; padding:0 2em;}
.productMore .img img{ max-width:100%; margin:auto;}
.proMtit{ text-align:center;  max-width:500px; margin: 60px auto 95px;}
.proMtit h2{ font-size:2.8rem; line-height:110%; margin-bottom:39px}
.proMtit p{ color:#6A6A6A; line-height:150%;}
@media screen and (max-height:800px){
	.proMtit { margin-bottom:10px;}
	}
@media screen and (max-width:400px){
	.proMtit h2{font-size:2rem; padding:.5rem;}
	.proMtit p{ display:none;}
}
@media screen and (max-height:320px){
	.proMtit{ margin-top:10px;}
	.proMtit h2{ font-size:2rem;}
	.productMore .img img{max-width:50%;}
	}
.pro-Bar{ background:#000; position:relative;}

.fixed_sc { position: fixed; top:0; left:0; width: 100%; z-index:9999; }
.titAboutType{ width:100%; max-width:980px; color:#fff; margin:0 auto;  text-align:center;}
.titAboutType > li{ display:inline-block; padding:1.75em 0; }
.titAboutType > li:after{ display:inline-block; content:'|'; margin:0 2em; color:#BED62F}
.titAboutType > li:last-child:after{display:none;}
.titAboutType > li a{ width:100%; padding:2em 0em; color:#fff; letter-spacing: 1px; font-size:.875rem; text-align:center;  }
.titAboutType > li.current, .titAboutType > li.current:hover{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;   }
.titAboutType > li.current a, .titAboutType > li.current:hover a{ color: #BED62F; }
@media screen and (max-width:900px){
	/*.titAboutType li{ width:50%; display:inline-block }
	.titAboutType li:last-child{ width:100%;}*/
	.titAboutType > li:after { display:none;}
	.titAboutType > li.current { background: rgba(0,0,0,0); color: #fff; }
	.titAboutType > li.current a{ color:#BED62F;}
	.titAboutType > li:not(.current) {  display:none !important; }
	.titAboutType > li {padding:.9rem 0;}
	}
.features{}
.features li{ display:table; border-bottom:1px solid #CCC;/* padding:3rem 0;*/ position:relative; /*min-height:360px;*/ width:100%;}
.features li:last-child{ border:0;}

.features .fea-txt,.features .fea-img{ width:50%; display:table-cell;   vertical-align:middle;}
.features .fea-txt { padding:0 5px}
.features .fea-txt h4 { font-size:2.25rem; line-height:110%; }
.features .fea-txt p{ font-size:.875rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:150%; max-width:425px; margin-top:1.4rem;}
.features .fea-img img { max-width:100%; /*vertical-align: top;*/ } 
.fea-img01{ position:absolute; right:0; bottom:-2px;}
.features li:nth-child(even) {direction:rtl;}
.features li:nth-child(even) .fea-txt{direction:ltr;}
@media screen and (max-width:400px){
	.features .fea-txt h4 {font-size:2rem;}
	}
.features02 img, .features03 img{ max-width:100%}
.features03 { margin-top:-4px;}
.features04{ display:table; margin-top:4.5rem; margin-bottom:5.18rem;}
.features04 li{ display:table-cell; vertical-align:middle; width:50%; padding-top:11px;}
.features04 li h4{ font-size:2.25rem; font-weight:normal; line-height:110%}
.features04 li p{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; margin-top:2.3rem; line-height:150%;}
.features04 li:nth-child(odd) {border-right:1px solid #7f7f7f; padding-right:75px;}
.features04 li:nth-child(even) { padding-left:75px;}

.featuresList{padding:2em 1em; font-family: 'MyriadPro-Regular', '微軟正黑體';}
.featuresList li {margin-bottom:10px; display:inline-block; margin-right:-4px; width:50%; }
.featuresList li i, .featuresList li span{display:inline-block; vertical-align:top;}
.featuresList li i {width:1%; margin-right:10px}
.featuresList li span{width:95%; line-height:130%;}
/*.featuresList li:before{ content:'•'; display:inline-block;margin-right:10px}*/
@media only screen and (max-width:780px){ 
	.featuresList li{ width:100%; margin-bottom:5px}

	}
@media only screen and (max-width:750px){ 
	.features .fea-txt,.features .fea-img{ display:block; width: 100%; padding-top:20px;}
	
	}

@media only screen and (max-width:600px){ 
	.features04 li{ display:block;width:100%; }
	.features04 li:nth-child(odd) {border-right:0; padding-right:0; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #7F7F7F}
	.features04 li:nth-child(even) { padding-left:0;}
	}
	
#prod2 > .container,#prod3 > .container, #prod4 > .container, #prod5 > .container, #prod6 > .container{ border-top:10px solid #000; padding-top:5.5rem;}
#prod2 > .container > h3, #prod5 > .container > h3,#prod6 > .container > h3{ font-size:2.25rem;}
#prod2 > .container p{ font-size:.75rem; font-family:'MyriadPro-Regular', '微軟正黑體'; color:#4F4F4F}
.spec-table {  margin-top:1.6rem; margin-bottom:1.6rem;}
.spec-table li{ display: table; width:100%;    }
/*.spec-table li:first-child{border-top:1px solid #B2B2B2;}*/
.spec-table li:nth-child(odd){background:#FDFDFD;}
.spec-table li .tit{font-weight:bold; }
.spec-table li .tit, .spec-table li .cont{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; display:table-cell; padding-top:1.25rem; padding-bottom:1.25rem; vertical-align:top; position: relative; }
.spec-table li .tit:before, .spec-table li .cont:before{ content:''; position:absolute; top:0; left:0; width:100%; height:1px; background: #B2B2B2; }
.spec-table li .tit{ width:30%; padding-left:1.8rem;  border-right: solid 10px #fff;  }
.spec-table li .cont { width:70%; padding-left:2.4rem; line-height:150%; }
.spec-table li:last-child .tit:after, .spec-table li:last-child .cont:after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background: #B2B2B2; }
@media only screen and (max-width:480px){
	.spec-table li { border-bottom: 1px solid #B2B2B2;}
	.spec-table li .tit{padding-top:.5rem; padding-bottom:.5rem; }
	 .spec-table li .cont  {font-weight:normal; padding-bottom:.5rem; padding-top:0;}
	.spec-table li .tit, .spec-table li .cont { display:block; padding-left:0;width:100%;}
	.spec-table li .tit:before, .spec-table li .cont:before { display:none;}
	.spec-table li:last-child .tit:after, .spec-table li:last-child .cont:after {display:none;}
	
	#prod2 > .container,#prod3 > .container, #prod4 > .container, #prod5 > .container, #prod6 > .container {padding-top:3rem;}
	#prod2 > .container > h3, #prod5 > .container > h3,#prod6 > .container > h3{ font-size:2rem;}

	#prod3 {margin-top:2rem;}
	 }

#prod3{ margin-top:6rem; }
#prod3 .container, #prod4 .container, #prod5 .container, #prod6 .container{ padding-bottom:10rem;}
.btnProd{float:right;}
.btnProd a{ font-size:.8rem; color:#000; font-weight:bold; padding:13px 15px;border:1px solid transparent;}
.btnProd a:hover{border:1px solid #000;}
.btnProd a.on{border:1px solid #000;}
.prod-top{ margin-bottom:3rem; }
.prod-top h3{font-size:2.25rem; float:left;}

.select-box {  padding: 0;margin: 0; border: 1px solid #000; width:200px;overflow: hidden; background: #fff url(../img/arrow-select.png) no-repeat 95% 50%; float:right; display:none; vertical-align:top}
.select-box:after{ clear:both; content:''; display:block;}
.select-box select {font-family:'MyriadPro-Regular', '微軟正黑體';  border:none; padding: 5px 8px;width: 100%;box-shadow: none; background-color: transparent; background-image: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.select-box select:focus {outline: none;}

.qaContent { width: 100%; }
.accordionPart { font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; border-top:1px solid #B2B2B2; }
.accordionPart li { border-bottom: solid 1px #000; padding-bottom: 24px; margin-top: 24px; }
.accordionPart li .qa_title { padding-left: 28px; color: #000; cursor: pointer; position:relative; padding-left:3.8rem; padding-top:7px; font-weight:bold;}
.accordionPart li .qa_title:before{ font-size:1.1rem; position:absolute; height:33px; width:33px; background:#000;content:'Q'; color:#FFF; text-align:center; line-height:33px; left:0;top:0px; display:block;}
.accordionPart li .qa_title_on {}
.accordionPart li .qa_content {margin:6px 0 0; padding-left: 28px; position:relative; padding-left:3.8rem; padding-top:7px; margin-top:20px; line-height:180%;}
.accordionPart li .qa_content:before{font-size:1.1rem; position:absolute; height:27px; width:27px; border:3px solid #000; content:'A'; color:#000; text-align:center; line-height:27px; left:0;top:0px; display:block;}

.my-gallery {width: 100%; /*float: left;*/ margin-top:30px;}
.my-gallery:after{clear:both; content:''; display:block; }/*清除float要加上這三個才有用*/
.my-gallery img {width: 100%;  height: auto;}
.my-gallery figure {display: inline-block; margin-left:.8%; width: 32%; margin-top:.8%;}
.my-gallery figcaption { display: none; }
@media only screen and (max-width:800px){
	.btnProd{display:none;}
	.select-box {display:block;}
	}
@media only screen and (max-width:650px){ 
	
	.prod-top h3{float:none}
	.select-box { float:none; margin-top:20px; width:100%;}
	
	.my-gallery figure {width:48%; } 
	}
	
.videoSide{ margin-top:2.3em;}
.videoSide:after{clear:both; content:''; display:block;}
.videoSide li{ width:49.5%; position:relative; cursor: pointer; margin-bottom:.5%;}
.videoSide li .img{ width:100%}
.videoSide li .img img{ max-width:100%;}
.videoSide li:nth-child(odd) {float:left;}
.videoSide li:nth-child(even){float:right;}
.icon-video{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:54px; height:54px; background:url(../img/icon-video.png) no-repeat; cursor: pointer}

.videoMask{padding:4.3em .5em 0; display:block; padding:4.3em .5em 0; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:rgba(0,0,0,.8); overflow:hidden;
  opacity:0; -moz-opacity: 0;  -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;   } 
.videoMask span{ font-size:1.1rem; margin-bottom:0; display:block;}
.videoMask h3{ font-size:4rem; line-height:130%;  color:#BED62D; margin-bottom:.8em; margin-top:.5em}
.videoMask p{ font-size:.8rem; color:#C0C0C0; max-width:310px; margin:auto}
.videoSide li:hover .icon-video{ display:none;}
.videoSide li:hover .videoMask{ opacity: 1; -moz-opacity: 1; -khtml-opacity:1; filter:alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
@media only screen and (max-width:1015px){
	.videoMask h3 { font-size:3rem;}
	}
@media only screen and (max-width:800px){
	.videoMask{padding-top:3em;}
	.videoMask p {display:none;}
	}
@media only screen and (max-width:680px){
	.videoMask h3 { font-size:2rem;}
	}
@media only screen and (max-width:550px){
	.videoMask h3 { font-size:3rem;}
	.videoSide li {width:100%; float:none;}
	}
@media only screen and (max-width:480px){
	.videoMask h3 { font-size:2rem;}
	}
/* ===============  聯絡我們  =============== */
.contactTop{background:url(../img/contact-bg.jpg) no-repeat center center; background-size:cover; height:579px; position:relative;}
.contactTop h1{ font-size:3.25rem;  font-weight:normal; position:absolute; left:0; right:0; margin:auto; text-align:center; top:40%;letter-spacing:1px; line-height:110%;}

.contactInfo .container{ padding:6.5em 0 13em; position:relative;}
.contactInfo .tit {text-align:center; margin-bottom:3em;}
.contactInfo .tit h3 { font-size:2.25rem; font-weight:normal; line-height:110%;}
.contactList { text-align:center;}
.contactList li{ display:inline-block; text-align:center ;margin-bottom:14px; width:33%; vertical-align:top; }
.contactList li .inner{ width:97%; margin:auto; border:1px solid #000; padding:3em 2.5em;  min-height:265px;}
.contactList li h4{ font-size:1.8rem; padding-bottom:1.25em; margin-bottom:1.25em; border-bottom:10px solid #E5E5E5; line-height:120%; letter-spacing:1.5px;}
.contactList li a{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; letter-spacing:1px; color: black;}
@media only screen and (max-width:550px){
	.contactTop {background-position: 65% center;}
	
	.contactInfo .container{ padding:3em 0;}
	}
@media only screen and (max-width:550px){
	.contactTop{ height:350px;}
	.contactTop h1 { font-size:2.5rem; top:30%;}
	}
.location{ background:#F7F7F7;}
.location .container{ padding:6.5em 0 13em; position:relative;}
.location .tit{text-align:center; margin-bottom:3em;}
.location .tit h3 { font-size:2.25rem; font-weight:normal;}
.locationBox {}
.locationBox > li{ display:inline-block; width:50%; /*margin-right:15px;*/ margin-bottom:20px; vertical-align:top; margin-right:-4px;}
/*.locationBox > li:nth-child(2n){ margin-right:0;}*/
.locationBox > li > .inner{ width:97%; margin:auto;border:1px solid #000; padding:1.5em 2.5em; }
.locationBox > li h4{ font-size:1.8rem; font-weight:bold; line-height:130%; padding-bottom:1em; margin-bottom:1em; border-bottom:10px solid #DEDEDE; position:relative; letter-spacing:1px;}
.locationBox > li h4:after{ position:absolute; content:''; background:url(../img/icon-location.png) no-repeat; width:22px; height:34px; right:0; top:0;}
.locationBox > li p { font-size:.8rem; color:#010101; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:150%; margin-bottom:2em; }
.L-info{ font-size:.8rem;  font-family:'MyriadPro-Regular', '微軟正黑體'; letter-spacing:1px;}
.L-info li { display:inline-block; margin-right:19px;}
.L-info li .tit{ font-weight:bold; margin-right:5px;}
@media only screen and (max-width:950px){
	.contactList li{ width:50%; margin-right:-4px;}
	}
@media only screen and (max-width:850px){
	.locationBox > li{width:100%;}
	.aaContact {bottom:5%;}
	}
@media only screen and (max-width:550px){
	.location .container { padding:3em 0;}
	}
@media only screen and (max-width:650px){
	.contactList li{width:100%;}
	}
@media only screen and (max-width:430px){
	.locationBox > li h4 { font-size:1.1rem;}
	}
#contact-form, #contact-form-divisions{ position:fixed; top:0; left:0; right:0; width:80%; max-width:800px; margin:auto; background:#FFF; z-index:1001; display:none; height:100%; padding-bottom:4.5rem; margin-bottom:4.5em;}
#contact-form .x, #contact-form-divisions .x{ background:url(../img/icon-x.png) no-repeat; width:17px; height:20px; position:absolute; right:1.6em; top:2em; z-index:99}
#contact-form .banner{width:100%; max-width:100%; min-height:335px; background:url(../img/contact-form.jpg) no-repeat; background-size:cover; position:relative;}
#contact-form .banner .rmaTxt{font-size:2rem; color:#FFF; font-weight:normal; position:absolute; left:2em; bottom:2em;}
#contact-form-divisions .banner{width:100%; max-width:100%; min-height:335px; background:url(../img/contact-form00.jpg) no-repeat; background-size:cover; position:relative;}
#contact-form-divisions .banner .SalesTxt{ font-size:2rem; color:#FFF; position:absolute; left:2em; bottom:2em; line-height:130%}
#contact-form .inner, #contact-form-divisions .inner{ max-width:660px; width:90%; margin:auto;}

.login{ display:block;}
.login p{font-size:.9rem; margin-top:1.8em; margin-bottom:1.75em; line-height:150%;}
.loginBox{ border:1px solid #C6C6C6; background:#FBFBFB; padding:4.4em 6.3em;}
.loginBox .tit{ font-size:1.8rem; text-align:center;}

.login-form{ margin-top:2.5em; margin-bottom:2.5em;}
.login-form li{ display:block; padding:25px 0; text-align:center; border-top:1px solid #7D7D7D}
.login-form li:last-child{ border-bottom:1px solid #7D7D7D}
.login-form li label,.login-form li input[type="text"],.login-form li input[type="password"]{display:inline-block;font-size:.8rem; }
.login-form li label{font-weight:bold; margin-right:2.6em}
.login-form li input[type="text"], .login-form li input[type="password"]{ height:40px;padding:3px; font-family: 'CenturyGothic' !important;width:50%}

.contactHolder::-webkit-input-placeholder { /* WebKit browsers */
		font-family: 'CenturyGothic' !important;
		font-size:.8rem;

	}
.contactHolder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		font-family: 'CenturyGothic' !important;
		font-size:.8rem;
	}
.contactHolder::-moz-placeholder { /* Mozilla Firefox 19+ */
		font-family: 'CenturyGothic' !important;
		font-size:.8rem;
	}
.contactHolder:-ms-input-placeholder { /* Internet Explorer 10+ */
		font-family: 'CenturyGothic' !important;
		font-size:.8rem;

	}
@media only screen and (max-width:450px){
	#contact-form .banner { background-position: 30% bottom;}
	#contact-form .banner .rmaTxt{font-size:1.5rem; color:#FFF; font-weight:normal; position:absolute; left:1em; bottom:1.5em;}
	#contact-form-divisions .banner{background-position: 50% center;}
	#contact-form-divisions .banner .SalesTxt{ font-size:1.5rem; color:#FFF; position:absolute; left:1em; bottom:1.5em; line-height:130%}
	}
@media only screen and (max-width:390px){
	.login-form li label{display:none;}
	.login-form li input[type="text"], .login-form li input[type="password"]{width:100%; text-align:center;}
	}
.loginBtn{}
.loginBtn a{ display:block;}
/*.loginBtn a:after{content:'|'; position:absolute;color: #C2C2C2; right:20px; top:0px}*/
/*.loginBtn a.go{display:inline-block; vertical-align:top;text-align:center; text-indent:initial; border:none; }*/
.loginBtn a.go{ display:block; font-size:.9rem; width:82px; height:40px; background:#bfd630; color:#FFF; text-align:center; line-height:40px; margin:auto; text-align:center; border:none;}
.loginBtn a.go:hover{ color:#000; letter-spacing:1px;}
.loginBtn a.go:after{display:none}

.submitBtn{ font-size:.8rem; display:block; width:82px; height:40px; margin:0 auto; background:#BFD630; color:#FFF; line-height:40px; text-align:center;}
.submitBtn:hover{color:#000; letter-spacing:1px;}

.message { }
.message p{font-size:.9rem; margin-top:1.8em; margin-bottom:1.75em; line-height:150%;}
.messageBox{ margin-top:2.6em; padding-top:1.6em; border-top:6px solid #000;}
.messageBox li{ padding:.8em 0; border-bottom:1px solid #7F7F7F;}
.messageBox li:first-child{padding-top:0;}
.messageBox li label{ font-size:.8rem; font-weight:bold; display:inline-block; width:25%; vertical-align:top;}
.messageBox li input[type="text"]{font-size:.8rem;}
.messageBox li input[type="text"], .messageBox li textarea{ display:inline-block; width:73%; height:20px; vertical-align:top;font-family: 'CenturyGothic';}
.messageBox li textarea { height:6.25rem;}
.messageBtn { display:block; max-width:500px; margin:1.6rem auto 0;}
.messageBtn a{ display:inline-block; vertical-align:top; width:15em; height:42px; text-align:center; line-height:42px;}
.messageBtn a:hover{ letter-spacing:1px;}
.messageBtn a:nth-child(1){ background:#000; color:#B0C637}
.messageBtn a:nth-child(1):hover{ color:#FFF;}
.messageBtn a:nth-child(2){ background:#B0C637; color:#000;}
.messageBtn a:nth-child(2):hover{ color:#FFF}
/*#lightbox {display:none; background: rgba(0,0,0,0.8); position:absolute; top:0px; left:0px; min-width:100%; min-height:100%;height:100%;z-index:1000;}*/
.codePic{ float:right;}
@media only screen and (max-width:990px) {
	.aaContact {bottom:5%;}
	}
@media only screen and (max-width:930px) {
	.loginBtn a.go{width:100%; margin-bottom:1em}
	.loginBtn a {width:100%;  background:url(../img/btn-login.png) 98% center no-repeat;}
	.loginBtn a:last-child{ margin-top:1em;}
	.submitBtn{width:100%;}
	}
@media only screen and (max-width:800px) {
	
	#contact-form, #contact-form-divisions{ width:100%; max-width:100%; }	}
@media only screen and (max-width:750px) {
	.loginBox{ padding:2.5em 2em}
	.loginBox .tit {line-height:115%;}
	}
@media only screen and (max-width:560px) {
	.messageBtn a{width:49%;}
	.messageBox li label{ line-height:150%}
	}
@media only screen and (max-width:500px) {
	.messageBox li label {width:100%;}
	.messageBox li input[type="text"], .messageBox li textarea {width:100%; margin-top:10px;}
	}
/* =============== Support =============== */

.supportTop{ background:url(../img/support-bg.jpg) no-repeat center center; background-size:cover; height:579px; position:relative;}
.supportTop h1 { font-size:3.25rem; color:#FFF; font-weight:normal; position:absolute; left:0; right:0; width:80%; margin:auto; text-align:center; top:40%;letter-spacing:1px; line-height:110%;}

.downLoad .container{padding:6.5em 0 13em; position:relative;}
.downLoad .tit{text-align:center; margin-bottom:3em;}
.downLoad .tit h3{font-size:2.25rem; font-weight:normal; margin-bottom:1em; line-height:110%;}
.downLoad .tit p{ font-size:.9rem; color:#515151; font-family:'MyriadPro-Regular', '微軟正黑體'; max-width:415px; margin:auto; letter-spacing:.5px;}
.dropdownBox{width:75%; margin:0 auto 42px; text-align:center; }

@media only screen and (max-width:500px) {
	.supportTop{ height:350px;}
	.supportTop h1{ font-size:2.5rem; top:30%;}
	
	.downLoad .container { padding-top:3em; padding-bottom:3em;}
	}

/* =============== wheretobuy  =============== */

.wheretobuyTop{ background:url(../img/wheretobuy-bg.jpg) no-repeat center center; background-size:cover; height:579px; position:relative;}
.wheretobuyTop h1{ font-size:3.25rem;  color:#FFF; font-weight:normal; position:absolute; left:0; right:0; width:80%; margin:auto; text-align:center; top:40%; letter-spacing:1px; line-height:110%;}

.brandCircle{ }
.brandCircle li{  text-align:center; display:inline-block; margin-bottom:40px; vertical-align:top; width:25%;  margin-right:-4px;  }
.brandCircle li .inner{  cololor:#000; width:95%; margin:auto;border-radius:50%; border:10px solid #E5E5E5; width:13em; height:13em; line-height:11.7em; display:inline-block; position:relative; }
/*.brandCircle li .inner:hover{ opacity: .6; -moz-opacity: .6;  -khtml-opacity: .6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -0-transform: rotate(360deg); -ms-transform: rotate(360deg);} 滑過去旋轉小動畫*/

.brandCircle li img { vertical-align:middle; max-width:60%;}

.brandCircleMask {
display:block; padding:5px; position:absolute; top:0; left:0; width:100%; height:100%; background:#E5E5E5; overflow:hidden; border-radius:50%;
opacity:0; -moz-opacity: 0;  -khtml-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.brandCircle li:hover .brandCircleMask { opacity:1 !important;  } 

.brandCircle li:hover .inner { 
/*所要套用的CSS動畫*/
-webkit-backface-visibility: visible !important;
 backface-visibility: visible !important;
-webkit-animation-name: flipInY;
 animation-name: flipInY;
/*a 過渡*/
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease;
/*動畫延遲*/
-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}

.brandCircleMask span{ color:#000; display:block; text-align:center; line-height:2.5em;}
.brandCircleMask span:first-child{ font-size:.9rem;  padding-top:40px;}
.brandCircleMask span:nth-child(2) { font-weight:600; line-height:1.5em;}

@media only screen and (max-width:500px) {
	.wheretobuyTop{ height:350px; }
	.wheretobuyTop h1{ font-size:2.5rem;}
	}
/* ===============  Footer  =============== */
footer{ background:#222; width:100%; max-width:100%; margin:0 auto ; padding: 2em 0; border-top:1px solid #BED62F; font-family:'MyriadPro-Regular'; letter-spacing:1px;}
footer .left, footer .right{  font-size:.6rem; display:inline-block;}
footer .left{color:#999; }
footer .right{float:right; display:table;}
footer .right li{display:inline-block; display:table-cell; vertical-align:middle}
footer .right li:after{ display:inline-block; content:'‧'; margin:0 .8em; color:#858585; font-size:1em;}
footer .right li a { color:#858585 }
@media only screen and (max-width:980px) {
	.brandCircle li {width:50%;}
	}
@media only screen and (max-width: 850px) {
	footer { text-align:center;}
	/*footer .left, footer .right {display:block;}*/
	footer .left { margin-bottom:10px}
	footer .right {float:none; margin:auto;}
	}

@media only screen and (max-width:500px) {
	.brandCircle li {width:100%;}
	}
@media only screen and (max-width:350px) {
	footer .right li:after {display:none;}
	footer .right li a{margin: 0 .8em;}
	}
/* =============== 關於我們 about=============== */
.about01 {background:url(../img/about-banner01.jpg) no-repeat center center; background-size:cover; height:580px; max-width:100%; position:relative;}
.about01 h1{ font-size:3.25rem; color:#BED62F; font-weight:normal; margin:auto; position:absolute; left:0; right:0; text-align:center; top:45%; line-height:110%; padding:0 1em;}  

.about02{background:url(../img/about01.jpg) no-repeat center center; background-size:cover;  height:600px; max-width:100%; }
.about02 .word { padding-top:185px; max-width:452px;}
.about02 .word > h2{ font-size:2.25rem; font-weight:normal; margin-bottom:30px;line-height:110%;}
.about02 .word > p{ font-size:.9rem; font-family:'MyriadPro-Regular', '微軟正黑體'; color:#515151; line-height:180%;}

.about03{ background:url(../img/about02.jpg) no-repeat center center;  background-size:cover; height:473px; max-width:100%; text-align:center; }
.about03 .word{max-width:535px; margin:auto; padding:75px 1em 0;}
.about03 .word > h1{ font-size:2.25rem; font-weight: normal; margin-top:43px; line-height:110%;}

.about04 {background:url(../img/about03.jpg) no-repeat center center;  background-size:cover; height:600px; max-width:100%;}
.about04 .word{float:right; padding-top:175px;}
.about04 .word > h2{font-size:2.25rem; font-weight:normal; margin-bottom:39px; line-height:110%;}
.about04 .yearList > li{ font-size:.9rem; font-family:'MyriadPro-Regular', '微軟正黑體'; margin-bottom:10px;}
.about04 .yearList > li span:first-child {font-weight:bold; margin-right:.8em;}
@media only screen and (max-width: 880px){
	.about02{position:relative; background:none; height:350px;}
	.about02 .word {padding-top:55px;}
	.about02::after{content:'';background:url(../img/about01.jpg) no-repeat 40% center;opacity: 0.5; top:0; left:0; right:0; bottom:0; position:absolute; z-index:-1;}

	.about04{position:relative; background:none}
	.about04::after{content:'';background:url(../img/about03.jpg) no-repeat 75% center;opacity: 0.5; top:0; left:0; right:0; bottom:0; position:absolute; z-index:-1;}
	.about04 .word{float:none;}
	}
@media only screen and (max-width: 440px) {
	.about03{ height:430px;}
	.about03 .word { mar}
	.about04{ height:500px;}
	.about04 .word {padding-top:50px;}
	.about04 .yearList > li span{display:block; margin-bottom:3px;}
	
	}
@media only screen and (max-width: 500px) {
	.about01{ height:350px;}
	.about01 h1{ top:30%;}
	}
@media only screen and (max-width: 430px) {
	.about01 h1{font-size:2.5rem;}
	}
/* =============== 關於我們 about_business=============== */
.about-bu01{background:url(../img/about-banner02.jpg) no-repeat center center; background-size:cover; height:580px; max-width:100%; position:relative;}
.about-bu01 h1{ font-size:3.25rem; color:#FFF; font-weight:normal; margin:auto; position:absolute; left:0; right:0; text-align:center; top:45%; line-height:110%; padding:0 1em;}  

.about-bu02{background:url(../img/about-bu01.jpg) no-repeat center center;  background-size:cover; height:753px; max-width:100%;}
.about-bu02 .word{text-align:center; padding:185px 1em 0; max-width:530px; margin:0 auto 37px; padding:}
.about-bu02 .word h2{ font-size:2.25rem; font-weight:normal; margin-bottom:37px; line-height:110%;}
.about-bu02 .word p{ font-size:.9rem; line-height:180%;}
.about-bu02 .img{ text-align:center; padding:0 1em;}
.about-bu02 .img img{max-width:100%;}

.about-bu03{background:url(../img/about-bu02.jpg) no-repeat center center;  background-size:cover; height:600px; max-width:100%;}
.about-bu03 .word{ max-width:475px; padding-top:235px;}
.about-bu03 .word h2 {font-size:2.25rem; font-weight: normal; line-height:110%; margin-bottom:30px;}
.about-bu03 .word p { font-size:.9rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:180%;}

.about-bu04 .container{background:url(../img/about-buProd.png) right bottom no-repeat; min-height:722px;}
.about-bu04  .word{ max-width:500px; padding-top:145px;}
.about-bu04  .word h2{ font-size:2.25rem; font-weight:normal; margin-bottom:37px; line-height:110%;}
.about-bu04  .word p{font-size:.9rem; line-height:180%;}

.allInOne{ width:100%; margin:auto;}
.allInOne li{ font-size:.9rem; font-family:'MyriadPro-Regular', '微軟正黑體'; display:inline-block; margin-right:45px; padding:50px .5em 0; width:12em; height:12em; border-radius:50%; border:1px solid #BED62F; vertical-align:middle; text-align:center; line-height:150%; margin-top:47px;}
.allInOne li:last-child{ padding-top:25px; margin-right:0}
@media only screen and (max-width:900px){
	.about-bu04 .container{background:none;}
	}
@media only screen and (max-width: 800px){
	.about-bu03{position:relative; background:none}
	.about-bu03::after{content:'';background:url(../img/about-bu02.jpg) no-repeat 15% center;opacity: 0.3; top:0; left:0; right:0; bottom:0; position:absolute; z-index:-1;}
	}
@media only screen and (max-width: 750px){
	.about-bu02 {height:auto; padding:5em 0;}
	.about-bu02 .word{ padding:0 1em;}
	}
@media only screen and (max-width: 680px){
	.allInOne li { margin-right:8%; transform:scale(1.1);-webkit-transform:scale(1.1); }
	.allInOne { text-align:center;}
	}
@media only screen and (max-width: 660px){
	.about-bu04 .container{padding-bottom:5em}
	}
@media only screen and (max-width: 500px){
	.about-bu01{ height:350px;}
	.about-bu01 h1 {top:30%;}
	
	.about-bu02{ padding:3em 0;}
	
	.about-bu03{  height:350px;}
	.about-bu03 .word{padding-top:55px;}
	
	.about-bu04 .word { padding-top:55px;}
	}
@media only screen and (max-width: 430px){
	.about-bu01 h1{font-size:2.5rem;}
	}
@media only screen and (max-width: 350px){
	.allInOne li:nth-child(2)  { margin-right:0}
	}
/* =============== 關於我們 about_quality=============== */
.about-qu01{background:url(../img/about-banner03.jpg) no-repeat center center; background-size:cover; height:580px; max-width:100%; position:relative;}
.about-qu01 h1{ font-size:3.25rem; color:#FFF; font-weight:normal; margin:auto; position:absolute; left:0; right:0; text-align:center; top:45%; line-height:110%; padding:0 1em;} 

.about-qu02{background:#E5E5E5; height:420px;}
.about-qu02 .word{max-width:480px; text-align:center; margin:auto; padding:100px 1em 50px;}
.about-qu02 .word h2{ font-size:2.25rem; font-weight:normal; margin-bottom:37px; line-height:110%;}
.about-qu02 .word p{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:180%;}

.about-qu03 {background:url(../img/about-qu01.jpg) center center no-repeat; background-size:cover; height:auto; padding-bottom:3em}
.about-qu03 .word{ max-width:550px; padding-top:100px;}
.about-qu03 h2{font-size:2.25rem; font-weight: normal; line-height:110%; margin-bottom:30px;}
.about-qu03 p{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:180%;}

.capability{ margin-top:40px;}
.capability li {display:inline-block; padding:0 2.75em; border-right:3px solid #BCBAB6; text-align:center;}
.capability li:first-child{padding-left:0;}
.capability li:last-child {border-right:0;}
.capability li div{ font-size:3rem; font-weight:bold; margin-bottom:17px;}
.capability li small{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體';}
@media only screen and (max-width: 800px) {
	.about-qu03{ position:relative; background:none}
	.about-qu03::after{content:'';background:url(../img/about-qu01.jpg) no-repeat 30% center; background-size:cover; opacity: 0.3; top:0; left:0; right:0; bottom:0; position:absolute; z-index:-1;}
	}
@media only screen and (max-width: 600px) {
	.capability li { display:block; padding:0; border-right:0; text-align:center; margin-bottom:2em; border-bottom:3px solid #BCBAB6; padding-bottom:1em}
	
	}
@media only screen and (max-width: 500px){
	.about-qu01 { height:350px;}
	.about-qu01 h1{ top:30%;}
	
	.about-qu02{ height:400px;}
	.about-qu02 .word { padding-top:55px;}
	
	.about-qu03 .word{ padding-top:55px;}
	}
@media only screen and (max-width: 430px){
	.about-qu01 h1{font-size:2.5rem;}
	}
.about-qu04 {}
.about-qu04 ul li{width:100%; display:table; max-height:500px}
.about-qu04 ul li:nth-child(2){background:#EEE;}
.about-qu04 ul li .txt, .about-qu04 ul li .img{ width:50%; display:table-cell; vertical-align:middle}
.about-qu04 ul li .img img{max-width:100%; width:100%; margin-bottom:-4px;}
.about-qu04 ul li .txt{}
.about-qu04 ul li .txt .inner{ max-width:490px; width:90%; margin: auto;}
.about-qu04 ul li .txt h2{  font-size:2.25rem; font-weight:normal; margin-bottom:37px; line-height:110%;}
.about-qu04 ul li .txt p{ font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:180%;}
.about-qu04 ul li .txt > span{font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體';}
.about-qu04 ul li .txt > span:before{ display:inline-block; content:'+';}
.capacity li{font-size:.8rem; font-family:'MyriadPro-Regular', '微軟正黑體'; line-height:180%;}
.capacity li:before{display:inline-block; content:'+'; margin-right:16px;}

@media only screen and (max-width: 900px) {
	.about-qu04 ul li .txt, .about-qu04 ul li .img{ display:block; width:100%;}
	.about-qu04 ul li .txt {padding:2em 0;}
	}

@charset "utf-8";
/* CSS Document */

/*動畫區*/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 
.hide, .wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.fadeInDown, .fadeInUp, .pulse, .fadeIn, flipOutY { visibility: visible !important; }

.delay-02s { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay-02s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-07s { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; }
.delay-08s { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay-09s { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }
.delay-10s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-20s { animation-delay: 2s; -webkit-animation-delay: 2s; }
.delay-25s { animation-delay: 2s; -webkit-animation-delay: 2s; }
.delay-30s { animation-delay: 3s; -webkit-animation-delay: 3s; }
.delay-35s { animation-delay: 3s; -webkit-animation-delay: 3s; }
.delay-40s { animation-delay: 4s; -webkit-animation-delay: 4s; }
.delay-45s { animation-delay: 4s; -webkit-animation-delay: 4s; }
.delay-50s { animation-delay: 5s; -webkit-animation-delay: 5s; }
.delay-55s { animation-delay: 5s; -webkit-animation-delay: 5s; }
.delay-60s { animation-delay: 6s; -webkit-animation-delay: 6s; }
.delay-65s { animation-delay: 6s; -webkit-animation-delay: 6s; }
.delay-70s { animation-delay: 7s; -webkit-animation-delay: 7s; }
.delay-75s { animation-delay: 7s; -webkit-animation-delay: 7s; }
.delay-80s { animation-delay: 8s; -webkit-animation-delay: 8s; }
.delay-85s { animation-delay: 8s; -webkit-animation-delay: 8s; }


/*隱私權政策*/
#policyBox{ display:none; background: rgba(0,0,0,0.8); position:fixed; top:0px; left:0px; min-width:100%; min-height:100%; z-index:999;}
#policy-panel { position:fixed; background:#FFF; max-width:800px; width:100%; padding:100px 3em; margin:auto;top:0; left:0; right:0; height:100%; z-index:9999;display:none }

#policy-panel h1{ font-size:3.3rem; margin-bottom:30px;}
#policy-panel h1 span{ color:#BED62F}
#policy-panel h2{ font-size:1.5rem; margin-bottom:20px;}
#policy-panel p{ font-size:.9rem; line-height:130%; margin-bottom:30px}
#policy-panel hr{ width:100px; height:5px; background:#BED62F; margin-bottom:50px;}
.policyList { font-size:.9rem; margin-bottom:100px;}
.policyList li { margin-bottom:15px}
.policyList li span{ display:inline-block; margin-right:-4px; }
.policyList li span:first-child{ font-weight:bold; width:37%}
.policyList li span:first-child:before { content:'+'; color:#BED62F; display:inline-block; margin-right:5px}
.policyList li span:nth-child(2) {width:50%}
.close{ background:url(../img/icon-x.png) no-repeat; width:17px; height:20px; position:absolute; right:1.6em; top:2em;}
.close:hover{ color:#BED62F}

@media only screen and (max-width: 500px) {
	#policy-panel {padding:60px 1.5em 20px;}
	#policy-panel h1{ font-size:2rem;}
	.policyList li span{ display:block; width:100%;}
	.policyList li span:first-child,.policyList li span:nth-child(2){ width:100%;}
	.policyList li span:nth-child(2) { margin-top:10px;}
	#policy-panel h2 { font-size:1.3rem;}
	.policyList {margin-bottom:60px;}
	}
@media only screen and (max-width: 350px) {
	#policy-panel h1{ font-size:1.8rem;}
	}

.pswp__img{ width: auto!important; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}


@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}


#menuFixed{ width: 100%; z-index:99;  }
.fixed_sc { position: fixed; top:0; left:0; }
#menuFixed.fixed_sc{ }

#submenu_black{ position: relative; background: #000; }
#submenu_black .inner{ width:90%; margin:auto; position:relative;}
.submenu1{display:block; text-align:center; }
.submenu1 li{ display:inline-block; vertical-align:middle; position:relative; color:#fff; margin:0; padding:1.75em 0;  }
.submenu1 li:after{ content:'|'; display:inline-block; color:#BED62F; }
.submenu1 a{  padding:0 2em; position:relative; color:#FFF; display:inline-block; }
.submenu1 li.current a, .submenu1 li:hover a{ color:#BED62F;  transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;  }  



/*.xsMenu_on{ display:none; }*/
#xsMenu_1{  border-top: solid 1px rgba(255,255,255,.3); display:block; width:100%; position: absolute; top:100%;  z-index:99;  }
#xsMenu_1{  background: #000; color:#FFF; display: none;  }
#xsMenu_1.-on{ display: block; }

.xsMenu_list{ width:90%; margin:auto}
.xsMenu_list a{ display: block; padding:.8em 0; text-align:left; color:#FFF; }
.xsMenu_list a:hover{ color:#BED62F;}

@media screen and (max-width:1000px){
	.submenu1{ text-align:left;}
	.submenu1 a{ padding:0}
	.submenu1 li:not(.current){ display: none; }
	.submenu1 li{padding:.9em 0}
	#bn_xsMenu{ display: block; }
	.submenu1 li:after { display:none;}
	}

@media screen and (min-width:1001px){
	#bn_xsMenu{ display: none; }
	#xsMenu_1{ display:none !important; }
	}
 
#bn_xsMenu { position:absolute; top:26%; right:0; width: 25px; height: 30px;  
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; 
}
#bn_xsMenu span { display: block; position: absolute;  height: 2px; width: 100%; background: #FFF; border-radius: 2px; opacity: 1; left: 0;
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
}
#bn_xsMenu span:nth-child(1) { top: 0px; }
#bn_xsMenu span:nth-child(2) { top: 8px; }
#bn_xsMenu span:nth-child(3) { top: 16px; }
#bn_xsMenu.-on span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
#bn_xsMenu.-on span:nth-child(2) { opacity: 0;left: -30px; }
#bn_xsMenu.-on span:nth-child(3) { top: 10px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg);transform: rotate(-135deg); }