/* 인코딩: utf-8 */

/* 팝업 */
.ez-popup-close { background-color:#222 !important }

/*--- div 초기화 ---*/
.cle:after{clear: both; content: ""; display: block;}
.cle {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */


/* 글자색 설정 */
.white { color:#fff !important }
.gray { color:#999 !important }
.blue { color:#3375be !important }
.pink { color:#ff6473 !important }

/* 배경색 설정 */
.bg-gray { background-color:#f5f5f5 }
.bg-sblue { background-color:#dbf1f9 }
.bg-navy { background-color:#8edf8 }

/* 버튼 설정 */
.page-btn { height:45px; padding:0 55px; line-height:45px; font-size:18px; color:#fff; border:0; border-radius:30px; transition:0.25s all }
.page-btn:hover { transition:0.25s all }
.btn-blue { background-color:#3375be }
.btn-blue:hover { background-color:#15569d }

/* 탭 설정 */
.sub.ez-tab { margin:45px 0; padding:0; font-size:0; text-align:center }
.sub.ez-tab li { float:none; display:inline-block; padding:0 }
.sub.ez-tab li a, .sub.ez-tab li.active a { height:auto; margin:0; padding:0 40px; font-size:18px; font-weight:500; line-height:50px; color:#1b1b1b; border:1px solid #ccc; border-radius:0; background-color:transparent;transition:0.25s all; }
.sub.ez-tab li.no-view-for-line { border:0 }
.sub.ez-tab { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:50px 0; }
.sub.ez-tab li.active a, .sub.ez-tab li a:hover { color:#fff; border:1px solid #f65f7b; background-color:#fe6c87; box-shadow:1px 3px 5px rgba(0,0,0,0.3) }

/* 서브페이지 공통 */
.page-wrap { margin-top:50px; }
.page-wrap:first-child { margin-top:0 }
.page-ti { font-size:30px; font-weight:600; color:#1b1b1b }
.page-info { margin-top:15px; font-size:17px }
.page-sti { margin-top:25px; padding:5px 0 5px 27px; font-size:18px; font-weight:600; color:#fe6c87; background:url(/img/sub/icon_ti.png) no-repeat 0 0 }
.page-sti:first-child { margin-top:0 }
.img-radius { border-radius:15px }
.box-b { padding:3%; border:1px solid #ccc }
.w15 { width:15% }
.w25 { width:25% }
.w35 { width:35% }
.w45 { width:45% }
.w50 { width:50% }
.w60 { width:60% }
.w70 { width:70% }
.w80 { width:80% }

/* 리스트 스타일 설정 */
.lst { margin:0; padding:0; font-size:0 }
.lst li { position:relative; float:left; margin-left:2% }
.lst-1 li { width:100%; margin-left:0 !important }
.lst-2 li { width:49% }
.lst-2 li:nth-child(1) { margin-left:0 }
.lst-3 li { width:32% }
.lst-3 li:nth-child(3n+1) { margin-left:0 }
.lst-4 li { width:23.5% }
.lst-5 li { width:18.4% }
.lst-b li { border:1px solid #cccc }
.lst-left li { padding-left:25px !important; text-align:left !important }

.lst-dot li { margin:8px 0; padding-left: 23px !important; text-align:left !important }
.lst-dot li:before { position:absolute; top:9px; left:8px; content:""; width:6px; height:6px; background:#333; border-radius:50% }

.lst-service { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.lst-service li { width:calc((100% - 20px) / 3); padding:10px; font-size:17px; text-align:center; font-weight:500; border-radius:5px; }
.lst-service2 li { width:100%; padding:10px 20px;text-align:left; }
.lst-service li:nth-child(odd) { background-color:#ffebf1 }
.lst-service li:nth-child(even) { background-color:#e2f0ff }

.lst-flow { margin-top:15px; padding:5% 0.5%; border:1px solid #ccc }
.lst-flow li { min-height:260px; padding:0 15px; text-align:center }
.lst-flow li:first-child { margin-left:0 }
.lst-flow li::before { position:absolute; top:65px; left:-9%; content:""; width:15px; height:24px; background:url(/img/sub/icon_arrow.png) }
.lst-flow2 li::before { top:100px !important }
.lst-flow li:nth-child(1)::before { background:none }
.flow-ti { margin:15px 0 5px 0; font-size:20px; font-weight:500; color:#303068 }
.flow-sti { margin-bottom:15px; font-weight:600; color:#3375be }

/* 플렉스 설정 */
.flex {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	transition:0.3s all;
}

/* 테이블설정 */
.tbl { width:100%; margin-top:15px; border-top:2px solid #1e5fa5; border-bottom:1px solid #ddd }
.tbl + .tbl { margin-top:50px }
.tbl th { padding:1.2%; font-weight:500; text-align:center; word-break:normal !important; background:#f0f7ff; border-top:1px solid #ddd }
.tbl td { padding:1.2%; font-size:17px; text-align:center; word-break:normal !important; border-top:1px solid #ddd; color:#444 }
.tbl th + th, .tbl th + td, .tbl td + th, .tbl td + td { border-left:1px solid #ddd }

 .tbl.tbl-senior thead th:nth-child(2), .tbl.tbl-senior td { text-align:left !important }

/* 미션-비전 */
.mission { margin:15px 0; padding:1%; background-color:#43a2e2; border-radius:100px }
.mission:nth-child(1n+1) { background-color:#ffebf1 }
.mission:nth-child(2n+1) { background-color:#e2f0ff }
.mission dt { float:left; width:75px }
.mission dt span { display:block; width:75px; height:75px; font-size:50px; font-weight:400; text-align:center; line-height:75px; border-radius:50%; background-color:#fff }
.mission dd { float:left; padding-left:25px; margin-top:8px }
.mission-ti { font-size:20px; font-weight:500; color:#3375be }
.mission:nth-child(1n+1) .mission-ti { color:#fe6c87 }
.mission:nth-child(2n+1) .mission-ti { color:#3375be }

/* CI 소개 */
.ci-symbol { padding-left:350px; background:url(/img/sub/ci-symbol.png?211223) no-repeat 5% center }
.ci-type li { float:left; width:49%; margin:1% 0 1% 2%; padding:20px 10px; text-align:center; border:1px solid #ccc }
.ci-type li:nth-child(2n+1) { margin-left:0 }
.ci-type li img { width:400px }

/* 연혁 */
.his-ti { font-size:50px }
.his-bg { background-position:right 15px; background-repeat:no-repeat }
.his-bg1 { background-image:url(/img/sub/history01.png) }
.his-bg2 { background-image:url(/img/sub/history02.png) }
.his-bg3 { background-image:url(/img/sub/history03.png) }
.his-bg4 { background-image:url(/img/sub/history04.png) }
.hitory { border-left:1px dashed #dcdcdc }
.hitory li { position:relative; display:block; margin:15px 0; padding-left:130px; font-size:17px }
.hitory li span { position:absolute; left:20px; font-weight:600; color:#3375be }
.hitory li span::before { position:absolute; top:10px; left:-25px; content:""; width:10px; height:10px; background-color:#ccc; border-radius:50% }

/* 오시는 길 */
.map-info { margin-top:15px }
.map-info li { font-size:18px; padding:10px 0 10px 105px; background-repeat:no-repeat; background-position:0 9px }
.map-info li span { position:absolute; left:50px; font-weight:600 }
.map-info li:nth-child(1) { background-image:url(/img/sub/icon_map.png) }
.map-info li:nth-child(2) { background-image:url(/img/sub/icon_tel.png) }
.map-info li a { color:#333 }


/* 후원-자원봉사 */
.sponsor-img { float:left; width:45% }
.sponsor-info { float:right; width:50% }
.sponsor-ti { font-size:23px; font-weight:600 }
.sponsor-txt { margin:25px 0; font-size:18px }

.vms { margin-top:20px; }
.vms img { float:left;  margin:0 20px 10px 0;; }
.vms .vms-txt { float:left; }
.vms .vms-txt h2 { color:#ff6473; font-size:20px; }

/* 입소안내 */
.sub_quick {
	position:fixed;
	right:100px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:10px;
	padding:20px 10px;
	text-align:center;
	background:#f8d2c0;
	box-shadow:3px 5px 10px rgba(0,0,0,0.2);
	border-radius:100px;
	z-index:999;
	a, button {
		display:block;
		color:#333;
		font-weight:500;
		background: none;
		border: none;
	}
}
[popover] iframe {
	width: 90vw;
	height: 90vh;
	max-width: 1000px;
	border-radius: 10px;
}

/* 시설안내 */
.facil.flex {
	gap:20px;
	> li {
		width:calc((100% - 20px) / 2);
		img { border-radius:8px; }
		p {
			margin-top:10px;
			font-size:18px;
			font-weight:500;
			text-align:center;
		}
	}
}

/* Laptop */
@media only screen and (max-width: 1024px) {
	/* 입소안내 */
	.sub_quick {
		bottom:0;
		left:0;
		right:inherit;
		flex-direction:row;
		justify-content:center;
		width:100%;
		padding:10px;
		border-radius:10px 10px 0 0;
		a, button {
			display:flex;
			align-items:center;
			justify-content:center;
		}
	}
}

/* Tablet */
@media only screen and (max-width: 768px) {

	/* 서브페이지 공통 */
	.page-wrap { margin-top:35px }
	.w15, .w25, .w35, .w45, .w50, .w60, .w70, .w80 { width:100% }
	.w50, .w60, .w70, .w80 { margin-top:35px }

	/* 탭 설정 */
	.ez-tab li a, .ez-tab li.active a { padding:0 25px }

	/* 테이블 설정 */
	.tbl th, .tbl td { padding:10px 5px; font-size:15px }
	.tbl-scroll { overflow-x:auto  }
	#min-size { min-width:750px }
	#min-size2 { min-width:500px }

	/* 리스트 설정 */
	.lst-4 li, .lst-5 li { width:32% }
	.lst-flow li:nth-child(3n+1) { margin-left:0 }

	.lst-flow li:nth-child(4)::before { left:10px }

	/* 연혁 */
	.his-ti { font-size:30px }
	.w80.right.hitory { margin-top:15px }

	/* 오시는길 */
	.map-info li { width:100%; margin:0 }
}

/* Mobile */
@media only screen and (max-width: 540px) {
	/* 버튼 설정 */
	.page-btn { height:35px; padding:0 25px; line-height:35px; font-size:16px }

	/* 탭 설정 */
	.ez-tab li a, .ez-tab li.active a { line-height:40px; padding:0 10px; font-size:16px }
	.sub.ez-tab { margin:25px 0 }
	.sub.history.ez-tab li { float:left; width:48%; margin:1% !important }
	.sub.history.ez-tab li:nth-child (2n+1) { margin-left:0 }

	/* 서브페이지 공통 */
	.page-wrap { margin-top:35px }
	.page-ti { font-size:21px }
	.page-info { margin-top:10px; font-size:15px }
	.page-sti { margin-top:35px; padding:5px 0 5px 27px; font-size:18px; font-weight:600; color:#fe6c87; background:url(/img/sub/icon_ti.png) no-repeat 0 0 }

	/* 리스트 설정 */
	.lst-3 li, .lst-4 li, .lst-5 li { width:100%; margin-left:0 }
	.lst-flow { padding:7% 5% }
	.lst-flow li { min-height:inherit; margin-top:55px; }
	.lst-flow li:first-child { margin-top:0 }
	.lst-flow li::before { position:absolute; top:-45px; left:calc(50% - 7px); transform:rotate(90deg) }
	.lst-flow li:nth-child(4)::before { left:calc(50% - 7px) }
	.lst-flow li img { width:120px; }
	.lst-flow2 li::before { top:-35px !important }
	.lst-service li { width:100%; }
	.flow-ti { font-size:18px }

	/* 테이블설정 */
	.tbl th, .tbl td { font-size:15px }

	/* 미션-비전 */
	.mission { padding:5%; border-radius:10px }
	.mission dt { width:100%; text-align:center }
	.mission dt span { width:45px; height:45px; font-size:25px; font-weight:500; line-height:45px }
	.mission dd { padding-left:0 }
	.mission-ti { font-size:17px }

	/* CI 소개 */
	.ci-symbol { padding:250px 25px 25px; background:url(/img/sub/ci-symbol.png) no-repeat center 25px; background-size:200px }
	.ci-type li { width:100%; margin:1% 0; padding:25px }

	/* 연혁 */
	.his-bg { background:none }
	.hitory li { padding-left:110px; font-size:15px }
	.hitory li span::before { top:7px }

	/* 오시는길 */
	.map-info li { font-size:15px; padding:10px 0 10px 75px; background-size:28px; background-position:0 8px }
	.map-info li span { left:37px }

	/* 후원-자원봉사 */
	.sponsor-ti { font-size:20px }
	.sponsor-txt { font-size:16px }
	
	/* 시설안내 */
	.facil.flex {
		gap:10px;
		> li {
			width:calc((100% - 10px) / 2);
			p {
				margin-top:5px;
				font-size:16px;
			}
		}
	}
}

/* Mobile */
@media only screen and (max-width: 320px) {/* 시설안내 */
	.facil.flex {
		> li { width:100%; }
	}
}