* {
    --common-width : 800px; /* 최대넓이 */
    --header-height: 6.5rem; /* 상단바 높이 */
    --footer-height: 7rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #f2f5f6;
    max-width: var(--common-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
header {width: 100%;z-index: 100;height: var(--header-height);max-width: var(--common-width);display: flex;justify-content: space-between;align-items: center;position: fixed;left: 50%;top: 0;transform: translateX(-50%);transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);background-color: #f2f5f6;padding: 0 1.5rem;}
header.color {background-color: #f2f5f6;}
header.color::after {background-color: transparent;}
header h1 {color: #383838;line-height: 1.4;font-size: 1.8rem;}
header h1 img {height: calc(var(--header-height) / 1.5);width: fit-content;object-fit: contain;}
header .plus {
    height: var(--header-height);
    width: calc(var(--header-height) / 2);
    display: flex;align-items: center;justify-content: center;flex-direction: column;gap: .5rem;
    margin-right: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #383838;
}
header .plus img {width: 2rem;height: 2rem;object-fit: contain;}
header .prev {
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 3.3);
    background: url(../img/back.png) no-repeat center / 2rem;
}
header .dummy {
    height: var(--header-height);
    width: calc(var(--header-height) / 2);
}
header a {
    width: 12rem;
}
header a img {
    height: calc(var(--header-height) / 2);
    /* width: 100%; */
    object-fit: contain;
}
header span {
    display: flex;align-items: center;
}



footer {
    width: 100%;
    z-index: 100;
    position: fixed;
    left: 50%;bottom: 0;
    background-color: #f2f5f6;
    height:var(--footer-height);
    transform: translateX(-50%);
    max-width: var(--common-width);
}
footer ul {
    display: flex;justify-content: space-between;align-items: center;
    height: 100%;width: 100%;
}
footer li {height: 100%;width: 100%;}
footer a {
    color: #7a7a7a;
    font-size: 1.2rem;
    padding-top: 2.5rem;
    position: relative;
    height: 100%;width: 100%;
    transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;justify-content: center;align-items: center;
}
footer a.on {color: #122036;font-weight: bold;}
footer a::before {
    content: "";
    position: absolute;
    left: 50%;top:1rem;
    transform: translateX(-50%);
    width: 2.5rem;height: 2.5rem;
}
footer li:nth-of-type(1) a::before {background: url(../img/menu-btn-off-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a::before {background: url(../img/menu-btn-off-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a::before {background: url(../img/menu-btn-off-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a::before {background: url(../img/menu-btn-off-4.png) no-repeat center / contain;}
footer li:nth-of-type(1) a.on::before {background: url(../img/menu-btn-on-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a.on::before {background: url(../img/menu-btn-on-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a.on::before {background: url(../img/menu-btn-on-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a.on::before {background: url(../img/menu-btn-on-4.png) no-repeat center / contain;}




/* ============================ */
section {
    margin: 4rem 1.5rem;
}
.common_h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #122036;
    line-height: 1.4;
    margin-bottom: 1rem;
    display: flex;justify-content: space-between;align-items: end;
}
/* ============================ */
#home {}
#home h2 img {
    object-fit: contain;
    width: 4rem;height: 4rem;
}
#home h3 {
    line-height: 1.4;
    color: #122036;
    font-size: 1.6rem;
}
#home .banners {
    display: grid;gap: 1.5rem;margin-top: 3rem;
}
#home .banners a {
    display: flex;justify-content: space-evenly;align-items: center;flex-direction: column;
    border-radius: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: #00c67b;
    line-height: 1.2;
    text-align: center;
    padding: 1rem 0 .5rem;
    min-height: 10rem;
}
#home .banners a:nth-of-type(1) {
    background-color: #1e1268;
    color: #fff;
    grid-row: span 2;
    height: 100%;
}
#home .banners a:nth-of-type(2) {
    background-color: #00c67b;
    color: #0d0b25;
    grid-row: 1;
    grid-column: 2;
}
#home .banners a:nth-of-type(3) {
    background-color: #fbee7d;
    color: #0d0b25;
    grid-row: 2;
    grid-column: 2;
}
#home .banners a img {
    width: 7rem;height: 7rem;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
#home .banners a:nth-of-type(1) img {
    width: 10rem;height: 10rem;
}
#home .home_qna .swiper-wrapper {
    height: min-content;
}
#home .home_qna .swiper-wrapper .swiper-slide {
    padding: 3rem 1.5rem;
    line-height: 1.4;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    border-radius: 1rem;
    background-color: #1e1268;
}

.swiper-button-next:after, .swiper-button-prev:after {
    opacity: 0;
}
.swiper-button-prev {
    background: url(../img/main-arrow-left.png) no-repeat center / 0.9rem;
}
.swiper-button-next {
    background: url(../img/main-arrow-right.png) no-repeat center / 0.9rem;
}






















.news {background-color: #f4f5f5;}
.news_swiper {padding: 0 1.5rem 1.5rem !important;margin: 1.5rem 0;}
.news_swiper .news_box {
    height: 20rem;
}
.news_swiper .news_box .swiper-slide {
    background-color: #fff;
    padding: 1.5rem;
    display: flex;justify-content: space-between;gap: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    box-shadow: .2rem .5rem .5rem rgba(61, 62, 77, 0.1);
}
.news_swiper .news_box .swiper-slide h3 {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    color: #2e3f49;
    margin-bottom: 1rem;
}
.news_swiper .news_box .swiper-slide p {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 300;
    color: #6f829a;
    margin-bottom: 1rem;
}
.news_swiper .news_box .swiper-slide img {
    display: block;
    width: 50%;
    height: 100%;
    object-fit: cover;
}



.news_sub {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #f4f5f5;
}
.news_sub h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #3a435b;
    padding-top: 3rem;
    margin-bottom: 1rem;
}
.news_sub p {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #8ac00f;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #d9d9d9;
}
.news_sub pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #6a7d96;
    margin-bottom: 7rem;
}
.news_sub img {
    width: 100%;
    margin-bottom: 2rem;
}
.news_sub a {
    height:4.5rem;
    display: flex;justify-content: center;align-items: center;
    font-size: 1.6rem;
    gap: 1rem;
    margin: 0 auto;
    border-radius: .5rem;
    padding: .5rem 1.7rem;
    width: fit-content;
    color: #fff;
    background-color: #0055a2;
}
.news_sub a img {
    width: 1rem;
    filter: brightness(2);
    display: block;
    margin-bottom: 0;
}












/* qna */
#qna .box {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    box-shadow: .2rem .3rem .3rem rgba(107, 109, 136, 0.1);
}
#qna .box span {display: block;}
#qna .box .ques {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    background: #1e1268 url(../img/arrow-down.png) no-repeat calc(100% - 2rem) center / 1.5rem;
    padding: 1.8rem 4rem 1.8rem 1.5rem;
}
#qna .box .ans {
    display: none;
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.6rem;
    color: #484659;
}
#qna .box .ans b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
}
#qna .box .ans b.block {
    display: block;
}
#qna .box .ans b.block:last-of-type {
    margin-top: 3rem;
}
#qna .box.on .ques {
    background: #1e1268 url(../img/arrow-up.png) no-repeat calc(100% - 2rem) center / 1.5rem;
}
#qna .box.on .ans {display: block;}









/* sub */
#sub .box {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    box-shadow: .2rem .3rem .3rem rgba(107, 109, 136, 0.1);
}
#sub .box span {display: block;}
#sub .box .title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    background: #1e1268 url(../img/arrow-down.png) no-repeat calc(100% - 2rem) center / 1.5rem;
    padding: 1.8rem 4rem 1.8rem 1.5rem;
}
#sub .box .content {
    display: none;
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.6rem;
    color: #484659;
}
#sub .box .content b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
}
#sub .box .content b.block {
    display: block;
}
#sub .box .content b.block:last-of-type {
    margin-top: 3rem;
}
#sub .box.on .ques {
    background: #1e1268 url(../img/arrow-up.png) no-repeat calc(100% - 2rem) center / 1.5rem;
}
#sub .box.on .content {display: block;}
#sub .bank {
    margin: 1.5rem 0;
    padding: 1.5rem 1.5rem 0;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0 .2rem rgba(0, 0, 0, .3);
}
#sub .bank h3 img {
    width: 3rem;height: 3rem;
}
#sub .bank h3 {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    display: flex;align-items: center;gap: 1rem;
}
#sub .bank pre {
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.6rem;
    color: #484659;
}
#sub .bank b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
}
#sub .deco {
    font-weight: 800;
    line-height: 1.4;
    font-size: 1.8rem;
    color: #484659;
    position: relative;
    margin-bottom: .7rem;
    display: flex;gap: .5rem;
}
#sub .deco img {
    width: 2rem;height: 2rem;
    object-fit: contain;
    margin-top: .3rem;
}
#sub .def {
    line-height: 1.4;
    font-size: 1.6rem;
    color: #484659;
    margin-bottom: 2rem;
}
#sub .banner {
    min-height: 8rem;
    border-radius: 1rem;
    display: flex;flex-direction: column;justify-content: center;
    padding: 1rem 2rem;
    margin-top: 4rem;
}
#sub .banner1 {
    background: #00c67b url(../img/banner-icon-1.png) no-repeat calc(100% - 2rem) center / auto 80%;
}
#sub .banner2 {
    background: #00c67b url(../img/banner-icon-2.png) no-repeat calc(100% - 2rem) center / auto 70%;
}
#sub .banner p:nth-of-type(1) {
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: .5rem;
}
#sub .banner p:nth-of-type(2) {
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
}
#sub .tabs {
    border-bottom: 2px solid #122036;
    width: calc(100% + 3rem);
    margin-bottom: 2rem;
    transform: translate(-1.5rem);
    display: flex;justify-content: center;align-items: center;
}
#sub .tabs span {
    font-size: 1.6rem;
    color: #1e1268;
    height: 4rem;
    text-align: center;
    width: calc((100% - 3rem) / 3);
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    background-color: #fff;
    display: flex;justify-content: center;align-items: center;
}
#sub .tabs span:first-of-type {border-radius: 1rem 0 0 0;border-left: 1px solid #ddd;}
#sub .tabs span:last-of-type {border-radius: 0 1rem 0 0;}
#sub .tabs span.on {
    background-color: #1e1268;color: #fff;font-weight: bold;
}
#sub .content {}
#sub .content h3 {}
#sub .content p {}
#sub .content pre {}

#sub .content h2:nth-of-type(2) {margin-top: 4rem;}



/* 0604 추가 */
.calc_btn {
    display: block;
    background-color: #D6E6F2;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    margin-top: 2.5rem;
    background-image: url(../img/main-icon-4.png);
    background-repeat: no-repeat;
    background-position: 90% 100%;
    background-size: 6rem;
}
.calc_btn span {
    font-size: 1.8rem;
}
.calc_btn p {
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem 0 1rem;
}