.listcategory{
	padding:0;
	width: 963px;
	margin: 0px 0px 15px 0px;
}
.listcategory li{
	padding:7px 2px;
	/* margin:10px 0; */
	margin: 0;
	border-right:1px dotted #ccc;
	border-left: 1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	background:url(../images/cat_item_bkgr.jpg) bottom left repeat-x;
	height:130px;
}
.listcategory li a h2{
	font-size:12px;
	padding:3px 0;
	color: #F60;
}
.listcategory li a{
	color:#F60 !important;
}
.listcategory li a:hover{
	color:#047635 !important;
}
.listcategory a img{
	width: 172px;
}
.listcategory li div.item-name{
	width: 296px;
	margin-left: 5px;
}

/* option view image and name */
.imageAndName{
	border-top: 1px dotted #ccc;
}


/* option view name flow image */
.nameFlowImage{
	border-top: 1px dotted #ccc;
}
.nameFlowImage li{
	/* width: 228px; */
	width: 469px;
	height: 190px; 
	/* height: 175px; */
	margin: 0px;
	padding: 0px 5px;
}

.nameFlowImage a{
	display: block;
}
.nameFlowImage .op3_image{
	width: 100%;
	margin: 10px 0px auto;
	text-align: center;
}
.nameFlowImage .op3_image img{
	width: 182px;
}
.nameFlowImage div.pdl2 a h2{
	/* font-size: 16px; */
}
.nameFlowImage div.pdl2{
	text-align: center;
	/* margin: 10px 0px; */
}
.nameFlowImage div.name-product, .nameFlowImage div.name-sub, .nameFlowImage div.name-product a, .nameFlowImage div.name-sub a, .nameFlowImage h2{
	height: 24px;
}
.nameFlowImage div.name-product a, .nameFlowImage div.name-sub a{
	position: relative;
}
.nameFlowImage div.name-product a h2, .nameFlowImage div.name-sub a h2{
	height: 24px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0px;
	margin: -12px 0px 0px 0px;
}
.nameFlowImage div.pdl2 a:hover{
	text-decoration: underline;
}

/*option view show detait */
.showDetailt{
	border-top: 1px dotted #ccc;
}
.showDetailt div.detail{
	width: 286px;
	margin-left: 10px;
} 

/* option view onlyName */
.onlyName{
	border: none;
}

.onlyName li{
	border: none;
	background: none;
	margin: 5px 0px 5px 10px;
	padding: 0px;
	height: auto;
	width: 100%;
}
.onlyName li:visited{
	border: none;
}
.onlyName li a:hover{
	text-decoration: underline;
}

/*** show desction ***/
ul.showDesction{
	padding: 0px;
	margin: 0px 0px 15px 0px;
}
.showDesction li{
	clear: botth;
	overflow: hidden;
	border-bottom: 1px dotted #ccc;
	padding: 0px 15px 10px 15px;
	margin: 15px 0px 0px;
}
.showDesction li:first-child{
	margin: 0px 0px 15px 0px;
}
.showDesction li h2.title-item a{
	color: #F60;
	font-size: 13px;
}
.showDesction li h2.title-item a:hover{
	text-decoration: underline;
}
.showDesction li a.link-image{
	display: block;
	width: 172px;
	height: 124px;
	border: 1px solid #ccc;
	margin: 10px 10px 0px 10px;
}
.showDesction li a.link-image img{
	width: 172px;
	height: 124px;
}
.showDesction .desction-product{
	margin: 10px 0px 0px 0px;
}

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

	.listcategory{
		width: 100%;
	}
	.listcategory li{
		padding:7px 2px;
		margin: 0;
		border-right:1px dotted #ccc;
		border-left: 1px dotted #ccc;
		border-bottom:1px dotted #ccc;
		box-sizing: border-box;
		width: calc(100% / 2);
		height: auto;
	}
	.listcategory li a h2{
		font-size:12px;
		padding:3px 0;
	}
	.listcategory li a{
		color:#F60 !important;
	}
	.listcategory li a:hover{
		color:#047635 !important;
	}
	.listcategory li a img{
		width: 172px;
	}
	.listcategory li div.item-name{
		width: calc(100% - 180px);
	}
	
	.onlyName{
	border: none;
}

	.onlyName li{
		border: none;
		background: none;
		margin: 5px 0px 5px 10px;
		padding: 0px;
		height: auto;
		width: 100%;
	}
	.onlyName li:visited{
		border: none;
	}
	.onlyName li a:hover{
		text-decoration: underline;
	}
	
	.showDetailt div.detail{
		width: 100%;
		
	} 
}
@media only screen and (max-width: 640px){
	.listcategory li{
		height: auto;
	}
	.listcategory li a img{
		width: 100px;
	}
	.listcategory li div.item-name{
		width: calc(100% - 110px);
	}
	
}
@media only screen and (max-width: 480px){
	.nameFlowImage .op3_image img{
		width: 150px;
	}
	.nameFlowImage div.name-product, .nameFlowImage div.name-sub, .nameFlowImage div.name-product a, .nameFlowImage div.name-sub a, .nameFlowImage h2{
		height: 48px;
	}
	.nameFlowImage div.name-product a, .nameFlowImage div.name-sub a{
		position: relative;
	}
	.nameFlowImage div.name-product a h2, .nameFlowImage div.name-sub a h2{
		height: 48px;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0px;
		margin: -24px 0px 0px 0px;
	}
}
@media only screen and (max-width: 360px){
	.listcategory li div.item-name{
		width: 100%;
	}
	.showDesction li a.link-image, .showDesction li a.link-image img {
		width: 100%;
		height: auto;
	}
	.showDesction li a.link-image{
		margin: 10px 0px;
	}
	.showDesction .desction-product{
		margin: 10px 0px 0px 0px;
		width: 100%;
	}
}