@charset "utf-8";
/*
 * CSS Document 
 * ==========================================================================
 * 版權所有 2014 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: 淑真 瑀倫 $
 * $Date: 2014-0-0 (一) $
*/

/* Default Set. ---------------------------------------------------------------- */
body { margin: 0; padding: 0; color: #666; font-size: 13px; font-family: Arial, "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif; }
img { border: 0; text-decoration: none;}
form, input, textarea, select, label { margin: 0; padding: 0; color: #333; font-size: 12px;}
input, textarea, select, label { font-family: "Lucida Grande", Arial, "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;}
textarea { resize: none;}
.clearBoth { height: 0; font-size: 0;	line-height: 0;	clear: both;}
.clearGroup:before, .clearGroup:after { content: ""; display: table; }
.clearGroup:after { clear: both; }
.clearGroup { zoom: 1; /* IE6&7 */ }
.displayNone { display: none;}
.hiddenEle { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6 & 7 */ clip: rect(1px, 1px, 1px, 1px);}
/* nodata */
.noData{ text-align: center; display:table; font-size: 13px; margin: 0 auto; line-height: 18px; min-height: 300px;}
.noData > div{ display: table-cell; vertical-align: middle; padding: 30px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; }
.noData .logo{ display: block;  width: 313px; height: 59px; overflow: hidden; text-indent: -9999px; background: url(../images/logo.png) no-repeat; margin: 0 auto 50px}
.noData.error{ width: 1000px}
/* table */
.tabSet, .tabSet th, .tabSet td {
	padding: 0;
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
}


/* ======================= Comm Set. ======================= */
/* header */
#header{ width: 100%; min-width: 1200px; margin: 0 auto; height: 115px; background: url(../images/white_op90.png) repeat; position: absolute ; z-index: 99; top: 0}
#header .wrap{ width: 1160px; margin: 0 auto; padding: 20px; position: relative}  
#header h1.logo{ width: 313px; height: 59px; overflow: hidden; margin: 0; padding:0; /*background: url(../images/logo.png) no-repeat;*/ margin: 15px 0 0 5px; float: left}
#header h1.logo a { display: block; width: 313px; height: 59px; text-indent: -99999px;}
#header h1.logo a span.left{ width: 59px; height: 59px;  display: block; float: left; background: url(../images/logo_l.png) no-repeat;}
#header h1.logo a span.right{ width: 0; height: 59px;  display: block; float: left; background: url(../images/logo_r.png) no-repeat; margin-left: 13px}
#header .rBox{ width: 820px; float: right}
/* 主選單 */
#menuBox { width: 820px; height: 120px; margin: 0 auto; position: relative;}
#menuBox h2 { display: none;}
#menuBox ul,
#menuBox ul li { margin: 0; padding: 0; list-style: none;}
#menuBox ul.menuList { width: 670px;width: 710px \9; position: absolute; top: 45px; right: 0;}
#menuBox ul.menuList > li { position: relative; z-index: 100; width: 102px; float: left; padding-right: 40px;}
#menuBox ul.menuList li h3 { margin: 0 0 16px;  background: url(../images/nav_dot.png) no-repeat right center; width: 102px;}
#menuBox ul.menuList li:last-child h3{ background: none; width: 62px;}
#menuBox ul.menuList li:last-child{ width: 62px;}
#menuBox ul.menuList a { display: block;}
#menuBox ul.menuList > li > h3 > a { display: block; width: 62px; height: 29px; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat;}
#menuBox ul.menuList li .nav1 { background-image: url(../images/nav1.png);}
#menuBox ul.menuList li .nav2 { background-image: url(../images/nav2.png);}
#menuBox ul.menuList li .nav3 { background-image: url(../images/nav3.png);}
#menuBox ul.menuList li .nav4 { background-image: url(../images/nav4.png);}
#menuBox ul.menuList li .nav5 { width: 94px; background-image: url(../images/nav5.png);}
#menuBox ul.menuList li .nav6 { background-image: url(../images/nav6.png);}
#menuBox ul.menuList li .nav7 { background-image: url(../images/nav7.png);}
#menuBox ul.menuList li .nav8 { background-image: url(../images/nav8.png);}
#menuBox ul.menuList li .nav9 { background-image: url(../images/nav9.png);}
#menuBox ul.menuList li ul { display: none; position: absolute; left: 20px; width: 150px; font-size: 15px; background: url(../images/nav_h_aw.gif) center top no-repeat #33aadc; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 15px 0 10px}
#menuBox ul.menuList > ul { width: 150px; }
#menuBox ul.menuList > ul li { float: none;}
#menuBox ul.menuList li ul li { background: none;}
#menuBox ul.menuList li ul li h4 { margin: 0; font-weight: normal; }
#menuBox ul.menuList ul a { margin: 0 10px; padding: 6px 0; width: 130px; font-size: 15px; color: #fff; text-align: center; text-decoration: none; border-bottom: 1px dotted #b8dcf0}
#menuBox ul.menuList ul a { padding/**/: 8px 0 4px\9;}
#menuBox ul.menuList ul a:hover, #menuBox ul.menuList ul li.current a { color: #000;}
#menuBox ul.menuList li ul li:last-child a{ border-bottom: none}
/* 語系 */
#lang { width: 107px; height: 21px; position: absolute; top: 20px; right: 20px; font-size: 12px;}
#lang .selectBox { position: relative; margin-right: 5px; width: 107px; height: 25px; float: left; background: url(../images/aw_global.gif) no-repeat 10px center #508bd7; overflow: hidden; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
#lang .selectBox:hover {}
#lang .selectBox label { display: block; position: absolute; z-index: 1; top: 0; left: 0; margin: 0; padding-left: 5px; width: 107px; height: 25px; color: #fff; cursor: pointer; line-height: 25px; overflow: hidden; padding-left: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#lang .selectBox select { position: absolute; z-index: 2; top: 1px; left: 10px; width: 90px; height: 25px; cursor: pointer; border: 0; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; color: #508bd7; background: #fff;}
/* 搜尋 */
#searchBox{ width: 95px; overflow: hidden; float: right; height: 25px; background: url(../images/aw_search.gif) 10px center no-repeat #ffd200 ; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; margin-right: 125px; position: relative; z-index: 99; }
#searchBox .searchBtn{ width: 25px; height: 25px; float: left; background-color: transparent; border: 0; text-transform: uppercase; cursor: pointer;}
#searchBox .searchBtn:focus{ outline: 0}
#searchBox .inTxt { padding: 2px; width: 55px; height: 25px; overflow: hidden; line-height: 25px; border: none; color: #000; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; background: transparent; margin-left: 30px; float: left}
#header ::-webkit-input-placeholder { color: #fff; font-size: 12px}
#header :-moz-placeholder { color: #fff; opacity:1;font-size: 12px}
#header ::-moz-placeholder { color: #fff; opacity:1;font-size: 12px}
#header :-ms-input-placeholder { color: #fff;font-size: 12px}
/* footer */
#footer{ width: 100%; min-width: 1200px; overflow: hidden; margin: 0 auto; font-size: 14px; line-height: 24px}
#footer .wrap{ width: 1160px; margin: 0 auto; padding: 20px; display: table}  
#footer .ti{ font-size: 20px; color: #486482; text-transform: uppercase; font-style: italic; margin-bottom: 15px}
#footer a, #footer a:hover{ transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease; text-decoration: none;}
#footer .color1{ background-color: #e3edf5; margin-bottom: 1px; color: #1f2327 }
#footer .color1 div.lBox{ width: 690px; padding-right: 25px ; background: url(../images/f_line_ap.gif) repeat-y 98% 0;}
#footer .color1 div.lBox, 
#footer .color1 div.rBox{ display: table-cell; vertical-align: middle} 
#footer .color1 div.rBox{ vertical-align: top}
#footer div.rBox ul > li{ color: #2a4767; float: left; }
#footer div.rBox ul > li > ul > li, #footer div.rBox ul > li.other{float: none}
#footer div.rBox ul > li a{ color: #57718d; font-size: 13px; }
#footer div.rBox ul > li.first, #footer div.rBox ul > li.other{width: 25%}
#footer div.rBox ul > li.other{ float: left}
#footer div.rBox ul > li.other a{ color: #2a4767;}
#footer div.rBox ul > li a:hover{ color: #333}
#footer .color2{ background-color: #cadcea;}
#footer ul{ margin: 0; padding: 0; list-style: none; }
#footer ul.fInfo { text-align: center; font-size: 13px; color: #486482}
#footer ul.fInfo li{ display: inline-block; *display: inline; background: url(../images/f_aw.png) no-repeat; padding-left: 25px; margin-right: 15px}
#footer ul.fInfo li.add{ background-position: 0 5px} 
#footer ul.fInfo li.tel{ background-position: 0 -26px}
#footer ul.fInfo li.fax{ background-position: 0 -55px}
#footer ul.fInfo li.mail{ background-position: 0 -87px}
#footer p{ text-align: center; font-size: 13px; color: #444}
#footer p a{ color: #bcbcbc;}
/* 內頁banner */
#pMainWrap {position: relative;	width: 100%; min-width: 1200px;	height: 255px;}
#pBanComm {	position: absolute;top: 0;	width: 100%;	height:255px;	/*overflow: hidden;*/	z-index: 0;}
#pBanComm .imgList {	position: relative !important;}
#pBanComm .pic {	position: relative;	height:255px;	overflow: hidden;}
#pBanComm .iBanHref {	display: block;	position: absolute;	top: 0;	left: 0;	width: 100%;	height:255px;	max-height:255px;	overflow: hidden;	z-index: 100;}
#pBanComm .btnAw.prev .bx-prev {	left: 0;	background: url(../images/ban_aw_left.png) no-repeat 0 0;	display: block;	width: 26px;	height: 50px;	text-indent: -9999px;}
#pBanComm .btnAw.next .bx-next {	right: 0;	background: url(../images/ban_aw_right.png) no-repeat 0 0;	display: block;	width: 26px;	height: 50px;	text-indent: -9999px;}
#pBanComm .btnAw {	position: absolute;	top: 50%;	margin-top: -25px;	width: 25px;	height: 50px;	z-index: 1000;}
#pBanComm .btnAw.prev { left: 30px;}
#pBanComm .btnAw.next { right: 30px;}
#pBanWrap .btnAw.prev:hover a,
#pBanComm .btnAw.next:hover a {filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8;}
#pBanComm .fullBGResize {  position: absolute;  outline: none;}
#pBanComm .bx-wrapper .bx-viewport { border: none; box-shadow: none; left: 0}
#pMainWrap .decoBox{ width: 1200px; overflow: hidden; position: relative; height: 255px; margin: 0 auto}
#pMainWrap span{ display: block; position: absolute; z-index: 10 }
#pMainWrap span.decoTxt{ font-size: 28px; font-family:"Arial Black", Gadget, sans-serif; color: #fff; line-height:30px; top: 150px; left: 680px}
#pMainWrap span.decoTxt2{ font-size: 28px; font-family:"Arial Black", Gadget, sans-serif; color: #fff; line-height:30px; top: 189px; left: 770px; display: none}
#pMainWrap span.deco1{ background: url(../images/bandeco01.png) no-repeat; width: 45px; height: 55px; top: 209px; left: 619px}
#pMainWrap span.deco2{ background: url(../images/bandeco02.png) no-repeat; width: 45px; height: 55px; top: 161px; left: 725px}
#pMainWrap span.deco3{ background: url(../images/bandeco03.png) no-repeat; width: 67px; height: 51px; top: 179px; left: 870px}
#pMainWrap span.deco4{ background: url(../images/bandeco04.png) no-repeat; width: 41px; height: 32px; top: 148px; left: 989px}
#pMainWrap div.ie8{ position: absolute; z-index: 2;background: url(../images/ie8_deco.png) no-repeat; width: 411px; height: 106px; top: 148px; left: 619px}
/* 內頁框架 */
#pContWrap{ width: 100%; min-width:1200px; margin:0 auto; background: url(../images/p_cont_ap.gif) repeat;}
#pContWrap .wrap{ width: 1160px; margin: 0 auto; padding: 0 20px; overflow:hidden;}
#pContWrap .contentWrap{ width: 900px; overflow: hidden; float: right; padding: 20px 0}
.url{ text-align: right; color: #666; font-size: 14px}
.url a{ color: #666; text-decoration: none; line-height: 14px; height: 14px}
.url a:hover{ position: relative; left: 1px; top: 1px}
.url a.home{ background: url(../images/aw_home.png) no-repeat 0 3px; display: inline-block; width: 14px; }
.url a.current{ color: #33aadc;}
.url span{ font-size: 12px; font-family: Arial, Helvetica, sans-serif}
/* 左側次選項 */
#sideBar{ width: 225px; overflow: hidden; float: left}
.pageH4Ti{ width:225px; text-align: center; color: #fff; font-size: 18px; background: url(../images/page_ti.png) no-repeat; height: 36px; padding: 15px 0} 
.pageH4Ti span{ display: block; color: #8ea3ca; font-size: 15px; text-transform: uppercase; font-weight: bold}
#sideBar .leftNav{ width: 210px; overflow: hidden; margin: 0 auto}
.leftNav ul{ margin: 0; padding: 0; list-style:none; font-size: 14px}
.leftNav ul li{ text-align:center; border-bottom: 1px dotted #bcbcbc; padding: 10px 0}
.leftNav ul li a{ color: #111; text-decoration: none; display: block}
.leftNav ul li a:hover, .leftNav ul li.current a{ color: #2491bf;}
.leftNav ul li a, .leftNav ul li a:hover{ transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease;}
.leftNav.brand ul{ margin-top: 10px}
.leftNav.brand ul li{ border-bottom: none; margin-bottom: 15px; padding: 0}
.leftNav.brand ul li a{ width: 210px; height: 70px; overflow: hidden; border: 1px solid #ddd; background-color: #fff; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 70px; font-weight: bold; text-overflow: ellipsis; white-space:nowrap;}
.leftNav.brand ul li a:hover{ filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5;}
/* page */
#pageNum{ display:table; margin: 30px auto; font-family: Arial, Helvetica, sans-serif; }
#pageNum .rowTr{ display: table-row; vertical-align: middle;}
#pageNum .td{ display: table-cell; text-align: center ; vertical-align: middle;}
#pageNum .btnPrev, #pageNum .btnNext{ display: block; text-indent: -9999px; overflow: hidden;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d2d2d2; padding: 3px; margin: 0 10px; width: 28px; height: 28px}
#pageNum .btnPrev:hover, #pageNum .btnNext:hover{border: 1px solid #111;}
#pageNum a:hover{ position: relative; left: 1px; top: 1px}
#pageNum .btnPrev{background: url(../images/page_aw.png) no-repeat;}
#pageNum .btnNext{background: url(../images/page_aw.png) no-repeat; background-position: 0 -28px}
#pageNum .td.num a{ display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d2d2d2; margin: 1px 4px; text-decoration: none; color: #666; width: 28px; height: 28px; line-height: 28px}
#pageNum .td.num a.active, #pageNum .td.num a:hover{ border: 1px solid #666; background-color: #666; color:#fff}


/* ======================= 首頁 ======================= */
/* index banner */
#iMainWrap {position: relative;	width: 100%; min-width: 1200px;	height:570px;}
#iBanComm {	position: absolute;top: 0;	width: 100%;	height:545px;	/*overflow: hidden;*/	z-index: 0;}
#iBanComm .imgList {	position: relative !important;}
#iBanComm .pic {	position: relative;	height:545px;	overflow: hidden;}
#iBanComm .iBanHref {	display: block;	position: absolute;	top: 0;	left: 0;	width: 100%;	height:545px;	max-height:545px;	overflow: hidden;	z-index: 100;}
#iBanComm .btnAw.prev .bx-prev {	left: 0;	background: url(../images/ban_aw_left.png) no-repeat 0 0;	display: block;	width: 26px;	height: 50px;	text-indent: -9999px;}
#iBanComm .btnAw.next .bx-next {	right: 0;	background: url(../images/ban_aw_right.png) no-repeat 0 0;	display: block;	width: 26px;	height: 50px;	text-indent: -9999px;}
#iBanComm .btnAw {	position: absolute;	top: 50%;	margin-top: -25px;	width: 25px;	height: 50px;	z-index: 1000;}
#iBanComm .btnAw.prev { left: 30px;}
#iBanComm .btnAw.next { right: 30px;}
#iBanWrap .btnAw.prev:hover a,
#iBanComm .btnAw.next:hover a {filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8;}
#iBanComm .fullBGResize {  position: absolute;  outline: none;}
#iBanComm .bx-wrapper .bx-viewport { border: none; box-shadow: none; left: 0}
#iBanComm .bx-wrapper .bx-pager, #iBanComm .bx-wrapper .bx-controls-auto{ bottom: -25px}
#iBanComm .bx-wrapper .bx-pager.bx-default-pager a:hover, #iBanComm .bx-wrapper .bx-pager.bx-default-pager a.active{ background: #6abae2}
#iBanComm .bx-wrapper .bx-pager.bx-default-pager a { background: #dddddd;}
#iBanComm a:focus{ outline: 0;}
#iCont h4.title{ font-size: 20px; font-style: italic; text-align: center; margin: 0; padding: 0; text-transform: uppercase; font-weight: normal; color: #222; margin-top: 60px}
#iCont h4.title span{ border-bottom: 1px dotted #222;}
#iCont .main {	margin: 30px auto 60px;	width: 1200px; font-size: 14px; line-height: 22px; color: #444;}
#iCont .noData > div{ height: 250px}
#iCont .ch-grid li .obj{ font-size: 15px; color: #2ba6da; margin: 25px 0 10px; width: 100%; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; cursor: pointer;}
#iCont .ch-grid {	margin: 20px 0 0 0;	padding: 0;	list-style: none;	display: block;	text-align: center;	width: 100%; cursor: pointer;}
#iCont .ch-grid:after,
#iCont .ch-item:before {content: '';  display: table;}
#iCont .ch-grid:after {	clear: both;}
#iCont .ch-grid li { width: 220px; display: inline-block; margin: 0 38px;}
#iCont .ch-item {	width: 100%; height: 220px; border-radius: 50%;	position: relative;	box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default;-webkit-border-radius: 110px; -moz-border-radius: 110px; border-radius: 110px;	overflow:hidden}
#iCont .ch-info-wrap {position: absolute;	width: 180px;	height: 180px;border-radius: 50%;	-webkit-perspective: 800px;	-moz-perspective: 800px;	-o-perspective: 800px;	-ms-perspective: 800px;
	perspective: 800px;	-webkit-transition: all 0.4s ease-in-out;	-moz-transition: all 0.4s ease-in-out;	-o-transition: all 0.4s ease-in-out;	-ms-transition: all 0.4s ease-in-out;	transition: all 0.4s ease-in-out;	top: 20px;	left: 20px;	background: repeat url(../images/white_op90.png);	box-shadow: 0 0 0 20px rgba(255,255,255,0.5),	inset 0 0 3px rgba(115,114, 23, 0.8);}
#iCont .ch-info {	position: absolute;	width: 180px;	height: 180px;	-webkit-transition: all 0.4s ease-in-out;	-moz-transition: all 0.4s ease-in-out;	-o-transition: all 0.4s ease-in-out;	-ms-transition: all 0.4s ease-in-out;	transition: all 0.4s ease-in-out;	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;}
#iCont .ch-info > div {	display: block;	position: absolute;	width: 100%;	height: 100%;	border-radius: 50%;	background-position: center center;	-webkit-backface-visibility: hidden; 
	-moz-backface-visibility: hidden;	-o-backface-visibility: hidden;	-ms-backface-visibility: hidden;	backface-visibility: hidden;}
#iCont .ch-info .ch-info-back {	-webkit-transform: rotate3d(0,1,0,180deg);-moz-transform: rotate3d(0,1,0,180deg);	-o-transform: rotate3d(0,1,0,180deg);	-ms-transform: rotate3d(0,1,0,180deg);	transform: rotate3d(0,1,0,180deg);	background: url(../images/blue_op50.png) repeat;}
#iCont .ch-info h3 {	color: #fff;	text-transform: uppercase;	margin: 0 15px;	padding: 80px 0 0 0;	height: 180px;}
#iCont .ch-info a { display: block; text-decoration: none; color: #fff}
#iCont .ch-item:hover .ch-info-wrap {	box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8);}
#iCont .ch-item:hover .ch-info {-webkit-transform: rotate3d(0,1,0,-180deg);	-moz-transform: rotate3d(0,1,0,-180deg);	-o-transform: rotate3d(0,1,0,-180deg);-ms-transform: rotate3d(0,1,0,-180deg);	transform: rotate3d(0,1,0,-180deg);}
#iCont .ellipsis { width: 100%; height: 48px; overflow: hidden; cursor: pointer;}


/* ======================= 外銷品牌 ======================= */
.gListTi{ font-size: 18px; color: #18529e; font-weight: bold}
.gListTi span{ background: url(../images/gti_ap.png) bottom repeat-x; padding-bottom: 3px}
.gList{ margin: 15px 0}
.gList .group{ background: url(../images/g_list_ap.png) repeat-x; height: 190px; overflow: hidden; margin: 0 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; padding: 25px}
.gList .group .pic{ width: 260px; height: 155px; overflow: hidden; float: right; border: 1px solid #fff;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; -moz-box-shadow:0px 1px 8px -3px #666;	-webkit-box-shadow:0px 1px 8px -3px #666;	box-shadow:0px 1px 8px -3px #666;}
.gList .group ul.picBox{ margin: 0; padding: 0; list-style: none; }
.gList .group ul.picBox li{width: 260px; height: 155px; overflow: hidden; }
.gList .group .txt{ width: 565px; overflow: hidden; float: left}
.gList .group .txt .gName{ background: url(../images/aw_dot.png) no-repeat 0 7px; padding-left: 15px; color: #7e6500; font-size: 16px; }
.gList .group .txt ul.cont, div.cont{ margin: 8px 0; padding: 0 0 0 18px; list-style: none; height: 120px; overflow: auto; font-size: 13px; color: #444; line-height: 24px; display: block}
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #cbcbcb; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: #f1f0f0; } 


/* ======================= 代理品牌 ======================= */
.brandName{ height: 70px; overflow: hidden; font-size: 18px; color: #111; font-weight: bold}
.brandInfo{ line-height: 24px; color: #222; font-size: 14px; background: url(../images/brand_ap.png) repeat-x;}
.brandInfo .fontBox{ padding: 20px; width: 860px; overflow: hidden;}
.bndList{ width: 900px; text-align:left;  }
.bndList ul{ padding: 0; margin: 0; list-style: none;}
.bndList .hd{ height:30px; line-height:30px; padding:0 ;  position:relative; font-size: 15px }
.bndList .hd ul{ float:left;  position:absolute; left: 0; top:-1px; height:32px;   }
.bndList .hd ul li{ float:left; padding:0 15px; cursor:pointer; background:#fff; color: #222 ; margin-right: 15px}
.bndList .hd ul li.on{ height:30px;  background:#d4f0fa; color: #0c6d90}
.bndList .bd ul{ padding:15px 0;  zoom:1; width: 930px;  }
.bndList .bd li{ line-height:24px; font-size: 13px; color: #222; font-weight: bold; text-align: center }
.bndList .bd li .group{ width: 275px; overflow: hidden; float: left; margin: 0 35px 35px 0}
.bndList .bd li .group .pic{ width: 275px; height: 200px; overflow: hidden; margin-bottom: 12px}
.bndList .bd li .group .name{ font-size: 15px; color: #815800} 
.gView{ width: 900px ; overflow: hidden; position: relative; margin: 20px 0}
.gView .txtInfo{ width: 330px; overflow: hidden; position: absolute; z-index: 9; right: 0; }
.gView .name{ font-size: 18px; color: #815800; margin: 10px 0 10px 10px}
.gView .txtCont{ height: 85px; line-height: 22px; font-size: 12px; color: #333; overflow: auto; margin-left: 10px; font-weight: bold; }
.gView .btnBox{ background: url(../images/line.gif) repeat-x; padding: 18px 10px 22px; margin: 20px 0; height: 35px}
.gView .btnBox a{ display: block; text-indent: -99999px; width: 145px; height: 35px; float: left}
.gView .btnBox a.btn_contact{ background: url(../images/btn_sell.png) no-repeat; margin-right: 10px}
.gView .btnBox a.btn_buy{ background: url(../images/btn_buy.png) no-repeat;}
.gView .btnBox a:hover{ filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8;}
/* pic */
.gView .picGroup{ width: 900px; height: 420px; overflow: hidden; position: relative; zoom:1; float: left;}
.gView ul{padding: 0; margin: 0; list-style: none;}
.gView .bx-wrapper{ width: 550px;  margin: 0; border: 1px solid #f0f0f0; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;}
.gView .bx-wrapper .bx-viewport {-moz-box-shadow: none;-webkit-box-shadow: none;	box-shadow: none;	border:0;	left: 0;	background:transparent;}
.gView .bxslider li img {  width: 550px; height: 400px; border: none; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; overflow: hidden;}
.gView #bx-pager{ width: 286px; position: absolute; bottom: 0; margin: 0 0 0 0; right:25px; height: 80px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; overflow: auto; z-index: 10}
.gView #bx-pager a { width:80px; height: 60px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; float: left; margin:0 8px}
.gView #bx-pager a img {	width:80px; height: 60px; display: inline-block; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; border: 1px solid #fff}
.gView #bx-pager a:hover img,
.gView #bx-pager a.active img { border: 1px solid #8a652f}
.gView .mCSB_scrollTools.mCSB_scrollTools_horizontal  {bottom: -20px;}/*水平卷軸 藏起來*/
.gView .bx-wrapper .bx-prev {	left: 570px;	background: url(../images/btn_s_contrl.png) no-repeat 0 0;}
.gView .bx-wrapper .bx-next {	right: -350px;	background: url(../images/btn_s_contrl.png) no-repeat right top ;}
.gView .bx-wrapper .bx-prev:hover, .gView .bx-wrapper .bx-next:hover {	filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8; }
.gView .bx-wrapper .bx-controls-direction a { width: 15px; height: 60px; top: 335px; margin-top: 0; z-index: 999}
.gDetail ul{ padding: 0; margin: 0; list-style: none;}
.gDetail .hd{ height:30px; line-height:30px; padding:0 ;  position:relative; font-size: 15px }
.gDetail .hd ul{ float:left;  position:absolute; left: 0; top: 0; height:32px;   }
.gDetail .hd ul li{ float:left; padding:0 15px; cursor:pointer; background:#fff; color: #222 ; margin-right: 15px}
.gDetail .hd ul li.on{ height:30px;  background:#d4f0fa; color: #0c6d90}
.gDetail .bd ul{ padding:0;  zoom:1; width: 900px;  }
.gDetail .bd li{ line-height:24px; font-size: 13px; color: #222; font-weight: bold; background: url(../images/detail_bg_ap.png) repeat-x; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; padding: 15px; min-height: 196px}
.gDetail .fontBox{ width: 870px; overflow: hidden}
.press .listBox { width: 870px; overflow: hidden; font-size: 13px; line-height: 22px}
.press .box { width: 230px; overflow: hidden; background: url(../images/deco_show.png) no-repeat right 127px; padding-right: 20px; margin: 0 20px; float: left; text-align: center}
.press .box .pic { width: 230px; height: 160px; overflow: hidden; margin: 0 0 10px; position: relative}
.press .box .pic a{ display: block; width: 230px; height: 160px;}
.press .box .pic a.mask{ background: url(../images/v_mask.png) 0 230px no-repeat;position: absolute; transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease;}
.press .box .pic a.mask:hover{ background-position: 0 0;transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.pressVideo{ width: 640px; height: 390px; overflow: hidden; margin: 0 auto}
.pressVideo iframe{ text-align: center;  border: 0; }
.pressPic{ width: 1000px ; margin: 0 auto; overflow: hidden; text-align: center; height: 800px}
.gDetail .bd li.faq{ font-size: 14px; line-height: 27px; font-weight: normal}
div.pQuestion { cursor: pointer; padding: 0 0 10px 35px; background: url(../images/aw_q.png) no-repeat 0 0; min-height: 27px; margin: 10px 0; border-bottom: 1px dotted #ccc; color: #333; }
div.pAnswer { display: none; padding: 0 0 0 70px; background: url(../images/aw_a.png) no-repeat 35px 0; overflow:hidden; min-height: 27px; color: #18529e; font-weight: bold}



/* ======================= 服務據點 ======================= */
.location{ width: px ; overflow: hidden; margin: 24px 0 0}
.location .box{ width: 376px; overflow: hidden; float: left; margin: 0 25px; font-size: 14px; color: #666; line-height: 24px; cursor: pointer}
.location .box .pic{ width: 370px; height: 205px; padding: 1px ; background-color: #e5e5e5; border: 1px solid #fff; margin-bottom: 15px; overflow: hidden}
.location .box .pic img{}
.location .box .name{ display: block; width: 120px; float: left; color: #222; margin: 0 20px 0 10px; font-weight: bold}
.location .box a{ display: block; width: 200px; float: left; color: #18529e; padding-right: 10px; text-decoration: none; line-height: 18px; word-wrap: break-word; word-break: normal;}
.location .box a:hover{ color: #1395d3}
.location .box .txt{ clear: both; border-top: 1px dotted #ccc; padding: 10px; font-size: 13px ; margin-top: 10px}


/* ======================= 最新消息 ======================= */
.newsTop{ width: 1040px; overflow: hidden; margin: 20px auto; min-height: 380px;}
.newsTop .group{ width: 240px; overflow: hidden; background-color: #fff; float: left; margin: 0 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; cursor: pointer;}
.newsTop .group .pic{ width: 240px; height: 240px; overflow: hidden;}
.newsTop .group .txt{ padding: 10px 20px; font-size: 12px; line-height: 22px; color: #666;}
.newsTop .group a{ color: #333; text-decoration: none; font-size: 15px; font-weight: bold; display: block; margin-bottom: 5px; width:100%; text-overflow: ellipsis; overflow:hidden; white-space:nowrap;}
.newsTop .group a:hover{color: #508bd7;}
.newsTop .group .txt .ellipsis { width: 100%; height: 48px; overflow: hidden; }
.newsTop .group .date{ font-size: 12px; font-style:italic; color: #508bd7; border-top: 1px solid #eee; padding: 5px 0 0; margin-top: 5px}
.otherNews{ width: 100%; background: #fff; min-width: 1200px; margin: 15px auto; padding: 25px 0; line-height: 22px}
.otherNews h5.title{ font-size: 20px; font-style: italic; text-align: center; margin: 0; padding: 0; text-transform: uppercase; font-weight: normal; color: #666; }
.otherNews h5.title span{ border-bottom: 1px dotted #666;}
.otherNews .list{ width: 1040px; overflow: hidden; margin: 25px auto}
.otherNews .list .tabSet{ width: 1040px; overflow: hidden; }
.otherNews td{ padding: 8px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: middle ; border-bottom:1px dotted #ddd}
.otherNews td.date{ width: 10%; font-size: 12px; font-style:italic; color: #508bd7; text-align: center;}
.otherNews td a{ color: #666; text-decoration: none; font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; width: 90%; text-overflow: ellipsis; overflow:hidden; white-space:nowrap;}
.otherNews tr:hover{ background-color: #f1f8fd}
.otherNews tr:hover a{ color: #333}
.newsTi{ width: 1040px; overflow: hidden; margin: 20px auto 0;}
.newsTi .left{ width: 885px; overflow: hidden; float: left; }
.newsTi .date{ font-size: 13px; font-style:italic; color: #508bd7;}
.newsTi .obj{ font-size: 18px; color: #222; margin: 10px 0}
.newsTi a.back{ display: block; text-indent: -9999px; width: 145px; height: 35px; float: right; background: url(../images/n_back.png) no-repeat;}
.newsTi a.back:hover{transition: all .3s ease; -o-transition: all .3s ease;-moz-transition: all .3s ease; -webkit-transition: all .3s ease; filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8;}
.otherNews.fontBold{ font-weight: bold}
.otherNews .fontBox{ width: 1040px; padding: 0; margin: 0 auto}
/* ======================= 其他 ======================= */
.floatL{ float: left}
.mgT20{ margin-top: 20px}



/* ======================= 關於三紡 ======================= */
.contentWrap#about{ position: relative; line-height: 2em; background: url(../images/about_bg.png) no-repeat center 750px; font-size: 14px;}
#about .title{ margin-bottom: 30px;}
#about .top > div { position: relative}
#about .top .txt1{ margin: 40px 0 70px; padding: 0 300px 0 0; }
#about .top .txt2{ margin: 20px 0; padding-left: 310px; }
#about .top .txt3{ margin: 50px 0; padding: 0 300px 0 0;}
#about .top .img1{ position: absolute; right:0; top:-50px; width: 271px; height: 178px; background: url(../images/about_bg1.png) no-repeat; text-align: right}
#about .top .img2{ position: absolute; left:0; top:-50px; width: 280px; padding-top: 20px; height: 251px; background: url(../images/about_bg2.png) no-repeat; text-align: right}
#about .top .img3{ position: absolute; right:30px; top:-50px; padding-top: 30px; width: 251px; height: 221px; background: url(../images/about_bg3.png) no-repeat; text-align: right}
#about .ti{ width: 100%; height: 30px; padding-bottom: 5px; border-bottom: 2px solid #efefef; margin: 20px 0}
#about .mid{ margin: 30px 0 60px;}
#about .mid table{ width:100%}
#about .mid th{ text-align: left}
#about .mid .name{ font-size: 1.2em; width: 25%}
#about .mid .name2{ width: 40px}
#about .mid .name3{ width: 100px}
#about .mid .name4{ width: 70px}
#about .bottom{ width: 100%; margin-bottom: 50px;}
#about .bottom a:hover{ opacity: 0.8 }
#about .bottom .leftBox{ float: left; width: 30%}
#about .bottom .leftBox a{ display: block; width: 100%; margin: 30px 0 0 0}
#about .bottom .rightBox{ float: right; width: 65%}
#about .bottom .rightBox img.logo{ display: inline-block; margin: 10px;}
#about .bottom .rightBox img.logo:nth-child(4){ margin-right: 0}
#service {line-height: 2em;}
#service .title{ background: url(../images/ti_icon.png) no-repeat; color: #1a5aaf; line-height: 40px; font-size: 1.3em; font-weight: bold; padding-left: 20px;  } 
#service .list{ width: 736px; height: 171px; background: url(../images/service_bg.png); margin: 20px auto 30px;}
#service .list ul{ float: left; margin: 40px}
#service .list ul.two{ margin: 20px 30px}
#service .list ul li{ list-style-image: url(../images/li.png); font-size: 1.15em; line-height: 2.2em;}
#service .txt1{ margin: 30px 0 70px 0; text-align: center; line-height: 2.2em; font-size: 15px;}
#service .flowTi{ width: 100%; text-align: centerl; color: #545454; font-weight: bold; font-size: 1.2em; text-align: center; margin: 20px 0;  }
#service .flowTi img{vertical-align: middle}
#service .flowImg { width: 100%; height: 300px; overflow: hidden; text-align: center}
#service .flowImg .icon{ display: inline-block; width: 80px; height: 80px; margin-bottom: 50px; background: #fff;-moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; text-align: center; line-height: 80px; vertical-align: middle;  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;}
#service .flowImg .icon img{ padding-top: 15px;}
#service .flowImg span.txt {display: inline-block; margin: 0 10px; text-align: center; font-size: 1.5em; color: #aaa; height: 80px;
vertical-align: middle;}
#service .flowImg span.aw{ display: inline-block; background: url(../images/service_aw.png) no-repeat left 5px; width: 15px; height: 12px; margin: 0 10px; height: 80px; vertical-align: middle;}
#service .flowImg span.txt.small{ font-size: 1.2em;}


/* ======================= 聯絡我們 ======================= */
#contact #sideBar{background: url(../images/contact_aside_bg.png) 6px 50px no-repeat; height: 600px}
#contact span.require{ color:#1956a7; font-weight: bold; padding: 0 3px; font-size: 1.2em }
#contact table.form{ width: 100%; margin: 0 auto; padding: 0; border: 0; border-spacing: 0; border-collapse: collapse;}
#contact table.form th{ padding: 5px 5px 5px 10px; width: 120px; text-align: left; font-size: 13px; color: #666 }
#contact table.form td{ padding: 5px;}
#contact table.form input.inText { border: 1px solid #CCC; padding: 2px; height: 30px; box-sizing: border-box}
#contact table.form .select{ position: relative; float: left; margin-right: 5px; border: 1px solid #CCC; padding: 2px; height: 30px; box-sizing: border-box; background: #FFF}
#contact table.form .select label { display: block; float: left; width: 71px; height: 30px; line-height: 25px; padding-left: 5px; background: url(../images/contact_aw.png) 62px 10px no-repeat; color: #333}
#contact table.form .select select{ opacity: 0; position: absolute; top: 0; left: 0; width: 80px; height: 30px; line-height: 30px; font-family: 'Century Gothic'; }
#contact table.form textarea{ height: 65px; border: 1px solid #CCC;}
#contact table.form .btnWrap{ text-align: right; padding: 0}
#contact table.form .btnWrap input.reset,
#contact table.form .btnWrap input.submit{ width: 135px; height: 35px; margin-right: 5px; background: url(../images/icon_reset.png) 18px center no-repeat #51aded ; border: 0; line-height: 33px; padding-left: 25px; border-bottom: 4px solid #239ad8; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-sizing: border-box; color: #FFF; text-align: center; font-size: 1.1em;}
#contact table.form .btnWrap input.submit{ background: url(../images/icon_submit.png) 18px center no-repeat #18529e; border-bottom: 4px solid #0a3875;}
#contact table.form .btnWrap input.reset:hover,
#contact table.form .btnWrap input.submit:hover{ border-bottom: 1px solid #239ad8;}
#contact .w100{ width: 100%;}
#contact .w60{ width: 60%;}
#contact .w50{ width: 50%;}
#contact .w40{ width: 40%;}
#contact .w10{ width: 10%;}
#contact .w15{ width: 15%;}
#contact .w25{ width: 25%;}
#contact .w45{ width: 45%;}
#contact .w55{ float: left; width: 85px; margin-right: 5px;}
#contact .codeImg { float: left; margin-top: 5px;}
#contact .mapBox{ width: 100%; border-top: 1px solid #CCC; padding-top: 30px; margin: 50px 0;}
#contact .mapBox iframe{ width: 65%; height: 200px; border: none}
#contact .mapBox .info{ float: right; width: 33%; height: 200px; line-height: 2em; margin: 20px 0; color: #000}
#contact .mapBox .info .ti{ font-size: 1.2em; font-weight: bold}

/* ======================= 分享 ======================= */
.shareBox{ overflow: hidden; width:100%; margin: 7px 0}
div.shareLine{ width: 84px; float: left}
div.shareFb{ width: 122px; margin: 0 5px; float: left}
div.shareGoogle{ width: 57px; float: left}
div.shareTwitter{ width: 50px; float: left}
/*