.casesList{
	padding-top:4.25rem;
  padding-bottom: 6.875rem;
 }
.cases-sel{position: relative;text-align: center;background-color: #fff;}
.cases-tab{	display: inline-block;height: 4.5rem;}
.cases-tab>li{float:left;position:relative;height: 100%;font-size: 1rem;z-index: 3;color: #333;}
.cases-tab>li>a{width: 100%;height: 100%;padding:0 2.523rem;line-height:4.5rem;}
.cases-tab>li:hover>a{color: #fff;}
.cases-tab>li.active::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translate(-0,-50%);
	-moz-transform: translate(-0,-50%);
	-ms-transform: translate(-0,-50%);
	-o-transform: translate(-0,-50%);
	transform: translate(-0,-50%);
	width: 100%;
	height: 5.625rem;
	background-image: linear-gradient(0deg, #0296ff 0%, #2ad9ff 100%);
	border-radius: 15px;
	z-index: -1;
}
.cases-tab>li:last-child{margin-right: 0;}
.cases-tab>li.active a{color:#fff;font-size: 1.125rem;}

.cases-sel .tab-bg{
	visibility: hidden;position: absolute;left: 0;top: -0.52rem;width: 8.375rem;height: 5.625rem;
	background-image: linear-gradient(0deg, #0296ff 0%, #2ad9ff 100%);
	border-radius: 15px;
	transition: left .5s ease;
	
}

/*cases list*/
.cases-list{margin-top: 3.375rem;}
.cases-item{width: 32.143%;margin-top:1.75rem;overflow: hidden;}
.cases-item div.fas{height: 80px;background: #fff;padding: 0 1.875rem;}
.cases-item div.fas p:first-child{width: 85%;}
.cases-item div.fas span{max-width: 24px;height: 24px;overflow: hidden;}
.cases-item div.fas span:last-child{width:14px;margin-left: 5px;}
.cases-item div.fas img{
	position: relative;
    top: 0;
}
.cases-list .cases-item div img:nth-child(2) {
	top: 80px;
}

.cases-list>a {position: relative;overflow: hidden;}
.cases-list>a .img {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 18.25rem;
	background: #f2f2f2;
	overflow: hidden;
}
.cases-list>a .img img{
	max-width: 100%;
}

.cases-list>a .shade {
	width: 100%;
	height: 18.25rem;
	position: absolute;
	left: 0;
	top: -18.25rem;
	z-index: 2;
	background-color: #f2f2f2;
}
.cases-list>a .shade img{
	max-width: 100%;
	max-height: 100%;
}




@media only screen and (min-width: 767px) {
	.cases-list .cases-item div.fas:hover{background:  linear-gradient(0deg, #0296ff 0%, #2ad9ff 100%), linear-gradient(#0095ff, #0095ff);}
	.cases-list .cases-item div:hover p{color: #fff;}
	.cases-list .cases-item div:hover span img{top: -24px;}
}
@media only screen and (max-width: 767px) {
	.cases-item {width: 49%;}
}