@charset "UTF-8";
.workflow{
	background-color: #ebebf5;
}
#catch {
	position: absolute;
	width: 100%;
	height: 100vh;
	margin-top: 70px;
	background-image: url("../image/workflow-back.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	overflow: hidden;
	z-index: -1;
}
#workflow{
	max-width: 1024px;
	margin: 0 auto;
}
.leftRight{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	 -ms-flex-wrap: wrap;
  	flex-wrap: wrap;	
}
.rightLeft{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	 -ms-flex-wrap: wrap;
  	flex-wrap: wrap;	
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.categoryRight{
	position: relative;
	background-color: #fff;
	width: 30%;
	height: 150px;
	margin: 1.666%;
	border-radius: 30px;
}
.categoryRight::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #fff;
}
.categoryBottom{
	position: relative;
	background-color: #fff;
	width: 30%;
	height: 150px;
	margin: 1.666%;
	border-radius: 30px;
}
.categoryBottom::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 15px solid #fff;
	border-right: 15px solid transparent;;
	border-left: 15px solid transparent;;
	border-bottom: 15px solid transparent;;
}
.categoryLeft{
	position: relative;
	background-color: #fff;
	width: 30%;
	height: 150px;
	margin: 1.666%;
	border-radius: 30px;
}
.categoryLeft::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -15px;
	border: 15px solid #fff;
	border: 15px solid transparent;
	border-right: 15px solid #fff;
}
.categoryOut{
	position: relative;
	background-color: #fff;
	width: 30%;
	height: 150px;
	margin: 1.666%;
	border-radius: 30px;
}
.number {
	position: absolute;
	color: #fff;
	font-size:1.2em; 
	background-color: #0050c8;
	padding: 3px 5px;
	width: 25px;
	text-align: center;
	top:-10px;
	left: -10px;
	border-radius: 100%;
}
.workflow-icon{
	position: absolute;
	width: 25%;
	left:7%;
	top:30px;
}
.workflow-text{
	position: absolute;
	width: 58%;
	left:36%;
	top: 13px;
}
.workflow-text h3{
	font-size:1.1em; 
	letter-spacing: 0;
	color: #0050c8;
	text-align: center;
}
.workflow-text p{
	text-align: justify;
	font-size: 0.8em;
	padding: 10px 0 0 0;
}
#workFlowLine{
	margin: 15px 0 50px 15px;
}
@media screen and (max-width: 1024px) {
	#workflow{
		max-width: 90vw;
	}
	.workflow-icon{
		position: absolute;
		width: 15%;
		left:7%;
		top:20px;
	}
	.workflow-text{
		position: absolute;
		width: 67%;
		left:26%;
		top:20px;
	}
	.workflow-text h3{
		font-size:1.4em; 
	}
	.workflow-text p{
		font-size: 1em;
	}
	.categoryRight{
		position: relative;
		background-color: #fff;
		width: 100%;
		margin: 4% 0;
	}
.categoryRight::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #fff;
}
	.categoryRight::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin:0 0 0 -15px; 
		border: 15px solid #fff;
		border-right: 15px solid transparent;;
		border-left: 15px solid transparent;;
		border-bottom: 15px solid transparent;;
	}
	.categoryBottom{
		position: relative;
		background-color: #fff;
		width: 100%;
		margin: 2% 0;
	}
	.categoryBottom::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		border: 15px solid #fff;
		border-right: 15px solid transparent;;
		border-left: 15px solid transparent;;
		border-bottom: 15px solid transparent;;
	}
	.categoryLeft{
		position: relative;
		background-color: #fff;
		width: 100%;
		margin: 2% 0;
	}
	.categoryLeft::after{
		content: "";
		position: absolute;
		top: 100%;
		right: 50%;
		margin:0 -15px 0; 
		border: 15px solid #fff;
		border-right: 15px solid transparent;;
		border-left: 15px solid transparent;;
		border-bottom: 15px solid transparent;;
	}
	.categoryOut{
		position: relative;
		background-color: #fff;
		width: 100%;
		margin: 2% 0;
	}
}
	
@media screen and (max-width: 414px) {
	.workflow-icon{
		position: absolute;
		width: 25%;
		left:7%;
		top:30px;
	}
	.workflow-text{
		position: absolute;
		width: 60%;
		left:35%;
		top:20px;
	}
	.categoryRight{
		height: 200px;
	}

}