@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
@font-face { /*G마켓 산스*/
font-family: 'GmarketSansMedium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {
font-family: 'GmarketSansBold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight: normal;font-style: normal;}
@import url('https://cdn.rawgit.com/moonspam/nanumsquare/master/Nnanumsquarecss');
/**/

html {overflow: scroll;overflow-x: auto; height:100%;}
body {height:100%;margin: 0px;padding: 0px;background-color:#1f2a5c;  }
img {border: none;vertical-align: top}
h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;font-weight: normal}
ol, ul, dl, li, dt, dd {display: block;margin: 0;padding: 0;list-style: none}
p {	margin: 0;padding: 0; }
a{color:inherit;text-decoration:none;outline:none;select-dummy:expression(this.hideFocus=true);}
a:hover{color:inherit;text-decoration:none}
a:active{color:inherit;text-decoration:none}
a:visited{color:inherit;text-decoration:none}

.wrap{ width:100%; min-width:320px; word-break:keep-all; }


/*header		---------
------------------------*/
.header{ position:absolute; left:0;top:0; z-index:110; width:100%; min-width:320px; z-index:110}
.header > .tit{ position:relative; padding:42px 0 38px 0; font-size:57px;font-family: 'GmarketSansBold'; line-height:60px; letter-spacing:-0.05em; color:#fff; text-align:center;  box-sizing:border-box}
.header > .tit > strong{ position:relative; color:#ffa800}
.header > .left{ position:absolute; left:22px; top:25px; z-index:110}
.header > .left:after{display:block;content:"";clear:both;}
.header > .left > h1{ float:left; width:160px; height:100px; background:url(../images/logo.png) left top no-repeat; background-size:100% auto; text-indent:-999999px; cursor:pointer}
.header > .left > .kr_lg{ float:left; margin:3px 0 0 20px; width:182px; height:44px; background:url(../images/kr_logo.png) left top no-repeat; background-size:100% auto; text-indent:-999999px; cursor:pointer}
.header > .right{ position:absolute; right:50px; top:50px; z-index:105}
.header > .right:after{display:block;content:"";clear:both;}
.header > .right > ul{ float:left}
.header > .right > ul.toplink > li{ float:left; width:24px; height:24px; border-radius:3px; margin-right:4px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; text-indent:-99999px; cursor:pointer}
.header > .right > ul.toplink > li.link1{ background-image:url(../images/toplink_1.jpg)}
.header > .right > ul.toplink > li.link2{ background-image:url(../images/toplink_2.jpg)}
.header > .right > ul.toplink > li.link3{ background-image:url(../images/toplink_3.jpg)}
.header > .right > ul.toplink > li.link4{ background-image:url(../images/toplink_4.jpg)}
.header > .right > ul.toplink > li.link1:hover{ background-image:url(../images/toplink_1_on.jpg)}
.header > .right > ul.toplink > li.link2:hover{ background-image:url(../images/toplink_2_on.jpg)}
.header > .right > ul.toplink > li.link3:hover{ background-image:url(../images/toplink_3_on.jpg)}
.header > .right > ul.toplink > li.link4:hover{ background-image:url(../images/toplink_4_on.jpg)}
.header > .right > ul.lgg > li{ width:48px; height:24px; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:22px; border:1px solid #8f95ae; background-color:#1f2a5c; text-align:center; color:#fff; box-sizing:border-box; cursor:pointer}
.header > .right > ul.lgg > li:hover{ border-color:#fff; background-color:#fff; color:#1f2a5c }
@media only screen and (max-width:1700px) {
.header > .left{ left:3%;}
.header > .right{ right:4%}
}
@media only screen and (max-width:1340px) {
.header > .right{ top:30px;}
.header > .tit{ padding:80px 0 0px 0;}
}
@media only screen and (max-width:900px) {
.header > .tit{ padding:20px 0 19px 0; font-size:30px; line-height:42px;}
.header > .left{ left:12px; top:15px;}
.header > .left > h1{ width:80px; height:50px;}
.header > .left > .kr_lg{ margin:0px 0 0 10px; width:91px; height:22px;}
.header > .right{ right:2.5%; top:20px; }
.header > .right > ul.toplink > li{ width:15px; height:15px; border-radius:2px; margin-right:2px}
.header > .right > ul.lgg > li{ width:32px; height:15px; font-family:Verdana, Geneva, sans-serif; font-size:9px; line-height:12px; }
}
@media only screen and (max-width:670px) {
.header > .tit{ padding:50px 0 0px 0;}
}
@media only screen and (max-width:380px) {
.header > .tit{ padding-top:60px; line-height:35px;}
.header > .tit > strong{ display:block}
}

/*cont		---------
------------------------*/
.cont{ position:relative; z-index:100; padding:140px 0 125px 0; box-sizing:border-box; background-position:center bottom; background-repeat:no-repeat; background-size:cover}
.contbg{ background-image:url(../images/contbg.jpg)}
.cont:after{display:block;content:"";clear:both;}
.cont > .left_map{ position:relative; z-index:100; float:left; width:29.5%; z-index:1000; margin:115px 0 0 13%; }
.cont > .left_map > .maparea{position:relative; display:inline-block;}
.cont > .left_map > .maparea > img{ width:100%; height:auto}
.cont > .left_map > .maparea > span{/*opacity:0.5;background:#0F6;*/cursor:pointer}
.cont > .left_map > .maparea > span.ifez{position:absolute;left:17.5%;top:14.5%;width:auto;height:8.591%;}
.cont > .left_map > .maparea > span.bjfez{position:absolute;left:56.5%;top:56.0%;width:auto;height:10%;}
.cont > .left_map > .maparea > span.gfez{position:absolute;left:37.5%;top:64.5%;width:auto;height:9.014%;}
.cont > .left_map > .maparea > span.dgfez{position:absolute;left:55%;top:42%;width:auto;height:10.703%;}
.cont > .left_map > .maparea > span.cbfez{position:absolute;left:38.5%;top:34.7%;width:auto;height:7.042%;}
.cont > .left_map > .maparea > span.efez{position:absolute;left:52.0%;top:15.563%;width:auto;height:7.042%;}
.cont > .left_map > .maparea > span.ggfez{position:absolute;left:30%;top:28%;width:auto;height:5.633%;}
.cont > .left_map > .maparea > span.gjfez{position:absolute;left:27%;top:58%;width:auto;height:9.718%;}
.cont > .left_map > .maparea > span.ufez{position:absolute;left:64.5%;top:51.5%;width:auto;height:8.873%;}
.cont > .left_map > .maparea > span > img{height:100%;}

.cont > .right{ position:relative; z-index:1100; float:right; width:47%; margin-right:4%;}
.cont > .right > .bottom{ width:100%; padding-top:2%; text-align:right}
.cont > .right > .bottom > a { display:inline-block; height:42px; padding:2px 50px 0 26px; border-radius:6px; font-family:'Noto Sans KR'; font-size:14px; letter-spacing:-0.05em; background:#f18d00 url(../images/btn_arrow.png) right center no-repeat; background-size:29px auto; line-height:40px; color:#fff; }
.cont > .right > .bottom > a:hover{ background-color:#000; }

.cont > .right > .tab{ margin-left:2.1%; width:98%; padding-left:1px; box-sizing:border-box}
.cont > .right > .tab > ul:after{display:block;content:"";clear:both;}
.cont > .right > .tab > ul > li{ float:left; width:10%; height:40px; border:1px solid #2f3868; margin-left:-2px; font-family:'Noto Sans KR'; font-size:15px; background:#141e49; line-height:40px; letter-spacing:-0.03em; color:#8c9dea; text-align:center; cursor:pointer; transform : skew(-0.01deg)}
.cont > .right > .tab > ul > li:hover{ position:relative; border-color:#fff; background-color:#1f2a5c; color:#fff; z-index:10}
.cont > .right > .tab > ul > li.on{ position:relative; border-color:#fff; background-color:#1f2a5c; color:#fff; z-index:10}
.cont > .right > .prgr_cont:after{display:block;content:"";clear:both;}
.cont > .right > .prgr_cont > .box{ float:left; margin:2% 0 0 2%; width:48%; border-radius:8px; background:url(../images/prgr_cont_bg.png) left top repeat; }
.cont > .right > .prgr_cont {  font-family:'Noto Sans KR'; }
.cont > .right > .prgr_cont  h2{ display:inline-block; padding:0 16px; font-size:16px; /*font-weight:bold;*/ letter-spacing:-0.05em; line-height:42px; background-color:#101012; color:#fff; letter-spacing:-0.04em;}
.cont > .right > .prgr_cont  h2 > .areaTitle{ text-transform:uppercase }
.cont > .right > .prgr_cont .chart_r{ position:relative; width:100%; height:0; z-index:0}
.cont > .right > .prgr_cont .chart_r > ul{ position:absolute; bottom:3px; right:4%}
.cont > .right > .prgr_cont .chart_r > ul:after{display:block;content:"";clear:both;}
.cont > .right > .prgr_cont .chart_r > ul > li{ float:left;}
.cont > .right > .prgr_cont .chart_r > ul > li > span{ float:left; display:inline-block; height:14px; font-size:13px; font-weight:bold; line-height:14px; letter-spacing:-0.04em; color:#b5b5b5; }
.cont > .right > .prgr_cont .chart_r > ul > li > span.color{ width:14px; margin:0 5px 0 20px; border-radius:20px; }
.cont > .right > .prgr_cont .chart_r > ul > li.c1 > span.color{ background-color:#75acd1;}
.cont > .right > .prgr_cont .chart_r > ul > li.c2 > span.color{ background-color:#f18d00;}

@media only screen and (max-width:1700px) {
.cont > .left_map{ width:31.77%; margin-left:7%;}
.cont > .right{ float:right; width:55.52%; margin-right:4%;}
}
@media only screen and (max-width:1300px) {
.cont > .left_map{ margin-left:3%;}
.cont > .right{ width:62%; margin-right:3%;}
}
@media only screen and (max-width:1100px) {
.cont > .right > .prgr_cont  h2{ padding:0 12px; font-size:16px; line-height:40px; }
.cont > .right > .prgr_cont .chart_r{ height:20px}
.cont > .right > .prgr_cont .chart_r > ul > li > span.color{  margin:0 3px 0 10px;}
}
@media only screen and (max-width:1040px) {
.cont > .right > .tab > ul > li{ font-size:14px; letter-spacing:-0.05em;}
}
@media only screen and (max-width:900px) {
.cont{ padding:70px 0 50px 0; }
.cont > .left_map{  width:35%; margin:40px 0 0 4%; }
.cont > .left_map > .maparea > img{ width:100%; height:auto}
.cont > .right{ width:58%; margin-right:3%;}
.cont > .right > .bottom > a { height:30px; padding:2px 30px 0 13px; border-radius:4px; font-size:12px; background-size:20px auto; line-height:28px; }

.cont > .right > .tab > ul > li{height:30px; font-size:11px; line-height:30px; letter-spacing:-0.06em;}
.cont > .right > .prgr_cont > .box{ border-radius:6px; }

.cont > .right > .prgr_cont > .box{ border-radius:5px;  }
.cont > .right > .prgr_cont  h2{  padding:0 8px; font-size:13px; line-height:30px; }
.cont > .right > .prgr_cont .chart_r{ height:0px}
.cont > .right > .prgr_cont .chart_r > ul{ - bottom:3px; right:3%}
.cont > .right > .prgr_cont .chart_r > ul > li > span{  height:10px; font-size:11px; line-height:10px;  }
.cont > .right > .prgr_cont .chart_r > ul > li > span.color{ width:10px; margin:0 2px 0 8px; }
.cont > .right > .prgr_cont > .box_last{ width:98%; }
}
@media only screen and (max-width:790px) {
.cont > .left_map{ width:100%; height:380px; margin:10px 0 0 0%; text-align:center}
.cont > .left_map > .maparea{width:auto;height:380px}
.cont > .left_map > .maparea > img{ width:auto; height:100%}
.cont > .right{ width:95%; margint:0 2.5%;}
}
@media only screen and (max-width:670px) {

}
@media only screen and (max-width:500px) {
.cont > .left_map{ height:300px}
.cont > .right{ margin-top:-10px}
.cont > .right > .tab > ul > li{ width:20%; margin-top:-1px}
.cont > .right > .prgr_cont > .box{ margin:2% 0 0 2%; width:98%;}
}
@media only screen and (max-width:380px) {
.cont > .left_map{margin-top:40px; }
}

/*chart*/
.chart_box1{ position:relative; width:100%; height:143px; margin-bottom:30px; padding:3.1%; box-sizing:border-box}
.chart_box1 > .c_box{ position:relative; width:100%; height:100%}
.chart_box1 .axis_y{ width:100%; height:100%; border-bottom:2px solid #192350; box-sizing:border-box;}
.chart_box1 .axis_y li{ width:100%;border-top:1px solid #33466c;box-sizing:border-box}
.chart_box1 .axis_y2 li{ height:50%; }
.chart_box1 .axis_y3 li{ height:33.333%; }
.chart_box1 .axis_x{ position:absolute; left:0; top:0; width:100%; height:100%; margin:0%}
.chart_box1 .axis_x > li{ position:relative; float:left; border-bottom:2px solid #192350; width:20%; height:100%; box-sizing:border-box}
.chart_box1 .axis_x > li:nth-child(odd){ background:url(../images/axis_x_bg.png) left top repeat;}
.chart_box1 .axis_x > li .year{ position:absolute; left:0; bottom:-30px; width:100%; height:30px; font-family:'Noto Sans KR'; font-size:13px; font-weight:400; line-height:30px; /*letter-spacing:-0.05em;*/ color:#fff; text-align:center;transform : skew(-0.01deg);}
.chart_box1 .axis_x > li > ul{ position:relative; left:0; bottom:0; width:100%; height:100%; box-sizing:border-box }
.chart_box1 .axis_x > li > ul > li{ position:absolute; left:0; bottom:0px; width:23.37%;}
.chart_box1 .axis_x > li > ul > li.line1{ left:21%;background-color:#75acd1;}
.chart_box1 .axis_x > li > ul > li.line2{ left:53%; background-color:#f18d00;}
.chart_box1 .axis_x > li span{ display:block}
.chart_box1 .axis_x > li span.pr{ position:relative; width:100%; height:0;}
.chart_box1 .axis_x > li span.pr > .txt{ position:absolute; left:50%; bottom:2px; width:50px; height:17px; margin-left:-25px; font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:17px; letter-spacing:-0.08em; color:#fff; text-align:center }
@media only screen and (max-width:900px) {
.chart_box1{  height:100px; margin-bottom:20px; }
.chart_box1 .axis_x > li .year{ bottom:-20px; height:20px;font-size:12px;line-height:20px;}

}


.chart_box2{ position:relative; width:100%; height:158px; margin-bottom:15px; padding:3.1% 3.1% 3.1% 0; box-sizing:border-box}
.chart_box2:after{display:block;content:"";clear:both;}
.chart_box2 > .left{ float:left; width:39.7%; text-align:center; }
.chart_box2 > .left > .txt{ width:100%; padding-top:0px; font-family:'Noto Sans KR'; font-size:13px; font-weight:500; line-height:17px; /*letter-spacing:-0.05em;*/ color:#fff; text-align:center;}
.chart_box2 > .left  > .circle_chart{ width:100px; height:100px; margin:12px auto 0 auto;}
.chart_box2 > .left  > .circle_chart > img{ width:100%; height:auto}
.chart_box2 > .right{ float:right; width:53.827%;}
.chart_box2 > .right > h3{ display:inline-block; position:relative;margin-top:-20px; padding:7px 17px; border-radius:30px; font-family:'Noto Sans KR'; font-size:14px; font-weight:700; background-color:#a9afc9; line-height:15px; letter-spacing:-0.07em; color:#0c1648; transform : skew(-0.01deg)}
.chart_box2 > .right > .slide{overflow:hidden; position:relative; width:100%; height:120px; box-sizing:border-box; padding:0; margin:9px 0 0 0;}
.chart_box2 > .right > .slide > ul{ position:absolute;}
.chart_box2 > .right > .slide > ul > li:after{display:block;content:"";clear:both;}
.chart_box2 > .right > .slide > ul > li{ width:100%;}
.chart_box2 > .right > .slide > ul > li span{ display:block; float:left; height:24px; box-sizing:border-box; padding:4px 0; font-family:'Noto Sans KR'; font-size:12px; font-weight:500; background-color:#a9afc9; line-height:15px; letter-spacing:-0.07em; color:#939abe; transform : skew(-0.01deg)}
.chart_box2 > .right > .slide > ul > li span.tit{ padding-left:10px; background:url(../images/icon_1.png) 1px 10px no-repeat; background-size:6px 6px; color:#fff}
.chart_box2 > .right > .slide > ul > li span.txt{ padding-left:17px; background:url(../images/icon_2.png) 3px 7px no-repeat; background-size:10px 10px;}
.chart_box2 > .right > .slide > ul > li span.txt > strong{ color:#f18d00;}
@media only screen and (max-width:1370px) {
.chart_box2 > .left  > .circle_chart{ width:80px; height:80px; }
}
@media only screen and (max-width:1100px) {
.chart_box2{  height:178px; }
.chart_box2 > .left{ width:30%;}
.chart_box2 > .left  > .circle_chart{ width:75px; height:75px; }
.chart_box2 > .right{  width:65%;}
.chart_box2 > .right > h3{ margin-top:-0px; }
.chart_box2 > .right > .slide > ul > li{ /*padding:2px 0;*/}
}
@media only screen and (max-width:900px) {
.chart_box2{  height:100px; margin-bottom:20px; }

.chart_box2 > .left{  width:39.7%; }
.chart_box2 > .left > .txt{ padding-top:0; font-size:11px;  line-height:12px; }
.chart_box2 > .left  > .circle_chart{ width:60px; height:60px; margin:8px auto 0 auto;}
.chart_box2 > .right{ width:53.827%;}
.chart_box2 > .right > h3{ margin-top:-15px; padding:3px 7px; font-size:12px; line-height:12px; }
.chart_box2 > .right > .slide{height:80px;margin-top:4px; }
.chart_box2 > .right > .slide > ul{}
.chart_box2 > .right > .slide > ul > li{ }
.chart_box2 > .right > .slide > ul > li span{ height:16px; padding:2px 0; font-size:10px; line-height:12px;}
.chart_box2 > .right > .slide > ul > li span.tit{ padding-left:6px; background-position:1px 7px ; background-size:3px 3px;}
.chart_box2 > .right > .slide > ul > li span.txt{ padding-left:8px; background-position:3px 6px; background-size:5px 5px;}
}
/*link		---------
------------------------*/
.linkarea{padding:10px 0;text-align:center;font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:18px; letter-spacing:-0.04em; color:#c6cee4; text-transform:uppercase; background:#1a2445;}
.linkarea > a{display:inline-block;padding:0 5px;}
.linkarea > a:hover{color:#f18d00 }
@media only screen and (max-width:900px) {
.linkarea{padding:5px 0;font-size:10px;}	
}

/*footer		---------
------------------------*/
.footer{ width:100%; padding:25px 0 30px 0; text-align:center; background-color:#1a244f}
.footer > ul{ width:100%; font-size:0px}
.footer > ul > li{ display:inline-block; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:18px; letter-spacing:-0.04em; color:#57677c; text-transform:uppercase;}
.footer > ul > li.db{display:block;}
.footer > ul > li.txt{ padding-right:7px}
.footer > ul > li.btn{ width:18px; height:18px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; cursor:pointer; text-indent:-9999999px}
.footer > ul > li.btn1{ background-image: url(../images/copylink1.png)}
.footer > ul > li.btn2{ background-image: url(../images/copylink2.png)}
.footer > ul > li.btn1:hover{ background-image: url(../images/copylink1_on.png)}
.footer > ul > li.btn2:hover{ background-image: url(../images/copylink2_on.png)}
@media only screen and (max-width:900px) {
.footer{  padding:15px 0;}
.footer > ul > li{ font-size:10px; line-height:10px; }
.footer > ul > li.txt{ padding-right:4px}
.footer > ul > li.btn{ width:10px; height:10px}
}


/* 원형 그래프 */
.pie_wrap {display:flex;flex-wrap:wrap;width:100%;max-width:100%;}
.pie_res {position: relative;width: 100%;height:100%;padding-bottom: 100%;}
.pie_res > .arrow{position:absolute;right:0;top:50%;width:31px;height:16px;margin-top:-8px;margin-right:-40%;background-image: url(../images/arrow.png)}
.pie {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;}

/* 원형 그래프 비율 표시 - CSS 고정 */
.pie circle {r:25%;cx:50%;cy:50%;fill:transparent;stroke-width:50%;stroke:#ffffff;transform: rotate(-90deg);transform-origin:center;transition:all 1s;}
@media (max-width : 1100px) {
	.pie_res > .arrow{margin-right:-20%;}
}
@media (max-width : 900px) {
	.pie_res > .arrow{margin-right:-100%;}
}
@media (max-width : 767px) {
	.pie_wrap {justify-content: center;}
}
@media (max-width : 500px) {
	.pie_res > .arrow{margin-right:-70%;}
}
@media (max-width : 400px) {
	.pie_res > .arrow{margin-right:-60%;}
}