* {
    --common-width : 1024px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #fafcff;
    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: #fafcff;}
header.color {background-color: #97a9c5;}
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;margin: 0 1.5rem;}
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) / 1.3);
    background: url(../img/prev.png) no-repeat center / 2rem;
}
header .open {
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 1.3);
    background: url(../img/ham.png) no-repeat center / 2rem;
}
header .dummy {
    height: var(--header-height);
    width: calc(var(--header-height) / 2);
}
header a img {
    height: calc(var(--header-height) / 3);
    width: fit-content;
    object-fit: contain;
    margin: 0 1.5rem;
}
header span {
    display: flex;align-items: center;
}
header.home {
    background-color: #427ff6;
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
}

.bannerImg {
    width: 100%;
    padding: 1.5rem 0;
}
.bannerImg a {
    width: 100%;
}
.bannerImg a img {
    width: 100%;
}

footer {
    width: 100%;
    z-index: 100;
    position: fixed;
    left: 50%;bottom: 0;
    background-color: #fafcff;
    height:var(--footer-height);
    transform: translateX(-50%);
    max-width: var(--common-width);
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3);
}
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: 3.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: 3.5rem;height: 2.8rem;
}
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;}




/* 햄버거 기능 */
nav .inner {
    background-color: #3c68d0;
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);
    overflow-y: scroll;
    position:fixed;
    z-index: 1000;
    right:-100%;
    height:100%;
    width:70%;
    top:0;
}
nav .outer {
    z-index: 999;
    display: none;
    position: fixed;
    left: 0;top: 0;width: 100%;height: 100%;
    background-color: rgba(0, 0, 0, .3);
}
nav.on .inner {right: 0;}
nav.on .outer {display: block;}
nav .nav_header {
    position: relative;
    height: var(--header-height);
    display: flex;align-items: center;justify-content:space-between;
}
nav .nav_header::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: 1px;
    background-color: #fff;
}
nav .nav_header img {
    height: calc(var(--header-height) / 3);
    width: fit-content;
    object-fit: contain;
    margin: 0 1.5rem;
}
nav .nav_header .close {
    opacity: .5;
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 1.3);
    background:url('../img/close.png') no-repeat center / 40%;
}
nav .content {
    width: 100%;height: calc(100% - var(--header-height));
}
nav .content p {
    color: #fff;
    line-height: 1.4;
    font-weight: 900;
    font-size: 1.8rem;
    margin: 2rem 1.5rem 1.5rem;
}
nav .content p:nth-of-type(2) {margin-top: 3rem;}
nav .content li {
    display: flex;align-items: center;
    margin: 0 1.5rem;
}
nav .content li.on a {background-color: #fff;border-bottom: none;font-weight: 800;}
nav .content li.on a {color: #3c68d0;}
nav .content li a {
    padding: 0 1.5rem;
    color: #fff;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.6rem;
    background: inherit;
    border-radius: 1rem;
    height: 5rem;width: 100%;
    display: flex;align-items: center;justify-content: space-between;
}
nav .content li a img {width: 1rem;}









/* =================================================== */
.common_h2 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #424242;
}
.common_pre {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #424242;
    margin: 1rem 0 3rem;
}
section {margin: 1.5rem;}
#home .intro {
    background-color: #f5f9ff;
    border: 1px solid #ddd;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}
#home .intro h3 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #424242;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid #6c6d6e;
}
#home .intro pre {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #21405a;
}
#home .banners {
    display: grid;gap: 1rem;margin: 1.5rem 0 3rem;
}
#home .banners a {
    color: #fff;
    font-size: 1.8rem;
    border-radius: 1rem;
    min-height: 6rem;
    text-align: center;
    line-height: 1.2;
    display: flex;align-items: center;justify-content: center;gap: 
    1rem;
}
#home .banners a img {
    object-fit: contain;
    width: 2rem;height: 2rem;
}
#home .banners1 a:nth-of-type(1) {
    background-color: #3c68d0;
    grid-row: 1;
    grid-column: 1;
}
#home .banners1 a:nth-of-type(2) {
    background-color: #22415b;
    grid-row: 1;
    grid-column: 2;
}
#home .banners1 a:nth-of-type(3) {
    background-color: #4d4d4d;
    grid-column: span 2;
}
#home .banners2 {
    grid-template-columns: repeat(2, 1fr);
}
#home .banners2 a:nth-of-type(1) {background-color: #39c690;}
#home .banners2 a:nth-of-type(2) {background-color: #ed974a;}
#home .gray {
    padding: 3rem 1rem;
    border-radius: 1rem;
    background-color: #f4f4f4;
}
#home .gray h3 {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #122036;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid #434343;
}
#home .gray p {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #122036;
}
#home .gray pre {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #122036;
}
#home .gray pre:first-of-type {margin-bottom: 2rem;}




/* =================================================== */
#sub {}
#sub ul {
    margin-top: 2rem;
    display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;
}
#sub ul li {
    height: 5rem;
    color: #666666;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    border-radius: 1rem;
    border: 1px solid #818181;
    display: flex;justify-content: center;align-items: center;
}
#sub .banners {margin-top: 5rem;}
#sub .banners a {
    border-radius: 1rem;
    text-align: center;
    font-size: 1.8rem;
    padding: 1.8rem;
    display: block;
    margin: 1rem 0;
    color: #fff;
    width: 100%;
}
#sub .banners a:nth-of-type(1) {background-color: #3c68d0;}
#sub .banners a:nth-of-type(2) {background-color: #4d4d4d;}
#sub .sub4img {
    width: 100%;
    margin: 0 auto;
    display: block;
    margin-top: 2rem;
}
#sub .warning {
    display: block;
    padding: 1.5rem;
    color: #3c68d0;
    margin-top: 3rem;
    font-size: 1.6rem;
    text-align: center;
    border-radius: 1rem;
    transform: translateY(-1.5rem);
    border: 1px solid #bdbdbd;
}




/* =================================================== */
.notoggle:first-of-type {margin-top: 2rem;}
.toggle, .notoggle {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid #c8cacc;
}
.toggle .ques, .notoggle .ques {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #10314d;
    display: block;
    background: #f5f9ff url(../img/toggle-open.png) no-repeat calc(100% - 2rem) center / 1.5rem;
    padding: 1.5rem 4rem 1.5rem 1.5rem;
}
.notoggle .ques {
    background: #f5f9ff;
}
.toggle .ans {
    display: none;
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.6rem;
    color: #484659;
    border-top: 1px solid #c8cacc;
}
.toggle .ans b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
}
.toggle .ans b.block {display: block;}
.toggle .ans b.block:last-of-type {margin-top: 3rem;}
.toggle.on .ques {background: #f5f9ff url(../img/toggle-close.png) no-repeat calc(100% - 2rem) center / 1.5rem;}
.toggle.on .ans {display: block;}

#selector {}
#selector select {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #10314d;
    display: block;
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    background: #f5f9ff url(../img/toggle-open.png) no-repeat calc(100% - 2rem) center / 1.5rem;
    
    overflow: hidden;
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
    border: 1px solid #c8cacc;
}
#selector select option {
    font-size: 1.6rem;
    color: #10314d;
}

.ans_otherdesign {
    margin-top: 4rem;
    display: block;
}
.ans_otherdesign span {
    background-color: #f2f2f2;
    border-radius: 1rem;
    padding: 2rem 1rem;
    margin: 1.5rem 0;
    display: block;
}
.ans_otherdesign h3 {
    margin-bottom: .5rem;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #2d5dcd;
}
.ans_otherdesign pre {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #10314d;
}
.ans_otherdesign b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: inherit;
}