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

@import url("content.css");
@import url("responsive.css");
@import url("board.css");
@import url("form.css");
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url("https://unpkg.com/aos@next/dist/aos.css");
@import url("swiper-bundle.min.css");

/* 공통 UI 레이아웃 */
html, body, div, span, applet, object, iframe,
h1, h2, 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, 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%
}

body {
	font-size: 18px;
	line-height: 1.6;
	vertical-align: baseline;
	text-decoration:none;
	color: #222;
	font-weight:400;
	word-break:keep-all;
    background: #fff;
}

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

/* a Link style */
a {text-decoration: none;color: #2F333A}
a:active, a:link, a:visited {outline: 0;text-decoration: none;}
a:hover {color:#245FB7; 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;}
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: 800ms !important; /* AOS 애니메이션 지속 시간 */}

.container {margin:0 auto; width:1200px; text-align: left; box-sizing: border-box;  }
.container.w100 {width: 100%; margin: 0 auto; padding: 0;}


footer {width: 100%;  padding: 30px 0; position: relative; background: #F1F3F9; margin-top: 200px;}
.footer {width: 1200px; margin: 0 auto; display: grid;  grid-template-columns: 200px 1fr ; position: relative; font-size: 0.82rem; color: #34383C; }
.footer .f01 img{width:160px;  }
.company_info1 { display:flex; flex-direction: row;  gap: 26px; font-weight: 500;}
.company_info2 { display:flex; flex-direction: row;  gap: 16px; }
.footer .f03 {margin-top: 5px; font-size: 0.72rem;}

.scroll-active {border-bottom: 1px solid #DFEAF0; }
.main-scroll { position: absolute; top:700px; width: 100%; font-size: 0; height: 60px;}

.page-none {display: none;}


@media (max-width: 1279px){
	.container { padding: 0 16px; width: 100%; margin-top:0}

    footer {margin-top: 80px;  padding: 12px 6px 26px 6px;box-sizing: border-box;}
    .footer    {width: 100%; padding: 0 16px; grid-template-columns: auto;overflow: hidden;  text-align: center; box-sizing: border-box;}
    .footer .f01 img{width:100px; margin-bottom: 10px; }
    .company_info1 {gap: 12px; margin: 0 auto; text-align: center; font-size: 0.92rem;  justify-content: center;}
    .company_info2 { display:block; flex-direction: none;  gap: 0; margin-top: 6px;}
    .company_info2 li {display: inline-block; margin:0 4px;}
    .footer .f03 {text-align: center; font-size: 0.70rem; margin-top: 5px;}


}



/* ****************** HEADER ********************** */
:root{
	--menu-color: #00FF4D;
	--area-box-width: 1760px;
	--area-width: 1515px;
	--area-padding: 30px;
	--header-height: 80px;
	--sub-menu-height: 79px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
}
#header{position:sticky; height:80px; top:0; left:0; width:100%; z-index:100; background: #fff;}
#headerInnerWrap{display: grid; grid-template-columns: 200px auto 100px; width:100%; height:80px; z-index:100; transition:var(--transition-custom); box-sizing: border-box;}

#headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:80px; margin:0px auto; }

#header .logo{position:relative; z-index:100; text-align: left; display: inline-block; padding-left: 60px; }
#header .logo img {width:180px; }
#header .sitemap {position:relative; width: 40px; padding-top: 24px;}
#header .sitemap img {width: 30px;}

/* -------- Header :: Inner -------- */
.header-left-box{display:flex; align-items:center; }
.header-right-box{position:relative; z-index:100;}


/* -------- Header :: GNB(PC) -------- */
.area{ width: auto; margin:0 auto;}
.gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.2); z-index:99;  transition:var(--transition-custom); }
/* gnb overlay BG */
.gnb-overlay-bg.open{visibility:visible; opacity:1.0;}
#gnb{text-align:center;  width:100%; z-index:99; background: transparent;}
#gnb > ul{display:inline-block; width: 900px; }
#gnb > ul > li{position:relative; float:left; word-break:keep-all;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:block; line-height:80px; width:180px; padding:0; text-align:center; color: #111 !important; transition:var(--transition-custom);  text-transform:uppercase; box-sizing: border-box;
    font-size: 1.18rem; font-weight: 600;
}
.scroll-active {background-color: #085A48;  transition: all 0.2s ease-in-out; }

#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li.on > a{color: #0B459B !important;}

/* GNB :: 2차 전체메뉴 */
#gnbBg{
	overflow:hidden;
	position:absolute;
	left:0;
	width:100%;
	height:0;
	background:#fff;
	z-index:98;
	opacity:0;
	transition:height 0.1s ease-in-out, opacity 0.1s ease-in-out;
}
#gnbBg:after{position:absolute; width:100%; left:0;  content:""; top:80px; }
#gnb.total-menu > ul > li .gnb-2dep{
	position:absolute;
	top:80px;
	left:0px;
	z-index:99;
	width:100%;
	text-align:left;
	opacity:0;
    filter:Alpha(opacity=0);
	height:1px;
    transition: all 0.2s 0s;
	transition-delay: 0s;
	visibility:hidden;
}

#gnb.total-menu > ul > li .gnb-2dep:before {
	content:""; position:absolute; left:0; top:-1.5px; width:0; left:50%; height:2px; background-color:var(--menu-color); transform:translateX(-50%);
	transition:var(--transition-custom);
}
#gnb.total-menu > ul > li:hover .gnb-2dep:before {width:60%; left:50%; transform:translateX(-50%); }
#gnb.total-menu > ul > li .gnb-2dep > ul{padding:20px 0px;  }
#gnb.total-menu > ul > li .gnb-2dep > ul > li {position:relative; }
#gnb.total-menu > ul > li .gnb-2dep > ul > li > a { display:block;  padding:5px 0; color:#fff; font-size:0.98rem; font-weight:400; line-height:1.3; transition:var(--transition-custom); text-align: center; }
#gnb.total-menu > ul > li .gnb-2dep > ul > li > a > span {display:inline-block; position:relative; padding-bottom:5px;}
/* 서브메뉴 라인 나오게 표시 : height:1px */
#gnb.total-menu > ul > li .gnb-2dep > ul > li > a > span:before {content:""; width:0; height:0px; background-color:var(--menu-color); position:absolute; left:50%; bottom:0; transition: var(--transition-custom); }
#gnb.total-menu > ul > li .gnb-2dep > ul > li > a:hover { color:var(--menu-color); }

/* 3dep */
#gnb.total-menu > ul > li.gnb2 .gnb-2dep > ul > li {text-align:left;}
#gnb.total-menu .gnb-3dep > ul {padding-bottom:25px;}
#gnb.total-menu .gnb-3dep > ul > li > a {display:block; font-size:1.4rem; letter-spacing:-0.065em; color: rgba(51,51,51,0.6); padding:7px 15px; line-height:1.3; transition: color 0.4s;}
#gnb.total-menu .gnb-3dep > ul > li > a span {display:none;}
#gnb.total-menu .gnb-3dep > ul > li > a:hover {color: #666;}

/* GNB :: 2차메뉴 Over (높이변경) */
#gnb.open #gnbBg {height:240px; opacity:1.0;filter:Alpha(opacity=100);  background: #2A4AA0; margin-top: 79px;}

#gnb.open > ul > li .gnb-2dep{
	height:240px; opacity:1.0; filter:Alpha(opacity=100);visibility:visible;
}

/* over했을때 */
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;}
#gnb.each-menu > ul > li .gnb-2dep.open:before{height:100%;}
#gnb > ul > li .gnb-2dep.open ul li{opacity:1.0; transition:var(--transition-custom2);}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1){transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2){transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3){transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4){transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5){transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6){transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7){transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8){transition-delay:0.8s;}




/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}


/* -------- Header :: Fixed & Black.ver -------- */
@media all and (min-width:1281px){
	#header----{ opacity:0; transition:margin 0.8s , opacity 0.8s, top 0.8s ease; left:0; top:0;}
	body.active #header {opacity:1;}

	#header.black .logo img.default ,#header.gnb-open .logo img.default  {opacity:0;}
	#header.black .logo img.black , #header.gnb-open .logo img.black {opacity:1;}

	#header.black #gnb > ul > li > a ,#header.gnb-open #gnb > ul > li > a ,
	#header.black .header-lang-list li a ,#header.gnb-open .header-lang-list li a {color: #333;}
	#header.black .sitemap-line-btn .line , #header.gnb-open .sitemap-line-btn .line ,
	#header.black .header-lang-list li a:after,#header.gnb-open .header-lang-list li a:after  {background-color:#333;}
	#header.top-fixed {margin-top:0 !important;}

}

#header.top-fixed .logo img.default {opacity:0;}
#header.top-fixed .logo img.black {opacity:1;}
#header.top-fixed #headerInnerWrap {background-color:#fff; }
#header.top-fixed #gnb > ul > li:not(.on)  > a ,
#header.top-fixed .header-lang-list li a  {color: #333;}
#header.top-fixed .sitemap-line-btn .line ,
#header.top-fixed .header-lang-list li a:after {background-color:#333;}

#header.hide {top:-652px; transition: top 0.8s ease;}
.m-menu {display: none!important;}



/* ========================================================
 * responsive
======================================================== */

@media (max-width: 1440px){
	#headerInner{width: auto; padding: 0; }
    #headerInnerWrap{ grid-template-columns: 180px auto 60px;}
    #header .logo {padding-left: 20px;}
}
@media (max-width: 1439px){
	#gnb > ul{width: auto;  margin-left: 0; }
}


@media (max-width: 1024px){
	#headerInner{width: 100%;  }
    #header {height:60px}
}

@media all and (max-width:1279px){
	:root{
		--header-height: 60px;
	}

}
@media all and (max-width:800px){
	:root{
		--area-padding: 5vw;
		--sub-menu-height: 60px;
	}
}
@media all and ( max-width: 480px ){
	:root{
		--header-height: 60px;
		--sub-menu-height: 45px;
	}
}



/* ****************** 공통 ********************** */

@media all and (max-width:1279px){
	.m-br{display:block;}
	.pc-br{display:none;}
	.display-m{display:block;}
	.display-pc{display:none;}
	.m-menu {display: block;}
}

/* ****************** HEADER ********************** */
@media all and (min-width:1279px) and (max-height:750px){
	body.active #header {margin-top:0;}
}



@media all and ( max-width: 1279px ){
    #header {height: 60px;}
	#headerInnerWrap{ z-index:99; position: sticky;height: 60px; }
	.header-right-box{position:fixed; z-index:100;}
	#headerInner {width: 100%; height: 60px; padding-left: 0; }

	#header .logo {padding-left: 10px; }
	#header .logo img { width:100px; }
	#header .m_logo img {width:100px; padding-top: 16px; padding-left: 16px;}
    .sitemap {display: none;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none}


	/* -------- Header :: GNB(Mobile/기본스타일) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}
	#gnbM{
		display:block;
		position:fixed;
		top:0px;
		right:-100%;
		width:100%;
		height:100%;
		background-color:#fff;
		z-index:9999;
		transition:var(--transition-custom);
		visibility:hidden;
	}
	#gnbM.open{right:0px; visibility:visible;}


	/* GNB Mobile :: 레이아웃 */
    .gnb-navigation-inner {border-top: 1px solid #e7e7e7;}
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:20px; overflow-y:auto;}
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:0; height:calc(100% - var(--header-height));}

	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{border-bottom:1px solid #e7e7e7;}
	#navigation > li > a {position:relative; display:block; padding:15px var(--area-padding); color:#333; font-size:18px; font-weight:500; }
	#navigation > li.active > a{color:var(--menu-color);}
	#navigation > li.has-2dep > a:before{position:absolute; top:24px; right:var(--area-padding);background: url('../images/arrow_down1.svg') no-repeat; width: 16px; height: 16px ; content: '';}
	#navigation > li.has-2dep.active > a:before{transform:rotate(-180deg); top:26px;}


	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding:0 2px; background-color:#EDF0F3; }
	#navigation > li .gnb-2dep > ul{padding:12px 0}
	#navigation > li .gnb-2dep > ul > li{height:auto !important;}
	#navigation > li .gnb-2dep > ul > li > a{display:block;  font-size:16px; padding:8px var(--area-padding); font-weight: 400; color: #363A3E;}
	#navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:600;}


	/* GNB Mobile :: 메뉴영역 ::  3차 */
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep{display:none; padding:10px; background-color:#aaa; margin:0 10px}
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;}
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}
	.gnb5 {margin-right:0;}

	/* -------- GNB Mobile :: 스타일2 (Full Style) -------- */
	#gnbM.gnb-style-full{
		top:-100%;
		right:0;
		width:100%;
		height:100%;
		max-width:none;
	}
	#gnbM.gnb-style-full.open{
		top:0px;
	}
	.gnb-style-full .gnb-navigation-wrapper{height:auto; width:100%; position:absolute; top:0px; bottom:0px; left:0; padding-top:0;}
	.gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{top:var(--header-height); }
	.gnb-style-full-member .gnb-navigation-wrapper{bottom:var(--header-height);}
	.gnb-style-full .gnb-navigation-inner{display:table; width:100%; height:100%;}
	.gnb-style-full #navigation{
		display:table-cell;
		vertical-align:middle;
	}
	.gnb-style-full #navigation > li{
		text-align:center;
		border:0;
		opacity:0;
		transform:translateY(-20px);
		transition:all 0s 0s;
	}
	.gnb-style-full #navigation > li:first-child {border:0}
	/*.gnb-style-full #navigation > li > a {}*/
	.gnb-style-full #navigation > li .gnb-icon i{display:none;}
	.gnb-style-full.open #navigation > li{
		opacity:1.0;
		transform:translateY(0px);
		transition:transform 0.8s, opacity 0.8s;
	}
	.gnb-style-full.open #navigation > li:nth-child(1){transition-delay:0.3s;}
	.gnb-style-full.open #navigation > li:nth-child(2){transition-delay:0.4s;}
	.gnb-style-full.open #navigation > li:nth-child(3){transition-delay:0.6s;}
	.gnb-style-full.open #navigation > li:nth-child(4){transition-delay:0.7s;}
	.gnb-style-full.open #navigation > li:nth-child(5){transition-delay:0.9s;}
	.gnb-style-full.open #navigation > li:nth-child(6){transition-delay:0.9s;}


	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{
		display:block; position:absolute; top:16px;  right:16px!important; z-index:10000;
		height:30px;
		transition:var(--transition-custom);
		background-color:transparent;
	}
	.nav-open-btn.active { position:fixed;}

	.nav-open-btn .line{
	width: 32px;
    height: 2px;
    background-color: #000;
    display: block;
    margin: 6px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	text-align: right;
	border-radius: 6px;
	}


	.nav-open-btn.active .line:nth-child(2){
		opacity: 0;
	}
	.nav-open-btn.active .line:nth-child(1){
		-webkit-transform: translateY(8px) rotate(45deg);
		-ms-transform: translateY(8px) rotate(45deg);
		-o-transform: translateY(8px) rotate(45deg);
		transform: translateY(8px) rotate(45deg);
		width: 32px; margin-left: 0;
        background-color: #000;
	}
	.nav-open-btn.active .line:nth-child(3){
		-webkit-transform: translateY(-8px) rotate(-45deg);
		-ms-transform: translateY(-8px) rotate(-45deg);
		-o-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) rotate(-45deg);
        background-color: #000;
	}

}


@media all and ( min-width: 481px ) and ( max-width: 1279px ) {
	.nav-open-btn.active{right:20px;}
}