.tutotial{
	padding:70px 0;
	background-color: #f2f4f5;
}
.tutotial .title{
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}
.tutotial .product{
	margin: 20px 0;
}
.tutotial .product .image{
	text-align: center;
	margin: 20px;
}
.tutotial .product .image img{
	height: 230px;
	width: 230px;
}
.tutotial .product .type{
	color:#1E9FFF;
	font-weight: bold;
	font-size: 18px;
}
.tutotial .product .item{
	border: 1px solid #CCCCCC;
	padding: 20px 10px;
	position: relative;
}
.tutotial .product .item .text{
	color: #626262;
}
.tutotial .product .item::before,.product .item::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border:2px solid transparent;
	box-sizing: border-box;
	position: absolute;
}
.tutotial .product .item::before{
	top: -1px;
	left: -1px;
	z-index: 5;
	/*transition: border-color 0s ease-in 0.4s,width 0.1s ease-in 0.3s,height 0.1s ease-in 0.2s;*/
}
.tutotial .product .item::after{
	right: -1px;
	bottom: -1px;
	z-index: 5;
	/*transition:border-color 0s ease-in 0.2s,width 0.1s ease-in 0.1s,height 0.1s ease-in;*/
}
.tutotial .product .item:hover:before{
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transition:width 0.1s ease-in ,height 0.1s ease-in 0.1s;
	border-top-color:#1E9FFF;
	border-right-color:#1E9FFF;
}
.tutotial .product .item:hover:after{
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transition: border-color 0s ease-in 0.2s,width 0.1s ease-in 0.2s,height 0.1s ease-in 0.3s;
	border-bottom-color:#1E9FFF;
	border-left-color:#1E9FFF;
}
.tutotial .product .item:hover .text{
	color: #1E9FFF;
}
.tutotial .product .btns{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
.tutotial .product .image h2{
	color: #626262;
	margin-top: 30px;
}