@charset "utf-8";

/* CSS Document */
html, body, div, p, ul, li, dl, dt, dd, h1, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
img { border: 0 none; font-weight: normal; font-size: 100%; }
ul, li { list-style-type: none; }
body, input, select, button, textarea { font-size: 13px; font-family:微軟正黑體, Calibri, Arial, Helvetica; }
button { cursor: pointer; }
h2 { margin:25px 0 25px 0; font-size:16px; font-weight: bold; color: #0081cc; }
body { background-color:#000000; color: #dddddd; line-height: 160%; }
a, a:link { color: #dddddd; text-decoration: none; }
a:visited {  }
a:active, a:hover { text-decoration: underline; }
a:focus { outline: none; }
 
 
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{*+height:1%;}


/*---------------layout---------------------*/
#wrapper{ width:1002px; height:100%; margin:0 auto; background-color:#000000; }

#header{width:1002px; padding:0; display:block; }
#header h1{width:185px; height:85px; float:left; display:block; }

#submenu{ width:200px; float:right; padding:19px 12px 0 0; margin:0; }
#submenu ul{ padding:0; margin:0; display:block; }
#submenu li{ list-style:none; display:block; float:right; }

#navi { width:1002px; height:31px; padding:0px; margin:0; display:block; position:relative; border-top:1px solid #585858; }
#navi ul{ list-style-type: none; margin: 0px; padding: 0; }
#navi li{ height:31px; float:left; margin:0; display:block; position: relative; }
#navi li.company{ height:31px; float:left; margin:0 104px 0 0; display:block; }
#navi ul li p a{ color:#d8d8d8; text-align:left; font-size:12px; display:block; height:22px; padding:4px 15px 1px 15px; width:120px; }
#navi ul li p a:hover{ background-color:#5d5d5d; text-decoration:none; }

.dropdown div{ width: 150px; display:none; position: absolute; top: 100%; left: 0; z-index:99999;}
.sub_menu{ background-color:#1a1a1a; }


#content { width:1002px; padding:0px 0 35px 0; clear:both; }
#content01{ width:954px; height:515px; float: left; margin:0 24px 0 24px; padding:0px 0 35px 0; clear:both; }
#content02{ width:978px; height:515px; float: left; margin:0 0px 0 24px; padding:0px 0 35px 0; clear:both; }
#content03{ width:1002px; height:507px; padding:8px 0 35px 0; clear:both; }


.titleimg{ margin:0px 0 20px 0px; border-bottom:1px solid #5e5e5e; }
.titleimg01{ margin:0px 24px 20px 0px; border-bottom:1px solid #5e5e5e; }


.leftnavi{ width:207px; float:left; margin:0 13px 35px 11px; padding:0; }
.leftnavi dl{ margin:0; padding:0; display:block;}
.leftnavi dt{ list-style:none; margin:0; display:block; color: #171717; padding:5px 3px 5px 3px; border-bottom:1px solid #acacac;}
.leftnavi dt a{color:#171717; display:block; }
.leftnavi dt a:hover{ color:#e50056; text-decoration:none; display:block; }

.leftnavi dd { color:#343434; margin:0; padding:2px 0px 2px 8px; display:block; background-color:#c8c8c8}
.leftnavi dd a{ color:#343434; display:block;}
.leftnavi dd a:hover{ color:#e50056; text-decoration:none; display:block; }
.leftnavi dd.on{ color:#e50056; display:block; }
.leftnavi dd.on a{ color:#e50056; text-decoration:none; display:block; }

#right_content { width:742px; float: left; padding:0 0 0 29px; }



/*---------------index---------------------*/
#indexcon { width:1002px; float:left; height:100%; position:relative; background-color:#000000; }
.left_pic{ width:402px; float:left; position:relative; }
.right_con{ width:600px; float:left; position:relative; }

#index_navi { width:600px; height:30px; padding:0px; margin:0; display:block; position:relative; }
#index_navi ul{ list-style-type: none; margin: 0px; padding: 0; }
#index_navi li{ height:30px; float:left; margin:0; display:block; position: relative; }

#service_block { width:600px; float:left; height:100%; position:relative; margin:18px 0 0 0; }
.service_con{ width:231px; height:105px; float:left; position:relative; padding:6px 6px 4px 8px; font-size:12px; color:#bababa; background-color:#4f4f4f; line-height: 17px;}

.newprod_con{ width:336px; height:95px; float:left; position:relative; padding:10px 8px 10px 11px; background-color:#ffffff; }
.newprod_con ul{ list-style-type: none; }
.newprod_con li{ width:97px; height:94px; float:left; margin:0px 7px 0px 7px; }

.contact_pic{ clear:both; padding:3px 0 3px 0; border-bottom:1px solid #323232; }
.contact_con{ padding:8px 0 15px 3px; font-size:12px; color:#bebebe; line-height: 20px;}
.contact_con a{ color:#bebebe; text-decoration:none; }
.contact_con a:hover{ color:#bebebe; text-decoration:underline; }

#index_footer { clear:both; width:996px; font-size:11px; -webkit-text-size-adjust:none; color:#999999; border-top:2px solid #323232; padding:6px 0 6px 6px; background-color:#000000; }



/*---------------product---------------------*/
.category{ font-size:13px; color:#808080; margin:25px 0px 15px 0px; padding:0; }
.category a{ font-size:15px; color:#5f5f5f; font-weight:bold; }
.category a:hover{ font-size:15px; color:#e50056; font-weight:bold; text-decoration:none; }
.category span.on{ font-size:15px; color:#e50056; font-weight:bold; }

.prod_list{ width:742px; margin:0; height:100%; float:left; }
.prod_list ul {list-style-type: none; margin:0px; }
.prod_list li{width:167px; height:162px; display:block; float:left; margin:0 15px 25px 0; text-align:center;}
.prod_list li a{width:165px; height:160px; border:1px solid #bababa; display:block; }
.prod_list li a:hover{width:165px; height:160px; border:1px solid #e50056; display:block; }



/*---------------news---------------------*/
.news_list{ margin:0; height:100%; float:left; }
.news_list ul {width:220px; margin:0 23px 15px 0px; float:left; }
.news_list li.pics{width:210px; height:112px; display:block; text-align:center; border:5px solid #bdbdbd; }
.news_list li.newstitle {color:#e0e0e0; margin:9px 0 0 3px; }
.news_list li.newstitle a{color:#e0e0e0; }
.news_list li.newstitle a:hover{color:#f5debf; text-decoration:none; }
.news_list li.newstext {margin:0px 0 0 3px; color:#999999; height:80px; }
.news_list li.newstext p{font-size:12px; margin:0px; color:#a1170a; line-height: 24px;}

.news_title { color:#e0e0e0; background-color:#5e5e5e; padding:5px 20px 5px 20px; margin:0 0 37px 0; }
.news_date{ font-size:12px; color:#ef160b; float:left; margin:0 23px 0 0; }
.news_con { width:954px; float:left; padding:0; }
.news_con_pic { width:325px; float:left; margin:0 35px 0 20px; }
.news_con_text { width:565px; float:left; color:#d0d0d0; }
.news_con_text02 { color:#d0d0d0; line-height: 25px; }

.news_notice { font-size: 14px; color:#ef160b; }
.news_notice02 { font-size: 16px; font-weight:bold; color:#ffffff; }


.news_back{ font-size: 13px; color:#606060; text-align: right; padding:10px 0px 0px 0px; clear:both; }
.news_back a{ font-size: 14px; color:#606060; font-family:Calibri, Arial, Helvetica;  }
.news_back a:hover{ color:#e0e0e0; text-decoration:none; }


.page_block{ margin:0 auto; display:table; clear:both; padding:5px 23px 0 0; }

.page{ font-size: 12px; color:#828282; text-align:center; margin:0; height:100%; }
.page ul{ list-style-type: none; margin:0px ; }
.page li { float:left; margin:0px 5px 0px 0px; text-align:center; }
.page li a{color:#828282; width:15px; height:15px; padding:3px; border:1px solid #b3b3b3; display:block; text-decoration:none; line-height: 15px; }
.page li a:hover{color:#f6053e; border:1px solid #f6053e; display:block; text-decoration:none; }
.page li.on{color:#f6053e; font-weight: bold; width:15px; height:15px; padding:3px; border:1px solid #f6053e; display:block; line-height: 15px;}


/*---------------about & contact & service---------------------*/
.about_block{ width:954px; min-height:400px; float:left; padding:35px 0 0 0; background:url(images/about_10.jpg) right 350px no-repeat; }
.about_pic{ float:left; margin:0px 50px 0px 35px;  }
.about_text{ float:left; padding:14px 0 0px 0; line-height:26px; }
.aboutTxt { margin-top: 10px; line-height:26px; }


.contact_info{ width:191px; float:left; margin:0 0 0 5px; }
.contact_infotext{ margin:230px 0 0 0; font-size: 12px; color: #a3a3a3; }
.contact_infotext p{ margin:0px 0 10px 0; line-height: 22px;}

.contact_form{ width:741px; height:454px; float:left; background:url(images/contact_04.jpg) no-repeat; }
.contact_formblock{ margin:30px 0 0px 105px; }
.contact_text{ margin:0px 0 10px 0; color: #ff6600; }
.contact_fieldname{ color: #9f9f9f; }
.star { color:#ff6600; }

.remark { font-size: 12px; text-align:right; padding:5px 10px 4px 0; }
.contact_line{ border-bottom:1px solid #e5e5e5; }
.contact_button{ text-align: right; margin:16px 36px 5px 0;  }

.contact_mail a{ color: #a3a3a3; }
.contact_mail a:hover{ color: #dddddd; text-decoration: none; }


.service_block{ padding:10px 0 0 5px; background:url(images/service_01.jpg) 655px 220px  no-repeat; line-height: 22px;}
.service_text{ color: #ff6600; }
.oem_service{ width:57px; color: #ffffff; background-color:#383838; padding:0px 0 0px 5px; margin:0 0 5px 0; }



/*---------------form---------------------*/
.input {border: #c2c2c2 0px solid; width: 420px; height: 20px; COLOR: #dddddd; background-color: #5d5d5d; font-family: Calibri, Arial, Helvetica; }
.textfield { _position: relative; border: 1px solid #c2c2c2; font-family:Calibri, Arial, Helvetica; height: 16px; color: #505050; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#eeeeee',GradientType=0 ); padding:3px;}
.textarea { border: #c2c2c2 0px solid; width: 420px; height: 150px; COLOR: #dddddd; background-color: #5d5d5d; }
.select { _position: relative; border: 1px solid #c2c2c2; color: #505050; font-family:Arial, Helvetica, sans-serif; height: 22px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#eeeeee',GradientType=0 ); }
.option { font-size:12px; color:#333; font-weight:bold;}

.code_input { border: #c2c2c2 0px solid; width: 170px; height: 20px; COLOR: #dddddd; background-color: #5d5d5d; font-family: Calibri, Arial, Helvetica;  }
.scrollbar {SCROLLBAR-FACE-COLOR: #3b3b3b; SCROLLBAR-HIGHLIGHT-COLOR: #3b3b3b; SCROLLBAR-SHADOW-COLOR: #5d5d5d; SCROLLBAR-3DLIGHT-COLOR: #5d5d5d; SCROLLBAR-ARROW-COLOR: #5d5d5d; SCROLLBAR-TRACK-COLOR: #5d5d5d; SCROLLBAR-DARKSHADOW-COLOR: #5d5d5d}


/*---------------------------- footer css----------------------------------------------------- */
#footer{ clear:both; font-size:12px; color:#686868; padding:15px 13px 15px 13px; }
#footer span{ font-size:12px; color:#686868; font-family:Calibri, Arial, Helvetica; }
#footer span a{ color:#686868; }
#footer span a:hover{ color:#cb9d5e; text-decoration: none; }


.copyright{font-size:12px; color:#f5063e; float:left; margin:0 30px 0 0; }