@charset "utf-8";

/*공통*/
.c-white {color:#fff !important;}
.c-main {color:var(--color-primary) !important;}
.c-gradient {background:linear-gradient(to right, var(--color-primary), var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.c-2 {color:var(--color-secondary) !important;}

.f-hak {font-family:var(--font-hak);}

.content-margin {margin-bottom:clamp(40px, calc(120/ var(--inner) * 100vw ),120px);}
.content-padding {padding:clamp(40px, calc(120/ var(--inner) * 100vw ),120px) 0;}

.doc-cnt {margin-bottom:clamp(40px, calc(100/ var(--inner) * 100vw ),100px);}
.doc-tit {margin-bottom:1.3em; font-size:clamp(20px, calc(28/ var(--inner) * 100vw ),28px); line-height:1.2em; font-weight:700;}
.doc-tit span {display:inline-block;}

.table-wrap table {width:100%; border-collapse:collapse; border-spacing:0px;}

.root_daum_roughmap {width:100% !important; height:clamp(270px, calc(430/ var(--inner) * 100vw ),430px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(270px, calc(430/ var(--inner) * 100vw ),430px) !important;}
.root_daum_roughmap .cont {display:none;}

/* 인사말 */
.vision-mission {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--size20); margin-bottom:var(--size80); text-align:center;}
.vision-mission h2 {margin-bottom:12px; font-family:var(--font-hak); font-size:clamp(16px, calc(22/ var(--inner) * 100vw ),22px); line-height:1.3em; font-weight:700; color:#2c2c2c;}
.vision-mission p {font-size:clamp(18px, calc(24/ var(--inner) * 100vw ),24px); line-height:1.5em; font-weight:700; color:#505050;}
.vision-mission .box {padding:var(--size40); border-radius:1.5em;}
.vision-mission .vision {background:#effaeb;}
.vision-mission .vision h2 {color:var(--color-primary);}
.vision-mission .mission {background:#fef9f5;}
.vision-mission .mission h2 {color:var(--color-secondary);}


.greetings-box {display:flex; align-items:center; gap:clamp(20px, calc(100/ var(--inner) * 100vw ),100px);}
.greetings-box .cnt {flex:1 1 auto; min-width:0; width:1%;}
.greetings-box .icon {margin-bottom:var(--size40);}
.greetings-box .txt {margin-bottom:1.7em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.7em;}
.greetings-box .txt.c-gradient {font-weight:600;}
.greetings-box .txt:last-child {margin-bottom:0;}

/* 운영법인 */
.foundation-box {display:flex; position:relative; gap:clamp(20px, calc(50/ var(--inner) * 100vw ),50px); padding:0 var(--size60);}
.foundation-box .cnt {flex:1 1 auto; min-width:0; width:1%; padding-top:var(--size20);}
.foundation-box .tt {margin-bottom:1.5em; font-size:clamp(13px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.2em; font-weight:700; color:#59ac40;}
.foundation-box .txt {font-size:clamp(20px, calc(42/ var(--inner) * 100vw ),42px); line-height:1.2em; font-weight:700; color:#2c2c2c;}

.foundation-txt {margin-top:-78px; margin-bottom:20px; border-radius:1.5em; padding:var(--size60) 20px; padding-right:clamp(20px, calc(85/ var(--inner) * 100vw ),85px); background:url('/images/sub/foundation-bg.jpg') no-repeat 50% 50%/cover;}
.foundation-txt .in {max-width:780px; margin:0 0 0 auto;}
.foundation-txt .tit {margin-bottom:var(--size40); font-size:clamp(16px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.7em; font-weight:600; color:#2c2c2c;}
.foundation-txt .txt {margin-bottom:var(--size30); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.7em; color:#676767;}
.foundation-txt .txt:last-child {margin-bottom:0;}

.foundation-bg {display:flex; flex-direction:column; justify-content:center; min-height:clamp(150px, calc(320/ var(--inner) * 100vw ),320px); padding:var(--size60); border-radius:1.5em; background:url('/images/sub/foundation-bg2.jpg') no-repeat 50% 50%/cover;}
.foundation-bg .tt {margin-bottom:1.6em; font-size:clamp(13px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.2em; font-weight:700; color:#59ac40;}
.foundation-bg .txt {font-size:clamp(16px, calc(38/ var(--inner) * 100vw ),38px); line-height:1.2em; font-weight:700; color:#fff;}

/* 시설 둘러보기 */
.facility-title {margin-bottom:var(--size55);}
.facility-title h2 {margin-bottom:1em; font-family:var(--font-hak); font-size:clamp(20px, calc(32/ var(--inner) * 100vw ),32px); line-height:1; font-weight:700; color:#2c2c2c;}
.facility-title h2 .dot {display:inline-block; vertical-align:top; width:0.38em; height:0.38em; border-radius:50%; background:#59ac40; margin-left:0.4em;}
.facility-title p {font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.4em; color:#505050;}

.facility-tab {margin-bottom:var(--size60);}
.facility-tab ul {display:flex; margin:-5px;}
.facility-tab ul li {width:25%; padding:5px;}
.facility-tab ul li a {display:flex; align-items:center; justify-content:center; padding:1em; height:100%; border:1px solid #dfdfdf; border-radius:0.6em; font-family:var(--font-hak); font-size:clamp(12px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.2em; font-weight:700; color:#a8a8a8; text-align:center;}
.facility-tab ul li.active a {color:#fff; background:#f6821f; border-color:#f6821f;}

.facility-content {display:flex; gap:10px;}
.local-tabs {width:292px; background:#f8f8f8; padding:10px var(--size30); border-radius:1.5em;}
.local-tabs ul li {border-bottom:1px dashed #dfdfdf;}
.local-tabs ul li a {display:block; position:relative; padding:1.5em 0; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.2em; font-weight:700; color:#505050;}
.local-tabs ul li a:before {content:''; position:absolute; top:50%; margin-top:-0.2em; right:0; width:0.85em; height:0.4em; background:url('/images/sub/icon-arw.png') no-repeat 50% 50%/contain; opacity:0; transform:translateX(-50%); transition:all 0.2s ease;}
.local-tabs ul li.active a {color:#f6821f;}
.local-tabs ul li.active a:before {opacity:1; transform:translateX(0);}

.gal-slider {position:relative; border-radius:1.5em; overflow:hidden;}
.gal-slider .ctrl {display:flex; gap:0.5em; position:absolute; right:var(--size20); bottom:var(--size20); }
.gal-slider .ctrl .slick-arrow {display:block; width:clamp(35px, calc(56/ var(--inner) * 100vw ),56px); height:clamp(35px, calc(56/ var(--inner) * 100vw ),56px); background-repeat:no-repeat; background-position:50% 50%; background-color:rgba(18,18,18,0.40); background-size:30% auto; border:0; text-indent:-9999px; overflow:hidden; border-radius:0.75em; transition:0.2s all ease;}
.gal-slider .ctrl .slick-arrow:hover {background-color:#121212;}
.gal-slider .ctrl .slick-prev {background-image:url('/images/sub/sld-prev.png');}
.gal-slider .ctrl .slick-next {background-image:url('/images/sub/sld-next.png');}

#loadSlider {flex:1 1 auto; min-width:0; width:1%;}

/* 찾아오시는 길 */
.local-map {border-radius:1.5em; overflow:hidden; margin-bottom:var(--size60);}
.local-info {display:flex;}
.local-info > div {width:50%;}
.local-info .title h2 {margin-bottom:2em; font-family:var(--font-hak); font-size:clamp(20px, calc(32/ var(--inner) * 100vw ),32px); line-height:1; font-weight:700; color:#59ac40;}
.local-info .btns {display:flex; gap:0.5em;}
.local-info .btns a {display:inline-flex; align-items:center; padding:1.25em 1.5em; border:1px solid #ddd; border-radius:100vh; font-weight:700; line-height:1; color:#2c2c2c;}
.local-info .btns a img {display:inline-block; margin-right:10px;}
.local-info .btns a span {display:inline-block; margin-left:2em; font-size:var(--font-size-13); font-weight:500; line-height:1; color:#a8a8a8;}

.local-info .cnt {padding-top:var(--size35); border-top:2px solid #2c2c2c;}
.local-info .addre {margin-bottom:2em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.2em; font-weight:500; color:#2c2c2c;}
.local-info .info {display:flex; flex-wrap:wrap; margin-bottom:-1em;}
.local-info .info dl {display:flex; width:50%; margin-bottom:1em;}
.local-info .info dl dt {flex:0 0 auto; width:90px; line-height:1.2em; font-weight:700; color:#a8a8a8;}
.local-info .info dl dd {font-family:var(--font-hak); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.2em; font-weight:400; color:#2c2c2c;}

/* 청소년운영위원회 '지음' */
.participate-img {margin-bottom:var(--size60);}

.participate-info {display:flex; align-items:center; gap:clamp(20px, calc(80/ var(--inner) * 100vw ),80px);}
.participate-info .txt-wrap {flex:1 1 auto; min-width:0; width:1%;}
.participate-info .title .tit {margin-bottom:0.8em; font-family:var(--font-hak); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); line-height:1.5em; font-weight:700; color:#2c2c2c;}
.participate-info .title .txt {margin-bottom:var(--size55); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.7em;  color:#505050;}
.participate-info .title .sns-btn a {display:inline-flex; gap:10px; align-items:center; font-size:var(--font-size-14); font-weight:500; line-height:1; color:#2c2c2c;}
.participate-info .cnt {margin-top:var(--size80);}
.participate-info .cnt dl {display:flex; gap:6px; margin-bottom:10px;}
.participate-info .cnt dl:last-child {margin-bottom:0;}
.participate-info .cnt dt {display:flex; align-items:center; justify-content:center; width:80px; padding:0.5em; background:#59ac40; border-radius:12px; font-size:clamp(15px, calc(20/ var(--inner) * 100vw ),20px); line-height:1; font-weight:700; color:#fff; text-align:center;}
.participate-info .cnt dd {flex:1 1 auto; min-width:0; width:1%; padding:1.1em 1em; border-radius:12px; background:#f4f4f4; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.4em; color:#2c2c2c;}

.participate-group .purpose {display:flex; gap:var(--size20);}
.participate-group .purpose .box {flex:1; padding:var(--size40); border-radius:1.5em; background:#effaeb;}
.participate-group .purpose .num {display:block; width:3em; height:3em; line-height:3em; background:#fff; border-radius:100%; font-weight:700; color:#59ac40; text-align:center;}
.participate-group .purpose p {margin-top:1.3em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.7em; font-weight:600; color:#2c2c2c;}
.participate-group .base-info {margin-top:var(--size30); padding:var(--size40); border-radius:1.5em; border:1px solid #dfdfdf;}
.participate-group .base-info p {display:flex; margin-bottom:1.6em; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.7em; color:#505050;}
.participate-group .base-info p:last-child {margin-bottom:0;}
.participate-group .base-info .num {display:inline-block; width:75px; flex:0 0 auto;}

.dot-list>li {position:relative; padding-left:1em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.4em; font-weight:600; color:#505050;}
.dot-list>li:before {content:''; position:absolute; top:0.4em; left:0; width:0.4em; height:0.4em; border-radius:50%; background:#f6821f;}

.benefits {display:flex; gap:var(--size20);}
.benefits .box {flex:1; padding:var(--size40) 20px; border-radius:1.5em; background:#effaeb; text-align:center;}
.benefits .box .cate {display:inline-block; padding:1em 1.1em; background:#fff; border-radius:100vh; line-height:1; font-weight:700; color:#59ac40;}
.benefits .box .icon img {display:block; margin:0 auto; border-radius:100vh; box-shadow:4px 4px 24px rgba(0,0,0,0.07);}
.benefits .box p {margin-top:1.3em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.5em; font-weight:600; color:#2c2c2c;}

.benefits.type-block {flex-direction:column;}
.benefits.type-left .box {padding:var(--size40) var(--size25); text-align:left;}

.org-info .col {display:flex; align-items:center; gap:var(--size70); padding:var(--size40) 0; border-bottom:1px dashed #dfdfdf;}
.org-info .col:first-child {border-top:1px dashed #dfdfdf;}
.org-info .col .txt-wrap {flex:1 1 auto; min-width:0; width:1%;}
.org-info .col .cate {display:inline-block; margin-bottom:var(--size30); padding:0.8em 1.1em; background:#59ac40; border-radius:100vh; font-family:var(--font-hak); font-size:var(--font-size-14); font-weight:700; line-height:1; color:#fff;}
.org-info .col .tit {margin-bottom:0.56em; font-family:var(--font-hak); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); line-height:1.2em; font-weight:700; color:#2c2c2c;}
.org-info .col .txt {margin-bottom:2em; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.4em; color:#a8a8a8;}

.org-info .col dl {display:flex; margin-bottom:1em; line-height:1.2em;}
.org-info .col dl:last-child {margin-bottom:0;}
.org-info .col dl dt {width:50px; font-weight:700; color:#878787;}
.org-info .col dl dd {flex:1 1 auto; min-width:0; width:1%;}

/* 활동 */
.activity-bg {display:flex; flex-direction:column; justify-content:space-between; min-height:clamp(150px, calc(420/ var(--inner) * 100vw ),420px); padding:var(--size60) var(--size70); border-radius:1.5em; background-repeat:no-repeat; background-position:right center; background-size:cover;}
.activity-bg .tit {font-family:var(--font-hak); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); line-height:1.5em; font-weight:700; color:#2c2c2c;}
.activity-bg .info {margin-top:var(--size60); max-width:450px;}
.activity-bg .info dl {display:flex; gap:6px; margin-bottom:10px;}
.activity-bg .info dl:last-child {margin-bottom:0;}
.activity-bg .info dt {display:flex; align-items:center; justify-content:center; width:80px; padding:0.5em; background:#59ac40; border-radius:12px; font-size:clamp(15px, calc(20/ var(--inner) * 100vw ),20px); line-height:1; font-weight:700; color:#fff; text-align:center;}
.activity-bg .info dd {flex:1 1 auto; min-width:0; width:1%; padding:0.8em 1em; border-radius:12px; background:#fff; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.4em; color:#2c2c2c;}

.activity-bg .guide-room {margin-top:var(--size60); max-width:610px;}
.activity-bg .guide-room .tit {margin-bottom:var(--size25); font-family:var(--font-hak); font-size:clamp(16px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.2em; font-weight:700; color:#59ac40;}
.activity-bg .guide-room ul {display:flex; flex-wrap:wrap; gap:var(--size10);}
.activity-bg .guide-room ul li {flex:1;}
.activity-bg .guide-room ul li .in {display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:var(--size25) 15px; position:relative; background:#fff; border-radius:1em; box-shadow:6px 6px 24px rgba(0,0,0,.06); text-align:center;}
.activity-bg .guide-room ul li .tt {margin-top:0.7em; font-family:var(--font-hak); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.2em; font-weight:400; color:#505050;}

.activity-poster {display:flex; gap:clamp(20px, calc(80/ var(--inner) * 100vw ),80px); align-items:center;}
.activity-poster .cnt {flex:1 1 auto; min-width:0; width:1%;}

/* 마을공동체 사업 */
.generation-info {display:flex; gap:clamp(20px, calc(80/ var(--inner) * 100vw ),80px); align-items:center;}
.generation-info .cnt {flex:1 1 auto; min-width:0; width:1%;}
.generation-info .info {padding:var(--size40) 0; border-top:2px solid #2c2c2c;}
.generation-info .info dl {display:flex; margin-bottom:1em; gap:0.8em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); font-weight:600; line-height:1.4em; color:#2c2c2c;}
.generation-info .info dl:last-child {margin-bottom:0;}
.generation-info .info dt {padding:0.8em 1em; background:#59ac40; border-radius:100vh; font-size:var(--font-size-16); line-height:1; font-weight:700; color:#fff;}
.generation-info .info dd {padding-top:0.2em; flex:1 1 auto; min-width:0; width:1%;}
.generation-info .detail {padding:var(--size40) 20px; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;} 
.generation-info .detail dl {margin-bottom:var(--size30); line-height:1.4;}
.generation-info .detail dt {margin-bottom:0.5em; font-weight:700; color:#878787;}
.generation-info .detail dl:last-child {margin-bottom:0;}

/* 시설 이용 */
.guide-price table {border-top:1px solid #2c2c2c; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.4; text-align:center;}
.guide-price table th {padding:1.2em 10px; background:#fafafa; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; font-weight:600; color:#2c2c2c;}
.guide-price table td {padding:1.2em 10px; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;}
.guide-price table th:last-child, .guide-price table td:last-child {border-right:0;}
.guide-price table th:first-child, .guide-price table td:first-child {border-left:0;}
.guide-price table th:last-child {border-right:0;}
.guide-price table th:first-child {border-left:0;}
.guide-price table th:last-child {border-right:0;}

.table-top-cap {text-align:right; line-height:1.4; color:#ccc;}
.table-cap {margin-top:var(--size25); line-height:1.4; color:#a8a8a8;}
.guide-price .table-top-cap {margin-top:calc(var(--size50) * -1); margin-bottom:var(--size35);}

.guide-notice {padding:var(--size40); border-radius:1.5em; border:1px solid #dfdfdf;}
.guide-notice ul li {position:relative; padding-left:4.22em; margin-bottom:1.7em; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.4em; color:#505050;}
.guide-notice ul li .num {position:absolute; left:0; font-weight:700; color:#ccc;}
.guide-notice ul li:last-child {margin-bottom:0;}
.guide-notice .box {margin-top:var(--size45); padding:var(--size40); border-radius:1em; background:#f8f8f8;}
.guide-notice .box p {position:relative; padding-left:0.6em; margin-bottom:1em; font-weight:500; line-height:1.4; color:#a8a8a8;}
.guide-notice .box p:before {content:''; position:absolute; top:0.6em; left:0; width:0.3em; height:1px; background:#a8a8a8;}
.guide-notice .box p:last-child {margin-bottom:0;}

.page-bottom-btn {margin-top:var(--size70); text-align:center;}
.page-bottom-btn .btn-pack img {display:inline-block; vertical-align:middle; margin-left:0.6em;}