@charset "utf-8";

/*페이지 공통*/
#page_area .tit_box{margin-bottom:5rem;text-align:center}
#page_area .tit_box .s_tit{margin-bottom:.5rem;padding-bottom:3.5rem;font-size:1.7rem;font-weight:700;color:var(--pt-color);position:relative}
#page_area .tit_box .s_tit:before{content:'';width:1px;height:2.5rem;background:#ddd;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
#page_area .tit_box .tit{font-size:3.7rem;font-weight:700;line-height:130%;color:#222}
#page_area .tit_box .tit span{color:var(--pt-color)}
#page_area .tit_box .txt{margin-top:1rem;font-size:1.7rem;line-height:150%;color:#666}
/*인사말*/
.p0101 .img_box{width:100%;height:24.5rem;margin-bottom:5rem;padding:0 5rem;border-radius:2rem;background:url(/content/img/p0101_bg2.jpg) no-repeat center/cover;position:relative;display:flex;flex-wrap:wrap;align-items:center}
.p0101 .img_box .tit{font-size:3.2rem;font-weight:700;line-height:150%;color:#222}
.p0101 .img_box .tit span{color:var(--pt-color)}
.p0101 .img_box .r_img{position:absolute;bottom:0;right:5rem}
.p0101 .txt_cont{padding:0 5rem}
.p0101 .txt_cont > p{font-size:1.7rem;line-height:150%;color:#666;word-break:keep-all}
.p0101 .txt_cont > p span{font-weight:500;color:#222}
.p0101 .txt_cont > p + p{margin-top:2rem}

.p0101 .txt_cont .bt_txt{margin-top:7rem;text-align:right;font-size:1.7rem;line-height:150%;color:#666;}
.p0101 .txt_cont .bt_txt span{font-weight:500;color:#222}


/*이용안내*/
.guide_list{width:100%;display:flex;flex-wrap:wrap;gap:5rem 2rem}
.guide_list > li{width:calc(50% - 1rem);min-height:30rem;padding:4rem;border-radius:2rem;background:#f7f7f7;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.guide_list .num{width:4.6rem;height:4.6rem;border-radius:4.6rem;background: linear-gradient(161deg, #faa21a, #f8902b);font-size:1.7rem;font-weight:700;color:#fff;position:absolute;top:-2.3rem;left:50%;transform:translateX(-50%);display: flex;align-items: center;justify-content: center;font-family:'Poppins'}
.guide_list .icon{width:15rem;height:15rem;margin-bottom:2rem;border-radius:50%;background:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.guide_list .tit{margin-bottom:2rem;font-size:2.2rem;font-weight:700;color:#222}
.guide_list .cont_list{width:100%;border-radius:2rem;padding:2rem;background:#fff}
.guide_list .cont_list li{font-size:1.7rem;line-height:150%;color:#666;text-align:center;word-break: keep-all;}
.guide_list .cont_list li + li{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed #ddd}


/*오시는 길*/
.p0104 .add_cont + .add_cont{margin-top:10rem}
.p0104 .add_cont .cont_tit{margin-bottom:3rem;padding:1.5rem 2rem;border-left:2px solid var(--pt-color);background:#f7f7f7;font-size:2.2rem;font-weight:700;}
.p0104 .map_cont{width:100%;height:40rem;margin-bottom:3rem;background:#000;overflow:hidden}
.p0104 .map_cont .root_daum_roughmap{width:100% !important;height:100% !important}
.root_daum_roughmap .wrap_map{height:100% !important}
.p0104 .info_box{margin-bottom:5rem;display:flex;flex-wrap:wrap;align-items: center;justify-content: center;gap: 2rem 4rem;}
.p0104 .info_box li{font-size:1.8rem;font-weight:500;color:#333;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.p0104 .info_box li.full{width:100%}
.p0104 .info_box li p{font-weight:700;color:var(--pt-color);display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.p0104 .info_box li p span{width:3.6rem;height:3.6rem;border-radius:3.5rem;background:var(--pt-color);display:flex;flex-wrap:wrap;align-items:center;justify-content:center}	
.p0104 .info_box li p span img{width:1.9rem;}


.p0104 .location_info{border-top:1px solid #222;border-bottom:1px solid #ddd}
.p0104 .location_info li{padding:5rem 2rem;display:flex;flex-wrap:wrap;align-items:start}
.p0104 .location_info li + li{border-top:1px dashed #ddd}
.p0104 .location_info .icon{width:15rem;height:15rem;border-radius:15rem;background:#fefaf3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.p0104 .location_info .icon img{width:40%}
.p0104 .location_info .txt_box{width:calc(100% - 15rem);padding:2rem 0 0 3rem;}
.p0104 .location_info .txt_box .tit{margin-bottom:2rem;font-size:2rem;font-weight:700;color:#222;}
.p0104 .location_info .txt_box .txt{font-size:1.8rem;line-height:150%;color:#666;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.p0104 .location_info .txt_box .txt .info_tit{padding:1rem 2rem;border-radius:5rem;background:#f7f7f7;font-size:1.6rem;font-weight:500;line-height:120%;color:#333;text-align:center;word-break:keep-all}
.p0104 .location_info .txt_box .txt .info_txt{}
.p0104 .location_info .txt_box .txt .info_txt span{font-weight:500;color:#222}
.p0104 .location_info .txt_box .txt + .txt{margin-top:2rem;padding-top:2rem;border-top:1px dashed #ddd}
	

/*상담사업*/
.bs_page .bs_box{padding:5rem;border:1px solid #ddd;border-radius:2rem}
.bs_page .bs_box + .bs_box{margin-top:3rem}
.bs_page .bs_box .box_tit{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px dashed #ddd;font-size:2.2rem;font-weight:700;color:#222;display:flex;align-items:center;gap:1.5rem}
.bs_page .bs_box .box_tit .num{width:3.5rem;height:3.5rem;border-radius:3.5rem;background:linear-gradient(161deg, #faa21a, #f8902b);font-size:1.4rem;font-weight:700;color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-family:'Poppins'}
.bs_page .bs_box .txt{padding-left:1rem;font-size:1.7rem;line-height:150%;color:#666;position:relative}
.bs_page .bs_box .txt:before{content:'';width:3px;height:3px;border-radius:3px;background:var(--pt-color);position:absolute;left:0;top:1rem}
.bs_page .bs_box .txt + .txt{margin-top:.5rem} 


.bs_page .step_list{display:flex;flex-wrap:wrap;gap:2rem}
.bs_page .step_list li{width:calc((100% - 8rem) / 5);padding-bottom:calc((100% - 8rem) / 5);position:relative}
.bs_page .step_list li .inner{width:100%;height:100%;padding:0 3rem;border:3px solid var(--pt-color);border-radius:50%;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:center;}
.bs_page .step_list li .inner .step{margin-bottom:.5rem;font-size:1.5rem;font-weight:700;color:var(--pt-color)}
.bs_page .step_list li .inner .tit{font-size:1.8rem;font-weight:700;color:#222;word-break:keep-all}
.bs_page .step_list li .arr{width:4rem;height:4rem;border-radius:4rem;box-shadow:0 0 1.5rem rgba(0,0,0,.2);background:var(--pt-color);position:absolute;top:50%;left:-3rem;transform:translateY(-50%);z-index:1;display:flex;align-items: center;justify-content: center;}

.bs_page .cont_list{display:flex;flex-wrap:wrap;gap:1rem}
.bs_page .cont_list li{width:calc((100% - 3rem) / 4);padding:1.5rem 2rem;background:#f7f7f7;font-size:1.7rem;font-weight:500;text-align:center;color:#222;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;}

.bs_page .img_box{width:100%;text-align:center}
.bs_page .img_box img{max-width:100%;width:auto}

.bs_page .bs_box_flex{width:100%;display:flex;flex-wrap:wrap;gap:2rem}
.bs_page .bs_box_flex .bs_box{width:calc(50% - 1rem)}
.bs_page .bs_box_flex .bs_box + .bs_box {margin-top:0} 

.bs_page .box_flex{display:flex;flex-wrap:wrap;align-items: center;gap:5rem}
.bs_page .box_flex .box_icon{width:15rem;height:15rem;border-radius:50%;background:#f7f7f7;display:flex;align-items:center;justify-content:center}
.bs_page .box_flex .box_cont{width:calc(100% - 20rem)}

/*청소년 동반자*/
.p0107 .img_box{width:100%;padding:5rem 2rem;border:1px solid #ddd;text-align:center;border-radius:2rem;}
.p0107 .img_box img{max-width:100%;width:auto;}

/*꿈드림이란?*/
.p0201 .img_box{width:100%;height:24.5rem;margin-bottom:5rem;padding:0 5rem;border-radius:2rem;background:url(/content/img/p0201_bg2.jpg) no-repeat center/cover;position:relative;display:flex;flex-wrap:wrap;align-items:center}
.p0201 .img_box .tit{font-size:3.2rem;font-weight:700;line-height:150%;letter-spacing:-.5px;color:#1A4C4A}
.p0201 .img_box .tit span{color:#2E7D7A}
.p0201 .img_box .r_img{position:absolute;bottom:0;right:5rem}

.p0201 .txt_cont{padding:0 5rem}
.p0201 .txt_cont p{font-size:1.7rem;line-height:150%;text-align:center;color:#666;word-break:keep-all}
.p0201 .txt_cont .txt span{font-weight:500;color:#222}
.p0201 .txt_cont .txt + .txt{margin-top:2rem}
.p0201 .txt_cont .txt + .back_txt{margin-top:1rem}
.p0201 .txt_cont .back_txt{padding:1rem 2rem;border-radius:.5rem;background:#f7f7f7;font-weight:500;color:#222}
.p0201 .txt_cont .back_txt + .back_txt{margin-top:.5rem}
.p0201 .txt_cont .back_txt + .txt{margin-top:1rem}


/* 사이트맵 */
#site_map_area{width:100%;display:flex;flex-wrap:wrap;gap:3rem 2%}
#site_map_area .site_map{width:32%;}
#site_map_area .site_map .menu_tit{padding:1rem;border-bottom:2px solid #888;font-size:2.2rem;font-weight:700;color:#222}
#site_map_area .site_map ul{}
#site_map_area .site_map ul li{border-bottom:1px dashed #ddd;word-break:keep-all}
#site_map_area .site_map ul li a{display:block;width:100%;padding:1rem 2rem 1rem 3.5rem;font-size:1.6rem;line-height:150%;color:#666;position:relative;transition:all .3s}
#site_map_area .site_map ul li a:hover{color:#222}
#site_map_area .site_map ul li:last-child{border-bottom:0}
#site_map_area .site_map ul li a:before{content:'';width:3px;height:3px;border-radius:3px;background:var(--pt-color);position:absolute;left:2rem;top:2.2rem}


@media(max-width:1280px){
	#page_area{max-width:100rem;width:100%;margin:0 auto}
	#page_area .tit_box .tit{font-size:3.4rem}
	
	/*인사말*/
	.p0101 .img_box .tit{font-size:2.9rem}
	
	/*꿈드림이란*/
	.p0201 .img_box .tit{font-size:2.9rem}

}
	

@media(max-width:1024px){
	#page_area .tit_box .tit{font-size:3.1rem}

	/*인사말*/
	.p0101 .img_box{height:20rem}
	.p0101 .img_box .tit{font-size:2.6rem}	
	.p0101 .img_box .r_img img{width:20rem}
	
	/*복지센터 - 이용안내*/
	.guide_list > li{padding:4rem 2rem}
	.guide_list .icon{width:13rem;height:13rem;}
	.guide_list .icon img{width:6rem}
	
	
	/*사업*/
	.bs_page .step_list{justify-content:center}
	.bs_page .step_list li {width: calc((100% - 6rem) / 3);padding-bottom: calc((100% - 6rem) / 3);}
	.bs_page .step_list li .inner{padding:0 2rem}
	.bs_page .step_list li .arr{width:3rem;height:3rem;left:-2.5rem;z-index:10}
	.bs_page .step_list li .arr img{width:1.4rem}
	
	/*꿈드림이란*/
	.p0201 .txt_cont p br{display:none}
	.p0201 .img_box{height:20rem}
	.p0201 .img_box .tit{font-size:2.6rem}	
	.p0201 .img_box .r_img img{width:20rem}
}

@media(max-width:767px){
	#page_area .tit_box{max-width:50rem;width:100%;margin:0 auto 3rem}
	#page_area .tit_box .tit{font-size:2.8rem}
	#page_area .tit_box .tit br{display:none}
	#page_area .tit_box .txt br{display:none}
	
	/*인사말*/
	.p0101 .txt_cont{width:100%;padding:0 3rem}
	.p0101 .img_box{padding:0 3rem}
	.p0101 .img_box .tit{width:30rem;font-size:2.3rem}
	.p0101 .img_box .tit br{display:none}
	.p0101 .img_box .r_img{right:2rem}
	.p0101 .img_box .r_img img{width:13rem}
	
	/*복지센터 - 이용안내*/
	.guide_list{max-width:60rem;width:100%;margin:5rem auto 0}
	.guide_list > li{width:100%}
	.guide_list .num{width:4rem;height:4rem;font-size:1.4rem}
	.guide_list .icon{width:10rem;height:10rem;}
	.guide_list .icon img{width:5rem}
	
	/*오시는 길*/
	.p0104 .map_cont{height:35rem}
	.p0104 .location_info .icon{width:13rem;height:13rem;margin-bottom:2rem}
	.p0104 .location_info li{justify-content:center;}
	.p0104 .location_info .txt_box{width:100%;padding:0;text-align:center;}
	.p0104 .location_info .txt_box .txt{justify-content: center;flex-direction: column;}
	
	
	
	/*사업 공통*/
	.bs_page .bs_box{padding:3rem}
	.bs_page .step_list{gap:1rem}
	.bs_page .step_list li {width: calc((100% - 3rem) / 3);padding-bottom: calc((100% - 3rem) / 3)}
	.bs_page .step_list li .arr{left:-2rem}

	.bs_page .cont_list li{width:calc((100% - 3rem) / 3);}
	
	.bs_page .box_flex {justify-content: center;gap:2rem}
	.bs_page .box_flex .box_cont{width:100%}
	
	.bs_page .bs_box_flex .bs_box{width:100%}
	
	
	/*청소년 동반자*/
	.p0107 .img_box{border:0;padding:0}
	
	
	/*인사말*/
	.p0201 .txt_cont{width:100%;padding:0 3rem}
	.p0201 .img_box{padding:0 3rem}
	.p0201 .img_box .tit{width:30rem;font-size:2.3rem}
	.p0201 .img_box .tit br{display:none}
	.p0201 .img_box .r_img{right:2rem}
	.p0201 .img_box .r_img img{width:13rem}
	
	/*사이트맵*/
	#site_map_area {max-width:60rem;width:100%;margin:0 auto}
	#site_map_area .site_map{width:100%;}
}

@media(max-width:480px){
	
	/*인사말*/
	.p0101 .img_box{height:15rem;margin-bottom:3rem}
	.p0101 .img_box .tit{width:100%;text-align:center}
	.p0101 .img_box .r_img{display:none}
	
	.p0101 .txt_cont{padding:0}
	
	/*오시는 길*/
	.p0104 .add_cont .cont_tit{font-size:1.9rem}
	.p0104 .info_box {gap:0}
	.p0104 .info_box li{width:100%;text-align:center;flex-direction: column;}
	.p0104 .info_box li + li{margin-top:1.5rem;padding-top:1.5rem;border-top:1px dashed #ddd}
	
	
	/*사업공통*/
	.bs_page .bs_box .box_tit{font-size:1.9rem}
	
	.bs_page .step_list li {width: calc(50% - .5rem);padding-bottom:calc(50% - .5rem)}
	.bs_page .step_list li .arr{left:-2rem}
	.bs_page .step_list li:nth-child(3) .arr{display:none}
	
	
	.bs_page .step_list li .inner {padding:0 1rem}
	.bs_page .step_list li .inner .step{font-size:1.4rem}
	.bs_page .step_list li .inner .tit{font-size:1.6rem}
	
	.bs_page .cont_list li{width:calc(50% - .5rem);}
	
	.bs_page .box_flex .box_icon{width:13rem;height:13rem;}
	.bs_page .box_flex .box_icon img{width:6rem}
	
	/*인사말*/
	.p0201 .img_box{height:15rem;margin-bottom:3rem}
	.p0201 .img_box .tit{width:100%;text-align:center}
	.p0201 .img_box .r_img{display:none}
	
	.p0201 .txt_cont{padding:0}
	
}



@media(max-width:320px){
	
	.bs_page .cont_list li{width:100%;}
	
}