@charset "utf-8";
@font-face {
    font-family: 'BMYEONSUNG';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMYEONSUNG.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HakgyoansimGaeulsopungB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimGaeulsopungB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'HakgyoansimGaeulsopungB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimGaeulsopungB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* font-family: 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* font-family: 'Nanum Gothic', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

/* font-family: 'NanumBrush';*/
@font-face {
    font-family: 'NanumBrush';
    src: url('https://cdn.jsdelivr.net/gh/wizfile/font/NanumBrush.eot');
    src:url('https://cdn.jsdelivr.net/gh/wizfile/font/NanumBrush.woff') format('woff');
    font-style: normal;
}

/* CSS Document */
#header {border-bottom:1px solid #ddd}
#contents {width:100%; margin:0 auto}
#contents:after {display:block;content:'';clear:both}


	/* 서브 배너 */
	.visual {width:100%; height:400px; line-height:0; overflow:hidden; position:relative;}
	.visual img{width:1920px; position:absolute; left:50%; margin-left:-960px}

	/* 서브 2차 메뉴 */
	.sub_menu {z-index:50 !important; text-align:center; background: #e8a63a;}
	.sub_menu:after {display:block;content:'';clear:both}
	.sub_menu > li {display:inline-block}
	.sub_menu > li a {display:block; padding:15px; color:#fff;}
	.sub_menu > li.on > a {color:#333}
	
	.sub_con {padding:80px 0 150px;}

	/* 페이지 타이틀 */
	#contents .sub_tt {text-align:center;}
	#contents h1 {text-align:center; margin-bottom:80px; position:relative; display:inline-block; font-weight:500; z-index:5;}
	#contents h1:after {content:''; display:block; background:#e6fadf; position:absolute; height:20px; width:100%; 
						left:-15px; bottom:5px; z-index:-1; padding:0 15px;}

.mt30 {margin-top: 30px;}
.mt100 {margin-top: 100px;}

	
.p_title {
    font-size: 22px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 600;
	margin-bottom: 10px;
	word-break: keep-all;
    padding-left: 18px;
    position: relative;
    line-height: 22px;
}

.p_title::before {
	content: "";
    margin-right: 5px;
    position: absolute;
    left: 0px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ab790;
    color: #9ab790;
}

.p_title.t_icon img {
    margin: 0 1rem 0.5rem 0;
    max-width: 100%;
    border: 0 none;
    font-size: 0;
    vertical-align: middle;
}

.sub {
    width: 100%;
    max-width: 1200px;
    padding: 0 0px;
    margin: 0 auto;
}


.sub_all .cont {
    background: #fff;
    /* padding: 30px 0 75px; */
    margin-top: 0px;
    margin-bottom: 30px;
	overflow: hidden;
}

.sub_all .ptye1 {
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
}

.sub_all .ptye1 li {
    height: 172px;
}

.sub_all .ptye1 li {
    float: left;
    border: 1px solid #ddd;
	border-top: 3px solid #9ab790;
    background: #fff;
	width: 48.5%;
	height: auto;
	margin: 0% 3% 25px 0%;
    padding: 15px 25px;
    line-height: 0;
    border-radius: 0px 0px 10px 10px;
	min-height: 196px;
}

.sub_all .ptye1 li:nth-child(2n) {
	margin: 0% 0% 0px 0%;
}

.sub_all .ptye1 img {
    border: 1px solid rgba(0,0,0,0.075);
    width: 30%;
    max-width: 130px;
    float: left;
}

.sub_all .ptye1 div {
    width: 70%;
    float: right;
    padding-left: 20px;
}

.sub_all .ptye1 h6 {
    font-size: 20px;
    color: #222;
    line-height: 27px;
}

.sub_all .ptye1 p {
    text-align: left;
    font-size: 15px;
    color: #666;
    line-height: 24px;
    margin-top: 10px;
    border-top: 1px dotted #ddd;
    padding-top: 10px; 
	display: block;

    position: relative;
    margin-bottom: 5px;
    padding-left: 30px;
    word-break: keep-all;
}


.sub_all .ptye1 p > img {
    position: absolute;
    left: 0;
    padding-bottom: 25px;
    float: left;
    margin-right: 5px;
	width: 22px;
    border: 0;
}


/* 쉼터안내 */
.pc_on {display:block;}
.m_on {display: none;}
.sub_tit {font-size:24px; font-weight: 500; margin-bottom: 44px; position:relative; padding-left:12px;}
.sub_tit:before {content:""; width:3px; height:20px; position:absolute; top:7px; left:0; background-color:#e8a63a;display: inline-block;}
.text_1 {font-size:24px; margin-bottom: 80px;}
.text_1 > span {position: relative;}
.text_1 > span:after   {content: ''; position: absolute; bottom: 0;left: 0; width: 100%; height: 55%;background-color: #fae4b9; z-index: -1;}
.list1 {display: flex; flex-direction: row;  justify-content: space-between;}
.list1 > ul {text-align: left; width: calc(50% - 12px); box-sizing: border-box; padding: 30px; border-radius: 12px;}
.list1 > ul > li {font-size: 18px;  line-height: 38px; display:flex; width:100%}
.list1 > .ylist > li > div {width:180px; text-align: center; color: #fff; background-color: #e8a63a; margin: 0 22px 22px 0; line-height: 38px; height:38px; border-radius: 22px; word-break: break-all}
.list1 > .glist > li > div {width:180px; text-align: center; color: #fff; background-color: #9ab790; margin: 0 22px 22px 0; line-height: 38px; height:38px; border-radius: 22px; word-break: break-all}
.list1 > ul.ylist { border: 3px solid #e8a63a;}
.list1 > ul.glist {border: 3px solid #9ab790;}
.list1 > .ylist > li:last-child  > div {margin: 0 22px 0 0;}
.list1 > .glist > li:last-child  > div {margin: 0 22px 0 0;}


/* 이용안내 */
.system1 {display: flex; flex-direction: row; justify-content: space-between; flex-wrap:wrap;}
.system1 div:last-child {padding: 0 !important;}
.s_pic1, .s_pic2, .s_pic3, .s_pic4, .s_pic5, .s_pic6 {width:150px; height: 150px; border-radius: 75px; background-color: #e6fadf; margin: 0 auto; position:relative;}
.s_pic1 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.s_pic2 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.s_pic3 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.s_pic4 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.s_pic5 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.s_pic6 > img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.step1, .step2, .step3, .step4, .step5, .step6 {position: relative; height:270px;text-align: center; align-content: end;}
.step_tit {color: #9ab790; z-index: -1; font-size: 24px; font-weight: 900;}
.step {padding:12px 0; font-size:18px; font-weight: 600;}


/* 주요 프로그램 */
.con_box_list {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.con_box {width: calc(50% - 11px);margin-bottom:22px; border-radius: 12px;}
.box_tit {text-align: center; font-size:24px;font-weight: 500; background-color: #e8a63a; width:100%; color:#fff; padding: 12px 0; border-radius: 12px 12px 0 0;}
.box_con {border-width: 1px 0 1px 1px; border:#eee solid; width:100%; text-align: center; padding: 24px; font-size: 16px; border-radius: 0 0 12px 12px;}


/* 설립목적 및 비전 */
.box {display:flex; flex-direction:row; flex-wrap: wrap; padding-bottom:80px; }
.box:last-child {padding-bottom:0px;}
.pic1 {height:230px; width: 34%; margin-right:2%; background:url(/images/sub/vision01.png) no-repeat; background-size: cover;  border-radius:12px;}
.pic2 {height:230px; width: 34%; margin-right:2%; background:url(/images/sub/vision02.png) no-repeat; background-size: cover; border-radius:12px;}
.pic3 {height:230px; width: 34%; margin-right:2%; background:url(/images/sub/vision03.png) no-repeat; background-size: cover; border-radius:12px;}
.list_2 {margin-top:12px;}
.list_2 > li {font-size: 16px; line-height: 24px; position:relative; padding-left:12px;}
.list_2 > li:before {content:""; width:3px; height:3px; position:absolute; top:10px; left:0; background-color:#666; display: inline-block;}
.sub_tit2 {font-size:24px; font-weight: 500; margin-bottom: 24px; position:relative; padding-left:12px;}
.sub_tit2:before {content:""; width:3px; height:20px; position:absolute; top:7px; left:0; background-color:#9ab790; display: inline-block;}

/* 조직 */
.orgn > a > img {width:100%; border:3px solid #9ab790; padding:48px; border-radius:12px;}
.orgn > a > img:first-child {margin-bottom:80px;}



/* 상담프로그램, 문화활동 프로그램 */
.count {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.box_tit2 {padding:12px 0; text-align: center;  font-size:24px;font-weight: 500; background-color: #e8a63a; color: #fff;}
.program {width:30%; border-radius: 12px; }
.textbox {font-size:16px; padding:24px; border-width:1px 0 1px 1px; border:solid #e8a63a; border-radius: 0 0 12px 12px; }
.p_box1 {background:url(/images/sub/pg_03.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box2 {background:url(/images/sub/pg_02.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box3 {background:url(/images/sub/pg_01.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box7 {background:url(/images/sub/pg_07.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box8 {background:url(/images/sub/pg_08.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box9 {background:url(/images/sub/pg_09.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}


/* 자립 프로그램, 기타 프로그램 */
.count {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.box_tit3 {padding:12px 0; text-align: center;  font-size:24px;font-weight: 500; background-color: #9ab790; color: #fff;}
.program {width:30%; border-radius: 12px; }
.textbox2 {font-size:16px; padding:24px; border-width:1px 0 1px 1px; border:solid #9ab790; border-radius: 0 0 12px 12px; }
.p_box4 {background:url(/images/sub/pg_04.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box5 {background:url(/images/sub/pg_05.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box6 {background:url(/images/sub/pg_06.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box10 {background:url(/images/sub/pg_10.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box11 {background:url(/images/sub/pg_11.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}
.p_box12 {background:url(/images/sub/pg_12.jpg) no-repeat; background-size: cover; width:100%; height:200px; border-radius: 12px 12px 0 0;}


/* 갤러리 */
.gallery .pt {
    position: relative;
    background: #9ab790;
    flex: 1;
    margin: 0 1%;
    cursor: pointer;
    overflow: hidden;
    max-width: 273px;
}




/* 상담신청안내 */
.list2 {display:flex; flex-direction:row; justify-content:space-between; flex-wrap:wrap; margin: 80px 0;}

.row2 {display:flex; flex-driction:row;}
.row2 > img {width:100px; height:100px; border-radius:50px; margin-right:24px;}

.list_con {width:50%; height:100px;  margin-bottom: 40px;}
.list_con > div {align-content: center;}
.sub_tit_c {position: relative; font-size: 24px; font-weight: 500; margin-bottom:24px; padding-left: 12px;}
.sub_tit_c:before {
	content:"";
	display: inline-block;
	width: 3px;
	height: 20px;
	background: #000;
	position: absolute;
	top: 8px;
	left: 0;
	background-color:#e8a63a;
}
.text_2 {font-size:18px;}
.text_3 {font-size:30px; text-align:center; font-family:'HakgyoansimGaeulsopungB'; color: #333333; letter-spacing:-1px;}





/* 후원하기 */
.sur_img {border-radius:12px; margin-bottom:80px;}
.sur_img > img {border-radius:12px; width:100%;}
.count {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.box_tit4 {padding:12px 0; text-align: center;  font-size:24px;font-weight: 500; background-color: #9ab790; color: #fff; border-radius:12px 12px 0 0 ;}
.program2 {width:49%; border-radius: 12px; }
.textbox2 {font-size:16px; padding:24px; border-width:1px 0 1px 1px; border:solid #9ab790; border-radius: 0 0 12px 12px; }
.support_sys {margin-bottom: 80px;}
.support_sys > li {font-size: 18px; font-weight: 400;}
.support_sys > li > span {color: #9ab790;  font-size: 18px; font-weight: 900;}
.row {display:flex; flex-driction:row;}
.row > img {margin-right:24px; height: 80px;}


/* 후원하기 */

.sur_table {width:100%; border-top: 3px #9ab790 solid;}
.last {padding-bottom:24px;}
.last > span {margin-left:6px;}
.last input {margin-left:6px;}

.sur_table > tbody > tr > td:first-child {text-align: left; font-size: 18px; font-weight: 600; width: 15%; max-width: 500px; border-bottom: 1px solid #ddd;}
.sur_table > tbody > tr > td { padding:16px 0;  border-bottom: 1px solid #ddd;}
.long {border:0; width:100%; max-width: 300px; padding: 12px 0 12px 12px; background-color:#eee; }

.sur_table > tbody > tr > td

.sur_table > tbody > tr > td input[type="number"]::-webkit-outer-spin-button,
.sur_table > tbody > tr > td input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.sur_table > tbody > tr > td input[type="number"] {
  -moz-appearance: textfield;
}

.sur_table > tbody > tr > td > div {float: left; display: inline-block; width: 25%;}
.sur_table > tbody > tr > td > div > label { width:100%}
.radio {width: 25px; float: left; margin-top: 12px;}


.send {font-size:24px; color:#fff; font-weight:600; text-align:center; background-color:#9ab790; width:200px; padding: 12px 24px; border:0; text-align:center;}
.form > div:last-child {margin-top: 80px; text-align: center;}
.sur_table > tbody > tr > td > div {float: left; display: inline-block; width: 25%;}
.form > p {text-align: right; margin-bottom:12px;}
.warning {
   color: red;
}
}


/* 정관 */
main {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0px;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 0px;
}

.topic {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: solid 1px #ebebeb;
}
.open { cursor: pointer; display: block; padding: 0px; }

/* .open:hover { opacity: 0.7; } */

.expanded {
  background-color: #f9f9f9;
  transition: all 0.3s ease-in-out;
}



/* 팝업 */
/* 팝업 배경 (어두운 오버레이) */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* 팝업 본체 */
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* 닫기 버튼 */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
  background: none;
  border: none;
}

/* 리스트 항목 스타일 */
.popup-content h2 {

}

.agree__btn {
	background: #ffcd6b;
	border: 1px solid #ffcd6b;
	transition: all 0.3s;
	font-weight: 500;
	padding: 5px 10px;
	margin: 0 0 0 15px;
	cursor: pointer;
}

.agree__btn:hover {
	background: #ffcd6b;
	border: 1px solid #ffcd6b;
	transition: all 0.3s;
	font-weight: bold;
}

.popup-content p {
  margin-top: 15px;
}

.popup-content ul {
  padding-left: 0px;
  margin-top: 15px;
}

.popup-content ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	color: #444;
	font-size: 15px;
}

/* 리스트 앞에 점 표시 */
.popup-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8.75px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffcd6b;
  font-size: 18px;
}


/* 반응형 설정 (작은 화면에서도 잘 보이게) */
@media (max-width: 500px) {
  .popup-content {
	width: 95%;
	padding: 15px;
  }
}



/* 반응형 */


@media (max-width: 1240px) {

.inner {margin:0 auto; padding:0 5%;}
}

@media(max-width:1200px){

/* 설립목적 및 비전 */
.box > div {width:calc(50% - 12px);}
.list_2 {margin-top:12px;}


}

@media(max-width:1024px){

	.sub_con {padding:50px 0;}

	#contents h1 {margin-bottom:25px;}

	.system1 {display: flex; flex-direction: row; justify-content: space-between; flex-wrap:wrap;}
	.system1 div:last-child {padding: 0 !important;}
	.step1, .step2, .step3, .step4, .step5, .step6 { height:270px;text-align: center; width:33.3%;}

	.support_img {border-radius:12px; background:url(/images/sub/support_m.png) no-repeat; background-size: cover; width:100%; height:700px; margin-bottom:80px;}
	.pc_on {display: none !important;}
	.m_on {display:block;}
}

@media(max-width:850px){
	
}

@media (max-width: 800px) {

/* 공통*/
.inner {margin:0 auto; padding:0 5%;}

/* 쉼터소개 */
.list1 {display: flex; flex-direction: column;  justify-content: center;}
.list1 > ul {text-align: left; width:100%; box-sizing: border-box; padding: 30px; border-radius: 12px; margin-bottom:24px;}


/* 설립목표 및 비전 */
.box {display:flex; flex-direction:column; flex-wrap: wrap;  }
.box:last-child {padding-bottom:0px;}
.box > div {width:100%;}
.pic1 {height:230px; width: 100%; margin-bottom:24px;}
.pic2 {height:230px; width: 100%; margin-bottom:24px;}
.pic3 {height:230px; width: 100%; margin-bottom:24px;}
.list_2 > li {font-size: 16px; line-height: 24px;margin-left:12px;}
.sub_tit2 {font-size:24px; font-weight: 500; margin-bottom: 22px;}



/* 프로그램 */
.count {display: flex; justify-content: center; flex-wrap: wrap;}
.program {width:100%; border-radius: 12px; margin-bottom:24px; }

.support_img {border-radius:12px; background:url(/images/sub/support_m.png) no-repeat; background-size: cover; width:100%; height:600px; margin-bottom:80px;}
.program2 {width:100%; margin-bottom:24px;}

/* 상담신청안내 */
	.sub_menu{display:none}
	.visual{display:none}

/* 후원하기 */
.sur_table > tbody > tr > td:first-child {text-align: left; font-size: 18px; font-weight: 600; width: 30%; max-width: 500px }
.sur_table > tbody > tr > td > div {float: left; display: inline-block; width: 50%;}


}

@media (max-width: 600px) {

.step1, .step2, .step3, .step4, .step5, .step6 { height:270px;text-align: center; width:50%;}
.text_3 {font-size:22px; text-align:center;}

/* 주요프로그램 */

.con_box_list {display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap;}
.con_box {width:100%; margin-bottom:22px; border-radius: 12px;}
.con_box:nth-child(odd) {margin-right:0 !important;}

.support_img {border-radius:12px; background:url(/images/sub/support_m.png) no-repeat; background-size: cover; width:100%; height:500px; margin-bottom:80px;}

.list_con {width:100%; height:100px;  margin-bottom: 40px;}

.text_3 > span:after {display:none;}


.agree__btn {
    margin: 5px 0 0 5px;
    display: block;
}
	
}

@media (max-width: 480px) {

/* 쉼터소개 */

.sub_tit {font-size:18px; font-weight: 500; margin-bottom: 44px;}
.sub_tit:before {content:""; width:3px; height:16px; position:absolute; top:7px; left:0; background-color:#e8a63a;display: inline-block;}
.text_1 {font-size:18px; margin-bottom: 40px;}
.text_1 > span:after {display: none;}
.list1 > ul {text-align: left;}
.list1 > ul > li {display: flex; flex-direction: row; font-size: 14px;  line-height: 22px;}
.list1 > .ylist > li > div {width:120px; text-align: center; color: #fff; background-color: #e8a63a; margin: 0 22px 22px 0; line-height: 24px; height:24px; border-radius: 12px;}
.list1 > .glist > li > div {width:120px; text-align: center; color: #fff; background-color: #9ab790; margin: 0 22px 22px 0; line-height: 24px; height:24px; border-radius: 12px;}


.step1, .step2, .step3, .step4, .step5, .step6 {position: relative; height:270px;text-align: center;}
.step_tit {color: #9ab790; z-index: -1; font-size: 20px; font-weight: 900;}
.step {padding:12px 0; font-size:14px; font-weight: 600;}


/* 후원안내 */
.box_tit4 {padding:12px 0; text-align: center;  font-size:20px;font-weight: 500;}
.textbox2 {font-size:12px; padding:24px;}

.support_img {border-radius:12px; background:url(/images/sub/support_m.png) no-repeat; background-size: cover; width:100%; height:350px; margin-bottom:80px;}

}

@media (max-width: 360px) {
.support_img {border-radius:12px; background:url(/images/sub/support_m.png) no-repeat; background-size: cover; width:100%; height:280px; margin-bottom:80px;}
.row {display:flex; flex-direction:column;}
.row > img {width:120px; height:120px; margin-bottom:24px;text-align:center;}

.sur_table > tbody > tr > td:first-child {text-align: left; font-size: 14px; font-weight: 600;}
.sur_table > tbody > tr > td > div > label { font-size: 12px; }
}