@charset "utf-8";

.wrapper {max-width: 1420px; width: 100%; padding: 0 1.25rem; margin: 0 auto;}

@media (max-width: 1023px) {
    html, body {font-size: 92%;}
}

@media (max-width: 500px) {
    html, body {font-size: 88%;}
}


/* 헤더 */
header {width: 100%; position: sticky; top: 0; background: #fff; z-index: 9999; transition: top 0.2s ease-in-out;}
header.shadow {box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);}
header.open::before {content: ""; z-index: 9998; position: fixed; left: 0; top: 134px; width: 100vw; height: calc(100vh - 134px); background: rgba(0,0,0,.3);}

header .hd_top {width: 100%; padding-top: 10px; display: flex; justify-content: flex-end;}
header .util {display: flex; align-items: center; gap: 10px;}
header .util .zoom {display: flex; align-items: center; gap: 10px; padding: 7px 15px; border: 1px solid #E6E6E6; border-radius: 50px; font-size: .8125rem;}
header .util .zoom button {font-size: 11px; text-align: center;}
header .util .zoom .minus {display: block; background: #F2F3F5 url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.37305 3.5H8.37305' stroke='%23606060' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat; width: 18px; height: 18px; border-radius: 20px;}
header .util .zoom .plus {display: block; background: #F2F3F5 url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.88806 1L4.87891 8' stroke='%23606060' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.37305 4.5H8.37305' stroke='%23606060' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat; width: 18px; height: 18px; border-radius: 20px;}
header .util li a {font-size: .8125rem; padding: 7px 15px 7px 30px; border: 1px solid #E6E6E6; border-radius: 50px; position: relative; transition: .3s;}
header .util > li > a:hover {background: #f7f7f7;}
header .util li a::before {content: ""; width: 12px; height: 12px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
header .util .login a::before {background:  url(/images/icon/ico_login_b.svg) center no-repeat;}
header .util .join a::before {background:  url(/images/icon/ico_join_b.svg) center no-repeat;}
header .util .logout a::before {background:  url(/images/icon/ico_logout_b.svg) center no-repeat;}
header .util .mypage > a::before {background:  url(/images/icon/ico_mypage_b.svg) center no-repeat;}
header .util .admin a::before {background:  url(/images/icon/ico_admin_b.svg) center no-repeat;}

.mypage {position: relative;}
.mypage > a {position: relative; padding-right: 25px!important;}
.mypage > a::after {content: ""; background: url(/images/icon/ico_arrow_b.svg) center no-repeat; background-size: 55%; width: 12px; height: 8px; position: absolute; right: 10px; top: 11px; transform: rotate(0);}
.mypage > ul {width: 100%; position: absolute; top: 145%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 5px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); border: 1px solid #ebebeb; display: none; transition: .3s; z-index: 2; padding: 0 .5rem;}
.mypage > ul li {padding: .5rem 0;}
.mypage > ul li + li {border-top: 1px dashed #bbb;}
.mypage > ul li a {display: block; font-size: .8125rem; border: none; text-align: center; padding: 0!important;}
.mypage > ul li a:hover {color: #155EE8;}
.mypage.on > a {background: #f7f7f7;}
.mypage.on > ul {display: block;}

header .hd_bottom {width: 100%; height: 90px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
header .hd_logo {display: block; background: url(/images/layout/logo.png) left center no-repeat; background-size: 100%; width: 19%; height: 100%; transition: .3s;}
header .hd_logo a {display: block; width: 100%; height: 100%;}
header .gnb {width: 62%; height: 100%;}
header .gnb .depth01 {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
header .gnb .depth01 > li {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: .3s;}
header .gnb .depth01 > li > a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.125rem; font-weight: 600; text-align: center; position: relative; transition: .3s;}
header .gnb .depth01 > li > a::before {content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; width: 0; height: 3px; background-color: #155EE8; transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: translate3d(0, 0, 0);}
header .gnb .depth01 > li:hover > a::before {width: 100%; left: 0; right: 0;}
header .gnb .depth01 > li .depth02 {z-index: 9999; position: fixed; top: 134px; left: 50%; transform: translateX(-50%); width: 100vw; background: #fff; border-top: 1px solid #ebebeb; transition: max-height 0.4s ease-out;}
header .gnb .depth01 > li .depth02 .wrapper {display: flex;}
header .gnb .depth01 > li .depth02 .wrapper .tit {width: 24%; padding: 30px 0 150px 20px; line-height: 1.5; position: relative;}
header .gnb .depth01 > li .depth02 .wrapper .tit::before {content: ""; background: #F2F3F5; width: 1000%; height: 100%; position: absolute; right: 0; top: 0; z-index: -2;}
header .gnb .depth01 > li .depth02 .wrapper .tit::after {content: ""; background: url(/images/layout/gnb_bg.png) right bottom no-repeat; background-size: cover; width: 200%; height: 100%; mix-blend-mode: luminosity; opacity: .7; position: absolute; right: 0; top: 0; z-index: -1;}
header .gnb .depth01 > li .depth02 .wrapper .tit h2 {font-size: 1.5rem; padding-top: 10px;}
header .gnb .depth01 > li .depth02 .wrapper .tit span {display: block; font-size: .9375rem; color: #555; margin-top: 10px;}
header .gnb .depth01 > li .depth02 .wrapper > ul {width: 76%; display: flex; flex-wrap: wrap; background: #fff; padding: 0 .5rem;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li {width: calc(100% / 4); padding: 1.5rem .5rem;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li > a {display: block; width: 100%;  font-size: 1.0625rem; font-weight: 600; padding: 15px 20px; border: 1px solid #ebebeb; border-radius: 5px; transition: .2s; position: relative;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li > a::after {content: ""; background: url(/images/icon/ico_arrow_b.svg) center center no-repeat; width: 10px; height: 10px; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
header .gnb .depth01 > li .depth02 .wrapper > ul > li:hover > a::after {background: url(/images/icon/ico_arrow_c.svg) center center no-repeat;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li > a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_b.svg) center center no-repeat; width: 14px; height: 14px; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
header .gnb .depth01 > li .depth02 .wrapper > ul > li:hover > a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_w.svg) center center no-repeat; width: 14px; height: 14px; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
header .gnb .depth01 > li .depth02 .wrapper > ul > li:hover > a {border-color: #155EE8; color: #155EE8;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 {display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 20px 0 20px;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 > li {width: 100%;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 > li a {display: block; font-size: 1rem; color: #555; position: relative;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 > li a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_b.svg) center center no-repeat; width: 14px; height: 14px; background-size: 100%; position: absolute; right: 0; top: 2px;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 > li a::before {content: ""; width: 2px; height: 2px; background: #828282; border-radius: 50px; position: absolute; left: -10px; top: 8px;}
header .gnb .depth01 > li .depth02 .wrapper > ul > li .depth03 > li:hover a {color: #155EE8;}

header .sitemap a {display: block; background: #F2F3F5 url(/images/icon/ico_menu_b.svg) center center no-repeat; width: 50px; height: 50px; border-radius: 10px;}
header .mobile {display: none;}

@media (max-width: 1420px) {
    header .gnb .depth01 > li .depth02 .wrapper > ul > li {width: calc(100% / 3)}
}

@media (max-width: 1023px) {
    header .hd_top,
    header .gnb,
    header .sitemap {display: none;}
    header .hd_logo {width: 100%; max-width: 251px;}
    header .mobile {display: block; width: auto; position: relative; z-index: 9999;}
    header .mobile.open::before {content: ""; z-index: 9998; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.3);}
    header .mobile .sitemap {display: block;}
    header .mobile .sitemap button {cursor: pointer; display: block; background: #F2F3F5 url(/images/icon/ico_menu_b.svg) center center no-repeat; width: 50px; height: 50px; border-radius: 10px;}
    header .mobile .mgnb {z-index: 9999; display: none; position: fixed; right: 0; top: 0; max-width: 340px; width: 100%; height: 100vh; background: #fff;}
    header .mobile .mgnb .mutil {display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #ebebeb;}
    header .mobile .mgnb .mutil .util_list {display: flex; gap: 20px;}
    header .mobile .mgnb .mutil .util_list li a {color: #828282;}
    header .mobile .mgnb .mutil .cls {width: 24px; height: 24px; background: url(/images/icon/ico_close_b.svg) center center no-repeat;}
    header .mobile .mgnb .depth1 {width: 100%; height: 100%; overflow-y: overlay;}
    header .mobile .mgnb .depth1::-webkit-scrollbar {width: 6px; height: 3px;}
    header .mobile .mgnb .depth1::-webkit-scrollbar-thumb {background: #bbb; border-radius: 10px;}
    header .mobile .mgnb .depth1::-webkit-scrollbar-track {background: #dfdfdf;}
    header .mobile .mgnb .depth1 > li > a span {display: block; padding: 20px; font-size: 1.0625rem; font-weight: 600; position: relative; border-bottom: 1px solid #ebebeb;}
    header .mobile .mgnb .depth1 > li > a span.on {background: #155EE8; color: #fff;}
    header .mobile .mgnb .depth1 > li > a span::after {content: ""; background: #F2F3F5 url(/images/icon/ico_arrow_b.svg) center center no-repeat; width: 30px; height: 30px; border-radius: 5px; position: absolute; right: 20px; top: 14px;}
    header .mobile .mgnb .depth1 > li .depth2 {display: none; border-bottom: 1px solid #ebebeb; background: #F2F3F5;}
    header .mobile .mgnb .depth1 > li .depth2 > li + li {border-top: 1px dashed #DADBDD;}
    header .mobile .mgnb .depth1 > li .depth2 > li > a {display: block; padding: 20px; font-size: 1rem; font-weight: 600; position: relative;}
    header .mobile .mgnb .depth1 > li .depth2 > li > a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_b.svg) center center no-repeat; width: 14px; height: 14px; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
    header .mobile .mgnb .depth1 > li .depth2 > li .depth03 {padding: 0 30px 1rem; display: flex; flex-wrap: wrap; gap: 10px;}
    header .mobile .mgnb .depth1 > li .depth2 > li .depth03 li {width: 100%;}
    header .mobile .mgnb .depth1 > li .depth2 > li .depth03 li a {display: block; font-size: .9375rem; position: relative;}
    header .mobile .mgnb .depth1 > li .depth2 > li .depth03 li a[target=_blank]::after {content: ""; background: url(/images/icon/ico_link_b.svg) center center no-repeat; width: 14px; height: 14px; background-size: 100%; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);}
    header .mobile .mgnb .depth1 > li .depth2 > li .depth03 li a::before {content: ""; width: 2px; height: 2px; border-radius: 50px; background: #155EE8; position: absolute; left: -5px; top: 7px;}
}

@media (max-width: 767px) {
    header {height: 80px;}
}


/* 관련 사이트 */
.rel {border-top: 1px solid #ebebeb; margin-top: 100px;}
.rel .wrapper {display: flex; flex-wrap: wrap; gap: 10px 0; align-items: center; overflow: hidden;}
.rel .rel_control {width: 20%; display: flex; align-items: center; gap: 20px;}
.rel .rel_control h4.tit {font-size: 1.125rem; font-weight: 700;}
.rel .rel_control .indicator {display: flex; align-items: center; gap: 10px;}
.rel .rel_control .indicator button {width: 100%; height: 100%; cursor: pointer}
.rel .rel_control .indicator .rel_prev {background: url(/images/icon/ico_prev02_b.svg) center center no-repeat; width: 16px; height: 16px; background-size: cover;}
.rel .rel_control .indicator .rel_play {display: none; background: url(/images/icon/ico_play_b.svg) center center no-repeat; width: 20px; height: 20px; background-size: cover;}
.rel .rel_control .indicator .rel_pause {background: url(/images/icon/ico_pause_b.svg) center center no-repeat; width: 20px; height: 20px; background-size: cover;}
.rel .rel_control .indicator .rel_next {background: url(/images/icon/ico_next02_b.svg) center center no-repeat; width: 16px; height: 16px; background-size: cover;}
.rel .rel_list {width: 80%; overflow: hidden;}
.rel .rel_list .slide_item {padding: 1rem;}
.rel .rel_list img {width: 100%; height: 60px; object-fit: contain;}

@media (max-width: 1023px) {
    .rel .rel_control {width: 25%;}
    .rel .rel_list {width: 75%;}
}

@media (max-width: 767px) {
    .rel {padding: 20px 0 10px; margin-top: 50px;}
    .rel .rel_control {justify-content: space-between;}
    .rel .rel_control h4.tit {font-size: 1.25rem;}
    .rel .rel_control,
    .rel .rel_list {width: 100%;}
}


/* 빠른 메뉴 */
.quick {position: fixed; right: 72px; bottom: 40px; width: 102px; height: auto; z-index: 999; background: #fff; text-align: center; border-radius: 10px; border: 1px solid #174C91; overflow: hidden; transition: bottom 0.2s ease;}
.quick .tit {padding: .75rem 0 1.125rem; color: #fff; font-size: 1rem; font-weight: 700; background: #174C91; text-align: center; display: flex; justify-content: center; flex-direction: column; gap: 5px;}
.quick .tit svg {width: 1.125rem; margin: 0 auto;}
.quick ul {padding: .5rem 0;}
.quick li a {display: flex; gap: 10px; flex-direction: column; justify-content: center; padding: 1rem .5rem;}
.quick li a img {width: 1.375rem; margin: 0 auto; transition: .3s;}
.quick li a:hover img {transform: translateY(-5px);}
.quick li a span {font-size: .9375rem; color: #555;}
.quick li a:hover span {color: #174C91;}

@media (max-width: 1420px) {
    .quick {display: none;}
}


/* 상단으로 이동 */
#toTop {position: absolute; right: 6rem; top: -22.5px; cursor: pointer; width: 55px; height: 55px; color: #fff; background: #034078; border-radius: 50%; transition: .3s; display: flex; align-items: center; justify-content: center; z-index: 99;}
#toTop svg{width: 25px; height: 25px;}
#toTop:hover{color: #fff; background: #222;}

@media (max-width: 500px) {
    #toTop {display: none;}
}


/* 푸터 */
footer {background: #F2F3F5; padding: 50px 0; position: relative;}
footer .wrapper .ft_nav {display: flex; gap: 20px;}
footer .wrapper .ft_nav li a {font-size: 1rem; color: #155EE8; font-weight: 600;}
footer .wrapper .ft_info {margin: 20px 0; font-size: 1rem; color: #555;}
footer .wrapper .ft_info ul {display: flex; gap: 20px; margin-top: 10px;}
footer .wrapper .copy {padding-top: 20px; border-top: 1px solid #DADBDD; font-size: .875rem; color: #555;}


@keyframes blurTxt {
    0% { filter:blur(10px); opacity:0;}
    100% { filter:blur(0); opacity:1;}
}