.recbox {height:400px; position:relative; background:url('https://img.freepik.com/free-photo/business-hands-joined-together-teamwork_53876-14936.jpg?w=1380&t=st=1666896089~exp=1666896689~hmac=cf5ed342793773d66f92f26176aea063c09fd6c857499831510b2ac059d214ab') center 82%; background-size:cover; overflow:hidden; }
		.recbox img {max-width:45%;}
		.recbox:before {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(241,241,241,0.6); content:''; z-index:2;}
		.recbox .txtbox {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; text-align:center;}
		.recbox h2 {font-size:2.4rem;}

	.reccol {float:left; width:100%;}
		.reccol .one {float:left; width:23.5%; height:370px; margin:0 2% 4% 0; border:1px solid #ddd; text-align:center; padding:4rem 2rem;}
		.reccol .one:nth-of-type(4n) {margin-right:0;}
		.reccol i {font-size:5rem; 
				background: -moz-linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%));
			  background: -webkit-linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%);
			  background: linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%);
			  -webkit-background-clip: text;
			  -moz-background-clip: text;
			  background-clip: text;
			  -webkit-text-fill-color: transparent;}
		.reccol h3 {font-size:1.7rem; font-weight:700; margin:30px 0 20px 0;}
		.reccol p {color:gray;}

	.reccol2 {float:left; width:100%;}
		.reccol2 .one {margin:0 5% 5% 0; width:15%; float:left; text-align:center; position:relative; background:#fff}
		.reccol2 .one i {display:inline-block; border:1px solid #ddd; border-radius:100%; width:200px; height:200px; line-height:200px; font-size:5rem; background: -moz-linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%));
			  background: -webkit-linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%);
			  background: linear-gradient(84deg, #00a0e9 0%, #e12150 50%, #f9c915 100%);
			  -webkit-background-clip: text;
			  -moz-background-clip: text;
			  background-clip: text;
			  -webkit-text-fill-color: transparent; } 
		.reccol2 h3 {font-size:1.3rem; font-weight:500; margin:30px 0 20px 0; color:#424242;}
		.reccol2 .one:after {content:''; position:absolute;top:38%; width:100%; height:1px; background:#ddd; z-index:-1;}
		.reccol2 .one:last-child:after {display:none;}

@media (max-width:1280px) {
	.reccol .one {width:100%; margin:0 0 4% 0; height:initial; padding:2rem;}
	.reccol .one:nth-of-type(4n) {margin-right:0;}
	.reccol .one:nth-of-type(2n) {margin-right:0;}

	.reccol2 .one {width:100%; margin:0 0 5% 0;}
	.reccol2 .one i {width:180px; height:180px; line-height:180px;}
	.reccol2 .one:after {top:initial; bottom:0; left:50%; width:1px; height:100%;}

	.reccol .one h3 {font-size:1.4rem;}
	.reccol2 .one h3 {font-size:1.2rem;}
}