* {
    --common-width : 650px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
header {
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    height: var(--header-height);
    max-width: var(--common-width);
    border-bottom: 1px solid #f8f8f8;
    display: flex;justify-content: center;align-items: center;
    position: fixed;left: 50%;top: 0;transform: translateX(-50%);
}
header h1 {
    font-size: 1.8rem;
    text-align: center;
}
header h1 img {
    height: calc(var(--header-height) / 1.5);
    display: block;
}
header .logo {
    display: flex;justify-content: center;align-items: center; 
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 10rem;
    border: 2px solid #111;
    color: #111;
    width: 10rem;height: 3rem;
}
footer {
    position: fixed;
    left: 50%;bottom: 0;
    height:var(--footer-height);
    width: 100%;
    z-index: 1000;
    transform: translateX(-50%);
    max-width: var(--common-width);
    background-color: #fff;
    border-top: 1px solid #e2e2e2;
}
footer ul {
    display: flex;justify-content: space-between;align-items: center;
    height: 100%;width: 100%;
}
footer li {
    height: 100%;width: 100%;
}
footer a {
    color: #aeaeae;
    font-size: 1.8rem;
    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: #2b2830;
    font-weight: bold;
}
footer a.on::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;top: 0;
    background-color: #24bdd3;
    transform: translate(-50%, -50%);
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #fefefe;
    max-width: var(--common-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
.commonh2 {
    font-family: 'EsaManru', sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    color: #34293b;
    display: flex;align-items: center;justify-content: space-between;
}
.commonh2 .more {
    font-size: 1.4rem;
    color: #fff;
    display: block;
    width: fit-content;
    padding: .5rem 1.2rem;
    border-radius: 10rem;
    background-color: #474f7a;
}
.commonpre {
    font-size: 1.6rem;
    color: #717171;
    line-height: 1.6;
}

/* ========================================= */


/* home */
.home_wrap {}
#calc_banner {
    display: block;
    margin: 3rem 1.5rem 1.5rem;
    min-height: 13rem;
    border-radius: 1rem;
    padding:  1.5rem;
    background: #f8e559 url(../img/banner_img.png) no-repeat calc(100% - 1.5rem) center / 10rem;
}
#calc_banner p {
    font-size: 1.4rem;
    font-weight: bold;
    color: #1c2244;
    line-height: 1.4;
}
#calc_banner h3 {
    font-size: 2rem;
    font-weight: 900;
    color: #363087;
    line-height: 1.4;
    display: flex;align-items: center;gap: 1rem;
}
#calc_banner h3 img {
    width: 2.5rem;
}

.home_wrap .qna {
    margin: 3rem 1.5rem;
}
.home_wrap .qna h2 {}
.home_wrap .qna p {
    padding: 1.3rem 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid #e1e1e1;
}
.home_wrap .qna p:nth-of-type(1) {margin-top: 1.5rem;}
.home_wrap .qna p:nth-of-type(2) {margin-top: 1.0rem;}

.home_wrap .contents {}
.home_wrap .contents .box {
    margin: 1.5rem;
    display: block;
    border-radius: 1.5rem;
    box-shadow: .2rem .2rem .5rem rgba(95, 91, 91, 0.1);
    border: 1px solid #e1e1e1;
}
.home_wrap .contents .box h2 {
    padding: 1.8rem 1.5rem 1.5rem;
}
.home_wrap .contents .box pre {
    padding: 1.5rem;
    border-top: 1px solid #e1e1e1;
}
.home_wrap .contents .box a {
    display: block;
    color: #fff;
    margin: 0 1.5rem 2rem;
    font-size: 1.6rem;
    padding: 2rem 5rem;
    text-align: center;
    border-radius: 10rem;
    background: linear-gradient( 90deg, #4452f6 0%, #8d5fd2 100%);
}





/* qna */
.qna_wrap .box {
    overflow: hidden;
    border-radius: 1rem;
    margin: 1.5rem;
    background-color: #fff;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(95, 91, 91, 0.1);
    border: 1px solid #e1e1e1;
}
.qna_wrap .box:first-of-type {margin-top: 2.5rem;}
.qna_wrap .box span {display: block;}
.qna_wrap .box .ques {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.4;
    color: #d4daf0;
    padding: 1.8rem 4rem 1.8rem 1.5rem;
    background-color: #474f7a;
    font-family: 'EsaManru', sans-serif;
}
.qna_wrap .box .ans {
    padding: 1.5rem 1.5rem 3rem;
    /* display: none; */
}
.qna_wrap .box.on .ques {background: url(../img/qna-close.png) no-repeat calc(100% - 2rem) center / 1.5rem;}
.qna_wrap .box.on .ans {display: block;}
.pages {display: flex;justify-content: center;align-items: center;gap: 1rem;flex-wrap: wrap;margin: 3rem 0 3rem;}
.pages a {font-size: 1.4rem;font-weight: 300;color: #bababa;}








/* =========== sub =========== */
.sub {}
.sub .tabs {
    display: flex;
    margin: 2rem 0;
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
}
.sub .tabs .tab {
    width: 100%;
    height: 6rem;
    color: #9d9faf;
    font-weight: bold;
    font-size: 1.6rem;
    background-color: #fff;
    display: flex;justify-content: center;align-items: center;
}
.sub .tabs .tab.on {
    color: #fff;
    background: linear-gradient(60deg, #4352f6 0%, #845dd6 100%);
}
.sub .contents {}
.sub .contents h2 {
    color: #111;
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid #cacaca;
}
.sub .contents .content {
    border: 1px solid #cacaca;
    margin: 1.5rem;
    display: none;
    border-radius: 1rem;
}
.sub .contents .content.on {
    display: block;
}
.sub .contents .content pre {
    padding: 1.5rem;
}
.sub #calc_banner {
    margin-top: 1.5rem;
}

/* 240405 추가 ㅎㅇ */
main.qna_wrap {
    padding-top: 0;
}
.qna_inner {
    padding-top: 6rem;
}