@charset "UTF-8";
@import url('/design/common/css/PretendardVariable.css');

:root {
	--p_color : #005db6;
}

body {font-family:'Pretendard Variable', '맑은 고딕', sans-serif !important; font-weight:400; font-size:17rem; color:#323232; letter-spacing:-0.5px;}
input, button, textarea, select {font-family:'Pretendard Variable', '맑은 고딕', sans-serif; font-weight:400; font-size:17rem; color:#323232;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:17rem; font-weight:600; line-height:1.4; letter-spacing:-1.2rem;}
a {color:#323232;}
b {font-weight:600;}
.wrap {width:100%; max-width:1500rem; margin:0 auto;}
.logo.ir a,
.logo.ir span {display:block; width:322rem; height:58rem; background:url('/design/kr/img/layout/logo.png') no-repeat 0 0/100% auto; text-indent:-9999px;}
.toggle > div {position:absolute; opacity:0; visibility:hidden; transition: all 0.5s;  z-index:30;}
.toggle.on > div {opacity:1; visibility:visible; transform:translate(0, 20px); }
.toggle > div.list {left:50%; width:150rem; margin-left:-75rem; padding:15rem 20rem; border:1px solid #ddd; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:10rem; }
.toggle > div.list > a {display:block; position:relative; margin:5rem 0; padding-left:14rem; line-height:1.4; font-size:17rem;}
.toggle > div.list > a:before {content:''; position:absolute; top:9rem; left:0; width:4rem; height:4rem; background:#bbb; border-radius:50%;}
.sns {display:block;position:relative;width:38rem;height:38rem;text-indent:-9999rem;}
.sns:before {content:''; position:absolute; top:50%; left:50%; width:100%; height:100%; background:url('/design/kr/img/layout/sns.png') no-repeat 0 0/800% auto; transform:translate(-50%, -50%); border-radius:6rem;}
.sns.twitter:before {background-color:#000; background-position:0 0;}
.sns.facebook:before {background-color:#445e99; background-position:14.28% 0;}
.sns.kakao:before {background-color:#3a2020; background-position:28.56% 0;}
.sns.blog:before {background-color:#147526; background-position:42.84% 0;}
.sns.band:before {background-color:#147526; background-position:57.12% 0;}
.sns.youtube:before {background-color:#d4272d; background-position:71.4% 0;}
.sns.insta:before {background-color:#9b2870; background-position:85.68% 0;}
.sns.linkin:before {background-color:#0a66c2; background-position:99.96% 0;}
#search_area form p {font-weight:bold; color:var(--p_color); font-size:20rem; }
#search_area .search_keyword {display:none;}
@media all and (max-width:1640px){
	.wrap {max-width:100%; padding:0 40rem;}
	.logo.ir a,
	.logo.ir span {width:290rem; height:52rem;}
}
@media all and (max-width:1440px){
	.logo.ir a,
	.logo.ir span {width:260rem; height:47rem;}
}
@media all and (max-width:1240px) {
	html {font-size:0.95px;}
	.wrap {padding:0 20rem;}
}
@media all and (max-width:768px) {
	html {font-size:0.9px;}
}
@media all and (max-width:376px){
	.logo.ir a,
	.logo.ir span {width:220rem; height:40rem;}
	#search_area form p  { display:none; }
}
@media all and (max-width:321px){
	.logo.ir a,
	.logo.ir span {width:57rem; height:58rem; background:url('/design/kr/img/layout/logo2.png') no-repeat 0 0/contain;}
}

#header {display:flex; align-items:center; justify-content:space-between; /*position:relative;*/ max-width:100%; padding:60rem; padding-bottom:20rem;}
#header .top {position:absolute; top:0; right:60rem; padding:21rem 0 0 0;}
#header .lang {display:flex; align-items:center;}
#header .lang:before {content:''; width:34rem; height:27rem; background:url('/design/kr/img/layout/icon.png') no-repeat 100% 0/300% auto;}
#header .lang > a {display:flex; align-items:center; text-transform:capitalize; letter-spacing:0rem;}
#header .lang > a:before {content:''; width:0; height:0; margin:0 15rem 0 5rem; border-style:solid; border-width:6px 5.5px 0px 5.5px; border-color: #323232 transparent transparent transparent;}
#header .lang > div.list {top:50rem;}
#header .left {display:flex; align-items:center;}
#header .right {display:flex; align-items:center;}
#header .search > a {display:block; width:34rem; height:27rem; background:url('/design/kr/img/layout/icon.png') no-repeat 0 0/300% auto; text-indent:-9999rem; margin-left:15rem;}
#header .sitemap {display:block; width:34rem; height:27rem; background:url('/design/kr/img/layout/icon.png') no-repeat 50% 0/300% auto; text-indent:-9999rem; margin-left:15rem;}
#header .sitemap.mobile {display:none;}
.pc_nav .depth1 > li > a {font-size:21rem; padding:0 27rem; font-weight:600;}
.pc_nav .depth1 > li:nth-of-type(3) .depth2 > li { width:calc((100% - 20rem)/2); }
/*
.pc_nav .depth1 > li > a > span {display:block;}
.pc_nav .depth1 > li > a[target="_blank"] span {position:relative; padding-right:15rem;}
.pc_nav .depth1 > li > a[target="_blank"] span:before {content:''; position:absolute; top:-8px; right:0; margin-right:-17rem; width:44rem; height:44rem; background:url('/design/kr/img/main/icon.png') no-repeat 33.333% 0/400% auto;}
*/
/*사용자설정 시작*/
.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:138rem; }/*펼침메뉴 위치*/
.pc_nav+.nav_bg { top:138rem; }/*검은배경 위치*/
.pc_nav .depth2_wrap .wrap { max-width:1500rem; } /*펼침메뉴 가로사이즈*/
.pc_nav.ver2 dl dt {line-height:1.3;}
.pc_nav.ver2 dl dd {position:absolute; left:-9999rem;}
.pc_nav .depth3 {display:none;}
/*사용자설정 끝*/
.m_nav {display:none;}
@media all and (max-width:1640px){
	#header {padding-left:40rem; padding-right:40rem;}
	#header .top {right:40rem;}
	.pc_nav .depth1 > li > a {padding:0 20rem;}
	.pc_nav .depth2_wrap,
	.pc_nav .depth2_wrap::after { top:132rem; }/*펼침메뉴 위치*/
	.pc_nav+.nav_bg { top:132rem; }/*검은배경 위치*/
}
@media all and (max-width:1440px){
	.pc_nav .depth1 > li > a {padding:0 15rem; font-size:20rem;}
}
@media all and (max-width:1240px){
	#header {padding:20rem;}
	#header .top {display:none;}
	#header .search > a {margin-left:0;}
	#header .sitemap.pc {display:none;}
	#header .sitemap.mobile {display:block;}
	.pc_nav {display:none;}
	.m_nav .site_name strong { line-height:1.3; margin-bottom:10rem; }
	.m_nav .depth1 > li > a {word-break: break-all;}
	.m_nav .depth2_wrap .wrap {padding:0;}
	
}
@media all and (max-width:376px){
	#header .search > a {width:29rem; height:23rem;}
	#header .sitemap {width:29rem; height:23rem; margin-left:10rem;}
}

/* footer */
#footer {background:#1c1e26; color:#fff; padding:40rem 0 80rem; font-weight:300;}
#footer .block {display:flex; align-items:center; justify-content:space-between; margin-top:40rem;}
#footer .logo.ir span {background-position:0 100%;}
#footer .social {display:flex;}
#footer .social a {margin-left:7rem;}
#footer address {display:flex; margin-left:5rem;}
#footer address p {margin-right:40rem;}
#footer address div {margin-right:35rem; }
#footer address div b {margin-right:10rem; color:#fff; opacity:0.4;}
#footer small {display:block; font-size:15rem; color:#fff; opacity:0.4; letter-spacing:0.2rem;}
@media all and (max-width:1440px){
	#footer {padding:20rem 0 60rem;}
	#footer .block {flex-wrap:wrap;}
	#footer small  {width:100%; margin:15rem 0 0 5rem;}
}
@media all and (max-width:1023px){
	#footer > .wrap {position:relative;}
	#footer address  {flex-wrap:wrap;}
	#footer address > * {margin:1rem 0;}
	#footer address p {width:100%; margin-right:0;}
	#footer .social {position:absolute; bottom:0; right:25rem}
}
@media all and (max-width:599px){
	#footer > .wrap {padding-bottom:100rem;}
	#footer address div {width:100%; margin-left:0;}
	#footer .social {right:inherit;}
}

/*sub_layout*/
.location {padding:7rem 0; background:rgb(27,71,158); background:linear-gradient(90deg, rgba(27,71,158,1) 0%, rgba(85,50,147,1) 100%);}
.location > .wrap {display:flex; align-items:center;}
.location li:first-child {position:relative; margin-left:-14rem; padding-right:40rem;}
.location li:first-child:before {content:''; position:absolute; top:50%; right:0; width:29rem; height:1px; background:#fff; opacity:0.5;}
.location li:first-child a {display:block;  width:45rem; height:45rem; background:url(/design/kr/img/layout/icon2.png) no-repeat 0 0/300% auto; text-indent:-9999rem;}
.location li:first-child ~ li a {display:block; position:relative; padding:0 20rem; color:#fff;}
.location li:first-child ~ li a:before {content:''; position:absolute; top:50%; right:-2rem; width:4px; height:4px; background:#fff; border-radius:50%; transform:translateY(-50%); opacity:0.5;}
.location li:last-child a:before {display:none;}
.section {margin-top:80rem; margin-bottom:140rem;}
.section:after {content:''; clear:both; display:block;}
.sub_nav { float:left; width:296rem; box-shadow:0 0 30px rgba(0,0,0,0.1)}
.sub_nav.ver2 h2 {padding:40rem 25rem; background:#18479e; font-weight:700; font-size:27rem; border-radius:0;}
.sub_nav.ver2 h2 span {position:absolute; left:-9999rem;}
.sub_nav.ver2 .depth1 {padding:25rem 25rem 40rem 25rem;}
.sub_nav.ver2 .depth1 > li > a {font-size:18rem;}
.article {float:right; width:calc(100% - 296rem - 80rem); padding-top:20rem;}
.article .top {display:flex; align-items:center; justify-content:space-between;}
.article .top h3 {font-size:41rem; line-height:1.2; font-weight:700;}
.article .util {display:flex; margin:0 -4rem;}
.article .util a {display:block; width:45rem; height:45rem; border-radius:50%;}
.article .util > li > a {margin:0 4rem; border:1px solid #ddd; background:url(/design/kr/img/layout/icon2.png) no-repeat 50% 0/300% auto; text-indent:-9999rem;}
.article .util > li.share > a {background-position:100% 0;}
.article .sns {margin:4rem;}
.article .sns:before {border-radius:50%;}
#content {margin-top:45rem;}
@media all and (max-width:1440px){
	.sub_nav {width:260rem;}
	.article {width:calc(100% - 260rem - 60rem);}
}
@media all and (max-width:1240px){
	.sub_nav {display:none; float:none;}
	.article {width:100%; float:none;}
	.section {margin-top:30rem; margin-bottom:140rem;}
	#content {margin-top:40rem;}
}
@media all and (max-width:599px){
	.location {padding:15rem 0;}
	.location > .wrap {flex-wrap:wrap; margin-left:-20rem;}
	.location li:first-child {display:none;}
	.location li:first-child ~ li a {padding:1rem 20rem;}
	.article .top {flex-wrap:wrap;}
	.article .top h3 {width:100%;}
	.article .util {margin:20rem -4rem 0;}
}