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

/* title */
#title{
	background: url("../img/title_bg.jpg");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	min-height: 400px;
	margin: 0 auto;
	padding: 70px;
	margin-top: -80px;
}
#title .title_wrapper{
	max-width: 1480px;
}
#title h2{
	color:#0C5EA4;
	font-size: 60px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	margin-top: 80px;
}
#title p{
	color:#0C5EA4;
	font-size: 20px;
}

@media screen and (max-width: 767px) {
	#title{
		padding:60px 20px;
		margin-top: -40px;
	}
	#title h2{
		font-size: 40px;
	}
}


/* contents_wrapper */
#contents_wrapper{
	background: rgb(245,246,248);
	background: linear-gradient(90deg, rgba(245,246,248,1) 70%, rgba(255,255,255,1) 70%);
	padding: 130px 0;
	margin: 0 auto;
}
#contents_wrapper .service_box{
	max-width: 1480px;
	padding: 50px 70px;
	margin: 0 auto;
	padding-bottom: 100px;
}
#contents_wrapper .service_img{
	width: 50%;
}
#contents_wrapper .service_img{
	z-index: 100;
	align-self: flex-start;
}
#contents_wrapper .service_img img{
	width: calc(100% + 70px);
	max-width:calc(100% + 70px);
	height:auto;
	object-fit: cover;
	margin-left: -70px;
}
#contents_wrapper .service_text{
	padding:50px 50px 50px 130px;
	background: rgb(18,123,197);
	background: linear-gradient(90deg, rgba(18,123,197,1) 0%, rgba(6,66,134,1) 100%);
	margin-bottom: -100px;
	margin-left: -80px;
	align-self: flex-end;
	width:calc(50% + 80px);
}
#contents_wrapper .service_text h3{
	color:#fff;
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 40px
}
#contents_wrapper .service_text p{
	color:#fff;
	font-size: 17px;
	font-weight: 500;
	line-height: 2;
	text-align: justify;
}


@media screen and (max-width: 767px) {
	#contents_wrapper{
		padding: 60px 0;
	}
	#contents_wrapper .service_box{
		flex-direction: column;
		padding: 30px 20px;
	}
	#contents_wrapper .service_img{
		width: 90%;
	}
	#contents_wrapper .service_img img{
		width: calc(100% + 20px);
		max-width:calc(100% + 20px);
		margin-left: -20px;
	}
	#contents_wrapper .service_text{
		padding:60px 30px 30px 30px;
		background: rgb(18,123,197);
		background: linear-gradient(90deg, rgba(18,123,197,1) 0%, rgba(6,66,134,1) 100%);
		margin-bottom:0;
		margin-top: -30px;
		margin-left: -30px;
		align-self: flex-end;
		width:100%;
	}
	#contents_wrapper .service_text h3{
		font-size: 24px;
	}
	#contents_wrapper .service_text p{
		font-size: 14px;
	}
}