@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; }
body { background:url(langs/tw/images/cnc_bg.jpg) repeat-x #ffffff; font-size: 15px; color:#414141; line-height: 170%; font-family: "Open Sans", 微軟正黑體, Arial, Helvetica; }
input, select, button, textarea { font-size: 15px; font-family: "Open Sans", 微軟正黑體, 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:#ce0000}

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


/*---------------layout---------------------*/
#wrapper{ width:1002px; height:100%; margin:0 auto; background:url(langs/tw/images/cnc_bg.jpg) repeat-x #ffffff; }
#index_wrapper{ width:1002px; height:100%; margin:0 auto; }


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

#submenu{ width:683px; margin:22px 10px 0 0; float:left; text-align:right; }


#navi_bg{ width:1002px; height:37px; background:url(langs/tw/images/cnc_03.jpg) repeat-x; clear:both; }
#navi_block{ margin:0 auto; display:table; }

#navi { text-align:center; }
#navi ul{ list-style-type:none; margin:0px; z-index:999;}
#navi ul li{ float:left; width:190px; height:37px; font-size:16px; font-weight:bold; color:#ffffff; display:block; line-height:37px; position:relative; text-align:center; }
#navi ul li a{ color:#ffffff; display:block; }
#navi ul li a:hover{ color:#dff7c6; background:url(langs/tw/images/cnc_05.jpg) no-repeat; }
#navi ul li ol{ z-index:1001; position:absolute; top:37px; left:0px; width:180px; display:none; list-style:none; background:rgba(121, 178, 61, 0.90) ; background-color:#79b23d \9; filter:alpha(opacity=90) \9; margin:0; padding:3px 15px 17px 15px; } 
#navi ul li:hover ol{display:block; }
#navi ul li ol li{float:none; height:25px; font-size:14px; color:#f2fee6; margin:0; padding:0; display:block; border:none; text-align:left; background:none; } 
#navi ul li ol li a{color:#f2fee6;}
#navi ul li ol li a:hover{color:#f6f558; background:none; }


#content { width:1002px; float:left; height:100%; margin:21px 0px 50px 0px; position:relative; }

#left_wrap{ width:204px; float:left; margin:15px 27px 40px 0px; background:url(langs/tw/images/cnc_13.jpg) no-repeat right top; min-height:450px; }

.left_title{ width:186px; font-size:19px; font-weight:bold; color:#4a7022; border-bottom:2px solid #5c8a2b; padding:0 0 7px 7px; }
.left_title span{ color:#5cb00e; }

.leftnavi{ width:193px; padding:0 0 62px 0; }
.leftnavi dl{ margin:0; padding:0; display:block; }
.leftnavi dt{ font-size:15px; font-weight:bold; color:#606060; list-style:none; display:block; padding:6px 0px 7px 24px; border-bottom:1px solid #b5dd8a; background:url(langs/tw/images/icon.png) no-repeat 12px 16px; }
.leftnavi dt a{ color:#606060; }
.leftnavi dt a:hover{ color:#63a31c; text-decoration:none; }
.leftnavi dt.on a{ color:#63a31c; }

.leftnavi dd { margin:0; padding:3px 0px 5px 36px; display:block; background:url(langs/tw/images/icon_02.png) no-repeat 27px 14px; }
.leftnavi dd a{ color:#111111; display:block;}
.leftnavi dd a:hover{ color:#cb3d02; text-decoration:none; display:block; }
.leftnavi dd.on a{ color:#cb3d02; text-decoration:none; display:block; }
.leftnavi dd.last{ border-bottom:1px solid #cfcfcf; }


#right_block { width:771px; float: left; min-height:550px; }


.title{ height:36px; font-size:19px; font-weight:bold; color:#568128; margin:31px 0px 17px 0px; padding:0 0 0 25px; letter-spacing:1px; line-height:33px; background:url(langs/tw/images/cnc_16.png) no-repeat; }
.title1{ height:36px; font-size:18px; font-weight:bold; color:#343434; margin:31px 0px 17px 0px; padding:0 0 0 15px; letter-spacing:1px; line-height:33px; background:url(langs/tw/images/cnc_16.png) no-repeat; }


.right_content{ width:747px; float:left; height:100%; margin:0 0 0 25px; }

.online{ width:85px; top:57px; right:0px; position:absolute; z-index:20; }



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

#index_content { width:1002px; float:left; height:100%; padding:35px 0 40px 0; min-height:180px; }

.marquee{ height:30px; margin:0 22px 10px 22px; }


#index_left{ width:290px; float:left; margin:0px 35px 0px 12px; font-size:14px; color:#424242; }
.index_title{ font-size:18px; font-weight:bold; color:#59921b; margin:0 0 12px 0; }


#index_center{ width:368px; float:left; margin:0px 40px 0px 0px; }
.index_more{ float:right; margin:12px 1px 0 0px; }
.index_news_block{ width:339px; float:left; border:1px solid #c6c6c6; border-radius:6px 6px; padding:13px 13px 8px 14px; margin:3px 0 0 0; }
.index_news{ min-height:110px; }
.index_news ul{ list-style-type:none; }
.index_news li{ float:left; width:342px; margin:0 0 5px 0; }
.index_news li p.date{ float:left; width:75px; font-size:12px; color:#4a8011; padding:0 0 0 12px; background:url(langs/tw/images/icon_01.gif) no-repeat 2px 12px; }
.index_news li p.news_title{ float:left; width:255px; font-size:14px; color:#424242; }
.index_news li p.news_title a{ color:#424242; }
.index_news li p.news_title a:hover{ color:#4a8011; }


#index_right{ width:245px; float:left; padding:8px 0 0 0; }
.index_contact{ margin:0px 0 0 1px; font-size:13px; line-height:28px; color:#424242; }
.index_contact span{ color:#878787; margin:0 5px 0 0; }
.index_contact p{ margin:5px 0 0 0px; line-height:22px; }
.index_contact a{ color:#424242; }
.index_contact a:hover{ color: #078597; text-decoration:underline; }




/*---------------product---------------------*/
.prod_name{ font-size:17px; font-weight:bold; color:#568128; margin:0px 0px 25px 25px; }

.prod_list{ margin:0 0 0 10px; height:100%; float:left; }
.prod_list ul {list-style-type:none; width:206px; margin:0 0px 30px 13px; float:left; border:1px solid #d1d1d1; background-color:#ffffff; }
.prod_list ul:hover{border:1px solid #d34d15; }
.prod_list li.pics{width:206px; height:206px; display:block; }
.prod_list li.prodname {width:188px; margin:0 auto; font-size:15px; font-weight: bold; color:#618708; padding:8px 0 8px 2px; border-bottom:1px dotted #d0d0d0; }
.prod_list li.prodname a{color:#618708; }
.prod_list li.prodname a:hover{text-decoration:none; color:#bf430f; }
.prod_list li.summary {width:188px; margin:0 auto; font-size:14px; color:#7e7e7e; height:40px; padding:7px 0 15px 2px; }


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

.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:#6f6f6f; width:14px; height:14px; padding:3px; border:1px solid #999999; display:block; text-decoration:none; line-height: 14px; }
.page li a:hover{color:#31768c; border:1px solid #31768c; display:block; text-decoration:none; }
.page li.on{color:#31768c; font-weight: bold; width:14px; height:14px; padding:3px; border:1px solid #31768c; display:block; line-height: 14px;}



/*---------------company & news---------------------*/
.about_con{ padding:5px 0px 20px 0px; line-height:30px; }
.about_vero{ vertical-align: text-top; }
.about_title{ font-size:15px; font-weight: bold; color:#45566e; margin:0px 0px 8px 0px; }
.about_pic{ margin:30px 0px 35px 0px; }


.news_list{ width:747px; float:left; }
.news_list ul{ list-style-type: none; float:left; width:747px; margin:0 0 20px 0; padding:0 0px 20px 0px; border-bottom:1px solid #d8d8d8; }
.news_list li.newspic{ width:94px; height:94px; float:left; border:1px solid #c5c5c5; margin:0 23px 0 1px; display:block; }
.news_list li.newsblock{ width:627px; float:left; margin:5px 0 0 0; }
.newstitle{ width:519px; float:left; font-size: 16px; font-weight: bold; color: #3a3a3a; line-height: 23px; }
.newstitle a{ color:#3a3a3a;}
.newstitle a:hover{ color:#568128; text-decoration:none;}
.newsdate{ width:104px; float:left; font-size: 13px; font-weight: bold; color: #f17954; margin:0 3px 0 0; text-align:right; }
.newstext{ color:#6e6e6e; padding:10px 0px 0px 0px; clear:both; }

.news_title_block{ width:746px; float:left; border-bottom:1px solid #d0d0d0; padding:7px 0 10px 1px; }
.newstitle02{ width:640px; float:left; font-size: 16px; font-weight: bold; color: #568128; line-height: 23px; }
.newsdate02{ width:102px; float:left; font-size: 13px; font-weight: bold; color: #f17954; margin:0 3px 0 0; text-align:right; }
.news_con {padding:20px 0px 20px 2px; clear:both; line-height:25px; border-bottom:1px solid #d0d0d0; }

.news_back { text-align:right; margin:15px 0 0 0; }



/*---------------service---------------------*/
.service_con{ padding:10px 0 20px 0; }
.service_title{ font-size:19px; color:#557c0c; margin:0 0 25px 0; padding:0 0 0 16px; background:url(langs/tw/images/icon-02.jpg) no-repeat 2px 3px; }
.gotomeeting{ margin:0 0 40px 17px; }
.service_install_block{ width:672px; margin:0 0 0 16px; }
.service_version{ width:100px; font-size:16px; color:#fff; margin:0 0 25px 0; padding:3px 0 3px 0; border-radius:6px; background-color:#79b407; text-align:center; }
.service_step_text{ margin:0 0 23px 0; }
.service_step_text02{ margin:48px 0 23px 0; }
.service_step{ font-size:18px; color:#65940a; margin:0 12px 0 1px; }


.service_text{ margin:-8px 0 40px 0; }
.service_price{ color:#de0b0b; }
.service_subtitle{ font-size:17px; color:#000; margin:-8px 0 0 0; }
.service_table{ margin:17px 0 17px 0; }
.service_table th{ font-size:16px; color:#fff; padding:5px 0 5px 0; border-right:5px solid #fff; border-bottom:5px solid #fff; background-color:#78b406; text-align:center; }
.service_table td{ color:#3b611a; padding:5px 0 5px 0; border-right:5px solid #fff; border-bottom:5px solid #fff; background-color:#f1f1f1; text-align:center; }
.service_notice{ font-weight: bold; color:#000; margin:0 0 4px 0; }

.service_ok{ padding:90px 0 100px 0; color:#e60012; text-align:center; }




/*---------------contact---------------------*/
.contact_block{ width:724px; padding:0 12px 0 11px; }
.contact_bg{ background:url(langs/tw/images/contact_bg.jpg) no-repeat right 172px; }

.contact_text{ margin:0 0 22px 0; padding:0 0 0 30px; }
.com_name{ margin:-4px 0 8px -1px;  }
.info_text{ font-size: 14px; color: #3b3b3b; line-height:24px; }
.info_text a{ color: #3b3b3b; }
.info_text a:hover{ color: #519b01; text-decoration:underline; }
.info_text span{ color: #7b7b7b; margin:0 12px 0 0; }

.contact_form{ width:644px; padding:0 40px 0px 40px; background:url(langs/tw/images/contact_02.jpg) repeat-y; }
.contact_text02{ font-size: 14px; padding:0px 0 15px 20px; }
.contact_text03{ font-size: 14px; padding:0px 0 15px 16px; }
.star{ font-size:13px; color: #e60012; margin:0 3px 0 0; }

.contact_table th{ font-size:14px; padding:0 25px 0px 0; font-weight: normal; text-align:right; }
.contact_button{ padding:20px 25px 0px 0; text-align:right; }




/*---------------form---------------------*/
form { margin: 0 0px; padding: 0px; }
.input { border: #d7d7d7 1px solid; width: 520px; height: 26px; COLOR: #333333; background-color: #f5f5f5; }
.textarea {border: #d7d7d7 1px solid; width: 520px; height: 125px; COLOR: #333333; background-color: #f5f5f5; margin:9px 0 9px 0; }
.select { border: #d7d7d7 1px solid; width: 320px; height: 30px; COLOR: #333333; background-color: #f5f5f5; padding:3px 3px 3px 3px; }
.option { font-size:12px; color:#333; font-weight:bold;}

.code_input { border: #d7d7d7 1px solid; width: 180px; height: 26px; COLOR: #333333; background-color: #f5f5f5; font-family: Arial, Helvetica, sans-serif; }
.input02 { border: #d7d7d7 1px solid; width: 222px; height: 26px; COLOR: #333333; background-color: #f5f5f5; }



/*---------------------------- footer css----------------------------------------------------- */
#footer{ clear:both; background-color:#6b6b6b; }
#footer_con{ width:987px; margin:0 auto; font-size:14px; color: #efefef; text-align:right; padding:18px 15px 18px 0; line-height: 26px; background:url(langs/tw/images/footer_logo.png) no-repeat 0 19px; }
#footer_con a{ color: #efefef; }
#footer_con a:hover{ color: #efefef; text-decoration:underline; }
#footer_con p{ font-size:13px; color: #cacaca; }
#footer_con p a{ color: #cacaca; }
#footer_con p a:hover{ color: #00b895;  text-decoration:none;}