* {
    --common-width : 1024px; /* 최대넓이 */
    --header-height: 5.5rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
    --modal-slide-height1: 350px; /* 아래에서 위로 올라오는 모달의 높이 */
}
header {
    width: 100%;
    z-index: 120;
    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 {
    font-size: 1.8rem;
    text-align: center;
}
header h1 img {
    height: calc(var(--header-height) / 1.2);
    margin-left: 1.5rem;
    display: block;
}
header .logo {
    display: flex;justify-content: center;align-items: center; 
    font-weight: 800;
    font-size: 1.4rem;
    border-radius: 10rem;
    border: 2px solid #111;
    color: #111;
    width: 10rem;height: 3rem;
}
header .open {
    background: url(../img/ham.png) no-repeat center / 50%;
    width: var(--header-height);
    height: var(--header-height);
}



/* 햄버거 기능 */
nav .inner {
    background-color: #fff;
    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 {
    height: var(--header-height);
    display: flex;align-items: center;justify-content:end;
}
nav .nav_header .close {
    opacity: .5;
    cursor: pointer;
    width: var(--header-height);
    height: var(--header-height);
    background:url('../img/close.png') no-repeat center / 40%;
}
nav .content {
    width: 100%;height: calc(100% - var(--header-height));
}
nav .content li {
    display: flex;align-items: center;
    border-bottom: 1px solid #d5d5d5;
}
nav .content li.on {background-color: #eaac4e;border-bottom: none;}
nav .content li.on a {color: #fff;}
nav .content li a {
    background: inherit;
    display: flex;align-items: center;
    height: 100%;width: 100%;
    line-height: 1.4;
    font-weight: 800;
    padding: 0 2rem;
    height: 5rem;width: 100%;
    font-size: 1.8rem;
    color: #4d4d6f;
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #fff;
    max-width: var(--common-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
.common_h2 {
    margin: 2rem 1.5rem;
    font-size: 2.2rem;
    font-weight: 800;
    color: #e9a540;
    line-height: 1.2;
}
.common_pre {
    color: #212221;
    padding: 1.5rem;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.6rem;
    border-radius: 1rem;
    word-break: break-all;
    margin: 2rem 1.5rem 4rem;
    border: 1px solid #ebebeb;
    background-color: #f9f9f9;
}
.common_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    gap: 1rem;
    border-radius: .8rem;
    padding: 1.8rem 1.7rem;
    color: #fff;
    background-color: #eaac4e;
    width: calc(100% - 3rem);
    margin: 1.5rem;
    font-weight: bold;
}


/* ========================================= */
#home {}
#home .intro {
    margin: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, .3);
}
#home .intro span {
    display: flex;justify-content: space-between;
}
#home .intro span img {
    display: block;
    width: 50%;
    transform: translateY(-2rem);
}
#home .intro span h2 {
    margin: 2rem 1.5rem;
    font-size: 2.2rem;
    font-family: 'Cafe24Ssurround', sans-serif;
    line-height: 1.2;
    color: #999999;
}
#home .intro span h2 b {
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: #11113d;
}
#home .intro p {
    margin-left: 1.5rem;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #494949;
}
#home .intro a {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    padding: 1.5rem;
}
#home .intro a img {
    width: 3rem;
}
#home .banners_big {
    display: flex;flex-wrap: wrap;gap: 1.5rem;
    margin: 1.5rem;
}
#home .banners_big a {
    width: calc((100% - 1.5rem) / 2);
    border-radius: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 1.5rem;
    display: block;
    color: #fff;
    background-blend-mode: overlay;
}
#home .banners_big a img {
    width: 4rem;
    height: 4rem;
    display: block;
    object-fit: contain;
    margin-bottom: 1.3rem;
}
#home .banners_big a:nth-of-type(1) {
    background: linear-gradient(to bottom, #eb8e82, #eeb5ae), 
    url('../img/btn-arrow-1.png') no-repeat calc(100% - 1.5rem) 1.5rem / 3rem;
}
#home .banners_big a:nth-of-type(2) {
    background: linear-gradient(to bottom, #6b7ad9, #9ea9e2), 
    url('../img/btn-arrow-2.png') no-repeat calc(100% - 1.5rem) 1.5rem / 3rem;
}
#home .banners_big a:nth-of-type(3) {
    background: linear-gradient(to bottom, #f5b724, #edcd8f), 
    url('../img/btn-arrow-3.png') no-repeat calc(100% - 1.5rem) 1.5rem / 3rem;
}
#home .banners_big a:nth-of-type(4) {
    background: linear-gradient(to bottom, #9acf59, #c5e59a), 
    url('../img/btn-arrow-4.png') no-repeat calc(100% - 1.5rem) 1.5rem / 3rem;
}
#home .banners_small {
    margin: 1.5rem;
    display: flex;justify-content: space-between;gap: 1rem;
}
#home .banners_small a {
    display: flex;justify-content: center;align-items: center;
    width: 100%;
    height: 8rem;
    color: #5d5d5d;
    font-weight: bold;
    font-size: 1.6rem;
    border-radius: 1rem;
    border: 1px solid #d1d1d1;
    background-color: #f2f2f2;
}
#home .qna {}
#home .qna span {
    display: flex;align-items: center;justify-content: space-between;
    padding: 1.5rem 0;
    margin: 0 1.5rem;
    border-bottom: 1px solid #ccc;
}
#home .qna span h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #3e2e1e;
}
#home .qna span a {
    font-size: 1.6rem;
    color: #b5b5b5;
    display: flex;align-items: center;gap: 1rem;
}
#home .qna span a img {
    width: .8rem;
}
#home .qna p {
    margin: 1.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 2rem 1rem;
    border-radius: 1rem;
    border: 1px solid #ccc;
}






/* ===== center ===== */
#center {}
#center form {
    display: flex;justify-content: space-between;align-items: center;
    gap: 1rem;
    margin: 0 1.5rem;
}
#center form input[type=text]::placeholder {
    color: #d7d8d6;
}
#center form input[type=text] {
    width: 100%;
    line-height: 1.4;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    border-radius: 10rem;
    border: 2px solid #d7d8d6;
    height: 4rem;display: flex;align-items: center;
}
#center form input[type=submit] {
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 10rem;
    padding: .5rem 1.5rem;
    border: 2px solid #d7d8d6;
    background-color: #d7d8d6;
    height: 4rem;display: flex;align-items: center;
}
#center .content {}
#center .content .box {
    margin: 1.5rem;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #d0d0d0;
    background-color: #f9f9f9;
}
#center .content .box h3 {
    font-weight: 800;
    font-size: 2rem;
    color: #141440;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #d0d0d0;
}
#center .content .box p {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #181918;
}


/* ===== tabs ===== */
#tabs {}
#tabs .tabs {
    display: flex;
    margin: 0 1.5rem;
    border: 1px solid #f3f3f3;
    border-bottom: 2px solid #ffc737;
}
#tabs .tabs .tab {
    font-size: 1.6rem;
    color: #aeaeae;
    height: 6rem;
    display: flex;justify-content: center;align-items: center;
    width: calc(100% / 3);
    border-right: 1px solid #f3f3f3;
}
#tabs .tabs .tab:last-of-type {border-right: none;}
#tabs .tabs .tab.on {
    font-weight: 800;
    color: #0a0a37;
}
#tabs pre {
    margin-bottom: 2rem;
}
#tabs .con1 {width: 100%;padding: 0 1.5rem 2rem;}



/* ===== docs ===== */
#docs {}
#docs ul {margin-bottom:8rem;}
#docs ul li {margin: 4rem 1.5rem;}
#docs ul li a {
    font-size: 1.8rem;
    font-weight: 800;
    color: #11113d;
    padding-left: 10rem;
    height: 6rem;
    position: relative;
    border-radius: 10rem 3rem 3rem 10rem;
    border: 1px solid #f2f2f2;
    display: flex;align-items: center;
    background: url(../img/btn-gray.png) no-repeat calc(100% - 1.5rem) center / 3rem;
}
#docs ul li a::before {
    content: "";
    position: absolute;
    left: 0;top: 50%;transform: translate(0, -50%);
    border-radius: 100%;
    width: 8rem;height: 8rem;
    box-shadow: .2rem .2rem 0.8rem -.1rem rgba(0, 0, 0, .2);
}
#docs ul li:nth-of-type(1) a::before {background:url(../img/sub-icon-1.png) no-repeat center / contain;}
#docs ul li:nth-of-type(2) a::before {background:url(../img/sub-icon-2.png) no-repeat center / contain;}
#docs ul li:nth-of-type(3) a::before {background:url(../img/sub-icon-3.png) no-repeat center / contain;}
#docs ul li:nth-of-type(4) a::before {background:url(../img/sub-icon-4.png) no-repeat center / contain;}










/* ====== 뉴스 ====== */
.news h2 {}
.news_swiper {margin: 1.5rem;}
.news_swiper .news_box {}
.news_swiper .news_box .swiper-slide {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    height: 15rem;
    margin-bottom: 1.5rem;
    border: 1px solid #cfcfcf;
    border-radius: 1rem;
}
.news_swiper .news_box .swiper-slide > div {
    width: 60%;
    display: flex;flex-direction: column;justify-content: space-between;
}
.news_swiper .news_box .swiper-slide h3 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #7c7c7c;
    word-break: break-all;
}
.news_swiper .news_box .swiper-slide p {
    word-break: break-all;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 300;
    color: #6f829a;
}
.news_swiper .news_box .swiper-slide p.date {
    text-align: right;
    color: #ddd;
}
.news_swiper .news_box .swiper-slide img {
    width: 40%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: .5rem;
}
.swiper-pagination {
    left: 50% !important;
    bottom: 2.5rem !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
}
.swiper-pagination-bullet {
    background-color: #111 !important;
}
.swiper-pagination-bullet-active {
}
.swiper-button-next:after, .swiper-button-prev:after {opacity: 0;}
.swiper-button-prev {background: url(../img/left1.png) no-repeat center / 0.9rem;}
.swiper-button-next {background: url(../img/right1.png) no-repeat center / 0.9rem;}



/* ====== 뉴스서브 ====== */
.news_sub {}
.news_sub h2 {
    margin: 4rem 2rem 2.5rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: #2b5fab;
}
.news_sub .inner {
    margin: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #cfcfcf;
    padding: 1.5rem;
}
.news_sub .inner h3 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #3a435c;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.news_sub p {font-size: 1.6rem;line-height: 1.4;color: #ccc;margin-top: 1rem;}
.news_sub pre {font-size: 1.6rem;line-height: 1.4;color: #5a6772;}
.news_sub img {width: 100%;margin-bottom: 1.5rem;}
.news_sub a {display: flex;justify-content: center;align-items: center;font-size: 1.6rem;gap: 1rem;margin: 0 auto;border-radius: .8rem;padding: 1.8rem 1.7rem;width: fit-content;color: #fff;background-color: #eaac4e;width: calc(100% - 3rem);margin: 1.5rem;font-weight: bold;}
.news_sub a img {width: 1rem;filter: brightness(2);display: block;margin-bottom: 0;}






/* ====== QnA ====== */
.qna .tabs {
    display: flex;gap: 1rem;
    margin: 0 1.5rem;
}
.qna .tabs a {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2b5fab;
    border-radius: .8rem;
    text-align: center;
    min-width: 10rem;
    padding: .8rem 1rem;
    background-color: #dbe4f1;
}
.qna .tabs a.on {
    color: #fff;
    background-color: #00509f;
}
.qna .box {
    background-color: #fff;
    border: 1px solid #c4cace;
    border-radius: 1rem;
    margin: 1.5rem;
    display: block;
    border-bottom: 1px solid #c4c4c4;
    /* box-shadow: .2rem .2rem .2rem rgba(0, 0, 0, .1); */
}
.qna .box:first-of-type {margin-top: 2.5rem;}
.qna .box span {display: block;}
.qna .box .ques {
    position: relative;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    color: #023051;
    background: url(../img/bl-down-arrow.png) no-repeat calc(100% - 2rem) center / 1.5rem;
    padding: 1.4rem 1.5rem 1.4rem 4rem;
}
.qna .box .ques::before {
    content: "Q. ";
    position: absolute;
    left: 1.5rem;top: 1.4rem;
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
.qna .box .ans {
    position: relative;
    display: none;
    padding: 1.5rem 2rem 3rem 2rem;
    line-height: 1.6;
    font-size: 1.6rem;
    color: #5c6974;
    /* border-top: 1px solid #dfe2e4; */
}
.qna .box.on .ques {
    background: url(../img/bl-up-arrow.png) no-repeat calc(100% - 2rem) center / 1.5rem;}
.qna .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.8rem;font-weight: 300;color: #bababa;}
.pages a.on {font-weight: 800;color: #504e4e;font-size: 2.2rem;}