/* product */
.m-product {
	padding: 1.1rem 0 2.28rem;
}
.m-product h1 {
	font-size: 1rem;
	font-weight: normal;
	text-align: center;
}
.m-product .summary {
	margin-top: .32rem;
	font-size: .16rem;
	text-align: center;
	color: #666;
}
.m-product .content {
	position: relative;
	overflow: hidden;
}
.m-product .list {
	width: 5.6rem;
	height: 7rem;
	margin: 1.8rem auto 1.56rem;
}
.m-product .list ul {
	position: relative;
	left: 0;
	float: left;
}
.m-product .list li {
	position: relative;
	box-sizing: border-box;
	width: 5.6rem;
	height: 7rem;
	cursor: pointer;
	transition: transform .3s ease;
}
.m-product .list li:nth-child(n+2) {
	margin-left: .8rem;
}
.m-product .list li.z-crt {
	position: relative;
	box-shadow: 0 0 8px 2px rgba(0,0,0,.2);
	transform: scale(1.12);
}
.m-product .list li .info {
	position: absolute;
	left: .1rem;
	bottom: .1rem;
	width: .4rem;
	height: .4rem;
	border-radius: .2rem;
	overflow: hidden;
	background: rgba(255,255,255,.7);
	transition: width .3s ease, height .3s ease;
}
.m-product .list li .info:hover {
	width: 5.4rem;
	height: 1.98rem;
}
.m-product .list li .info .tf {
	width: .4rem;
	line-height: .4rem;
	font-size: .2rem;
	text-align: center;
}
.m-product .list li .info div {
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	width: 5.4rem;
	height: 1.98rem;
	padding: .26rem .38rem;
	line-height: .24rem;
	font-size: .14rem;
	color: #030000;
	white-space: pre-wrap;
}
.m-product .list .angle {
	position: absolute;
	left: .66rem;
	right: .66rem;
	top: 50%;
	height: 0;
}
.m-product .list .angle .item {
	width: .8rem;
	height: .8rem;
	border: 1px solid #fff;
	border-radius: 50%;
	font-size: .28rem;
	color: #fff;
	background: rgba(153,153,153,.3);
	cursor: pointer;
	transition: all .2s ease;
}
.m-product .list .angle .item:hover {
	color: #000;
	background: #fff;
	box-shadow: 0 1px 10px 0 rgba(0,0,0,.2);
}

.m-product .classify {
	gap: .2rem;
}
.m-product .classify .item {
	position: relative;
	width: 1rem;
	height: 1.1rem;
}
.m-product .classify .item p {
	position: absolute;
	left: 0;
	top: 1.2rem;
	box-sizing: border-box;
	min-width: .96rem;
	border-radius: .04rem;
	padding: 0 .14rem;
	line-height: .36rem;
	font-size: .15rem;
	white-space: nowrap;
	color: #fff;
	background: #1944B2;
	opacity: 0;
	transform: translate(0,.1rem);
	transition: all .3s ease;
}
.m-product .classify .item:hover p {
	opacity: 1;
	transform: translate(0,0);
}
.m-product .classify .item p:before {
	content: '';
	position: absolute;
	left: .1rem;
	top: -.05rem;
	border-bottom: .05rem solid #1944B2;
	border-left: .05rem solid rgba(0,0,0,0);
	border-right: .05rem solid rgba(0,0,0,0);
}
.m-product .classify .more {
	width: 2.2rem;
	height: 1.1rem;
	line-height: .32rem;
	font-size: .16rem;
	text-indent: .3rem;
	color: #1944B2;
	background: #F5F5F5;
	transition: text-indent .2s ease;
}
.m-product .classify .more:hover {
	text-indent: .5rem;
}
/* end product */