@charset "utf-8";

[class^="sec-"] {padding:0 var(--spacing-y);}
[class^="sec-"] > .inner {max-width:var(--content-width); margin:0 auto;}
[class^="sec-"] .cont-tit {margin-bottom:40px; color:var(--text-black); font-size:36px; font-weight:var(--font-semibold); letter-spacing:var(--letter-spacing-tight); line-height:1.4;}

.main-slide .swiper-navigation {display:flex; gap:10px; position:absolute; top:0; right:0;}
.main-slide .swiper-navigation button {position:static; width:40px; height:40px; margin-top:0; border:1px solid var(--border-gray-light); border-radius:50%;}
.main-slide .swiper-navigation button::after {width:24px; height:24px; background:url(../img/common/icon_slide_arrow_gray.svg) no-repeat center; background-size:24px; font-size:0;}
.main-slide .swiper-navigation .swiper-button-next::after {transform:rotate(180deg);}

/* 비주얼 */
.sec-visual {background:linear-gradient(to bottom right, #bec4c0, #b6e0c5); letter-spacing:var(--letter-spacing-tight);}
.sec-visual > .inner {position:relative; padding:90px 0 76px;}
.visual-cont .tit {position:relative; max-width:447px; margin-left:10px; font-size:44px; font-weight:var(--font-medium); line-height:1.3; word-break:keep-all; z-index:1;}
.visual-cont .tit .em {color:var(--color-trd); font-size:54px; font-weight:var(--font-extrabold);}
.visual-cont .tit .bold {font-weight:var(--font-extrabold);}

.search-cont {margin-top:35px; z-index:1;}
.search-cont .search-box {position:relative; top:0; max-width:447px; background-color:var(--bg-white); border:3px solid var(--color-trd); border-radius:var(--radius-md); z-index:2;}
.search-cont .search-ipt .ipt {height:54px; padding:0 70px 0 23px; border:0 none; border-radius:16px; font-size:22px; font-weight:var(--font-semibold);}
.search-cont .search-ipt {z-index:5;}
.search-cont .search-ipt .ipt:focus-visible {outline:0 none;}
.search-cont .search-ipt .btn-sch {position:absolute; top:50%; right:23px; width:28px; height:28px; margin-top:-14px; background:url(../img/main/icon_form_sch.svg) no-repeat center;}

.searchword-area,
.autocomplete-area {display:none;position:absolute; top:calc(100% - 13px); left:-3px; right:-3px; min-height:211px; padding:13px 23px 32px; background-color:var(--bg-white); border:3px solid var(--color-trd); border-top:0 none; border-radius:0 0 var(--radius-md) var(--radius-md); color:var(--text-gr500); line-height:1.3; letter-spacing:var(--letter-spacing-tight);}
.searchword-area .word,
.autocomplete-area .keyword {position:relative; margin-bottom:10px;}
.searchword-area .word > a,
.autocomplete-area .keyword > a {display:block;}
.searchword-area .word > a:hover,
.autocomplete-area .keyword > a:hover,
.autocomplete-area .keyword > a.ui-state-active {background-color:var(--bg-light2); color:var(--text-gr900);}
.searchword-area .bot,
.autocomplete-area .bot {position:absolute; bottom:-3px; left:-1px; right:-1px; height:35px; line-height:35px; background-color:var(--color-trd); border-radius:0 0 var(--radius-md) var(--radius-md); text-align:center;}
.searchword-area .bot button,
.autocomplete-area .bot button {width:100%; height:100%; color:var(--text-white); font-size:16px;}
.searchword-area {z-index:2;}
.searchword-area .inner {display:flex; align-items:stretch; gap:10px; border-top:1px solid #cccbcb; padding-top:14px;}
.searchword-area .inner > div {flex:1 1;}
.searchword-area .tit {margin-bottom:10px; color:var(--text-gr900); font-weight:var(--font-bold);}
.searchword-area .word .btn-del span {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; border:0; clip:rect(1px, 1px, 1px, 1px); -webkit-clip-path:inset(50%); clip-path:inset(50%);}
.searchword-area .keyword-list-popular .tit {color:var(--color-trd);}
.searchword-area .keyword-list-recent .word > a {padding-right:30px;}
/*.searchword-area .word:hover {background-color:var(--bg-light2);}*/
.searchword-area .word:has(:hover),
.searchword-area .word:has(:focus) {background-color:var(--bg-light2);}
.searchword-area .word .btn-del {position:absolute; top:0; right:0; width:24px; height:24px;}
.searchword-area .word > a:hover ~ .btn-del,
.searchword-area .word > a:focus ~ .btn-del,
.searchword-area .word > .btn-del:hover,
.searchword-area .word > .btn-del:focus {background-image:url(../img/main/icon_searchword_del.svg); background-repeat:no-repeat; background-position:center; background-size:10px; z-index:1;}
.autocomplete-area .keyword-list {border-top:1px solid #cccbcb; padding-top:14px;}
.autocomplete-area .keyword a > span[style*="color"] {color:var(--color-pry) !important;}
.searchword-area.active {display: block;}

.search-cont .access-info {display:inline-flex; justify-content:flex-start; align-items:stretch; overflow:hidden; min-width:447px; margin-top:30px; padding:24px 0; background-color:var(--bg-white); border-radius:var(--radius-md); line-height:1.2;}
.access-info > li {display:inline-flex; flex-direction:column-reverse; position:relative; flex:1 1 auto; padding:0 20px; text-align:center;}
.access-info > li:not(:last-child):after {content:''; overflow:hidden; position:absolute; top:3px; right:-1px; bottom:3px; width:1px; background-color:var(--color-trd); z-index:1;}
.access-info > li > .item {display:block; font-size:18px; font-weight:var(--font-medium);}
.access-info > li > .val {display:block; margin-bottom:8px; color:var(--color-trd); font-size:24px; font-weight:var(--font-bold);}

.sec-visual .img {position:absolute; top:0; bottom:0; left:0; right:0; margin: 0 auto; z-index:0;}
.sec-visual .img img {position:relative; left:50%; max-height:100%; transform: translateX(-50%); object-fit:cover;}

/* 공익법인 공시정보 및 모집활동 */
.sec-quick > .inner {padding:25px 0;}
.sec-quick .quick-list {display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
.sec-quick .quick-list > li {flex:1 1; max-width:150px; margin:0 auto; text-align:center;}
.sec-quick .quick-list > li a {display:block; padding:26px 16px;}
.sec-quick .quick-list > li a .icon {display:block; width:74px; margin:0 auto 15px;}
.sec-quick .quick-list > li a .icon img {max-width:100%;}
.sec-quick .quick-list > li a .txt {font-size:19px; font-weight:var(--font-bold); white-space:nowrap;}

/* 일반단체 정보, 기부포털 이용안내 */
.sec-guide {background-color:var(--bg-light3);}
.sec-guide > .inner {display:flex; gap:20px; padding:90px 0 110px;}
.sec-guide .org-cont {flex-shrink:0; width:284px;}
.org-cont .org-list {display:flex; flex-wrap:wrap; gap:20px; letter-spacing:var(--letter-spacing-tight);}
.org-cont .org-list > li {width:100%;}
.org-cont .org-list > li a {display:flex; align-items:center; justify-content:space-between; gap:8px; background-color:var(--bg-white); padding:20px 30px; border-radius:var(--radius-lg); font-size:24px; font-weight:var(--font-bold); line-height:1; box-shadow:0 6px 12.5px 0 rgba(0, 0, 0, 0.25);}
.org-cont .org-list > li a::after {content:''; display:block; flex-shrink:0; width:30px; height:30px; background:var(--color-pry) url(../img/main/icon_guide_arrow.svg) no-repeat center; background-size:30px; border-radius:50%;}

.sec-guide .guide-cont {display:flex; flex-direction:column;}
.guide-cont .guide-list {display:flex; align-items:stretch; justify-content:flex-start; gap:20px; height:100%; letter-spacing:var(--letter-spacing-tight);}
.guide-cont .guide-list > li {display:flex; flex-direction:column; justify-content:space-between; flex:1 1; padding:30px 24px; background-color:var(--bg-white); border-radius:var(--radius-lg); box-shadow:0 6px 12.5px 0 rgba(0, 0, 0, 0.25);}
.guide-cont .guide-list > li .tit {font-size:24px; font-weight:var(--font-bold); line-height:1.4; word-break:keep-all;}
.guide-cont .guide-list > li .btn-area {display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:20px;}
.guide-cont .guide-list > li .btn-area .icon {margin-left:15px;}
.guide-cont .guide-list > li .btn-area .icon img {max-width:100%;}
.guide-cont .guide-list > li .btn-area a {display:inline-block; min-width:95px; padding:9px 20px; font-size:20px; font-weight:var(--font-bold); background-color:var(--color-pry); border-radius:var(--radius-lg); color:var(--text-white); text-align:center; line-height:1.2;}

/* 진행중인 기부 모집 활동 */
.sec-recruit {background-color:var(--bg-light4);}
.sec-recruit > .inner {display:flex; gap:30px; padding:106px 0;}
.sec-recruit .left-cont {flex-shrink:0; width:284px;}
.sec-recruit .cont-tit .tit {display:inline-block;}
.sec-recruit .cont-tit .btn-more {position:relative; display:inline-block; width:38px; height:38px; margin-left:10px; background-color:#7a7a7a; border-radius:50%; vertical-align:middle;}
.sec-recruit .cont-tit .btn-more:after,
.sec-recruit .cont-tit .btn-more:before {content:''; overflow:hidden; position:absolute; top:50%; left:50%; background-color:var(--bg-white); border-radius:2px; transform:translate(-50%,-50%); z-index:1;}
.sec-recruit .cont-tit .btn-more:before {width:18px; height:3px;}
.sec-recruit .cont-tit .btn-more:after {width:3px; height:18px;}

.recruit-cont {width:100%;}
.recruit-cont .recruit-list {display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; width:auto; margin:0 -10px -40px; letter-spacing:var(--letter-spacing-tight); line-height:1.2;}
.recruit-list .recruit-item {width:calc(50% - 20px); height:auto; margin:0 10px 40px;}
.recruit-list .recruit-item a {display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:35px 30px; background-color:var(--bg-white); border-radius:var(--radius-lg);}
.recruit-list .recruit-item .org {display:inline-block; max-width:100%; padding:6px 10px; background-color:var(--bg-light5); border-radius:var(--radius-sm); color:var(--color-trd); font-size:20px; font-weight:var(--font-bold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.recruit-list .recruit-item .img {display:block; position:relative; width:100%; padding-top:23%; overflow:hidden;}
.recruit-list .recruit-item .img img {position:absolute; left:50%; top:50%; max-width:100%; max-height:100%; transform:translate(-50%,-50%); object-fit:cover;}
.recruit-list .recruit-item .tit {max-width:100%; font-size:22px; color:var(--text-black); font-weight:var(--font-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.recruit-list .recruit-item .date {font-size:18px; color:var(--text-gr300); font-weight:var(--font-medium);}
.recruit-list .recruit-item .amount {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; width:100%;}
.recruit-list .recruit-item .amount .item {font-size:18px; color:var(--text-black); font-weight:var(--font-medium);}
.recruit-list .recruit-item .amount .val {flex:1 1 auto; font-size:22px; color:var(--color-orange); font-weight:var(--font-semibold); text-align:right;}

.recruit-cont .btn-area {margin-top:40px; text-align:center;}
.recruit-cont .btn-more {display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 21px; background-color:var(--bg-white); border:1px solid #cdd1d5; border-radius:24px; color:#5b5b5b; font-size:20px; font-weight:var(--font-bold);}
.recruit-cont .btn-more::after {content:''; display:inline-block; width:24px; height:24px; margin-left:4px; background:url(../img/main/icon_recruit_more.svg) no-repeat center; background-size:24px;}

/* 기부통계 */
.sec-statistic > .inner {margin-top:76px; margin-bottom:76px;}
.statistic-cont .statistic-list {display:flex; align-items:stretch; justify-content:flex-start; width:auto; margin:0 -10px; letter-spacing:var(--letter-spacing-tight); line-height:1.2;}
.statistic-list .statistic-item {flex:1 1; height:auto; margin:0 10px;}
.statistic-list .statistic-item a {display:flex; flex-direction:column-reverse; align-items:center; padding:30px 15px; border:1px solid var(--border-muted); border-radius:var(--radius-lg);}
.statistic-list .statistic-item .img {max-width:100%; margin-bottom:30px;}
.statistic-list .statistic-item .img img {width:100%; height:auto; object-fit:cover;}
.statistic-list .statistic-item .tit {font-size:22px; font-weight:var(--font-semibold);}

/* 배너 */
.sec-banner > .inner {margin-top:76px; margin-bottom:90px;}
.sec-banner .banner-slide {overflow:hidden; text-align:center; line-height:1;}
.sec-banner .banner-slide .swiper-controls {position:relative; min-width:73px; margin-top:30px; box-sizing:content-box;}
.banner-list .banner-item .item {display:block; overflow:hidden; border-radius:var(--radius-lg);}
.banner-list .banner-item .item:focus-visible {outline-offset:-2px;}
.banner-list .banner-item .img {display:block; width:100%;}
.banner-list .banner-item .img img {width:100%;}
.sec-banner .banner-list .banner-item .img {display: block;overflow: hidden;position: relative;padding-top: 56.25%;}
.sec-banner .banner-list .banner-item .img img {position: absolute;left: 50%;top: 0;width: 100%;height: auto;min-height: 100%;transform: translate(-50%, 0);object-fit: cover;}

@media all and (max-width: 1152px) {
    /* 일반단체 정보, 기부포털 이용안내 */
    .guide-cont .guide-list > li .btn-area .icon {margin-left:0;}
}

@media all and (max-width: 1023px) {
    [class^="sec-"] .cont-tit {margin-bottom:20px; font-size:22px; font-weight:var(--font-bold);}
    .sec-recruit .cont-tit,
    .sec-statistic .cont-tit {padding-right:100px; line-height:40px;}

    /* 비주얼 */
    .sec-visual {background:none;}
    .search-cont .access-info {display:none;}
    .sec-visual > .inner {position:relative; padding:0;}
    .visual-cont {position:relative; margin:0 var(--spacing-y-neg); padding:70px var(--spacing-y); background: linear-gradient(to bottom right, #bec4c0, #b6e0c5);}
    .visual-cont .tit {max-width:50%;}
    
    .search-cont {margin:30px 0;}
    .search-cont .search-box {max-width:none;}
    .search-cont .search-ipt .ipt {height:44px; padding:0 70px 0 26px; border-width:2px; font-size:18px; font-weight:var(--font-medium);}
    .search-cont .search-ipt .ipt::placeholder {color:#3C3E3E;}
    .search-cont .search-ipt .ipt:focus-visible {outline-offset:-2px;}

    /* 공익법인 공시정보 및 모집활동 */
    .sec-quick > .inner {padding:0;}
    .sec-quick .quick-list {margin:0 var(--spacing-y-neg);}
    .sec-quick .quick-list > li a {margin:1px; padding:0 16px 10px;}
    .sec-quick .quick-list > li a .icon {margin:0 auto 8px}
    .sec-quick .quick-list > li a .txt {font-size:18px; font-weight:var(--font-semibold);}
    
    /* 일반단체 정보, 기부포털 이용안내 */
    .sec-guide > .inner {display:block; padding:40px 0;}
    .sec-guide .org-cont {width:auto;}
    .org-cont .org-list {margin-top:30px;}
    .org-cont .org-list > li {flex:1 1;}
    .org-cont .org-list > li a {border-radius:var(--radius-md); font-size:19px; font-weight:var(--font-semibold);}
    .sec-guide .guide-cont {display:block; margin-top:40px;}
    .guide-cont .guide-list {margin-top:30px;}
    .guide-cont .guide-list > li {border-radius:var(--radius-md);}
    .guide-cont .guide-list > li .tit {font-size:19px; font-weight:var(--font-medium);}
    .guide-cont .guide-list > li .btn-area a {font-size:18px;}

    /* 진행중인 기부 모집 활동 */
    .sec-recruit {background-color:var(--bg-white);}
    .sec-recruit > .inner {display:block; position:relative; margin:40px 0; padding:0;}
    .sec-recruit .inner .left-cont {width:auto; margin-bottom:20px;}
    .sec-recruit .cont-tit {display:flex; gap:10px;}
    .sec-recruit .cont-tit .btn-more {flex-shrink:0; width:40px; height:40px; margin-left:auto; background-color:transparent; border:1px solid var(--border-gray-light);}
    .sec-recruit .cont-tit .btn-more:after,
    .sec-recruit .cont-tit .btn-more:before {background-color:#33363d;}
    .sec-recruit .cont-tit .btn-more:before {height:2px;}
    .sec-recruit .cont-tit .btn-more:after {width:2px;}

    .recruit-cont .recruit-list {flex-wrap:nowrap; margin:0;}
    .recruit-list .recruit-item {margin:0;}
    .recruit-list .recruit-item a {padding:20px; border:1px solid var(--border-muted); border-radius:var(--radius-md);}
    .recruit-list .recruit-item .org {margin:0 auto; font-size:16px; font-weight:var(--font-semibold);}
    .recruit-list .recruit-item .tit {font-size:20px;}
    .recruit-list .recruit-item .amount .val {font-weight:var(--font-bold);}

    /* 기부통계 */
    .sec-statistic > .inner {position:relative; margin:40px 0; padding:0;}
    .statistic-cont .statistic-list {margin:0;}
    .statistic-list .statistic-item {flex:none; margin:0;}
    .statistic-list .statistic-item a {padding:20px 20px 27px;}
    .statistic-list .statistic-item .img {margin-bottom:10px;}
    .statistic-list .statistic-item .tit {font-size:18px;}

    /* 배너 */
    .sec-banner > .inner {margin:40px 0;}
    .sec-banner .banner-slide .swiper-controls {margin-top:24px;}
}

@media all and (max-width: 767px) {
    /* 비주얼 */
    .visual-cont {padding:18vw var(--spacing-y);}
    .visual-cont .tit {margin-left:4px; font-size:5.5vw;}
    .visual-cont .tit .em {font-size:6.4vw;}
    .sec-visual .img img {max-width:100%;}

    /* 일반단체 정보, 기부포털 이용안내 */
    .org-cont .org-list > li {flex:1 1 auto;}
    .guide-cont .guide-list {flex-direction:column; height:auto; gap:24px;}

    /* 배너 */
    .sec-banner .banner-slide {margin:0 var(--spacing-y-neg);}
    .banner-list .banner-item .item {border-radius:0;}
}