@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td
{margin:0;padding:0;font:17px/1.5 'Montserrat', 'Pretendard', 'Noto Sans KR', '나눔고딕','nanumgothic',돋움,Dotum,굴림,Gulim,Sans-serif;color:#000;-webkit-text-size-adjust:none;word-break:keep-all}
button, span, strong, input, b, em{font-size:inherit;font-family:inherit;color:inherit;font-style:normal}
section, article, aside, header, footer, nav, hgroup, dialog, details, summary, figure, figcaption {display: block;}
cite{display:inline}
html, body {height:100%;} 
body {margin:0px;background:#F2F0F5}
a:link {text-decoration:none;} 
a:visited {text-decoration:none;}
button{padding:0;margin:0;border:0;background:none;cursor:pointer;outline:none}
img{border:0;max-width:100%}
label, input, textarea, select{vertical-align:middle}
ol, ul{list-style:none;} 
table{border-collapse:collapse;table-layout:fixed;}
fieldset{border:none}

/* layout */
header{
	position:fixed;top:0;left:0;
	width:100%;
	z-index:100
}
header h1{position:absolute;top:43px;left:36px;z-index:1}
header h1 a{
	display:block;width:162px;height:24px;
	background:url(../img/logo.svg) no-repeat center;
	background-size:100% auto;
	font-size:0
}
header .menu{
	position:absolute;top:0;right:0;
	width:40px;height:50px;
	box-sizing:border-box;
	padding:0 8px;
	text-align:right;font-size:0;
	display:none;
}
header .menu span{
	position:relative;
	display:inline-block;width:80%;height:3px;
	background:#fff;border-radius:3px;
	font-size:0;transition:0.3s;
}
header .menu span:before,
header .menu span:after{
	content:'';
	position:absolute;right:0;
	display:inline-block;width:120%;height:3px;
	background:#fff;border-radius:3px;
	transition:0.3s;
	-webkit-transform-origin:0.28571rem center;
	transform-origin:0.28571rem center;
}
header .menu span:before{top:-8px;}
header .menu span:after{top:8px;}

.menu_on header .menu span{background:transparent}
.menu_on header .menu span:before,
.menu_on header .menu span:after{-webkit-transform-origin:50% 50%;  transform-origin:50% 50%;top:0;background:#004A99}
.menu_on header .menu span:before{-webkit-transform:rotate3d(0, 0, 1, 45deg);transform:rotate3d(0, 0, 1, 45deg)}
.menu_on header .menu span:after{-webkit-transform:rotate3d(0, 0, 1, -45deg);transform:rotate3d(0, 0, 1, -45deg);}

header .family{
	position:absolute;top:38px;right:40px;
}
header .family button{
	position:Relative;
	width:120px;height:30px;
	padding-left:15px;
	background:#E9E9E9 url(../img/select.svg) no-repeat right 10px center;
	border-radius:20px;
	font-size:12px;text-align:left;
	z-index:1
}
header .family ul{
	position:absolute;top:20px;left:0;
	width:100%;
	padding:15px 0 10px;
	background:#E9E9E9;
	border-radius:0 0 15px 15px;
	display:none
}
header .family ul a{
	display:block;
	padding:3px 15px;
	font-size:13px;color:#999
}
header .family ul a:hover{color:#000}
header nav .home{display:none}
#gnb{
	position:relative;
	padding:0 200px;
	text-align:center;font-size:0;
	transition:.3s
}
#gnb>li{
	display:inline-block;
	min-width:10px;
	box-sizing:border-box;
	vertical-align:top;
}
#gnb>li>a{
	position:relative;
	display:block;
	height:100px;line-height:100px;
	padding:0 43px;
	font-size:21px;color:#fff;font-weight:700;
}
#gnb>li ul{height:0;overflow:Hidden;}
.web #gnb>li ul{
	position:absolute;top:100px;left:0;
	width:100%;
	background:#004A99;
	font-size:0;text-align:center;
	transition:.3s
}
.web #gnb>li ul li{display:inline-block;}
.web #gnb>li ul li a{
	display:block;
	height:80px;line-height:80px;
	padding:0 50px;
	font-size:16px;color:#fff;font-weight:500;
}
.web #gnb>li:hover>a{color:#004A99 !important}
.web #gnb>li:hover ul{display:block;height:80px;}
.web #gnb>li:hover ul li a{color:#fff}
.web #gnb ul a:hover{text-decoration:underline}

.web.menu_hover header h1 a{background-image:url(../img/logo_color.svg)}
.web.menu_hover #gnb>li>a{color:#000}
.web.menu_hover #gnb{background:#fff;}

.fixed_header header h1 a{background-image:url(../img/logo_color.svg)}
.web.fixed_header #gnb>li>a{color:#000}
.web.fixed_header #gnb{background:#fff;}

footer{
	position:relative;
	padding:40px;
	background:#F2F0F5
}
footer .family{
	position:absolute;top:38px;right:40px;
	width:160px;
}
footer .family button{
	position:Relative;
	width:100%;height:32px;
	padding-left:15px;
	border:1px solid #000;
	font-size:13px;text-align:left;
	z-index:1
}
footer .family button:before,
footer .family button:after{
	content:'';
	position:absolute;top:50%;right:10px;
	display:block;width:10px;height:2px;
	margin-top:-1px;
	background:#000
}
footer .family button:after{transform:rotate(90deg)}
footer .family ul{
	position:absolute;bottom:31px;left:0;
	width:100%;
	box-sizing:border-box;
	padding:10px 0;
	background:#fff;
	border:1px solid #000;
	border-radius:0;
	display:none
}
footer .family ul a{
	display:block;
	padding:3px 15px;
	font-size:13px;color:#999
}
footer .family ul a:hover{color:#000}
footer .footer{
	display:flex;padding-right:200px;
	gap:40px
}
footer h2 a{
	display:block;width:162px;height:24px;
	background:url(../img/logo_gray.svg) no-repeat center;
	background-size:100% auto;
	font-size:0
}
footer address{font-size:13px;font-style:normal}
footer address p{margin-bottom:10px;line-height:1.3em}
footer address span{
	display:inline-block;margin-right:15px;
	font-size:14px
}

.contents{position:relative;background:#fff}
.contents main{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:0 40px 150px;
}
.sticky_wrap{position:relative;}
.sticky_wrap:after{content:'';display:block;width:100%;clear:both}
.sticky_wrap .title{
	float:left;width:320px;
	position:sticky;top:150px
}
.sticky_wrap .title h3{font-size:43px;font-weight:700;letter-spacing:-2px}
.sticky_wrap .ct{
	float:right;width:calc(100% - 330px)
}

hgroup h2{
	position:relative;
	height:860px;
	background:url(../img/visual1.jpg) no-repeat center;background-size:cover
}
hgroup h2 b{
	position:absolute;top:50%;left:0;
	display:block;width:100%;
	text-align:center;font-size:80px;color:#fff;font-weight:800;
	transform:translateY(-50%);
}
hgroup #lnb{
	display:flex;gap:46px;
	justify-content:center;
	padding:150px 0
}
hgroup #lnb a{
	font-size:36px;font-weight:500;color:#999
}
hgroup #lnb a:hover,
hgroup #lnb a.on{color:#000}

.intro hgroup h2{background-image:url(../img/visual1.jpg)}
.bns hgroup h2{background-image:url(../img/visual2.jpg)}
.media hgroup h2{background-image:url(../img/visual3.jpg)}
.cs hgroup h2{background-image:url(../img/visual4.jpg)}



@media (max-width: 1200px) {
	#gnb>li>a{padding:0 30px}
}

@media (max-width: 1024px) {
	header{height:80px;overflow:visible}
	header:before{display:none}
	header h1{position:relative;top:28px;left:0;width:100%;}
	header h1 a{margin:0 auto}
	header .menu{top:15px;right:30px;display:block;z-index:11}
	header .family{top:auto;bottom:40px}
	header .family button{position:relative;background:#fff;}
	header .family button:after{
		content:'';
		position:absolute;top:0;right:10px;
		display:block;width:10px;height:100%;
		background:url(../img/select.svg) no-repeat center;
		transform:rotate(180deg)
	}
	header .family ul{top:auto;bottom:30px;padding:10px 0;background:#283877;border-radius:0}
	header .family ul a{color:#fff}
	header nav{
		position:fixed;top:0;right:0;
		width:100%;height:100vh;
		background:rgba(0,0,0,0.5);
		transition: all .4s ease;
		visibility:hidden;opacity:0;
		z-index:10;
	}
	header nav>div{
		position:fixed;top:0;right:0;
		width:100%;max-width:500px;height:100vh;
		padding-top:80px;
		box-sizing:border-box;
		background:#fff;
		transition: all .4s ease;
		transform:translateX(100%)
	}
	header nav .home{
		display:inline-block;height:40px;line-height:40px;
		padding-left:20px;
		margin-left:20px;
		background:url(../img/icon_home.svg) no-repeat 0 center;
		font-size:14px;color:#004A99;font-weight:700
	}
	#gnb{height:100%;padding:0;background: #004A99;overflow:visible}
	#gnb>li{display:block;}
	#gnb>li>a{position:relative;width:100%;height:70px;line-height:70px;padding:0;border-bottom:1px solid rgba(255,255,255,0.3);color:#fff;font-size:18px;font-weight:500;z-index:1;}
	#gnb>li ul{position:absolute;top:0;left:150px;width:calc(100% - 150px);height:calc(100vh - 120px);border:0;padding:0 0 0 0;background:#fff;box-sizing:border-box;display:none}
	#gnb ul a{display:block;height:70px;line-height:70px;padding:0 20px;border-bottom:1px solid #ddd;color:#000;text-align:left;font-size:18px}
	#gnb>li>a:after{left:auto;right:0;bottom:10px;width:4px;height:0}
	#gnb.active>li>a{width:150px}
	#gnb>li.on ul{display:block;}
	#gnb>li.on>a{background:#fff;color:#004A99;font-weight:700}
	#gnb ul a.on{color:#004A99;}
	.menu_on header nav{visibility:visible;opacity:1;}
	.menu_on header nav>div{transform:translateX(0)}
	.fixed_header header{background:#fff;transition: all .4s ease;}
	.fixed_header .menu span,
	.fixed_header .menu span:before,
	.fixed_header .menu span:after{background:#004A99}

	footer .footer{display:block;padding:0}
	footer .footer address{margin-top:20px;}

	.contents main{padding:0 40px 80px;}
	.sticky_wrap .title{
		float:left;width:250px;
		position:sticky;top:100px
	}
	.sticky_wrap .title h3{font-size:33px;font-weight:700;letter-spacing:-1px}
	.sticky_wrap .ct{width:calc(100% - 250px)}

	hgroup h2{height:560px;}
	hgroup h2 b{font-size:60px;}
	hgroup #lnb{gap:36px;padding:100px 0}
	hgroup #lnb a{font-size:26px;}
}

@media (max-width: 760px) {
	header{height:50px;}
	header h1{top:15px;z-index:11}
	header h1 a{width:135px}
	header .menu{top:0;right:15px;width:40px}
	header .menu span:before{top:-8px}
	header .menu span:after{top:8px}
	header .family{right:20px}

	header nav>div{padding-top:50px;}
	#gnb>li ul{height:calc(100vh - 90px)}
	#gnb>li>a,
	#gnb ul a{height:50px;line-height:50px;font-size:16px}

	.menu_on header h1 a{background-image:url(../img/logo_color.svg)}

	footer{padding:30px 20px}
	footer .family{top:25px;right:20px;width:140px}
	footer h2{position:relative;left:0;top:0;margin-bottom:20px;}
	footer h2 a{width:120px;}
	footer address{font-size:11px}
	footer address span{margin-right:10px;font-size:13px;line-height:1.3em}

	.contents main{padding:0 20px 50px;}
	.sticky_wrap .title,
	.sticky_wrap .ct{width:100%;position:relative;}
	.sticky_wrap .title{top:0}
	.sticky_wrap .title h3{margin-bottom:20px;font-size:26px;}

	hgroup h2{height:360px;}
	hgroup h2 b{font-size:40px;}
	hgroup #lnb{gap:20px;padding:50px 0}
	hgroup #lnb a{font-size:18px;}
}

@media (max-width: 480px) {
}