* {
    --common-width : 1000px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    max-width: var(--common-width);
    padding-top: var(--header-height);
}
header {
    width: 100%;
    z-index: 100;
    position: fixed;
    left: 50%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    height: var(--header-height);
    max-width: var(--common-width);
    transform: translateX(-50%);
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
header h1 {
    color: #383838;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.6rem;
}
header .logo {
    height: calc(var(--header-height) / 1.8);
    width: fit-content;
    object-fit: contain;
    margin-left: 1.5rem;
}
header .plus img {width: 2rem;height: 2rem;object-fit: contain;}
header .prev {
    height: var(--header-height);
    width: calc(var(--header-height));
    background: url(../img/prev.png) no-repeat center / 50%;
}
header span {display: flex;align-items: center;}
header > a img {
    height: calc(var(--header-height) / 2);
    padding-right: 1.5rem;
}









/* ====== 뉴스 ====== */
.news h2 {
    margin: 4rem 2rem 2.5rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: #2b5fab;
}
.news_swiper {padding: 4rem 1.5rem 1.5rem !important;}
.news_swiper .news_box {}
.news_swiper .news_box .swiper-slide {
    padding: 3rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    height: 20rem;
    margin-bottom: 1.5rem;
    border: 1px solid #cacfd2;
    box-shadow: .2rem .2rem .2rem rgba(0, 0, 0, .1);
    border-radius: 1rem;
}
.news_swiper .news_box .swiper-slide > div {
    width: 50%;
    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.4;
    color: #2e3f49;
    margin-bottom: 1rem;
    word-break: break-all;
}
.news_swiper .news_box .swiper-slide p {
    word-break: break-all;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 300;
    color: #6f829a;
}
.news_swiper .news_box .swiper-slide p.date {
    /* color: #1c3f97;
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
    font-weight: bold; */
}
.news_swiper .news_box .swiper-slide img {
    width: 50%;
    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 {
    padding: 3rem 1.5rem 1.5rem;
}
.news_sub .inner h3 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #3a435c;
    margin-bottom: 1rem;
}
.news_sub p {font-size: 1.6rem;line-height: 1.4;color: #0680ee;padding-bottom:1rem;margin-bottom: 1rem;border-bottom: 1px solid #dcdcdc;font-weight: bold;}
.news_sub pre {font-size: 1.6rem;line-height: 1.4;color: #5a6772;margin-bottom: 3rem;}
.news_sub img {width: 100%;margin-bottom: 3rem;}
.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: #1889ef;width: 100%;}
.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;
    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.8rem 4rem 1.8rem 4rem;
}
.qna .box .ques::before {
    content: "Q. ";
    position: absolute;
    left: 1.5rem;top: 1.7rem;
    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.6rem;font-weight: 300;color: #bababa;}
.pages a.on {font-weight: 800;color: #504e4e;}




/* home */
#home .intro {
    padding: 2rem 1.5rem 8rem;
    background: url(../img/bell.png) no-repeat 98% 200% / auto 93%;
}
#home h2 {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.4;
    color: #292d31;
    margin: 1.5rem;
    display: flex;justify-content: space-between;align-items: center;
}
#home h2 a {
    line-height: inherit;
    font-weight: normal;
    font-size: 1.6rem;
    color: #999999;
}
#home .intro h2 {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.4;
    color: #292d31;
    margin: 0;
}
#home .intro p {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #4c5a66;
    margin-top: .5rem;
}
.home_swiper_wrap .home_swiper {padding: 0 1.5rem 2rem;}
.home_swiper .swiper-wrapper {
    height: min-content;
}
.home_swiper .swiper-wrapper .swiper-slide {
    border-radius: 1rem;
    padding: 2rem 1.3rem 1.3rem;
    box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .2);
    background-color: #fff;
    min-height:12rem;
    display: flex;flex-direction: column;justify-content: space-between;
}
.home_swiper .swiper-wrapper .swiper-slide p {
    font-size: 1.8rem;
    font-weight: bold;
    color: #404649;
    line-height: 1.4;
    display: flex;justify-content: space-between;
}
.home_swiper .swiper-wrapper .swiper-slide p img {
    width: 1.5rem;height: 1.5rem;object-fit: contain;
}
.home_swiper .swiper-wrapper .swiper-slide span {
    border: 1px solid #ccd1d5;
    border-radius: .5rem;
    padding: .5rem 1rem;
    width: fit-content;
    color: #8e9396;
    display: block;
    font-size: 1.6rem;
}
.home_swiper .swiper-wrapper .swiper-slide-active {
    background-color: #1889ef;
}
.home_swiper .swiper-wrapper .swiper-slide-active p {
    color: #fff;
}
.home_swiper .swiper-wrapper .swiper-slide-active p img {
    filter: brightness(100) grayscale(1);
}
.home_swiper .swiper-wrapper .swiper-slide-active span {
    border: 1px solid #fff;
    color: #fff;
}
.home_banners {
    margin: 1.5rem;
    display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.2rem;
}
.home_banners a {
    /* box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, .1); */
    border: 1px solid #ddd;
    border-radius: 1rem;
    padding: 1.5rem 1.2rem;
    display: block;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #2c2f33;
    min-height: 11rem;
}
.home_banners a:nth-of-type(1) {background: #fff url(../img/icon-1.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 3rem auto;}
.home_banners a:nth-of-type(2) {background: #fff url(../img/icon-2.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 2.5rem auto;}
.home_banners a:nth-of-type(3) {background: #fff url(../img/icon-3.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 3rem auto;}
.home_banners a:nth-of-type(4) {background: #fff url(../img/icon-4.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 3rem auto;}
.home_banners a:nth-of-type(5) {background: #fff url(../img/icon-5.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 3.2rem auto;}
.home_banners a:nth-of-type(6) {background: #fff url(../img/icon-6.png) no-repeat calc(100% - 1rem) calc(100% - 1rem) / 2.8rem auto;}



#favo {background-color: #f0f4f7;}
#favo h2 {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.4;
    color: #053253;
    margin: 3rem 1.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#favo a {
    box-shadow: .2rem .2rem .3rem rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 2rem 1.3rem;
    margin: 1.5rem;
    border-radius: .5rem;
    display: block;
}
#favo a span {
    border-radius: .5rem;
    padding: .6rem 1rem;
    text-align: center;
    color: #2f83c1;
    font-size: 1.4rem;
    display: block;
    width: fit-content;
    background-color: #f0f8ff;
}
#favo a h3 {
    margin: 1.5rem 0 2rem;
    color: #232323;
    font-weight: 800;
    font-size: 1.8rem;
}
#favo a p {
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    color: #1b8bef;
    font-size: 1.6rem;
    border: 1px solid #1b8bef;
}






/* sub */
#subA .box {border-radius: 1rem;overflow: hidden;margin: 1.5rem;box-shadow: .3rem .3rem .3rem rgba(0, 0, 0, .1);}
#subA .box .ques {font-size: 1.8rem;line-height: 1.4;color: #fff;padding: 1.6rem 3.5rem 1.6rem 1.5rem;background: #1889ef url(../img/qna_down.png) no-repeat calc(100% - 1.5rem) center / 1.3rem;}
#subA .box .ans {font-size: 1.6rem;line-height: 1.4;color: #4d5b67;padding: 1.7rem 1.5rem;display: none;}
#subA .box.on .ans {display: block;}

#subB {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
#subB h2 {
    margin: 2rem 0 1rem;
    font-weight: 900;
    color: #1085ee;
    line-height: 1.4;
    font-size: 2rem;
}
#subB pre {
    color: #5c6873;
    line-height: 1.4;
    font-size: 1.6rem;
}
#subB img {width: 100%;margin: 1.5rem 0;}
#subB div {
    border: 1px solid #dde1e4;
    background-color: #f7fafc;
    border-radius: 1rem;
    overflow: hidden;
    margin: 3rem 0;
}
#subB a {
    margin: 0 1.5rem;
    padding: 3rem .5rem 2.8rem;
    display: block;
    background: url(../img/sub-arrow.png) no-repeat 100% center / 1.5rem;
}
#subB a p {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #373737;
}
#subB a p:nth-of-type(1) {color: #00509f;font-weight: 800;font-size: 2rem;}
#subB a:nth-of-type(2) {border-top: 1px solid #c7cdd0;}






#subC {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
#subC h2 {
    margin: 2rem 0 1rem;
    font-weight: 900;
    color: #1085ee;
    line-height: 1.4;
    font-size: 2rem;
}
#subC h3 {
    margin: 2rem 0 0;
    font-weight: 900;
    color: #0a4b78;
    line-height: 1.4;
    font-size:1.8rem;
}
#subC pre {
    color: #5c6873;
    line-height: 1.4;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
#subC .subC_toggle {
    border-radius: 1rem;
    overflow: hidden;
    margin: 3rem 0 6rem;
    border: 1px solid #ccc;
}
#subC .subC_toggle .ques {
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    padding: 1rem;
    background: #89b3db url(../img/qna_down.png) no-repeat calc(100% - 1.5rem) center / 1.3rem;
}
#subC .subC_toggle.on .ques {
    background: #89b3db url(../img/qna_up.png) no-repeat calc(100% - 1.5rem) center / 1.3rem;
}
#subC .subC_toggle .ans {
    padding: 1.5rem;
    display: none;
}
#subC .subC_toggle.on .ans {
    display: block;
}





#subD {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
#subD h2 {
    margin: 2rem 0 1rem;
    font-weight: 900;
    color: #1085ee;
    line-height: 1.4;
    font-size: 2rem;
}
#subD h3 {
    margin: 1rem 0 0;
    font-weight: 900;
    color: #0a4b78;
    line-height: 1.4;
    font-size:1.8rem;
}
#subD pre {
    color: #5c6873;
    line-height: 1.4;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}


#subD .subD_toggle:first-of-type {border-top: 1px solid #a2aeba;}
#subD .subD_toggle:last-of-type {margin-bottom: 4rem;}
#subD .subD_toggle .ques {
    font-size: 1.6rem;
    color: #27314c;
    font-weight: 800;
    padding: 1.3rem 4rem 1.3rem 1rem;
    line-height: 1.4;
    background: url(../img/down.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;
    border-bottom: 1px solid #a2aeba;
}
#subD .subD_toggle.on .ques {
    background: url(../img/top.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;
}
#subD .subD_toggle .ans {
    padding: 1.5rem;
    display: none;
    margin-bottom: 0;
}
#subD .subD_toggle .ans img {width: 100%;margin-top: 2rem;}
#subD .subD_toggle.on .ans {
    display: block;
    border-bottom: 1px solid #a2aeba;
}



#subE {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
#subE h2 {
    margin: 2rem 0 1rem;
    font-weight: 900;
    color: #1085ee;
    line-height: 1.4;
    font-size: 2rem;
}
#subE .subE_toggle {
    border-radius: 1rem;
    overflow: hidden;
    margin: 1.5rem 0;
}
#subE .subE_toggle .ques {
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    padding: 1rem;
    background: #89b3db url(../img/qna_down.png) no-repeat calc(100% - 1.5rem) center / 1.3rem;
}
#subE .subE_toggle.on .ques {
    background: #89b3db url(../img/qna_up.png) no-repeat calc(100% - 1.5rem) center / 1.3rem;
}
#subE .subE_toggle .ans {
    padding: 1.5rem;
    display: none;
    color: #5c6873;
    line-height: 1.4;
    border: 1px solid #afbcc8;
    border-top: none;
    font-size: 1.6rem;
    border-radius: 0 0 1rem 1rem;
}
#subE .subE_toggle.on .ans {
    display: block;
}









#subF {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
#subF h2 {
    margin: 2rem 0 1rem;
    font-weight: 900;
    color: #002d4e;
    line-height: 1.4;
    font-size: 2rem;
}
#subF pre {
    color: #5c6873;
    line-height: 1.4;
    font-size: 1.6rem;
}
#subF div {
    margin: 2rem 0;
    border-radius: 1rem;
    border: 1px solid #c5cbcf;
}
#subF div h3 {
    font-weight: 800;
    color: #002d4e;
    line-height: 1.4;
    font-size: 1.8rem;
    padding: 1.7rem 1.5rem;
    border-bottom: 1px solid #c5cbcf;
}
#subF div pre {
    padding: 1.5rem;
}




#subG {}
#subG section {}
#subG .desc {
    font-size: 1.4rem;
    color: #d2d2d2;
    line-height: 1.4;
    margin: 0 1.5rem;
}
#subG h2 {
    font-weight: 900;
    color: #002d4e;
    line-height: 1.4;
    font-size: 2rem;
    margin: 2rem 1.5rem 1rem;
}
#subG .subc_swiper {
    height: min-content;
    padding: 1rem 1.5rem 1.5rem;
}
#subG .subc_swiper .swiper-wrapper {
}
#subG .subc_swiper .swiper-wrapper .swiper-slide {
    border: 1px solid #d3d3d3;
    border-radius: 10rem;
    padding: 1rem 1.5rem;
    width: fit-content;
    font-size: 1.6rem;
    background-color: #f9f9f9;
}
#subG .subc_swiper .swiper-wrapper .swiper-slide.on {
    background-color: #f2f6f9;
    color: #3769e8;
    border: 1px solid #6c90ed;
}
#subG pre {}
#subG .graybox {
    background-color: #f2f6f9;
    color: #4a5863;
    padding: 1.5rem;
    border-radius: .5rem;
    line-height: 1.4;
    font-size: 1.6rem;
    margin: 1.5rem;
}
#subG img {width: calc(100% - 3rem);margin: 0 auto;display: block;}




