@charset "utf-8";
/* 임시 */

/* 
	[z-index]
	1.header : 120
	2.popupzone : 100
	3. searchpanel : 200
	4. sitemappanel : 300
	5. m-gnb : 500

	[inner]
	p-inner : 1440(1400) (padding: 0 20)	
	f-inner : 1920 (no-padding)
	m-inner : 1200(1160) (padding: 0 20)	
	s-inner : 808(768) (padding: 0 20)	
*/
/*layout - common*/
html, body{min-height:100%; height: 100%;}
#app{overflow:hidden;}
#page{position: relative;}
.p-inner{max-width:144rem; padding:0 2rem; margin:0 auto;}
.f-inner{max-width:192rem; margin:0 auto;}
.m-inner{max-width:120rem; padding:0 2rem; margin:0 auto;}
.s-inner{max-width:80.8rem; padding:0 2rem; margin:0 auto;}

/*layout common section title*/
.sec-title{color:#222; font-size:2.4rem; font-weight:700; padding:4.2em 0 1.18em; letter-spacing: -0.02em;}
.sec-title .logo-letter{background:url(/share/2022/img/common/symbol_letter.svg) no-repeat left top / 8.6rem auto; display:inline-block; width:8.6rem; height:2.1rem; margin-right:2rem; top:2px; position: relative;}

/* common ui */
.panel-inner{background:#fff; padding:8rem 0 12rem}
.common-close{width:3.8rem; height:3.8rem; background:#000; position: relative; border-radius: 50%;}
.common-close .icon{position: absolute; left:50%; top:50%; color:#fff; font-size:2.4rem; transform: translate(-50%, -50%);}

/*layout - logo*/
#logo{position: absolute; left:2rem; top:3rem;}
#logo a{display:block; width:21rem; height:4.7rem; }
#logo a:after{content:""; display:block; position:absolute; left:0; top:0; width:21rem; height:4.7rem; background:url(/share/2022/img/common/logo_w.svg) no-repeat left center / 21rem 4.7rem; }
#logo a:before{content:""; display:block; position:absolute; left:0; top:0; width:21rem; height:4.7rem; background:url(/share/2022/img/common/logo_c.svg) no-repeat left center / 21rem 4.7rem; opacity: 0;}

/*layout - utill*/
#utill{position: absolute; right:0.4rem; top:3.5rem; display:flex; align-items: center; }
#utill .lang{border:1px solid rgba(255,255,255,0.2); padding:3px; display:flex; align-items: center; border-radius: 4px; margin-right:2rem;}
#utill .lang-btn{display:block; border-radius: 4px; height:2.2rem; line-height:2.2rem; font-family: 'Montserrat', sans-serif; color:#fff; font-weight:900; font-size:1.2rem; padding:0 0.6em; transition: all 0.2s;}
#utill .lang-btn + .lang-btn{margin-left:2px;}
#utill .lang-btn.on{background: #082f7b; color:#fff;}
#utill .lang-btn:hover{background:#eee; color:#222;}
#utill .lang-btn:hover.on{background:#082f7b; color:#fff;}
#utill .sitemap-btn{font-size:2.4rem; color:#fff; width:5rem; height:5rem; display: flex; align-items: center; justify-content: center; position: relative;}
#utill .sitemap-btn i{position: relative; z-index: 1;}
#utill .sitemap-btn:after{content:""; display:block; background:rgba(0,0,0,0.2); width:4rem; height:4rem; border-radius: 8px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s;}
#utill .search-btn{font-size:2.4rem; color:#fff; width:5rem; height:5rem; display: flex; align-items: center; justify-content: center; position: relative;}
#utill .search-btn i{position: relative; z-index: 1;}
#utill .search-btn:after{content:""; display:block; background:rgba(0,0,0,0.2); width:4rem; height:4rem; border-radius: 8px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s;}
#header.on .search-btn:after, #header.on .sitemap-btn:after{background:#eee;}
#header.on #utill .lang, #header.open #utill .lang, .subPage #header #utill .lang{border-color:#ddd}
#header.on #utill .lang-btn, #header.open #utill .lang-btn, .subPage #header #utill .lang-btn{color:#222}
#header.on #utill .lang-btn.on, #header.open #utill .lang-btn.on, .subPage #header #utill .lang-btn.on{color:#fff}
#header.on #utill .sitemap-btn, #header.open #utill .sitemap-btn, #header.on #utill .search-btn, #header.open #utill .search-btn, .subPage #header #utill .sitemap-btn, .subPage #header #utill .search-btn {color:#222;}


/*layout - gnb*/
#header{position: fixed; top:0; left:0; right:0; height:calc(12rem + 1px); z-index: 120; transition:background 0.2s, height 0.2s; overflow: hidden;}
/* .ie11 #header, .ie10 #header, .ieOld #header{position:absolute;} */
#header:after{content:""; display:block; width:100%; height:1px; background:rgba(255,255,255,0.2); position: absolute; top:12rem; left:0; right:0;}
#header .p-inner{display:flex; justify-content: center; position: relative;}
#gnb{display:flex; align-items: stretch;}
#gnb .mn_l1{position: relative; transition: background 0.1s; width:16.8rem;}
#gnb .mn_a1{display:flex; align-items:center; justify-content:center; width:100%; height:12rem; font-size:2rem; font-weight:600; color:#fff; position: relative;}
#gnb .mn_l1.on .mn_a1 span:before{content:""; display:block; width:100%; height:4px; background:#082F7B; position:absolute; left:0; bottom:-20px; border-radius:9999px 9999px;}
#gnb .mn_a1 span{position: relative; font-family: 'Montserrat', 'Pretendard', sans-serif; white-space:nowrap;}
#gnb .mn_a1 em{font-style: normal; font-family: 'Montserrat', sans-serif; font-weight:900;}
#gnb .depth2{padding:2.4rem 0; width:100%; position: relative; z-index: 1;}
#gnb .mn_a2{display:block; width:100%; padding:0.64em 0.4em; font-size:1.7rem; line-height:1.2; text-align: center; color:#222; font-weight:500; letter-spacing:-0.05em}
#gnb .mn_l2.on .mn_a2{color:#014195; font-weight:700;}
#header.on{background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,0.08);}
#header.on #logo a:after{opacity: 0;}
#header.on #logo a:before{opacity: 1;}
#header.on #gnb .mn_a1{color:#222;}
#header.on #gnb .mn_a1 em{color:#014195;}

.subPage #header{background:#fff;}
.subPage #header #logo a:after{opacity: 0;}
.subPage #header #logo a:before{opacity: 1;}
.subPage #header #gnb .mn_a1{color:#222;}
.subPage #header #gnb .mn_a1 em{color:#014195;}


#header.open{background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,0.08);}
#header.open #logo a:after{opacity: 0;}
#header.open #logo a:before{opacity: 1;}
#header.open:after{background:#eee;}
#header.open #gnb .mn_a1{color:#222;}
#header.open #gnb .mn_l1:after{content:""; display:block; width:100%; height:calc(100% - 12rem); position: absolute; left:0; top:12rem}
#header.open #gnb .mn_l1:hover:after{background: rgb(248,249,250); background: linear-gradient(180deg, rgba(248,249,250,1) 0%, rgba(255,255,255,1) 100%);}
#header.open #gnb .mn_l1 .mn_a1:after{content:""; display:block; width:0%; height:2px; background:#014195; position: absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: 1; transition: width 0.2s;}
#header.open #gnb .mn_l1:hover .mn_a1:after{width:100%;}
#header.open #gnb .mn_l1 .mn_a1 span:after{content:""; display:block; width:6px; height:6px; border-radius: 50%; background:#0bda80; position: absolute; right:-10px; top:-10px; transform: scale(0); transition: transform 0.2s;}
#header.open #gnb .mn_l1:hover .mn_a1 span:after{transform: scale(1);}
#header.open #gnb .mn_a1 em{color:#014195;}
#header.open #gnb .mn_a2:hover{color:#014195; font-weight:700}

/*두줄데코띠*/
.deco{width:26rem; height:26rem; overflow: hidden;}
.deco .square{transform: skewX(-22deg); width:13rem; height:45rem;}
.deco .green{background: rgb(127,206,149);
	background: -moz-linear-gradient(90deg, rgba(127,206,149,1) 0%, rgba(103,180,125,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(127,206,149,1) 0%, rgba(103,180,125,1) 100%);
	background: linear-gradient(90deg, rgba(127,206,149,1) 0%, rgba(103,180,125,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fce95",endColorstr="#67b47d",GradientType=1); position: absolute; right:-1rem; bottom:13.5rem;
}
.deco .blue{background: rgb(1,65,149);
	background: -moz-linear-gradient(90deg, rgba(1,65,149,1) 0%, rgba(5,57,125,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(1,65,149,1) 0%, rgba(5,57,125,1) 100%);
	background: linear-gradient(90deg, rgba(1,65,149,1) 0%, rgba(5,57,125,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#014195",endColorstr="#05397d",GradientType=1); position: absolute;  right:-1.8rem; bottom:0;
}

/*지원사업안내 메뉴 숨김*/
#header #gnb .mn_l1.off .depth2{display: none !important;}
#header #gnb .mn_l1.off:hover:after{display:none !important;}

/*푸터*/
#footer{background:#151516; color:#fff; font-size:1.6rem}
.footer-top{border-bottom:1px solid #333; padding:1.8rem 0;}
.footer-nav{float:left;}
.footer-nav .nav-list{display:flex; align-items: center; height:5rem;}
.footer-nav .nav-list li + li{margin-left: 3rem;}
.footer-nav .nav-list .emp{color:#208eff;font-weight:700}
.footer-nav .nav-list a{color:#fff; font-size:1em; font-weight:600; letter-spacing: -0.04em;}
.footer-top .link-wrapper{float:right;}
.footer-sns{float:left; margin-right:3.8rem; padding:0.5rem 0;}
.footer-sns .sns-list{display:flex; align-items: center;}
.footer-sns .sns-list li + li{margin-left:1.8rem;}
.footer-sns .sns-list li:nth-child(4){margin-left:2.1rem;}
.footer-sns .sns-list li a{display:block; width:4rem; height:4rem;}
.footer-sns .sns-list li a img{width:100%; height: auto;}
.footer-family{float:left; width:27rem; height:5rem; box-sizing:border-box; background:#2c2e34; font-size:1em; border-radius: 3px; position: relative;}
.footer-family .family_box{display:flex; height:100%; align-items: center; position: relative;}
.footer-family .arrow{display:flex; align-items: center; justify-content: center; width:5rem; height:5rem; position:absolute; right:0; top:0; color:#96979a; font-size:2.8rem;}
.footer-family .family_box.on .arrow{transform:rotate(180deg)}
.footer-family .select_title{display:block; color:#fff; padding:0 6rem 0 1.4em; font-size:1em; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}  
.footer-family .select_list{position:absolute; bottom:6rem; left:0; width:100%; display:none; overflow:hidden; z-index:2; border-radius: 4px; overflow: hidden;}
.footer-family .select_list .select_list_box li{line-height:50px; background:#000; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing:border-box;}
.footer-family .select_list .select_list_box li:last-child{border-bottom:none;}
.footer-family .select_list .select_list_box li a{display:block; padding-left:30px; font-size:15px; color:#fff;} 
.footer-bottom{font-size:1em; padding:2em 0 5em;}
.footer-info{opacity: 0.5; float:left;}
.footer-logo{margin-bottom: 1.2em;}
.footer-address{margin-bottom:0.3em; line-height:1.2;}
.footer-address span{padding-right:1.4em;}
.footer-etc{float:right; padding-top:1em; display:flex; align-items:center; gap:20px;}

#search-panel{position: fixed; z-index: 200; width:100%; top:0; left:0; right:0; display:none; overflow: visible !important;}
#search-panel .panel-inner{box-shadow: 0 20px 30px rgba(0,0,0,0.03);}
#search-panel .sec-title{margin-bottom:3rem;}
#search-panel .search-bar{border:8px solid #eee; padding:8px; border-radius: 9999px; margin-bottom:3.5rem}
#search-panel .search-input{float:left; width:calc(100% - 8.6rem); padding:0 1.5em; height:4.8rem; line-height:4.8rem; font-size:1.8rem; font-weight: 500; letter-spacing: -0.03em;}
#search-panel .search-input::placeholder{color:#888}
#search-panel .search-btn{float:left; width:8.6rem; line-height:4.8rem;
	border-radius: 9999px; color:#fff; font-weight:700; font-size:1.8rem;
	background: rgb(5,89,192);
	background: -moz-linear-gradient(90deg, rgba(5,89,192,1) 0%, rgba(26,80,151,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(5,89,192,1) 0%, rgba(26,80,151,1) 100%);
	background: linear-gradient(90deg, rgba(5,89,192,1) 0%, rgba(26,80,151,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0559c0",endColorstr="#1a5097",GradientType=1);
}
#search-panel .search-btn:focus{box-shadow:0 0 4px #222;}
#search-panel .search-menu{display:flex; align-items: center;}
#search-panel .search-menu .menu-label{display:flex; align-items: center; font-weight:600; color:#222; font-size:1.6rem; padding-right:2rem; margin-right:2rem; position: relative;}
#search-panel .search-menu .menu-label:after{content:""; display:block; width:1px; height:1.2rem; background:#eee; position: absolute; right:0; top:50%; margin-top:-0.6rem;}
#search-panel .search-menu .menu-label .icon{font-size:2.4rem; color:#3BBB69; font-weight:normal; margin-right:0.4em; margin-top:-2px;}
#search-panel .search-menu .menu-item{display:flex;}
#search-panel .search-menu .menu-item a{margin-right:1em; font-size:1.6rem; font-weight:600; color:#888;}
#search-panel .search-close{position: absolute; bottom:-1.9rem; left:50%; margin-left:-1.9rem;}

#sitemap-panel{position: fixed; z-index: 200; width:100vw; height:100%; top:0; left:0; right:0; bottom:0;  display:none;}
#sitemap-panel .panel-inner{min-height:100%; height:100vh; padding-top:20rem; background:#fff url(/share/2022/img/main/fac/fac-bg.jpg) no-repeat right bottom; display:none; overflow-y: auto;}
#sitemap-panel .m-inner{position: relative; max-width: 124rem; padding:0 4rem}
#sitemap-panel #sitemap{display:flex; justify-content: space-between; margin-top:8rem;}
#sitemap-panel .sec-title{padding-top:0;}
#sitemap-panel .mn_l1{margin-bottom:4rem; overflow: hidden;}
#sitemap-panel .mn_l1.off .depth2{display:none}
#sitemap-panel .mn_a1{font-size:2.4rem; font-weight:700; color:#222; }
#sitemap-panel .mn_a1 em{font-style: normal; font-family: 'Montserrat', sans-serif; font-weight:900; color:#014195}
#sitemap-panel .depth2{padding:6rem 0 0;}
#sitemap-panel .mn_l2{margin-bottom:1.8rem;}
#sitemap-panel .mn_a2{font-size:2rem; line-height:1.2;color:#888; font-weight:600;}
#sitemap-panel .sitemap-close{position: absolute; right:2rem; top:-0.5rem;}

#mgnb-panel{display: none;}




@media screen and (min-width:1200px){
	#utill .sitemap-btn:hover:after{opacity: 1;}
	#utill .search-btn:hover:after{opacity: 1;}
	
}

@media screen and (max-width:1360px){
	#gnb .mn_l1{width:14rem;}
	#gnb .mn_a1{font-size:1.8rem;}
	#gnb .mn_a2{font-size:1.5rem; padding:0.6em 0.2em;}
}

@media screen and (max-width:1200px){
	#header{/*background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,0.08);*/ height: 10rem !important;}
	#header:after{top:calc(10rem - 1px)}
	#header .p-inner{height:100%;}
	#header .gnb-container{display:none;}
	#header #logo{top:2.2rem;}
	#header #utill .lang-btn{ line-height:2.2rem;}
	#utill{top:50%; transform: translateY(-50%);}

	#sitemap-panel{display:none !important}
	.subPage #header.on{box-shadow:none;}
	.subPage #header.on ~ #page .m-snb{box-shadow:0 10px 30px rgb(0 0 0 / 8%)}

	/* 모바일 gnb는 px unit */
	#mgnb-panel{position: fixed; z-index: 200; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.2); display:none;  overflow:hidden}
	#mgnb-panel .gnb-inner{background:#fff; height:100%; min-height:100vh; max-width:500px; overflow:hidden; transform:translateX(-100%); transition: transform 650ms cubic-bezier(0.52,0.96,0.15,1.01);}
	#mgnb-panel.on .gnb-inner{transform:translateX(0)}
	#mgnb-panel .gnb-header{
		background: rgb(2,73,166);
		background: -moz-linear-gradient(90deg, rgba(2,73,166,1) 0%, rgba(11,50,143,1) 100%);
		background: -webkit-linear-gradient(90deg, rgba(2,73,166,1) 0%, rgba(11,50,143,1) 100%);
		background: linear-gradient(90deg, rgba(2,73,166,1) 0%, rgba(11,50,143,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0249a6",endColorstr="#0b328f",GradientType=1);
	}
	#mgnb-panel .row{height:60px; padding:0 24px; display:flex; align-items: center; justify-content: space-between;}
	#mgnb-panel .row +.row{border-top:1px solid rgba(255,255,255,0.2)}
	#mgnb-panel .lang a{display:flex; align-items:center; color:#fff; font-size:14px; font-weight:900; font-family: 'Montserrat', sans-serif;}
	#mgnb-panel .lang a .icon{font-weight: normal; font-size:18px; margin-right:5px}
	#mgnb-panel .close-btn{color:#fff; font-size:22px; width:40px; height:40px; padding:9px; margin-right:-10px}
	#mgnb-panel .frq-menu{display:flex; align-items: center;}
	#mgnb-panel .frq-menu .menu-item{color:#fff; font-size:15px; font-weight:600; position: relative; margin-right:20px; padding-right:20px;}
	#mgnb-panel .frq-menu .menu-item:after{content:""; display:block; width:1px; height:12px; background:#688FC7; position: absolute; top:50%; right:0; margin-top:-7px}
	#mgnb-panel .frq-menu .menu-item:last-child:after{display:none;}
	#mgnb-panel .gnb-body{height:calc(100% - 120px); position: relative;}
	#mgnb-panel .gnb-body:before{content:""; display:block; width:180px; height:100vh; background:#f8f9fa; position: absolute; left:0; top:0;}
	[lang="en"] #mgnb-panel .gnb-body:before{width:186px;}
	#mgnb-panel #mgnb{height:100%; z-index: 1; position: relative; padding:16px 0;}
	#mgnb-panel #mgnb .mn_a1{display:block; width:180px; height:50px; line-height:50px; color:#081D3A; font-weight:800; font-size:17px; padding-left:30px;}
	#mgnb-panel #mgnb .mn_a1 em{font-style: normal; font-family: 'Montserrat', sans-serif; color:#014195}
	#mgnb-panel #mgnb .mn_l1.on .mn_a1{background:#E4EAEF; width:185px; }
	#mgnb-panel #mgnb .depth2{position: absolute; display:none; width:calc(100% - 180px); height:100%; overflow-y:auto; left:180px; top:0; padding:14px 30px;}
	#mgnb-panel #mgnb .mn_l2{border-bottom:1px solid #eee;}
	#mgnb-panel #mgnb .mn_l1.on .depth2{display:block;}
	#mgnb-panel #mgnb .mn_a2{display:block; line-height:1.2; padding:20px 0; color:#777; font-size:16px; font-weight:600; letter-spacing: -0.04em;}
	#mgnb-panel #mgnb .mn_l2.on .mn_a2{color:#014195; font-weight:700}

	.footer-nav{float:none; margin-bottom: 2rem;}
	.footer-top .link-wrapper{float:none; display:flex; justify-content: space-between;}
	.footer-etc, .footer-info{float:none; width:100%;}
	.footer-etc{padding: 4rem 0 5rem;transform: scale(0.6);transform-origin: left top;}
	.footer-logo{margin-bottom: 2.2em;}
	.footer-address span{white-space: nowrap; display:block; margin-bottom: 0.7em;}
	

}

@media screen and (max-width:768px){
	#header #utill .lang{display:none;}

	.footer-nav .nav-list{float:none; display:block; height: auto;}
	.footer-nav .nav-list:after{content:""; display:block; clear:both;}
	.footer-nav .nav-list li{width:calc(50% - 1px); margin:0 2px 2px 0; float:left;}
	.footer-nav .nav-list li a{display:block; line-height: 5rem; background:#222; text-align: center;}
	.footer-nav .nav-list li + li{ margin:0 2px 2px 0; }
	.footer-nav .nav-list li:nth-child(2n){margin-right:0}
	.footer-nav .nav-list li:nth-child(3){margin-bottom:0}
	.footer-nav .nav-list li:nth-child(4){margin-bottom:0}

	#search-panel .panel-inner{padding:4rem 0 6rem}
	#search-panel .s-inner{padding:0 3rem;}
	#search-panel .search-input{font-size:1.6rem;}
	#search-panel .search-bar{border-width: 4px; margin-bottom: 2rem;}
	#search-panel .search-btn{font-size:1.6rem; }
	#search-panel .search-menu {display:none;}

}

@media screen and (max-width:580px){
	.footer-top .link-wrapper{display:block;}
	.footer-sns, .footer-family{float:none; width:100%;}
	.footer-sns .sns-list{justify-content: center; margin-bottom: 2rem;}
	
	.p-inner{padding:0 1.6rem;}
	
}