@charset "utf-8";
/* CSS Document */

.service-main{
	margin:0;
	padding:0;	
	position:relative;
	z-index:1;
	min-height:122px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4a67b7+0,cdd8f6+16,ffffff+26 */
}
.service-main .s-left{
    margin: 0;
    padding: 0;
    width: 168px;
    margin-top: 57px;
	color:#1595ec;
	font: 18px/24px 'Kanit', Arial, sans-serif;	
}
.service-main .s-right{
	margin:0;
	padding:0;	
}
.service-main .s-block{
	width:312px;
	height:104px;
	padding-top: 14px;
	background:url(../images/services/banner.jpg) top left no-repeat;
	background-size:100%;
}
.service-main .s-block img{
	max-width:100%;
	height:auto;	
	transform: scale(1,1);
	transition: all 0.18s ease-in-out;
}
.service-main .s-block .icon{
	margin:0;
	padding:0;
	width: 95px;
	text-align:center;
	transition: all 0.18s ease-in-out;
}
.service-main .s-block:hover .icon{
	transform: scale(1.2,1.2);
	transition: all 0.18s ease-in-out;
}
.service-main .s-block .text{
	width: 168px;
	margin-left: 20px;
	font: 20px/25px 'Kanit', Arial, sans-serif;
	color:#ffffff;
}

@media (min-width: 375px) and (max-width: 419px) { 
	.service-main {
		min-height: 172px;
	}
	.service-main .s-block .text {
		width: 131px;
	}
 }
@media (min-width: 420px) and (max-width: 575px) { 
	.service-main {
		min-height: 172px;
	}
	.service-main .s-block .text {
		width: 131px;
	}
 }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }