*{
		margin:0;
		padding:0;
		font-family: "微软雅黑";
	}
	body{
		background-color:#333;
	}
	.wrapper{
		width:1194px;
		height:300px;
		border: 5px solid #fff;
		margin: 150px auto; /*上下150px，左右自适应*/
		overflow: hidden;/*超出DIV隐藏*/
	}
	.wrapper ul li:nth-child(1){
		background: -webkit-linear-gradient(top,#00a0ea,#65a2bf);	/*线型渐变*/
	}
	.wrapper ul li:nth-child(2){
		background: -webkit-linear-gradient(top,#02304a,#24534f);	/*线型渐变*/
	}
	.wrapper ul li:nth-child(3){
		background: -webkit-linear-gradient(top,#04646a,#63452f);	/*线型渐变*/
	}
	.wrapper ul li:nth-child(4){
		background: -webkit-linear-gradient(top,#02f63a,#62325f);	/*线型渐变*/
	}
	.wrapper ul li:nth-child(5){
		background: -webkit-linear-gradient(top,#0325ea,#92455f);	/*线型渐变*/
	}
	.wrapper ul li:nth-child(6){
		background: -webkit-linear-gradient(top,#2345ea,#5465e5);	/*线型渐变*/
	}
	.wrapper ul li{
		position: relative;/*相对定位，参考物*/
		float: left;
		list-style: none;	/*去除小黑点*/
		width:198px;
		height: 300px;
		border-left: 1px solid #fff;
		box-shadow: 0px 0px 20px #000; /*添加阴影*/
		transition: .6s;
	}
	.wrapper ul:hover li{
		width: 41px;
	}
	.wrapper ul li:hover{
		width: 982px;
	}
	.content{
		position: absolute;/*运动物*/
		width: 980px;
		height: 260px;
		left: 0px;
		top: 0px;
		color: #fff;
		text-align: center;
		font-size: 18px;
	}
	.content dl{
		width: 220px;
		height: 218px;
		border: 1px solid #fff;
		float: left;
		margin: 38px 0px 0px 18px;
	}
	.content dl dt{
		width: 200px;
		height: 170px;
		padding: 10px;
	}
	.content dl dd{
		line-height: 30px;	/*行高*/
		background: rgba(0,0,0,5);
		
	}
	img{
		width: 100%;
		height: 100%;
		box-shadow: 0px 0px 20px rgba(0,0,0,34);
	}
	.wrapper ul li p{
		position: absolute;
		left:0;
		width:199px;
		height: 300px;
		background: rgba(0,0,0,.5);
		line-height: 300px;
		color: #fff;
		text-align: center;
		transition: .7s;
	}
	.p1{
		left: 0;
		top: 0;
	}
	.p2{
		left: 0;
		bottom: 0;
	}
	.wrapper ul li:hover p{
		width: 983px;
		height: 32px;
		line-height: 32px;
	}