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

body{ font-family:"微軟正黑體"; font-size:15px; color:#444; line-height:24px;}

a{ color:#444; text-decoration:none;}
a:hover{ color:#ff8800; text-decoration: none;}

p{ text-align:justify;}

/*** TOPBOX ***/
#topbox{ width:100%; height:118px; left: 0; top: 0; margin:0; padding:0; background: url(../img/bg-topbox.png) 0 0px repeat-x; position:fixed; z-index:200;}
#top{ width:1040px; height:110px; margin:0px auto 0 auto; padding:3px 0 0 0; overflow:hidden;}
#logo{ float:left; width:383px; height:110px;}
#top_right{ float:right; width:649px; height:110px; overflow:hidden;}

#nav{ margin:21px 0 0 0;}
#nav li{ float:right; font-size:12px; color:#777; padding:0 0 0 14px;}
#nav li a{ color:#777; text-decoration:none;}
#nav li a:hover{ color:#ff8800; text-decoration:none;}
#nav li.home{ background:url(../img/icon-home.gif) 0 8px no-repeat;}
#nav li.mail{ background:url(../img/icon-mail.gif) 0 8px no-repeat;}
#nav li.lan{ background:url(../img/icon-lan.gif) 0 8px no-repeat;}
#nav li.nav_dotted{ width:1px; height:9px; margin:8px 10px 0 10px; padding:0; display:block; background:url(../img/dot01.gif) no-repeat;}

#btn{ float:right; margin:17px 0 0 0;}
#btn li{ float:right; margin:0 0 0 40px; font-size:16px;}
#btn li a{ color:#777; text-decoration:none;}
#btn li a:hover{ color:#ff8800; text-decoration:none;}
/*** TOPBOX ***/

/*** WRAP ***/
#wrap { width: 100%; min-width: 1140px; }

/***INDEX MAIN ***/
#mainbox{ background:#FFF; margin:0; padding:30px 0; overflow:hidden;}
#main.index{ width:1140px; background:none;}

h2.index_products{ width:1040px; background:url(../img/line01.gif) 0 13px repeat-x; overflow:hidden; margin:0px auto 30px auto;}
h2.index_products p{ float:left; width:113px; height:33px; font-size:24px; color:#222; background:#fff url(../img/icon-products.png) no-repeat; padding:0 0 0 32px;}

#more01{ float:right; width:58px; height:25px; border:1px solid #777; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:25px; text-align:center; background:#FFF;}
#more01 a{ width:58px; height:25px; color:#777; text-decoration:none; background:#FFF; display:block;}
#more01 a:hover{ width:58px; height:25px; color:#fff; text-decoration:none; background:#ff8800; display:block;}
/***INDEX MAIN ***/

/*** MAIN ***/
#main{ width:1040px; margin:0px auto; overflow:hidden; background:url(../img/line03.gif) 259px 0 repeat-y;}
/*** MAIN ***/

/*** LEFT ***/
#left{ float:left; width:260px;}
#left_title{ width:260px; height:30px; background:url(../img/bg-left.png) no-repeat;}
#left_title p{ color:#fff; line-height:28px; padding:0 0 0 10px;}

#btn_pct{ width:229px; margin:30px 31px 0 0;}
#btn_pct li{font-size:20px; width:229px; height:37px; line-height:36px; text-align:right;}
#btn_pct li a{ background:url(../img/line02.gif) right no-repeat; padding:0 12px 0 0; color:#999; text-decoration:none;}
#btn_pct li a:hover{ background:url(../img/line02x.gif) right no-repeat; padding:0 12px 0 0; color:#ff8800; text-decoration:none;}
#btn_pct li.dotted_line{ height:1px; background:url(../img/dot02.gif) repeat-x;}
/*** LEFT ***/

/*** RIGHT ***/
#right{ float:right; width:750px; margin:0 0 0 30px;}
#right h1{ font-size:24px; color:#0ba29a; margin:0 0 30px 0;}

#txt a{ color:#0ba29a; text-decoration:none;}
#txt a:hover{ color:#ff8800; text-decoration: none;}

#pct_imgbox{ float:right; width:400px; margin:0 2px 0px 30px;}
#pct_img{ width:400px; height:300px; margin:0 0px 5px 0; border:1px solid #e6e6e6;}

#pct_thumb{ width:400px;}
#pct_thumb li{ width:120px; height:90px; float:left; margin:0 5px 0 0; border:1px solid #e6e6e6;}

#listbox{ min-height:350px; overflow:hidden;}
#txt{ margin:10px 0 0 0;}

#nav_list{ padding:30px 0 0 0; clear:both;}

.btn_back a{ padding:13px 18px; margin:0 auto; line-height:28px; display:block; background:#0ba29a; color:#fff;}
.btn_back a:hover{ padding:13px 18px; margin:0 auto; line-height:28px; display:block; background:#f39800; color:#fff;}

#notice{ margin:10px 0; font-size:13px; font-weight:bold; color:#cc0000;}

#t_box{ float:left; width:240px; margin:0 3px 15px 3px;}
#t_img{ width:240px; height:135px;}
#t_txt{ text-align:center; line-height:28px;}

#fbtn_box{ width:104px; margin:0 auto;}
/*** RIGHT ***/

/*** INDEX SLIDER ***/
#thumb_prev{ float:left; width:50px;}
#thumb_next{ float:right; width:50px;}
#thumb_slidebox{ float:left; overflow:hidden; width:1040px;}
/*#mycarousel_thumb{ width:252px; height:336px;}*/
#mycarousel_thumb{ width:341px; height:283px;}
/*** INDEX SLIDER ***/

/*** INDEX INFO ***/
#infobox{ padding:40px 0; background:url(../img/bg-info.jpg); clear:both; overflow:hidden;}
#info{ width:1040px; margin:0 auto;}
#info li{ float:left; width:264px; padding:0 40px;}
#info li.inews h2{ background:url(../img/icon-news.png) 0px 0px no-repeat;}
#info li.iapp h2{ background:url(../img/icon-app.png) 0px 0px no-repeat;}
#info li.icontact h2{ background:url(../img/icon-contact.png) 0px 0px no-repeat;}
#info li.inews a, #info li.iapp a { display: block; }
#info h2{ font-size:24px; line-height: 27px; color:#222; text-shadow:1px 1px 0px #ddd; text-align:left; margin:0px 0 20px 0; padding-left: 40px;}
#info h2 a{ color:#222; text-decoration:none;}
#info h2 a:hover{ color:#222; text-decoration: underline;}
#table_icontact td{ line-height:24px;}
/*** INDEX INFO ***/

/*** FOOTERBOX ***/
#footerbox{ padding:30px 0; overflow:hidden; clear:both; background-color: #444;}
#footer{ width:1040px; margin:0 auto; font-size:13px; color:#ccc;}
#footer_left{ float:left;}
#footer_right{ float:right;}
#footer_right li{ float:right;}
#footer_right li.f_logo{ width:144px; height:48px; margin:0 0 0 32px;}
#footer_right li.f_fb a{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) -52px 0px no-repeat;}
#footer_right li.f_fb a:hover{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) -52px -26px no-repeat;}
#footer_right li.f_mail a{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) -26px 0px no-repeat;}
#footer_right li.f_mail a:hover{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) -26px -26px no-repeat;}
#footer_right li.f_home a{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) 0px 0px no-repeat;}
#footer_right li.f_home a:hover{ width:26px; height:26px; margin:22px 0 0 5px; display:block; text-indent:-9999px; background:url(../img/icon-share.png) 0px -26px no-repeat;}
/*** FOOTERBOX ***/

.clear{ clear:both;}

#float_left{ float:left; margin:0 30px 30px 0;}
#float_right{ float:right; margin:0 0 30px 30px;}

.color01{ color:#ff8800;}
.color02{ color:#cc0000;}

#table01{ width:742px;}
#table01 td{ height:35px; background:url(../img/dot02.gif) bottom repeat-x;}
#table01 td.date{ width:100px; font-size:13px; color:#999; text-align:right;}

.input01{ width:180px; border:1px solid #ccc; color:#666;}
.input02{ width:117px; border:1px solid #ccc; color:#666;}

.textarea01{ width:421px; height:122px; margin:10px 0 0 8px; border:1px solid #ccc; color:#666;}

.submit01{ padding:13px 18px; border:0; cursor:pointer;}
a .submit01{ padding:13px 18px; margin:0 auto; display:block; background:#0ba29a; color:#fff;}
a:hover .submit01{ padding:13px 18px; margin:0 auto; display:block; background:#f39800; color:#fff;}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#nav li.home{ background:url(../img/icon-home.gif) 0 7px no-repeat;}
#nav li.mail{ background:url(../img/icon-mail.gif) 0 7px no-repeat;}
#nav li.lan{ background:url(../img/icon-lan.gif) 0 7px no-repeat;}
}

.ck_post table { border-collapse: collapse; }
.ck_post table td { padding-left: 4%; padding-right: 3%; border: 1px #c4c2c0 solid; vertical-align: center; }

.ck_post .line-title { position: relative; margin: 20px 0px 10px 0px; text-align: center; }
.ck_post .line-title .text { position: relative; display: inline-block; margin: 0 auto; text-align: center; line-height: 100%; background: #ffffff; z-index: 2; }
.ck_post .line-title:after { position: absolute; content: ""; background: #d7d7d7; width: 100%; height: 1px; top: 49%; left: 0; z-index: 1; }

.altText { white-space: nowrap; text-indent: 100%; overflow: hidden; line-height: 0; }

.clearfix { zoom: 1; }

.clearfix:before { content: ""; display: table; }

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