html , body{
	min-width: 1200px;
}
ul{
	list-style: none;
}
*{
	padding: 0;
	margin: 0;
}

.list li{
	height: 900px;
	color: white;
}
.list li .title{
	font-size: 62px;
}
.list li .sub_title{
	position: relative;
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 70px;
}
.list li .description{
	font-size: 20px;
}
.list li .sub_title:before{
	position: absolute;
	content: '';
	bottom: -30px;
	background-color: white;
	height: 4px;
	width: 45px;
}
.list li .case>span{
	position: relative;
	display: inline-block;
	width: 216px;
	height: 60px;
	border-radius: 50px;
	border: 1px solid white;
	font-size: 20px;
	/*text-align: center;*/
	line-height: 60px;
	padding-left: 40px;
	box-sizing: border-box;
}
.list li .case span a{
	color: white;
}
.list li .case:hover span a{
	color: #6699ff;
}
.list li .case>span:before,.list li .case>span:after{
	position: absolute;
	content: '';
	right: 40px;
	top: 23px;
	width: 20px;
	height: 12px;
}
.list li .case{
	display: inline-block;
	margin-top: 50px;
	position: relative;
	width: 216px;
	height: 60px;
	overflow: hidden;
	z-index: 2;
}
/*.list li.li_1 .case{
	margin-top: 450px;
}
.list li.li_2 .case{
	margin-top: 430px;
}*/
.list li .case:before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color:white ;
	transition: all .4s;
	border-radius: 50px;
	
}
.list li .case:hover{
	color: #6699ff;
	border-color:#6699ff ;
}
.list li .case:hover:before{
	width: 100%;
}
.list li .case:hover span:after{
	display: inline-block;
}
.list li .case span:before{
	background: url(../images/website_ico02.png) no-repeat;
	
}
.list li .case span:after{
	background: url(../images/website_ico1_.png) no-repeat;
	display: none;
}
.list .content{
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 220px;
}
.list .li_2 .content{
	padding-top: 120px;
}
.list .li_5 .content{
	padding-top: 270px;
}
.list .li_7 .content{
	padding-top: 250px;
}
.list .content>div{
	display: inline-block;
}
.list .text_left .left,.list .text_right .right{
	float: left;
	width: 450px;
}
.list .content .right{
	float: right;
	margin-top: 40px;
	
}
.list li.active .left{
	animation:anim_left 1s ease ;
}
.list li.active .right{
	animation:anim_right 1s ease ;
}
.list li.active .right,.list li.active .left{
	/*transform:translateX(0) ;*/
}
@keyframes anim_right{
	0%{
		transform: translateX(100%);
	}
	90%{
		transform: translateX(-5px);
	}100%{
		transform: translateX(0);
	}
}
@keyframes anim_left{
	0%{
		transform: translateX(-100%);
	}
	90%{
		transform: translateX(5px);
	}100%{
		transform: translateX(0);
	}
}
.list .li_1{
	background: url("../images/website_1.png");
}
.list .li_2{
	background: url("../images/website_2.png");
}
.list .li_3{
	background: url("../images/website_3.png");
}
.list .li_4{
	background: url("../images/website_4.png");
}
.list .li_5{
	background: url("../images/website_5.png");
}
.list .li_6{
	background: url("../images/website_6.png");
}
.list .li_7{
	background: url("../images/website_7.png");
}
.list .li_3.text_right .right,.list .li_4.text_left .left{
	width:500px
}
.list .li_5.text_left .left,.list .li_6.text_left .left,.list .li_7.text_right .right{
	width: 550px;
}
.list .li_4 .right,.list .li_5 .right,.list .li_6 .right,.list .li_7 .left{
	width: 580px;
}

.list .li_4 .right img,.list .li_5 .right img,.list .li_6 .right img,.list .li_7 .left img{
	width: 100%;
}
.li_7.text_right .left{
	margin-top:50px ;
}