.parent{position:relative; width: 100%; padding-top: 100%;}
.parent .title{position:absolute; color:#5ff9ff; width:100%; height:48px; text-align:center; z-index:4; font-size: 1.4rem; line-height: 48px; top:50%; margin-top:-24px;    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0; letter-spacing: 2px;}
.parent:hover .title{color:#fcff26;}
.parent:active .title{color:#fff;}
.parent:before{
	content:"";
	width:100%;
	height:100%;
	background: url("../images/product/lists/LEFTBAR-EXTERND.png") no-repeat;
	background-size:100%;
	position: absolute;
	top: 0;
	z-index: 3;
}
.parent:after{
	content:"";
	width:100%;
	height:100%;
	background: url("../images/product/lists/LEFTBAR01-STAY.png") no-repeat;
	background-size:100%;
	position: absolute;
	z-index: 2;
	top:0;
	left:0;
}

.parent:hover:before{
	background: url("../images/product/lists/LEFTBAR-EXTERND.png") no-repeat;
	background-position: 0% 33.33%;
	background-size:100%;
}

.parent:active:before{
	background: url("../images/product/lists/LEFTBAR-EXTERND.png") no-repeat;
	background-position: 0% 66.66%;
	background-size:100%;
}


.parent.stay:before{

	background: url("../images/product/lists/LEFTBAR-EXTERND.png") no-repeat;
	background-size:100%;
	background-position: 0% 100%;
}

.parent.animal:after{
	background: url("../images/product/lists/LEFTBAR-ANI-01.gif") no-repeat;
	background-size:100%;
}
.parent.animal:hover:after{
	background: url("../images/product/lists/LEFTBAR-ANI-01.gif") no-repeat;
	background-size:100%;
}

.parent.arms:after{
	background: url("../images/product/lists/LEFTBAR-ANI-02.gif") no-repeat;
	background-size:100%;
}
.parent.arms:hover:after{
	background: url("../images/product/lists/LEFTBAR-ANI-02.gif") no-repeat;
	background-size:100%;
}

.parent.leather:after{
	background: url("../images/product/lists/LEFTBAR-ANI-03.gif") no-repeat;
	background-size:100%;
}
.parent.leather:hover:after{
	background: url("../images/product/lists/LEFTBAR-ANI-03.gif") no-repeat;
	background-size:100%;
}

.parent.briefs:after{
	background: url("../images/product/lists/LEFTBAR-ANI-04.gif") no-repeat;
	background-size:100%;
}
.parent.briefs:hover:after{
	background: url("../images/product/lists/LEFTBAR-ANI-04.gif") no-repeat;
	background-size:100%;
}

.parent.repair:after{
	background: url("../images/product/lists/LEFTBAR-ANI-05.gif") no-repeat;
	background-size:100%;
}
.parent.repair:hover:after{
	background: url("../images/product/lists/LEFTBAR-ANI-05.gif") no-repeat;
	background-size:100%;
}

.parent.new:after{
	background: url("../images/product/lists/LEFTBAR06-STAY.png") no-repeat;
	background-size:100%;
}
.parent.new:hover:after{
	background: url("../images/product/lists/LEFTBAR06-CLICK.gif") no-repeat;
	background-size:100%;
}

.parent.hot:after{
	background: url("../images/product/lists/LEFTBAR07-STAY.png") no-repeat;
	background-size:100%;
}
.parent.hot:hover:after{
	background: url("../images/product/lists/LEFTBAR07-CLICK.gif") no-repeat;
	background-size:100%;
}

.parent.sale:after{
	background: url("../images/product/lists/LEFTBAR08-STAY.png") no-repeat;
	background-size:100%;
}
.parent.sale:hover:after{
	background: url("../images/product/lists/LEFTBAR08-CLICK.gif") no-repeat;
	background-size:100%;
}

/*选中状态下动态图*/
.parent.animal.stay:after{
	background: url("../images/product/lists/LEFTBAR-ANI-01.gif") no-repeat;
	background-size:100%;
}

.parent.arms.stay:after{
	background: url("../images/product/lists/LEFTBAR-ANI-02.gif") no-repeat;
	background-size:100%;
}

.parent.leather.stay:after{
	background: url("../images/product/lists/LEFTBAR-ANI-03.gif") no-repeat;
	background-size:100%;
}

.parent.briefs.stay:after{
	background: url("../images/product/lists/LEFTBAR-ANI-04.gif") no-repeat;
	background-size:100%;
}

.parent.repair.stay:after{
	background: url("../images/product/lists/LEFTBAR-ANI-05.gif") no-repeat;
	background-size:100%;
}

.parent.new.stay:after{
	background: url("../images/product/lists/LEFTBAR06-CLICK.gif") no-repeat;
	background-size:100%;
}

.parent.hot.stay:after{
	background: url("../images/product/lists/LEFTBAR07-CLICK.gif") no-repeat;
	background-size:100%;
}

.parent.sale.stay:after{
	background: url("../images/product/lists/LEFTBAR08-CLICK.gif") no-repeat;
	background-size:100%;
}


.subclass{width:100%; height:0px; overflow:hidden; transition:all 1s;}
.subclass .item{position:relative; width:100%;  font-size:1.5rem ! important; 
	background:url('../images/product/lists/MENUBAR.png') no-repeat; 
	background-size:100%;
	
}
.subclass .item.stay .info,.subclass .item.stay:hover .info,.subclass .item.stay:active .info{color:#bcf8ff; text-shadow:2px 2px 2px #000;}
.subclass .item.stay,.subclass .item.stay:hover,.subclass .item.stay:active{
	background:url('../images/product/lists/MENUBAR.png') no-repeat; 
	background-position: 0% 33.33%;
	background-size:100%;

}
.subclass .item:hover{
	background:url('../images/product/lists/MENUBAR.png') no-repeat;
	background-position: 0% 66.66%;
	background-size:100%;
}
.subclass .item:active{
	background:url('../images/product/lists/MENUBAR.png') no-repeat; 
	background-position: 0% 100%;
	background-size:100%;
}
.subclass .item img{width:100%; opacity:0;}
.subclass .item .info{
	position:absolute; 
	width:100%; 
	height:100%; 
	font-size:1.3rem;
	top:0px; 
	color:#8e57ff;  
	z-index:10; 
	text-align:center; 
	text-shadow:2px 2px 2px #000;
	
}

.subclass .item:hover .info{color:#ffc000;}
.subclass .item:active .info{color:#18ff00;}