* {
    --common-width : 650px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    background-color: #fefefe;
    max-width: var(--common-width);
    padding-top: var(--header-height);
}


/* ===== 헤더 ===== */
header {width: 100%;z-index: 100;background-color: #fff;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%);}
header h1 {
    color: #383838;
    line-height: 1.4;
    font-size: 1.4rem;
    margin-left: 1.5rem;
}
header h1 b {
    line-height: inherit;
    font-weight: 800;
    font-size: 1.8rem;
    color: inherit;
    display: block;
}
header > a {display: flex;justify-content: center;align-items: center;height: 100%;width: 6rem;}
header > a img {width: 2.5rem;height: 2.5rem;}

/* ======================================================================== */
section h2 {
    color: #383838;
    font-weight: 800;
    line-height: 1.4;
    font-size: 2rem;
}
section h3 {
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: 800;
    color: #20356f;
}
#home section {padding: 2.5rem 1.5rem 3rem;}
#home section img {width: 100%;}
#home section pre {
    border: 1px solid #ddd;
    border-radius: 1rem;
    padding: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #383838;
    margin: 1.5rem 0;
}
#home section ul li {margin-bottom: 1.6rem;}
#home section ul li a {
    padding: 1rem;
    color: #383838;
    line-height: 1.4;
    font-weight: 800;
    font-size: 1.6rem;
    border-radius: 1rem;
    display: flex;align-items: center;gap: 1rem;
}
#home section ul li:nth-of-type(1) a {background: #e8f2ff url(../img/btn-arrow.png) no-repeat calc(100% - 1.5rem) center / 1rem;}
#home section ul li:nth-of-type(2) a {background: #e8f8f8 url(../img/btn-arrow.png) no-repeat calc(100% - 1.5rem) center / 1rem;}
#home section ul li:nth-of-type(3) a {background: #f2ecf9 url(../img/btn-arrow.png) no-repeat calc(100% - 1.5rem) center / 1rem;}
#home section ul li:nth-of-type(3) {margin-bottom: 0;}
#home section ul li a img {width: 5rem;}
#home .line {background-color: #f4f4f4;height: 2rem;width: 100%;}





/* ======================================================================== */
#sub {min-height: 100vh;display: flex;flex-direction: column;justify-content: space-between;}
#sub section {margin: 2.5rem 1.5rem;}
#sub.bg {background-color: #f5f5f5;}
#sub .box {margin: 1.5rem 0;border-radius: 1rem;}
#sub .box img {width: 100%;}
#sub .box.white {padding: 3.5rem 1.5rem;background-color: #fff;}
#sub .box.gray {
    background-color: #f2f2f2;
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.4rem;
    color: #606060;
    margin-bottom: 2rem;
}
#sub .box.border {
    border: 1px solid #ccc;
    padding: 1.5rem;
    line-height: 1.4;
    font-size: 1.4rem;
    color: #616161;
    margin: 1rem 0 2rem;
}
/* ======================================================================== */
.pages {display: flex;justify-content: space-between;align-items: center;margin: 1.5rem;}
.pages .page {
    color: #fff;
    height: 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: .5rem;
    width: calc(50% - .5rem);
    background-color: #0c7eff;
    display: flex;justify-content: center;align-items: center;
}
.pages .page.gray {background-color: #ccc;}
.pages .prev {}
.pages .after {}
.pages .page.golink {
    width: 100%;
    border-radius: 1rem;
    background: #0c7eff url(../img/right.png) no-repeat calc(100% - 1.5rem) center / 1rem;
}
.imgbox {
    background: url(../img/bg.png) no-repeat center / cover;
    width: 100%;
    padding: 1.5rem;
    display: flex;align-items: center;
    height: 25rem;
}
.imgbox p {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}
.imgbox p b {
    line-height: inherit;
    font-weight: inherit;
    font-size: 2.4rem;
    color: inherit;
}




/* ======================================================================== */
.toggle {margin: 1.5rem 0;border-radius: 1rem;overflow: hidden;}
.toggle .ques {
    display: flex;
    font-size: 1.6rem;font-weight: bold;line-height: 1.4;color: #252525;
    background: url(../img/qna-down.png) no-repeat calc(100% - 2rem) center / 1.5rem, linear-gradient(80deg,#00aae3 0%, #00dff7 100%);
    padding: 1.8rem 1.5rem 1.8rem 1.5rem;
    color: #fff;
}
.toggle .ans {
    background-color: #f5f5f5;
    display: none;padding: 1.5rem 1.5rem 3rem;line-height: 1.6;font-size: 1.4rem;
    color: #30353a;
}
.toggle.on .ques {
    background: url(../img/qna-up.png) no-repeat calc(100% - 2rem) center / 1.5rem, linear-gradient(80deg,#00aae3 0%, #00dff7 100%);
}
.toggle.on .ans {display: block;}