/* 폰트 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}

/*===========================================================================
	CSS 초기화
============================================================================*/
* { font-family: "pretendard", sans-serif; box-sizing:border-box; margin:0; padding:0; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {border:0; outline:0; font-size:100%; color:#333; line-height:1;}
html { width: 100vw; scroll-behavior: smooth; overflow-x: hidden;}
body {line-height:1; width: 100vw;-ms-overflow-style: none; height: 100%; }
html.fixed, body.fixed { position: fixed; overflow: hidden; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
strong {display: inline-block;}
a {margin:0; padding:0; font-size:100%; display: block; }
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
p {line-height:1.5;}
pre { font-family: "pretendard", sans-serif; white-space: pre-line; line-height: 1.5; }
img {width: 100%;}
input {outline:0; border: 0; background: none; font-family: "pretendard", sans-serif;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="file"], input[type="checkbox"], input[type="radio"] { display: none; }
label { cursor: pointer; }
button {cursor:pointer; border: 0; outline: 0; background: none;}
a {text-decoration: none; display: block;}
textarea {resize: none; font-family: "pretendard", sans-serif;}
.col-group {display:flex;}
.row-group {display:flex; flex-flow: column;}
.mb{display: none;}

/* 컨텐츠 공통 */
.container { width: 100%; margin: 0 auto; }
.container.w1680 { max-width: 1680px; }
.container.w1440 { max-width: 1440px; }
.blue { color: #0097ff; }
.green { color: #50d890; }

/* header */
#header { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 88px; z-index: 99; border-bottom: 1px solid #dbdbdb; transition: .3s; }
#header * { transition: .3s; }
.header-wrap { height: 100%; align-items: center; justify-content: space-between;}
.header-wrap .logo a { width: 48px; height: 48px; background-image: url(../images/LOGO.svg); }
.header-wrap .gnb-wrap { gap: 16px; align-items: center; }
.header-wrap .gnb-menu { width: 176px; text-align: center; font-size: 18px; font-weight: 300; color: #333; height: 88px; line-height: 88px; cursor: pointer; }
.header-wrap .gnb> li:hover .gnb-menu { color: #0097ff; font-weight: bold; }
.header-wrap .sub-gnb-wrap { position: absolute; width: 176px; top: 72px; opacity: 0; height: 0; overflow: hidden; }
.header-wrap .gnb> li:hover .sub-gnb-wrap { height: auto; opacity: 1; }
.header-wrap .sub-gnb { gap: 24px; align-items: center; padding: 32px 0; border-radius: 24px; background: #0097ff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); transition: 0s !important; }
.header-wrap .sub-gnb li a { color: #fff; font-size: 17px; font-weight: 300; }
.header-wrap .sub-gnb li:hover a { color: #ffe319; }
.header-wrap .btn-wrap { gap: 16px; align-items: center; }
.header-wrap .btn-wrap .user-btn { width: 136px; height: 48px; border-radius: 24px; background-image: linear-gradient(to right, #0097ff 4%, #50d890 97%); align-items: center; gap: 8px; justify-content: center; font-size: 16px; font-weight: 500; color: #fff;  position: relative; z-index: 0; overflow: hidden; }
.header-wrap .btn-wrap .user-btn::after { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #1a75bc; z-index: -1; transition: .3s; }
.header-wrap .btn-wrap .user-btn i { font-size: 19px; color: #fff; }
.header-wrap .btn-wrap .user-btn:hover::after { width: 100%; }
.header-wrap .btn-wrap .logout-btn { width: 48px; height: 48px; text-align: center; border-radius: 24px; background: #1a75bc; position: relative; z-index: 0; overflow: hidden; justify-content: center; }
.header-wrap .btn-wrap .logout-btn::after { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #004880; z-index: -1; transition: .3s; }
.header-wrap .btn-wrap .logout-btn:hover::after { width: 100%; }
.header-wrap .btn-wrap .logout-btn i { font-size: 19px; color: #fff; line-height: 48px; }

/* header - 사이트맵 */
.header-wrap .sitemap-btn { width: 28px; height: 24px; margin-left: 24px; cursor: pointer; }
.header-wrap .sitemap-btn span { display: block; width: 100%; height: 3px; background: #47b972; }
.header-wrap .sitemap-btn span:not(:nth-child(3)) { margin-bottom: 7.5px; }
.header-wrap .sitemap-btn.active { transform: translateX(0); }
.header-wrap .sitemap-btn.active span:nth-child(1) { width: 32px; transform: rotate(45deg) translate(6px, 9px); }
.header-wrap .sitemap-btn.active span:nth-child(2) { opacity: 0; }
.header-wrap .sitemap-btn.active span:nth-child(3) { width: 32px; transform: rotate(-45deg) translate(6px, -9px); }

.header-wrap .sitemap { display: block; visibility: visible; top: 88px; height: auto; opacity: 1; transition: .6s !important; }
.header-wrap .sitemap .sub-gnb { background: none; box-shadow: none; gap: 32px; padding: 40px 0; }
.header-wrap .sitemap .sub-gnb li a { color: #707070; }
.header-wrap .sitemap .sub-gnb li:hover a { font-weight: bold; color: #333; }
.header-wrap .sitemap-bg { display: block; position: absolute; width: 100vw; height: 244px; top: 88px; z-index: -1; background: #f5f5f5; transition: .2s !important; height: 0; left: 0; }
.header-wrap .sitemap-bg.active { height: 244px; }

/* header - 인덱스 페이지 */
#header.index-header .logo a { background-image: url(../images/LOGO-w.svg); }
#header.index-header .gnb-menu { color: #fff; }
#header.index-header .sitemap-btn span { background: #fff; }

/* header - 인덱스 페이지 - 호버효과 */
#header.index-header:hover { background: #fff; }
#header.index-header:hover .logo a { background-image: url(../images/LOGO.svg); }
#header.index-header:hover .gnb-menu { color: #333; }
#header.index-header:hover .sitemap-btn span { background: #47b972; }

/* footer */
#footer { background: #484848; padding-top: 24px; padding-bottom: 32px; }
.footer-wrap .footer-logo { width: 56px; height: 56px; opacity: 0.4; margin-bottom: 8px; }
.footer-wrap .copy-wrap { gap: 8px; margin-bottom: 24px; }
.footer-wrap .copy-wrap .title { font-size: 24px; font-weight: bold; color: #e9e9e9; }
.footer-wrap .copy-wrap .txt { font-size: 12px; font-weight: 300; color: #e9e9e9; opacity: 0.6; }
.footer-wrap .copy-wrap .copy { font-size: 10px; color: #e9e9e9; }
.footer-wrap .footer-box { gap: 12px; }
.footer-wrap .footer-box li, .footer-wrap .footer-box li a { font-size: 12px; color: #fafafa; }
.footer-wrap .footer-box li a:hover { text-decoration: underline; }

/* top-menu */
#top_menu { position: fixed; right: 40px; bottom: 84px; opacity: 0; transition: .3s; z-index: 99; }
#top_menu.active { opacity: 1; }
#top_menu .top-btn { width: 64px; height: 64px; background: #fff; border: 2px solid #0097ff; border-radius: 50%; text-align: center; cursor: pointer; transition: .2s; }
#top_menu .top-btn i { font-size: 32px; color: #0097ff; line-height: 60px; transition: .2s; }
#top_menu .top-btn:hover { background: #0097ff; }
#top_menu .top-btn:hover i { color: #fff; }

/* pagination */
.pagination { align-items: center; gap: 8px; margin-top: 64px; justify-content: center; }
.pagination .page-btn {display: block; width: 32px; height: 32px; border: 1px solid #aaa; background: #fff; text-align: center; line-height: 30px; font-size: 14px; font-weight: 300; transition: .2s; color: #aaa; }
.pagination .page-btn i { color: #aaa; }
.pagination .page-btn:hover { background: #f5f5f5; }
.pagination .page-btn.active { background: #0097ff; color: #fff; border: 1px solid #0097ff; }

@media screen and ( max-width: 1680px ) {
    .container.w1680 { padding: 0 24px; }
    .header-wrap .gnb-menu { width: 9vw; }
}

@media screen and ( max-width: 1440px ) {
    .container.w1440 { padding: 0 24px; }
}

@media screen and ( max-width: 1024px ) {
    .mb { display: block; }
    .pc { display: none; }

    /* header */
    #header { position: fixed; height: 56px; z-index: 99; border-bottom: 0; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
    .header-wrap { height: 100%; align-items: center; justify-content: space-between;}
    .header-wrap .logo a { width: 36px; height: 36px; background-size: cover; }
    .header-wrap .gnb-wrap { position: fixed; top: 0; right: 0; bottom: 0; width: calc( 100vw - 56px - 24px ); max-width: 480px; height: 100vh; z-index: 999; gap: 16px; align-items: center; background: #fff; flex-flow: column; justify-content: space-between; padding-top: 56px; padding-bottom: 56px; transform: translateX(100vw); }
    .header-wrap .gnb-wrap.active { transform: translateX(0); }
    .header-wrap .gnb { flex-flow: column; width: 100%; }
    .header-wrap .home-menu .gnb-menu { position: absolute; top: 0; left: 0; right: 0; height: 56px; padding: 10px 0; border-bottom: 1px solid #e4e4e4; }
    .header-wrap .home-menu img { display: block; height: 100%; }
    .header-wrap .gnb-menu { width: 100%; padding: 0 24px; text-align: left; font-size: 16px; font-weight: 600; height: 48px; line-height: 48px; position: relative;}
    .header-wrap .gnb> li:hover .gnb-menu { color: #333; background: #0097ff; font-weight: 600; }
    .header-wrap .gnb> li:hover .gnb-menu.active, .header-wrap .gnb-menu.active { color: #fff; background: #0097ff; }
    .header-wrap .gnb-menu .icon { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); }
    .header-wrap .gnb-menu .icon i { font-size: 18px; color: #333; }
    .header-wrap .gnb-menu.active .icon i { transform: rotate(180deg); color: #fff; }
    .header-wrap .sub-gnb-wrap { position: static; width: 100%; }
    .header-wrap .gnb> li:hover .sub-gnb-wrap { height: static; opacity: static; }
    .header-wrap .sub-gnb-wrap.active { height: auto; opacity: 1; }
    .header-wrap .sub-gnb { gap: 0; align-items: flex-start; padding: 0; border-radius: 0; background: #f5f5f5; box-shadow: none; }
    .header-wrap .sub-gnb li { width: 100%; }
    .header-wrap .sub-gnb li:hover a { color: #333; }
    .header-wrap .sub-gnb li a { color: #333; font-size: 14px; height: 40px; line-height: 40px; padding: 0 24px; border-bottom: 1px solid #fff; }
    .header-wrap .btn-wrap { flex-flow: column; width: 100%; }
    .header-wrap .btn-wrap .user-btn { width: 100%; max-width: 240px; }
    .header-wrap .btn-wrap .user-btn i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
    .header-wrap .btn-wrap .logout-btn { width: 100%; max-width: 240px; background-color: rgba(51, 51, 51, 0.4); align-items: center; }
    .header-wrap .btn-wrap .logout-btn span { font-size: 16px; color: #fff; }
    .header-wrap .btn-wrap .logout-btn i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }

    .header-wrap .toggle-btn { width: 24px; height: 24px; }
    .header-wrap .toggle-btn span { display: block; width: 100%; height: 3px; background: #47b972; }
    .header-wrap .toggle-btn span:not(:nth-child(3)) { margin-bottom: 5px; }

    .header-wrap .toggle-close-btn { width: 56px; height: 56px; background: #0097ff; position: absolute; top: 0; left: -56px; text-align: center; }
    .header-wrap .toggle-close-btn i { font-size: 30px; color: #fff; line-height: 56px; }

    .gnb-wrap-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); display: none; }
    .gnb-wrap-bg.active { display: block; }

    /* header - 인덱스 페이지 */
    #header.index-header .gnb-menu { color: #333; }
    #header.index-header .gnb-menu.active { color: #fff; }
    /* footer */
    #footer { padding-top: 24px; padding-bottom: 24px; }
    .footer-wrap .copy-wrap { margin-bottom: 16px; }
    .footer-wrap .footer-box { gap: 8px 16px; flex-flow: wrap; }
    .footer-wrap .footer-box li, .footer-wrap .footer-box li a { font-size: 10px; }

    /* top-menu */
    #top_menu { right: 16px; bottom: 64px; }
    #top_menu .top-btn { width: 48px; height: 48px; }
    #top_menu .top-btn i { font-size: 24px; line-height: 44px; }
    #top_menu .top-btn:hover { background: #fff; }
    #top_menu .top-btn:hover i { color: #0097ff; }
}

@media screen and ( max-width: 768px ) {

}