.pro_content{padding:60px 0;}
.pro_content .list{list-style:none;}
.pro_content .list li{margin-bottom:30px;}
.pro_content .list li:nth-child(3n+2){animation-delay:0.1s;}
.pro_content .list li:nth-child(3n+3){animation-delay:0.2s;}
.pro_content .list li > .box{background:#e7e7e7;overflow:hidden;border:1px solid #e7e7e7;border-bottom:2px solid #117cc0;}
.pro_content .list li .image{overflow:hidden;display:block;padding:20px 10px;}
.pro_content .list li .image img{max-width:100%;height:auto;transition:all .5s;}
.pro_content .list li:hover .image img{-webkit-transform:scale(var(--scale-multiplier,1.05));
	-ms-transform:scale(var(--scale-multiplier,1.05));
	transform:scale(var(--scale-multiplier,1.05));}
.pro_content .list li .main{position:relative;padding:30px 20px 20px 20px;border:none;margin-top:0;z-index:1;transition:all .5s;}
.pro_content .list li .main:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	bottom:0%;
	right:0;
	background:#fff;
	transform-origin:100% 50%;
	transform:skewY(-3deg);
	will-change:transform;
	transition:all .3s ease;
	pointer-events:none;
	display:block;
}
@media only screen and (min-width: 992px){
	.pro_content .list li:hover .main:before{transform:none;bottom:0;left:0;right:0;}
}
.pro_content .list li .main > .box{position:relative;z-index:2;}
.pro_content .list li .title{color:#333333;font-size:16px;line-height:22px;font-family:'poppins_sb';text-transform:capitalize;display:block;overflow:hidden;transition:all .5s;margin-bottom:15px;margin-top:10px;}
.pro_content .list li .text{color:#808080;font-size:12px;line-height:20px;overflow:hidden;height:40px;}
.pro_content .list li .main .button{display:inline-block;position:absolute;top:0;left:50%;will-change:transform;transition:all .3s ease;transform:translate3d(180%, -100%, 0);width:56px;height:56px;border-radius:50%;}
@media only screen and (min-width: 768px){
	.pro_content .list li:hover .main .button{transform:translate3d(-50%, -100%, 0);}
	.pro_content .list li:hover .main:before{background:#117cc0;}
	.pro_content .list li:hover .title{color:#fff;text-decoration:none;}
	.pro_content .list li:hover .text{color:#fff;}
}

@media only screen and (max-width: 1200px){
	.pro_content{padding:30px 0;}
	.pro_content .list li .main{text-align:center;padding:20px 10px;}
	.pro_content .list li .main .button{transform:translate3d(-50%, -100%, 0);width:42px;height:42px;}
	.pro_content .list li .main:before{transform:none;bottom:0;left:0;right:0;}
}
@media only screen and (max-width: 768px){
	.pro_content .list li{padding:0 10px;margin-bottom:20px;}
	.pro_content .list li .title{font-size:14px;}
}
@media only screen and (max-width: 480px){
	.pro_content .list li{padding:0 5px;}
	.pro_content .list li .main{padding:10px 5px;}
	.pro_content .list li .title{margin-bottom:0;margin-top:5px;font-size:12px;font-family:'poppins';line-height:18px;height:36px;}
	.pro_content .list li .text{display:none;}
	.pro_content .list li .main .button{width:28px;height:28px;background-size:12px;}
}