/* reset */
*{margin: 0;padding: 0;}
body, html{font-size: 16px;font-family: "Pretendard";color: #333;}
.wrap { width: 100%; max-width: 1000px; margin: 0 auto; box-sizing: border-box; }
a{text-decoration: none;color: inherit;}
li{list-style:none;}
img{vertical-align: top;}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* web font */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ─── header ─────────────────────────────── */
header{background: #fff;}
header .wrap{border-bottom: 1px solid #bdbdbd;height: 70px;display: flex;align-items: center;}
header h2 img{width: 120px;}

/* ─── index ─────────────────────────────── */
.banners { display: flex; justify-content: space-between; gap: 20px; height: 300px; color: #fff;margin-top: 25px; }
.banners .swiper { flex: 2; min-width: 0; border-radius: 15px;}
.banners .swiper-slide { width: 100%; height: 100%; }
.banners .swiper-slide:nth-child(1) { background: url(../img/web_main_banner_02.png) no-repeat center/cover; }
.banners .swiper-slide:nth-child(2) { background: url(../img/web_main_banner_01.png) no-repeat center/cover; }
.banners .swiper-slide a {display: block;width: 100%;height: 100%;text-decoration: none;color: inherit;cursor: pointer;}
.banners .swiper-wrapper {cursor: pointer;}
.banners .txt{padding: 30px;}
.banners .txt h2{font-size: 30px;}
.banners .txt p{font-size: 16px;margin-top: 30px;line-height: 1.6;}
.banners .bnr { flex: 1; background: url(../img/web_main_banner_03.png) no-repeat center/cover; border-radius: 15px;padding: 30px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
.banners .bnr span{font-size: 20px;}
.banners .bnr h2{font-size: 24px;margin-top: 5px;}
.banners .bnr p{color: #2b2b2b;font-weight: 600;background: #fff;border-radius: 20px;line-height: 30px;text-align: center;font-size: 13px;margin-top: 8px;width: 150px;}
.banners .swiper { position: relative; }
.banners .swiper-pagination {position: absolute;bottom: 16px;right: 16px;left: auto; width: auto;color: #575757;font-size: 14px;font-weight: 500;background: #fff;border-radius: 10px;width: 64px;height: 20px;line-height: 20px;}


.nav{margin-top: 70px;}
.nav h3{font-size: 20px;}
.nav .menu{display: grid;grid-template-columns: repeat(3, 1fr); gap: 30px;margin-top: 30px;}
.nav .menu li{border-radius: 10px;overflow: hidden;height: 173px;}
.nav .menu li:nth-child(1){background: #B5D9FF url(../img/web_main_icon_01.png) no-repeat right 20px bottom 20px;background-size: 100px;}
.nav .menu li:nth-child(2){background: #B5D9FF url(../img/web_main_icon_02.png) no-repeat right 20px bottom 20px;background-size: 80px;}
.nav .menu li a{padding: 30px;width: 100%;height: 100%;display: block;}
.nav .menu li a strong{font-size: 20px;}
.nav .menu li a p{font-size: 15px;margin-top: 15px;line-height: 1.4;}
.nav .menu .side ul{display: flex;flex-direction: column;justify-content: space-between;gap:20px;height: 100%;}
.nav .menu .side ul li{display: flex;align-items: center;background-image: none;height: calc((100% - 20px) / 2);overflow: hidden;}
.nav .menu .side ul li a{display: flex;align-items: center;}
.nav .menu .side ul li img{width: 30px;margin-right: 20px;}
.nav .menu .side ul li span{font-size: 17px;font-weight: 600;}


.news{margin-top: 70px;margin-bottom: 100px;}
.news_header{display: flex;justify-content: space-between;}
.news_header a{display: flex;align-items: center;}
.news_header a img{width: 11px;margin-left: 5px;}
.news .news_header h3{font-size: 20px;}
.news ul{display: grid;grid-template-columns: repeat(4, 1fr);gap: 25px;margin-top: 30px;}
.news ul li{overflow: hidden;}
.news ul li a{;width: 100%;height: 100%;display: block;}
.news ul li a figure {height: 144px;border-radius: 15px;overflow: hidden;}
.news ul li a figure img {width: 100%;height: 100%;object-fit: cover;}
.news ul li a .txt h4{font-size: 17px;margin-top: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news ul li a .txt p{font-size: 15px;margin-top: 15px;margin-bottom: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news ul li a .txt span{font-size: 13px;}


.bnr--set .setting_header{font-size: 20px;font-weight: bold;text-align: center;display: block;margin-bottom: 10px;line-height: 1.6;}
.bnr--set #bnr_organ, .bnr--set #bnr_service {display: flex;align-items: center;height: 45px;padding: 0 25px;width: 300px;box-sizing: border-box;font-size: 15px;overflow: hidden;background: #fff;border-radius: 60px;color: #333;font-weight: 500;margin-bottom: 10px;}
.bnr--set #bnr_organ span, .bnr--set #bnr_service span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 15px;}
.bnr--set #bnr_organ img, .bnr--set #bnr_service img {width: 17px;margin-right: 10px;flex-shrink: 0;}
.bnr_buttons{display: flex;justify-content: space-between;width: 300px;margin-top: 10px;font-size: 15px;}
.bnr_buttons a{display: flex;justify-content: center;align-items: center;height: 45px;background: #374151;border-radius: 60px;width: calc((100% - 10px) / 2);}

/* ─── my benefit ─────────────────────────────── */
.mybenefit_header{font-size: 30px;text-align: center;margin-top: 50px;margin-bottom: 50px;}
.mybenefit_form{display: flex;flex-direction: column;width: 600px;margin: 0 auto;}
.mybenefit_form .first {display: flex;flex-direction: column;}
.mybenefit_form .second {display: flex;flex-direction: column;position: relative;}
.mybenefit_form .third {display: flex;flex-direction: column;}
.mybenefit_form label{font-size: 18px;margin-bottom: 20px;}
.mybenefit_form input[type="text"]{background: #F4F4F4;border-radius: 15px;font-size: 15px;border: none;height: 54px;padding: 0 25px;}
.mybenefit_form input[type="text"]:focus {outline: 1px solid #ccc;}
.mybenefit_form .label {font-size: 18px;margin-bottom: 20px;}
.mybenefit_form .trigger {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;background: #F4F4F4;border-radius: 12px;cursor: pointer;font-size: 15px;user-select: none;}
.mybenefit_form .trigger.open {border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom-color: transparent;}
.mybenefit_form .trigger-text {color: #696969;}
.mybenefit_form .trigger-text.selected {color: #222;}
.mybenefit_form .chevron {transition: transform 0.2s;display: inline-block;}
.mybenefit_form .chevron img{width: 20px;}
.mybenefit_form .chevron.open {transform: rotate(180deg);}
.mybenefit_form .panel {display: none;border: 1px solid #ddd;border-top: none;border-radius: 0 0 12px 12px;overflow: hidden;position: absolute;top: 100%;left: 0;right: 0;z-index: 10;}
.mybenefit_form .panel.open {display: flex;}
.mybenefit_form .city-col {width: 160px;min-width: 160px;border-right: 1px solid #eee;overflow-y: auto;max-height: 320px;background: #f5f5f5;}
.mybenefit_form .city-item {padding: 14px 20px;font-size: 14px;color: #666;cursor: pointer;text-align: center;}
.mybenefit_form .city-item:hover {background: #f5f5f5;color: #222;}
.mybenefit_form .city-item.active {background: #626264;color: #fff;border-radius: 20px;margin: 4px 10px;padding: 10px 14px;font-weight: 500;}
.mybenefit_form .district-col {flex: 1;overflow-y: auto;max-height: 320px;background: #fff;}
.mybenefit_form .district-item {padding: 14px 24px;font-size: 14px;color: #666;border-bottom: 1px solid #eee;cursor: pointer;}
.mybenefit_form .district-item:last-child {border-bottom: none;}
.mybenefit_form .district-item:hover {color: #222;}
.mybenefit_form .district-item.active {color: #222;font-weight: 500;}
.mybenefit_form{display: flex;flex-direction: column;gap: 30px;}
.mybenefit_form fieldset{border: none;}
.mybenefit_form fieldset legend{font-size: 18px;margin-bottom: 20px;}
.mybenefit_form .flex_box{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.mybenefit_form input[type="radio"] {display: none;}
.mybenefit_form fieldset label {display: inline-block;border: 1px solid #ddd;border-radius: 8px;cursor: pointer;color: #666;width: 100%;height: 173px;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size:17px;}
.mybenefit_form fieldset label img{width: 30px;margin-bottom: 10px;}
.mybenefit_form input[type="radio"]:checked + label {background-color: #F4F4F4;border: 1px solid #838383;}
.mybenefit_form button{background: #3788DE;width: 290px;height: 48px;border: none;border-radius: 15px;color: #fff;margin: 0 auto;}

/* ─── all benefit ─────────────────────────────── */
.allbenefit_header{font-size: 30px;margin-top: 50px;margin-bottom: 50px;}
.allbenefit_form{display: flex;flex-direction: column;margin: 0 auto;width: 100%;}
.allbenefit_form .first{position: relative;}
.allbenefit_form input[type="text"]{background: #F4F4F4;border-radius: 15px;font-size: 15px;border: none;height: 54px;padding: 0 25px;padding-right: 40px;width: 100%;}
.allbenefit_form input[type="text"]:focus {outline: 1px solid #ccc;}
.allbenefit_form button{background: none;border: none;cursor: pointer;padding: 0;position: absolute;right: 20px;top: 25%;}
.allbenefit_form button img{width: 25px;}
.allbenefit_form {width: 100%;}
.allbenefit_form .second {display: flex;gap: 20px;width: 100%;margin-top: 15px;}
.allbenefit_form .select-wrap {flex: 1;min-width: 0;position: relative;}
.allbenefit_form .trigger {width: 100%;display: flex;justify-content: space-between;align-items: center;background: #fff;border-radius: 15px;padding: 15px 20px;cursor: pointer;border: 1px solid #707070;box-sizing: border-box;height: 50px;}
.allbenefit_form .chevron img{width: 25px;}
.allbenefit_form .panel {display: none;border: 1px solid #707070;border-top: none;border-radius: 0 0 12px 12px;overflow: hidden;position: absolute;top: 100%;left: 0;right: 0;z-index: 10;background: #fff;box-shadow: 1px 1px 3px rgba(0, 0, 0.8, 0.281);}
.allbenefit_form .panel.open {display: block;}
.allbenefit_form .service-item {padding: 13px 20px;font-size: 14px;color: #666;border-bottom: 1px solid #eee;cursor: pointer;}
.allbenefit_form .service-item:hover {background: #f5f5f5;color: #222;}
.allbenefit_form .service-item:first-child {font-weight: 500;color: #222;}

.benefit_card{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap:20px;margin-top: 30px;border-top:1px solid #4d4d4d;padding-top: 30px;}
.benefit_card li{border: 1px solid #4DA3FF;border-radius: 15px;overflow: hidden;padding: 30px;box-sizing: border-box;position: relative;}
.benefit_card li a{position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
.benefit_card li h4{font-size: 20px;padding-bottom: 10px;border-bottom: 1px solid #4DA3FF;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.benefit_card li p{margin-bottom: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.benefit_card li p:nth-of-type(1){margin-top: 20px;}
.benefit_card li p span{background: #4DA3FF;color: #fff;width: 70px;line-height: 24px;display: inline-block;text-align: center;border-radius: 12px;font-size: 14px;margin-right: 10px;}
.benefit_card li > span{font-size: 13px;text-align: right;display: block;color: #aaaaaa;}
.pagination {display: flex;list-style: none;gap: 8px; /* 박스 사이 간격 */justify-content: center;align-items: center;margin-top: 40px;margin-bottom: 40px;}
.page-item a, .page-item span {display: flex;align-items: center;justify-content: center;width: 35px; height: 35px;border: 1px solid #bbbbbb;border-radius: 8px;text-decoration: none;color: #666;transition: all 0.3s;}
.page-item.active a {background-color: #fff;border-color: #55aaff;color: #55aaff;}
.page-item.prev.disabled a {background-color: #55aaff;border-color: #55aaff;color: #fff;cursor: not-allowed;}
.page-item.prev.disabled a img{filter: brightness(0) invert(1);}
.page-item a:hover:not(.disabled a) {border-color: #55aaff;color: #55aaff;}
.pagination .prev{transform: rotate(-180deg);display: flex;align-items: center;justify-content: center;}
.pagination .prev img{width: 15px;transform: translateX(3px);}
.pagination .next img{width: 15px;transform: translateX(3px);}

.no-result{border: none !important;}

/* ─── benefit detail ─────────────────────────────── */
.benefit_detail_header{font-size: 20px;color: #626264;font-weight: normal;margin-top: 50px;}
.detail_back {font-size: 13px;color: var(--color-text-secondary, #888);margin-bottom: 8px;}
.detail_title {font-size: 30px;margin-bottom: 40px;font-weight: bold;margin-top: 30px;}
.tab_menu {display: flex;list-style: none;padding: 0;margin: 0;border-bottom: 1.5px solid #727272;}
.tab_item {flex: 1;text-align: center;padding: 14px 0;font-size: 18px;color: #aaa;cursor: pointer;position: relative;}
.tab_item.active {color: #363636;font-weight: 500;}
.tab_item.active::after {content: '';position: absolute;bottom: 0.5px;left: 87px;width: 30%;height: 4px;background: #353535;}
.tab_content {display: none;padding: 60px 0;}
.tab_content.active {display: block;}
.info_row {display: flex;align-items: center;gap: 16px;margin-bottom: 35px;}
.info_badge {flex-shrink: 0;background: #4DA3FF;color: #ffffff;border-radius: 20px;padding: 7px 15px;font-size: 13px;white-space: nowrap;}
.detail_btns {display: flex;gap: 12px;justify-content: center;position: fixed;bottom: 5%;left: 0;width: 100%;background: #fff;padding: 16px 0;z-index: 100;}
.btn_primary {text-align: center;padding: 14px 0;background: #3788DE;color: #fff;border-radius: 8px;text-decoration: none;font-size: 15px;width: 300px;}
.btn_secondary {text-align: center;padding: 14px 0;background: #fff;color: #333;border: 1px solid #818181;border-radius: 8px;text-decoration: none;font-size: 15px;width: 300px;}
section.contents {padding-bottom: 100px;}

/* ─── news ─────────────────────────────── */
.news_list_header h3{font-size: 30px;}
.news2{margin-top: 30px;}

/* ─── faq ─────────────────────────────── */
.faq_header h3{font-size: 30px;margin-top: 30px;}
.faq_list{margin-top: 30px;}
.faq_list .que{display: flex;align-items: center;justify-content: space-between;background: #F4F4F4;border-radius: 5px;padding: 20px 25px;margin-bottom: 20px;margin-top: 20px;}
.faq_list .que img{width: 25px;}
.faq_list .txt{display: flex;font-size: 20px;}
.faq_list .que span{font-weight: 600;margin-right: 30px;}
.faq_list .ans{border: 1px solid #a7a7a7;border-radius: 5px;padding: 20px 30px;margin-top: 5px;}
.faq_item .ans {display: none;padding: 16px 20px;}
.faq_item.open .ans {display: block;line-height: 1.6;}
.faq_item.open .que img {transform: rotate(180deg);}
.que img {transition: transform 0.3s;}


@media (max-width: 801px) {
    .pc { display: none !important; }
    .wrap {padding: 0 16px;box-sizing: border-box;}
    section.contents {padding-bottom: 0;}
    /* ─── 배너 ─── */
    .banners {flex-direction: column;height: auto;gap: 15px;}
    .banners .swiper {flex: none;width: 100%;height: 168px;  /* 모바일 배너 높이 */}
    .banners .bnr {flex: none;width: 100%;height: 168px;padding: 20px;}
    .banners .bnr p{margin-top: 45px;width: 136px;}
    .banners .txt {padding: 20px;}
    .banners .txt h2 { font-size: 22px; }
    .banners .txt p { font-size: 14px; margin-top: 15px; }
    .banners .bnr{background: url(../img/mo_main_banner_03.png) no-repeat center/cover;align-items: start;}
    .banners .bnr span { font-size: 16px; }
    .banners .bnr h2 { font-size: 20px; }
    .banners .swiper-pagination{left: 20px; width: 50px;}
    .banners .swiper-slide:nth-child(1){background: url(../img/mo_main_banner_02.png) no-repeat center/cover;}
    .banners .swiper-slide:nth-child(2){background: url(../img/mo_main_banner_01.png) no-repeat center/cover;}

    /* ─── 네비 메뉴 ─── */
    .nav { margin-top: 40px; }
    .nav .menu {grid-template-columns: repeat(2, 1fr);gap: 15px;}
    .nav .menu li { height: 145px; }
    .nav .menu li a strong { font-size: 16px; }
    .nav .menu li:nth-child(1){background: #b5d9ff url(../img/mo_main_icon_01.png) no-repeat right 10px bottom 10px;  background-size: 65px;}
    .nav .menu li:nth-child(2){background: #b5d9ff url(../img/mo_main_icon_02.png) no-repeat right 10px bottom 10px;  background-size: 65px;}
    .nav .menu li a{padding: 20px;}
    .nav .menu li a p { font-size: 13px; margin-top: 10px; }
    .nav .menu .side { grid-column: span 2;height: auto;} 
    .nav .menu > li:not(.side) { height: 145px; }
    .nav .menu .side ul {flex-direction: column;height: 100%;gap: 15px;}
    .nav .menu .side ul li {flex: 1;height: 60px;background: #f4f4f4;border-radius: 10px;justify-content: center;background-image: none;}
    .nav .menu .side ul li span { font-size: 15px; }
    .nav .menu .side ul li a {background: #b5d9ff;}

    /* ─── 뉴스 ─── */
    .news { margin-top: 40px; margin-bottom: 60px; }
    .news ul {grid-template-columns: repeat(2, 1fr);gap: 15px;}
    .news ul li a figure { height: 110px; }
    .news ul li a .txt h4 { font-size: 14px; margin-top: 12px; }
    .news ul li a .txt p { font-size: 13px; margin-top: 8px; margin-bottom: 8px; }

    .mybenefit_header{font-size: 18px;text-align-last: left;margin-top: 20px;}
    .mybenefit_form {
        width: 100%;
    }
    .mybenefit_form .flex_box {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .mybenefit_form fieldset label {
        height: 120px;
        font-size: 14px;
    }
    .mybenefit_form fieldset label img {
        width: 24px;
    }
    .mybenefit_form button {
        width: 100%;
    }
    .mybenefit_form .city-col {
        width: 120px;
        min-width: 120px;
    }
    .mybenefit_form .city-item {
        padding: 10px 10px;
        font-size: 13px;
    }
    .mybenefit_form .district-item {
        padding: 10px 15px;
        font-size: 13px;
    }
    .mybenefit_form button {width: 70%;margin-bottom: 30px;}
    
    .allbenefit_header {
        font-size: 22px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .allbenefit_form .second {
        gap: 10px;
    }
    .benefit_card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
        margin-top: 20px;
        padding-top: 20px;
        border-color: #d3d3d3;
    }
    .benefit_card li {
        padding: 20px;
    }
    .benefit_card li h4 {
        font-size: 17px;
    }
    .benefit_card li p span {
        width: 60px;
        font-size: 13px;
    }
    .pagination {
        gap: 5px;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .page-item a, .page-item span {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .allbenefit_form .trigger span{font-size: 14px;}














    




}

@media (min-width:801px) { /* PC용 */
    .mob{display: none !important;}
}