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

/* Google Font */
@import url(https://fonts.googleapis.com/css?family=Amiri);
@import url(https://fonts.googleapis.com/css?family=Oxygen);

/* Default Set. ---------------------------------------------------------------- */
body { margin: 0; padding: 0; color: #666; font-size: 13px; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, PMingLiU; }
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: '微軟正黑體', Microsoft JhengHei,Verdana, PMingLiU;}
textarea { resize: none;}
a { text-decoration: none;}
.clearBoth { height: 0; font-size: 0; overflow: hidden; line-height: 0; clear: both;}
.displayNone { display: none;}

/* top */
.scrollToTop { width: 30px; height: 36px; position: fixed; bottom: 0; right: 40px; display: none; background: url(../images/aw.png) center center #666 no-repeat; padding: 5px; text-indent: 999px; z-index: 99999999;}
.scrollToTop:hover { background-color: #999;}

/* header */
header#header{ width: 100%; min-width: 1000px; margin: 0 auto; position: fixed; top: 0; height: 115px; background: url(../images/topbg.png) repeat-x; z-index: 999; font-family: Georgia, '微軟正黑體';}
h1#logo { margin: 15px 0 0 50px; padding: 0; float: left; width: 220px; height: 75px; overflow: hidden;}
#topRight { float: right; width: 660px; overflow: hidden; margin-right: 30px;}
#tool { width: 330px; overflow: hidden; height: 25px; float: right;}
#tool #search{ width: 22px; height: 25px; overflow: hidden; float: right; padding-left: 7px;}
#tool #search.sbg{ background: url(../images/search.gif) 0 0 no-repeat;}
#tool #search .sBtn{ width: 22px; height: 25px; overflow: hidden; float: left; background: url(../images/searchbtn.gif) 0 0 no-repeat; cursor: pointer;}
#tool #search .sBox{ width: 165px; height: 25px; float: right;}
#tool #search .inBox { padding: 2px; width: 180px; height: 20px; overflow: hidden; line-height: 20px; border: none; color: #000; outline: none;}
#tool .langBox { position: relative; width: 108px; height: 25px; background: url(../images/lang.gif) 0 0 no-repeat; float: right;}
#tool .langBox .langSelect { position: absolute; top: 0; left: 2px; width: 102px; height: 25px; opacity: 0; z-index: 5; cursor: pointer; line-height: 40px;}
#tool .langBox .lang { position: absolute; top: 0; left: 0px; padding: 3px 25px 5px 10px; width: 53px; height: 17px; overflow: hidden; color: #fff; cursor: pointer; z-index: 0; font-style: italic;}
nav#menu { width: 660px; overflow: hidden; padding-top: 25px;}
nav#menu ul, nav#menu li { margin: 0; padding: 0;}
nav#menu li { float: left; list-style: none; width: 110px; height: 50px; overflow: hidden; font-size: 16px; font-style: italic; line-height: 30px; text-align: center;}
nav#menu li a { color: #000; width: 110px; height: 50px; overflow: hidden; display: block; background-position: center top;}
nav#menu li a:hover { color: #0173c0; background: url(../images/mhover.gif) center bottom no-repeat;}

/* footer */
footer#footer { width: 100%; min-width: 1000px; background: #333; font-size: 12px; height: 150px; margin-top: 50px; color: #fff; text-align: center; font-family: Arial, '微軟正黑體';}
footer#footer .fotinfo { line-height: 22px; height: 22px; width: 410px; overflow: hidden; padding: 60px 0; margin: 0 auto;}
footer#footer a { color: #888;}
footer#footer a:hover { color: #fff;}
footer#footer a.fb, footer#footer a.ct { display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -99px; vertical-align: top;}
footer#footer a.fb { background: url(../images/fbicon.gif) 0 0 no-repeat;}
footer#footer a.ct { background: url(../images/cticon.gif) 0 0 no-repeat;}
footer#footer a.fb:hover, footer#footer a.ct:hover { background-position: 0 -22px;}

/* 架構 */
.pWrap { width: 1000px; margin: 0 auto; overflow: hidden;}
.pWrap #header h1#logo { margin-left: 15px;}
.pWrap #header #topRight { margin-right: 10px;}
.pWrap #gdLine{ margin-left: 0;}
#content { width: 100%; min-width: 1000px; padding-top: 120px;}
#gdLine { font-size: 12px; color: #666; font-family: Arial, '微軟正黑體';  margin-left: 20px;}
#gdLine a { color: #666;}
#gdLine a:hover { color: #1155a4;}

/* goods */
#goods{ position: relative; width: 100%; min-width: 1000px;}
/* 1117 新增位置對應為relative */
#pageLeft, #pageAllLeft{ width: 268px; padding: 13px 0 0 1px; float: left; margin-top: 5px; font-family: Georgia; background: url(../images/tibk.png) 0 0 no-repeat;}
#pageLeft { width: 198px; }	/* 1117.1126 修改寬度自228→248→268 */
/* 1117 修改為相對位置左上角 */
#pageLeft {
	position: absolute;
	top: 0;
	left: 0;
}
#pList .m1 a{ padding: 10px 0 10px 28px; width: 170px; overflow: hidden; display: block; color: #666; font-size: 13px; font-family: 'Arial', 'Microsoft JhengHei', Sans-serif; } /* 1117 字型修改為黑體 */
#pList .m1 a:hover, #pList .m1.current a{ color: #000;}
#pList .m2 a{ padding: 7px 0 7px 38px; width: 160px; overflow: hidden; display: block; color: #000; font-size: 12px; font-family: 'Arial', 'Microsoft JhengHei', Sans-serif;} /* 1207 字型修改為黑體 */
#pList .m2 a:hover span, #pList .m2.current a span{ text-decoration: underline;}
#pList .m2 a:hover, #pList .m2.current a{ color: #0173c0;}
#pageRight{ width: 790px; float: right; min-height: 600px; margin-top: 19px; overflow: hidden;}
.goodBox{ width: 235px; overflow: hidden; float: left; margin: 0 0 20px 25px;}
.goodBox .pic { width: 230px; height: 340px; overflow: hidden; margin-bottom: 10px; position: relative;}
.goodBox .pic .title{ position: absolute; z-index: 1; bottom: 0; height: 42px; width: 235px; background: url(../images/titlebk.png) repeat; font-size: 16px; font-family: 'Georgia', 'Microsoft JhengHei', Sans-serif; line-height: 42px; text-indent: 18px; color: #fff; } /* 1117 中文字型修改為黑體; 1221 字型大小修改為16px */
.m3 ul{ margin: 0; padding: 0; width: 225px; font-size: 12px; font-family: Arial;}
.m3 li{ float: left; width: 75px; margin: 0; padding: 0; list-style: none;}
.m3 li a{ color: #666; background: url(../images/m3icon.gif) 5px 7px no-repeat; display: block; padding-left: 15px; margin: 3px 0; font-family: 'Arial', 'Microsoft JhengHei', Sans-serif; } /* 1117 字型修改為黑體 */
.m3 li a:hover{ color: #0173c0;}
/* goods_list */
#goodsList{ width: 100%; position: relative; margin: 0 auto; min-height: 620px;}
#pageAllLeft{ position: absolute; left: -269px; top: 0; z-index: 2; padding: 9px 0 0 1px;} /* 1117.1126 修改位置left自-229→-249→-269; 1221 修改上padding自13→9 */
#pageAllLeft #oppdti{ background: #eaeaea url(../images/oppdti.png) 0 0 no-repeat; width: 268px; height: 45px; overflow: hidden; cursor: pointer;}	/* 1117.1126 修改寬度自228→248→268 */
#pageAllLeft #cxpdti{ background: url(../images/cxpdti.png) 0 0 no-repeat; width: 51px; height: 67px; overflow: hidden; position: absolute; left: 269px; top: -1px; z-index: 2; cursor: pointer;} /* 1117.1126 修改位置left自229→249→269; 1221 修改位置top自3→-1 */
#pageAllLeft #pList #pListBk{ background: url(../images/plbk.png) repeat-y; padding-bottom: 50px;}
#pageAllLeft #pList #pListBot{  background: url(../images/plbot.png) 0 0 no-repeat; background-size: 100% 4px; width: 268px; height: 4px; overflow: hidden;}
#pageAll{ margin-left: 3%; position: relative; width: 97%; min-width: 1000px; overflow: hidden;}
#pageAll2{ margin: 0 auto; position: relative; width: 1000px; min-width: 1000px; overflow: hidden;}
a.goodListBox{ width: 200px; overflow: hidden; display: block; margin: 14px 10px; }
a.goodListBox .pic{ width: 200px; height: 150px; overflow: hidden; position: relative;}
a.goodListBox .pic .picImg{ width: 200px; height: 300px; top: 0px; left: 0; z-index: 1; position: absolute;}
/* 1221 新增 */
a.goodListBox .pic .picImg img {
	display: block;
}
a.goodListBox:hover .pic .picImg{ top: -150px;}
a.goodListBox .gltitle, a.goodListBox .glno{ text-align: center; overflow: hidden; margin: 5px 0 0; line-height: 20px; font-family: Arial, "微軟正黑體";}
a.goodListBox .gltitle{ color: #444;}
a.goodListBox .glno{ color: #888;}
a.goodListBox:hover .gltitle{ color: #0173c0;}
a.goodListBox:hover .glno{ color: #000;}

/* goods_view */
#share{ background: url(../images/sharebtn.png) 0 0 no-repeat; width: 52px; height: 36px; overflow: hidden; position: absolute; left: 0px; top: 63px; z-index: 3; cursor: pointer;}
#shareList{ width: 24px; position: absolute; left: 12px; top: 100px; z-index: 5; height: 0px; overflow: hidden;}
#shareList ul, #shareList li{ margin: 0; padding: 0; list-style: none; text-indent: -999px;}
#shareList li{ margin-bottom: 8px;}
#shareList a{ display: block; width: 24px; height: 24px; overflow: hidden;}
a.sM{ background: url(../images/s_e.png) 0 0 no-repeat;}
a.sF{ background: url(../images/s_f.png) 0 0 no-repeat;}
a.sT{ background: url(../images/s_t.png) 0 0 no-repeat;}
a.sG{ background: url(../images/s_g.png) 0 0 no-repeat;}
a.sP{ background: url(../images/s_p.png) 0 0 no-repeat;}
#shareList a:hover{ background-position: -24px 0;}
#pVleft{ float: left; width: 600px; overflow: hidden; margin: 18px 0 0 25px;} /* 1117 修改寬度自480→600,左間距自60→25 */
#bigAlbum{ display: block; width: 600px; height: 450px; overflow: hidden; } /* 1117 修改尺寸自480*360→600*450 */
#bigAlbum img { position: absolute; width: 600px; height: 450px; }
#smallPic { padding: 0; width: 600px; position: relative; overflow: hidden; margin-top: 10px;} /* 1119 修改左右padding自20→0、寬度自560→600 */
#smallPic .tempWrap { margin: 15px auto 0; } /* 1117 新增水平置中　*/
#smallPic ul, #brands ul, #vpd ul{ margin: 0; padding: 0; list-style: none;}
#smallPic ul li { width: 91.66667px; height: 68.75px; overflow: hidden; float: left; margin: 0 10px 0 0;} /* 1119 修改寬度以符合每排6個 */
/* 1119 新增 */
#smallPic ul li:last-child {
	margin-right: 0;
}
#smallPic ul img { cursor: pointer;}
#smallPic .btnNext, #smallPic .btnPrev, #brands .btnNext, #brands .btnPrev, #vpd .btnNext, #vpd .btnPrev{ width: 15px; height: 35px; display: block; position: absolute; z-index: 5; top: 31.875px;}
#smallPic .btnPrev, #brands .btnPrev, #vpd .btnPrev{ left: 0;}
#smallPic .btnNext, #brands .btnNext, #vpd .btnNext{ left: auto; right: 0;}
#smallPic:hover .btnPrev, #brands:hover .btnPrev, #vpd:hover .btnPrev{ background: url(../images/pprev.png) 0 0 no-repeat; left: 0;} /* 1126 更改圖片為去背圖(gif→png) */
#smallPic:hover .btnNext, #brands:hover .btnNext, #vpd:hover .btnNext{ background: url(../images/pnext.png) 0 0 no-repeat; right: 0;} /* 1126 更改圖片為去背圖(gif→png) */
#pVright{ float: right; width: 300px; overflow: hidden; margin: 18px 0 0;}
#pdNo{ color: #0173c0; font-family: 'Amiri', 'Times New Roman', Serif; font-size: 26px; height: 35px; line-height: 35px; } /* 1123 修改字型, 1126修改顏色自267ec4→0173c0 */
#pdName{ color: #000; font-family: 'Oxygen', 'Microsoft JhengHei', Sans-serif; font-size: 14px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid #000;} /* 1123 修改字型 */
/* 1117 新增 */
#fadeInOut > div {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}
#fadeInOut > div:last-child {
	border: none;
}
#fadeInOut .infoTi, #fadeInOut .infoTi2 { cursor: pointer; padding: 10px 0; font-size: 16px; margin: 5px 0 0; background: url(../images/desc.png) #fff 300px 10px no-repeat; /* 1117刪除 border-bottom: 1px solid #fff; */width: 300px; color: #000; font-family: Georgia;}
#fadeInOut .infoDesc { display: block; width: 300px; font-family: Arial , '微軟正黑體'; line-height: 24px; color: #000;}
/* 1119 新增 */
.infoDesc2 {
	line-height: 24px;
}
#fadeInOut .infoDesc sup,
#fadeInOut .infoDesc2 sup {
	vertical-align: top; position: relative; top: -3px;
}
#brands { margin-top: 68px; padding: 0 0; width: 320px; background: none; position: relative; overflow: hidden;} /* 11198 修改寬度至100%、左右padding自23→0 */
/* 1117 新增 */
#brands .tempWrap {
	margin: 0 auto 0;
}
#brands ul li { width: 62.4px; height: 54px; overflow: hidden; float: left; margin: 0 2px 0 0;} /* 1117 修改寬度自44→66; 1119修改寬度以符合每排5個 */
#brands ul li span{ display: block; width: 64px; height: 64px; margin: 0;} /* 1117 修改尺寸自32*32→64*64、左右間距6→1 */
#brands ul img { cursor: pointer;}
#brands .btnNext, #brands .btnPrev{ top: 9.5px;}
.h20{ height: 20px;}
#pVinfo{ width: 1000px; margin: 60px auto 0;} /* 1119 修改上間距自0→60 */
/* 1117 新增(以下兩項) */
#pVinfo h3 {
	margin-bottom: 0;
}
#pVinfo h3 span,
#vpd h3 span {
	display: inline-block;
	position: relative;
	height: 30px;
	line-height: 30px;
	font-size: 24px;
	font-family: 'Times New Roman', Serif;
	color: #222;
	/*border-bottom: 1px solid #ccc;*/
	padding-right: 15px;
}
/*#pVinfo h3 span:after,
#vpd h3 span:after {
	content: '';
	display: block;
	position: absolute;
	width: 10px;
	height: 1px;
	background: #ccc;
	transform: rotate(45deg);
	bottom: 2px;
	right: -2px;
}*/
#pageAll h3 { font-family: Georgia; font-weight: normal; border-bottom: 1px solid #ddd; padding-bottom: 10px; color: #000; font-size: 16px; margin: 10px 0 0;}
#pageAll h3 span{ border-bottom: 3px solid #666; padding: 0 8px 8px;}
.editArea{ margin: 10px 0 20px; width: 1000px; overflow: hidden;}
.downBox{ padding: 15px 0;}
a.down{ width: 950px; background: url(../images/d01.gif) 970px 10px #f2f2f2 no-repeat; color: #000; padding: 8px 40px 8px 10px; display: block; margin-bottom: 2px;}
a.down:hover{  background: url(../images/d02.gif) 970px 10px #dbeffc no-repeat;}
#vpd{ position: relative; width: 1000px; margin: 0 auto; overflow: hidden;}
#vpd .bd{ margin: 20px auto; width: 900px; padding: 0 25px; overflow: hidden;}
#vpd .bd ul li{ width: 200px; margin: 0 15px 0 10px; padding: 0; float: left;}
#vpd .hd{ height: 8px; overflow: hidden; position: absolute; z-index: 999; left: 160px; top: 18px;}
#vpd .hd ul{ overflow: hidden; margin: 0; padding: 0;}
#vpd .hd ul li{ float: left; width: 8px; height: 8px; overflow: hidden; margin-right: 4px; text-indent: -999px; cursor: pointer; background: url(../images/bu.png) 0 -8px no-repeat; }
#vpd .hd ul li.on{ background-position: 0 0;}
#vpd .btnNext, #vpd .btnPrev{ top:  50%;}

/* pageIcon*/
#pageIcon{ height: 50px; width: 10px; position: fixed; z-index: 50; right: 10px; top: 50%; margin-top: -25px;}
#pageIcon ul{ margin: 0; padding: 0;}
#pageIcon li{ padding: 0; list-style: none; margin: 0; position: relative; height: 15px;}
#pageIcon .dot{ position: absolute; right: 0; top: 4px; width: 8px; height: 8px; overflow: hidden; cursor: pointer; background: url(../images/pgicon.png) -8px 0 no-repeat; display: block;}
#pageIcon .dot:hover{ background-position: 0 0;}
#pageIcon .label{ position: absolute; right: 13px; text-align: right; width: 100px; font-size: 12px; color: #999; display: none;}

/* page */
#page{ text-align: center; width: 100%; margin: 10px auto;}
a.btn{ border-bottom: 2px solid #545453; padding: 2px 0; color: #545453; font-family: Georgia; font-size: 13px;}
a.btn:hover { border-bottom: 2px solid #1155a4; color: #1155a4;}

/* about */
#about, #brand, #portfolio{ width: 750px; overflow: hidden; float: right;}
#about h2, #brand h2, #portfolio h2, #contact h2{ font-family: "Times New Roman"; font-size: 24px; color: #000; margin: 10px 0 18px 0; font-weight: normal; width: 350px; background: url(../images/titieline.gif) 0 15px repeat-x;}
#about h2 span, #brand h2 span, #portfolio h2 span, #contact h2 span{ background: #fff; padding-right: 10px; font-family: '微軟正黑體';}
#about .item{ width: 700px; height: 68px; position: relative; margin-left: 45px; border-bottom: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; padding: 20px 0;}
#about .item .year{ background: url(../images/yearbk.png) 0 0 no-repeat; width: 68px; height: 68px; overflow: hidden; line-height: 68px; text-align: center; color: #444; font-family: "Times New Roman"; font-size: 20px; position: absolute; z-index: 3; left: -34px;}
#about .item .event{ padding-left: 60px; line-height: 68px; font-family: "微軟正黑體", "Microsoft JhengHei"; font-size: 15px; color: #333;}
#about .item .event span{ line-height: 20px; padding: 14px 0; display: block;}
#about .item.one{ padding-top: 0;}
#about .item.last{ border-bottom: none; padding-bottom: 0;}
/*#about .item:hover { background: #f6f6f6; border-color: #f6f6f6;}
#about .item:hover .year{ background: url(../images/yearhover.png) 0 0 no-repeat; color: #fff; transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease;}*/
#about h3{ padding: 3px 5px; width: 65px; font-family: "微軟正黑體", "Microsoft JhengHei"; font-size: 15px; color: #000; margin: 10px 5px 10px 0; font-weight: normal; border-bottom: 2px solid #555;}
#about p{ color: #222; line-height: 24px; font-size: 14px; width: 710px;}
#about p.ph01{ background: url(../images/ph01.jpg) 0 0 no-repeat; padding-left: 320px; width: 390px;}
#about .ph02{ background: url(../images/ph02.jpg) top right no-repeat; padding: 30px 240px 20px 0; width: 470px;}
#about .ph02 p{ width: 470px;}
#about .abouTi{ font-weight: bold; margin-top: 15px; }
#about .cont{ line-height: 1.8em; font-size: 13px;}
#about .cont p{margin: 10px 0 20px 0}
#brand h3 { font-family: "Times New Roman"; font-weight: normal; border-bottom: 1px solid #ddd; padding-bottom: 10px; color: #444; font-size: 18px; margin: 15px 0 0 5px;}
#brand h3 span{ border-bottom: 3px solid #666; padding: 0 8px 8px;}
.listFrame { clear: both; width: 742px; overflow: hidden; margin: 10px 0 0 5px;}
.listFrame .mask{ width: 752px; overflow: hidden; position: relative;}
.listFrame .list { float: left; display: inline-block; width: 235px; margin: 10px 0 15px 15px;}
.listFrame .list .pic{ width: 40px;	height: 40px;	overflow: hidden; float: left;}
.listFrame .list .txt{ width: 185px; overflow: hidden; color: #444; padding: 10px 0 10px 10px; font-family: Georgia; font-size: 15px;}
.listFrame .list a.brandItem{ text-decoration: none; width: 235px; height: 60px; position: relative; overflow: hidden;}
.listFrame .list .aw{ width: 235px; height: 0; background: url(../images/aw.gif) bottom center no-repeat; position: absolute; z-index: 2; bottom: -11px;}
.listFrame .brandView { height: 0; width: 742px; overflow: hidden; margin-top: 10px; font-family: Arial, "微軟正黑體"; position: absolute; left: 0;}
.listFrame .brandCont{ width: 735px; height: 220px; border: 1px solid #d9d9d9; padding-right: 5px;}
.listFrame .close{ cursor: pointer; font-family:"Times New Roman"; font-size: 40px; margin: 0 6px 0 0; width: 18px; overflow: hidden; float: right; line-height: 35px;}
.listFrame .cont{ padding: 0 10px; margin-left: 10px; width: 710px; height: 160px; overflow: auto; font-size: 14px; line-height: 24px;}
a.moreBtn{ color: #0173c0; width: 720px; display: block; text-align: right; font-size: 13px; font-family: Georgia;}
a.moreBtn:hover{ color: #000;}
div.split {	float: left; height: 0;	line-height: 0;	margin: 0;	padding: 0;	position: relative;	width: 100%;	z-index: 0;}

/* portfolio */
.selectBox{ font-family: "微軟正黑體","Times New Roman"; font-size: 15px; color: #000;}
.selectBox a{ margin: 0 15px; color: #666;}
.selectBox a:hover, .selectBox a.select{ color: #000; border-bottom: 1px solid #000; border-bottom: 1px solid #000;}
#portfolio .listFrame { margin: 10px 5px 0 0;}
#portfolio .listFrame .list { width: 230px; margin: 10px 0 15px 25px ;}
#portfolio .listFrame .list:nth-child(4n+1){ margin: 10px 0 15px;}
#portfolio .listFrame .list a.poItem{ text-decoration: none; width: 230px; height: 155px; position: relative; overflow: hidden;}
#portfolio .listFrame .list .aw{ bottom: -21px;}
#portfolio .listFrame .poView { height: 0; width: 742px; overflow: hidden; margin-top: 20px; font-family: Arial, "微軟正黑體"; left: 0; position: absolute;}
#portfolio .poCont{ width: 735px; height: 730px; border: 1px solid #d9d9d9; padding-right: 5px; position: absolute;}
#portfolio .poCont .cont{ padding: 0; margin: 0 0 0 30px; width: 700px; height: 670px; overflow: auto; font-size: 14px; line-height: 24px;}
#portfolio .listFrame .list .poPic{ width: 230px; height: 155px; overflow: hidden;}
#portfolio .listFrame .list .poPic img{ position: absolute;}
#portfolio .listFrame .list .poPic span{ background: url(../images/titlebk.png) repeat; width: 230px; position: absolute; z-index: 5; text-align: center; width: 230px; height: 38px; overflow: hidden; display: block; bottom: 0; color: #fff; line-height: 35px; font-size: 15px;}
/* project */
#pjTi{ width: 750px; overflow: hidden; background: url(../images/pjti.gif) 0 0 no-repeat; height: 35px; margin: 25px 0 10px; color: #000; line-height: 35px; font-size: 15px;}
a.pjItem{}
.wName{ width: 215px; padding-left: 25px; overflow: hidden; float: left;}
.wCpn{ width: 210px; overflow: hidden; float: left; margin: 0 10px;}
.wAdd{ width: 280px; overflow: hidden; float: left;}
.wAdd span{ padding-right: 15px;}
#portfolio .listFrame .pjlist { width: 750px; margin: 10px 0 15px; padding: 10px 0; overflow: hidden; border-bottom: 1px solid #ddd;}
#portfolio .listFrame .pjlist a.pjItem{ width: 750px; height: 50px; color: #000; font-size: 13px;}
#portfolio .listFrame .pjlist a.pjItem.hover{ color: #0173c0;}
#portfolio .listFrame .pjlist a.pjItem.hover span{ background-position: right bottom;}

/* news */
#news, #newsV{ width: 770px; overflow: hidden; margin-left: 20px; font-family: "Times New Roman",  "微軟正黑體";}
#news .newsBox{ border: 1px solid #d9d9d9; height: 195px; overflow: hidden; width: 765px; margin-bottom: 25px;}
#news .newsBox .nPic{ width: 190px; height: 195px; overflow: hidden; float: left;}
#news .newsBox .nTxt{ width: 540px; overflow: hidden; float: right; padding: 10px 15px 0;}
#news .newsBox .nTxt a.moreBtn{ width: 540px;}
#news .newsBox .nTxt .nDate{ font-size: 15px; color: #999; line-height: 30px;}
#news .newsBox .nTxt .nTi{ font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid #d9d9d9;}
#news .newsBox .nTxt .nTi a{ color: #000;}
#news .newsBox .nTxt .nTi a:hover{ color: #0173c0;}
#news .newsBox .nTxt .nDesc{ margin: 10px 0; line-height: 25px; height: 80px;}
#newsV .Date{ position: relative; color: #000; font-size: 15px; min-height: 30px; line-height: 30px; padding-left: 80px;}
#newsV .Date .DateTi { position: absolute; width: 60px; top: 0; left: 0; }
#newsV .Date .DateTi:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 12px;
  background: #999;
  top: 9px;
  right: 0;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}
#newsV .Date span{ color: #0173c0;}
#newsV .Ti{ position: relative; color: #000; font-size: 15px; padding: 12px 0 12px 80px; border-bottom: 1px solid #d9d9d9;}
#newsV .Ti .TiTi { position: absolute; width: 60px; line-height: 20px; top: 12px; left: 0; }
#newsV .Ti .TiTi:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 12px;
  background: #999;
  top: 4px;
  right: 0;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}
#newsV .Desc{ margin-top: 15px;}

/* contact */
#contact,#catalog  { width: 770px; overflow: hidden; margin-left: 20px; font-family: "Times New Roman",  "微軟正黑體";}
#contact .mapCont { width: 740px; height: 165px; overflow: hidden; margin-bottom: 15px;}
#contact .txtCont table { width: 740px; overflow: hidden; margin-bottom: 5px;}
#contact .txtCont th { color: #000; font-size: 15px; padding: 5px 0 10px; text-align: left;}
#contact .txtCont td { padding: 8px 0; color: #333; font-size: 15px;}
#contact .txtCont td a { color: #0173c0;}
#contact .txtCont td a:hover { color: #fa9e25;}
.formTxt { color: #333; background-color: #f7f7f7; border-bottom: 1px solid #ddd; font-size: 15px; padding: 12px 20px 8px;}
.formCont { font-size: 15px; margin-top: 25px; margin: 30px 0 0 35px;}
.formCont th { padding: 10px; font-weight: normal; color: #000; vertical-align: top;}
.formCont th span { color: #0173c0;}
.formCont td { padding: 10px;}
#storeTi{ width: 750px; overflow: hidden; background: url(../images/pjti.gif) 0 0 no-repeat; margin: 25px 0 10px; color: #000; font-size: 15px; border-collapse: collapse; border-spacing: 0;}
#storeTi th { padding: 9px 0 15px;}
#storeTi th.storeName{ width: 175px; overflow: hidden; text-align: left; padding-left: 20px;}
#storeTi th.storePhone{ width: 90px; overflow: hidden;}
#storeTi th.storeAddr{ width: 270px; overflow: hidden;}
#storeTi th.storeTxt{ width: 188px; overflow: hidden; text-align: left;}
#storeTi td { font-size: 13px; padding: 20px 0 15px; line-height: 23px; vertical-align: top;}
#storeTi .alignC { text-align: center;}
#storeTi .pl15 { padding-left: 15px;}
#storeTi .over { border-bottom: 1px solid #ddd; color: #333;}
#storeTi .out { border-bottom: 1px solid #0173c0; color: #0173c0;}
a.sMap { width: 12px; height: 17px; margin-left: 5px; overflow: hidden; text-indent: -9999px; background-position: 0 0; background: url(../images/map.gif) 0 0 no-repeat;}
a.sMap:hover { background-position: 0 -17px;}

/* catalog */
.cataL { float: left; width: 240px; height: 345px; overflow: hidden; margin: 0 16px 40px 0;}
.cataL .box { position: relative; width: 240px; height: 345px; overflow: hidden;}
.cataL .box a { display: none; position: absolute; top: 0; left: 0; width: 240px; height: 340px; background: url(../images/btn_view.png) no-repeat center; overflow: hidden;}
.ebook { width: 755px; height: 660px; background-color: #000; padding: 0 0 10px 10px;}
.ebook a { color: #fff;}
.ebook a:hover { color: #666;}

/* other */
.w405 { width: 405px;}
.w590 { width: 590px;}
.w600 { width: 600px;}
.inputxt { height: 25px; border: 1px solid #e0e0e0; background-color: #eee;}
.input { padding: 5px; background-color: #eee; border: 1px solid #e0e0e0;}
.btnReset, .btnSubmi { display: block; margin: 10px 0 0 15px; width: 78px; height: 29px; float: right; text-indent: -9999px; border: 0; background: url(../images/btn_form.png) no-repeat 0 0; overflow: hidden; cursor: pointer;}
.btnReset { background-position: 0 0;}
.btnSubmi { background-position: -94px 0;}
.btnReset:hover { background-position: 0 -29px;}
.btnSubmi:hover { background-position: -94px -29px;}
.btnPublic { display: block; margin: 15px 0 0 20px; width: 145px; height: 29px; float: left; text-indent: -9999px; border: 0; background: url(../images/btn_down.png) no-repeat 0 0; overflow: hidden; cursor: pointer;}
.btnDown { display: block; margin: 15px 0 0 20px; width: 84px; height: 29px; float: left; text-indent: -9999px; border: 0; background: url(../images/btn_down.png) no-repeat 0 0; overflow: hidden; cursor: pointer;}
.btnPublic { background-position: 0 0;}
.btnDown { background-position: -162px 0;}
.btnPublic:hover { background-position: 0 -29px;}
.btnDown:hover { background-position: -162px -29px;}

/* page */
#pageNum { margin: 20px 0 0; font-family: "Times New Roman"; font-size: 15px; color: #000; text-align: right;}
#pageNum a{ display: block; display: inline-block; width: 15px; text-align: center; height: 15px; color: #000;}
#pageNum a.number:hover { color: #0173c0;}
#pageNum a.number.select{ font-weight: bold;color: #0173c0;}
#pageNum a.pageBtn{ text-indent: -9999px; margin: 0 2px}
#pageNum a.first{ background: url(../images/pv.gif) 0 0 no-repeat}
#pageNum a.next{ background: url(../images/nt.gif) 0 0 no-repeat}
#pageNum a.first:hover{ background-position: 0 -15px;}
#pageNum a.next:hover{ background-position: 0 -15px;}
.listFram { clear: both; width: 742px; overflow: hidden; margin: 10px 0 0 5px;}
.listFram .mask{ width: 752px; overflow: hidden; position: relative;}
.listFram .list .txt{ width: 185px; overflow: hidden; color: #444; padding: 10px 0 10px 10px; font-family: Georgia; font-size: 15px;}
.listFram .list a.brandItem{ text-decoration: none; width: 235px; height: 60px; position: relative; overflow: hidden;}
.listFram .list .aw{ width: 235px; height: 60px; position: absolute; overflow: hidden; background: none;}
.listFram .brandView { height: 0; width: 742px; overflow: hidden; margin-top: 30px; font-family: Arial, "微軟正黑體"; position: absolute; left: 0;}
.listFram .brandCont{ width: 735px; height: 500px; border: 1px solid #d9d9d9; padding-right: 5px;}
.listFram .close{ cursor: pointer; font-family:"Times New Roman"; font-size: 40px; margin: 0 6px 0 0; width: 18px; overflow: hidden; float: right; line-height: 35px;}
.listFram .cont{ padding: 0 10px; margin-left: 10px; width: 710px; height: 160px; overflow: auto; font-size: 14px; line-height: 24px;}
.listFram .list { width: 750px; margin: 10px 0 15px; padding: 10px 0; overflow: hidden; border-bottom: 1px solid #ddd;}
.listFram .list a.brandItem{ width: 750px; height: 50px; color: #000; font-size: 13px;}
.listFram .list a.brandItem.hover{ color: #0173c0;}
.listFram .list a.brandItem.hover span{ background-position: right bottom;}

/* Nav */
#nav {	width: 660px;	overflow: hidden; padding-top: 25px }
#nav ul {	margin: 0;	padding: 0; 	list-style: none;}
#nav ul li { float: left; width: 110px; height: 50px; overflow: hidden; font-style: italic; font-size: 16px; line-height: 30px; text-align: center;}
#nav ul li:last-child { margin-right: 0;}
#nav ul li a { width: 110px; height: 50px; display:block; position: relative; z-index: 5; color:#000;}
#nav ul li a:hover { color:#0173c0;}
#nav ul li span { position: relative; z-index: 5; color:#0173c0;}
#nav ul li.backLava { position: absolute; color:#0173c0; z-index:3; background: url(../images/mhover.gif) center bottom no-repeat;}

/* 1118新增產品詳細彈跳 */
.mfp-title {
	line-height: 24px;
	font-size: 16px;
}

/* 首頁瀑布流(20150810後續調整) */
/* 1000~1270 */
#indexMain .blueitem img {
	vertical-align: bottom;
}
#indexMain {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
#indexMain .blueitem {
	position: relative;
	width: 23%; /* default */
	height: auto; /* fixed */
	background: #fff;
	margin: 0 1% 20px;
	overflow: hidden;
}
#indexMain .blueitem ul {
	margin: 0;
}
#indexMain .blueitem .bx-wrapper {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}
#indexMain .blueitem .bx-wrapper .bx-viewport {
	width: 100%;
}
#indexMain .blueitem .bx-wrapper .bx-viewport ul li {

}
#indexMain .blueitem.w2 {
	width: 48%; /* 2times width */
}
#indexMain .blueitem.w2 .bx-wrapper .bx-viewport {
	width: 100%;
	height: 100%;
}
#indexMain .blueitem.w2 .bx-wrapper .bx-viewport ul li {

}
#indexMain .blueitem .text {
	position: absolute;
	left: 0;
	bottom: 10px;
}
#indexMain .blueitem .text .title {
	font-size: 18px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#indexMain .blueitem .text .title a { color: #000; }
#indexMain .blueitem .text .title a:hover { color: #666; }
#indexMain .blueitem .text .desc {
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif, 微軟正黑體, Microsoft JhengHei;
	height: 75px;
	line-height: 25px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
#indexMain .blueitem .maskBox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}
#indexMain .blueitem .maskBox a {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #fff;
	background: rgba(0,0,0,.7);
	opacity: 0;
	transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}
#indexMain .blueitem .maskBox a strong {
	display: block;
	position: relative;
	font-size: 17px;
	width: 90%;
	height: 40px;
	line-height: 40px;
	margin: 53% auto 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#indexMain .blueitem .maskBox a p {
	font-size: 15px;
	font-family: Times New Roman", Times, serif, 微軟正黑體, Microsoft JhengHei";
	height: 60px;
	line-height: 30px;
	width: 90%;
	margin: 10px auto 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
#indexMain .blueitem .maskBox a:hover {
	opacity: 1;
}
#indexMain .blueitem.w2 .maskBox a strong {
	margin: 28% auto 0;
}
#indexMain .blueitem.w2 .maskBox a p {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#indexMain .blueitem iframe {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}
#indexMain .blueitem .newsBox {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
#indexMain .blueitem .newsBox a[title] {
	display: block;
	width: 100%;
	border-bottom: 1px solid #eee;
}
#indexMain .blueitem .picScroll-left {
	position: relative;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
#indexMain .blueitem .picScroll-left .hd {
	width: 50px;
	position: absolute;
	z-index: 99;
	top: -40px;
	right: 0;
}
#indexMain .blueitem .picScroll-left .hd .prev {
	display: block;
	float: left;
	width: 10px;
	height: 20px;
	overflow:hidden;
	cursor: pointer;
}
#indexMain .blueitem .picScroll-left .hd .next {
	display: block;
	float: left;
	left: 40px;
	width: 10px;
	height: 20px;
	overflow: hidden;
	cursor: pointer;
	margin-left: 15px;
}
#indexMain .blueitem .picScroll-left .hd a {
	display: block;
	width: 100%;
	height: 100%;
}
#indexMain .blueitem .picScroll-left .bd { width: 100%; padding: 0; margin: 10px 0;}
#indexMain .blueitem .picScroll-left .bd ul { width: 100%; height: 100px; overflow: hidden; zoom:1; margin: 0 10px 0 0; list-style: none;}
#indexMain .blueitem .picScroll-left .bd ul li { float: left; _display:inline; vertical-align: top; list-style: none; overflow: hidden; text-align: left; padding: 0; margin: 5px 15px 0 2px;}
#indexMain .blueitem .picScroll-left .picList .txt { width: 100%; overflow: hidden; font-size: 13px; height: 100%; line-height: 25px; overflow: hidden; font-family: Arial, Helvetica, sans-serif, "微軟正黑體", "Microsoft JhengHei"; padding: 0 15px 0 5px;}

@media screen and (min-width: 1100px) {
	#indexMain .blueitem .picScroll-left .bd ul { height: 125px; }
}
@media screen and (min-width: 1270px) {
	#indexMain .blueitem {
		width: 18.8%; /* default */
		height: auto; /* fixed */
		margin: 0 0.6% 20px;
		overflow: hidden;
	}
	#indexMain .blueitem.w2 {
		width: 39.2%; /* 2times width */
		margin: 0 0.4% 20px;
	}
	#indexMain .blueitem .picScroll-left .bd ul { height: 100px; }
}
@media screen and (min-width: 1320px) {
	#indexMain .blueitem .picScroll-left .bd ul { height: 125px; }
}
@media screen and (min-width: 1395px) {
	#indexMain .blueitem.w2 {
		width: 39.25%; /* 2times width */
		margin: 0 0.325% 20px;
	}
}
@media screen and (min-width: 1440px) {
	#indexMain .blueitem {
		width: 15.6666666667%; /* default */
		height: auto; /* fixed */
		margin: 0 0.5% 20px;
		overflow: hidden;
	}
	#indexMain .blueitem.w2 {
		width: 32.7%; /* 2times width */
		margin: 0 0.3166666667% 20px;
	}
	#indexMain .hide-6col {
		display: none;
	}
	#indexMain .blueitem .picScroll-left .bd ul { height: 100px; }
}
@media screen and (min-width: 1600px) {
	#indexMain .blueitem .picScroll-left .bd ul { height: 125px; }
}
@media screen and (min-width: 1880px) {
	#indexMain .blueitem.w2 {
		width: 32.6333333333%; /* 2times width */
		margin: 0 0.3500000005% 20px;
	}
	#indexMain .blueitem .picScroll-left .bd ul { height: 150px; }
}


#contact .formCont th { text-align: right}