@charset "utf-8";

*{box-sizing: border-box;}
.page-section{box-sizing: border-box; margin-bottom: 4rem; }
.page-section.title{overflow: visible;}
.border-b{border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.page-con{width: 100%; margin: 0 auto;}

.ver-line{width: 1px; height: 100px; background-color: #ddd; margin: 0 auto;}

.page-tit{text-align: center; color: #111;}
.page-tit > h3{font-size: 32px; margin-bottom: 1.5rem;}
.page-tit > p{font-size: 18px; margin-top: 1.5rem; font-weight: 400;}

.point{color: #ff832d !important;}

/* 인사말 */
.greet-wrap{width: 100%; display: flex; justify-content: space-between; align-items: center;}
.greet-img{width: 45%; display: flex; justify-content: center;}
.greet-img img{width: 100%; border-radius: 50%;}
.greet-txt{width: 50%;}
.greet-txt > h3{font-size: 28px; font-weight: 800; line-height: 1.5; color: #333; margin-bottom: 3rem;}
.greet-txt > p{font-size: 16px; color: #888; font-weight: 400; margin-bottom: 3rem;}
.greet-txt > h5{font-size: 18px; color: #666; font-weight: 700; text-align: right;}

/* 조직도 */
.oz-img{width: 100%; display: flex;}
.oz-img img{width: 100%;}

/* 연혁 */
.history-bg{padding: 4rem 4rem 2rem 0; background-color: #f5f5f5; border-radius: 30px;}
.history-wrap{width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.history-y{width: 30%; padding: 0 15px; margin-bottom: 2rem;}
.history-y > h3{font-size: 22px; color: #333; text-align: center;}
.history-c{width: 70%; padding: 1rem 2rem; border-radius: 50px; background-color: #fff; margin-bottom: 2rem;}
.history-c > ul > li{font-size: 16px; color: #666; font-weight: 400; padding-left: 20px; position: relative; margin-bottom: 10px;}
.history-c > ul > li:last-child{margin-bottom: 0;}
.history-c > ul > li::after{content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #ff832d; position: absolute; top: 10px; left: 0;}

/* 찾아오시는길 */
.map-area{width: 100%; margin-bottom: 2rem;}

.root_daum_roughmap{width: 100% !important;}
.root_daum_roughmap .wrap_controllers{display: none;}

.map-wrap{width: 100%; display: flex;}
.map-cont{padding-right: 1rem; margin-right: 1rem; position: relative;}
.map-cont:last-child{padding-right: 0; margin-right: 0;}
.map-cont > h5{font-size: 16px; color: #333; font-weight: 500;}
.map-cont > h5 > span{display: inline-block; margin-right: 5px;}
.map-cont > h5 > span.copybtn{font-size: 12px; color: #fff; cursor: pointer; background-color: #ff832d; border-radius: 5px; padding: 5px 10px; margin-left: 10px; margin-right: 0; transition: .4s;}
.map-cont > h5 > span.copybtn:hover{border-radius: 0; color: #333;}

/* 방과 후 활동 서비스 안내 */
.si-wrap{width: 100%; display: flex; justify-content: space-between;}
.si-box{width: 32%;}
.si-box > a{display: block; width: 100%;}
.si-img{width: 100%; display: flex; overflow: hidden; border: 1px solid #ddd; margin-bottom: 1rem;}
.si-img img{width: 100%; transition: 1s; display: block;}
.si-box > a:hover .si-img img{transform: scale(1.1);}
.si-box > a > h5{font-size: 18px; color: #333; text-align: center; transition: .4s;}
.si-box > a:hover > h5{color: #ff832d;}

/* 이용안내 */
.cr-wrap{width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem;}
.cr-box{width: 48%;}
.cr-img{display: flex;}
.cr-img img{width: 100%;}
.cr-caption > h3{font-size: 20px; margin-bottom: 1.5rem; padding-bottom: 1.5rem; position: relative; color: #333;}
.cr-caption > h3 > span{display: inline-block; color: #ff832d; margin-right: 5px; font-size: 18px;}
.cr-caption > h3::after{content: ""; width: 50px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 0;}
.cr-caption > p{color: #333; font-size: 16px; font-weight: 400; margin-bottom: 10px; padding-left: 15px; position: relative;}
.cr-caption > p:last-child{margin-bottom: 0;}
.cr-caption > p::after{content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: #ff832d; position: absolute; top: 10px; left: 0;}

.cr-caption > ul{padding-left: 15px;}
.cr-caption > ul > li{font-size: 14px; color: #888; margin-bottom: 5px;}
.cr-caption > ul > li:last-child{margin-bottom: 0;}

.cr-wrap.rv{flex-direction: row-reverse;}

.cr-caption.mb{margin-bottom: 2rem;}

/* 제공서비스 */
.page-table{width: 100%;}
.page-table table{width: 100%; border-spacing: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd;}
.page-table table thead th{padding: 1rem; color: #000; font-weight: 500; font-size: 18px; background-color: #fafafa; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.page-table table thead th:last-child{border-right: 0;}
.page-table table tbody th{padding: 1rem; color: #333; font-weight: 500; font-size: 16px; background-color: #fafafa; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.page-table table tbody th:last-child{border-right: 0;}
.page-table table tbody tr:last-child th{border-bottom: 0;}
.page-table table tbody td{padding: 1rem; color: #333; font-weight: 400; font-size: 16px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.page-table table tbody td:last-child{border-right: 0;}
.page-table table tbody tr:last-child td{border-bottom: 0;}
.page-table table tbody td > ul > li{font-size: 16px; color: #666; padding-left: 12px; position: relative; margin-bottom: 5px;}
.page-table table tbody td > ul > li:last-child{margin-bottom: 0;}
.page-table table tbody td > ul > li::after{content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #ff832d; position: absolute; top: 10px; left: 0;}

.page-table.center table tbody td{text-align: center;}
.page-table table tbody td.center{text-align: center;}

/* 특수치료 */
.cr-box.cb6{width: 60%;}
.cr-box.cb4{width: 35%;}

.cr-wrap.cb{flex-direction: row-reverse;}
.cr-wrap.rv.cb{flex-direction: row;}

.cs-caption{text-align: left;}
.cs-caption.right{text-align: right;}
.cs-caption > p{font-size: 16px; color: #666; margin-bottom: 1rem;}
.cs-caption > h3{font-size: 20px; color: #111; font-weight: 500;}

/* 아동청소년심리지원 */
.sv-caption{margin-bottom: 3rem;}
.sv-caption:last-child{margin-bottom: 0;}

.sv-caption > h2{font-size: 24px; color: #ff832d; margin-bottom: 1rem;}
.sv-caption > h2 > span{display: inline-block; margin-right: 5px;}
.sv-caption > h5{font-size: 18px; color: #333; font-weight: 400; margin-bottom: 10px;}
.sv-caption > h5:last-child{margin-bottom: 0;}
.sv-caption > p{color: #333; font-size: 18px; font-weight: 500; margin-bottom: 10px;}
.sv-caption > p > span{display: inline-block; margin-right: 5px; font-size: 14px; color: #ff832d;}

.sv-cont{padding-left: 23px; margin-bottom: 1rem;}
.sv-cont > h5{font-size: 18px; color: #333; margin-bottom: 10px; font-weight: 500;}
.sv-cont > p{font-size: 16px; color: #333; margin-bottom: 10px; padding-left: 12px;}
.sv-cont > ul{padding-left: 14px;}
.sv-cont > ul > li{font-size: 14px; color: #666; padding-left: 12px; position: relative; margin-bottom: 5px;}
.sv-cont > ul > li:last-child{margin-bottom: 0;}
.sv-cont > ul > li::after{content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #666; position: absolute; top: 10px; left: 0;}

.sv-caption .page-table{margin: 1rem 0;}
.page-table table tbody th.bd-0{border-bottom: 0;}

.page-table table tbody td .table-cont{margin-bottom: 1.5rem;}
.page-table table tbody td .table-cont:last-child{margin-bottom: 0;}
.page-table table tbody td .table-cont > h5{color: #333; font-size: 16px; margin-bottom: 10px;}
.page-table table tbody td .table-cont > ul{padding-left: 15px;}
.page-table table tbody td .table-cont > ul > li{font-size: 14px !important; color: #333; padding-left: 12px; position: relative; margin-bottom: 8px;}
.page-table table tbody td .table-cont > ul > li:last-child{margin-bottom: 0;}
.page-table table tbody td .table-cont > ul > li::after{content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #ff832d; position: absolute; top: 8px; left: 0;}

.page-table table tbody td .table-cont > ul > li > ol{padding-top: 5px;}
.page-table table tbody td .table-cont > ul > li > ol > li{margin-bottom: 3px; color: #666;}
.page-table table tbody td .table-cont > ul > li > ol > li:last-child{margin-bottom: 0;}

/* 후원안내 */
.bg-quote{border: 5px solid #e8e8e8; border-radius: 15px; padding: 4rem; position: relative; text-align: center; margin-bottom: 3rem;}
.fa-quote-left, .fa-quote-right{color: #e8e8e8;}
.quote{display: inline-block; width: 90px; background-color: #fff; z-index: 2; text-align: center; font-size: 22px;}
.quote-l{position: absolute; top: -25px; left: 70px;}
.quote-r{position: absolute; bottom: -25px; right: 70px;}

.bg-quote > h3{font-size: 28px; color: #333; margin-bottom: 1rem;}
.bg-quote > p{font-size: 20px; color: #666;}

.sign{text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; align-items: center;}
.sign > h5{font-size: 20px; font-weight: 400; color: #666; padding-left: 1rem; position: relative; display: inline-block; }
.sign > h5::after{content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #ff832d; position: absolute; top: 12px; left: 0;}
.down-btn{text-align: center;}
.down-btn > a{display: inline-block; font-weight: 500; font-size: 20px; color: #fff; padding: 12px 2rem; background-color: #ff832d; border-radius: 10px; transition: .5s;}
.down-btn > a:hover{border-radius: 0;}


/* media-query */

@media(min-width:992px){
  .pt-3{padding-top: 3rem;}
  .pt-5{padding-top: 5rem;}
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}

  .ani.up.delay{
		transition: 1.2s opacity 0.2s, 1.2s transform 0.2s;
	}
	.ani.up.delay2{
		transition: 1.2s opacity 0.5s, 1.2s transform 0.5s;
	}
	.ani.up.delay3{
		transition: 1.2s opacity 0.8s, 1.2s transform 0.8s;
	}

  .page-table table thead th.mw{min-width: 210px;}
  .m-screen{display: none;}
}

@media(max-width:991px){
  .d-block{display: block;}
  .d-none{display: none;}
  .page-section{margin-bottom: 2rem;}
  .page-tit{font-size: 30px;}
  .ver-line{height: 50px;}
  .page-con{padding: 0;}

  .page-tit > h3{font-size: 22px;}
  .page-tit > p{font-size: 14px;}

  .greet-wrap{flex-direction: column;}
  .greet-img{width: 100%; margin-bottom: 2rem;}
  .greet-txt{width: 100%;}
  .greet-txt > h3{font-size: 20px; margin-bottom: 1.5rem;}
  .greet-txt > p{font-size: 14px;}
  .greet-txt > h5{font-size: 16px;}

  .history-bg{padding: 2rem 15px 0; border-radius: 15px;}
  .history-wrap{flex-direction: column;}
  .history-y{width: 100%; margin-bottom: 1rem;}
  .history-c{width: 100%; padding: 1rem 15px; border-radius: 10px;}
  .history-y > h3{font-size: 18px;}
  .history-c > ul > li{font-size: 14px; padding-left: 10px; word-break: keep-all;}
  .history-c > ul > li::after{width: 4px; height: 4px; top: 8px;}

  .root_daum_roughmap .wrap_map{height: 300px !important;}
  .map-wrap{flex-direction: column;}
  .map-cont{padding-right: 0; margin-right: 0; margin-bottom: 1rem;}
  .map-cont:last-child{margin-bottom: 0;}
  .map-cont > h5{font-size: 14px; word-break: keep-all;}

  .si-wrap{flex-direction: column;}
  .si-box{width: 100%; margin-bottom: 2rem;}
  .si-box:last-child{margin-bottom: 0;}
  .si-box > a > h5{font-size: 16px;}
  .si-img{margin-bottom: 10px;}

  .cr-wrap{flex-direction: column; margin-bottom: .5rem;}
  .cr-wrap.rv{flex-direction: column;}
  .cr-box{width: 100%; margin-bottom: 1.5rem;}
  .cr-caption > h3{font-size: 18px; padding-bottom: 1rem; margin-bottom: 1rem;}
  .cr-caption > h3 > span{font-size: 16px;}
  .cr-caption > p{font-size: 14px; padding-left: 10px;}
  .cr-caption > p::after{width: 4px; height: 4px; top: 9px;}
  .cr-caption > ul > li{font-size: 12px;}

  .cr-caption.mb{margin-bottom: 1rem;}

  .page-table.mo{position: relative; overflow-x: auto;}
  .page-table.mo table{min-width: 991px;}

  .m-screen {
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(60,81,82,0.4);
  }
  .m-txt {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #ff832d;
    border-radius: 10px;
    color: #fff !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    font-size: 14px;
  }

  .page-table table thead th{padding: 12px; font-size: 16px;}
  .page-table table tbody th{padding: 10px; font-size: 14px;}
  .page-table table tbody td{padding: 10px; font-size: 14px;}
  .page-table table tbody td ul li{font-size: 14px; padding-left: 9px;}
  .page-table table tbody td ul li::after{top: 8px;}

  .cr-wrap.cb{flex-direction: column;}
  .cr-wrap.rv.cb{flex-direction: column;}
  .cr-box.cb6{width: 100%;}
  .cr-box.cb4{width: 100%;}
  .cs-caption > p{font-size: 14px; margin-bottom: 10px;}
  .cs-caption > h3{font-size: 18px;}

  .sv-caption{margin-bottom: 2rem;}
  .sv-caption > h2{font-size: 18px; margin-bottom: 12px;}
  .sv-caption > h5{font-size: 15px;}
  .sv-caption > p{font-size: 14px; margin-bottom: 8px;}
  .sv-caption > p > span{font-size: 10px; margin-right: 2px;}
  .sv-cont{padding-left: 10px;}
  .sv-cont > ul{padding-left: 10px;}
  .sv-cont > h5{font-size: 13px; margin-bottom: 5px;}
  .sv-cont > ul > li{font-size: 12px; padding-left: 7px; margin-bottom: 3px;}
  .sv-cont > ul > li::after{width: 3px; height: 3px; top: 8px;}
  .sv-cont > p{font-size: 13px; margin-bottom: 8px; padding-left: 8px;}

  .page-table table tbody td .table-cont{margin-bottom: 1rem;}
  .page-table table tbody td .table-cont > h5{font-size: 15px; margin-bottom: 7px;}
  .page-table table tbody td .table-cont > ul > li{font-size: 13px !important; margin-bottom: 5px;}

  .bg-quote{padding: 2rem;}
  .quote{font-size: 18px; width: 65px;}
  .quote-l{left: 30px;}
  .quote-r{right: 30px;}
  .bg-quote > h3{font-size: 18px;}
  .bg-quote > p{font-size: 14px;}

  .sign{text-align: left; align-items: flex-start;}
  .sign > h5{font-size: 16px; padding-left: 12px;}
  .sign > h5::after{width: 4px; height: 4px; top: 11px;}
  .down-btn > a{font-size: 16px; padding: 10px 1.5rem;}
} 
@media(max-width:600px){
  .page-table table thead th{padding: 10px; font-size: 14px;}
  .page-table table tbody th{padding: 8px; font-size: 12px;}
  .page-table table tbody td{padding: 8px; font-size: 12px;}
  .page-table table tbody td ul li{font-size: 12px; padding-left: 8px;}
  .page-table table tbody td ul li::after{width: 3px; height: 3px;}
}

/* animation */

.ani.up{
	transform: translateY(100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.up.act{
	transform: translateY(0);
	opacity: 1;
}
.ani.left{
	transform: translateX(100px);
	opacity: 0;
	transition: 1s;
}
.ani.left.act{
	transform: translateX(0);
	opacity: 1;
}
.ani.right{
	transform: translateX(-100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.right.act{
	transform: translateX(0);
	opacity: 1.2;
}