@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none;}

*, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; }

html { overflow: hidden; overflow-y: auto; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 10px; font-family: 'Noto Sans KR', sans-serif !important;}

body { overflow: hidden; margin: 0; padding: 0; font-size: 1.6rem; line-height: 1.5625; font-weight: 300; color: #555; font-family: 'Noto Sans KR', sans-serif !important;}

header, footer, main, section, article, nav, aside { display: block; }

ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif !important;}

fieldset, hr { display: block; margin: 0; padding: 0; border: 0 none; }

input, select { max-width: 100%; vertical-align: middle; }

input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select::-ms-expand { display: none; }

address, em, i { font-style: normal; }

strong { font-weight: 600; }

a { color: inherit; text-decoration: none; }

a:focus,
a:visited,
a:link,
button:focus,
button:visited{ text-decoration: none;}

button { padding: 0; border: 0 none; background: none; cursor: pointer; }

input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

img { max-width: 100%; width: 100%; border: 0 none; font-size: 0; vertical-align: middle; }

table { width: 100%; border-collapse: collapse; }

caption, legend, .sr_only, .hidden, .blind, .IR { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0); }

.bx-wrapper .bx-loading { display: none; }
.bx-wrapper .bx-viewport { -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; }
#skip_nav { position: absolute; left: 0; top: -1000px; width: 100%; height: 0px; z-index: 1000; line-height: 0px; font-size: 0px; }
#skip_nav a { display: block; text-align: center; width: 100%; line-height: 0px; font-size: 0px; }
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active { position: absolute; left: 0px; top: 1000px; padding: 8px 0; display: block; height: 30px; background: #20262c; font-size: 12px; font-weight: bold; line-height: 18px; color: #fff; }
.txt_left { text-align: left !important; }
.txt_center { text-align: center !important; }
.txt_right { text-align: right !important; }

.clearfix {width: 100%}
.clearfix:after,
.clearfix:before {content: "";display: block; visibility: hidden; clear: both}
.sr-only, .hidden, .blind, .IR {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

#wrap { outline: 0; }
#header {padding: 0 40px;margin-left: auto !important;margin-right: auto !important;position: relative;z-index: 99;}
#header::after { display: block; clear: both; width: 100%; height: 0; content: ''; }
#header .search .control.open { font-size: 3rem; overflow: hidden; position: absolute; right: 5.5rem; bottom: 3.5rem; width: 3rem; height: 3rem; color: #333; text-align: center; line-height: 3rem; }
#header .search .control.open::before { display: block; width: 100%; height: 100%; text-align: center; line-height: inherit; content: ''; }
#header .search .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 100%; width: 100% !important; -webkit-transition: all 0.2s; transition: all 0.2s; }
#header .search .group::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; border-top: 1px solid #ddd; background-color: #fff; }
#header .search .form { width: 50rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; margin: 5rem 0; padding-left: 6rem; color: #000; line-height: 6rem; }
#header .search .form label { font-size: 2rem; position: absolute; left: 0; top: 0; font-weight: 500; }
#header .search .form input { width: 100%; height: 6rem; padding-left: 1rem; border: 0 none; background-color: #efefef; }
#header .search .form button { font-size: 2.5rem; overflow: hidden; position: absolute; right: 0; top: 0; width: 6rem; height: 6rem; text-align: center; line-height: 6rem; }
#header .search .form button::before { display: block; width: 100%; height: 100%; text-align: center; line-height: inherit; content: ''; }
#header .search .close { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 3.5rem; border: 1px solid #ddd; line-height: 3.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; display: inline-block; min-width: 7rem; padding: 0 1rem; background-color: #fff; color: #555; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; right: 0; }
#header .search .close:hover, #header .search .close:focus { background-color: #ddd; color: #fff; }
#header .search.active .group { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }

#logo {float: left;width: 200px;margin: 1.7rem 0;}
#logo a { display: block; }

#gnb1 > ul {float: right;width: calc(100% - 52rem);margin: 33px 200px 0 0;text-align: center;}
#gnb1 > ul > li {position: relative;display: inline-block;margin: 0;padding-bottom: 32px;min-width: 230px;margin: 0 -2px;text-align: center;}
#gnb1 > ul > li > a {position: relative;display: inline-block;padding: 0 2rem;font-size: 18px;font-weight: 500;color: #0B0B0B;transition: all .2s;-webkit-transition: all .2s;text-align: center;}
#gnb1 > ul > li > a:hover,
#gnb1 > ul > li > a:focus,
#gnb1 > ul > li.active > a{color: #30549a;}

#gnb1 > ul > li > a:after{ position: absolute; right: -2rem; top: -1rem; z-index: -1; content: ""; display: inline-block; width: 0; height: 0; background: url(/main/img/layout/star.png) no-repeat; background-position:0 0; }
#gnb1 > ul > li.active > a:after{ width:20px; height:20px; -webkit-animation:fave 1s steps(13); animation:fave 1s steps(13); animation-iteration-count: 1; background-position:-260px 0; -webkit-transition:background 1s steps(13); transition:background 1s steps(13); animation-duration: 1.2s; animation-fill-mode: forwards; }
#gnb1 > ul .submenu { visibility: hidden; overflow: hidden; width: 100%; height: 0; padding: 1.8rem 2rem; opacity: 0; display: block !important; position: absolute; left: 0; top: 100%; z-index: 1; width: 100% !important; }
#header.active #gnb1 > ul .submenu {visibility: visible;overflow: visible;opacity: 1;height: 172px;transition: all .2s;-webkit-transition: all .2s;}
#header #gnb1 > ul .submenu:before{ opacity: 0; position: absolute; top: 0; left: 0; z-index: -1; content:''; display: block; width: 100%; height: 100%; transition: all .2s; -webkit-transition: all .2s; }
#header.active #gnb1 > ul li.active .submenu:before{opacity: 1;background-color: #193682;}
#gnb1 > ul > li .submenu > ul {}
#gnb1 > ul > li .submenu > ul > * {}
#gnb1 > ul > li .submenu > ul > li { position: relative; }

#gnb1 > ul > li .submenu > ul > li > a {position: relative;display: block;font-size: 16px;line-height: 32px;padding: 0;border: 0 none;background: none;font-weight: 400;color: #3B3B3B;text-align: center;transition: all .2s;-webkit-transition: all .2s;}
#gnb1 > ul > li .submenu > ul > li > div { display: none; }
#gnb1 > ul > li.active .submenu > ul > li > a { color: #fff;}
#gnb1 > ul > li .submenu > ul > li > a:hover,
#gnb1 > ul > li .submenu > ul > li > a:focus{ border-bottom-color: #fff; }
#gnb1 > ul > li .submenu > ul > li > a:after{opacity: 0;position: absolute;bottom: 0;left: 53%;content: "";width: 200px;height: 2px;background-color: #fff;transition: all .3s;-webkit-transition: all .3s;transform: scaleX(0);transition: .2s ease-out;margin-left: -100px;}
#gnb1 > ul > li .submenu > ul > li:hover > a:after{transform: scaleX(1);transition: .1s ease-out;}

#gnb1 > ul > li .submenu > ul > li > a:before{/* opacity: 0; */position: absolute;top: 0.01rem;right: 0;/* content: ""; */color: #fff;transition: all .2s;-webkit-transition: all .2s;}
#gnb1 > ul > li .submenu > ul > li > a:hover::before,
#gnb1 > ul > li .submenu > ul > li > a:focus::before{ opacity: 1; }
#gnb1 > ul > li .submenu > ul > li > a:hover:after,
#gnb1 > ul > li .submenu > ul > li > a:focus:after{ opacity: 1; width: 100%; }
#gnb1:before { content: ''; width: 100%; height: 8.6rem; background-color: #fff; position: absolute; left: 0; z-index: -1; top: 0px; transition: all .2s; -webkit-transition: all .2s; }
#gnb1:after{opacity: 0;position: absolute;top: 93px;left: 0;content: '';width: 100%;height: 1px;background-color: #ddd;transition: all .2s;-webkit-transition: all .2s;} 
#header.active #gnb1:after{ opacity: 1; }
#header.active #gnb1:before {height: 265px;box-shadow: 0px 6px 12px #00000029;}
#gnb2 .control {font-size: 0;overflow: hidden;position: absolute;right: 40px;bottom: 30px;z-index: 999;width: 32px;height: 35px;color: #333;text-align: center;line-height: 2.2rem;background: url(../img/common/sitemap.png) no-repeat;background-size: contain;vertical-align: middle;}
#gnb2 .control.close { display: none; }
#gnb2 .control.close::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb2 .control.close:hover::before, #gnb2 .control.close:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
/*#gnb2 .control.close:before { color: #fff; content:"\e921"; font-size: 3rem;}*/
#gnb2 > ul {visibility: hidden;overflow: hidden;width: 0;height: 0;opacity: 0;margin-top: 0;display: block;width: calc(100% + 0px);position: absolute;/* left: 50%; *//* margin-left: -64rem; */top: 0;z-index: 2;color: #fff;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;/* padding: 0 6%; */}
#gnb2 > ul > * {clear: none;/* float: left; */width: 20%;/* height: 100%; */margin: 0;/* border-left: 1px solid #303030; */padding: 100px 30px;vertical-align: top;display: inline-block;}
#gnb2 > ul::before {position: absolute;left: 50%;top: 0;z-index: -1;width: 1000%;height: 100%;margin-left: -500%;content: '';position: absolute;top: 0;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: 10000%;margin: 0;background-color: #1F1F1F;}
#gnb2 > ul > li > a {position: relative;font-size: 26px;display: block;margin-bottom: 33px;font-weight: 600;color: #fff;text-align: left;}
#gnb2 > ul > li > a:before{position: absolute;top: 0;left: -15px;content: "";display: inline-block;width: 5px;height: 100%;background-color: #30549a;}
#gnb2 .submenu > ul > li{text-align: left;}
#gnb2 .submenu > ul > li > a {position: relative;display: inline-block;-webkit-transition: all 0.2s;transition: all 0.2s;padding-left: 13px;font-size: 18px;word-break: keep-all;line-height: 40px;}
#gnb2 .submenu > ul > li > a:before{position: absolute;top: 20px;left: 0;content: "";display: inline-block;width: .5rem;height: .5rem;border-radius: 50%;background-color: #fff;}
#gnb2 .submenu > ul > li > a:hover, #gnb2 .submenu > ul > li > a:focus { color: #30549a; }

#gnb2 > ul > li > a:focus,
#gnb2 .submenu a:focus,
#gnb2 .control.close:focus{ outline: 2px dotted #fff !important; }

#gnb2 .submenu div,
#gnb2 .submenu .lnb-detail {padding-left: .5rem;margin: 1.5rem 0;}

#gnb2 .submenu div ul li,
#gnb2 .submenu .lnb-detail li{line-height: 25px;color: #A0A0A0;font-size: 16px;line-height: 35px;}

#gnb2 .submenu div a:hover,
#gnb2 .submenu div a:focus,
#gnb2 .submenu .lnb-detail a:hover,
#gnb2 .submenu .lnb-detail a:focus{ text-decoration: none; }

#gnb2.active .open { display: none; }
#gnb2.active .close { display: block; background: url(../img/common/close.png) no-repeat; background-size: contain; vertical-align: middle; }
#gnb2.active > ul {visibility: visible;overflow: visible;height: 100%;opacity: 1;/* width: 70%; */text-align: center;}

#footer {clear: both;position: relative;z-index: 0;width: 1500px;max-width: calc(100% - 2%);margin-left: auto !important;margin-right: auto !important;padding: 40px 0;color: rgba(255,255,255,0.5);}
#footer a:focus{ outline: 2px dotted #fff !important; }
#footer::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #363636; }
#footer .btn_top { position: fixed; left: 50%; bottom: -100%; width: 7rem; height: 7rem; line-height: 6.8rem; margin-left: 58rem; border-radius: 100%; border: 1px solid #000; background-color: #fff; color: #000; font-size: 0; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; }
#footer .btn_top::before { display: inline-block; position: relative; top: 1px; vertical-align: top; display: block; content: ''; font-size: 3rem; }
#footer .btn_top:hover, #footer .btn_top:focus { -webkit-animation: updown 0.75s 0.25s infinite alternate; animation: updown 0.75s 0.25s infinite alternate; }
#footer .btn_top.active { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 7rem; height: 7rem; }

#siteinfo {position: relative;padding-left: 350px;font-weight: 100;}
#siteinfo .logo { position: absolute; left: 0; top: 0; width: 200px; }
#siteinfo address span { display: inline-block; margin-left: 2rem; }
#siteinfo .copyright { font-size: 1.6rem; margin-top: 1rem; }
#siteinfo span { margin-right: 1rem; }

#main{ position: relative; }
#contents { }

/*=====top button=====*/
.c-go-top {height: 50px; width: 50px;  border: 1px solid #515151;background: url(../img/common/top.png) no-repeat scroll 0 0 ; bottom: 5px; display: none; opacity: 0.8; position: fixed; right: 5px; text-decoration: none; z-index: 999;border-radius:0 15px;}
.c-go-top:hover,
.c-go-top:focus,
.c-go-top:active,
.c-go-top:visited {color: #fff; outline: 0; text-decoration: none;}


@media (max-width: 1730px) { 
	#gnb1 > ul {float: right;width: calc(100% - 46rem);margin: 33px 180px 0 0;}
	#footer .btn-top { left: auto; right: 1rem; margin-left: 0; } 
}

@media(max-width: 1599px){
	#header { padding: 0 2rem; }
	#logo {width: 180px;}
	#gnb1 > ul > li {min-width: 200px;/* padding-bottom: 2.7rem; */}
	#gnb1 > ul .submenu {/* padding: 3rem 1rem; */}
	#gnb1 > ul > li .submenu > ul > li > a:after{left: 63%;}
	#gnb2 .control {/* right: 40px; */height: 32px;width: 34px;}
	#gnb1 > ul {width: calc(100% - 38rem);margin-right: 13rem;margin: 36px 136px 0 0;}
	#gnb1 > ul > li > a{font-size: 16px;}
	#gnb1 > ul > li.active .submenu > ul > li > a {font-size: 14px;}
	#gnb1 > ul > li .submenu > ul > li > a {font-size: 14px;}
	#footer .btn_top{ left: auto; right: 4rem; margin-left: 0; }
}


@media (max-width: 1279px) { 
	#contents{ float: none; width:  100%; }
	#gnb1 { display: none; }
	#gnb2.active > ul{width: 100%;margin: 0;}
	#gnb2 > ul{ left: 0; margin-left: 0; }
	#gnb2 > ul > *{padding-top: 80px;padding: 100px 20px;}
	#gnb2 .control{top: 25px;}
	#footer .foot_sns{ position: static; margin-bottom: 1rem; }
	.footbanner { padding: 1.5rem 4rem; }
	#footer {padding: 20px 0;text-align: center;}
	#footer .btn-top { bottom: 25rem; }
	#footer .mark { display: none; }
	#footer .related { bottom: 0; left: -1rem; z-index: 2; width: calc(100% + 2rem + 1px); }
	#footer .related .group { width: 100%; height: 4.5rem; margin: 0 1px 0 0; border: 0 none; background-color: #969ca1; color: #fff; line-height: 4.5rem; }
	#footer .related .list { margin-bottom: 0;}
	#fnb { margin-bottom: 20px; }
	#siteinfo { padding-left: 0; }
	#siteinfo .logo { display: inline-block; position: static; margin-bottom: 1rem; } 
	.main_wrap{ padding-top: 6rem; }
	
}

@media (max-width: 1024px) {
	#logo {margin: 10px 0;width: 150px;}
	#hnb .video {top: 12px;right: 80px;}
	#gnb2 .control {height: 32px;width: 34px;right: 3%;top: 20px;}
	#gnb2.active > ul{padding: 0;/* overflow-y: scroll; */box-sizing: border-box;}
    #gnb2.active .close {height: 32px;width: 34px;right: 3%;}

	#gnb2 > ul::before{ top: 0; left: 0; transform: translate(0); -webkit-transform: translate(0); width: 100%; margin-left: 0; background-color: #fff; }
	#gnb2 > ul {top: 70px; width: 100%; max-width: inherit; margin: 0 -1rem; border-top: 1px solid #ddd; color: #333; }
	#gnb2 > ul > li {float: none;width: 100%;height: auto;margin: 0;padding: 0;text-align: left;border: 0;border-bottom: 1px solid #ddd;}
	#gnb2 > ul > li > a {position: relative;margin-bottom: 0;padding: 15px 40px 15px 25px;color: #333;font-size: 18px;}
	#gnb2 > ul > li.active > a{color: #30549a;}
	#gnb2 > ul > li > a:before{ display: none;}
	#gnb2 > ul > li > a::before{display: block;background-color: #000;top: 28px;right: 19px;width: 16px;left: auto;height: 2px;content: '';}
	#gnb2 > ul > li > a::after {position: absolute;display: block;background-color: #000;top: 21px;right: 26px;width: 2px;height: 16px;content: '';}
	#gnb2 > ul > li.active > a::after{display: none;}
	#gnb2 > ul > li.active .submenu {visibility: visible;overflow: visible;width: auto;padding: 0 4rem;height: auto;opacity: 1;background: #f5f5f5;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
	#gnb2 .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
	#gnb2 .submenu ul {/* padding: 1.5rem 0; */}
	#gnb2 .submenu a { display: block; border-radius: 0; color: #333; font-weight: 500; padding-left: 0; font-size: 2rem; }
	#gnb2 .submenu > ul > li > a{margin-top:0;padding-left: 0;font-size: 17px;line-height: 47px;}
	#gnb2 .submenu div, 
	#gnb2 .submenu .lnb-detail{ display: none; }
	#gnb2 > ul > li.active .submenu div, 
	#gnb2 > ul > li.active .submenu .lnb-detail{display: block;padding-left: 0;margin-top: 0;background: #fff;padding: 5px;margin: 10px;}
	#gnb2 > ul > li.active .submenu div a, 
	#gnb2 > ul > li.active .submenu .lnb-detail a{position: relative;font-size: 15px;color: #666;padding-left: 1.5rem;line-height: 30px;}
	#gnb2 > ul > li.active .submenu div a:before, 
	#gnb2 > ul > li.active .submenu .lnb-detail abefore{position: absolute;top: 1.3rem;left: 5px;content: "";display: inline-block;width: 5px;height: 0.1rem;background-color: #666;}

	#gnb2 .submenu > ul > li > a:before{ display: none; }
	#gnb2 .control.close::before{ color: #333; } 
    #gnb2.active .close {/* display: block; */background: url(../img/common/close_m.png) no-repeat;}
}

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