body {
font-size: 17px;
font-family:"微軟正黑體", "Microsoft JhengHei","文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro","新細明體", Verdana, PMingLiU, sans-serif;
}
*{margin:0;padding:0;letter-spacing:1px;}
hr,span{margin:8px;}

a:link {text-decoration: none;color:#fff;}
a:visited {text-decoration: none;color: #fff;}
a:hover {text-decoration: none;color:#ccc;}
a:active {text-decoration: none;color: #fff;}

span a:link {
padding:5px;
font-weight:bold;
text-decoration: none;
background:#333;
color:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
span a:visited {color:#fff;padding:5px;font-weight:bold;text-decoration: none;background:#333;}
span a:hover {padding:5px;font-weight:bold;
text-decoration: none;
background:#ddd;
color:#000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;

}
span a:active {color:#fff;padding:5px;font-weight:bold;text-decoration: none;background:#333;}

.filters {
float:left;
clear:both;
width:100%;
}

.filters .filter {
float:left;
clear:both;
width:100%;
padding:5px;
}

.filter a {
float:left;
display:block;
padding:5px;
margin-right:5px;
font-size:14px;
text-transform:uppercase;
outline:none;
}


.filter .active {
background:#eee;
color:#000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.filters .container {
float:left;
clear:both;
width:100%;
position:relative;
}
.filters .container ul,
.filters .container ul li {
display:block;
list-style:none;
padding:0;
margin:0;

}
.filters .container ul li {
float:left;
margin:20px 0 0 10px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}


h3 {font-size:15px;margin:5px;height:75px;padding:0;clear:both;}
h3 a:link,h3 a:visited,h3 a:active{color:#000;}
h3 a:hover{color:#990000;}
.prtid{ color:#003366;}
.prtdescription{color:#333;}
.prtback{color:#006666;}
.prthits{color:#006666;}
.prtgood{color:#006666;}
.prtprice{
display:-moz-inline-box;
display:inline-block;
margin:0;
width:150px;
height:25px;
text-align:center;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
 border:solid 3px #fff; background:#003333;color:#fff;font-size:19px; font-weight:bold;}
 .prtpricess{
 position:absolute;
 top:-7px;
 background:url(prices.png) no-repeat 0 0;
display:-moz-inline-box;
display:inline-block;
width:150px;
height:46px;
padding:10px 0px 10px 75px;;
color:#fff;font-size:19px; font-weight:bold;}
.prtprices{color:#990000;font-weight:bold;}
.prtprices br{margin-bottom:100px;}
.prtorder{padding-left:15px;}
.lidiv {
border:solid 1px #ddd;
width:150px;
height:auto;
padding:5px;
margin-bottom:15px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top,  #e5e5e5 0%, #f7f7f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e5e5e5 0%,#f7f7f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e5e5e5 0%,#f7f7f7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e5e5e5 0%,#f7f7f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

.stack { text-align:center; float: left; width: 140px;height:140px; margin: 10px 10px 20px 5px; position: relative; z-index: 10; }
.stack.twisted span{
position:absolute;
padding:3px;
width:163px;
z-index:20;
left:2px;
top:2px;
background:#000;
color:#fff;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
display:none;
}

.stack img { width:140px; height:140px; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	cursor:pointer;
}
.stack:last-of-type { margin-right: 0; }

.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } 
.stack:after { top: 8px; z-index: -20; } 
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}

.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}
.lidiv:hover .stack.twisted span{display:block;}
.lidiv:hover{ background:#999;}
/*促銷*/
.sale{width:73px;
height:63px;
position:absolute;
z-index:31;
right:3px;
top:2px;
background:url(sale.png) no-repeat 0 0;
}
.pomot{width:56px;
height:97px;
position:absolute;
z-index:30;
left:0;
top:35px;
background:url(pomot.png) no-repeat 0 0;}

.allclear{width:118px;
height:34px;
position:absolute;
z-index:30;
left:10px;
top:2px;
background:url(allclear.png) no-repeat 0 0;}

.comby{width:89px;
height:61px;
position:absolute;
z-index:30;
left:0;
bottom:0;
background:url(comby.png) no-repeat 0 0;}
.oem{
width:116px;
height:38px;
position:absolute;
z-index:30;
right:0;
bottom:0;
background:url(oem.png) no-repeat 0 0;}
.zelo{
cursor:pointer;
width:113px;
height:91px;
position:absolute;
z-index:30;
right:-10px;
bottom:-20px;
background:url(zelo.png) no-repeat 0 0;
}
.prtdown{
cursor:pointer;
width:113px;
height:91px;
position:absolute;
z-index:30;
right:-10px;
bottom:-20px;
background:url(prtdown.png) no-repeat 0 0;
}

@media only screen and (min-width: 401px) and (max-width: 430px){
.lidiv {width:175px;height:400px;}
.prtprice{width:95%;}
.stack {width:160px;height:160px;margin:20px 10px;}
.stack img { width:160px;height:160px;}
.prtback{display:none;}
}

@media screen and (max-width: 321px){
.lidiv {width:90%;height:450px;}
.prtprice{width:95%;}
.stack {width:90%;height:auto;margin:10% 5%;}
.stack img { width:100%;height:auto;max-height:100%;}
.prtback{display:none;}
}