* {
    --common-width : 580px; /* 최대넓이 */
    --header-height: 5.5rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    max-width: var(--common-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
main section {
    padding: 2rem;
}
main section h2 {
    line-height: 1.4;
    font-weight: 800;
    font-size: 1.8rem;
}
main section h3 {
    color: #8b8b8b;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: .5rem;
}
main section h4 {
    color: #fff;
    display: block;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.4rem;
    width: fit-content;
    padding: .4rem 1.5rem;
    border-radius: .4rem;
    background-color: #0c356a;
}
main section pre {
    line-height: 1.4;
    font-size: 1.4rem;
    color: #636363;
}
main section pre b {
    line-height: inherit;
    font-weight: 800;
    word-break: break-all;
    font-size: inherit;
    color: inherit;
}

/* ===== 헤더 ===== */
header {width: 100%;z-index: 100;background: #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%);border-bottom: 1px solid #b8d8ed;}
header h1 {font-size: 1.8rem;text-align: center;margin: 0 1.5rem;}
header h1 img {height: calc(var(--header-height) / 2.5);display: block;}
header .prev {
    cursor: pointer;
    width: var(--header-height);
    height: var(--header-height);
    background: url(../img/prev.png) no-repeat center / 45%;
}


/* ===== 하단 ===== */
footer {
    position: fixed;
    left: 50%;bottom: 0;
    height:var(--footer-height);
    width: 100%;
    z-index: 1000;
    border-radius: 1rem 1rem 0 0;
    transform: translateX(-50%);
    max-width: var(--common-width);
    background-color: #fff;
    box-shadow: 0 -.2rem .4rem rgba(0, 0, 0, .1);
}
footer ul {
    display: flex;justify-content: space-between;align-items: center;
    height: 100%;width: 100%;
}
footer li {
    height: 100%;width: 100%;
}
footer a {
    color: #b7b7b7;
    font-size: 1.2rem;
    position: relative;
    text-align: center;
    padding-top: 3rem;
    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: #21375e;
    font-weight: 800;
}
footer a::after {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    left: 50%;top: 1rem;
    
    transform: translate(-50%, 0);
}
footer li:nth-of-type(1) a:after {background: url(../img/bottombar-icon-1-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a:after {background: url(../img/bottombar-icon-2-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a:after {background: url(../img/bottombar-icon-3-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a:after {background: url(../img/bottombar-icon-4-4.png) no-repeat center / contain;}
footer li:nth-of-type(5) a:after {background: url(../img/bottombar-icon-5-5.png) no-repeat center / contain;}
footer li:nth-of-type(1) a.on::after {background: url(../img/bottombar-icon-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a.on::after {background: url(../img/bottombar-icon-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a.on::after {background: url(../img/bottombar-icon-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a.on::after {background: url(../img/bottombar-icon-4.png) no-repeat center / contain;}
footer li:nth-of-type(5) a.on::after {background: url(../img/bottombar-icon-5.png) no-repeat center / contain;}


/* === 홈 === */
#home h2 {
    width: fit-content;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #ccc;
}
#home .intro {
    margin: 1.5rem;
    padding: 1.5rem;
    border-radius: .5rem;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .2);
}
#home .intro a {
    color: #fff;
    display: block;
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
    width: fit-content;
    padding: .6rem 2rem;
    border-radius: .5rem;
    margin: 1rem 0 0 auto;
    background-color: #0174be;
}
#home .banners {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 1rem;
}
#home .banners a {
    text-align: center;
    
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #303335;

    margin-bottom: 3rem;
}
#home .banners a .img_wrap {
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .2);
    background-color: #ccc;
    height: 9rem;width: 9rem;
    border-radius: 10rem;
    margin: 0 auto 1rem;
    display: block;
    padding: 1.5rem;
}
#home .banners a:nth-of-type(1) .img_wrap {
    background: #0c356a url(../img/btn-icon-1.png) no-repeat center / 45%;
}
#home .banners a:nth-of-type(2) .img_wrap {
    background: #ffc436 url(../img/btn-icon-2.png) no-repeat center / 50%;
}
#home .banners a:nth-of-type(3) .img_wrap {
    background: #fe7a36 url(../img/btn-icon-3.png) no-repeat center / 40%;
}
#home .banners a:nth-of-type(4) .img_wrap {
    background: #0174be url(../img/btn-icon-4.png) no-repeat center / 50%;
}


/* === 서브페이지 === */
#sub {}
#sub h2 {
    margin-bottom: 1rem;
}
#sub h3 {}
#sub h4 {
    margin-bottom: .5rem;
}
#sub pre {
    margin-bottom: 2rem;
}
#sub img {
    width: 100%;
    margin-bottom: 4rem;
}
#sub a {
    margin:2rem 0;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: #0174be;
    display: flex;justify-content: center;align-items: center;gap: 1rem;
}
#sub a img {
    margin:0;
    width: .8rem;
}
#sub .tabs {
    display: grid;grid-template-columns: repeat(3, 1fr);
    width: 100%;
}
#sub .tabs .tab {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #afafaf;
    padding: .5rem;
    text-align: center;
    word-break: break-all;
    border: 1px solid #c2dbf2;
    border-right: none;
    border-bottom: none;
    background-color: #fff;
}
#sub .tabs .tab:nth-of-type(3n) {
    border-right: 1px solid #c2dbf2;
}
#sub .tabs .tab:nth-of-type(n+4) {
    border-bottom: 1px solid #c2dbf2;
}
#sub .tabs .tab.on {
    color: #4b5155;
    font-weight: 800;
    background-color: #c2dbf2;
}