#product-sort .top{
	width: 1200px;
}
.product-container{
	width: 100%;
}
.product-container > .row{
	margin: 0;
}
.list-item{
	margin-right: 6px;
	margin-bottom: 15px;
}
.list-item:nth-child(5n){
	margin-right: 0px;
}
.list-item .thumbnail{
	background: transparent;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	-ms-transition: all .5s linear;
	transition: all .5s linear;
}
.list-item:hover .thumbnail{
	background: #ebefed;
}

.thumbnail{
	border: 0;
	box-shadow: 0 0 0;
	border-radius: 0;
	width: 235px;
	max-height: 510px;
	text-shadow: 0 0 0 transparent;
	box-shadow: 0 0 0 transparent;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-mos-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.thumbnail .pic{
    position: relative;
    height: 234px;
    width: 220px;
    margin: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*background: #f5f5f5;*/
    background: transparent;
    -webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	-ms-transition: all .5s linear;
	transition: all .5s linear;
}
/*.list-item:hover .thumbnail .pic{
	background: #ebefed;
}
*/
.thumbnail .pic img{
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-mos-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
}

.thumbnail .caption{
	padding: 4px 13px 9px 13px;
}
.thumbnail .caption .unit, .thumbnail .caption .value{
	display: inline-block;
}
.thumbnail .caption h4{
	margin-top: 10px;
	font: 18px/24px Arial, "微軟正黑體";
	letter-spacing: 0.6px;
	color: #2e353f;
}
.thumbnail .caption p{
	font: 16px/26px Arial, "微軟正黑體";
	font-weight: lighter;
	letter-spacing: 0.2px;
	color: #666666;
}
.thumbnail .caption .price{
	font: 24px/45px Arial, "微軟正黑體";
	color: #0032A0;
}
.thumbnail .caption .choice{
	padding-top: 15px;
}
.row .list-item .caption .choice a.btn{
	padding: 5px 0;
}
.thumbnail .caption .choice a span.buy,
.thumbnail .caption .choice a span.favorite{
	background-color: #00a1e1;
	color: #fff;
}
.thumbnail .caption .choice a span{
	font-family: 'icomoon';
	height: 40px;
	width: 40px;
	display: block;
	color: #cbcbcc;
	background-color: #f5f5f5;
	line-height: 40px;
	text-align: center;
}
.thumbnail .caption .choice a span.buy:before{
	content: "\f214";
	font-size: 20px;
}
.thumbnail .caption .choice a span.favorite:before{
	content: "\f565";
	font-size: 28px;
}
/*.thumbnail:hover .caption .choice a span.buy{
	color: #cbcbcc;
	background-color: #f5f5f5;
}*/
.thumbnail:hover >  .caption .choice a span.buy:hover,
.thumbnail:hover >  .caption .choice a span.favorite:hover,
.thumbnail:hover > .caption .choice a span.cart:hover{
	color: #00a1e1;
	background: transparent;
}







@media screen and (max-width: 1407px){
	.max-bg-size section#content{
		width: 100%
	}
	.top,
	.product-container{
		width: 90%;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.list-item.col-lg-3{
		width: 25%;
	}
}
@media screen and (max-width: 1199px){
	.max-bg-size .top{
		width: 90%;
	}
	.max-lg-size section#content{
		width: 100%
	}
	.max-lg-size .left#LeftTitle{
		margin-left: 0;
	}
	.list-item{
		width: 19%;
		margin-right: 1%;
	}
	.thumbnail{
		width: 100%;
	}
	.thumbnail .pic{
		width: 161px;
		height: 161px;
	}
	.thumbnail .pic img{
		width: 80%;
	}
}

@media screen and (max-width: 991px){
	.max-md-size .nav-tabs li a{
		width: 100%;
		padding: 10px;
	}
	.max-md-size .thumbnail{
		height: 130px;
		box-shadow: 0 0 0 transparent;
		margin-bottom: 0px;
		width: 100%;
	}
	.max-md-size .list-item .thumbnail{
		border-top: solid 1px #dadada;
	}
	.max-md-size .thumbnail .pic{
		float: left;
		width: 150px;
		height: 150px;
		margin: 0;
		margin-right: 15px;
	}
	.max-md-size .thumbnail .caption{
		padding: 0;
		padding-bottom: 20px;
	}
	.max-md-size .thumbnail .caption h3{
		margin-top: 0;
	}
	.max-md-size .thumbnail .caption p{
		height: 70px;
	}
	.max-md-size .thumbnail .caption .price{
		width: auto;
		display: inline-block;
		font: 24px/35px Arial, "微軟正黑體";
	}
	.max-md-size .thumbnail .caption .choice{
		width: auto;
		display: inline-block;
		float: right;
		padding: 0;
		margin: 0;
		height: auto;
	}
	.max-md-size .thumbnail .caption p{
		height: 84px;
		margin: 0;
	}
	.max-md-size section#content{
		width: 100%;
	}
	.max-md-size .thumbnail > img{
		width: 150px;
	}
	.max-md-size .thumbnail .caption {
		padding: 0;
	}
	.max-md-size .thumbnail .caption h3{
		font: 18px/24px Arial, "微軟正黑體";
		height: 25px;
		margin-bottom: 0;
	}
	.max-md-size .thumbnail .caption .price{
		font: 20px/30px Arial, "微軟正黑體";
		height: 30px;
	}

}


@media screen and (max-width: 991px){

	.max-md-size .top {
	    margin-bottom: 20px;
	}
	#LeftTitle h3 {
	    padding: 0 15px;
	}

}


@media screen and (max-width: 767px){
	.max-sm-size section#content {
	    margin-top: -1px;
	}
	.max-sm-size .thumbnail .pic{
		height: 180px;
		width: 180px;
	}
	.max-sm-size .thumbnail .caption{
		height: auto;
		margin-bottom: 30px;
	}
	.max-sm-size .thumbnail .caption p{
		height: 70px;
	}
	.max-sm-size .thumbnail .caption .price{
		font: 18px/30px Arial, "微軟正黑體";
	}
	.max-sm-size .thumbnail .caption .choice{
		padding-top: 0;
	}

}


@media screen and (max-width: 479px){
	.max-xs-size section#content {
	    float: left;
	    margin-top: -5px;
	}
	.max-xs-size .thumbnail {
	    height: 140px;
	}
	.max-xs-size .thumbnail .pic{
		height: 110px;
		width: 110px;
	}
	.max-xs-size .thumbnail .pic{
		margin-bottom: 35px;
	}
	.max-xs-size .thumbnail .caption h3{
		margin-top: 0;
	}
	.max-xs-size .thumbnail .caption p {
	    height: 90px;
	}
	.max-xs-size .thumbnail .caption .price{
		font: 18px/30px Arial, "微軟正黑體";
		position: absolute;
		left: 40px;
	}
	.max-xs-size .thumbnail .caption .choice{
		padding-top: 0;
	}
}




/*

@media screen and (max-width: 768px){
	
	.list-item{
		width: 100%;
	}
	.thumbnail .pic{
		height: 180px;
		width: 180px;
	}
	.thumbnail .caption{
		padding: 0;
	}
	.thumbnail .caption .choice{
		padding-top: 0;
	}

}*/

/*products thumbnail phone version*/
@media screen and (max-width: 991px){
	.max-md-size .top, 
	.max-md-size .product-container{
		width: 100%;
	}
	#content .product-container,
	#content .body nav ul{
	    margin-bottom: 0;
	}
	.max-md-size .list-item .thumbnail{
		background: #f5f5f5;
	}

	.max-md-size .thumbnail{
		height: 100%;
		display: inline-block;
	}
	.max-md-size .list-item{
		width: 50%;
		padding-right: 0;
	    padding-left: 0;
	    border-bottom: solid 1px #dadada;
	    margin-right: 0;
	    margin-bottom: 0;
	}
	.max-md-size .list-item:first-child,
	.max-md-size .list-item:nth-child(2){
		border-top: solid 1px #dadada;
	}
	.max-md-size .list-item:nth-child(odd){
		border-right: dashed 2px #dadada;
	}
	.max-md-size .list-item .thumbnail {
	    border-top: 0;
	    padding: 5px 15px;
	}
	.max-md-size .thumbnail,
	.max-md-size .thumbnail > a,
	.max-md-size .thumbnail .pic,
	.max-md-size .thumbnail .caption .choice,
	.max-md-size .thumbnail .caption .price{
		width: 100%;
	}
	.max-md-size .thumbnail > a{
		height: 130px;
	    position: relative;
	    display: block;
	}
	.max-md-size .thumbnail .pic {
	    height: 130px;
	    position: relative;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		background: transparent;
	}
	.max-md-size .thumbnail .pic img{
	    height: 120px;
	    width: auto;
	}
	.max-md-size .thumbnail .caption{
		padding: 0;
	}
	.max-md-size .thumbnail .caption .choice{
		position: absolute;
	    top: 145px;
	    text-align: left;
	    width: auto;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.max-md-size .thumbnail .caption .choice a span{
		/*padding: 7px;*/
		padding: 0px;
	}
	.max-md-size .thumbnail .caption h4{
		font-size: 18px;
		font-weight: 600;
		margin-top: 69px;
		text-align: center;
	}
	.max-md-size .thumbnail .caption .price{
		position: absolute;
		left: 0;
	    text-align: center;
	    top: 215px;
	    font-size: 14px;
	    font-family: "Source Sans Pro";
	}
	.max-md-size .thumbnail .caption p{
		margin-top: 10px;
		margin-bottom: 20px;
		font-size: 13px;
		text-align: center;
		height: auto;
		min-height: 80px;
		overflow: auto;
	}
	.max-md-size .list-item:last-child{
	    border-bottom: solid 1px #dadada;
	    margin-bottom: 0;
	}
	.max-md-size nav.change-page .page.center {
	    margin-top: 0;
	}
}
@media screen and (max-width: 767px){

	.max-sm-size .list-item{
		width: 100%;
	}
	.max-sm-size .list-item:nth-child(2){
		 border-top: solid 0px transparent;
	}
	.max-sm-size .list-item:nth-child(odd){
		border-right: dashed 0px transparent;
	}
	.max-md-size .thumbnail .caption p{
		margin-top: 0px;
		font: 12px/20px Arial, "微軟正黑體";
		margin-bottom: 0;
		min-height: auto;
	}

}





 /* ==========================================================================
    Change Page
 ========================================================================== */
#content nav.change-page{
	margin-top: 17px;
	margin-bottom: 17px;
}

/* ==========================================================================
	Animate 
 ========================================================================== */
@-webkit-keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}
@-webkit-keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}
@-moz-keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}
@-ms-keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}
@-o-keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}
@keyframes pulse {
    0% { background-color: #FFF; }
    100% { background-color: #ebefed; }
}

@media screen and (min-width: 991px){
	.min-md-size .thumbnail:hover{
		-webkit-animation: pulse 0.5s linear;
	    -moz-animation: pulse 0.5s linear;
	    -o-animation: pulse 0.5s linear;
	    animation: pulse 0.5s linear;
		background-color: #ebefed;
	}

}


@-webkit-keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}
@-webkit-keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}
@-moz-keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}
@-ms-keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}
@-o-keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}
@keyframes hoverOut {
    0% { background-color: #ebefed; }
    100% { background-color: #FFF; }
}

@media screen and (min-width: 991px){
	.min-md-size .thumbnailHoverOut{

		-webkit-animation: hoverOut 0.5s linear;
	    -moz-animation: hoverOut 0.5s linear;
	    -o-animation: hoverOut 0.5s linear;
	    animation: hoverOut 0.5s linear;
		background-color: #FFF;
	}
}