@charset "utf-8";

#header,
#container,
#foot-layout{ width:100%; text-align:center; display: block; position:relative;}
#header .headerWrap,
#container .body-wrap{ width:100%; display:inline-block; position:relative;}
#header .headerWrap{ width: 1280px; height: 95px;}
#foot-layout .foot-wrap{ width:1200px; display:inline-block; position:relative;}

#header{ position:relative; z-index:10; height:95px;}
#header:before { width: 100%; height: 100%; background-color: transparent; content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0;}
#header.active:before,
#header.active1:before,
#header.ov:before{ opacity: 1; background-color:#fff; border-bottom:1px solid #e9e9e9;}
#header .utile-wrap{position:absolute; top:50%; right:0; display:inline-block; float:none;z-index:9999; margin-top:-10px; display: none;}
#header .utile-wrap li{display:inline-block;height: 30px;margin-left: 35px;border: none;padding: 0;position: static; vertical-align: top;}
#header .utile-wrap li:first-child{ margin: 0;}
#header .utile-wrap li.login a{color: #333;border: 1px solid #ddd;border-radius: 50px;padding: 5px 20px;font-weight: 400;vertical-align: middle;}
#header .utile-wrap li.sitemap a,
#header .utile-wrap li.sitemap-mo a{ display:inline-block; height: 100%; float:none; z-index:9999; padding:0; font-size: 1.5rem; color: #000; vertical-align: top;}
#header .utile-wrap li.sitemap a i,
#header .utile-wrap li.sitemap-mo a i{ vertical-align: top; }
.xi-bars:before{content:"\f550"}
#header .utile-wrap li.sitemap-mo{ display: none;}
#header .utile-wrap li.sitemap-mo img{vertical-align: top;}
#header .utile-wrap li.sitemap.ov a{ background: none; font-size: inherit; text-indent: 0;}
#header .utile-wrap li.sitemap a:before{ display: none; }
#header .utile-wrap li.sitemap.ov a:before{/* position: absolute; */top: 50%;margin-top: 0px;right: 0;display: inline-block;content: "\e9af";font-family: 'xeicon';color:#000;font-size: 1.5rem;}
#header .utile-wrap li.sitemap.ov i{ display: none; }
#header .headerWrap .logo{width:170px;height: 40px;margin: 33px 0 27px 0;display:inline-block;float:left;position:relative;z-index:9999;}
#header .headerWrap .logo a{ width:100%; height:100%; display:inline-block;vertical-align:top; color:#000; background: url(../images/main/logo.png) no-repeat; background-size: contain; font-size: 0; text-indent: -9999px;}
#header .headerWrap .sublogo{width: 96px; height: 56px; margin: 23px 0 16px 0;}
#header .headerWrap .sublogo a{background: url(../images/sub/sub_logo.png) no-repeat; background-size: contain; font-size: 0; text-indent: -9999px;}


#gnb{ height:95px; top:0; width:100%; text-align:center; padding:0; display:inline-block; box-sizing:border-box; position:absolute; left:0; z-index:1;}/* height:gnb높이, top:#header에서 위치 */
#gnb .topmenu{position:relative;width:1200px;padding: 0 80px;text-align:center;display:inline-block;box-sizing:border-box;}/* width:컨텐츠 넓이, padding:header의 왼쪽 오른쪽 값으로 1차 메뉴 중앙 정렬 */
#gnb .topmenu > li{ float: left; display:inline-block; width: 20%; height:95px; padding:0; box-sizing:border-box; vertical-align: top; text-align:center;}
#gnb .topmenu > li > a{display: block;position:relative;padding:40px 0;margin:0;text-align:center; width: 100%; height:95px;font-family: 'Noto Sans KR', sans-serif;font-weight: 600;font-size: 20px;color: #595959;line-height:22px;vertical-align:middle;word-break: keep-all;}/* 1차메뉴 높이(오버시 border-bottom값을 뺀 높이) */

#gnb .submenu{ opacity:0; width:100%; min-height: 200px; right:0; padding:0; padding:20px 0; box-sizing:content-box; position:relative; top:-1000px; left:0; right:0; transition: opacity 0.4s;-webkit-transition: opacity 0.4s; text-align: left;}
#gnb .submenu li{ line-height: 1.2; margin-bottom: 15px;  font-size: 0.85rem; height: 20px; text-align: center; letter-spacing: -0.4px;}
#gnb .submenu > ul > li > a{ position: relative; color:#333; font-weight: 400; font-size: 15px;}
#gnb .submenu > ul > li > a:after{ display: none; position: absolute;bottom: 1px;left: 0;z-index: -1;content: "";width: 100%;height: 4px;background: #f29600;opacity: .4;}
#gnb .submenu > ul > li > a:hover,
#gnb .submenu > ul > li > a:focus{ font-weight: 500;}
#gnb .submenu > ul > li > a:hover:after,
#gnb .submenu > ul > li > a:focus:after{ display: block; }

#gnb.mb .lnb-detail{ width:100%; height: 0; padding:10px 0; margin:0; display:inline-block;}
#gnb.on .submenu{ opacity:1; top:0; }
#header.ov:before { opacity: 1; background-color: #fff; border-bottom: 1px solid #e9e9e9;}
#gnb .Allmn-close,
#gnb .topUtile,
#gnb .bottomUtile,
#gnb .lnb-detail{ display:none;}

#header .gnb_bg{ position:absolute; top: 95px; left:0; z-index:-1; height: 0; opacity: 0; transition: 0.2s; -webkit-transition: 0.2s;}
#header.ov .gnb_bg{ visibility: visible; opacity: 1; height: 250px; top:95px; width:100%; display:inline-block; box-sizing:content-box; background-color:#fff;  opacity:1;}
#header.ov .utile-wrap li.login a,
#header.ov .utile-wrap li.sitemap a,
#header.ov .utile-wrap li.sitemap-mo a{ color:#000;}
#header.ov .utile-wrap li.login a{ border-color: #ddd; }
#header.ov #gnb .topmenu > li > a { color: #000; }
#header.ov .headerWrap .logo a{ background: url(../images/main/logo.png) no-repeat; background-size: contain; display: block;}
#header.ov .headerWrap .sublogo a{ background: url(../images/sub/sub_logo.png) no-repeat; background-size: contain}

#gnb.on .topmenu > li.on > a:after,
#gnb.on .topmenu > li.ov > a:after,
#gnb.on .topmenu > li.on:hover > a:after,
#gnb.on .topmenu > li.ov:hover > a:after,
#gnb.on .topmenu > li:hover > a:after,
#gnb.on .topmenu > li > a:focus:after{ position:absolute; bottom:12px; left:50%; margin-left: -6px; content:""; display:inline-block; width:8px; height:8px; border-radius: 50%; background-color: #333;}/* 1차메뉴 오버시 밑줄 */


/* mobile 시작 */
#gnb.mb{ width: 100%; height:auto; padding:0; margin:0; display:inline-block; box-sizing:border-box; position:fixed; top:70px; bottom:0; left:auto; right:0; z-index:9999; background-color: #fff;}
#gnb.mb .gnb-wrap{ width:100%; height:100%; text-align:right; overflow-y:auto; position:relative; top:0; right:0; background-color:#2d4478;}
#gnb.mb .lan{ width:310px; height:30px; background-color:#585d63; padding:0; display:inline-block; box-sizing:border-box; position:absolute; right:-310px; z-index:2;}
#gnb.mb .lan li{ width:33.33%; padding:0; margin:0; display:inline-block; float:left;}
#gnb.mb .lan li a{ width:100%; font-size:14px; color:#fff; text-align:center; line-height:30px; display:inline-block;}
#gnb.mb .topmenu{ width:100%; padding:0; height:100%; padding:0; box-sizing:border-box; position:relative; left:auto; right:-310px; z-index:1; margin-top:0; background-color: transparent; overflow-y: auto;}
#gnb.mb .topmenu > li{ float: none; width:100%; height:auto; padding:0; overflow:hidden;}
#gnb.mb .topmenu > li:first-child > a:before,
#gnb.mb .topmenu > li:first-child > a:after{display:inline-block;}
#gnb.mb .topmenu > li:before{ display:none;}
#gnb.mb .topmenu > li > a{ float:left; width:100%; padding:20px; margin:0; display:inline-block; box-sizing:border-box; position:relative; z-index:1;}
#header.active #gnb.mb .topmenu > li > a{ height:auto; font-size: 1rem; font-weight: 600; color:#333; text-align:left; line-height:1; border-bottom: 1px solid #ededed;}
#header.active #gnb.mb .topmenu > li.down > a{ position: relative; color:#fff; border-bottom: 0;}
#gnb.mb .topmenu > li:last-child a:after{background: url()}
#gnb.mb .topmenu > li.down > a{background-color: #171c61;}
#gnb.mb .topmenu > li > a:after{ position: absolute; top: 20px; right:15px; content: ""; display: inline-block; background: url(../images/t_up.png) no-repeat; width: 20px; height: 20px; color: #333; transition: ease .2s; -webkit-transition: ease .2s;}
#gnb.mb .topmenu > li.down > a:after{ content: "";  background: url(../images/t_down.png) no-repeat;}

#gnb.mb .submenu{ clear:both; opacity:1; top:0; min-height:0; display:none; width: 100%; background-color: #3840ad; padding: 10px 20px; box-sizing: border-box;}
#gnb.mb .submenu > ul > li{ width:100%; padding:0; margin:0;}
#gnb.mb .submenu > ul > li{ padding:0; margin-bottom:0; border-top:0; height: auto;}
#gnb.mb .submenu > ul > li:nth-child(-n+3):before{display: none;}
#gnb.mb .submenu > ul > li > a{ width:100%; height:auto; font-size:17px; font-weight: 400; text-align:left; color:#fff; padding:10px 0; margin:0; border:0; display: inline-block; position:relative; top:auto; transform:none; -webkit-transform:none;}

#gnb.mb .submenu > ul > li.more.on > a{ color:#2d4478;}
#gnb.mb .submenu > ul > li.more.on > a:before{ background-color:#2d4478;}
#gnb.mb .submenu > ul > li.more.on > a:after{ display:none;}

#gnb.mb .lnb-detail{ min-height:100%; height: auto; width:100%; padding:5px 10px; margin:0; display:block; background-color: #9a958a;}
#gnb.mb .lnb-detail > li{ width:100%; display:inline-block; }
#gnb.mb .lnb-detail > li:last-child{ margin-bottom: 0; }
#gnb.mb .lnb-detail > li > a{ width:100%; color:#fff; text-align:left; font-size: 15px; padding:0; margin:0; display:inline-block; box-sizing:border-box; border:0; position:relative;}
#gnb.mb .lnb-detail > li > a:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color:#fff; border-radius: 50%; margin-right: 10px; vertical-align: middle;}
#gnb.mb li.down .submenu,
#gnb.mb li.up .submenu{ display: block;}

#gnb.mb .Allmn-close { width:47px; height:47px; font-size:0; text-indent:-9999px; padding:0; display:inline-block;vertical-align:middle; position: absolute; right: 10px; top: 10px; z-index:3;}
#gnb.mb .Allmn-close span,
#gnb.mb .Allmn-close i{ display: none; }
#gnb.mb .Allmn-close:before{ width:30px; height:2px; background-color:#333; content:""; margin:-1px 0 0 -15px; position:absolute; top:50%; left:50%; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
#gnb.mb .Allmn-close:after{ width:2px; height:30px; background-color:#333; content:""; margin:-15px 0 0 -1px; position:absolute; top:50%; left:50%; transform:rotate(45deg); -webkit-transform:rotate(45deg);}

#header.mb .gnb_bg,
#header.mb .gnb_bg2{ display:none;}
#gnb.mb .gnb .title,
#gnb.mb .gnb .topmenu > li > h2:after,
#gnb.mb .submenu:before,
#gnb.mb li.on > h2:before,
#header.mb .gnb_bg:before,
#gnb.mb .title-wrap{ display:none;}

/* mobile 끝*/

#container{ position:relative; display: block; overflow: hidden;}
#contentWrap{ clear:both; position: relative; width: 1200px; margin: 0 auto;}
#contentWrap:after { content: ''; display: block; width: 100%; clear: both;}

/* 서브비주얼 */

#svisual-layout{ width:100%; height:380px; text-align:center; display:block; position:relative; overflow: hidden;}
#svisual-layout:before{ opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; content: ""; display: inline-block; width: 100%; height: 100%; background-color: #000; animation-name: svisual_motion;animation-duration: 2.5s;animation-iteration-count: 1;}
#svisual-layout .svisual-wrap{ width:100%;  height:100%; display:inline-block; }
#svisual-layout .svisual-wrap .title-wrap{position: absolute;left:0;top: 0;z-index: 1;display:inline-block;width:100%;text-align:center;padding-top: 140px;}/* 비쥬얼 컨텐츠 넓이 */
#svisual-layout .svisual-wrap .title-wrap strong{display:inline-block;position:relative;z-index: 1;font-family: 'Noto Sans KR', sans-serif; font-size: 2.5rem;color:#fff;text-align:center;line-height: 1;animation-name: stitle_motion;animation-duration: 1.5s;animation-iteration-count: 1;}/* 타이틀 폰트 설정 */
#svisual-layout .svisual-wrap .title-wrap strong span{font-weight:900;color:#fff;}/* 타이틀폰트 포인트 설정 */
#svisual-layout .svisual-wrap .title-wrap p{ display:inline-block; position:relative; width:100%; font-size:18px; color:#fff; text-align:center; line-height:22px; margin-top:20px; animation-name: stitle_motion; animation-duration: 2s;animation-iteration-count: 1;}/* 보조문구 설정 */
#svisual-layout .svisual-wrap img{ max-width:none; max-height:none; width:100%; height:auto; padding:0; margin:0; display:inline-block; position:absolute;top: 50%;left:50%; transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}

@keyframes svisual_motion {
  0% {opacity: 0.3;}
  100% {opacity: 0;}
}

@keyframes stitle_motion {
  0% {opacity: 0; transform:translateY(-100px); -webkit-transform:translateY(-100px);}
  50% {opacity: 0.5; transform:translateY(15px); -webkit-transform:translateY(15px);}
  100% {opacity: 1; transform:translateY(0); -webkit-transform:translateY(0);}
}

@media (max-width: 1899px){
	#svisual-layout .svisual-wrap img{ width: auto; height: 100%; }
}



#container .body-wrap{ width:100%; z-index:0;} 
#container > .body-wrap > .contents-wrap{ width:100%; display:inline-block; padding:90px 0 80px 0;}/* 컨텐츠 사이즈 및 아래 여백 설정 */
#contentWrap{ padding-bottom: 80px; }
#content .content_info{ display:none; width:100%; position:relative;}/* 페이지 타이틀 설정 */




#content{ display:inline-block; width:1200px; margin-top:90px; text-align: justify;}
#txt{ display:inline-block; width:100%; text-align: left;}

#f_logo img{max-width: 75%;}
#footer{position: relative; width: 100%; padding: 18px 0 50px; text-align: center;}

@media (max-width:1699px){
	#header,
	#container,
	#snb .nav,
	#foot-layout,
	#svisual-layout .svisual-wrap{ box-sizing:border-box;}
	#gnb .submenu:before{ left:-10px; }

	#header .utile-wrap li.search .clickClose{ margin-right: 0; right: 110px;}
	#gnb .topmenu,
	#header.allMenu #gnb .topmenu{ width:100%;}

	#container{ padding:0;}
}

@media (max-width:1319px){	
	#header{ padding: 0 20px; }
	#container .body-wrap,
	#foot-layout .foot-wrap{ width: 100%; /* padding-bottom:80px; */}
	#header .headerWrap{ width:100%;}
	#header .gnb_bg:before{ display: none;}
	#gnb .topmenu {}
	#gnb .topmenu > li{/* width: 19.95%; */}
	#gnb .submenu li{ font-size: .8rem; }
	#gnb .topmenu > li > a{font-size: 18px;}
	#contentWrap{ width: 100%;}
	#content { width: 100%; }
	#snb .nav:before{ left:22px; }
	#txt .svisual-txtbox{ top: -240px; height: 240px; }
	#txt .svisual-txtbox .svisual-tit{ width: 100%; padding: 0 20px 40px 20px; text-align: center; font-size: 1.3rem; line-height: 1.3; word-break: keep-all;}
	
}
@media (max-width:1023px){
	#header .headerWrap .logo{ float: left; margin: 20px 0 17px 0;}
	#header .headerWrap .logo a{display: block !important;}
	#header .utile-wrap{ margin-top: -15px; }
	#header .utile-wrap li a{ color:#222326; }
	#header .utile-wrap li.sitemap{ display: none; }
	#header .utile-wrap li.sitemap-mo{ display: inline-block; width: 30px; margin-left: 15px;}
	#header,
	#header .headerWrap,
	#gnb{ height: 70px; }
	#header .gnb_bg{ display: none !important;}
	#header.active .utile-wrap{ margin-top: -31px; }
	#header.active #gnb.mb .Allmn-close{ top: -58px; }

	#sns_wrap{ display: none; }
	#contentWrap{ padding: 30px 20px; }
	#contentWrap #content{ float:none; width: 100%; padding-top: 0; min-width: 0; margin-top: 0;}
	#contentWrap .content_info{ text-align: center; }
	#contentWrap .location{ float: none; position: static; display: block; margin-top: 10px; }
	#contentWrap .location > ul{ display: inline-block; }
	
	#svisual-layout{ height: 240px; }
	#svisual-layout .svisual-wrap .title-wrap{ padding-top: 80px; }
	#svisual-layout .svisual-wrap .title-wrap strong{ font-size: 1.4rem; }
	#content > h3{ font-size: 1.8rem; }

	#gnb{ display:none;}
	#gnb.mb .submenu{transition:none;-webkit-transition:none;}
	#gnb .lnb-detail{ display: block;}

	.foot-logo{ display: none; }
	#header .utile-wrap{display: block;}
}

@media (max-width:767px){
	#svisual-layout .svisual-wrap{ padding:0 20px;}
	#header .utile-wrap li.search .search_wrap .search_box{ padding: 50px 0; }
	#header .utile-wrap li.search .searchBox_inner{ width: 80% }
	#header .utile-wrap li.search .clickClose { right: 70px;}
	#header .utile-wrap li.search .ex a,
	#header .utile-wrap li.search .ex .ex_tit{font-size: 14px;}
	#gnb.mb .topmenu > li{ display: block; width:100%; }
	#header.active #gnb.mb .topmenu > li > a > span{ font-size: 17px; line-height: 21px; }
	#gnb.mb li.down .submenu, #gnb.mb li.up .submenu{ display: block; height: auto; }
	#txt .svisual-txtbox{ display: flex;align-items: center;}
	#txt .svisual-txtbox .svisual-tit{ display:block; font-size: 1rem; }
	#txt .svisual-txtbox .svisual-txt2{ margin-top: 20px; }
	#txt .svisual-txtbox .svisual-tit br{ display: none;}
		
	#divpop15{width: 95%;}
	#divpop15 >div{height: auto !important;}
	#divpop15 >div>table{width: 100%;}
	#divpop15 img{width: 100% !important;}
	
	#divpop14{width: 95%;}
	#divpop14 >div{height: auto !important;}
	#divpop14 >div>table{width: 100%;}
	#divpop14 img{width: 100% !important;}

}


/* makes the font 33% larger relative to the icon container */
.xi-x{font-size:1.33333em;line-height:0.75em;vertical-align:-15%}
.xi-2x{font-size:2em}
.xi-3x{font-size:3em}
.xi-4x{font-size:4em;}
.xi-5x{font-size:5em;}
.xi-spin{-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}
@-webkit-keyframes xi-spin{
	0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}
@keyframes xi-spin{
	0%{	-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}
.xi-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.xi-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.xi-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.xi-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform:scale(-1,1);transform:scale(-1, 1)}
.xi-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:scale(1, -1);transform:scale(1, -1)}
:root .xi-rotate-90,:root .xi-rotate-180,:root .xi-rotate-270,:root .xi-flip-horizontal,:root .xi-flip-vertical{-webkit-filter:none;filter:none}
.xi-fw{width:1.28571em;text-align:center}
.xi-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}
.xi-ul > li{position:relative}
.xi-li{position:absolute;top:0.14286em;left:-2.14286em;width:2.14286em;text-align:center}
.xi-li.xi-lg{left:-1.85714em}
.xi-border{padding:.2em .25em .15em;border:solid 0.08em #eee;border-radius:.1em}
.pull-right{float:right;margin-right:.3em}
.pull-left{float:left;margin-right:.3em}


/* 테이블 */
.bbn{border-bottom:none !important;}
.bl{border-left:2px solid #0070c0 !important;}
.br{border-right:2px solid #0070c0 !important;}
.bt{border-top:2px solid #0070c0 !important;}
.br1{border-right:1px solid #e5e5e5 !important}
.bB{border-bottom:2px solid #0070c0 !important;}
table.sub_table { width:100%;border-collapse: separate; border-spacing: 1px; table-layout:fixed;}
	
table.sub_table th { font-size:14px; background-color: #e0e0e0;  border-right:1px solid #ebebeb; text-align:center; padding:5px;}
table.sub_table th:last-child {border-right:0;}

table.sub_table td {font-size:14px;border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; text-align:center;padding:5px; word-break: keep-all;}
table.sub_table td:last-child { border-right:0;}

table.sub_table2 { width:100%;border-collapse: separate; border-spacing: 1px; table-layout:fixed;}
	
table.sub_table2 th { font-size:14px; background-color: #e0e0e0;  border-right:1px solid #ebebeb; text-align:left; padding:5px 15px;}
table.sub_table2 th:last-child {border-right:0;}

table.sub_table2 td {font-size:14px;border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; text-align:left;padding:5px 15px; word-break: keep-all;}
table.sub_table2 td:last-child { border-right:0;}

table.m_table{display: none;}
@media screen and (max-width: 1200px){
.x-scroll{overflow-x:scroll}
}

/*버튼*/
.btn02{background: #7964d7; text-align: center; color: #fff; font-weight: 500; box-sizing: border-box; padding: 8px 14px; font-size: 14px; position: relative;}
.btn02::after{content: ''; width: calc(100% - 12px); height: calc(100% - 12px); position: absolute; left: 5px; top: 5px; border: 1px solid rgba(255,255,255,.5)}


