/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1781059107
Updated: 2026-06-10 02:38:27

*/
/* m-visual-con */
.visual-con {position: relative; border-radius: 0 0 10rem 10rem;}
.visual-layer .vis-con {position: absolute; top: -5%; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.visual-layer .vis-txt .title, .visual-layer .vis-txt .title span {font-size: 7.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.14rem; font-family: 'Paperozi'; color: #fff;}
.visual-layer .vis-txt .title .red {color: var(--sub-color);}
.visual-layer .vis-txt .title .blue {color: var(--main-color);}
.visual-layer .vis-txt .detail {font-size: 2.4rem; letter-spacing: -0.18rem; padding: 2.5rem 0 5.5rem; color: #fff; font-weight: 300;}

.visual-layer .vis-dots {display: flex; gap: 1.5rem;}
.visual-layer .vis-dots .dot {opacity: 0.6; width: 1.2rem; height: 1.2rem; background-color: #fff; transition: 0.3s; border-radius: 2rem; cursor: pointer;}
.visual-layer .vis-dots .dot:hover {opacity: 1;}
.visual-layer .vis-dots .dot.active {opacity: 1; width: 13rem;}

.vis-scroll-con {position: absolute; right: 5rem; bottom: 10rem; z-index: 5; cursor: pointer;}
.vis-scroll-con .vis-scroll {position: relative; width: 16rem; height: 16rem;}
.vis-scroll-con .vis-scroll .img {position: absolute; width: 100%; height: 100%;}
.vis-scroll-con .vis-scroll .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.vis-scroll-con .vis-scroll .bg {animation: rotateBg 12s linear infinite;}
.vis-scroll-con .vis-scroll .arrow {animation: arrowMove 1.5s ease-in-out infinite;}

@keyframes rotateBg {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes arrowMove {
  0%, 100% {transform: translateY(-5px);}
  50% {transform: translateY(5px);}
}

/* m-intro-con */
.m-intro-wrap {padding: 15rem 0 8rem; display: flex; justify-content: space-between; align-items: center;}
.m-intro-wrap .int-left .title {font-size: 4rem; line-height: 1.5; color: #000; font-family: 'Paperozi'; font-weight: 700;}
.m-intro-wrap .int-left .detail {padding-top: 3rem; font-size: 2.4rem; font-weight: 300; color: #424242; letter-spacing: -0.16rem; line-height: 1.6;}

.m-intro-wrap .int-right .int-img {position: relative;}
.m-intro-wrap .int-right .bg-before {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m-intro-wrap .int-right .bg-before .bg {position: absolute;}
.m-intro-wrap .int-right .bg-before .bg.bg01 {left: -3rem; top: 8rem; width: 127px; height: 111px; background-image: url(/wp-content/uploads/2026/06/m-intro-right-after1.png);}
.m-intro-wrap .int-right .bg-before .bg.bg02 {right: -2rem; bottom: 0; width: 188px; height: 142px; background-image: url(/wp-content/uploads/2026/06/m-intro-right-after2.png);}

/* m-notice-con */
.m-notice-wrap {padding: 11rem 16rem; border-radius: 6rem; background: url("/wp-content/uploads/2026/06/m-noti-bg.jpg") no-repeat center / cover; background-attachment: fixed; overflow: hidden;}
.m-notice-wrap .notice-wrap {display: flex; justify-content: space-between;}
.m-notice-wrap .notice-wrap .noti-left {margin-top: 7rem;}
.m-notice-wrap .notice-wrap .m-title {font-size: 4.4rem; color: #000; font-family: 'Paperozi'; font-weight: 800;}
.m-notice-wrap .notice-wrap .txt {padding: 2.5rem 0 10rem; font-size: 2.4rem; color: #424242; font-weight: 300; line-height: 1.3; letter-spacing: -0.12rem;}

.more-btn a {width: 16rem; display: inline-flex; justify-content: space-between; align-items: center; padding: 1.5rem 3rem; font-size: 1.8rem; font-weight: 500; color: #fff; background-color: var(--main-color); border-radius: 1rem; transition: var(--trans);}
.more-btn a i {transition: var(--trans);}
.more-btn a:hover {background-color: #000;}
.more-btn a:hover i {transform: rotate(90deg);}

/* 추출 */
.m-notice-wrap .main-list .list-wrap {width: 108rem; margin-left: -3rem;}
.m-notice-wrap .main-list .list-wrap .item {width: 34rem; height: 38rem; margin-left: 3rem;}
.m-notice-wrap .main-list .list-wrap .item a {padding: 5rem 3rem;  width: 100%;  height: 100%;  display: flex;  flex-direction: column;  border-radius: 2rem;  background-color: #fff;}
.m-notice-wrap .main-list .list-wrap .item a .title {margin-bottom: 3rem; height: 6.5rem; font-size: 2.2rem; color: #000; line-height: 1.6; letter-spacing: -0.12rem; font-weight: 700;}
.m-notice-wrap .main-list .list-wrap .item a .detail, .m-notice-wrap .main-list .list-wrap .item a .detail * {-webkit-line-clamp: 3; font-size: 2rem; color: #424242; line-height: 1.4; font-weight: 400; letter-spacing: -0.12rem;}
.m-notice-wrap .main-list .list-wrap .item a .date {margin-top: auto; font-size: 1.8rem; color: #424242; font-weight: 500;}

.m-notice-wrap .noti-control {margin-top: 4.5rem; display: flex; align-items: center; gap: 5rem;}
.m-notice-wrap .noti-control .progress {position: relative; width: 100%; height: 2px; background-color: #ffffff40; overflow: hidden;}
.m-notice-wrap .noti-control .progress .bar {position: absolute; display: inline-block; left: 0; width: 0; height: 100%; background: #fff;}
.m-notice-wrap .noti-control .progress.active .bar {animation: noticeProgress 3s linear forwards;}

@keyframes noticeProgress {
   from {width: 0;}
  to {width: 100%;}
}
.m-notice-wrap .noti-control .arrow-wrap {display: flex; gap: 1.5rem;}
.m-notice-wrap .noti-control .arrow-wrap .arrow {display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; background-color: #fff; border-radius: 50%; cursor: pointer; transition: var(--trans);}
.m-notice-wrap .noti-control .arrow-wrap .arrow i {font-size: 2.5rem; color: #000;}
.m-notice-wrap .noti-control .arrow-wrap .arrow:hover {background-color: var(--main-color);}
.m-notice-wrap .noti-control .arrow-wrap .arrow:hover i {color: #fff;}

/* m-gallery-con */
.gallery-con {padding: 8rem 0;}
.gallery-con .gallery-txt {padding-bottom: 6rem; text-align: center;}
.gallery-con .gallery-txt .m-title {font-size: 4.4rem; color: #000; font-family: 'Paperozi'; font-weight: 800;}
.gallery-con .gallery-txt .detail {padding-top: 3rem; font-size: 2.4rem; color: #424242; line-height: 1.4; letter-spacing: -0.12rem;}

/* 추출 */
.gallery-wrap .gal-list.swiper-wrapper {align-items: center;}
.gallery-wrap .gal-list {margin-left: -5rem;}
.gallery-wrap .kboard-list-item {margin-right: 5rem; background-color: #f5f5f5; border-radius: 2rem; overflow: hidden;}
.gallery-wrap .kboard-list-item.swiper-slide-active {width: 76rem !important; height: 42rem;}
.gallery-wrap .kboard-list-item.swiper-slide-active .kboard-list-thumbnail {height: 34rem !important;}
.gallery-wrap .main-gal-slide-titie-wrap {padding: 3rem 2rem;}
.gallery-wrap .main-gal-slide-titie-wrap .title {-webkit-line-clamp: 1; font-size: 2rem; letter-spacing: -0.12rem; color: #000; font-weight: 500;}

.gallery-wrap .gal-control {margin-top: 4.5rem; display: flex; align-items: center; gap: 5rem;}
.gallery-wrap .gal-control .progress {position: relative; width: 100%; height: 2px; background-color: #00000040; overflow: hidden;}
.gallery-wrap .gal-control .progress .bar {position: absolute; display: inline-block; left: 0; width: 0; height: 100%; background: var(--main-color);}
.gallery-wrap .gal-control .progress.active .bar {animation: galleryProgress 3s linear forwards;}

@keyframes galleryProgress {
  from {width: 0;}
  to {width: 100%;}
}

.gallery-wrap .gal-control .arrow-wrap {display: flex; gap: 1.5rem;}
.gallery-wrap .gal-control .arrow-wrap .arrow {display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; background-color: var(--main-color); border-radius: 50%; cursor: pointer; transition: var(--trans);}
.gallery-wrap .gal-control .arrow-wrap .arrow i {font-size: 2.5rem; color: #fff;}
.gallery-wrap .gal-control .arrow-wrap .arrow:hover {background-color: #000;}

/* m-quick-con */
.m-quick-wrap {padding: 10rem 0; background: url("/wp-content/uploads/2026/06/m-quick-bg.jpg") no-repeat center / cover;}
.quick-con .m-title {font-size: 4rem; color: #000; list-style: none; line-height: 1.4; letter-spacing: -0.12rem; font-family: 'Paperozi'; font-weight: 700;}
.quick-wrap {margin-top: 5rem; display: flex; gap: 2rem; justify-content: space-between;}
.quick-wrap .btn {position: relative; border-radius: 2rem; background: no-repeat center / cover;}
.quick-wrap .btn::before {opacity: 0; transition: var(--trans); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, var(--main-color), #00000030); border-radius: 2rem;}
.quick-wrap .btn:hover::before {opacity: 1;}

.quick-wrap .qui-left {width: 65%; background-image: url("/wp-content/uploads/2026/06/m-quick-left.jpg");}
.quick-wrap .qui-right {width: 35%; background-image: url("/wp-content/uploads/2026/06/m-quick-right.jpg");}
.quick-wrap a {position: relative; padding: 7rem 6rem 6.5rem; height: 54rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border-radius: 1rem; overflow: hidden;}
.quick-wrap a .tag {padding: 1.5rem 3rem; font-size: 2.4rem; color: #000; letter-spacing: -0.12rem; font-weight: 600; background-color: #fff; border-radius: 3rem;}
.quick-wrap a .detail {font-size: 3.8rem; font-weight: 700; color: #fff; font-family: 'Paperozi';}

/* *************
sub
 **************/

/* 인사말 */
.greeting-wrap {display: flex; align-items: flex-start; gap: 8rem;}
.greeting-wrap .greet-left {position: sticky; top: 15rem; width: 45rem;}
.greeting-wrap .greet-left img {border-radius: 2rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .2);}

.greeting-wrap .greet-right {flex: 1;}
.greeting-wrap .greet-right .txt-title {position: relative; margin-bottom: 4rem; padding-bottom: 2.5rem; font-size: 3.8rem; line-height: 1.4; font-weight: 700; color: #111;}
.greeting-wrap .greet-right .txt-title::after {content: ""; position: absolute; left: 0; bottom: 0; width: 8rem; height: 4px; background: var(--main-color);}
.greeting-wrap .greet-right .txt-wrap {display: flex; flex-direction: column;}
.greeting-wrap .greet-right .txt-wrap p {font-size: 1.8rem; line-height: 1.6; margin-bottom: 1.2rem; letter-spacing: -0.08rem; color: #555;}
.greeting-wrap .greet-right .txt-wrap p.thank {font-weight: 700; color: #222;}
.greeting-wrap .signature {margin-top: 6rem; text-align: right; display: block; font-size: 2.4rem; letter-spacing: -0.08rem; font-weight: 700; color: #222;}

/* 단체목적 */
.s-title-wrap {display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem;}
.s-title-wrap .num {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 2rem; font-weight: 700;}
.s-title-wrap .num.icon {font-size: 2.5rem;}
.s-title-wrap h4 {font-size: 3rem; font-weight: 700; color: #111;}

.info-grid {display: flex; gap: 3rem; margin-bottom: 8rem;}
.info-card {flex: 1; padding: 5rem; border: 1px solid #e8e8e8; border-radius: 2rem; background-color: #fff; box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 5%);}
.info-card .txt-wrap p {font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.08rem; color: #555;}
.info-card .txt-wrap p+p {margin-top: 1rem;}

.info-section {padding: 5rem; border-radius: 2.5rem; background: var(--bg-color);}
.icon-list {display: flex; flex-wrap: wrap; gap: 2rem;}
.icon-list li {display: flex; gap: 2rem; width: calc(50% - 1rem); padding: 3rem; background-color: #fff; border-radius: 1.5rem; transition: var(--trans); border: 1px solid #e8e8e8;}
.icon-list .num {display: flex;align-items: center;justify-content: center;width: 4.5rem;height: 4.5rem;border-radius: 1rem;background: rgba(0, 92, 185, .1);color: var(--main-color);font-size: 2rem;font-weight: 700;}
.icon-list .txt {flex: 1;}
.icon-list .txt h5 { margin-bottom: 1rem; font-size: 2.1rem; font-weight: 700; color: #111; line-height: 1.4;}
.icon-list .txt p {font-size: 1.7rem; line-height: 1.6; letter-spacing: -0.08rem; color: #666;}

/* 오시는길 */
.location-wrap {display: flex; flex-direction: column;  gap: 5rem;}
.location-wrap .map-wrap {border-radius: 2rem; border: 1px solid #e8e8e8; overflow: hidden;}
.location-wrap .map-wrap .root_daum_roughmap {width: 100% !important;}
.location-wrap .map-wrap .cont, .location-wrap .map-wrap .map_border {display: none;}

.location-wrap .info-wrap {padding: 5rem; border-radius: 2rem; background-color: var(--bg-color);}
.location-wrap .info-list {display: flex; gap: 2rem; margin-top: 4rem;}
.location-wrap .info-list li {flex: 1; padding: 3.5rem 3rem; background: #fff; border-radius: 2rem; border-top: 0.5rem solid var(--main-color); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .05);}
.location-wrap .info-list li:nth-of-type(1) {flex: 1.2;}
.location-wrap .info-list .label {display: block; margin-bottom: 1rem; font-size: 1.7rem; font-weight: 800; color: var(--main-color); letter-spacing: .1rem; }
.location-wrap .info-list p {font-size: 2rem; line-height: 1.6; font-weight: 500; letter-spacing: -0.04rem; color: #333;}

/* 정관 */
.rules-wrap {display: flex; flex-direction: column; gap: 8rem;}
.rules-box {position: relative;}
.rules-list {padding: 5rem; background: #f2f7fb; border-radius: 3rem;}
.rules-item+.rules-item {margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #b8b8c9;}
.rules-item .item-title {display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem;}
.rules-item .item-title span {padding: 0.8rem 1rem; border-radius: 0.5rem; background: var(--main-color); color: #fff; font-size: 1.6rem; font-weight: 600;}
.rules-item .item-title h5 {font-size: 2.4rem; font-weight: 700; color: #111;}
.rules-item .item-content {padding-left: 8rem;}
.rules-item .item-content p {font-size: 1.7rem; line-height: 1.4; letter-spacing: -0.04rem; color: #555;}
.rules-item .item-content p+p {margin-top: 0.5rem;}
.rules-item .item-content ul {display: flex; flex-direction: column; gap: 1.5rem;}
.rules-item .item-content li {position: relative; font-size: 1.7rem; line-height: 1.4; letter-spacing: -0.04rem; color: #555;}
/* .rules-item .item-content li::before {content: ""; position: absolute; left: 0; top: 1rem; width: 0.5rem; height: .5rem; border-radius: 50%; background: var(--main-color);} */
.rules-box.last .rules-item .item-content {padding-left: 0;}

/* 조직도 */
.organ-wrap .tab-wrap {margin-bottom: 6rem;display: flex; justify-content: center; gap: 1.5rem;}
.organ-wrap .tab-btn {min-width: 18rem; height: 6rem; color: #666; font-size: 1.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border-radius: 5rem; border: 1px solid #ddd; background-color: #fff; cursor: pointer; transition: .3s;}
.organ-wrap .tab-btn.active {background: var(--main-color); border-color: var(--main-color); color: #fff;}
.organ-wrap .tab-content {display: none;}
.organ-wrap .tab-content.active {display: block;}
.organ-wrap .tab-content .img {width: 100%; text-align: center;}
.organ-wrap .org-sec +.org-sec {margin-top: 6rem;}

/* 행정구역 */
.det-sec + .det-sec{margin-top: 6rem;}

.detail-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem;}
.detail-list .item {padding: 4rem; border: 1px solid #e8e8e8; border-radius: 2rem; background: #fff; box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 5%);}

.detail-list.left_line {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; border: 0; background: none;}
.detail-list.left_line .item {border-left: 6px solid var(--main-color);}
.detail-list.left_line h5 {margin-bottom: 2rem; font-size: 2.4rem; font-weight: 700; color: #111;}
.detail-list.left_line p {font-size: 1.8rem; line-height: 1.6; color: #666; letter-spacing: -0.04rem;}
.detail-list.left_line strong {color: var(--main-color);}

.detail-list .det-item {padding: 4rem; border: 1px solid #e8e8e8; border-radius: 2rem; background: #fff; box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 5%);}
.detail-list .det-item h5 {margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #eee; font-size: 2.6rem; font-weight: 700; color: #111;}
.detail-list .det-item p {font-size: 1.8rem; line-height: 1.6; color: #666; letter-spacing: -0.04rem;}
.detail-list .det-item strong {color: var(--main-color);}
.detail-list .det-item ul {margin-top: 2rem;}
.detail-list .det-item li {position: relative; padding-left: 2rem; margin-bottom: 1rem; font-size: 1.7rem; color: #444;}
.detail-list .det-item li:last-child {margin-bottom: 0;}
.detail-list .det-item li::before {content: ""; position: absolute; left: 0; top: 0.6rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--main-color);}

.detail-box {padding: 5rem; border: 1px solid #e8e8e8; border-radius: 2rem; background: #fff;}
.detail-box p {position: relative; padding-left: 1.5rem; margin-bottom: 1.5rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.06rem; color: #555;}
.detail-box p:last-child {margin-bottom: 0;}
.detail-box p::before {content: ""; position: absolute; left: 0; top: 1.2rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--main-color);}
.detail-box p b {letter-spacing: -0.06rem; color: #333;}
.source-wrap {margin-top: 6rem; padding: 3rem; display: flex; align-items: center; gap: 2rem; background: var(--bg-color); border-radius: 2rem;}
.source-wrap span {display: flex; align-items: center; justify-content: center; width: 8rem; height: 4rem; border-radius: 5rem; background: var(--main-color); color: #fff; font-size: 1.6rem; font-weight: 700;}
.source-wrap p {font-size: 1.7rem; color: #666; letter-spacing: -0.04rem;}

/* 독도의 지명 */
.detail-box h5 {margin-bottom: 2rem; font-size: 2.4rem; letter-spacing: -0.06rem; font-weight: 700; color: #111;}
.detail-box h5:not(:first-child) {margin-top: 4rem;}

.dictionary-wrap {margin-top: 4rem;}
.dictionary-wrap:first-child {margin-top: 0;}
.dictionary-title {margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--main-color);}
.dictionary-title h5 {font-size: 2.5rem; font-weight: 700; color: #111;}
.dictionary-list {border: 1px solid #e8e8e8; border-radius: 2rem; overflow: hidden; background: #fff;}
.dictionary-item {display: flex; align-items: center;}
.dictionary-item+.dictionary-item {border-top: 1px solid #ececec;}
.dictionary-item span {width: 18rem; padding: 3rem; background: var(--bg-color); font-size: 2rem; font-weight: 700; color: #111;}
.dictionary-item p {padding: 2rem; font-size: 1.8rem; color: #555; line-height: 1.7; letter-spacing: -0.04rem;}

/* 주요사업 */
.flex-wrap {display: flex; gap: 6rem}
.flex-wrap .img {width: 50%; min-width: 75rem; height: 100%;}
.flex-wrap .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 2rem;}
.flex-wrap .img .slick-arrow {width: 3rem; height: 3rem; display: flex; align-items: center; border-radius: 5px; overflow: hidden; background: #013c8d50;}
.flex-wrap .img .slick-arrow::before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.flex-wrap .img .slick-arrow.slick-prev {left: -40px;} .flex-wrap .img .slick-arrow.slick-next {right: -40px;}

.flex-wrap .info {width: 50%;}
.flex-wrap .info h3 {margin-bottom: 4rem;  font-size: 3.8rem; font-weight: 700; color: #111; line-height: 1.2;}
.flex-wrap .info dt {margin-top: 2rem;padding: 0.8rem 1rem; border-radius: 0.5rem 0.5rem 0 0; background: var(--main-color); color: #fff; font-size: 1.7rem; font-weight: 600;}
.flex-wrap .info dd{padding: 3rem 2rem; margin: 0; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.04rem; color: #222; border-radius:0 0 0.5rem 0.5rem ; background: #edf2f5;}

.detail-box h4 {position: relative; margin-bottom: 3rem; padding-left: 2rem; font-size: 2.8rem; font-weight: 700; letter-spacing: -0.06rem; color: #111;}
.detail-box h4::before {content: ""; position: absolute; left: 0; top: 0; width: .6rem; height: 100%; border-radius: 5rem; background: var(--main-color);}
.detail-box ol { display: flex; flex-direction: column; gap: 1rem;}
.detail-box ol li {display: flex; align-items: center; gap: 2rem; position: relative; padding: 2rem; border: 1px solid #ececec; border-radius: 1.5rem; background: #fafafa; font-size: 1.8rem; line-height: 1.8; letter-spacing: -0.04rem; color: #555;}
.detail-box ol li .num {display: flex; align-items: center; justify-content: center;  width: 4rem; height: 4rem; border-radius: 50%; background: var(--main-color); color: #fff; font-size: 1.8rem; font-weight: 700;}

/* 회원가입절차 */
.join-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 8rem;}
.join-box {display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 2rem; box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .05);}
.join-box .title-wrap {padding: 3rem; background: var(--main-color); text-align: center;}
.join-box .title-wrap h4 {font-size: 2.6rem; font-weight: 600; color: #fff;}
.join-box .detail-wrap {padding: 4rem;}
.join-box .detail-wrap dt {margin-bottom: 1rem;font-size: 1.7rem;font-weight: 700;color: #111;}
.join-box .detail-wrap dt:nth-last-of-type(1) {margin-top: 2.5rem;}
.join-box .detail-wrap dd {font-size: 1.8rem; line-height: 1.2; color: #666; letter-spacing: -0.04rem;}
.join-box .join-step {padding: 3rem; border-top: 1px solid #ececec; background: #fafafa; text-align: center;}
.join-box .join-step span {font-size: 1.7rem; font-weight: 600; color: var(--main-color);}

.download-wrap {text-align: center;}
.download-btn {display: inline-flex;  gap: 1rem; padding: 2rem 4rem; border-radius: 5rem; background:#222; color: #fff; transition: var(--trans);}
.download-btn i {font-size: 2rem;}
.download-btn span {font-size: 1.8rem; font-weight: 600;}
.download-btn:hover {background-color: var(--sub-color); color: #fff; box-shadow: 0 1rem 2.5rem rgba(185, 0, 0, 0.25);}

/* 후원 */
.support-wrap {text-align: center;}
.support-wrap .info-card {display: inline-block; width: 50%;}
.support-wrap .support-top {margin-bottom: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 3rem;}
.support-wrap .support-top .icon {width: 8rem; height: 8rem; border-radius: 50%; background: #e6f0fb; display: flex; align-items: center; justify-content: center;}
.support-wrap .support-top .icon i{font-size: 4rem; color: var(--main-color);}
.support-wrap .support-top h3 {font-size: 3.4rem; font-weight: 700; color: #111; letter-spacing: -0.06rem;}
.support-wrap .txt {font-size: 1.8rem; line-height: 1.2; color: #666; letter-spacing: -0.04rem;}

.support-wrap .s-title-wrap {justify-content: center;}
.support-wrap .s-title-wrap .num.text {padding: 1rem 2.5rem; width: auto; height: auto; border-radius: 5rem;}