@charset "utf-8";
.sevice_tile_section {
		overflow: hidden;
		padding-bottom: 240px;
		color: #1e1e1e;
		position: relative;
		z-index: 50;
}
@media(max-width: 960px) {
		.sevice_tile_section {
				padding-bottom: 160px;
		}
}
.sevice_tile_grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}
.sevice_tile_vt_gr {
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}
.sevice_tile_vt {
		box-sizing: border-box;
		width: 25%;
		pointer-events: none;
		position: relative;
}
.sevice_tile_vt::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: calc(50vw + 2px);
		background: #3C3C3C;
		transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleY(0);
		transform-origin: center top;
}
.sevice_tile_vt_gr .sevice_tile_vt:nth-child(2)::after {
		transition-delay: 0.4s
}
.sevice_tile_vt_gr .sevice_tile_vt:nth-child(3)::after {
		transition-delay: 0.8s
}
.sevice_tile_vt_gr .sevice_tile_vt:nth-child(4)::after {
		transition-delay: 1.2s
}
.tileActive .sevice_tile_vt::after {
		transform: scaleX(1);
}
.sevice_tile_vt_gr .sevice_tile_vt:last-child::after {
		display: none
}
.sevice_tile_hr {
		height: 1px;
		position: relative;
}
.sevice_tile_hr::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #3C3C3C;
		transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
		transform-origin: left center;
		transform: scaleX(0);
}
.sevice_tile_hr.seviceTileHrActive::after {
		transform: scaleX(1);
}
.sevice_tile {
		box-sizing: border-box;
		width: 25%;
		height: 25vw;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
}
.sevice_tile::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(211, 211, 211, 0);
		transition: background 0.4s;
		pointer-events: none;
		mix-blend-mode: multiply;
}
.sevice_tile .tile_no, .sevice_tile .tile_category {
		position: absolute;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 14px;
		font-weight: 300;
		color: #1e1e1e;
		left: 25px;
}
.sevice_tile .tile_no {
		top: 20px;
}
.sevice_tile .tile_category {
		bottom: 20px;
}
.tile_category a {
		color: #1e1e1e;
		text-decoration: none;
}
@media (hover: hover) {
		.sevice_tile:hover::after {
				background: rgba(211, 211, 211, 0.7);
		}
}
@media(min-width: 2001px) {
		.sevice_tile .tile_no, .sevice_tile .tile_category {
				font-size: 22px;
		}
		.sevice_tile .tile_no {
				top: 25px;
		}
		.sevice_tile .tile_category {
				bottom: 25px;
		}
}
@media(min-width: 768px) {
		.service_ex_hr {
				display: none;
		}
}
@media(max-width: 767px) {
		.sevice_tile, .sevice_tile_vt {
				width: 50%;
		}
		.sevice_tile {
				height: calc(50vw - 2px);
		}
		.sevice_tile_vt::after {
				height: calc(200vw - 4px);
		}
		.sevice_tile_vt_gr .sevice_tile_vt:nth-child(2)::after {
				display: none
		}
		.sevice_tile_vt_gr .sevice_tile_vt:nth-child(3)::after {
				display: none
		}
		.sevice_tile_vt_gr .sevice_tile_vt:nth-child(4)::after {
				display: none
		}
		.service_ex_hr {
				width: 100%;
				height: 1px;
				position: relative;
		}
		.service_ex_hr::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: #1e1e1e;
				transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
				transform: scaleX(0);
		}
		.service_ex_hr.serviceExHrActive::before {
				transform: scaleX(1);
		}
		.sevice_tile .tile_no, .sevice_tile .tile_category {
				font-size: 12px;
				left: 15px;
		}
}
/* =============== */