@charset "UTF-8";
/* *******************************************************
공통
******************************************************** */

@import url("content.css");
@import url("board.css");
@import url("layer.css");
@import url("responsive.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');
@import url("https://unpkg.com/aos@next/dist/aos.css");


/* 공통 UI 레이아웃 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button,select,input
{margin: 0;padding: 0;border: 0; font-family:'Pretendard', sans-serif}


html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
    scroll-behavior: smooth;
}

body {
	font-size: 17px;
	line-height: 1.6; /* 28px */
	vertical-align: baseline;
	text-decoration:none;
	color: #363636;
	font-weight:400;
	word-break:keep-all;
}

ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* a Link style */
a {text-decoration: none;color: #363636}
a:active, a:link, a:visited {outline: 0;text-decoration: none;}
a:hover {outline: 0;text-decoration: none;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;transition: all 0.5s; cursor: pointer}

/* etc */
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
address, h1, h2, h3, h4, h5 {font-style:normal; color: #363636;}
img {vertical-align: middle;}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus,:active,:focus,:visited,a,a:active,a:focus,a:visited{outline:0}
em {font-style:normal; font-weight: 400}
dt {font-style:normal; font-weight: 400}

[data-aos] { transition-duration: 1200ms !important; /* AOS 애니메이션 지속 시간 */}


.scroll-active {background-color: rgba(0, 0, 0, 0.9)!important; }
.page-none {display: none;}




/* ****************** HEADER GNB********************** */

.sub01-page .gnb { background: #ebf8fd; }
.sub01-page .depth1 > li > a:hover {color: #00A7E1; }
.sub01-page .depth2 a::after {background:#00A7E1; }

.sub03-page .gnb { background: #DBEFE8; }
.sub03-page .depth1 > li > a:hover {color: #31BC92; }
.sub03-page .depth2 a::after {background:#31BC92; }

.sub04-page .gnb { background: #E9F3FF; }
.sub04-page .depth1 > li > a:hover {color: #4E88F9; }
.sub04-page .depth2 a::after {background:#4E88F9; }

.sub05-page .gnb { background: #ECE7FF; }
.sub05-page .depth1 > li > a:hover {color: #9465EB; }
.sub05-page .depth2 a::after {background:#9465EB; }

.sub06-page .gnb { background: #EDEDED; }
.sub06-page .depth1 > li > a:hover {color: #8594AB; }
.sub06-page .depth2 a::after {background:#8594AB; }



body.scroll-lock {overflow:hidden;}
.gnb {position:fixed; top:0; left:0;width:100%;height:80px; z-index:1000; background: #fff; }
.gnb-inner {display:flex;align-items:center; justify-content:space-between;height:100%; padding:0 80px;}
/*.gnb-inner {display:grid; grid-template-columns: 150px auto 150px; height:100%; padding:0 80px; gap: 40px;}*/

.logo {width: 340px;}
.nav {height:100%;  text-align: right; }
.top-info {display:flex; width: 130px; margin-top: 26px; padding-left: 24px; align-items: center; font-size: 15px;}
.top-info img {width:28px; margin-top: -4px; }
.top-info a:nth-child(1) {margin-right: 12px; color: #777;}
.top-info a:nth-child(1)::after {content: '|'; padding-left: 12px; font-weight: 300; }
.top-info a:nth-child(2) {margin-right: 8px;  }
.top-info a:nth-child(3) {margin-right: 4px;}
.top-info a.on {font-weight: 500; color: #000;}


.depth1 {display:flex;align-items:center; gap:40px; height:100%; position:relative;}
.depth1 > li {position:relative; height:100%;}
.depth1 > li > a {display:flex; align-items:center; height:100%; font-size:15px; font-weight:400; color:#363636; font-family: 'Montserrat';}
.depth1 > li > a:hover {color: #00A7E1; }
.depth1 > li a.active {font-weight: 600; color: #000;}


.depth2 {display:flex;align-items:flex-start;gap:40px; position:fixed; top:80px; left:0; width:100%; height: 50px;background:#fff; border-bottom:0.5px solid #363636; opacity:0;visibility:hidden;transition:.25s; }
.depth1 > li:hover .depth2 {opacity:1;visibility:visible;}
.depth2 li {position:relative; left:calc(var(--menu-left) + 0px); }

.depth2 a {display:block; position:relative; font-size:13px; color:#666; white-space:nowrap; transition:.2s; font-weight:300; font-family:'NanumSquareNeo'; line-height:51px;}
.depth2 a::after {content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; transition:.3s ease; transform:translateX(-50%); background:#00A7E1;}
.depth2 a:hover {color:#000; }
.depth2 a:hover::after {width:100%;}


.depth2.subm-01 li {left:calc(var(--menu-left) + -160px);}
.depth2.subm-02 li{left:calc(var(--menu-left) + -200px);}
.depth2.subm-03 li{left:calc(var(--menu-left) + -300px);}
.depth2.subm-04 li{left:calc(var(--menu-left) + -520px);}
.depth2.subm-05 li{left:calc(var(--menu-left) + -150px);}
.depth2.subm-06 li{left:calc(var(--menu-left) + -700px);}


.depth2.subm-03 a, .depth2.subm-04 a
{display:flex; align-items:center; justify-content:flex-start; height:100%; width:100%; line-height:18px; text-align:left; }



.menu-btn {display:none;position:relative;width:32px;height:24px;background:none;border:none;cursor:pointer;z-index:1001;}
.menu-btn span {position:absolute;left:0;width:100%;height:2px;background:#000;transition:.3s;}
.menu-btn span:nth-child(1) {top:0;}
.menu-btn span:nth-child(2) {top:50%;transform:translateY(-50%);}
.menu-btn span:nth-child(3) {bottom:0;}
.menu-btn.active span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
.menu-btn.active span:nth-child(2) {opacity:0;}
.menu-btn.active span:nth-child(3) {bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

.nav-dim {position:fixed;top:0;left:0;width:100%;height:100vh; background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.35s;z-index:998;}
.nav-dim.active {opacity:1;visibility:visible;}
.nav-close {display:none; position:absolute; top:20px; right:20px; width:40px; height:40px; background:none; border:0; font-size:28px; cursor:pointer; z-index:1002; color: #111;}

.m-search {display: none;}
.m-lang {display: none;}



@media (max-width:1440px){
    .gnb-inner {padding:0 24px!important}
    .logo img{width: 300px;}
    .depth1 {gap:30px; }
}


@media (max-width:1279px){
    .gnb-inner {padding:0 16px!important}
    .logo img {width: 160px; padding-top: 10px;}
    .gnb {height: 60px;}
	.menu-btn {display:block;}
    .nav-close {display:block;}
	.nav {position:fixed;top:0;right:-100%;width:280px;height:100vh;padding:80px 24px 40px;background:#fff;transition:right .35s ease;overflow-y:auto;z-index:1002;}
	.nav.active {right:0;}
	.depth1 {display:block;height:auto;}
	.depth1 > li {height:auto;border-bottom:1px solid #eee;}
	.depth1 > li > a {position:relative;display:flex;align-items:center;height:60px;font-size:16px;}
	.depth1 > li.has-sub > a::after {content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:20px; font-size: 30px; font-weight: 300;}
	.depth1 > li.active > a::after {content:'-'; font-size: 40px; font-weight: 300;}
    .depth1 > li a.on {font-weight: 500; color: #00A7E1 }
    .depth2.subm-03 a {padding-top: 0; padding-bottom: 0;}
    .depth2.subm-03 a br {display: none;}
    .depth2.subm-04 a br {display: none;}

	.depth2 {display:flex;position:static;width:100%;max-height:0;padding:0;background:none;border:none;opacity:1;visibility:visible;flex-direction:column;gap:10px;overflow:hidden;transition:max-height .45s ease,padding .35s ease; height: auto;}
	.depth1 > li.active .depth2 {padding:0 0 20px 0;}
	.depth2 li {position:static;left:auto;}
	.depth2 a {font-size:13px;color:#333; line-height: 1.3;}
    .depth2 a::after {content:none;}

    .m-search {display: inline-block; position: absolute; right:64px; top:10px; z-index: 10; }
    .m-search .search-btn { padding-top: 0; width:40px;height:40px;}
    .m-search img {width: 40px; margin: 0 auto; align-items: center;}




    .top-info {display: none;}
    .m-lang {display: inline-block; position: absolute; left:24px; top:26px}
    .m-lang a {background: #E1E1E4; text-align: center; width: 70px; line-height: 26px; display: inline-block; border-radius: 24px; font-size: 14px;}
    .m-lang a.active {background:#00A7E1; color: #fff;}

}






footer {width: 100%;  padding: 60px 80px; position: relative; background: #303030; color: #fff; box-sizing: border-box; }
.footer {margin: 0 auto; display: grid;  grid-template-columns: 1fr 1fr ; position: relative; font-size: 15px;}
.footer .f01 img {width:100px; display: block; padding-bottom: 16px; }
.footer .f02 {text-align: right;padding-top: 26px;}
.footer .bottom-sns img {width:32px; padding-left: 14px;}
.footer .bottom-company {margin-top: 16px;}
.footer .bottom-company li {display: inline-block; margin-left: 8px;}
.footer .bottom-company a {font-size: 15px; color: #363636; display: block; height:28px; width: 114px; text-align: center; background:#E1E1E4; border-radius: 16px; line-height: 28px;}
.footer .bottom-company a:hover {opacity: 0.6;}


@media (max-width: 1024px){
    footer {padding: 20px 12px 40px 12px;}
    .footer {grid-template-columns: 1fr ; font-size: 12px;}
    .footer .f02 {text-align: left;padding-top: 20px;}
    .footer .bottom-sns img {width:28px; padding-right: 4px; padding-left: 0;}
    .footer .bottom-company li {margin-left: 0; margin-right: 4px;}
    .footer .bottom-company a {font-size: 12px; height:26px; width: auto!important; line-height: 26px; padding: 0 12px;}
    .footer .f01 img {width:80px; padding-bottom: 10px;}

}