@charset "utf-8";
/* CSS rest */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0; margin:0}table{border-collapse:collapse; border-spacing:0}fieldset,img,abbr,acronym{border:0}address,caption,cite,code,dfn,em,th,var{font-weight:normal; font-style:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6,b,u,i,big,small{font-weight:normal; font-size:100%}q:before,q:after{content:'';content:none}:focus,a{outline:0}ins{text-decoration: none;}del{text-decoration: line-through}hr{display:none}

/* basic layout */
html, body { width:100%; background:#eaeaea}
#wrap { position:relative; width:1000px; margin:0 auto; background:#fff }
#header { position:relative; width:100%; min-width:1000px; height:44px; overflow:hidden; background:#2a2a2a url(../img/common/bg-brick.png)}
#header-wrap { position:relative; width:1000px}
#footer { width:100%; min-width:1000px; height:66px; overflow:hidden; background:#fff; }
#footer.fixed { position:absolute; left:0; bottom:0}
#footer-wrap { width:964px; height:66px; padding:8px 18px 0}
#content { width:100%	}
#content-wrap { position:relative; width:1000px; overflow:hidden; _overflow:visible; _height:1%}
#side { float:left; width:136px}	
#main { float:right; width:864px}
.mainhd { position:relative; overflow:hidden; _overflow:visible; _height:1%; margin-bottom:6px}
.mainbd { position:relative; overflow:hidden; _overflow:visible; _height:1%; margin-bottom:42px}
#main2 .mainhd { padding-left:136px}

/* detail layout */
#header .logo { position:absolute; left:20px; top:3px; }
	#header .logo img {_behavior:url("js/iepngfix.htc")}	
#header .slogan { position:absolute; left:130px; top:4px; width:68px; height:36px; overflow:hidden; background:url(../img/common/header-slogan.png); font:bold 15px "Times New Roman", Times, serif; color:#fff; text-indent:-999px}

.mainhd .breadcrumb { height:24px; padding-top:10px}
.mainhd .brandlogo { float:right}
	.mainhd .brandlogo img { margin:0 2px}
	
.prodtitle { position:relative; height:50px; white-space:nowrap}
	.prodtitle h1 { position:absolute; left:0; top:0; /*display:inline-block; *display:inline; *zoom:1;*/ width:60%; /*margin-right:-5px; *margin:0 0 0 0;*/ white-space:normal}
	.prodtitle .awards { position:absolute; right:0; bottom:0; /*display:inline-block; *display:inline; *zoom:1;*/ width:60%; text-align:right; line-height:1.2; white-space:nowrap}

#side .picks  { position:absolute; left:2px; bottom:0}
	#side .picks li { margin-bottom:1px; *height:80px}
	#side .picks li img { display:block}
	#side .block { width:110px; margin:0 0 20px 10px}

#footer .credit { float:left; width:295px; color:#929292; font:bold 9px Arial, Helvetica, sans-serif; line-height:1.3}
	#footer .credit img { float:left}
	#footer .credit span { padding:6px; float:left}
	#footer .worldwide { margin:3px 0 6px; float:right; font-weight:bold; text-transform:uppercase; color:#686868; font-size:12px}
	#footer .worldwide a { color:#686868}
	#footer .worldwide big { margin-left:10px; font-weight:bold; color:#eb2a30}
	#footer .copyright { float:right; clear:right; font-size:8px; color:#999; text-transform:uppercase; *white-space:nowrap}

/* font, text */
body { color:#464646; font:11px/1 Arial, Helvetica, sans-serif}
.corporate { font-family:CorporateS, Arial, Helvetica, Sans-serif}
a { color:#444; text-decoration:none} a:hover { color:#666}
h1 { font-size:20px; font-weight:bold; line-height:1.2; cursor:default}
h2 { font-size:14px; font-weight:bold; color:#eb2d32; cursor:default}
.mainbd { line-height:1.3}
.pagetitle { font:24px "Times New Roman", Times, serif; cursor:default}
.blocktitle { font-size:18px; color:#eb2d32; text-transform:uppercase}
	.blocktitle span { color:#fff}
.entry h1 { margin-bottom:.85em}
	.entry h2, .entry h3, .entry h4 { margin-bottom:.85em}
	.entry p { color:#464646; margin-bottom:1em}
.bw { color:#ababab}
	.bw h1 { color:#fff} .bw p{ color:#ababab} .bw a { color:#c4c4c4} .bw a:hover { color:#fff}

/* shared styles */
.clear {clear:both; overflow:hidden; height:0}
.breadcrumb { font-size:10px; color:#555; cursor:default}
	.breadcrumb a { padding:0 3px; color:#828181} .breadcrumb a:hover { text-decoration:underline} .breadcrumb a:first-child { padding-left:0}
	.breadcrumb span { padding:0 3px}
a.rect, a.rect2 { position:relative; display:inline-block; *display:inline; *zoom:1; overflow:hidden; background:#eb2d32; color:#fff; text-align:center; font-size:10px}
	a.rect:hover, a.rect2:hover { background:#c60000; _color:#fff}
	a.rect b, a.rect2 b { font-weight:bold; text-transform:uppercase}
a.rect { width:38px; height:38px; line-height:38px}
a.rect2 { height:16px; padding:0 4px; line-height:16px}

.bgbrick { background:#2a2a2a url(../img/common/bg-brick.png)}
.cap, .cap2 { width:100%; filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5}
.cap { position:absolute; left:0; top:0; height:12px; background:#eb2a30} .cap2 { height:8px; background:#8a8a8a;}

.view { overflow:hidden; *overflow:visible; *zoom:1; min-height:275px; _height:275px}
	.view .showcase { position:relative; float:left; width:410px; _overflow:hidden}
	.view .showcase div { margin-bottom:2px}
	.view .showcase .loading { float:left; padding:5px; background:#000; position:absolute; left:200px; top:125px}
	.view .showcase li { float:left; display:block; margin:0 1px 0 0}
	.view .showcase img { display:block}
	.view .showcase div img {border:1px solid #ddd}
	.view .showcase li.on img { *zoom:1; filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8}
	.view .entry { float:right; width:400px; min-height:234px; _height:234px; padding:38px 32px 5px 22px}
	.view .entrytitle { padding-top:18px; background:url(../img/common/title-brick.png) no-repeat; font-size:14px; color:#fff; cursor:default}
	.view .entry .scroll-pane { height:110px}
	.view .entry .ctrl { margin-top:20px; padding-top:5px; border-top:1px dotted #949494}

.view2 { overflow:hidden; *overflow:visible; *zoom:1; margin-bottom:2px}
	.view2 .showcase { float:left; width:640px; margin-right:-640px}
	.view2 .showcase object { display:block}
	.view2 .entry { padding:38px 20px 5px 660px} 

/* 左側無照產品照, 純文章 */
.view-wopic .entry { float:none!important; width:810px!important }
	
.pager { margin-top:15px; text-align:right; cursor:default}
	.pager a { margin:2px; padding:1px 4px; color:#777} .pager a:hover, .pager a.on { color:#000; text-decoration:underline}
	.pager a.btn { color:#fff; background:#000} .pager a.btn:hover { color:#eee; background:#333; text-decoration:none}
.bw .pager a:hover, .bw .pager a.on { color:#fff}

.search * { vertical-align:middle}
	.search .text { margin-right:1px; padding:1px; *padding:2px 2px 0; height:12px; background:#d6d6d6; color:#111; border:1px solid #d6d6d6; font:11px/1.01 Arial, Helvetica, sans-serif}
	.search .text:focus, .search .text.sffocus { border-color:#999 #aaa #ddd; background:#bebebe}
	.search button { width:48px; height:16px; overflow:hidden; border:0; background:url(../img/common/search-btn.png); text-indent:-999px; cursor:pointer}
	.search button:hover , .search button:focus { background-position:0 -16px}

/* navigation */
#nav { float:right; position:relative; top:23px}
	#nav li { display:inline; padding:0 14px 0 15px; background:url(../img/common/nav-seperate.png) no-repeat 0 50%; font:bold 11px Arial, Helvetica, sans-serif}
	#nav li:first-child { background:none}
	#nav li a { color:#fff}	#nav li a:hover { color:#777}
	#nav li.on a { color:#eb2a30} #nav li.on a:hover { color:#c60000}
	#nav li span { color:#666; cursor:default}

#sidenav { width:110px; margin:50px 10px 20px 0; background:#2a2a2a url(../img/common/bg-brick.png) -2px 0}
	#sidenav div { padding-left:18px; *margin-top:-10px;	background:url(../img/common/bullet2.png) no-repeat 6px 5px}
	#sidenav ul { padding-left:6px; background:#fff}
	#sidenav li { border-bottom:1px solid #e8e8e8; padding:0 0 2px 0; margin:10px 0 0 0; font:12px CorporateS,"lucida sans unicode","lucida grande",sans-serif; text-transform:uppercase; line-height:1}
	#sidenav li:hover { border-color:#999}
	#sidenav li a { color:#2d2d2d} #sidenav li a:hover { color:#777}
	#sidenav li.on a { color:#eb2d32}
	
#footernav { height:17px; overflow:hidden; background:#eb2a30; color:#fff}
	#footernav a { margin:5px; padding-left:16px; background:url(../img/common/bullet3.png) no-repeat 5px 50%; line-height:16px; font:11px "lucida sans unicode","lucida grande",sans-serif; color:#fff}
	#footernav a:hover { color:#eee; text-decoration:underline}

.mainnav ul { margin-bottom:1px; }
	.mainnav li { display:inline-block; *display:inline; *zoom:1; margin-bottom:1px}
	.mainnav li a { display:inline-block;*display:inline; *zoom:1; height:15px; overflow:hidden; margin:0 -3px 0 0; *margin-right:0; padding:0 12px; background:#eb2a30 url(../img/common/bullet1.png) no-repeat 6px 50%; color:#fff; font-weight:bold; font-size:11px; vertical-align:top; line-height:15px}
	.mainnav li a:hover, .mainnav li.on a { background-color:#c60000; _color:#fff}
	/* 類別選單 */
	.mainnav .cate li a { padding:0 12px; background:#b2b2b2; font-size:10px; text-transform:uppercase}
	.mainnav .cate li a:hover, .mainnav .cate li.on a {background-color:#777}

.typemenu { background:url(../img/common/dot-red.png) repeat-x 0 bottom; padding:0 0 8px 0}
	.typemenu a { margin-right:12px; padding-left:5px; background:url(../img/common/bullet4.png) no-repeat 0 50%; color:#9c9c9c; font-weight:bold; text-transform:uppercase; text-decoration:none}
	.typemenu a:hover, .typemenu a.on { color:#fff }
	.typemenu a:last-child { margin-right:0}


/* 2011.04.03 added */
#header .lang { position:relative; top:25px; float:right; padding:0 1em 0 2em; font-size:10px\9}
#header .lang a { border:1px solid #999; padding:0 3px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; color:#fff}	
#header .lang a:hover { border-color:#555; color:#777}
.socials { float:right}
.socials .likebutton { display:inline!important; overflow:hidden; width:70px!important; height:21px!important; border:none; background:trasparent}
.socials .social-btn { position:relative; top:-2px; margin:0 2px 0 0}