@charset "utf-8";

/* CSS Document */
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
body { background:url(langs/tw/images/bg.jpg) repeat-x #fff; font-size: 15px; color:#414141; line-height: 170%; font-family: Arial, 微軟正黑體, Helvetica; }
input, select, button, textarea { font-size: 15px; font-family: Arial, 微軟正黑體, Helvetica; }
button { font-family: Arial, 微軟正黑體, Helvetica; border:0; cursor:pointer; }
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button; }
ul, li { list-style-type:none; }
a { text-decoration:none; color:#414141; border:none; outline:none; }
a img { border:0; outline:none; }
a:hover { color:#759b01; }

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}


/*---------------layout---------------------*/
#wrapper{ width:1100px; height:100%; margin:0 auto; }

#header{width:1100px; height:137px; display:block; }
#header h1{width:260px; height:86px; float:left; display:block; }

#tel-img{ width:227px; display:block; float:right; margin:26px 14px 0 0; }


#navi-wrap{ width:1100px; height:50px; clear:both; border-top:1px solid #d6d6d6; }
#navi-block{ margin:0 auto; display:table; }

#navi { text-align:center; }
#navi ul{ list-style-type:none; }
#navi li{ float:left; font-size:16px; color:#323232; line-height:50px; display:block; text-align:center; background:url(langs/tw/images/line.jpg) no-repeat left 16px; }
#navi li a{ color:#323232; padding:0 50px 0 52px; display:block; }
#navi li a:hover{ color:#323232; display:block; background:url(langs/tw/images/ougui_08.jpg) repeat-x; }
#navi li:first-child{ background:none; }


#content{ width:1064px; height:100%; margin:35px 18px 70px 18px; position:relative; }
#content02{ width:1082px; height:100%; margin:35px 0 70px 18px; position:relative; }


#left_wrap{ width:206px; float:left; margin:0 60px 40px 0; }

.leftnavi-title{ margin:0 0 5px 0; }

.leftnavi{ width:206px; }
.leftnavi dl{ display:block; }
.leftnavi dt{ font-size:15px; font-weight:bold; color:#4c4c4c; list-style:none; padding:5px 0 5px 0; display:block; border-top:1px solid #ccc; }
.leftnavi dt a{ color:#5f5f5f; display:block; padding:6px 0 6px 19px; }
.leftnavi dt a:hover{ color:#fff; display:block; background-color:#90be04; }
.leftnavi dt.on a{ color:#fff; display:block; margin:0 0 8px 0; background-color:#90be04; }
.leftnavi dt:first-child{ border-top:none; }
.leftnavi dt:last-child{ border-bottom:1px solid #ccc; }


.leftnavi dd { font-size:14px; display:block; line-height:20px; }
.leftnavi dd a{ color:#4c4c4c; display:block; padding:0 0 14px 20px; }
.leftnavi dd a:hover{ color:#008ad9; text-decoration:none; display:block; background:url(langs/tw/images/icon-02.png) no-repeat 8px 9px; }
.leftnavi dd.on a{ color:#008ad9; text-decoration:none; display:block; background:url(langs/tw/images/icon-02.png) no-repeat 8px 9px; }



#right_block { width:816px; float: left; margin:0; }
#right_block02 { width:798px; float: left; margin:0; }


.title{ padding:0 0 0 25px; margin:0 0 60px 0; background:url(langs/tw/images/icon-01.png) no-repeat; }
.title02{ padding:0 0 0 25px; margin:0 18px 40px 0; background:url(langs/tw/images/icon-01.png) no-repeat; }
.title03{ padding:0 0 14px 28px; margin:0 0 50px 0; border-bottom:1px solid #d3d3d3; background:url(langs/tw/images/icon-01.png) no-repeat 3px top; }
h3.title-text{ font-size:19px; font-weight:normal; color:#292929; }
h3.title-text02{ font-size:24px; font-weight:normal; color:#292929; line-height:26px; }
.sign{margin:0 10px 0 10px; }

.site { float:right; font-size:14px; color:#555; margin:2px 0 0 0; }
.site a{ color:#555; }
.site a:hover{ color:#7ba400; }
.site span.on{ color:#7ba400; }
.site .arr{ margin:0 10px 0 10px; }

.site-top { margin:6px 2px 0 0; }





/*---------------index---------------------*/
#index-bg{ background:url(langs/tw/images/index-bg.jpg) repeat-x #ffffff; }

#index-content { width:1034px; padding:45px 33px 55px 33px; }

.index-left{ width:471px; float:left; }
.index-title{margin:0 0 30px 0; }

.index-service-img{ width:232px; float:left; margin:0 50px 0 18px; }

.index-service{ width:171px; float:left; margin:-6px 0 0 0; }
.index-service ul{ width:177px; list-style-type: none; }
.index-service li{ font-size: 14px; line-height:26px; }

.index-right{ width:341px; float:right; }
.index-tel{ height:36px; font-size: 24px; color: #fff; margin-top:-10px; background-color:#89c700; text-align:center; line-height:37px; }
.index-info{ font-size: 14px; margin:22px 0 0 16px; line-height:31px; }
.index-info a:hover{ text-decoration:underline; }



/*---------------product---------------------*/
.prod-list{ height:100%; float:left; }
.prod-list ul {list-style-type:none; width:242px; margin:0 18px 55px 12px; float:left; border-bottom:2px solid #eee; }
.prod-list ul:hover{ border-bottom:2px solid #47b0c6; }
.prod-list ul:hover li.pics{ border:1px solid #47b0c6; }
.prod-list ul:hover li.prodname a{ color:#008fad; }
.prod-list li.pics{width:240px; height:200px; display:block; border:1px solid #ddd; text-align:center; cursor:pointer; }
.prod-list li.prodname {font-size:16px; color:#2d2d2d; padding:15px 0 10px 0; text-align:center; height:45px; line-height:24px; }
.prod-list li.prodname a{color:#2d2d2d; }


#prod-wrap { width:798px; margin:0 0 80px 0; position:relative; }
#pic-block { width:415px; float:left; margin:0 40px 0 0; }
.pic_con { width:400px; height:333px; margin:0 0 20px 0; text-align:center; cursor:pointer; }

#small { height:100%; float:left; display:block; }
#small ul{ list-style-type: none; }
#small li{ width:90px; height:75px; float:left; margin: 0px 11px 12px 0; display:block; position: relative; text-align:center; border:1px solid #ccc; cursor:pointer; }
#small li:hover{ border:1px solid #90be04; }


#p_text_block { width:343px; float:left; }
.product-name h2{ font-size: 26px; font-weight: normal; color: #020202; padding:2px 0 20px 0; border-bottom:1px solid #dadada; }
.p-text-con{ margin:24px 0 0 3px; font-size: 16px; line-height: 30px; }

.spec-title-block{ height:42px; background:url(langs/tw/images/ougui_03.png) no-repeat; }
.spec-title{ width:132px; font-size: 19px; color: #fff; text-align:center; line-height: 42px;}
.spec-con{ margin:40px 0 40px 1px; line-height: 29px; }
.spec-con li{ list-style:inside disc; }

.back-btn{ float:right; }
.back{ width:94px; height:34px; font-size: 15px; color: #7ea702; text-align:center; background-color:#fff; border-radius:5px; border:1px solid #90be04; display:block; line-height: 34px; }
.back:hover, .back:focus{ color: #fff; border:1px solid #90be04; background-color:#90be04; }


.page_block{ margin:0 auto; display:table; clear:both; padding:0 18px 0 12px; }

.page{ font-size: 13px; color:#828282; text-align:center; margin:0; height:100%; }
.page ul{ list-style-type: none; margin:0px ; }
.page li { float:left; margin:0 6px 0 0; text-align:center; }
.page li a{color:#9b9b9b; width:23px; height:23px; padding:3px; border:1px solid #b8b8b8; display:block; text-decoration:none; line-height: 23px; }
.page li a:hover{color:#fff; border:1px solid #90be04; display:block; text-decoration:none; background-color:#90be04; }
.page li.on{color:#fff; font-weight: bold; width:23px; height:23px; padding:3px; border:1px solid #90be04; display:block; line-height: 23px; background-color:#90be04; }
.page li:last-child { margin-right:0;}




/*---------------about---------------------*/
#about-bg{ background:url(langs/tw/images/about-bg.jpg) repeat-x #fff; }

.about-container{ width:680px; margin:0 auto; }
.about-text{ font-size: 16px; margin:40px 0 70px 0; line-height:33px; text-align:center; }

.about-prod{ margin:0 0 25px 2px; }
.about-prod ul{ width:291px; float:left; list-style-type: none; margin:0 0 0 94px; }
.about-prod ul:first-child{ margin-left:0; }
.about-prod li.photo{ width:291px; height:207px; }
.about-prod li.text-block{ height:260px; border:1px solid #d2d2d2; background-color:#eee; padding:28px 21px 0 24px; line-height: 30px; }
.about-prod li.text-block p.heading{ font-size: 22px; color:#0a0a0a; margin:0 0 15px -2px; }





/*---------------contact---------------------*/
#contact-bg{ background:url(langs/tw/images/contact-bg.jpg) no-repeat #ffffff; }

.contact-info{ width:370px; float:left; margin:0 60px 0 10px; padding:60px 0 0 0; background:url(langs/tw/images/ougui_03.jpg) no-repeat right 33px; }

.info_text{ font-size: 14px; margin:30px 0 0 0; }
.info_text a:hover{ text-decoration:underline; }
.info_text p{ padding:0 0 0 63px; min-height:45px; line-height:54px; }
.info_tel{ font-size:22px; color: #729700; background:url(langs/tw/images/tel.png) no-repeat 0px 6px; }
.info_fax{ font-size:22px; color: #729700; background:url(langs/tw/images/fax.png) no-repeat 0px 6px; }
.info_email{ background:url(langs/tw/images/mail.png) no-repeat 0px 7px; }
.info_address{ background:url(langs/tw/images/address.png) no-repeat 0px 7px; color: #353535;}

.contact-map{ width:300px; border:1px solid #c8c8c8; margin:46px 0 25px 0; }


.contact-form{ width:624px; float:left; }

.contact-text{margin:0 8px 18px 0; text-align:right; }
.require{ font-size:14px; color: #e60012; margin:0 0 0 8px; }
.star{ font-size:15px; color: #e60012; margin:0 0 0 3px; }

.submit{ width:140px; height:45px; float:right; font-size: 15px; color: #fff; text-align:center; padding:0 0 1px 0; margin:15px 8px 0 0; background-color:#90be04; opacity:0.60; filter:alpha(opacity=60); display:block; border-radius:5px; }
.submit:hover, .submit:focus{ color: #fff; opacity:1; filter:alpha(opacity=100); transition:opacity .30s linear; -webkit-transition:opacity .30s linear; }





/*---------------form---------------------*/
form { margin: 0 0px; padding: 0px; }

.input { border: #c8c8c8 1px solid; width: 484px; height: 25px; color: #333333; background-color: #fff; padding:3px 10px 3px 10px; border-radius:4px; }
.textarea {border: #c8c8c8 1px solid; width: 484px; height: 165px; color: #333333; background-color: #fff; padding:5px 10px 5px 10px; margin:16px 0 16px 0; border-radius:4px; }
.select { border: 1px solid #c2c2c2; color: #505050; height:27px; padding:3px 3px 3px 3px; font-family: Arial, Helvetica, sans-serif; }
.option { font-size:12px; color:#333; font-weight:bold;}

.code-input { border: #c8c8c8 1px solid; width: 180px; height: 25px; color: #333333; background-color: #fff; padding:3px 10px 3px 10px; border-radius:4px; }




/*---------------------------- footer css----------------------------------------------------- */
#footer-wrap{ background-color: #343d44; }
#footer{ width:1064px; margin:0 auto; font-size:13px; color: #c6c8c9; padding:30px 18px 30px 18px; background:url(langs/tw/images/footer-logo.png) no-repeat 18px 30px; }
#footer a{color: #c6c8c9; }
#footer a:hover{ color: #fff; }

#footer-counter{ width:290px; float:left; font-size:13px; margin:75px 35px 0 4px; }

#footer-info{ width:460px; float:left; margin:0 60px 0 0; line-height:29px; }

#footer-navi{ width:80px; float:left; margin:0 20px 0 0; }
#footer-navi ul{ list-style-type: none; }
#footer-navi li{ line-height:29px; }

#footer-qrcode{ float:left; margin:5px 0 0 0; }


#footer-wrap02{ background-color:#000; }
#footer-copyright{ width:1078px; margin:0 auto; font-size:12px; color: #737373; padding:10px 0 10px 22px; }
#footer-copyright a{ color: #737373; }
#footer-copyright a:hover{ color: #01a485; }