@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 #ffffff; font-size: 14px; color:#525252; line-height: 160%; font-family:微軟正黑體, Arial, Helvetica; }
input, select, button, textarea { font-size: 14px; font-family:微軟正黑體, Arial, Helvetica; }
ul, li { list-style-type:none; }
a { text-decoration:none; color:#2e2e2e; border:none; outline:none; }
a img { border:0; outline:none; }
a:hover { color:#007286; }

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


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

#header{width:1200px; padding:0; display:block; height:72px; background-color:#fafafa; }
#header h1{width:237px; height:72px; float:left; display:block; margin:0 160px 0 0; }


#navi { width:803px; margin:14px 0 0 0; display:block; float:left; }
#navi ul{ list-style-type: none; margin:0; padding:0; }
#navi li{ float:left; font-size: 16px; font-weight:bold; color:#616161; text-align:center; line-height:58px; background:url(langs/tw/images/line.jpg) no-repeat right 17px; }
#navi li a{ width:128px; color:#616161; display:block; }
#navi li a:hover{ color:#ffffff; background-color:#3aa9b1; }


#content{ width:1164px; float:left; height:100%; margin:30px 18px 70px 18px; position:relative; }

#title{ margin:0 0 45px 0; }
#title h2{ padding:0 0 17px 12px; font-size: 27px; font-weight:normal; color:#313131; font-family: "Open Sans",微軟正黑體,Helvetica,Arial,sans-serif; }
#title p{ height:1px; background:url(langs/tw/images/line-02.jpg) no-repeat #d1d1d1; }



/*---------------index---------------------*/
#index-wrapper{ width:100%; height:100%; }
#index-header{ width:1200px; height:100%; margin:0 auto; }
#banner-bg{ width: auto; height: 583px; min-width: 100%; min-height: 100%; background:url(langs/tw/images/index-banner-01.jpg) top center no-repeat; }

#gallerya { position:relative; width:auto; height:583px; }
#gallerya div {position:absolute; width:auto; height:583px; }
#gallerya div img{ width:auto; height:583px;}

#gallerya ul{list-style-type: none; display:block; width:97%; padding:12px 0 0 2px; }
#gallerya li a{float:left; display:inline-block; width:9px; height:9px; border-radius:50% 50%; border:1px solid #ffffff; margin:6px 6px 0 0px; }
#gallerya li a:hover{ background-color:#ffffff; }
#gallerya li.currentli{ background-color:#ffffff; }


#index-content { width:1060px; float:left; height:100%; padding:35px 70px 40px 70px; }


#index-left{ width:400px; float:left; margin:0; min-height:150px; }
#index-right{ width:300px; float:right; text-align:right; font-size:15px; line-height:33px; }

.index-title{font-size:23px; color:#000; margin:0 0 15px 0; }
.index-text{font-size:16px; line-height:28px; }
.index-link, .index-link a{font-size:15px; color:#1a8a9f; margin:13px 0 0 0; text-decoration:underline; }
.index-link a:hover{text-decoration:none; }


.index-tel{ font-size:25px; color:#3c3c3c; margin:0 0 0px 0px; line-height:40px; }
.index-email, .index-email a{ color:#007487; }
.index-email a:hover{ color:#007487; text-decoration:underline; }
.index-icon{ margin:0 12px 0 0; vertical-align:middle; }
.index-icon02{ margin:0 8px 0 0; vertical-align:text-bottom; }




/*---------------product---------------------*/
.summary{font-size:16px; color:#01699f; margin:70px 0 0 0; text-align:center; }
.application{font-size:23px; color:#737373; margin:0 0 25px 0; font-family: "Open Sans",微軟正黑體,Helvetica,Arial,sans-serif; }

.app-block{ width:1123px; float:left; padding:30px 20px 35px 21px; margin:0 0 20px 0; background-color:#ebebeb; }
.app-block ul{ width:245px; float:left; list-style-type: none; margin:0 18px 0 0; padding:10px 10px 50px 10px; background-color:#fff; border:1px solid #e0e0e0; min-height:525px; }
.app-block ul:last-child{ margin-right:0; }
.app-block li.icon{ height:150px; background-color:#f2f3fb; display:block; text-align:center; }
.app-block li.icon *{vertical-align:middle;}
.app-block li.icon i{height:100%; display:inline-block; } 
.app-block li.device{ font-size:19px; color: #2397ad; margin:10px 0 0 0; text-align:center; }
.app-block li.optical-film{ font-size:15px; margin:40px 0 0 0; }
.app-block li.optical-film-img{ text-align:right; padding:0 6px 0 0; }
.app-block li.mode-title{ width:90px; font-size:15px; margin:20px 0 0 0; float:left; }
.app-block li.mode{ width:155px; font-size:15px; margin:20px 0 0 0; float:left; }



/*---------------about & quality---------------------*/
#about-bg{ background:url(langs/tw/images/about-bg.png) repeat-x #ffffff; }

.about-title{ font-size:20px; color:#000; margin:0px 0px 10px 0px; }
.about-con{ font-size:16px; margin:0px 0px 0px 70px; line-height:26px; }
.about-pic{ float:right; margin:100px 70px 0 0; }


#quality-bg{ background:url(langs/tw/images/quality-bg.png) repeat-x #ffffff; }
.quality-pic{ float:right; margin:0 70px 0 0; }



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

.contact_info{ width:300px; float:left; margin:0px 60px 0px 10px; }
.company-name{ font-size:20px; color: #202020; margin:3px 0 20px 2px; }

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

.contact_map{ width:270px; border:1px solid #c8c8c8; margin:40px 0px 0px 0px; }


.contact_form{ width:790px; float:left; }

.contact_text{margin:0 0px 20px 0; padding:0 0 14px 0; border-bottom:1px dotted #c7c7c7; }
.star{ font-size:13px; color: #e60012; margin:0 0px 0 3px; }
.input-space{margin:0 0 0 15px; }
.input-space02{margin:0 0 0 24px; }

.contact_button{ margin:10px 0 0 0; text-align:right; }

.form-send{ font-size:15px; color: #e60012; margin:140px 0 0 0; text-align:center; }



/*---------------form---------------------*/
form { margin: 0 0px; padding: 0px; }
.input { border: #d9d9d9 1px solid; width: 270px; height: 28px; font-size: 14px; COLOR: #333333; background-color: #fbfbfb; font-family:Arial, 微軟正黑體, Helvetica; }
.textarea {border: #d9d9d9 1px solid; width: 683px; height: 185px; font-size: 14px; COLOR: #333333; background-color: #fbfbfb; margin:18px 0 18px 0; font-family:Arial, 微軟正黑體, Helvetica; }
.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: #d9d9d9 1px solid; width: 180px; height: 28px; COLOR: #333333; background-color: #fbfbfb; font-family: Arial, Helvetica, sans-serif; }



/*---------------------------- footer css----------------------------------------------------- */
#footer-navi-block{ clear:both; background-color:#009fb9; padding:25px 0 25px 0; }
#footer-navi{ width:1200px; margin:0 auto; }
#footer-navi ul{ list-style-type: none; }
#footer-navi li{ float:left; padding:0 40px 0px 40px; }
#footer-navi li img{ display:block; }
#footer-navi .frame{ width:114px; height:115px; overflow:hidden; }
#footer-navi .frame .btnname{ font-size: 15px; color:#edfbf3; margin:5px 0px 0 0px; text-align:center; }
#footer-navi .frame:hover .btnname{ color:#161616;  }


#footer-block{ clear:both; background-color:#dbdbdb; }
#footer{ width:1200px; margin:0 auto; background:url(langs/tw/images/footer-logo.png) no-repeat 0 5px; padding:13px 0px 13px 0; }
#footer-con{ font-size:13px; color: #585858; text-align:right; padding:0px 25px 9px 0; border-bottom:1px solid #b8b8b8; }
#copyright{ font-size:12px; color: #7a7a7a; text-align:right; padding:9px 25px 0 0; }
#copyright a{color: #7a7a7a; }
#copyright a:hover{ color: #009075; }