#wrap {
    min-height: 100vh;
    width: 100%;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    max-width:1024px;
    margin: 0 auto;
}
#wrap.index {background: #ffd426 url(../img/index-logo.png) no-repeat center / 20rem;}
#wrap.home {position: relative;}
#wrap.home::before {
    content:"";
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:35rem;
    z-index: -1;
    border-radius: 0 0 7rem/10rem 0 ;
    background-color: #ffd426;
}
#wrap.home header, #wrap.mean header {background-color: #ffd426;}

header {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 1024px;
    z-index: 100;
    height: 5.5rem;
    padding: 0 1.5rem;
    transform: translateX(-50%);
    background-color: #fff;
    display: flex;justify-content: space-between;align-items: center;
}
header .prev {
    width: 3rem;
    height: 3rem;
    background: url(../img/back-arrow.png) no-repeat center / 2rem;
}
header h1 {font-size: 1.6rem;font-weight: bold;text-align: center;}
header .logo img {
    height: 3rem;
    width: fit-content;
}
header.home .prev, header.home h1 {display: none;}



footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 1024px;
    z-index: 1000;
    height: 5.5rem;
    transform: translateX(-50%);
    background-color: #fff;
    display: flex;justify-content: space-between;align-items: center;
}
footer .foEl {
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}
footer .foEl:nth-child(1) {background: url(../img/home-icon.png) no-repeat center / 8rem;}
footer .foEl:nth-child(2) {background: url(../img/news-icon.png) no-repeat center / 8rem;}
footer .foEl:nth-child(3) {background: url(../img/qna-icon.png) no-repeat center / 8rem;}
footer .foEl:nth-child(4) {background: url(../img/all-menu-icon.png) no-repeat center / 8rem;}




/* 햄버거 기능 */
.open,.close {cursor: pointer;}
nav .inner {
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);
    overflow-y: scroll;
    position:fixed;
    z-index: 1000;
    left:0;
    width:100%;
    bottom:-60%;
    height:60%;
    padding: 1.5rem;
    border-radius: 3rem 3rem 0 0;
    background-color: #f9f7ef;
}
nav .outer {
    background-color:rgba(0, 0, 0, .4);
    min-height: 100vh;
    position:fixed;
    width:100%;
    left:0;
    top:0;
    z-index: 999;
    display: none;
}
nav.on .inner {display: block;bottom:5.4rem;}
nav.on .outer {display: block;}
.nav_header {
    padding: 2rem 0 1rem;
    display: flex;
    justify-content: right;
    align-items: center;
}
.nav_header .close {
    width:2rem;
    height:1.5rem;
    background: url(../img/close.png) no-repeat center / contain;
}
nav .content a {
    font-size: 1.5rem;
    text-align: center;
    padding: 1.5rem;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ddd;
}
nav .content a:last-of-type {border-bottom: none;}
nav .content a.color {color: #f18a29;font-weight: bold;}






/* 홈 슬라이드 */
.home_intro {
    display: block;
    padding: 0 2rem 3rem !important;
    background: url(../img/slide_bg.png) no-repeat center calc(100% - 2rem) / cover;
}
.home_intro .swiper-wrapper {
    height: fit-content;
}
.home_intro .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 20rem;
    padding-top: 2rem;
}
.home_intro .swiper-wrapper .swiper-slide h2 {
    font-size: 2rem;
    line-height:1.6;
    width: 100%;
}
.home_intro .swiper-wrapper .swiper-slide h2 em {
    font-size: 1.4rem;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
.home_intro .swiper-wrapper .swiper-slide h2 b {
    font-size: inherit;
    font-weight: 800;
    line-height: inherit;
    color: inherit;
}
.home_intro .swiper-wrapper .swiper-slide span {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    width: fit-content;
    padding: 1rem 1.5rem;
    border-radius: 10rem;
    margin-top: 1rem;
    background-color: #ce9b29;
}
.home_intro .swiper-wrapper .swiper-slide:nth-of-type(1) {background: url(../img/main-img-1.png) no-repeat calc(100% - 2rem) 100% / 13rem;}
.home_intro .swiper-wrapper .swiper-slide:nth-of-type(2) {background: url(../img/main-img-2.png) no-repeat calc(100% - 2rem) 100% / 15rem;}
.home_intro .swiper-wrapper .swiper-slide:nth-of-type(3) {background: url(../img/main-img-3.png) no-repeat calc(100% - 2rem) 100% / 15rem;}
.swiper {height: fit-content;}
.swiper-pagination {left: 4.5rem !important;bottom: 1.3rem !important;transform: translateX(-50%) !important;width: fit-content !important;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: .2rem !important;width: 1.2rem;height: 1.2rem;}
.swiper-pagination-bullet {background-color: #fff !important;}
.swiper-pagination-bullet-active {background-color: #fff !important;}





/* 홈배너 */
.banners {
    display: grid;
    margin: 2rem;
    gap: 1rem;
    grid-template-columns: repeat(2, 2fr);
}
.banner {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}
.banner.home {margin: 2rem;width: calc(100% - 4rem);display: block;}
.banner img {width: 100%;}







/* toggle */
.toggle {
    margin: 1.5rem;
    overflow: hidden;
}
.toggle .box {
    border: 1px solid #dbd2c6;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    overflow: hidden;
}
.toggle .box .opener {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #3a455d;
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    background: #f9f7ef url(../img/qna-open.png) no-repeat calc(100% - 1rem) center / 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle .box .opener::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 1.6rem;
    height: 2rem;
    width: 2rem;
}
.toggle .box.open .opener {
    background: #f9f7ef url(../img/qna-close.png) no-repeat calc(100% - 1rem) center / 1.3rem;
}
.toggle .box .opener img {
    width: 1.5rem;
}
.toggle .box .opened {
    display: none;
    border-top: 1px solid #c5cedd;
}
.toggle .box.open .opened {
    display: block;
}
.toggle .box .opened pre {
    position: relative;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #70767f;
    background-color: #f9f7ef ;
    padding: 1rem 1.5rem;
}
.toggle .box .opened pre::before {
    content:"";
    position: absolute;
    left: 1.5rem;
    top: 1.4rem;
    height: 1.8rem;
    width: 1.8rem;
}
.toggle .box .opened pre b {
    line-height: inherit;
    font-size: inherit;
    font-weight: 800;
    color: inherit;
}
.toggle .box .opened pre a {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}




/* 국민내일배움카드란? */
.mean_in h2 {
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.mean_in .top {
    padding: 1.5rem;
    padding-bottom: 10rem;
    background-color: #ffd426;
}
.mean_in .top h3 {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #23221b;
}
.mean_in .bottom {
    padding: 2rem 1.5rem 0;
    position: relative;
    top: -8rem;
    background-color: #fff;
    border-radius: 0 8rem 0 0 ;
}
.mean_in .bottom h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f18724;
    line-height: 1.4;
}
.mean_in .bottom span {
    padding: 0 1rem 1.5rem;
    border: 1px solid #dbd2c6;
    background-color: #f9f7ef;
    margin: 1rem 0 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
}
.mean_in .bottom pre {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #838b8f;
}
.mean_in .bottom b {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #838b8f;
    font-weight: bold;
    margin-top: 2rem;
}




/* news */
.news {padding:0 1.5rem;}
.news-article {
    height: 10rem;
    display: flex;align-items: center;
    margin: 1rem 0;
}
.news-article img {
    width: 47%;
    height: 100%;
    object-fit: cover;
}
.news-article span {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 53%;
    height: 100%;
    padding-left: 1rem;
}
.news-article span h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    word-break: break-all;
    color: #5f6670;
    letter-spacing: -0.6px;
}
.news-article span p {
    font-size: 1.4rem;
    color: #479bc9;
    
}





/* way */
.way {padding: 1.5rem;}
.way h2 {
    font-size: 1.6rem;
    font-weight: 900;
    padding: .8rem 1.5rem;
    border-radius:1.2rem;
    width: fit-content;
    color: #1e1e1b;
    margin-bottom: 1rem;
    background-color: #fcfbe6;
    border: 2px solid #ffd21b;
}
.way pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #91989b;
    margin: 1rem;
}






/* bank */
label:hover {cursor: pointer;}
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem;
}
#tabs {
    width: 100%;
    display: flex;
    margin-bottom: 2rem;
}
#tabs input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
    border-bottom: 2px solid transparent;
}
#tabs label {
    width: 100%;
    color: #080805;
    font-size: 1.6rem;
    margin-right: -1px;
    background-color: #fff;
    border: 1px solid #ece7e1;
    padding: 1.5rem .8rem;
    display: flex;justify-content: center;align-items: center;
}
#tabs input:checked + label {
    color: #f0831d;
    font-weight: bold;
    background-color: #fcfbe6;
    border-bottom: 2px solid #ffd426;
}
#region {
    width: 20%;
    padding: 1rem .5rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    color: #0e0e0b;
    font-weight: bold;
    background: url(../img/subpage-arrow.png) no-repeat calc(100% - .5rem) center / .8rem;
    border: 1px solid #f9f9f8;
}
#region option {font-size: 1.6rem;background-color: #fcfbe6;}

form label[for="search"] {
    width: calc(80% - .5rem);
    position: relative;
    display: flex;
}
form label input[type="text"] {
    display: flex;justify-content: center;align-items: center;
    border: 1px solid #f9f9f8;
    font-size: 1.6rem;
    padding: .5rem 1rem;
    width: 100%;
    border-radius: .5rem;
}
form label input[type="submit"] {
    background: url(../img/search.png) no-repeat 0 center / 60%;
    filter: brightness(0);
    position: absolute;
    width: 3rem;height: 3rem;
    text-indent: -9999px;
    right: .4rem;top: 50%;
    transform: translateY(-50%);
}
.result {padding: 0 1.5rem;}
.result li {
    border: 1px solid #f3f3f3;
    border-radius: 1rem;
    margin-bottom: 1rem;
    display: flex;align-items: center;justify-content: space-between;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .1);
}
.result span {
    padding: 1.5rem;
}
.result span .bank_name {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: .5rem;
    font-weight: bold;
    color: #f0831c;
}
.result span .bank_address {
    font-size: 1.2rem;
    line-height: 1.4;
    color: #92a6b7;
}
.result li a {
    display: block;
    width: 5rem;
    height: 6rem;
    background: url(../img/call-icon.png) no-repeat center / 2rem;
}


.result .pagination {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
.result .pagination a {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    color: #92a6b7;
    align-items: center;
}
.result .pagination strong {
    font-size: 1.6rem;
    width: 3rem;
    height: 3rem;
    font-weight: 800;
    color: #f0831c;
    display: flex;
    justify-content: center;
    align-items: center;
}