.warp{ background: #fafafa; overflow: hidden;}
.main{ width: 1200px; margin: 30px auto 60px; }
.warp .title{ text-align: center; background: #fff; padding: 40px 0; }
.warp .title h3{ font: 36px/42px "microsoft yahei"; color: #333;}
.warp .title p{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list{ 
	font-size: 0; 
	height: 100%; 
	overflow: hidden; 
	margin-bottom: 20px;
}
.main .list .pic{ 
	width: 800px; 
	float: left;
	transition: 0.5s all; 
	-webkit-transition: 0.5s all;
}
.main .list .txt{ 
	padding-bottom: 9999px; 
	margin-bottom: -9999px; 
	background: #fff; 
	width: 320px; 
	padding-left: 40px; 
	padding-right: 40px; 
	float: right;
	transition: 0.5s all; 
	-webkit-transition: 0.5s all;
}
.main .list:nth-child(2n) .pic{
	float: right;
}
.main .list:nth-child(2n) .txt{
	float: left;
}
.main .list .txt h3{ font: 26px/32px "microsoft yahei"; color: #4bcdd9; padding-top: 40px; padding-bottom: 5px;}
.main .list .txt span{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt .cont{ border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px; margin-bottom: 30px; font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt a{ display: inline-block; font: 14px/24px "microsoft yahei"; color: #999; background: url(../image/22-22-1.png) right center no-repeat; padding-right: 26px;}
.main .list:hover .txt{ background: #4BCDD9;}
.main .list:hover .txt h3,.main .list:hover .txt span,.main .list:hover .txt .cont,.main .list:hover .txt a{ color: #fff;}
.main .list:hover .txt a{ background-image: url(../image/22-22.png);}

.main .cur .pic{ transform: translateY(-100%); -webkit-transform: translateY(-100%);}
.main .cur .txt{ transform: translateY(100%); -webkit-transform: translateY(100%);}

@media only screen and (min-width: 960px) and (max-width: 1199px) {

.main{ width: 98%; margin: 30px auto 60px; }
.warp .title{ text-align: center; background: #fff; padding: 40px 0; }
.warp .title h3{ font: 30px/36px "microsoft yahei"; color: #333;}
.warp .title p{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .pic{ width: 65%; }
.main .list .txt{  width: 31%; padding-left: 2%; padding-right: 2%; }
.main .list .txt h3{ font: 21px/32px "microsoft yahei"; color: #4bcdd9; padding-top: 40px; padding-bottom: 5px;}
.main .list .txt span{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt .cont{ border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px; margin-bottom: 30px; font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt a{ display: inline-block; font: 14px/24px "microsoft yahei"; color: #999; background: url(../image/22-22-1.png) right center no-repeat; padding-right: 26px;}
.main .list:hover .txt{ background: #4BCDD9;}
.main .list:hover .txt h3,.main .list:hover .txt span,.main .list:hover .txt .cont,.main .list:hover .txt a{ color: #fff;}
.main .list:hover .txt a{ background-image: url(../image/22-22.png);}
	
}

@media only screen and (min-width: 640px) and (max-width: 959px) {
	
	.main{ width: 100%; margin: 30px auto 60px; }
.warp .title{ text-align: center; background: #fff; padding: 40px 0; }
.warp .title h3{ font: 26px/42px "microsoft yahei"; color: #333;}
.warp .title p{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list{ font-size: 0; height: 100%; overflow: hidden; margin-bottom: 20px;}
.main .list .pic{ width: 68%; display: inline-block; vertical-align: top;}
.main .list .txt{ padding-bottom: 9999px; margin-bottom: -9999px; background: #fff; width: 28%; padding-left: 2%; padding-right: 2%; display: inline-block;}
.main .list .txt h3{ font: 20px/26px "microsoft yahei"; color: #4bcdd9; padding-top: 40px; padding-bottom: 5px;}
.main .list .txt span{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt .cont{ border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px; margin-bottom: 30px; font: 14px/24px "microsoft yahei"; color: #999;}
	
}

@media only screen and (min-width: 320px) and (max-width: 639px) {
	.main{ width: 100%; margin: 30px auto 60px; }
.warp .title{ text-align: center; background: #fff; padding: 20px 0; }
.warp .title h3{ font: 18px/22px "microsoft yahei"; color: #333;}
.warp .title p{ font: 14px/24px "microsoft yahei"; color: #999;}
.main .list{ font-size: 0; height: 100%; overflow: hidden; margin-bottom: 20px;}
.main .list .pic{ width: 100%; display: inline-block; vertical-align: top;}
.main .list .pic img{ display: block; width: 100%;}
.main .list .txt{ padding-bottom: 20px; margin-bottom: 0; background: #fff; width: 90%; padding-left: 5%; padding-right: 5%; display: inline-block;}
.main .list .txt h3{ font: 16px/24px "microsoft yahei"; color: #4bcdd9; padding-top: 40px; padding-bottom: 5px;}
.main .list .txt span{ font: 12px/20px "microsoft yahei"; color: #999;}
.main .list .txt .cont{ border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px; margin-bottom: 10px; font: 14px/24px "microsoft yahei"; color: #999;}
.main .list .txt a{ display: inline-block; font: 14px/24px "microsoft yahei"; color: #999; background: url(../image/22-22-1.png) right center no-repeat; padding-right: 26px;}
.main .list:hover .txt{ background: #4BCDD9;}
.main .list:hover .txt h3,.main .list:hover .txt span,.main .list:hover .txt .cont,.main .list:hover .txt a{ color: #fff;}
.main .list:hover .txt a{ background-image: url(../image/22-22.png);}
}