.tm-service-box {
	&.style-1 {
		margin-bottom: 30px;
		.photo img {
			border-radius: 5px 5px 0 0;
		}
		.info {
			text-align: center;
			background: #F3F5FA;
			background: -webkit-linear-gradient(#F3F5FA, #fff);
			background: -o-linear-gradient(#F3F5FA, #ffffff);
			background: -moz-linear-gradient(#F3F5FA, #fff);
			background: linear-gradient(#F3F5FA, #fff);
			margin: -20px 20px 0;
			padding: 20px;
			position: relative;
			z-index: 2;
			border-radius: 5px 5px 0 0;
		}
		.heading {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 5px;
		}
		.link {
			margin-top: 15px;
			i {
				margin-left: 5px;
			}
		}
	}
	&.style-2 {
		margin-bottom: 30px;
		position: relative;
		overflow: hidden;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			opacity: 0.8;
		}
		.info {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			text-align: center;
			width: 100%;
		}
		.inner {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			transform: translate(0, -50%);
			padding: 20px;
			@include transit;
		}
		.icon {
			font-size: 50px;
			line-height: 1;
			margin-bottom: 10px;
		}
		.heading {
			font-size: 20px;
			font-weight: 700;
			color: #ffffff;
			margin-bottom: 5px;
		}
		.link-wrap {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20px 0;
			transform: translate(0, 100%);
			@include transit;
		}
		.link {
			i {
				margin-left: 5px;
			}
		}
		&:hover {
			.inner {
				transform: translate(0,-70%);
			}
			.link-wrap {
				transform: translate(0,0);
			}
		}
	}

	&.style-3 {
		.swiper-slide > div {
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			&:before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0.8;
			}
			.info {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				text-align: center;
				width: 100%;
			}
			.inner {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				transform: translate(-50%, -50%);
				padding: 20px;
				@include transit;
				max-width: 330px;
			}
			.icon {
				font-size: 50px;
				line-height: 1;
				margin-bottom: 10px;
			}
			.heading {
				font-size: 20px;
				font-weight: 700;
				color: #ffffff;
				margin-bottom: 5px;
			}
			.link-wrap {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 20px 0;
				transform: translate(0, 100%);
				@include transit;
			}
			.link {
				i {
					margin-left: 5px;
				}
			}
			&:hover {
				.inner {
					transform: translate(-50%,-70%);
				}
				.link-wrap {
					transform: translate(0,0);
				}
			}
		}
		&.tm-swiper.nav-style-3 .swiper-nav-button.swiper-button-prev {
			width: 60px;
			left: -30px;
		}
		&.tm-swiper.nav-style-3 .swiper-nav-button.swiper-button-next {
			width: 60px;
			right: -30px;
		}
	}
}