* {
    --common-width : 650px; /* 최대넓이 */
    --header-height: 5.5rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
header {
    width: 100%;
    z-index: 100;
    padding: 0 .5rem 0 1.5rem;
    background-color: #fff;
    height: var(--header-height);
    max-width: var(--common-width);
    border-bottom: 1px solid #ffd0c6;
    display: flex;justify-content: space-between;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) / 2.8);
    display: block;
}
header .home {
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 1.5);
    background: url(../img/btn-home.png) no-repeat center / 45%;
}
header .prev {
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 1.5);
    background: url(../img/btn-back.png) no-repeat center / 45%;
}
header .dummy {
    height: var(--header-height);
    width: calc(var(--header-height) / 1.5);
}
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); */
    padding-bottom: 2rem;
}




/* ========== 홈 ========== */
.home h2, .sinyong h2, .news h2, .bank h2 {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.4;
    color: #5b606b;
}
.home h2 b {
    line-height: inherit;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fc6736;
}
.home h2 a {
    color: #fff;
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    padding: .7rem 1rem;
    border-radius: 10rem;
    background-color: #111;
}
.home section {padding: 2rem 1.5rem;}
.home section a {border-radius: 1rem;}
.home section a p {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #5b606b;
}
.home section a p b {
    line-height: inherit;
    font-size: 2.2rem;
    font-weight: 800;
    color: inherit;
    display: block;
}
.home section span {display: flex;align-items: center;justify-content: space-between;}
.home section span img {width: 22%;}




.home .section1 a {
    display: flex;justify-content: space-between;align-items: center;
    border-radius: 1rem;
    margin-top: 5rem;
    padding: 2.5rem 1.5rem;
    background-color: #f4f2f2;
}
.home .section1 a img {width: 30%;}
.home .section2 {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.5rem;}
.home .section2 a {
    display: flex;justify-content: space-between;
    background-color: #f4f2f2;
    padding: 1.5rem;
    height: 20rem;
    color: #fff;
}
.home .section2 a p {color: inherit;font-weight: normal;}
.home .section2 a p b {color: inherit;}
.home .section2 a:nth-of-type(1) {background: #4bbfa9 url(../img/codeB.png) no-repeat 85% 88% / 45%;}
.home .section2 a:nth-of-type(2) {background: #f98638 url(../img/codeC.png) no-repeat 85% 88% / 45%;}
.home .section2 a:nth-of-type(3) {background: #ef4f4f url(../img/codeD.png) no-repeat 85% 88% / 45%;}
.home .section2 a:nth-of-type(4) {background: #0c2d57 url(../img/codeE.png) no-repeat 85% 88% / 45%;}











.homenews {}
.homenews h2 {display: flex;justify-content: space-between;align-items: center;}
.home_news .swiper-wrapper {
    height: min-content;
}
.home_news .swiper-slide {
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    padding: 1.5rem;
    margin-bottom: 1.3rem;
    color: #000000;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .3);
    display: flex;gap: 1rem;
    min-height: 15rem;
}
.home_news .swiper-slide .left {width: 13rem;}
.home_news .swiper-slide .left img {
    width: 100%;height: 100%;
    object-fit: cover;
}
.home_news .swiper-slide .right {
    width: calc(100% - 14rem);
}
.home_news .swiper-slide .news_title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.4;
}
.home_news .swiper-slide .news_cont {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #444;
    margin-top: 1rem;
}





/* ========== sub ========== */
.sub {padding-right: 1.5rem;padding-left: 1.5rem;}
.sub p {font-size: 1.6rem;font-weight: 800;line-height: 1.4;color: #5b606b;margin-bottom: 1rem;}
.sub .colorA {color: #282e3f !important;}
.sub .colorB {color: #4bbfa9 !important;}
.sub .colorC {color: #ef4f4f !important;}
.sub .colorD {color: #ef4f4f !important;}
.sub .colorE {color: #f98638 !important;}
.sub pre {font-size: 1.4rem;line-height: 1.4;color: #5b606b;}
.sub pre b {line-height: 2;font-weight: 800;font-size: 1.6rem;color: inherit;}
.sub .title {display: flex;justify-content: space-between;align-items: center;margin: 2rem 0 4rem;}
.sub .title h2 {font-size: 1.4rem;font-weight: bold;line-height: 1.4;color: #5b606b;}
.sub .title h2 b {line-height: inherit;font-size: 2.2rem;font-weight: 900;color: inherit;display: block;}
.sub .title img {width: 25%;}
.sub .box {padding: 1.5rem;font-weight: bold;border: 1px solid #ccc;border-radius: 1rem;}
.sub .box:nth-of-type(1) {margin-top: 3rem;}
.sub > a {width: 100%;color: #fff;display: block;padding: 2rem 0;margin-top: 4rem;font-size: 1.6rem;font-weight: bold;text-align: center;border-radius: 1rem;background-color: #ef4f4f;}
.sub section {margin: 4rem 0;}





/* ========== section - sinyong ========== */
section.sinyong span {display: flex;gap: 1.5rem;}
section.sinyong span a {
    border-radius: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.4;
    padding: 1.5rem;
    color: #5b606b;
    height: 17rem;
    width: 100%;
}
section.sinyong span a:nth-of-type(1) {color: #d85903;background: #f9efe8 url(../img/btn-icon-7.png) no-repeat 85% 80% / 40%;}
section.sinyong span a:nth-of-type(2) {color: #092a55;background: #e9f0f4 url(../img/btn-icon-6.png) no-repeat 85% 80% / 40%;}





/* ========== page - sinyong ========== */
main.sinyong {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 3rem;
}
main.sinyong img {
    width: 100%;
    margin-top: 1.5rem;
}
main.sinyong pre {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #5b606b;
}
main.sinyong .box {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #f6eeea;
}
main.sinyong .box:first-of-type {
    margin-top: 2rem;
}
main.sinyong .box pre.codeA:nth-of-type(1) {
    color: #f98638;
    font-weight: 800;
    margin-bottom: .5rem;
}
main.sinyong .box pre.codeB:nth-of-type(1) {
    color: #0c2d57;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: .5rem;
}
.commonBtn {
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 4rem;
    background: #ddd url(../img/btn-arrow.png) no-repeat calc(100% - 1.5rem) center / 1rem;
}
main.sinyong a.codeA {background-color: #0c2d57;}
main.sinyong a.codeB {background-color: #f98638;}





/* ========== 뉴스 ========== */
.news h2 {margin: 3rem 1.5rem 1.5rem;}
.news a {margin: 1.5rem;display: flex;justify-content: space-between;gap: 1rem;border-radius: .5rem;height: 10rem;}
.news a span {width: 50%;display: flex;flex-direction: column;justify-content: space-between;}
.news a h3 {font-size: 1.6rem;font-weight: bold;line-height: 1.4;color: #2e3f49;margin-bottom: 1rem;}
.news a p {font-size: 1.2rem;line-height: 1.4;font-weight: 300;color: #6f829a;}
.news a img {display: block;width: 100%;height: 100%;object-fit: cover;}




/* ========== bank ========== */
.bank {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 3rem;
}
.bank > pre {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #585d68;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-radius: 1rem;
    background-color: #f4f4f4;
}
.bank .bank_box {
    display: flex;
    margin: 1.5rem 0;
    padding: 1.5rem 0;
    border-radius: 1rem;
    min-height: 10rem;
    border: 1px solid #a5a7aa;
    box-shadow: .2rem .2rem .3rem rgba(0, 0, 0, .1);
}
.bank .bank_box span {
    width: 100%;
    padding: 0 1.5rem;
    display: flex;flex-direction: column;justify-content: center;
}
.bank .bank_box span:nth-of-type(1) img {
    width: 3.5rem;
    display: block;
    margin: 0 auto;
}
.bank .bank_box span:nth-of-type(2) {
    border-left: 1px solid #e7eaee;
}
.bank .bank_box span p, .bank .bank_box span pre {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #5b606b;
}