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


/* 서브시작 */

	/* 서브 공통 */ 
	.sub {font-size:17px; word-break:keep-all; line-height:1.6;}
	
	.sub img {max-width:100%;}

	/* 서브타이틀 */
	.sub h3 {margin-bottom:15px; position:relative; padding-left:15px; line-height:1.3}
	.sub h3:before {background:#f1c54f; width:3px; height:30px; content:''; vertical-align:middle;
					position:absolute; left:0; top:3px;}
	.sub h3 span {font-family: 'BMYEONSUNG'; font-size:36px; vertical-align:middle; line-height:1}
	
	.sub .mb50 {margin-bottom:50px;}
	.sub .mb15 {margin-bottom:15px;}

	.sub .flex {display:flex; justify-content:space-between; flex-wrap:wrap;}


	.sub .be_tag p {position:relative; padding-left:30px;}
	.sub .be_tag p:before {content:''; width:5px; height:5px; border-radius:50%; background:#68a253; position:absolute; left:15px; top:10px;}
	.sub .be_tag p b {color:#1270b7;}

	

/* 서브메뉴 */
.three_menu {display: flex; flex-direction: row; justify-content: center; align-items: center; margin-bottom: 30px;}
.three_menu li {border: 1px solid #ddd; padding: 5px 20px; margin-right: 15px; cursor: pointer; font-size: 16px; box-sizing: border-box;}
.three_menu li.active {border: 1px solid #1270b7; color: #1270b7;}
.three_menu li:hover {border: 1px solid #1270b7; color: #1270b7; cursor: pointer;}
.three_menu li:last-child {margin-right: 0px;}


/* 나무들의집 소개 */
.intro ul {display:flex; flex-wrap:wrap; justify-content:space-around;}
.intro ul li {margin:0 0.25%; flex:1;}
.intro ul li div {padding:20px 15px;}
.intro ul li h4 {margin-bottom:15px; font-weight:bold; line-height:1.3;} 



/* 연혁 */



/* 시설안내 */
.floor h3 i {font-size:18px; color:#aaa;}
.floor .floor_img {text-align:center; border:1px solid #ddd;}
.floor .flex > div {width:48%;}
.floor .flex p, 
.floor .flex table {margin-bottom:25px;}

/* 섬기는분*/
.manager h3.center {margin-bottom:50px;}
.manager h3.center:before {display:none;}
.manager .ppBox {width:49%; box-sizing:border-box; border:1px solid #eee; border-right-width:4px; border-bottom-width:4px; padding:15px; align-items:center;}
.manager .ppBox:nth-child(n+3) {margin-top:15px;}
.manager .box1 {width:33%;}
.manager .box2 {width:65%;}
.manager h4 {margin-bottom:15px;}
.manager h4 b {color:#3c9c1a;}



/* 오시는길 */
.map .root_daum_roughmap {width:100% !important;}





/* 이용규칙 */
.rule div.bg {background:#cbe0c3; padding:25px; border-radius:20px; border:1px solid #75a963;}
.rule .bg .bg_in {background:#fff; padding:25px; border-radius:20px;}
.rule .bg .bg_in p:not(:last-child) {margin-bottom:15px;}
.rule .bg .bg_in p {color:#222;}
.rule .bg .bg_in span {font-size:15px; color:#aaa; display:inline-block; line-height:1.5;}
.rule .bg .bg_in table {width:calc(100% - 30px); margin-left:30px;}
.rule .bg .bg_in table td {text-align:center;}


/* 이용문의 */
.inquiry h3.center {margin-bottom:50px;}
.inquiry h3.center:before {display:none;}
.inquiry .flex > div {width:49%; text-align:center; border:1px solid #ddd; position:relative;}
.inquiry .icon {width:80px; height:80px; background:#fff; border-radius:50%; position:absolute; left:50%; margin-left:-40px; top:-40px; line-height:80px;}
.inquiry .inq_bg {padding:50px 15px 15px;}
.inquiry .flex > div:nth-child(1) .inq_bg {background:#bdeaf1;} /*#f1c54f*/
.inquiry .flex > div:nth-child(2) .inq_bg {background:#a4e2d4;}
.inquiry .inq_txt {padding:15px}




/* 반응형 */
@media(max-width:1200px){
	/* .intro br {display:none;} */
}
@media(max-width:1024px){
	.sub {font-size:15px;}

	.sub_menu{display:none}
	/* .visual{display:none} */
	.sub_con {padding:50px 0;}

	.intro ul li {flex:inherit; width:49%; max-width:330px;}
	.rule .bg .bg_in span {font-size:13px;}
}


@media(max-width:920px){

	/* 서브메뉴 */
	.three_menu {width:90%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap;}
	.three_menu li {border: 1px solid #ddd; padding: 5px 0px; margin-right: 10px; margin-bottom: 15px; cursor: pointer; font-size: 14px; width: 48%; text-align:center;}
	.three_menu li:nth-child(2n) {margin-right: 0px;}
	.three_menu li:nth-child(3n) {margin-right: 10px;}
	.three_menu li.active {border: 1px solid #1270b7; color: #1270b7;}
	.three_menu li:hover {border: 1px solid #1270b7; color: #1270b7; cursor: pointer;}
	.three_menu li:last-child {margin-right: 0px;}
}



@media(max-width:767px){
	.sub h3:before {height:20px;}
	.sub h3 span {font-size:30px;}

	.history ul:before {left:25px;}
	.history ul li {width:100%;}
	.history ul li:before {width:20px;}
	.history ul li:nth-child(odd) {text-align:left; padding-right:0; padding-left:50px;}
	.history ul li:nth-child(odd):before {right:0; left:12px;}
	.history ul li:nth-child(odd):after {right:0; left:-15px;}
	.history ul li:nth-child(odd) h2:before {right:0; left:30px;}

	.history ul li:nth-child(even) {padding-left:50px;}
	.history ul li:nth-child(even) h2:before {left:30px;}

	.intro ul li {width:100%; max-width:330px;}

	.rule div.bg {padding:15px;}
	.rule .bg .bg_in {padding:25px 15px;}

	.floor h3 i {font-size:15px;}
	.floor .flex > div {width:100%;}
	.floor .flex > div:first-child {margin-bottom:50px;}
	.floor .flex p br {display:none;}
	
	.manager .box1, 
	.manager .box2 {width:100%; text-align:center;}

	.manager p {display:none;}
	.manager h4 {margin-bottom:0; margin-top:15px;}

	.inquiry .flex > div {width:100%;}
	.inquiry .flex > div:last-child {margin-top:50px;}
}


@media(max-width:450px){
	h1 {
		font-size: 28px;
	}

	#contents h1:after {
		content: '';
		display: block;
		background: #dfecfa;
		position: absolute;
		height: 20px;
		width: 100%;
		left: -15px;
		bottom: -2px;
		z-index: -1;
		padding: 0 15px;
	}
}