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

/* 헤더 & 푸터 변경 */
	#header{background:#28315c; }
	#footer{clear:both;margin-top:80px}

/* 서브 공통 */
	#contents{padding-top:90px;}
	#contents:after{display:block;content:'';clear:both}
		.visual{width:100%;max-width:2000px;height:270px;overflow:hidden}	
		.visual img{position:absolute;left:50%;margin-left:-1000px}
			.util_menu{border-bottom:1px solid #ccc;padding-top:3px;background:#eee;text-align:center}
			.util_menu:after{display:block;content:'';clear:both}
			.util_menu li{display:inline-block;line-height:45px;padding-left:25px}
			.util_menu li:first-child{padding-left:0}
			.util_menu li a.on {color:#3a59ea;}
				.util_nav{max-width:1200px;margin:0 auto;padding:0 5px}
				.util_nav p{float:right;margin:20px 5px 0 0;font-weight:300;font-size:14px}

	

/* 서브 타이틀 */
.subTitle{clear:both;text-align:center;padding:50px 0 15px; font-family:"Jeju Gothic",serif;font-weight:normal;font-size:35px; color:#222; line-height:1;}
.subTitle:after {width:70px; height:2px; background:#1d6d8a; content:''; display:block; margin:15px auto 50px;}


/* 서브 공통 */
.sub {word-break:keep-all; line-height:1.7; font-size:16px;}
.sub h1, .sub h2, .sub h3, .sub h4, .sub h5 {font-weight:normal; color:#222;}

	.sub h2 {font-size:25px; position:relative; padding-left:15px;}
	.sub h2:before {width:5px; height:5px; background:#324abb; position:absolute; left:0; top:16px; content:''; border-radius:50%;}
	.sub h3 {font-size:25px;}
	.sub h4 {font-size:21px;}
	.sub h5 {font-size:18px;}

.sub .inner {width:100%; max-width:1200px; margin:auto; padding:0 15px;}
.sub .mb60 {margin-bottom:60px;}
.sub .mb25 {margin-bottom:25px;}
.sub .mb15 {margin-bottom:15px;}

.sub img {max-width:100%; vertical-align:middle;}
.sub i {color:#324abb;}

.sub table {table-layout:fixed; width:100%; border-top:1px solid #324abb}
.sub table tr {border-bottom:1px solid #ddd;}
.sub table tr.bg th {background:#eef1ff;}
.sub table tr th {padding:15px; background:#f9f9f9; color:#222; border-right:1px solid #ddd;}
.sub table tr th:last-child {border-right:0;}
.sub table tr td {padding:15px; border-right:1px solid #ddd;}
.sub table tr td:last-child {border-right:0;}


.sub table.tdCt tr td {text-align:center;}
.sub table tr td.bg_td {background:#f9f9f9; color:#222;}




/* 서브 */
/* 인사말 */
.sub .greeting_wrap {display:flex; justify-content:space-around; flex-wrap:wrap;}
.sub .greeting_wrap > div {width:50%;}
.sub .greeting_wrap h4 {color:#324abb; font-weight:500;}
.sub .greeting_wrap p.right {margin-top:60px;}
.sub .greeting_wrap p.center {color:#222;}

/* 교회소개 */
.sub .intro_wrap {}
.sub .intro_wrap span.sizeUp {font-size:21px;}
.sub .intro_wrap span.skycolor {color:#4a93dc;}
.sub .intro_wrap b {color:#222;}


/* 연혁 */
.sub .history {background:#fdfdfd url(/images/sub/bg_history.jpg) no-repeat bottom center; padding:50px; box-shadow:inset 0 10px 15px #eee;}
.sub .history h2 {background:url(/images/sub/bg_title.jpg) no-repeat; background-size:contain; height:50px; padding:10px 0 0 15px; margin-bottom:15px;}
.sub .history h2:before {display:none;}
.sub .history .line_in {border:8px solid #fff; padding:50px 50px 300px;}
.sub .history ul {width:96%; margin-left:2%;}
.sub .history li {display:flex; flex-wrap:wrap; margin-bottom:5px;}
.sub .history li span {width:170px; color:#222; font-weight:bold;}
.sub .history li p {width:calc(100% - 170px);}


/* 오시는길 */
.sub .load {display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;}
.sub .map {width:50%;}
.sub .map iframe {width:100%;}
.sub .addr {width:48%; padding-bottom:15px;}
.sub .load ul {}
.sub .load ul li {border-bottom:1px solid #ddd; margin-bottom:10px; padding-bottom:15px;}

/* 섬기는 사람들 */
.sub .pastor {}
.sub .pastor_box {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; background:#e5e5e5; border-radius:5px;}
.sub .pastor_img {width:55%;}

.sub .pastor_con {width:40%;}
.sub .pastor p {font-size:21px; color:#222;}
.sub .pastor p i {font-family:"Jeju Gothic",serif; font-size:36px; position:relative;}
	/* 목사 이름 강조 */
	.sub .pastor_box p i::before {content:''; width:5px; height:5px; background:#324abb; position:absolute; top:-14px; left:50%; margin-left:-2.5px;}

.sub .pastor ul {padding-left:10px;}
.sub .pastor ul li {position:relative; padding-left:15px;}
.sub .pastor ul li::before {position:absolute; content:'-'; left:0;}

.sub .missionary_box {width:49%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; border:1px solid #ddd; border-right-width:5px; border-bottom-width:5px; float: left; margin-bottom:30px;}
.sub .missionary_box:nth-child(even) {margin-right: 2%;}
.sub .missionary_box .ms_img {width:40%; max-width: 227px;}
.sub .missionary_box .ms_con {width:55%;}



/* 반응형 */
@media(max-width:1000px){
	#contents {padding-top:70px;}
	.util_menu{display:none}
	
	.sub {font-size:14px; line-height:1.5;}
	.sub h2 {font-size:22px;}
	.sub h3 {font-size:21px;}
	.sub h4 {font-size:18px;}
	.sub h5 {font-size:16px;}
	.sub .mb60 {margin-bottom:45px;}

	.sub .intro_wrap span.sizeUp {font-size:18px;}

	.sub .history {padding:25px}
	.sub .history .line_in {padding:25px 25px 320px;}
	.sub .history li span {width:150px;}
	.sub .history li p {width:calc(100% - 150px);}

	.sub .load > div {width:100%;}
	.sub .addr {margin-top:45px; padding-bottom:0;}

	.sub .pastor p {font-size:18px;}
	.sub .pastor p i  {font-size:27px;}
}


	
@media(max-width:768px){
	.visual{display:none}
		.subTitle{font-size:30px;padding:35px 0 5px;}
		.subTitle:after {margin-bottom:25px;}

	.sub .greeting_wrap > div {width:100%; text-align:center;}
	.sub .greeting_wrap p.center {margin-bottom:50px; width:280px; background:#faede4; border-radius:20px 0; 
								padding:0.5em; display:inline-block; position:relative; top:-10px;}

	.sub .intro_wrap p br {display:none;}

	.sub .history {padding:15px}
	.sub .history .line_in {padding:15px 15px 320px;} 
	.sub .history li {margin-bottom:15px;}
	.sub .history li span, .sub .history li p {width:100%;}

	.sub .pastor_img {text-align:center; width:80%; border-bottom:1px solid #444;}
	.sub .pastor_img img {max-width:450px; width:100%;}
	.sub .pastor_con {width:100%; padding:35px 25px 25px;}
	.sub .pastor_con p {text-align:center;}

	.sub .missionary_box {width:100%;}
}