#index02 img{
	display:block;
}


.recommend-com {
	display:flex;
	justify-content:center;
	align-items:flex-start
}
.mask {
	background:rgba(0,0,0,.1)
}
.more,.recommend-msg-intro,.recommend-msg-order,.recommend-msg-title,.recommend-msg {
	position:absolute
}
.recomend-item {
	position:relative;
	cursor:pointer
}
.recommend-msg h4,.recommend-msg p {
	color:#fff
}
.more {
	color:#fff;
	width:86px;
	cursor:pointer;
	opacity:0;
	transition:opacity .4s ease
}
.more span {
	position:relative;
	height:14px;
	margin:0;
	padding:0;
	transition:all .3s ease;
	transition-delay:0;
	left:0;
	top:10px;
	font-size:16px;
	color:#fdd000;
	font-family:Arial;
	display:block;
}
.more:after {
	content:"";
	display:block;
	transition:all .3s ease;
	width:22px;
	height:7px;
	background-image:url(../images/more.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.recommend-more {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:center
}
.recommend-msg-order {
	color:#fff
}
.index02 .recommend-com:hover .link-block {
	color:transparent
}
.index02 .recommend-com:hover .link-block h4,.index02 .recommend-com:hover .link-block p,.index02 .recommend-com:hover .more {
	opacity:0
}
.index02 .recommend-msg {
	background:rgba(0,0,0,.4);
	width:100%;
	height:100%;
	top:0;
	left:0;
	color:#fff
}
.index02 .more {
	left:50px;
	bottom:50px
}
.index02 .more span {
	top:10px
}
.index02 .recommend-msg-order {
	font-size:48px;
	line-height:50px;
	top:50px;
	left:50px;
	font-family: 'SC6';
}
.index02 .recommend-msg-title {
	font-size:20px; color:#fff; font-weight:bold; line-height:24px;
	left:50px;
	top:37.6%;
	transition:opacity .8s cubic-bezier(.5,0,.1,1),-webkit-transform 1s cubic-bezier(.5,0,.1,1);
	transition:transform 1s cubic-bezier(.5,0,.1,1),opacity .8s cubic-bezier(.5,0,.1,1);
	transition:transform 1s cubic-bezier(.5,0,.1,1),opacity .8s cubic-bezier(.5,0,.1,1),-webkit-transform 1s cubic-bezier(.5,0,.1,1)
}
.index02 .recommend-msg-intro {
	left:50px;
	top:50%;
	color:#999;
	font-size:14px; line-height:24px;
}
.index02 .recommend-more {
	height:178px
}

.index02 .recomend-item {
	overflow:hidden;
	width:33.33%;
	transition:all 1.2s cubic-bezier(.5,0,.1,1)
}
.index02 .recommend-msg-intro {
	width:280px;
	letter-spacing:3px;
	transition:opacity .6s cubic-bezier(.5,0,.1,1),-webkit-transform .4s cubic-bezier(.5,0,.1,1);
	transition:transform .4s cubic-bezier(.5,0,.1,1),opacity .6s cubic-bezier(.5,0,.1,1);
	transition:transform .4s cubic-bezier(.5,0,.1,1),opacity .6s cubic-bezier(.5,0,.1,1),-webkit-transform .4s cubic-bezier(.5,0,.1,1);
	opacity:0;
	-webkit-transform:translateY(40px);
	transform:translateY(40px)
}
.index02 .recomend-item:hover {
	width:auto;
	width:601px;
}

.index02 .recomend-item:hover .mask {
	background:rgba(0,0,0,0.2)
}
.index02 .recomend-item:hover h4 {
	-webkit-transform:translateY(-20px);
	transform:translateY(-20px)
}
.index02 .recomend-item:hover .recommend-msg-intro {
	transition:opacity .6s cubic-bezier(.1,0,.5,1) .2s,-webkit-transform .8s cubic-bezier(.1,0,.5,1) .2s;
	transition:transform .8s cubic-bezier(.1,0,.5,1) .2s,opacity .6s cubic-bezier(.1,0,.5,1) .2s;
	transition:transform .8s cubic-bezier(.1,0,.5,1) .2s,opacity .6s cubic-bezier(.1,0,.5,1) .2s,-webkit-transform .8s cubic-bezier(.1,0,.5,1) .2s;
	-webkit-transform:translateY(0);
	transform:translateY(0); opacity:1;
}
.index02 .recomend-item:hover .more {
	transition:opacity .4s ease-in-out .4s
}
.index02 .recomend-item:hover .more span {
	left:0px
}
.index02 .recomend-item:hover .more:after {
	transition-delay:.4s;
	width:100%;
	background-position:right center;
}
.index02 .recomend-item:hover .link-block {
	color:#fff
}
.index02 .recomend-item:hover .link-block h4,.index02 .recomend-item:hover .link-block p,.index02 .recomend-item:hover .link-block .newp {
	opacity:1;
	color:#fff
}
.index02 .recomend-item:hover .link-block .more {
	opacity:1
}
.layout-mobile .recommend-com {
	flex-wrap:wrap
}
.layout-mobile .recomend-item {
	width:50%;
	overflow:hidden
}
.layout-mobile .recomend-item:before {
	padding-top:90.42553%;
	content:"";
	float:left
}
.layout-mobile .recomend-item:after {
	content:"";
	display:block;
	clear:both
}
.layout-mobile .recomend-item img {
	position:absolute;
	top:0;
	left:0;
	width:100%
}
.layout-mobile .recomend-item .recommend-msg-order {
	top:5px;
	left:30px;
	font-size:40px;
	line-height:76px;
	color:#fff
}
.layout-mobile .recomend-item .recommend-msg-title {
	top:81px;
	left:30px
}
.layout-mobile .recomend-item .more {
	left:30px;
	bottom:30px
}
.layout-mobile .recomend-item:first-child {
	width:100%
}
.layout-mobile .recomend-item:first-child:before {
	padding-top:66.66667%;
	content:"";
	float:left
}
.layout-mobile .recomend-item:first-child:after {
	content:"";
	display:block;
	clear:both
}
.layout-mobile .recomend-item:first-child .recommend-msg-order {
	top:55px
}
.layout-mobile .recomend-item:first-child .recommend-msg-title {
	top:141px
}

@media all and (min-width:320px) and (max-width:750px){
	.recommend-com{
		display:block;
	}
	.index02 .recomend-item {
		overflow: hidden;
		width: 50%;
		transition: all 1.2s cubic-bezier(.5,0,.1,1);
		float: left;
	}	
	#index02 img {
		display: block;
		width: 100%;
	}
	.index02 .recomend-item:hover {
		width: 48%;
	}
	.index02 .recommend-msg-order{
		display:none;
	}
	.index02 .recomend-item {
		width: 48%; margin:0 1%; margin-bottom:8px;
	}

	.index02 .recomend-item .mask {
		background:rgba(0,0,0,0)
	}
	.index02 .recomend-item h4 {
		-webkit-transform:translateY(-20px);
		transform:translateY(-20px)
	}
	.index02 .recomend-item .recommend-msg-intro {
		transition:opacity .6s cubic-bezier(.1,0,.5,1) .2s,-webkit-transform .8s cubic-bezier(.1,0,.5,1) .2s;
		transition:transform .8s cubic-bezier(.1,0,.5,1) .2s,opacity .6s cubic-bezier(.1,0,.5,1) .2s;
		transition:transform .8s cubic-bezier(.1,0,.5,1) .2s,opacity .6s cubic-bezier(.1,0,.5,1) .2s,-webkit-transform .8s cubic-bezier(.1,0,.5,1) .2s;
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
	.index02 .recomend-item .more {
		transition:opacity .4s ease-in-out .4s
	}
	.index02 .recomend-item .more span {
		left:0px
	}
	.index02 .recomend-item .more:after {
		transition-delay:.4s;
		width:100%;
		background-position:right center;
	}
	.index02 .recomend-item .link-block {
		color:#fff
	}
	.index02 .recomend-item .link-block h4,.index02 .recomend-item .link-block p {
		opacity:1;
		color:#fff
	}
	.index02 .recomend-item .link-block .more {
		opacity:1
	}
	.index02 .recommend-msg-title {
		font-size: 18px;
		font-weight: bold;
		padding-left: 20px;
		top: 25%;
		box-sizing:border-box;
		left:0px;
	}
	.index02 .recommend-msg-intro{
    font-size: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    left: 0px;
    line-height: 18px;
    top: 78px;
	}
	.index02 .more{
		left:15px;
	}
	.index02 .more span{
		 font-size:12px;
	}
}