/* css 초기화 시작 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    vertical-align: baseline;
    word-break: keep-all;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
a:hover {
    text-decoration: none;
}
:focus {outline: none;}

.at-body .swiper-button-next, .at-body .swiper-container-rtl .at-body .swiper-button-prev, 
.at-body .swiper-button-prev, .at-body .swiper-container-rtl .at-body .swiper-button-next {background-image: none; width: auto; position: static; top:auto; left: auto; height:auto; margin: 0;}
 
b, strong {font-weight: 600;}
/* css 초기화 끝 */


html {
    --point : #7fbf40;
    --pointFilter : invert(66%) sepia(11%) saturate(2038%) hue-rotate(48deg) brightness(98%) contrast(99%);
    --border1:#e1e1e1;
    --colorFilter : invert(17%) sepia(3%) saturate(207%) hue-rotate(144deg) brightness(96%) contrast(90%) grayscale(1);
}

/*----- 공통 css -----*/
.inner{ margin: 0 auto; max-width: 1280px; width: 100%;}
.color1 {color: #45b47f;}
.color2 {color: #8db660;}
.color3 {color: #20715d;}
.color4 {color: #7fbf40;}
img {max-width: 100%;}
.flx1 {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow: column wrap;}
.font-yss {font-family: 'YiSunShinDotumM' !important;}
.font-nexon {font-family: 'NEXONFootballGothicBA1';}
.show-800 {display: none;}
.hide-800 {}

.at-body {margin-top: 100px;}

.small {font-size: 90%;}

/*----- 헤더 -----*/
header {position: fixed; top:0; left: 0; width: 100%; background: #fff; z-index: 997; transition: all 0.2s;}
header.f-nav {box-shadow: 0 6px 8px rgba(00, 00, 00, .05);}
header .hd-inner {padding: 0 3%; height: 100px; align-items: center; justify-content: space-between;}
header .hd-logo {width: min(400px,25%);} 
header .gnb  {width: min(800px,50%);}
header .gnb .main-menu {justify-content: space-between;}
header .gnb .main-menu > li {padding: 0 1%;}
header .gnb .main-menu > li > a {font-size: 20px; position: relative; padding:39px 0 50px; font-weight: 600;}
header .gnb .main-menu > li > a::before {content:""; position: absolute; bottom:11px; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background: var(--point); transition: all 0.3s;}
header .gnb .main-menu li:hover a::before {width: 100%;}

header .link {width: min(400px,25%); justify-content: flex-end; align-items: center;}
header .link a {display: flex; align-items: center; font-size: 16px; }
header .link a span {font-size: 14px;}
header .link .hd-donation {font-size: 18px; font-weight: 600; padding: 12px 25px; border-radius: 30px; background: var(--point); color: #fff; transition: all 0.3s;}
header .link .hd-donation:hover {background: #58a70a;}
header .link .hd-login {margin: 0 7%; position: relative;}
header .link .admin-link {margin-right: 10px;}
header .link .mobile-btn {cursor: pointer; display: flex; align-items: center;  transform: scale(-1);}
header .link img {width: 30px; filter: var(--colorFilter); transition: all 0.2s;}
header .link .logout img {width: 22px;}
header .link .mobile-btn:hover img, header .link .hd-login a:hover img {filter: var(--pointFilter);}

header .menu_bg {position: absolute; top:100%; left:0; width: 100%; background: #fff; z-index: 98; height: 0; transition: height 0.3s; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.05);}
header .menu_bg .left {width: 16%; height: 100%; background: var(--point);}
/* header .menu_bg img {position: absolute; top:50%; right:5%; transform: translateY(-50%);} */

header .sub-menu-wrap {position: absolute; left: 0; top:100%; width: 100%; z-index: 99; visibility: hidden; opacity: 0;  transition: opacity 0.3s;} 
header .sub-menu-wrap.on {visibility: visible; opacity: 1;} 
header .sub-menu-title {width: 16%; color: #fff; align-content: flex-end; padding: 40px 55px 40px 0;} 
header .sub-menu-title h2 {font-size: 45px; }
header .sub-menu-title p {font-size: 19px; margin-top: 30px; line-height: 1.6;}

header .sub-menu {display: grid; grid-template-columns: repeat(4, 1fr); gap:30px 50px; align-items: start; padding: 30px 0 50px 60px; width: min(1465px,80%); } 
header .sub-menu a {font-size: 18px; font-weight: 600; transition: all 0.1s;}
header .sub-menu a span {width: calc(100% - 30px); position: relative;} 
header .sub-menu a img {width: 18px; filter: var(--pointFilter); }
header .sub-menu a span::before {content:""; position: absolute; right: 0; top: 50%; width: 1px; height: 80%; transform: translateY(-50%); background: var(--border1);}
header .sub-menu > li > a {display: flex; flex-flow: row wrap; justify-content: space-between; padding: 14px 20px; border: 1px solid var(--border1); border-radius: 8px;}
header .sub-menu ul {padding:20px 0 0 20px;}
header .sub-menu ul li {padding-left: 20px; position: relative; margin-bottom: 10px; }
header .sub-menu ul li a {color: #5b5b5b; font-weight: 400;}
header .sub-menu ul li::before {content:""; position: absolute; top:8px; left:0; width: 5px; height: 5px; border-radius: 50%; background: #d0d0d0;}

header .sub-menu li:hover > a, header .sub-menu ul li:hover > a {color: #5c9127; border-color: #5c9127;}
header .sub-menu ul li:hover::before {background: #5c9127;}


/*------ mobile 메뉴 -----*/
.mobile-menu-wrap {position: fixed; top:0; right:calc(-100% - 80px); width: min(400px,calc(100% - 80px)); height: 100vh; background: #fff; z-index: 999; transition: all 0.3s;}
.mobile-close-btn {position: absolute; top:20px; left:0; transform: translateX(-100%); width: 60px; height: 60px; padding: 8px; background: var(--point); border-radius: 10px 0 0 10px; cursor: pointer;}
.mobile-close-btn img {filter:invert(100%) sepia(1%) saturate(623%) hue-rotate(275deg) brightness(119%) contrast(100%);     transform: rotate(45deg) translate(2px, -2px);}

.mobile-menu-wrap button img {transform: rotate(90deg);}
.mobile-menu li div {position: relative;}
.mobile-menu li a {font-size: 18px; padding: 17px 30px; display: block; border-bottom: 1px solid #e1e1e1; font-weight: 500;}
.mobile-menu li button {position: absolute; top:50%; right:30px; transform: translateY(-50%); z-index: 2; background: none; width: 45px; height: 45px; border: 0; padding: 15px;}
.mobile-menu li.on .mobile-main-button {transform: translateY(-50%) rotate(180deg);}
.mobile-menu .sub-menu {display: none;}
.mobile-menu .sub-menu div button span {width: 13px; height: 1px; background: #545454; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.mobile-menu .sub-menu div button span:last-child {transform: translate(-50%,-50%) rotate(-90deg); transition: transform 0.2s;}
.mobile-menu .sub-menu div button.on span:last-child {transform: translate(-50%,-50%) ;}
.mobile-menu .sub-menu li a {font-size: 17px; color: #787878; background: #f4f4f4;} 
.mobile-menu .sub-menu ul {padding: 5px 0 5px 40px; border-bottom: 1px solid #e1e1e1; display: none; background: #f4f4f4;}
.mobile-menu .sub-menu ul li a {padding: 5px 0 5px 10px; font-size: 15px; border-bottom: 0; position: relative;}
.mobile-menu .sub-menu ul li a::before {content: ""; position: absolute; top:13px; left:0; width: 4px; height: 4px; border-radius: 50%; background: #787878;} 

.mobile-bg {position: fixed; top:0; left:0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 997; visibility: hidden; opacity: 0; transition: all 0.3s;}

html.mobile-open .mobile-menu-wrap {right: 0;}
html.mobile-open .mobile-bg {visibility: visible; opacity: 1;}

/* 푸터 */
footer {background: #20242b;}
footer .ft-top {padding: 25px 0; border-bottom: 1px solid rgb(129 127 130 / 20%); justify-content: space-between;}
footer .ft-top ul:first-child li {margin-right: 15px;}
footer .ft-top li a {color: #888; font-size: 18px;}
footer .ft-top li:first-child a {color: var(--point);}

/* 250311 추가 */
footer .ft-bottom .visit { width: 100%; padding: 10px 0px; background: #14161b; color: #fff; justify-content: center; margin-bottom: 15px;;}
footer .ft-bottom .visit h5 {font-size: 18px;}

footer .ft-bottom {padding:25px 0 40px;}
footer .ft-bottom .ft-logo {width: 25%;}
footer .ft-bottom p {width: 60%; padding: 0 3%; color: #fff; font-size: 18px; line-height: 1.8;} 
footer .ft-bottom p a {color: #fff; margin-right: 20px;}
footer .ft-bottom p span {color: #888;}
footer .ft-bottom .right {width: 15%; max-width: 180px;}

/*----- 메인 비주얼  -----*/
.main-top {position: relative;}
/* .main-visual {height: 595px; background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ivfhny_i2.wct') #fef0c1 no-repeat center bottom / cover ; position: relative;}
.main-visual .inner {padding-top: 85px; position: relative;}
.main-visual .img {position: absolute; bottom:0; left:40%; transform: translateX(-50%); height: 60%;}
.main-visual .img img {height: 100%;}
.main-visual h4 {font-size: 30px; margin-bottom: 20px;}
.main-visual h2 {font-size: 58px; font-weight: 700;} */
.main-visual {height: 320px; background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ivfhny_i2.wct') #fef0c1 no-repeat center bottom / cover ; position: relative;}
.main-visual .inner {padding-top: 65px; position: relative;}
.main-visual .img {position: absolute; bottom:0; left:45%; transform: translateX(-50%); height: 75%;}
.main-visual .img img {height: 100%;}
.main-visual h4 {font-size: 22px; margin-bottom: 20px;}
.main-visual h2 {font-size: 54px; font-weight: 700;}

.popup-inner {position: absolute; top:60px; left: 50%; transform: translateX(-50%); justify-content: flex-end;}
/* .popup-wrap {position: absolute; width: 450px; height: 620px; border-radius: 25px; box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);} */
.popup-wrap {position: absolute; width: 350px; height: 430px; border-radius: 25px; box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);}
.popup-wrap .popupslide {width: 100%; height: 100%;border-radius: 25px;}
.popup-wrap .popupslide img {object-fit: cover;}
.popup-wrap .btn-wrap {position: absolute; bottom:0; left: 50%; transform: translate(-50%,50%); background: #fff; padding: 10px 20px; border-radius: 20px; z-index: 4; width: max-content; align-items: center; box-shadow: 0 3px 7px 0 rgba(0,0,0,0.075);} 
.popup-wrap .btn-wrap > div {display: flex; align-items: center; margin:0 5px;}
.popup-wrap .btn-wrap .popup {width: 16px; }
.popup-wrap .btn-wrap .popup-prev img {transform: scaleX(-1);}
.popup-wrap .btn-wrap .swiper-pagination-popup {width: auto; color: #999; font-size: 15px; font-weight: 600;}
.popup-wrap .btn-wrap .swiper-pagination-popup span { margin: 0 3px;}
.popup-wrap .btn-wrap .swiper-pagination-popup span:first-child {color: #333;}
.popup-wrap .btn-wrap .pause img {width: 22px;}

/*-----  6개 호버 메뉴 -----*/
.main-quick {margin: 30px 0 40px;}
.main-quick ul {display: grid; grid-template-columns: repeat(6, max(142px));}
.main-quick li a {text-align: center;}
.main-quick li .img {width: 65px; height: 65px; border-radius: 50%; align-items: center; justify-content: center; margin: 0 auto 5px;  position: relative; box-shadow: 0 0 0 0 #fff; transition: all 0.4s;}
.main-quick li img {position: relative;}
.main-quick li .img::before {content:""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top:0; left:0; padding:0;background: #fff; transition: transform 0.4s, opacity 0.34s;}
.main-quick li p { font-size: 17px; line-height: 1.4; height: calc(100% - 62px); display: flex; align-items: center; justify-content: center;}


@media (min-width:801px) {
    .main-quick li:hover .img {box-shadow: 0 0 0 10px #f3f3f3; background: #e7e7e7;}
    .main-quick li:hover .img::before { transform: scale(1.5); opacity: 0; background: #f3f3f3;}
}

/*----- 복지관 소식들 -----*/
.main-news .title {text-align: center; font-size: 32px; font-weight: 600; margin-bottom: 20px; display: block;color: #7fbf40;}
.main-news .inner2 {max-width: 100%; padding-left: calc(50% - 640px); position: relative;}
.main-news .inner2::before {content:""; position: absolute; top:53%; left: 0; width: 100%; transform: translateY(-50%); height: 95px; background: var(--point);}
.main-news .noticeSlide {margin-left: 130px;padding: 20px 0 20px 20px;}
.main-news .noticeSlide .swiper-slide {position: relative; margin-top: 27px;}
.main-news .noticeSlide .swiper-slide:nth-of-type(2n) {margin-bottom: 27px; margin-top: 0;}
.main-news .noticeSlide .swiper-slide a {height: 360px; display: flex; flex-flow: column wrap; border-radius: 20px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.075); overflow: hidden; position: relative; transition: border 0.1s;}
.main-news .noticeSlide .swiper-slide a::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; border-radius: 20px; z-index: 9; transition: border 0.2s;}
.main-news .noticeSlide .swiper-slide:hover a::before {border-color: var(--point);}
.main-news .noticeSlide .news1_img {display: flex; height: 63%; position: relative; z-index: 2; background: #333;}
.main-news .noticeSlide .news1_img img {width: 100%; object-fit: cover;}
.main-news .noticeSlide .news-txt1 {background: #fff; height:37%; padding: 15px 25px; justify-content: space-between; position: relative; z-index: 2;}
.main-news .noticeSlide .news-txt1 h4 {font-size: 18px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.main-news .noticeSlide .news-txt1 p {font-size: 14px; color: #aaa; text-align: right;}
.main-news .noticeSlideBox {position: relative;}
.main-news .noticeSlideBox .notice {position: absolute; top:53%; left: 60px; right:auto; transform: translateY(-50%); display: flex;}
.main-news .noticeSlideBox .notice-prev {left: 0; transform: scale(-1) translateY(50%);}
.main-news .noticeSlideBox .notice img {height: 38px; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(239deg) brightness(102%) contrast(104%);}

/*---- 공지사항과 채용공고 -----*/
.main-board {margin: 70px 0;}
.main-board .inner {justify-content: space-between;}
.main-board .left {width: 72%; padding-right: 5%; margin-top: 20px;}
.main-board .left .tab {width: 100%; justify-content: space-between; margin-bottom: 30px;}
.main-board .left .tab li:not(.board-more) {width: min(180px,calc(24% - 10px));}
.main-board .left .tab li a {font-size: 20px; font-weight: 600; color: #565656; display: block; text-align: center; border-radius: 30px; line-height: 40px;}
.main-board .left .tab li.on a {background: var(--point); color: #fff;}
.main-board .left .tab li.board-more a {width: 40px; height: 40px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; background: #d0d0d0; border-radius: 50%; transition: all 0.2s;}
.main-board .left .tab li.board-more a img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(22deg) brightness(107%) contrast(102%); width: 25px;}
.main-board .left .tab li.board-more a:hover {background: #bbb;}

.main-board .left .board-box {display: none; grid-template-columns: repeat(3, 1fr); column-gap: 30px;}
.main-board .left .board-box.on {display: grid;}
.main-board .left .board-box a {height: 100%; justify-content: space-between; padding: 30px 20px 20px; border-radius: 10px; border: 1px solid #e1e1e1;}
.main-board .left .board-box h5 {font-size: 16px; font-weight: 700; margin-bottom: 20px;}
.main-board .left .board-box h4 {font-size: 18px; font-weight: 500; line-height: 1.4; display: inline; background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#313742, #313742);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;}
.main-board .left .board-box p {font-size: 14px; color: #aaa; margin-top: 30px; text-align: right;}
.main-board .left .board-box a:hover h4 {background-size: 0 1px, 100% 1px;}

.main-board .right {width: min(350px,28%);}
.main-board .right a {color: #fff; padding: 30px; border-radius: 20px; overflow: hidden;}
.main-board .right h3 {font-size: 27px; padding-bottom: 40px;}
.main-board .right p {font-size: 16px; display: flex; align-items: center;}
.main-board .right p img {width: 18px; transform: scale(-1); filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(22deg) brightness(107%) contrast(102%); margin-left: 5px;}
.main-board .right .box1 {background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ot1.cat) #119e51 no-repeat bottom right / contain ;}
.main-board .right .box2 {background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ot2.cat) #e6b817 no-repeat bottom right / contain ; margin-top: 20px;}
/* .main-board .right .box3 {background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ot3.cat) no-repeat bottom right / cover ; height: 100%;} */
.main-board .right .box3 {background:  linear-gradient(50deg, rgba(17,158,81,1) 20%, rgba(0,126,104,1) 100%) ; height: 100%; position: relative;}
.main-board .right .box3 .img {position: absolute; bottom:0; right:0;     align-items: flex-end;}

/*---- 자원봉사,후원 링크 -----*/
.page-link {padding-bottom: 70px;}
.page-link .inner {justify-content: space-between;}
.page-link .title {text-align: center; font-size: 32px; font-weight: 600; margin-bottom: 20px; width: 100%;}
.page-link .box {width: 23%; position: relative;}
.page-link .box::before {content:""; position: absolute; bottom:0; left: 0; width: 100%; height: 80%; transition: all 0.2s; border-radius: 20px;}
.page-link .img {height: min(337px,25vw); clip-path: inset(10% 0 0 0 round 20px); overflow: hidden; transition: all 0.2s;}
.page-link .img img {width: 100%; height: 100%; object-fit: cover; transition: all 0.2s;}
.page-link .box h4 {position: absolute; bottom:35px; text-align: center; width: 100%; font-size: 24px; font-weight: 700; color: #fff; transition: all .3s;}
.page-link .box .more {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 50%; background: var(--point); align-items: center; justify-content: center; opacity: 0; transition: all .3s;}
.page-link .box .more img {width: 21px; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(22deg) brightness(107%) contrast(102%);}
.page-link .box .more p {font-size: 16px; font-size: 700; color: #fff; margin-top: 5px;}

@media (min-width:801px) {
    .page-link .box:hover::before {height: 100%; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); }
    .page-link .box:hover .img {clip-path: inset(0 0 0 0 round 20px);}
    .page-link .box:hover .img img { transform: scale(1.1);}
    .page-link .box:hover .more {opacity: 1; bottom:-45px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);} 
    .page-link .box:hover h4 {bottom:60px}
}

/*---- 후원계좌, sns링크 -----*/
.bottom-banner {padding: 40px 0;}
.bottom-banner .inner {justify-content: space-between; align-items: center;}
.bottom-banner .left {width: min(795px,62%); padding: 30px 50px; background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ot4.cat') #ffe8d8 no-repeat right bottom / contain; border-radius: 20px; align-items: center;}
.bottom-banner .left h3 {color: #fa7555; font-size: 32px; font-weight: 600; padding-right:7%;}
.bottom-banner .left li {font-size: 19px; font-weight: 500; color: #675d5a; align-items: center; line-height: 1.8;}
.bottom-banner .left li span {margin-right: 15px; width: 80px; position: relative;}
.bottom-banner .left li span::before {content:""; position: absolute; top:50%; transform: translateY(-50%); right:0; width: 1px; height: 40%; background: #fcae96;}
.bottom-banner .right {width: 33%;}   
.bottom-banner .right li:first-child {margin-right: 30px;}
.bottom-banner .right li a {align-items: center; font-size: 18px; font-weight: 700;}
.bottom-banner .right li p {margin-left: 10px;}


/* 메인 푸터위 무한 스크롤 영역 */
.agency_lay{ width: 100%; height: 100px; padding: 25px 0px 35px 0px; background: #f9f9f9;}
.agency_lay_max{ max-width: 100%; width: 100%; margin: 0 auto;}
.simply-scroll .simply-scroll-clip {width: 100% !important;}


/* 반응형 */
@media (max-width:1700px) {
    header .gnb .main-menu > li > a {font-size: 19px;}
    header .link .hd-login {margin: 0 4%;}
    header .link .hd-donation {padding: 12px 20px; font-size: 17px;}

    header .sub-menu {width: 80%;}
    header .sub-menu-title {padding: 40px; padding-left: 0;}
}
@media (max-width:1500px) {
    header .gnb .main-menu > li > a {font-size: 18px;}
    header .link .hd-donation {padding: 10px 18px;}

    header .sub-menu {display: grid; grid-template-columns: repeat(3, 1fr); gap:20px 40px; align-items: start; padding: 20px 40px 40px; width: 82%; } 
    header .menu_bg .left {width: 18%;}
    header .sub-menu-title {padding: 30px; padding-left: 0; width: 18%;}
    header .sub-menu-title h2 {font-size: 40px; }
    header .sub-menu-title p {font-size: 18px; margin-top: 25px;}
    
}
@media (max-width:1280px) {
    .at-body {margin-top: 90px;}

    .inner {padding: 0 5%;}
    
    header .hd-inner {height: 90px;}
    header .hd-logo {width: min(230px,50%);}
    header .gnb {display: none;}
    header .link {width:50%}
    header .link .hd-donation {padding: 8px 15px; font-size: 16px;}
    
    .main-visual {height: 500px;}
    .main-visual .inner {padding-top: clamp(60px,8%,90px);}
    .main-visual .img {height: 62%;}
    .main-visual h4 {font-size: 22px; margin-bottom: 15px;}
    .main-visual h2 {font-size: 50px;} 
    .popup-inner {top: 40px;}
    .popup-wrap {width: 350px; height: 420px;}
    .main-quick {margin-top: 60px;}
    .main-quick ul {grid-template-columns: repeat(6, 1fr); column-gap: 20px;}

    .main-news .inner2 {padding: 0 5%;}
    .main-news .noticeSlide {margin-left: 100px;}

    .main-board {margin: 50px 0 60px;}
    .main-board .left .tab {margin-bottom: 25px;}
    .main-board .left .tab li a {font-size: 19px;}
    .main-board .left .board-box {column-gap: 20px;}
    .main-board .left .board-box a {padding: 25px 15px 15px;}
    .main-board .left .board-box h4 {font-size: 17px; }
    .main-board .right h3 {font-size: 25px; padding-bottom: 30px;}
    
    .page-link {padding-bottom: 60px;}
    .page-link .box h4 {font-size: 22px;}
    .page-link .box .more {width: 80px; height: 80px;}

    .bottom-banner .left {width: calc(96% - 200px);} 
    .bottom-banner .left h3 {font-size: 30px;}
    .bottom-banner .left li {font-size: 18px;}
    .bottom-banner .right {width: 200px;}
    .bottom-banner .right li:first-child {margin-bottom: 10px;}
    
    footer .ft-top li a {font-size: 17px;}
    footer .ft-bottom p {font-size: 17px;} 
    footer .ft-bottom .visit h5 {font-size: 17px;}
}
@media (max-width:1080px) {
    .main-visual h4 {font-size: 20px; margin-bottom: 10px;}
    .main-visual h2 {font-size: 45px;} 

    .popup-wrap {width: 300px; height: 400px;}

    .main-quick li .img {width: 55px; height: 55px; }
    .main-quick li p {font-size: 16px;}
    
    .main-news .title {font-size: 30px; margin-bottom: 15px;}
    .main-news .noticeSlide .swiper-slide a {height: 350px;}
    .main-news .noticeSlide .news-txt1 {padding: 12px 20px;}
    .main-news .noticeSlide .news-txt1 h4 {font-size: 17px;}
    .main-news .noticeSlideBox .notice img {height: 32px;}

    .main-board {margin: 40px 0 50px;}
    .main-board .left .tab li a {font-size: 18px;}
    .main-board .left {width: 100%; padding-right: 0;}
    .main-board .left .board-box h5 {font-size: 15px; margin-bottom: 15px;}
    .main-board .right {width: 100%; margin-top: 20px;}
    .main-board .right .box3 { padding: 50px 30px;}
    .main-board .right .box3 .img {height: 100%;}
    .main-board .right .box3 .img img {height: 90%;}

    .page-link {padding-bottom: 40px;}
    .page-link .title {font-size: 30px;}
    .page-link .box {width: 23.5%;}
    .page-link .box h4 {font-size: 20px;} 
    .page-link .box .more p {font-size: 15px;}

    .bottom-banner .left {padding: 20px 40px;}
    .bottom-banner .left h3 {font-size: 28px;}
    .bottom-banner .left li {font-size: 17px;}
    .bottom-banner .right li a {font-size: 17px;}
    .bottom-banner .right li a img {width: 48px;}

    footer .ft-top {padding: 20px 0; }
    footer .ft-top li {margin-right: 10px;}
    footer .ft-top li a {font-size: 16px;}
    footer .ft-bottom {padding:20px 0 40px;}
    footer .ft-bottom p {width: 60%; padding: 0 3%; font-size: 16px;} 
    footer .ft-bottom p a {margin-right: 15px;}
    footer .ft-bottom .visit h5 {font-size: 16px;}
    
}
@media (max-width:800px) {
    .show-800 {display: block;}
    .hide-800 {display: none;}

    .at-body {margin-top: 80px;}
    
    .inner {padding: 0 6%;}
    .mobile-menu li a {font-size: 17px; padding: 15px 30px;}
    .mobile-menu .sub-menu li a {font-size: 16px;} 
    .mobile-menu .sub-menu ul li a {font-size: 14px;}
    .mobile-menu .sub-menu ul li a::before {content: ""; position: absolute; top:13px; left:0; width: 4px; height: 4px; border-radius: 50%; background: #787878;} 

    header .hd-inner {height: 80px;}
    header .link .hd-donation {display: none;}

    .main-visual { background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Supxabjva.bet%2Svzt%2S2024%2Sznva_ivfhny.wct) #fef0c1 no-repeat 35% bottom / cover; height: 420px;}
    .main-visual .img {display: none;}
    .popup-inner {position: static; top:auto; left: auto; transform: none; justify-content: center; margin-top: 40px;}
    .popup-wrap {position: static; width: 100%; height: min(700px,100vw);}
    .popup-wrap .btn-wrap {border-radius:12px; padding: 8px 15px;}
    .popup-wrap .btn-wrap .popup {width: 22px;}
    .popup-wrap .btn-wrap .swiper-pagination-popup {font-size: 16px;}
    .popup-wrap .btn-wrap .pause img {width: 30px;}

    .main-quick ul {grid-template-columns: repeat(3, 1fr); gap:20px 10px;}

    .main-news {overflow: hidden;}
    .main-news .title {font-size: 28px; margin-bottom: 10px;}
    .main-news .noticeSlide {margin-left: 0; overflow: unset; padding: 0 0 20px;}
    .main-news .noticeSlide .swiper-slide a {height: max(280px,70vw);max-height: 350px;}
    .main-news .noticeSlide .news-txt1 {padding: 10px 18px;}
    .main-news .noticeSlide .news-txt1 h4 {font-size: 16px;}
    .main-news .noticeSlide .news-txt1 p {font-size: 13px;}
    .main-news .noticeSlideBox .notice {display: none;}

    .main-board .left .tab li a {font-size: 17px; line-height: 35px;} 
    .main-board .left .tab li.board-more a {width: 35px; height: 35px;}
    .main-board .left .board-box {grid-template-columns: repeat(2, 1fr); column-gap: 15px;}
    .main-board .left .board-box li:last-child {display: none;}
    .main-board .left .board-box h5 {font-size: 14px; margin-bottom: 10px;}
    .main-board .left .board-box h4 {font-size: 16px; word-break: break-all;}
    .main-board .right {margin-top: 15px;}
    .main-board .right h3 {font-size: 22px; padding-bottom: 25px;}
    .main-board .right p {font-size: 13px;}

    .page-link {padding-bottom: 60px;}
    .page-link .title {font-size: 28px; margin-bottom: 10px;}
    .page-link .box {width: calc(50% - 7.5px); margin-top: 15px;}
    .page-link .box .img {clip-path: inset(0 0 0 0 round 20px); height: min(337px, 35vw);}
    .page-link .box h4 {font-size: 18px;} 

    .bottom-banner .left {width: 100%;}
    .bottom-banner .left {padding: 20px 30px;}
    .bottom-banner .left h3 {font-size: 26px;}
    .bottom-banner .left li {font-size: 16px;}
    .bottom-banner .right {width: 100%; justify-content: center; margin-top: 25px;}
    .bottom-banner .right li a {font-size: 16px;}
    .bottom-banner .right li a img {width: 42px;}

    footer .ft-top {padding: 15px 0; }
    footer .ft-top li {margin-right: 8px;}
    footer .ft-top li a {font-size: 15px;}
    footer .ft-bottom {padding:15px 0 30px; justify-content: space-between;}
    footer .ft-bottom .ft-logo {width: 50%; order: 2;}
    footer .ft-bottom .right {width: 100%; max-width: 100%; order:1; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: 15px;}
    footer .ft-bottom .right .visit {width: 40%; max-width: 130px; order: 2;}
    footer .ft-bottom .right a {max-width: 130px;}
    footer .ft-bottom p {width: 100%; padding:3% 0 0; font-size: 15px; order:3;} 
    footer .ft-bottom p a {margin-right: 15px;}
}
@media (max-width:500px) {
    .main-news .noticeSlide .news-txt1 h4 {-webkit-line-clamp: 2;}

    .main-board .left {position: relative;}
    .main-board .left .tab {width: calc(100% - 45px); justify-content: flex-start;}
    .main-board .left .tab li:not(.board-more) {width: 48%;}
    .main-board .left .tab li.board-more {position: absolute; top:0; right:0;}

    .bottom-banner .left h3 {width: 100%; margin-bottom: 10px;}
}