@charset "utf-8";
.content-head { padding-top: 5.625rem; }
.page-title { font-family: 'Godo'; font-size: 2.8rem; font-weight: 800; padding: 0 0 1rem; text-align: center; color:#fff; }
.content { margin: 0 auto; max-width: 87.5rem; padding: 2.5rem 0 4.375rem; position: relative; width: 100%; }
.content img { max-width: 100%; }
.snb { align-items: center; display: flex; gap: 25px; justify-content: center; }
.snb li { color: #fff; font-size: 0.9375rem; }
.snb .depth { position: relative; }
.snb .depth:before { background: rgba(255, 255, 255, .55); content: ''; height: 0.625rem; left: -0.75rem; position: absolute; top: 50%; transform: translateY(-50%); width: 0.0625rem; }
h3.title-1 { color: #222; font-size: 1.875rem; font-weight: 800; padding: 3.125rem 0 1.25rem; }
h4.title-2 { font-size: 1.375rem; font-weight: 800; padding-bottom: 1.25rem; }
.sub-title-group-1 { align-items: center; display: flex; justify-content: space-between; padding: 2.5rem 0 0.9375rem; }
.sub-title-group-1 h3 { padding: 0; }
.text-box {background: #f7f8f9; padding: 1.875rem; border-radius: 0.625rem;}
.page-title-wrap{position: relative;  height: 18.75rem; display: flex; align-items: center; flex-direction: column; justify-content: center; width: 95%; margin: 0 auto; background: rgba(0,0,0,0.3);border-radius: 0.9375rem; overflow: hidden;}
.page-title-wrap .bg-img{width: 100%;   z-index: -1;  }
.page-title-wrap .bg-img .animate-bg-img {
    position: absolute;
    animation: bg-img-animation 3s ease-in-out ;
    width: 100%;
    object-fit: cover;
    top:-50%;
}
@keyframes bg-img-animation {
    0% {
        top: 0;
    }

    100% {
        top: -50%;
    }
}


/*법인소개*/
.about-1 { display: flex; gap: 0.9375rem; }
.about-1 li { border-radius: 0.625rem; box-shadow: 0 0.25rem 2.5rem 1rem rgba(0, 0, 0, 0.05); flex: 1 1 0; padding: 3.125rem 1.875rem; text-align: center; }
.about-1 li p { line-height: 1.6; padding-top: 1.25rem; }
.about-1 h4{padding-top: 0.625rem; font-size: 1.375rem; font-weight: 700;}
.about-2 { background: url("../images/content/about-bg-1.jpg") no-repeat center; background-size: cover; border-radius: 0.625rem; display: flex; position: relative; overflow: hidden;  }
.about-2:after{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.3); position: absolute; left: 0; top:0;}
.about-2 li { text-align: center; position: relative; z-index: 1; }
.about-2 li h3 { color: rgba(255, 255, 255, .8); font-size: 2rem; font-weight: 800; letter-spacing: 0.0625rem; padding-bottom: 1.875rem; }
.about-2 li p { color: #fff; font-size: 1.0625rem; font-weight: 500; line-height: 1.8; }
.about-2 li p b { font-weight: 900; }
.about-2 li:first-child { border-right: 1px solid rgba(255, 255, 255, .3); flex:1; padding: 6.25rem 3rem; }
.about-2 li:last-child { flex:2;  padding: 6.25rem;}
.about-3 {padding: 50px 0 0;}
.about-3 ul{border: 1px solid #ddd; display:flex; flex-wrap:wrap;}
.about-3 ul li:nth-child(1),
.about-3 ul li:nth-child(2),
.about-3 ul li:nth-child(3){
    width:calc(100% / 3);
    border-left:1px solid #ddd;
    text-align: center;
}
.about-3 ul li:nth-child(1){border-left:0;}
.about-3 ul li:last-child{width:100%;}
.about-3.support-link ul li:last-child{width:calc(100% / 3);}
.about-3.support-link ul li{border-bottom:0}
.about-3 ul li img{max-width: 200px;}
.about-3 ul li{padding: 1.25rem; border-bottom: 0.0625rem solid #ddd;}
.about-3 ul li:last-child{border-bottom: 0;}
.about-3 h4{font-size: 1.25rem; padding: 1.25rem 0;}
.vision { display: flex; gap: 1.25rem; }
.vision li { border-radius: 0.625rem; flex: 1 1 auto; overflow: hidden; position: relative; }
.vision .thumb { padding-bottom: 100%; position: relative; width: 100%; }
.vision .image { inset: 0; overflow: hidden; position: absolute; }
.vision .image img { display: block; height: 100%; object-fit: cover; position: absolute; width: 100%; }
.vision li .text { align-items: center; background: rgba(0, 0, 0, .3); color: #fff; display: flex; flex-direction: column; height: 100%; justify-content: space-between; left: 0; padding: 1.25rem; position: absolute; text-align: center; top: 0; width: 100%; }
.vision li .text h4 { border-bottom: 1px solid rgba(255, 255, 255, .5); display: block; font-size: 1.8rem; font-weight: 800; padding: 2.125rem 0 1.875rem; }
.vision li .text p { backdrop-filter: blur(0.9375rem); background: rgba(255, 255, 255, 0.1); border-radius: 0.75rem; color: #fff; padding: 1.25rem; }
.ci-1 { align-items: flex-start; display: flex; gap: 50px; justify-content: center; }
.ci-1 ul { align-items: center; display: flex; gap: 20px; }
.ci-2 { text-align: center; padding-top: 1.25rem;}
.ci-2 p { font-weight: 700; margin-top: 1.25rem; }
.ci-3 { align-items: flex-start; display: flex; gap: 3.125rem; justify-content: center; }
.ci-3 div:first-child ul { align-items: flex-start; display: flex; flex-direction: column; gap: 0.625rem; }
.ci-3 li { background: #fff; border: 0.0625rem solid #eaeaea; padding: 1.25rem; }
.ci-group { background: #f9f9f9; padding: 50px; }
.image-list { display: flex; gap: 15px; }
.image-list li {flex:  1 1 0; }
.image-list .thumb { padding-bottom: 130%; position: relative; width: 100%; border: 1px solid #ddd;  }
.image-list .image { inset: 0; overflow: hidden; position: absolute; }
.image-list .image img { display: block; height: 100%; object-fit: cover; position: absolute; width: 100%; }


/*인사말*/
.intro-group{display: flex; gap: 1.25rem;}
.intro h3{font-size: 2.5rem; font-weight: 800; padding: 1.25rem 0;}
.intro-group .text{flex:2;}
.intro-group .text p {font-size: 1.125rem; line-height: 1.8}
.intro-group .image{flex:1; text-align: right;}
.intro-group .image img{border-radius: 0.9375rem;}
.intro .sign {padding-top: 1.875rem; font-size: 1.0625rem;}
.intro .sign b{font-weight: 800; letter-spacing: 0.1875rem;}

/*연혁*/
.history { position: relative; }
.history .timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.history .timeline::before { background: #e9ecef; bottom: 0; content: ''; left: 50%; margin-left: -0.125rem; position: absolute; top: 2.5rem; width: 0.0625rem; }
.history .timeline > li { box-sizing: border-box; margin-bottom: 2rem; position: relative; width: 50%; }
.history .timeline > li:nth-child(odd) { left: 0; padding-right: 2.5rem; }
.history .timeline > li:nth-child(even) { left: 50%; padding-left: 2.5rem; }
.history .timeline > li::before { background: #d93030; border: 0.25rem solid #fadada; border-radius: 50%; content: ''; height: 0.5rem; position: absolute; top: 1.5625rem; width: .5rem; z-index: 1; }
.history .timeline > li:nth-child(odd)::before { right: -0.4375rem; }
.history .timeline > li:nth-child(even)::before { left: -0.625rem; }
.history .timeline-content h3 { color: #d93030; font-size: 3rem; font-family: 'Daeojamjil'; font-weight: 700; margin-bottom: 1rem; }
.history .timeline-item { margin-bottom: 1.5rem; }
.history .timeline-item h4 { color: #343a40; font-size: 1.2rem; font-weight: 800; }
.history .timeline-item p { color: #495057; font-size: 1rem; line-height: 1.6; }
.history .timeline > li:nth-child(odd) .timeline-content { text-align: right; }

/*조직도*/
.organization { }
.org-chart ul { display: flex; justify-content: center;padding-top: 20px; position: relative; transition: all 0.5s; }
.org-chart li { float: left; list-style-type: none; padding: 20px 5px 0 5px; position: relative; text-align: center; transition: all 0.5s;  }
.org-chart li::before, .org-chart li::after { border-top: 1px solid #ccc; content: ''; height: 20px; position: absolute; right: 50%; top: 0; width: 50%; }
.org-chart li::after { border-left: 1px solid #ccc; left: 50%; right: auto; }
.org-chart li:only-child::after, .org-chart li:only-child::before { display: none; }
.org-chart li:only-child { padding-left: 0; padding-right: 0; }
.org-chart li:first-child::before, .org-chart li:last-child::after { border: 0 none; }
.org-chart li:last-child::before { border-radius: 0 5px 0 0; border-right: 1px solid #ccc; }
.org-chart li:first-child::after { border-radius: 5px 0 0 0;  }
.org-chart ul ul::before { border-left: 1px solid #ccc; content: ''; height: 20px; left: 50%; position: absolute; top: 0; width: 0; }
.org-chart li > span, .org-chart li > .label, .org-chart li .node-group > .label { background-color: white; border: 0.0625rem solid #ccc; border-radius: 3.125rem; color: #666; display: inline-block; font-size: 1.2em; min-width: 12.375rem; padding: 0.9375rem; position: relative; text-decoration: none; transition: all 0.5s; white-space: nowrap; }
.node-group { align-items: center; background: none!important; border: none!important; display: inline-flex; padding: 0!important; position: relative; }
.node-group > span { z-index: 1; }
.node-group > .label::before { background-color: #ccc; content: ''; height: 0.0625rem; left: 100%; position: absolute; top: 50%; transform: translateY(-50%); width: 3.1875rem; }
.node-side { display: flex; flex-direction: column; margin-left: 3.125rem; padding-left: 0.625rem; position: relative; }
.node-side::before { background-color: #ccc; content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 1px; }
.node-side .label ,.node-side span{ background-color: #e5e7ea; border-radius: 0.3125rem; font-size: 1rem; margin-bottom: 0.3125rem; position: relative; white-space: nowrap;padding: 0.9375rem; min-width: 6.875rem; }
.node-side .label:last-child { margin-bottom: 0; }
.node-side .label::before ,
.node-side span::before { background-color: #ccc; content: ''; height: 1px; left: -10px; position: absolute; top: 50%; transform: translateY(-50%); width: 10px;  }
.org-chart li .lv-1 {background: #891c21; color: #fff; border: 0; font-weight: bold;font-size: 1.2rem;}
.org-chart li .lv-1+ul:before{height: 50%;}
.org-chart li .lv-2{margin-left: 23%; background: #4f5151 !important; border: 1px solid #4f5151 !important;  color: #fff !important;}
.org-chart li .lv-2+.node-side span:before{display: none;}
.org-chart li .lv-2+.node-side:before {border: 1px solid #ccc; width: 30px; background: #fff; height: 60%; border-radius: 5px; border-right: 0; top: 50%; transform: translateY(-50%)}
.org-chart li .lv-3{margin-left: 23%;background: #4f5151 !important; border: 1px solid #4f5151 !important;  color: #fff !important;}
.org-chart li .lv-3+.node-side:before {display: none;}
.org-chart li .lv-3+.node-side span:before {width: 0.75rem; left: -0.75rem; top: 55%;}
.org-chart li .lv-4{background: #fff; color: #333; font-weight: 600; border:3px solid #b8b8b8; }

/*찾아오시는길*/
.wrap_controllers {width: 1px;height: 1px;overflow: hidden;position: absolute;bottom: -9999em;left: -9999em;display: block;text-indent: -9999em;font-size: 0px;line-height: 0;}
.map{position: relative; }
.map .root_daum_roughmap,.map .wrap_map{ width: 100% !important; }
.root_daum_roughmap_landing{border-bottom: 1px solid #ddd;}
.root_daum_roughmap > span{display: none;}
.map .map_skip{position: absolute;top: 28px;text-align: left;width: 100%; z-index: -1;}
.root_daum_roughmap .cont .section.lst{display: none;}
.address-info{ bottom: 0; z-index: 1; padding: 30px; background: #f7f8f9; width: 100%; text-align: center;  border: 1px solid #eee;}
.address-info p {color: #333; font-size: 1.3rem; font-weight: 500; position: relative; }
.address-info p span{color: #225ab9; font-weight: 700;}
.address-info p i{color: #225ab9;}
.map_info > ul > li {display: flex; flex-wrap: wrap; padding: 40px 0;}
.map_info > ul > li + li {padding-top: 0;}
.map_info > ul > li h4 {width: 250px;color: #000; font-size: 20px; line-height: 1.4; position: relative;}
.map_txt {border-top: 2px solid #333; width: calc(100% - 250px);}
.map_txt li {border-bottom: 1px solid #ddd;padding: 30px 20px;}
.map_txt li:last-child {border-bottom: 0;}
.map-1{display: flex; gap: 1.25rem;padding-bottom: 0.625rem;}
.map-1 .map{width: 50%;}
.map-1 .image{width: 50%;  overflow: hidden;}
.map-1 .image img{width: 100%; height: 100%; object-fit: cover;}
/*사업소개*/
.work-box{position: relative; overflow: hidden; }
.work-box h3{font-size: 2.5rem; color: #222; z-index:10;font-weight: 800;}
.work-box h3 span{color: #891c21;}
.work-box.box-1{display: flex; gap: 0.9375rem;}
.process-1 {display: flex; gap: 0.625rem;}
.process-1 li{flex: 1 1 0; text-align: center; border: 3px solid #ddd; padding: 1.875rem; border-radius: 0.625rem;}
.process-1 li h4{font-size: 1.25rem; padding: 0.625rem 0 0.9375rem;  color: #333; }
.process-1 .icon p{ color: #891c21; font-size: 1.1rem;}
.process-1 .icon {display: inline-block; border-bottom: 0.0625rem solid #891c21; padding: 0 0 0.625rem;}
.process-2 {display: flex; gap: 0.625rem;}
.process-2 li{flex: 1 1 0; text-align: center; border: 3px solid #ddd; padding: 1.875rem 15px; border-radius: 0.625rem;}
.process-2 li h4{font-size: 1.25rem; padding:0.625rem 0 0.9375rem;  color: #333; }
.process-2 li .num{width: 1.25rem; height: 1.25rem; line-height: 1.25rem; color: #fff; background: #891c21; border-radius: 3.125rem; display: inline-block; font-size: .8rem; font-weight: 800;}
.process-2 small{font-size: .9rem; padding-top: 5px; display: block;}
.image-list.list-1{flex-wrap: wrap;}
.image-list.list-1 li{ border-radius: 0.625rem; width: calc(50% - 0.5rem); overflow: hidden; flex:inherit;}
.image-list.list-1 .thumb{padding-bottom: 70%; border-radius: 10px; overflow: hidden;}
.image-list.list-2 .thumb{padding-bottom: 100%; border-radius: 10px; overflow: hidden;}
.image-list.list-3{flex-wrap: wrap;}
.image-list.list-3 .thumb{padding-bottom: 70%;}
.image-list.list-3 li{ border-radius: 0.625rem; width: calc(33% - 12px); overflow: hidden; flex:inherit;}
.image-list.list-4 .thumb{padding-bottom: 70%; border-radius: 10px; overflow: hidden;}

.support-info{border-top: 1px solid #333; border-bottom: 1px solid #333;}
.support-info ul {display: flex; padding: 30px 0; }
.support-info ul li {width: calc(100% / 3); position: relative; padding: 0 10px; text-align: center}
.support-info ul li+li:before{content: ''; width: 1px; height: 50px; background: #ddd; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%) }
.support-info ul li span {font-weight: 700; }
.support-info ul li p {color: #666; font-weight: 300; font-size: 1.2rem; }
.support-info ul li p:first-child{color: #d93030; padding-bottom: 0.625rem;}

/*후원하기*/
.account-info {padding-top: 1.25rem; display: flex; gap: 0.9375rem;}
.account-info li{flex: 1 1 0; padding: 30px; background: #fff; text-align: center; border-radius: 10px; border:1px solid #d8d8d8; font-size: 1.6rem; font-weight: 700; color: #333;}
.account-info li small{display: block; font-size: 1rem;  padding-top: 0.3125rem;}
.account-info li span{font-family: 'Daeojamjil'; }
.btn-donation {text-align: center; padding-top: 1.875rem;}
.btn-donation .btn{font-size: 1.3rem; background: #d93030; color: #fff; border: 0.0625rem solid #d93030; padding: 0.9375rem 2.5rem; border-radius: 3.125rem; transition: all .2s;}
.btn-donation .btn:hover{background: #891c21; border: 1px solid #891c21; }

.support-info2{margin-top:50px; border:3px solid #ddd; border-radius:20px; padding:30px; text-align:center}
.support-info2 h4{font-size: 1.25rem;margin-bottom:10px}
.support-info2 .support-tel{ margin-top:20px;}
.support-info2 .support-tel span{background:#d93030; color:#fff; padding:10px 20px;border-radius:10px}

.support-img ul{display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:30px}
.support-img ul li{position:relative;width:calc(100%/4 - 10px); margin-top:20px; border:1px solid #ddd;padding:15px; font-size:.9em}
.support-img ul li h4{font-size: 1.25rem;margin-top:10px}
.support-img ul li a{position:absolute;bottom:15px;display:block;width:calc(100% - 30px);background:#d93030; color:#fff;padding:0 10px; border-radius:5px;text-align:center; margin-top:10px; line-height:38px;transition: all .2s ease-in-out;}
.support-img ul li a:hover{background:#891c21}

@media (max-width: 1400px) {
    .content { padding: 2.5rem 0.9375rem 4rem; }
    .page-title-wrap .bg-img .animate-bg-img{animation: none; height: 100%; top: 0; }
}

@media (max-width: 991px) {

    /*사업소개*/
    .process-1 {flex-direction: column;}
    .process-2 {flex-direction: column;}

    /*후원안내*/
    .account-info li{padding: 1.875rem 0.9375rem;}
}

@media (max-width: 767px) {
    .page-title-wrap{height: 13rem; border-radius: 0; width: 100%;}
    /*법인소개*/
    .about-1 {flex-direction: column;}
    .about-2 {flex-direction: column;}
    .about-2 li:first-child{padding: 1.875rem;  border-right: 0;  border-bottom: 0.0625rem solid rgba(255, 255, 255, .3);}
    .about-2 li:last-child{padding: 1.875rem;}
    .vision {flex-direction: column;}
    .vision .thumb {padding-bottom: 80%}
    .ci-group{padding: 0.9375rem;}
    .ci-1,.ci-3{flex-direction: column; gap: 1.25rem;}
    .image-list{flex-wrap: wrap;}
    .image-list li{ width: calc(100% / 2 - 0.625rem); flex : auto;}
    .about-3 ul li:nth-child(1),
    .about-3 ul li:nth-child(2),
    .about-3 ul li:nth-child(3){
        width: 100%;
    }
	.about-3.support-link ul li:nth-child(n+2){border-left:0}
	.about-3.support-link ul li{border-bottom:1px solid #ddd}
	.about-3.support-link ul li:last-child{width:100%; border-bottom:0}
	

    /*인사말*/
    .intro-group{flex-direction: column;}
    .intro-group .image{text-align: center;}

    /*연혁*/
    .history .timeline::before { left: 1.25rem; }
    .history .timeline > li { padding-left: 2.5rem; padding-right: 0; width: 100%; }
    .history .timeline > li:nth-child(odd) { left: 0; padding-right: 0; }
    .history .timeline > li:nth-child(even) { left: 0; }
    .history .timeline > li::before { left: 1.25rem; margin-left: -0.625rem; }
    .history .timeline > li:nth-child(odd)::before,
    .history .timeline > li:nth-child(even)::before { left: 1.25rem; margin-left: -0.625rem; }
    .history .timeline > li:nth-child(odd) .timeline-content { text-align: left; }

    /*조직도*/
    .org-chart li .lv-1+ul:before{height: 44%;}
    .org-chart li .lv-4{padding: 5px; font-size: 13px;}
    .org-chart li .lv-4+ul{flex-direction: column;}
    .org-chart li .lv-4+ul li:first-child{padding-top: 0;}
    .org-chart li .lv-4+ul li:before,
    .org-chart li .lv-4+ul li:after{border: 0;}
    .org-chart li > span, .org-chart li > .label, .org-chart li .node-group > .label {min-width: 7.5rem;}
    .node-side{margin-left: 1.25rem;}

    /*사업소개*/
    .work-box:after{background: rgba(0,0,0,.6)}
    .work-box h3{font-size: 2rem; padding: 0 15px;}
    .support-info ul{flex-wrap: wrap; padding: 0;}
    .support-info ul li{width: 100%; padding: 0.9375rem 0;}
    .support-info ul li+li:before{display: none;}

    /*후원안내*/
    .account-info{flex-direction: column;}
    .account-info li{font-size: 1.4rem;}
	
	.support-img ul li{width:100%}
	.support-img ul li img{width:100%}

    /* 찾아오시는길 */
    .map_info > ul > li h4 {width: 100%; margin-bottom: 20px;}
    .map_txt {width: 100%;}
    .map-1 {flex-direction: column;}
    .map-1 .map{width: 100%;}
    .map-1 .image{width: 100%;}
    .root_daum_roughmap{height: 300px}
}