@charset "utf-8";

    
    
/* CSS Document */
html {}
body { background:#f5f6f8; min-width:1150px;}
footer { text-align:center;padding:30px 0;}
/* .axis--y path { */
/* 	  display: none; */
/* 	} */
	   
/* 	.axis--x path { */
/* 	  fill: Aquamarine; */
/* 	  fill-opacity: 0.4; */
/* 	  stroke: black; */
/* 	  stroke-width: 1; */
/* 	  opacity: 0.2; */
/* 	  shape-rendering: crispEdges; */
/* 	} */
	
/* 	.axis--x line { */
/* 	          stroke: gray; */
/* 	          stroke-width: 1; */ 
/* 	          opacity: 0.2; */
/* 	          shape-rendering: crispEdges; */
/* 	    } */
	    
/* 	.axis--y line { */
/* 	          stroke: gray; */
/* 	          stroke-width: 1; */
/* 	          opacity: 0.2; */
/* 	          shape-rendering: crispEdges; */
/* 	    } */
	
/* 	.line { */
/* 	  fill: none; */
/* 	  stroke: steelblue; */
/* 	   stroke-width: 2.5px;  */
/* 	   shape-rendering: auto;  */
/* 	} */
	
/* 	.circle{ */
/* 		stroke: none; */
/* 		fill: black; */
/* 		background:url(../img/time/progress_stop.png) no-repeat left top; */
/* 	} */
header { height:145px; background:url(../img/common/header_bg.png) repeat-x left top; text-align:center; position:relative;}

header h1 {display: flex; position: absolute; z-index: 9; top: 27px; padding: 0 8px;}
header h1 .kosis_logo { display: block; width: 75px; margin-left: 3px; margin-top: 2px;}
header h1 .logo {display: block; width: 160px; margin-left: 10px;}
header h1 span{width: 1px; height: 1px; overflow: hidden; margin: 0; font-size: 0;}

/* header h1 { position:absolute; left:45px; top:30px;}
header h1 a { display:block;background:url(../img/common/logo_economy.png) no-repeat left top; width:171px; height:47px; text-indent:-1000px; overflow:hidden;} */
header .Help_btn { position:absolute; right:35px; top:39px; border:none; background:url(../img/common/menu_help.png) no-repeat left top; width:126px; height:32px; color:#fff; font-size:16px; line-height:1; text-align:left; padding:0 0 0 50px;}

header nav { display:inline;}
header nav li { display:inline-block; vertical-align:top;}
header nav a { display:block; color:#fff; height:108px; font-size:18px; font-family:'나눔고딕B',sans-serif; padding:40px 50px 0 50px; margin:0 10px; background-size:auto 30%; opacity:0.6; -webkit-transition-duration:0.2s; transition-duration:0.2s; position:relative; text-align:center;}
header nav a:hover { opacity:1;}
header nav a img { vertical-align:middle; margin-right:5px; height:30px;}


header nav li.M_on a { opacity:1; font-size:22px;}
header nav li.M_on a img { height:auto;}
header nav li.M_on a:after { content:''; background:url(../img/sub/menu_arrow.png) no-repeat left top; width:17px; height:9px; position:absolute; display:block; left:50%; bottom:0; margin-left:-8px;}
header nav li li.M_on a:after { content:normal;}
header nav li.M_on li a:after { content:normal;}
header nav ul li ul li a { color:#666; font-size:14px !important; height:37px; padding:8px 0 0 0; box-sizing:border-box;-webkit-transition-duration:0s; transition-duration:0s; opacity:0.6; }
header nav ul ul li a:hover { font-size:16px !important; color:#000; border-bottom:#36c solid 2px; padding:5px 0 0 0; opacity:1;}

header nav ul li.M_on ul li a {opacity:1;}
header nav ul ul li.M_on a { font-size:16px !important; color:#000; border-bottom:#36c solid 2px; padding:5px 0 0 0; opacity:1;}
header nav ul li.M_on ul li.M_on a { font-size:16px !important; color:#000; border-bottom:#36c solid 2px; opacity:1;}
header nav ul ul { position:absolute; left:-1000px; top:0px; height:0px;display:none;}
header nav ul li.M_on ul { left:50%; top:108px; height:37px; display:block;}
header nav ul li:nth-child(1) ul { margin-left:-360px;}
header nav ul li:nth-child(2) ul { margin-left:-190px;}
header nav ul li:nth-child(3) ul { margin-left:150px;}


/* 툴팁_플레이버튼 */
.ToolTip_play {position:absolute; width:auto; z-index:1000;}
.ToolTip_play .ToolTip_box { position:absolute; top:4px; background:#fff; border:#ccc solid 1px; border-radius:2px; width:auto; padding:5px; padding-left:20px; display:none;}
.ToolTip_play .ToolTip_box:before { content:''; background:url(../img/sub/icon_tooltip_arrow.png) no-repeat left top; display:block; width:6px; height:5px; position:absolute; left:5px; top:-5px;}
.ToolTip_play .ToolTip_box:after { content:''; display:block; background:url(../img/sub/icon_answar.png) no-repeat left top; width:12px; height:12px; position:absolute; left:5px; top:8px;}


a.btn_print {position: absolute; margin: -30px 0px 0px 0px; display: block; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px solid rgb(217, 209, 188); border-radius: 10px; padding: 2px 10px 5px 25px; line-height: 1;}
a.btn_print:before {content: '';display: block;width: 12px;height: 10px;position: absolute;background: url(../img/sub/icon_print.png) no-repeat left top;left: 8px;top: 4px;}

/* 콘텐츠영역 */

#pop { padding: 8px 10px 10px 27px; border: #7b6031 solid 1px;}
#pop:before { content: '!'; width: 14px; height: 14px; display: block; background: #f60; border-radius: 7px; position: absolute; left: 10px; top: 10px; text-align: center; color: #fff; font-family: '나눔고딕B',sans-serif; line-height: 1;}

.ContArea{ width:1150px; margin:0 auto; position:relative;overflow:hidden}

.Path { text-align:right; position:absolute; right:0; top:35px;}

.MapInfo { position:relative; padding:90px 205px 0 550px; height:530px;}
.MapInfo h2 { font-size:28px; color:#333; font-family:'나눔고딕B',sans-serif; margin-bottom:5px;}


/* 버튼 영역 ryu*/
.Btn_Group span{word-break: keep-all;}


/* .Map { background:url(../img/sub/map.png) no-repeat 30px 21px; width:575px; height:566px; position:absolute; left:0; top:0;} */
/* .Map span { display:block; position:absolute; width:82px; height:82px; font-size:14px; text-align:center; border-radius:41px; border:#ccc solid 1px; background:repeat left top; padding-top:18px; color:#333; } */
/* .Map span strong { display:block; text-align:center;font-family:'나눔고딕B';} */
/* .Map span.area01 { left:96px; top:71px;} */
/* .Map span.area02 { left:191px; top:71px;} */
/* .Map span.area03 { left:286px; top:71px;} */
/* .Map span.area04 { left:381px; top:71px;} */
/* .Map span.area05 { left:137px; top:161px;} */
/* .Map span.area06 { left:232px; top:161px;} */
/* .Map span.area07 { left:327px; top:161px;} */
/* .Map span.area08 { left:96px; top:251px;} */
/* .Map span.area09 { left:191px; top:251px;} */
/* .Map span.area10 { left:286px; top:251px;} */
/* .Map span.area11 { left:381px;; top:251px;} */
/* .Map span.area12 { left:42px; top:341px;} */
/* .Map span.area13 { left:137px; top:341px;} */
/* .Map span.area14 { left:232px; top:341px;} */
/* .Map span.area15 { left:327px; top:341px;} */
/* .Map span.area16 { left:191px; top:431px;} */
/* .Map span.section1 { background-image:url(../img/sub/pattern_1.png); border-color:#333;} */
/* .Map span.section2 { background-image:url(../img/sub/pattern_2.png); border-color:#717171;} */
/* .Map span.section3 { background-image:url(../img/sub/pattern_3.png); border-color:#a19f9f;} */
/* .Map span.section4 { background-color:#eee; border-color:#ccc;} */
/* .Map span.section5 { background-image:url(../img/sub/pattern_5.png); border-color:#6187b8;} */
/* .Map span.section6 { background-image:url(../img/sub/pattern_6.png); border-color:#014873;} */
/* .Map span.section7 { background-image:url(../img/sub/pattern_7.png); border-color:#333;} */
/* .Map span.section1, .Map span.section6, .Map span.section7 { color:#fff;} */
/* .Map span.section1 strong, .Map span.section6 strong, .Map span.section7 strong { color:#ff0;} */

.Map { background:url(../img/sub/map.png) no-repeat 30px 21px; width:515px; height:566px; position:absolute; left:0; top:0;}
.Map span { display:block; position:absolute; width:70px; height:70px; font-size:14px; text-align:center; border-radius:35px; background:repeat left top; padding-top:13px; color:#fff; text-shadow:#000 0px 0px 2px; }
.Map span:before { content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border:#000 solid 1px;border-radius:35px; opacity:0.3; box-sizing:border-box;}
.Map span strong { display:block; text-align:center;font-family:'나눔고딕B',sans-serif; color:#ff0;}
.Map span.area01 { left:125px; top:80px;}
.Map span.area02 { left:205px; top:80px;}
.Map span.area03 { left:285px; top:80px;}
.Map span.area04 { left:365px; top:80px;}
.Map span.area05 { left:165px; top:165px;}
.Map span.area06 { left:245px; top:165px;}
.Map span.area07 { left:325px; top:165px;}
.Map span.area08 { left:125px; top:250px;}
.Map span.area09 { left:205px; top:250px;}
.Map span.area10 { left:285px; top:250px;}
.Map span.area11 { left:365px;; top:250px;}
.Map span.area12 { left:85px; top:335px;}
.Map span.area13 { left:165px; top:335px;}
.Map span.area14 { left:245px; top:335px;}
.Map span.area15 { left:325px; top:335px;}
.Map span.area16 { left:205px; top:420px;}
.Map span.area17 { left:85px; top:165px;}


.Map1 { background:url(../img/sub/map.png) no-repeat 30px 21px; width:550px; height:566px; position:absolute; left:0; top:0;}
.Map1 span { display:block; position:absolute; width:70px; height:70px; font-size:14px; text-align:center; border-radius:35px; background:repeat left top; padding-top:13px; color:#fff; text-shadow:#000 0px 0px 2px; }
.Map1 span:before { content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border:#000 solid 1px;border-radius:35px; opacity:0.3; box-sizing:border-box;}
.Map1 span strong { display:block; text-align:center;font-family:'나눔고딕B',sans-serif; color:#ff0;}
.Map1 span.area01 { left:125px; top:80px;}
.Map1 span.area02 { left:205px; top:80px;}
.Map1 span.area03 { left:285px; top:80px;}
.Map1 span.area04 { left:365px; top:80px;}
.Map1 span.area05 { left:85px; top:165px;}
.Map1 span.area06 { left:245px; top:165px;}
.Map1 span.area07 { left:325px; top:165px;}
.Map1 span.area08 { left:125px; top:250px;}
.Map1 span.area09 { left:205px; top:250px;}
.Map1 span.area10 { left:285px; top:250px;}
.Map1 span.area11 { left:365px;; top:250px;}
.Map1 span.area12 { left:85px; top:335px;}
.Map1 span.area13 { left:165px; top:335px;}
.Map1 span.area14 { left:245px; top:335px;}
.Map1 span.area15 { left:325px; top:335px;}
.Map1 span.area16 { left:205px; top:420px;}
.Map1 span.area17 { left:165px; top:165px;}


/* blue-white 
span.section1 { background-image:url(../img/sub/pattern_1.png); background-color:#fff; color:#5482a2; text-shadow:none; }
span.section1 strong {color:#004574;}
span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#d6e1e9; }
span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#aec4d3; }
span.section4 { background-color:#81a3ba;}
span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#5482a2; }
span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#2b648c; }
span.section7 { background-image:url(../img/sub/pattern_7.png); background-color:#004574; }*/



/* purple-white
span.section1 { background-image:url(../img/sub/pattern_1.png); background-color:#fff; color:#8387b7; text-shadow:none; }
span.section1 strong {color:#00076a;}
span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#dcddeb; }
span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#b3b5d2; }
span.section4 { background-color:#8387b7;}
span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#54589b; }
span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#292f82; }
span.section7 { background-image:url(../img/sub/pattern_7.png); background-color:#00076a; } */

/* purpleblue-white */
/* span.section1 { background-image:url(../img/sub/pattern_1.png); background-color:#fff; color:#4c6aa5; text-shadow:none; } */
/* span.section1 strong {color:#042e81;} */
/* span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#dfe4ef; } */
/* span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#b2bfd8; } */
/* span.section4 { background-color:#7f94bf;} */
/* span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#4c6aa5; } */
/* span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#20458f; } */
/* span.section7 { background-image:url(../img/sub/pattern_7.png); background-color:#042e81; } */

/* blue-white */
.ColorType1 span.section1 { background-image:url(../img/sub/pattern_1.png); background-color:#fff; color:#5482a2; text-shadow:none; }
.ColorType1 span.section1 strong {color:#004574;}
.ColorType1 span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#d6e1e9; color:#3e6a89; text-shadow:none;}
.ColorType1 span.section2 strong {color:#012f4f;}
.ColorType1 span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#aec4d3; }
.ColorType1 span.section4 { background-color:#81a3ba;}
.ColorType1 span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#5482a2; }
.ColorType1 span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#2b648c; }
.ColorType1 span.section7 { background-image:url(../img/sub/pattern_7.png); background-color:#004574; }

/* purple-white */
.ColorType2 span.section1 { background-image:url(../img/sub/pattern_1.png); background-color:#fff; color:#8387b7; text-shadow:none; }
.ColorType2 span.section1 strong {color:#00076a;}
.ColorType2 span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#dcddeb; color:#7579b1; text-shadow:none;}
.ColorType2 span.section2 strong {color:#00076a;}
.ColorType2 span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#b3b5d2; }
.ColorType2 span.section4 { background-color:#8387b7;}
.ColorType2 span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#54589b; }
.ColorType2 span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#292f82; }
.ColorType2 span.section7 { background-image:url(../img/sub/pattern_7.png); background-color:#00076a; }

/* purpleblue-white */
.ColorType3 span.section1 {background-image:url(../img/sub/pattern_1.png);background-color:#fff;color:#4c6aa5;text-shadow:none;}
.ColorType3 span.section1 strong {color:#042e81;}
.ColorType3 span.section2 { background-image:url(../img/sub/pattern_2.png); background-color:#dfe4ef; color:#4c6aa5; text-shadow:none;}
.ColorType3 span.section2 strong {color:#042e81;}
.ColorType3 span.section3 { background-image:url(../img/sub/pattern_3.png); background-color:#b2bfd8; }
.ColorType3 span.section4 { background-color:#7f94bf;}
.ColorType3 span.section5 { background-image:url(../img/sub/pattern_5.png); background-color:#4c6aa5; }
.ColorType3 span.section6 { background-image:url(../img/sub/pattern_6.png); background-color:#20458f; }
.ColorType3 span.section7 {background-image:url(../img/sub/pattern_7.png);background-color:#042e81;}

.Index { position:absolute; right:0; top:89px;}
.Index span {text-shadow: #000 0px 0px 2px; position: relative; display:block;  width:179px; height:100px; text-align:center; font-size:14px; color:#fff; padding-top:15px; margin-bottom:20px;}
.Index span strong { color:#ff0; display:block; padding:3px 0; font-size:18px; position:relative}
.Index span.Total {background:url(../img/sub/result_box_total.png) no-repeat left top;height:159px;font-size:20px;padding-top:35px;position:relative;}
.Index span.Total strong { font-size:36px;font-family:'나눔고딕B',sans-serif;}

.MenuInfo { font-size:16px; text-align:left; letter-spacing:-1px; margin-bottom:30px;word-break: keep-all;}

button.Btn_view_all1 { width:97px; height:27px; border:#ccc solid 1px; background:#fff url(../img/sub/arrow_open1.png) no-repeat right 8px center; text-align:left; padding:0 0 0 8px; font-size:14px; line-height:1; border-radius:3px; }
.UnitPoint {display: block; margin-top: -22px; text-align: left; height: 25px; padding-top: 10px;}
.ViewPoint { text-align:right; display:block; margin-top:-22px; color:#506eab; font-size:18px;margin-bottom:5px; height: 25px;}
.ViewPoint b { font-family:'나눔고딕B',sans-serif;}

.MapInfo .Legend { width:100%; border-collapse:collapse;}
.MapInfo .Legend th { border-top:#afb8cb solid 2px; border-bottom:#afb8cb solid 2px; padding:3px 0;}
.MapInfo .Legend th:first-child { text-align:left; padding-left:12px; width:130px;}
.MapInfo .Legend td { padding:3px 10px;}
.MapInfo .Legend td img { vertical-align:middle; margin-right:10px;}
.MapInfo .Legend td:last-child { text-align:center;}

.MapInfo .Legend td img { vertical-align:middle; margin-right:10px;}
.MapInfo .Legend span { display:inline-block; width:20px; height:20px; position:relative; border-radius:10px; text-indent:-100px; overflow:hidden; vertical-align:middle;}
.MapInfo .Legend span:before {content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border:#000 solid 1px;border-radius:35px; opacity:0.3; box-sizing:border-box;}


/* StatusBar */
.StatusBar { background:#ccc; border:#b4b3b3 solid 1px; border-radius:5px; position:absolute; width:100%; bottom:70px; left:0; padding:4px 6px; box-shadow:inset -2px -2px 3px #bbb;}
.StatusBar .BarLine {width:1090px; height:auto; overflow:hidden; position:absolute; right:3px; top:5px; padding-right:0px; text-align:center; padding-top:2px;}
.StatusBar .BarLine ul { padding-top:25px; overflow:auto; width:2112px; background:url(../img/sub/status_guide_month.png) repeat-x 20px top;}
.StatusBar .BarLine ul li { font-size:11px; float:left; width:95px; text-align:center; text-indent:-55px;}

.StatusBar .BarLine.Month ul { background-image:url(../img/sub/status_guide_month.png);}
.StatusBar .BarLine.Part ul { background-image:url(../img/sub/status_guide_part.png);}
.StatusBar .BarLine ul:before { content:''; width:20px; height:14px; display:block; background:#ccc; border-right:#fff solid 1px; position:absolute; left:0; top:0;}
.StatusBar .BarLine ul:after { content:''; width:25px; height:14px; display:block; background:#ccc; border-left:#fff solid 1px; position:absolute; right:0; top:0;}

.StatusBar .BarLine .Pointer { display:block; width:18px; height:18px; background:#0099ff; border:#fff solid 2px; border-radius:9px; position:absolute; top:0px; right:0;}


/* Sub지표 */
.SubInfo {}
.SubInfo .Tab { overflow:auto; margin-bottom:20px;}
.SubInfo .Tab a { float:left; width:50%; text-align:center; height:38px; font-size:16px; color:#000; background:#bccbe9; border-bottom:#36c solid 2px; padding-top:7px;}
.SubInfo .Tab a:hover { font-family:'나눔고딕B',sans-serif;}
.SubInfo .Tab a.M_on { background:none;font-family:'나눔고딕B',sans-serif; border:#36c solid 2px; border-bottom:none;}
.SubInfo .Tab label { float:left; width:100%; text-align:center; height:38px; font-size:16px; color:#000; background:#bccbe9; border-bottom:#36c solid 2px; padding-top:7px;}
.SubInfo .Tab label.M_on { background:none;font-family:'나눔고딕B',sans-serif; border:#36c solid 2px; border-bottom:none;}

/* 비교지역선택 */
.AreaSelect { margin-bottom:10px;}
.AreaSelect dt { font-size:14px; color:#333; background:#f3f3f3; border:#ccc solid 1px; border-top-left-radius:4px; border-top-right-radius:4px; height:32px; padding:4px 0 0 10px;font-family:'나눔고딕B',sans-serif; position:relative;}
.AreaSelect dt span { position:absolute; right:10px; top:6px; font-size:12px;font-family:'나눔고딕',sans-serif;}
.AreaSelect dd { background:#fff; border:#ccc solid 1px; border-top:none; border-bottom-left-radius:4px; border-bottom-right-radius:4px; position:relative; position:relative; overflow:auto; padding:15px 15px 10px 15px;}
.AreaSelect dd span { display:block; float:left; width:150px; margin-bottom:5px;}
.AreaSelect dd button { position:absolute; right:20px; top:10px;}


.ChartArea { margin-bottom:10px;}


/* 통계표테이블 */
.DetailData {width:100%; border-collapse:collapse;}
.DetailData thead th { background:#dde5f4; border:#bccbe9 solid 1px; color:#036; font-size:11px; border-bottom:none;font-family:'나눔고딕B',sans-serif;padding:4px; word-break:keep-all;}
.DetailData tbody th {border:#bccbe9 solid 1px; font-size:12px; color:#000;font-family:'나눔고딕B',sans-serif; }
.DetailData tbody td {border:#bccbe9 solid 1px; font-size:12px; text-align:center;padding:3px;}

.DetailMsgData {width:100%; border-collapse:collapse;}
.DetailMsgData thead th { background:#dde5f4; border:#bccbe9 solid 1px; color:#036; font-size:11px; border-bottom:none;font-family:'나눔고딕B',sans-serif;padding:4px;}
.DetailMsgData tbody th {background:#dde5f4; border:#bccbe9 solid 1px; color:#036; font-size:11px; border-bottom:none;font-family:'나눔고딕B',sans-serif;padding:4px; }
.DetailMsgData tbody td {border:#bccbe9 solid 1px; font-size:12px; text-align:left;padding:3px;}

.Btn_view_all2 { background:url(../img/sub/arrow_open2.png) no-repeat right center; padding-right:20px; float:right; margin-bottom:10px;font-family:'나눔고딕B',sans-serif; color:#333;}



/* 통계표 전체 보기 */
.LayerPop { position:fixed; left:-5000px; top:-5000px; width:0%; height:0%; overflow:hidden;  }
.LayerPop:before { content:''; width:100%; height:100%; display:block; position:fixed; left:-5000px; top:-5000px; background:#000; opacity:0.5; z-index:100; overflow:hidden;}
.LayerPop .LayerCont { z-index:101; position:relative; background:#fff; margin:0 auto; height:90%; width:90%; overflow:auto; padding:30px 20px 20px 20px; margin-top:20px;}
.LayerPop .LayerClose { position:absolute; right:21px; top:6px; background:url(../img/sub/icon_close.png) no-repeat right center; padding-right:13px;}
.LayerPop .LayerCloseImg { position:absolute; right:20px; top:15px; width:20px; height:20px; }
.LayerPop .ExcelDown { position:absolute; right:115px; top:6px; padding-right:0px;}

.LayerCont .Btn_Group { margin-bottom:5px;}

.LayerPop.Open {left:0; top:0; width:100%; height:100%; z-index:3000;}
.LayerPop.Open:before {width:100%; height:100%;left:0; top:0;}

.LayerMsgPop { position:fixed; left:-5000px; top:-5000px; width:0%; height:0%; overflow:hidden;  }
.LayerMsgPop:before { content:''; width:100%; height:100%; display:block; position:fixed; left:-5000px; top:-5000px; background:#000; opacity:0.5; z-index:100; overflow:hidden;}
.LayerMsgPop .LayerMsgCont { z-index:101; position:relative; background:#fff; margin:0 auto; height:330px; width:600px; overflow:auto; padding:30px 20px 20px 20px; margin-top:75px; margin-right:50px;}
.LayerMsgPop .LayerMsgClose { position:absolute; right:21px; top:6px; background:url(../img/sub/icon_close.png) no-repeat right center; padding-right:13px;}
.LayerMsgPop .LayerMsgsave {  background:url(../img/sub/0210.png); padding-right:13px;}

.LayerMsgPop.Open {left:0; top:0; width:100%; height:100%; z-index:1000;}
.LayerMsgPop.Open:before {width:100%; height:100%;left:0; top:0;}

/* 인덱스 타이틀 */
.Title { position:relative; padding-top:20px;}
.Title h2 { font-size:32px; color:#333; font-family:'나눔고딕B',sans-serif; display:inline-block; margin-right:10px; margin-bottom:10px;}
.Title .MenuInfo { font-size:12px; color:#666; background:url(../img/sub/icon_!.png) no-repeat left center; padding-left:20px; display:inline-block;}
.Title .PageInfo { background:#8d9dba; display:inline-block; color:#fff; font-size:12px; height:21px; padding:4px 10px; line-height:1; border-radius:11px; position:absolute; right:0; top:35px;}

.Title .PageInfo img { margin:0 2px 0 6px;}
.Title .PageInfo img:first-child { margin-left:0;}

/* 서브인덱스 - 고용 */
.InfoGraphic1 { position:relative; background:url(../img/sub/sindex_bg_1.png) no-repeat 132px top; width:100%; height:680px; margin-top:-30px;}
.InfoGraphic1 span {display:inline-block; text-align:center; color:#333;font-family:'나눔고딕B',sans-serif; position:absolute;}
.InfoGraphic1 span strong {display:block;}
.InfoGraphic1 span strong span {display:inline-block; color:#666;font-family:'나눔고딕',sans-serif; font-size:70%; vertical-align:text-bottom; position:relative;}
.InfoGraphic1 .Depth1 {  font-size:21px; top:135px; left:608px; }
.InfoGraphic1 .Depth1 strong { font-size:32px; color:#f00;}
.InfoGraphic1 .Depth2-1 {  font-size:18px; top:215px; left:360px; }
.InfoGraphic1 .Depth2-1 strong { font-size:24px; color:#08f;}
.InfoGraphic1 .Depth2-2 {  font-size:18px; color:#666; top:215px; left:910px; }
.InfoGraphic1 .Depth2-2 strong { font-size:24px; color:#666;}
.InfoGraphic1 .Depth3-1 {  font-size:18px;  top:400px; left:237px;}
.InfoGraphic1 .Depth3-1 strong { font-size:22px; color:#333;}
.InfoGraphic1 .Depth3-2 {  font-size:18px;  top:400px; left:508px; }
.InfoGraphic1 .Depth3-2 strong { font-size:22px; color:#333;}
.InfoGraphic1 .Depth3-1-1 {  font-size:20px; color:#fff;  top:505px; left:175px; }
.InfoGraphic1 .Depth3-1-1 strong {  font-size:24px; color:#ff0; }
.InfoGraphic1 .Depth3-2-1 {  font-size:20px; color:#fff; top:505px; left:620px;}
.InfoGraphic1 .Depth3-2-1 strong {  font-size:24px; color:#ff0; }

.InfoGraphic1 .Depth3-1-2, .InfoGraphic1 .Depth3-2-2 { font-size:12px; color:#5f7ebe; top:595px;}
.InfoGraphic1 .Depth3-1-2 { left:270px; }
.InfoGraphic1 .Depth3-2-2 { left:710px; }

/* 서브인덱스 - 물가 */
.InfoGraphic2 {}
.InfoGraphic2 .InfoPrice { position:relative; height:236px; box-sizing:content-box; padding:16px 575px 0 0; text-align:center; background:#333 no-repeat left top; border-radius:10px; margin-bottom:30px; box-shadow:#d3d6db 3px 3px 5px;}
.InfoGraphic2 .InfoPrice .Total { background:url(../img/sub/sindex2_total_bg1.png) no-repeat left top; width:142px; height:73px; margin:0 auto; text-align:center; font-family:'나눔고딕EB',sans-serif; color:#fff; font-size:26px; padding-top:14px; text-shadow:#333 1px 1px 1px; margin-bottom:20px;}
.InfoGraphic2 .InfoPrice .Title { color:#fff;font-family:'나눔고딕B',sans-serif; color:#fff; font-size:15px;text-shadow:#333 1px 1px 1px; text-align:center;}
.InfoGraphic2 .InfoPrice .TreeMapArea { width:500px; height:207px; position:absolute; right:25px; top:22px; border-radius:7px; overflow:hidden;}
.InfoGraphic2 .InfoPrice1 { background-image:url(../img/sub/sindex2_bg_1.png);}
.InfoGraphic2 .InfoPrice2 { background-image:url(../img/sub/sindex2_bg_2.png);}
.InfoGraphic2 .InfoPrice3 { background-image:url(../img/sub/sindex2_bg_3.png);}

.InfoGraphic2 .InfoPrice1 .Total { background-image:url(../img/sub/sindex2_total_bg1.png);}
.InfoGraphic2 .InfoPrice2 .Total { background-image:url(../img/sub/sindex2_total_bg2.png);}
.InfoGraphic2 .InfoPrice3 .Total { background-image:url(../img/sub/sindex2_total_bg3.png);}

/* 서브인덱스 - 생산과 소비 */
.InfoGraphic3 { position:relative; background:url(../img/sub/sindex3_bg.png) no-repeat center top; height:740px;}
.InfoGraphic3 img { vertical-align:middle; margin-left:3px;}
.InfoGraphic3 dt { font-size:36px; color:#333; position:absolute;}
.InfoGraphic3 dd { font-family:'나눔고딕B',sans-serif; font-size:22px; color:#fff; text-align:center; position:absolute; width:160px; text-shadow:#000 2px 2px 2px;}
.InfoGraphic3 dd strong {font-size:36px; color:#ff0; display:block;}
.InfoProduce1 dt { left:337px; top:260px;}
.InfoProduce1 dd:nth-child(2) { left:300px; top:70px;}
.InfoProduce1 dd:nth-child(3) { left:300px; top:420px;}
.InfoProduce2 dt { right:310px; top:410px;}
.InfoProduce2 dd:nth-child(2) { right:260px; top:220px;}
.InfoProduce2 dd:nth-child(3) { right:80px; top:400px;}
.InfoProduce2 dd:nth-child(4) { right:260px; top:570px;}


.Btn_Group {/*float:left; 통계설명자료 수정 */ margin-bottom:10px;}
.Btn_Group button {font-family:'나눔고딕B',sans-serif; font-size:12px; color:#fff; background:#698ed8; height:25px; padding:0 8px; border-radius:13px;}
.Btn_Group button img { vertical-align:middle; margin-right:3px;}

.Index span:after { width: 100%; height: 100%; position: absolute; content: ''; display: block; left: 0; top: 0; border: #000 solid 1px; box-sizing: border-box; opacity: 0.2; } 
.Index span:before { width: 100%; height: 100%; position: absolute; content: ''; display: block; left: 0; top: 0; background:url(../img/sub/result_box_bg.png) no-repeat left top; box-sizing: border-box; opacity: 0.1; }
.Index span.section7:before { opacity: 0.2; }

.Go_down {height:45px; width:45px; background:#94aee2; position:fixed; color:#fff; right:0; top:50%; overflow:hidden; text-align:center; padding-top:1px; -webkit-transition-duration:0.2s; transition-duration:0.2s; line-height:1.2; z-index:100;}
.Go_down:before { content:''; background:url(../img/sub/icon_areaselect.png) no-repeat center center; width:42px; height:42px; display:block;box-sizing:border-box; margin:0 auto; margin-bottom:4px; }
.Go_down:hover { width:140px; height:95px; background:#36c;}

/* .SkipNav { position:absoulte; width:100%; left:0; top:0;} */
/* .SkipNav a {margin-top:-27px; background:#039; color:#fff; font-size:12px; height:27px; display:block; padding-top:4px;} */
/* .SkipNav a:focus { margin-top:0;} */












/*///////////////////////////////////////////////////////////////////////////////////////////////////

	2020.08 추가 mayeye

///////////////////////////////////////////////////////////////////////////////////////////////////*/
body {position: relative; background-repeat: no-repeat;background-position: center center; background-size:cover; background-attachment: fixed;}
header {max-width:1280px; width: 100%; height:131px; margin: 0 auto;text-align:center; background: none; position: static; }
header:before{content: ""; display:block; position: absolute; width: 100%; height: 83px; background-color: #3366CC; top: 0; left: 0; z-index: -1;}
header:after{content: ""; display:block; position: absolute; width: 100%; height: 48px; background-color: #fff; top: 83px; left: 0; z-index: -1;}
/* header h1 {position:relative; left: auto; top: auto;} */
/* header h1 a {position:absolute; display:block; left:0; top: 26.5px; background:url(../img/common/logo_economy.png) no-repeat left top; width:251px; height:30px; background-size: contain; text-indent:-1000px; overflow:hidden; z-index: 1; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;} */
header nav {position: relative; display: block; height: 83px;}
header nav > ul {position: absolute; right: 5%; width: 75%; height: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
header nav > ul > li {display:inline-block; width: 25%; height: 100%; position: relative; text-align: center;}
header nav a {display:block; color:#fff; height:auto; font-size:18px; font-family:'나눔고딕B',sans-serif;  background-size:auto 30%; -webkit-transition-duration:0.2s; transition-duration:0.2s; position:relative; text-align:center; box-sizing: border-box; opacity: 1;}
header nav > ul > li > a{position:relative; display: inline-block; font-size: 22px; line-height: 30px; margin: 26.5px 0;}
header nav > ul > li:first-child > a{padding:0 0 0 2.2em;}
header nav > ul > li:nth-child(2) > a{padding:0 0 0 3em;}
header nav > ul > li:nth-child(3) > a{padding:0 0 0 3em;}
header nav > ul > li:first-child > a:before{content:""; position:absolute; top:-0.1em; left:0; width:2em; height:2em; background:url(../img/common/menu1.png) no-repeat left top;}
header nav > ul > li:nth-child(2) > a:before{content:""; position:absolute; top:-0.3em; left:0; width:2.4em; height:2em; background:url(../img/common/menu2.png) no-repeat left top;}
header nav > ul > li:nth-child(3) > a:before{content:""; position:absolute; top:-0.15em; left:0; width:2.3em; height:3em; background:url(../img/common/menu3.png) no-repeat left top;}
header nav li.M_on a:after{bottom: -26.5px;}
header nav > ul > li ul li {margin-left: 10px;}
header nav > ul > li ul li:first-child{margin-left: 0;}
header nav a img { display: none;}
header nav ul li ul li a {color:#000; height:48px; margin: 0 10px 0 0; line-height: 46px; padding:0; box-sizing:border-box;-webkit-transition-duration:0s; transition-duration:0s; opacity: 1; font-size: 16px !important;}
header nav ul ul li a:hover {padding: 0;}
header nav ul li.M_on ul li a {padding:0; font-size: 16px !important;}
header nav ul li.M_on ul { width: max-content; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content; left:calc(50% - 25em); top:83px; width:50em; height:37px; z-index: 1;}
header nav ul li:nth-child(1) ul { margin-left:0px;}
header nav ul li:nth-child(2) ul { margin-left:0px;}
header nav ul li:nth-child(3) ul { margin-left:0;}

#Menu .btn_mobile{
    opacity:1; display:none; position: absolute; right:20px; top:calc((83px / 2) - 10px); padding:0; margin:0; width:24px; height:20px; 
}
#Menu .btn_mobile:before,
#Menu .btn_mobile:after,
#Menu .btn_mobile>span{
    content:""; display:block; position: absolute; left:0; width:100%; height:4px; background-color:#fff;
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
}
#Menu .btn_mobile:before{top:0;}
#Menu .btn_mobile:after{bottom:0;}
#Menu .btn_mobile>span{top:calc(50% - 2px); overflow:hidden; text-indent:-1000px;}



body[data-menu="on"] #Menu .btn_mobile:before{
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
body[data-menu="on"] #Menu .btn_mobile:after{
    -webkit-transform-origin:100% 100%;
    transform-origin:100% 100%;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
body[data-menu="on"] #Menu .btn_mobile>span{width:0;}

.menucontrol {
/* 	position:"absolute"; */
/* 	right:"0"; */
/* 	top:"0"; */
/* 	z-index:"100"; */
/* 	width:"40px"; */
/* 	height:"60px"; */
/* 	background-color:"rgba(0,0,0,0)"; */
/* 	border-left:"white solid 1px"; */
	display:none;
	}	


/* 반응형 화살표 */
.mobile_table{position:relative;}
.mobile_hand{position:absolute;top:50px;left:50%;width:44px;height:39px;display:none;background:url(../img/sub/icon_mobileheands.png);animation:mobile_hand 1.5s infinite;-webkit-animation:mobile_hand 1.5s infinite;-ms-animation:mobile_hand 1.5s infinite;transform: translateX(-50%);font-size:0;}
@keyframes mobile_hand{0%{left:50%;}100%{left:60%;opacity:0;}}
@-webkit-keyframes mobile_hand{0%{left:50%;}100%{left:60%;opacity:0;}}
@-ms-keyframes mobile_hand{0%{left:50% !important;}100%{left:60%;opacity:0;}}
/* // 반응형 화살표 */

@media only screen and (max-width: 1310px){
    body{min-width:100%;}
    header h1 a{left:20px;}
    header nav > ul{right: 0;}
    header nav ul li{position: relative;}
    header nav ul li ul{white-space: nowrap;}
    header nav ul li:nth-child(1) ul,
    header nav ul li:nth-child(2) ul{}
    header nav ul li:nth-child(3) ul{left:auto; right:0; margin-left:0;}

    header h1{flex-direction: column; top: 20px; padding-left: 22px;}
    header h1 .logo{width: 140px;}
    header h1 .logo{margin-left: 0; margin-top: 5px;}
    header h1 a{height: 22px;}


    .table_wrap{overflow-x: auto; width:100%;}
    .table_wrap > table{width:100%;}       

    
    .MapInfo{height:490px; padding:50px 205px 50px 455px;}
    .MapInfo [class*="Map"]{
        top:20px;
        -webkit-transform:scale(0.85);
        transform:scale(0.85);
        -webkit-transform-origin: 0 0;       
        transform-origin: 0 0;
    }
    .MapInfo .Index{top:50px;}
    .ContArea{width:calc(100% - 60px); margin:0 30px;}
    .Btn_Group{position: relative !important; right:auto !important; margin-top:0 !important;}
    #progress_fixed{overflow-x:auto; position: relative;}
    #progress_fixed .ToolTip_play{left:3px; top:-22px;}
    #genderArea > svg{width:100%; height:auto;}

    #tabMwn #hidTab1 .Btn_Group{text-align: right;}
    
    
}



@media only screen and (max-width: 1024px){
	body[data-menu="on"]{overflow:hidden;}
    header{height:83px;}
    header:after{display: none;}
    #Menu .btn_mobile{display: block;}
    #GNBMenu{display:none; position: fixed; right:0; top:83px; z-index:2000; width:223px; height:100%; font-size:17px; background-color:#fff;}
    #GNBMenu:before{content:""; display: block; position: absolute; right:0; top:0; z-index:-1; width:2000px; height:100%; background-color:rgba(0,0,0,0.5);}
    #GNBMenu:after{content:""; display: block; position: absolute; right:0; top:0; z-index:10; width:100%; height:100%; background-color:#fff;}
    #GNBMenu>li{display: block; position: relative; z-index:200; width: 100%; height: auto;}
    #GNBMenu>li:not(:first-child){border-top:1px solid #fff;}
    #GNBMenu>li>a{opacity:1; width: 100%; height:auto; padding:15px 30px; margin:0; text-align:left; font-family:"나눔고딕",sans-serif; font-size:1em; color:#fff; background-color:#3366CC;}
    #GNBMenu>li>a:before,
    #GNBMenu>li>a:after{content:""; display:block; position: absolute; left:auto; right:1em; top:calc(50% - 0.25em); width:0.6em; height:0.2em; margin:0; background-color:#fff;}
    #GNBMenu>li>a:before{
        -webkit-transform-origin:0 0;
        transform-origin:0 0;
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
        -webkit-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    #GNBMenu>li>a:after{
        -webkit-transform-origin:100% 0;
        transform-origin:100% 0;
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }
    #GNBMenu>li>a>img{display:none;}
    #GNBMenu>li.M_on>a{font-family:"나눔고딕B",sans-serif;}
    #GNBMenu>li.M_on>a:before{
        top:calc(50% + 0.25em);
        -webkit-transform-origin:0 100%;
        transform-origin:0 100%;
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }
    #GNBMenu>li.M_on>a:after{
        top:calc(50% + 0.25em);
        -webkit-transform-origin:100% 100%;
        transform-origin:100% 100%;
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    #GNBMenu>li>ul{
        position: relative; left:auto; top:auto; height:auto !important; padding:0.5em 0; margin:0 !important;
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    #GNBMenu>li>ul>li{float:none; display:block;}
    #GNBMenu>li>ul>li>a{display: block;height:auto;padding:0.3em 2.2em;margin:0;text-align:left;font-family:"나눔고딕",sans-serif;font-weight:300;font-size:0.8em;color:rgba(34,34,34,0.8);}
    #GNBMenu>li>ul>li>a:before{content:"- ";}
    
    header nav > ul > li ul li{margin-left:0;}
    header nav > ul > li ul li a{line-height:35px;}
     header nav > ul > li ul li a:hover{border-bottom:0;}

    #GNBMenu>li>ul.M_on>li.M_on>a{font-weight:500; font-size:0.8em !important; color:rgba(34,34,34,1);}
/*     #GNBMenu>li>ul.M_on>li.M_on>a{border-bottom:none;} */

    body[data-menu="on"] #GNBMenu{display:block;}
    body[data-menu="on"] header:before{content:""; position: absolute; left:0; top:0; width:100%; height:83px; background-color:#0E2B65;}
	
	.menucontrol {
	position:absolute;
	right:0;
	top:0;
	z-index:100;
	width:45px;
	height:60px;
	background-color:rgba(0,0,0,0);
	border-left:white solid 1px;
	display:block;
	}
}
@media only screen and (max-width: 900px){
	.UnitPoint {padding-top: 4px;}
}
@media only screen and (max-width:1035px) and (min-width: 900px){
	.MapInfo .Legend td:first-of-type{width:70% !important;}
}
@media only screen and (max-width:1024px) and (min-width: 900px){
	.MapInfo{padding:50px 205px 50px 380px;}
	.MapInfo [class*="Map"]{left:-35px; top:40px; width:445px; height:515px;}
	.MapInfo .Legend td:first-of-type{width:70% !important;}
}
@media only screen and (max-width: 900px){
	.Btn_Group button:nth-child(2){display:none !important;}
    .MapInfo{height:auto; padding:30px 0 12em 430px; margin-bottom:2em; font-size:16px;}
    .MapInfo [class*="Map"]{
        top:30px;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    .MapInfo h2{font-size:1.5em;}
    .MapInfo .MenuInfo{font-size:0.9em;}
    .MapInfo .ViewPoint{font-size:1em;}
    .MapInfo .Legend{font-size:0.8em;}
    .MapInfo .Index{right:auto; top:auto; left:0; bottom:0; width:100%; height:7em; margin:0 auto;}
    .MapInfo .Index > span{float: left; width:calc((100% - 1px - 20px) / 3); height:100%; line-height:1.5; padding-top:1.4em; font-size:0.8em;}
    .MapInfo .Index > span:not(:last-child){margin-right:10px;}
    .MapInfo .Index > span.Total{padding-top:2.2em; background:#333;}
    .MapInfo .Index > span#minimum{background:#fff;}
    .MapInfo .Index > span:before{display:none;}
    .MapInfo .Index > span strong{line-height:1.5; font-weight:600; font-size:1.8em;}

    .AreaSelect{margin-bottom: 13em; font-size:16px;}
    .AreaSelect dd{overflow:visible; height:auto; font-size:0.8em;}
    .AreaSelect dd > div:after{content:""; display:block; clear: both;}
    .AreaSelect dd button{
        position: absolute; left:50%; top:calc(100% + 30px); width:7em; height:7em; font-size:1.5em;
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%);
    }
    .AreaSelect dd button img{opacity:0; position: absolute;}
    .AreaSelect dd button:before{
        content:"적용"; display:table-cell; width:7em; height:7em; padding-bottom:1em; text-align: center; vertical-align:middle; color:#fff; background-color:#3366CC; box-sizing:border-box;
        -webkit-border-radius:50%;
        border-radius:50%;
    }
    .AreaSelect dd button:after{
        content:"→"; position: absolute; left:50%; top:calc(50% + 1em); color:#fff;
        -webkit-transform:translate(-50%,-50%) rotate(90deg);
        transform:translate(-50%,-50%) rotate(90deg);
    }
    .AreaSelect dd span{width:20%;}

    [id *="statUnit"]{display:none;}
    [id *="hidTab"] .Btn_Group{float:none; margin:1em 0 2em; font-size:16px;}
    [id *="hidTab"] .Btn_Group:after{content:""; display:block; clear: both;}
    [id *="hidTab"] .Btn_Group button{
        float: left; width:calc((100% - 1px - 20px) / 3); height:auto; padding:1em 0.5em; font-size:1em;
        -webkit-border-radius:2em;
        border-radius:2em;
    }
    [id *="hidTab"] .Btn_Group button:not(:last-child){margin-right:10px;}
    [id *="hidTab"] .Btn_Group button img{display:none;}
}
@media only screen and (max-width: 820px) and (min-width:751px){
	.MapInfo .Legend td:first-of-type{width:70% !important;}
}

@media only screen and (max-width: 750px){
    .MapInfo{padding:30px 0;}
    .MapInfo [class*="Map"]{
        position: relative; top:auto; margin:0 auto;
        -webkit-transform:scale(1);
        transform:scale(1);
    }
    .MapInfo .Index{position:relative; left:auto; bottom:auto; margin-top:2em;}
    .AreaSelect dd span{width:25%;}
    [id *="hidTab"] .Btn_Group button{padding:0.6em;}
    

}

 

@media only screen and (max-width: 662px){	
	.mobile_hand{display:block}
}

@media only screen and (max-width: 640px){
    #Menu .btn_mobile{right: 15px;}
    
    footer img{display: inline-block; width: 111px; height: 38px;}
}

@media only screen and (max-width: 600px){
    .MapInfo{padding:0;}
    .MapInfo [class*="Map"]{
       left:calc(50% - 25px); width:500px; height:430px;
        -webkit-transform:scale(0.8) translateX(-50%);
        transform:scale(0.8) translateX(-50%);
    }
    .AreaSelect dd span{width:calc((100% - 1px) / 3);}
    [id *="hidTab"] .Btn_Group button{font-size:0.7em;}
}
@media only screen and (max-width: 400px){
    .MapInfo [class*="Map"]{
        width:455px; height:370px;
        -webkit-transform:scale(0.7) translateX(-50%);
        transform:scale(0.7) translateX(-50%);
    }
    .MapInfo .Index{font-size:0.7em;}
    .AreaSelect{margin-bottom:10em;}
    .AreaSelect dd span{width:50%;}
    .AreaSelect dd button,
    .AreaSelect dd button:before{width:5em; height:5em;}

    [id *="hidTab"] .Btn_Group button{height:4em; line-height:1.3; padding:0.7em 1em;}    
   
}



/*/////////////////////////////////////////////////////////////////////////////////////////////////////

    컨텐츠
    
    고용 <body id="empl" class="bg_01"> 
    생산과 소비 <body id="prod" class="bg_03">

/////////////////////////////////////////////////////////////////////////////////////////////////////*/

div#Contents{background-repeat: no-repeat; position:relative;}
div#Contents .con_wrap{width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; font-family: "Noto Sans KR",sans-serif; transition: all 0.3s ease;}
div#Contents .con_wrap > div{overflow:hidden; padding: 15px 0 15px;}
div#Contents .con_wrap h3{display: none; font-family: "NanumSquare",sans-serif;}

/*고용 <body id="empl"> */
div.bg_01{background-image: url(../img/sub/empl_bg.jpg);position: fixed;width: 100%;height: 100%;z-index:-1}
#empl .goyong > div{float: left; width:25%; height: 536px; margin-left: 3%; margin-bottom: 22px; padding: 65px 30px; border-radius: 20px; -webkit-border-radius: 20px; box-sizing: border-box;letter-spacing: -0.03em;}
#empl .goyong > div:after{content: ""; display: block; clear: both;}
#empl .goyong > div:first-of-type{width: 28%;margin-left: 0; background-color: #3366CC; color: #fff;}
#empl .goyong > div:first-of-type p{position: relative; line-height: 40px; font-size: 30px; font-weight: 300;}
#empl .goyong > div:first-of-type p:before{content: ""; display:block; position: absolute; top: -35px; left: 0;width: 23px; height: 22px; background: url(../img/sub/empl_bfwh.svg) no-repeat center center; background-size: contain;}
#empl .goyong > div:first-of-type p span{display: block;}
#empl .goyong > div:first-of-type p strong{font-size: 37px; font-weight: 900; font-family: "NanumSquare",sans-serif;}

#empl .goyong > div.s_box{padding: 0; color: #000;position:relative;}
#empl .goyong > div.s_box > div{position: relative;width: 100%;height: calc((100% - 18px) / 2);padding: 65px 30px;border-radius: 20px;-webkit-border-radius: 20px;background-color: #fff;border: 1px solid #3366CC;box-shadow: 0 0 10px rgba(92, 97, 139, 0.13);}
#empl .goyong > div.s_box:before{content: ""; display: block; position: absolute; width: 28px; height: 28px; background-color: #3366CC; right: 0; margin-right: -14px; top: 25%; margin-top: -10px; transform: rotate(45deg); border-radius: 3px; -webkit-border-radius: 3px; z-index: -1;}
#empl .goyong > div.s_box > div:before{content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -4px; margin-left: -4px; width: 8px; height: 8px; background-color: #3366cc; border-radius: 50%; -webkit-border-radius: 50%;}
#empl .goyong > div.s_box > div:after{content: ""; display: block; position: absolute; left: -12%; top: 50%; margin-top: -1px; width: 12%; height: 2px; border: none; border-top: 2px dashed #3366cc;}
#empl .goyong > div.s_box > div.ss_box{margin-top: 18px; background-color: #E9E9ED; border: none; box-shadow: none;} 
#empl .goyong > div.s_box > div p{position: relative; font-size: 24px; font-weight: 300;}
#empl .goyong > div.s_box > div p:before{content: ""; display:block; position: absolute; top: -35px; left: 0;width: 23px; height: 22px; background-image: url(../img/sub/empl_bfbl.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
#empl .goyong > div.s_box > div.ss_box p:before{background-image: url(../img/sub/empl_bfba.svg);}
#empl .goyong > div.s_box > div p strong{font-size: 33px; font-weight: 900; color: #3366cc;font-family: "NanumSquare",sans-serif; display:block;}
#empl .goyong > div.s_box > div.ss_box p strong{color: #666;}
#empl .goyong > div:last-of-type{position: relative; width: 41%; padding: 50px 30px 33px; background-color: #fff; border: 1px solid #3366CC; box-shadow: 0 0 10px rgba(92, 97, 139, 0.13);}


#empl .goyong > div:last-of-type .tf_box{position: relative; height: calc(100% - 138px); text-align: center;}
#empl .goyong > div:last-of-type .tf_box > div{
    display: inline-block; margin-top: 13px; width: 280px; height: 280px; background: url(../img/sub/Ellipse%2026.png); border-radius: 50%; background-size: contain; 
    transition:all 0.3s ease; -webkit-transition:all 0.3s ease;
}
#empl .goyong > div:last-of-type .tf_box > div p.cir{width: calc(100% - 50px); height: calc(100% - 50px); margin: 25px; padding: 31% 0;  border-radius: 50%; -webkit-border-radius: 50%; background-color: #fff; font-size: 29px; color: #3366CC; text-align: center; font-weight: 900; font-family: "NanumSquare",sans-serif;}
#empl .goyong > div:last-of-type .tf_box > div p.cir span{display: block; color: #000; font-size: 15px; font-weight: 300; font-family: "Noto Sans KR",sans-serif;}
#empl .goyong > div:last-of-type .tf_box > div p.em{position: absolute; display: inline-block; padding: 8px  25px; width: 165px; left: 0; top: 0; box-sizing: border-box; text-align: center; font-weight: 300; color: #000; font-size: 18px; line-height: 18px; background-color: #fff; border-radius: 23.5px; box-shadow: 2px 2px 10px rgba(43, 84, 171, 0.1);}
#empl .goyong > div:last-of-type .tf_box > div p.unem{left: auto; top: auto; right: 0; bottom: 0;}
#empl .goyong > div:last-of-type .tf_box > div p.em span{display: block; margin-top: 5px; font-size: 18px; line-height: 20px; font-weight: 700; color: #FF4E4C;}
#empl .goyong > div:last-of-type .tf_box > div p:last-child span{color: #8090A0;}
#empl .goyong > div:last-of-type .ts_box{height: 103px; padding: 25px 0; margin-top: 35px; border-radius: 20px; -webkit-border-radius: 20px;  background-color: #F5F6F8;}
#empl .goyong > div:last-of-type .ts_box:after{content: ""; display: block; clear: both;}
#empl .goyong > div:last-of-type .ts_box> div{position: relative; width: 50%; float: left; text-align: center;}
#empl .goyong > div:last-of-type .ts_box> div:first-child:after{content: ""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; border-right: 1px dashed #B2C0DC; box-sizing: border-box}
#empl .goyong > div:last-of-type .ts_box> div p{font-size: 20px; line-height: 23px; color: #FF4E4C; text-align: center; font-family: "NanumSquare",sans-serif;}
#empl .goyong > div:last-of-type .ts_box> div p span{font-weight: 700; line-height: 23px;}
#empl .goyong > div:last-of-type .ts_box> div:last-child p{color: #8090A0;}
#empl .goyong > div:last-of-type .ts_box> div > span{display: inline-block; margin-top: 10px; color: #666; font-size: 15px; }
#empl .goyong > p{display: block; float: none; margin-right: 9px; font-size: 15px; line-height: 17px; text-align: right; color: #666; margin-bottom: 15px;margin-top: 15px; text-align:left;}

/*생산과 소비 <body id="prod"> */
div.bg_03{background-image: url(../img/sub/prod_bg.jpg); position: fixed;width: 100%;height: 100%;z-index:-1}
#prod .seso > ul{max-width: 970px; margin:0 auto; width: 100%; padding: 28px 0 60px ; box-sizing: border-box;}
#prod .seso > ul:after{content: ""; display: block; clear: both;}
#prod .seso > ul > li{float: left; position: relative; width: calc((100% - 50px) / 2); height: 100%; border-radius: 50%; -webkit-border-radius: 50%;; box-sizing: border-box; border: 1px dashed #FFA24C; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
#prod .seso > ul > li:last-child{float: right; border: 1px dashed #3366CC;}
#prod .seso > ul > li > p{
    width: 220px; height: 220px; padding: 16% 0; background-color: #fff; border-radius: 50%; -webkit-border-radius: 50%;margin: 125px; border: 1px solid #FFA24C; box-sizing: border-box; box-shadow: 0 0 30px rgba(170, 170, 170, 0.3); text-align: center; font-size: 15px; color: #666; line-height: 25px; 
    transition: width 0.3s ease; -webkit-transition: width 0.3s ease;
    transition: height 0.3s ease; -webkit-transition: height 0.3s ease;
}
#prod .seso > ul > li > p > strong{display: block; font-size: 30px; line-height: 40px;}
#prod .seso > ul > li p strong{color: #FFA24C; font-family: "NanumSquare",sans-serif; font-weight: 900;}
#prod .seso > ul > li:last-child p strong{color: #3366CC;}
#prod .seso > ul > li:last-child > p{border: 1px solid #3366CC;}
#prod .seso > ul > li> ul:after{content: ""; display: block; clear: both;}
#prod .seso > ul > li> ul > li{position: absolute; width: 220px; box-sizing: border-box; background-color: #fff; border-radius: 30px; -webkit-border-radius: 30px; border: 1px solid #FFA24C;}
#prod .seso > ul > li:last-child> ul > li{border: 1px solid #3366CC;}
#prod .seso > ul > li> ul > li:first-child{top: -18px; right: 50%; transform: translateX(50%);}
#prod .seso > ul > li> ul > li:last-child{bottom: -18px; right: 50%; transform: translateX(50%);}
#prod .seso > ul > li:last-child> ul > li:nth-child(2){top: 50%; right: 0; transform: translate(70%,-50%);}
#prod .seso > ul > li> ul > li p:before{content: ""; display: block; position: absolute; width: 24px; height: 24px; background-color: #FFA24C; border-radius: 3px; -webkit-border-radius: 3px; top: -12px; left: 50%; transform: translateX(-50%) rotate(45deg); }
#prod .seso > ul > li:last-child > ul > li p:before{background-color: #3366CC;}
#prod .seso > ul > li> ul > li:first-child p:before{top: auto; bottom: -12px;}
#prod .seso > ul > li:last-child> ul > li:nth-child(2) p:before{left: -10px; top: 50%; transform: translate(0,-50%) rotate(45deg);}
#prod .seso > ul > li> ul > li p:after{content: ""; display: block; position: absolute; width: 40px; height: 18px; background-color: #fff; top: 0px; left: 50%; transform: translateX(-50%); }
#prod .seso > ul > li:last-child> ul > li:nth-child(2) p:after{width: 18px; height: 40px; top: 50%; left: 0px; transform: translateY(-50%); border-radius: 50%;}
#prod .seso > ul > li> ul > li:first-child p:after{left: 50%; top: auto; bottom: -9px; transform: translate(-50%,-50%);}
/*220808 추가*/
#prod .seso > ul > li> ul > li.same:after{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; width: 32px; height: 32px; background-image: none; background:#f5f6f8; border-radius:32px; }
#prod .seso > ul > li> ul > li.same:before{content: ""; display: block; position: absolute; top: 49%; width:15px;height:3px; background:#FFA24C;right:21px;z-index:1;}
#prod .seso > ul > li:last-child> ul > li.same:before{content: ""; display: block; position: absolute; top: 49%; width:15px;height:3px; background:#3366CC;right:21px;z-index:1;}

#prod .seso > ul > li> ul > li:after{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; width: 32px; height: 32px; background-image: url(../img/sub/prod_arrowff.png); background-repeat: no-repeat; background-position: center center; background-size: contain;}
#prod .seso > ul > li> ul > li.down:after{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 8px; width: 32px; height: 32px; background-image: url(../img/sub/prod_arrowffDown.png); background-repeat: no-repeat; background-position: center center; background-size: contain;}
#prod .seso > ul > li:last-child> ul > li:after{background-image: url(../img/sub/prod_arrowf33.png);}
#prod .seso > ul > li:last-child> ul > li.down:after{background-image: url(../img/sub/prod_arrowfDown.png);}
#prod .seso > ul > li> ul > li p{font-size: 18px;font-weight: 600;line-height: 27px;padding: 17.5px 50px 19.5px 16px;}
#prod .seso > ul > li> ul > li p strong{font-size: 27px; line-height: 27px; float:right;}
#prod .seso > p{text-align: left; font-size: 15px;margin-bottom:15px;}

@media only screen and (max-width: 1310px){
    div#Contents .con_wrap{padding:0 20px; box-sizing: border-box; }
    
    /*생산과 소비 <body id="prod"> */
    #prod .seso > ul{max-width: 800px; padding: 28px 0 120px;}
    #prod .seso > ul > li > p{width: 200px; height: 200px; margin: 90px; padding: 18% 0 ; }
    #prod .seso > ul > li> ul > li p{padding: 11.5px 50px 11.5px 20px; line-height: 23px;}
    #prod .seso > ul > li > p > strong{font-size: 27px; line-height: 37px;}
    #prod .seso > ul > li:last-child> ul > li:nth-child(2){left: 50%; bottom: 0; top: auto; bottom: -90px; transform: translate(-50%,0);}
    #prod .seso > ul > li> ul > li p:before{width: 20px; height: 20px; top: -10px;}
    #prod .seso > ul > li> ul > li:first-child p:before{bottom: -10px;}
    #prod .seso > ul > li> ul > li p:after{height: 14px;}
    #prod .seso > ul > li> ul > li:first-child p:after{bottom: -6.5px;}
    #prod .seso > ul > li> ul > li p strong{font-size: 23px; line-height: 23px;}
    #prod .seso > ul > li:last-child> ul > li:nth-child(2) p:before{left: 50%; top: 0; transform: translate(-50%,-50%) rotate(45deg); }
    #prod .seso > ul > li:last-child> ul > li:nth-child(2) p:after{width: 28px; height: 14px; left: 50%; top: 0; border-radius:0; -webkit-border-radius: 0; transform: translate(-50%, 0);}
}

@media only screen and (max-width: 1200px){
    /*고용 <div id="Contents" class=#empl"> */
    #empl .goyong > div{height: 500px; padding: 59px 27px;}
    #empl .goyong > div:first-of-type p{font-size: 26px; line-height: 36px;}
    #empl .goyong > div:first-of-type p strong{font-size: 32px;}
    #empl .goyong > div.s_box > div{padding: 59px 27px;}
    #empl .goyong > div.s_box > div p{font-size: 21px;}
    #empl .goyong > div.s_box > div p strong{font-size: 28px;}
    #empl .goyong > div:last-of-type{padding:44px 30px 33px; margin-bottom: 18px;}
    #empl .goyong > div:last-of-type .tf_box > div{width: 250px; height: 250px;}
    #empl .goyong > div:last-of-type .tf_box > div p.cir{width: calc(100% - 40px); height: calc(100% - 40px); padding: 32% 0; margin: 20px; font-size: 26px;}
    #empl .goyong > div:last-of-type .tf_box > div p.em{padding: 6px 22px; min-width: auto; font-size: 15px; }
    #empl .goyong > div:last-of-type .tf_box > div p.em span{margin-top: 3px; font-size: 17px; line-height: 20px;}
    #empl .goyong > div:last-of-type .ts_box{margin-top: 25px; padding: 20px 0; height: auto;}
    #empl .goyong > div:last-of-type .ts_box> div{padding: 0 6%;}
    #empl .goyong > div:last-of-type .ts_box> div p{font-size: 17px;}
    #empl .goyong > div:last-of-type .ts_box> div > span{font-size: 14px;}
}

@media only screen and (max-width: 1024px){
    #empl .goyong > div.s_box:before{top: 97%;left: 23%;transform: rotate(45deg);margin-left: 1px;}
 
    div#Contents .con_wrap{padding: 40px 20px 0;}
    div#Contents .con_wrap > div{padding: 0;}
    div#Contents .con_wrap h3{display: block; margin-bottom: 15px; line-height: 42px; text-align: center; font-size: 37px; color: #757575; font-weight: 900;}

    /*고용 <body id="empl"> */
    #empl .goyong > div{float: none; width: 100%; margin-left: 0; height: auto;}
    #empl .goyong > div:first-of-type{width: 100%; padding: 30px; margin-bottom: 27px;}
    #empl .goyong > div:first-of-type p{font-size: 20px; line-height: 40px; text-align: center;}
    #empl .goyong > div:first-of-type p span{display: inline;}
    #empl .goyong > div:first-of-type p strong{display: inline-block; margin-left: 5px; font-size: 29px;vertical-align:middle;}
    #empl .goyong > div:first-of-type p:before{display: none;}
    #empl .goyong > div.s_box{margin-bottom: 27px;}
    #empl .goyong > div.s_box > div{width: calc((100% - 24px) / 2); float: left; height: auto; padding:65px 5% 30px;;}
    #empl .goyong > div.s_box > div:before{top: 0;left: 50%;}
    #empl .goyong > div.s_box > div:after{top: -27px; left: 50%; margin-top: 0; margin-left: -1px; width: 2px; height: 27px; border-top: none; border-left: 2px dashed #3366cc;}
    #empl .goyong > div.s_box > div p{text-align: center; font-size: 20px;}
    #empl .goyong > div.s_box > div p:before{left: 50%; margin-left: -11.5px; top: -30px;}
    #empl .goyong > div.s_box > div p strong{display: block; }
    #empl .goyong > div.s_box > div.ss_box{margin-top: 0; margin-left: 24px;}
    #empl .goyong > div:last-of-type{width: 100%; padding: 33px 40px 21px;}
    #empl .goyong > div:last-of-type >div{width:calc((100% - 24px) / 2); float: left;}
    #empl .goyong > div:last-of-type:before{top: 0; left: 25%;}
    #empl .goyong > div:last-of-type .tf_box > div{position: relative; width: 258px; height: 258px; margin-top: 8px; margin-bottom: 20px;}
    #empl .goyong > div:last-of-type .tf_box > div p.cir{width: calc(100% - 50px); height: calc(100% - 50px); margin: 25px; padding: 29.5% 0;}
    #empl .goyong > div:last-of-type .tf_box > div p.em{width: 130px; padding: 11px 16px; top: -20px; left: -60px;}
    #empl .goyong > div:last-of-type .tf_box > div p.unem{ left: auto; right: -25px; top: auto; bottom: -20px; right: -60px;}
    #empl .goyong > div:last-of-type .tf_box > div p.em span{font-size: 16px;}
    #empl .goyong > div:last-of-type .ts_box{padding: 0; margin-top: 18px; margin-left: 24px;}
    #empl .goyong > div:last-of-type .ts_box> div{width: 100%; float: none; padding: 32px 30px;}
    #empl .goyong > div:last-of-type .ts_box> div:first-child:after{width: calc(100% - 46px); top: auto; right: 23px; bottom: 0; height: 1px; border-right: none; border-bottom: 1px dashed #B2C0DC;}
    #empl .goyong > div:last-of-type .ts_box> div p{text-align: left; font-size: 20px;}
    #empl .goyong > div:last-of-type .ts_box> div > span{display: block; text-align: left; font-size: 15px;}
    #empl .goyong > p{text-align: center; margin-right: 0;}
}

@media only screen and (max-width: 840px){
    #empl .goyong > div:last-of-type .tf_box > div{width: 230px; height: 230px; margin-top: 0; margin-bottom: 12px;}
    #empl .goyong > div:last-of-type .ts_box> div{padding: 22px 30px;}
    #empl .goyong > div:last-of-type .tf_box > div p.em{left: -30px; padding: 5px 16px;}
    #empl .goyong > div:last-of-type .tf_box > div p.unem{left: auto; right: -30px;}
    
    /*생산과 소비 <body id="prod"> */
    #prod .seso > ul{max-width: 610px; padding-bottom: 120px;}
    #prod .seso > ul > li{width: calc((100% - 32px) / 2); }
    #prod .seso > ul > li > p{width: 190px; height: 190px; padding: 23% 0; margin: 53px; line-height: 20px;}
    #prod .seso > ul > li > p > strong{font-size: 23px; line-height: 33px;}
    #prod .seso > ul > li> ul > li{width: 175px;}
    #prod .seso > ul > li:last-child> ul > li:nth-child(2){left: 50%; bottom: 0; top: auto; bottom: -82px; transform: translate(-50%,0);}
    #prod .seso > ul > li> ul > li:after{width: 28px; height: 28px; right: 6px;}
    #prod .seso > ul > li> ul > li p{padding: 10px 41px 10px 12px; font-size: 14px;line-height: 19px;}
    #prod .seso > ul > li> ul > li p strong{font-size: 19px; line-height: 19px; }
    #prod .seso > ul > li> ul > li p:before{width: 16px; height: 16px; top: -8px;}
    #prod .seso > ul > li> ul > li:first-child p:before{bottom: -8px;}
    #prod .seso > ul > li> ul > li p:after{width: 23px; height: 10px; }
    #prod .seso > ul > li> ul > li:first-child p:after{bottom: -5px;}
    #prod .seso > ul > li:last-child> ul > li:nth-child(2) p:before{left: 50%; top: 0; transform: translate(-50%,-50%) rotate(45deg);}
    #prod .seso > ul > li:last-child> ul > li:nth-child(2) p:after{width: 23px; height: 10px; left: 50%; top:0; border-radius: 0; -webkit-border-radius:0; transform: translate(-50%, 0);}
}

@media only screen and (max-width: 640px){
    div#Contents .con_wrap{padding:30px 15px 0;}
    div#Contents .con_wrap h3{margin-bottom:18px; text-align: left; font-size: 27px; line-height: 31px; }
    
    /*고용 <body id="empl"> */
    #empl .goyong > div:first-of-type{padding: 23px;}
    #empl .goyong > div:first-of-type p{font-size: 16px; line-height: 26px;}
    #empl .goyong > div:first-of-type p strong{display: block; margin-left: 0; font-size: 21px;}
    #empl .goyong > div.s_box > div{width: calc((100% - 14px) / 2); padding: 70px 20px 40px;}
    #empl .goyong > div.s_box > div.ss_box{margin-left: 14px;}
    #empl .goyong > div.s_box > div p{font-size: 16px; line-height: 24px;}
    #empl .goyong > div.s_box > div p:before{width: 26px; height: 25px; margin-left: -13px; top: -35px;}
    #empl .goyong > div.s_box > div p strong{font-size: 21px;}
    #empl .goyong > div:last-of-type{padding:25px 20px 20px;}
    #empl .goyong > div:last-of-type >div{width: 100%; float: none;}
    #empl .goyong > div:last-of-type .tf_box{height: auto;}
    #empl .goyong > div:last-of-type .tf_box > div{width: 236px; height: 236px; margin: 40px 0;}
    #empl .goyong > div:last-of-type .tf_box > div p.cir{font-size: 21px;}
    #empl .goyong > div:last-of-type .tf_box > div p.cir span{font-size: 16px;}
    #empl .goyong > div:last-of-type .tf_box > div p.em{left: 50%; margin-left: -160px;}
    #empl .goyong > div:last-of-type .tf_box > div p.unem{right: 50%; margin-left: 30px;}
    #empl .goyong > div:last-of-type .ts_box{margin-top: 26px; margin-left: 0;}
    #empl .goyong > div:last-of-type .ts_box> div{padding: 30px 28px;}
    #empl .goyong > div:last-of-type .ts_box> div:first-child:after{width: calc(100% - 56px); right: 28px;}
    #empl .goyong > p{font-size: 14px; line-height: 17px;}
    
    /*생산과 소비 <body id="prod"> */
    #prod .seso > ul{padding-bottom: 125px;}
    #prod .seso > ul > li{width: 100%; max-width: 302px; float: none; margin: 0 auto;}
    #prod .seso > ul > li:last-child{float: none; margin-top: 70px;}
    #prod .seso > p{font-size: 14px;}

    /*svg 그래프*/
	#tabAge,#tabMwn{overflow:hidden;}
}

@media only screen and (max-width: 400px){
    /*고용 <body id="empl"> */
    #empl .goyong > div:first-of-type{padding: 18px;}
    #empl .goyong > div.s_box > div{padding: 65px 7px 35px;}

    #empl .goyong > div.s_box:before{margin-left: -4px;}

    #empl .goyong > div:first-of-type p,#empl .goyong > div.s_box > div p{font-size: 15px;}
    #empl .goyong > div:first-of-type p strong,#empl .goyong > div.s_box > div p strong{font-size: 19px;}
    #empl .goyong > div:last-of-type .tf_box > div{position: static; margin: 20px 0;}
    #empl .goyong > div:last-of-type .tf_box > div p.em{margin-left: 0; left: -10px; top: 0;}
    #empl .goyong > div:last-of-type .tf_box > div p.unem{left: auto; right: 0; top: auto; bottom: -0;} 
    #empl .goyong > div:last-of-type .ts_box> div{padding: 25px;}
    #empl .goyong > div:last-of-type .ts_box> div p{font-size: 18px;}
    #empl .goyong > div:last-of-type .ts_box> div > span{font-size: 14px;}
}

@media only screen and (max-width: 360px){
    /*생산과 소비 <body id="prod"> */
    #prod .seso > ul > li{max-width: 280px;}
    #prod .seso > ul > li > p{width: 170px; height: 170px; margin: 50px; padding: 20% 0;}
   /*맵 220805추가 */
	.ContArea {width: 100%;margin: 0 0px;}
	.MapInfo [class*="Map"]{width: 514px;}
}





/*/////////////////////////////////////////////////////////////////////////////////////////////////////
    
    물가 서브메인

/////////////////////////////////////////////////////////////////////////////////////////////////////*/
div.bg_02{background-image:url(../img/sub/prices_bg.jpg);position: fixed;width: 100%;height: 100%;z-index:-1}
#prices .boxs>li
{transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}

#prices{font-size:15px;}
#prices li{text-align:unset;}
#prices .boxs{overflow:hidden; position:relative;}
#prices .boxs:after{content:""; position:absolute; top:50%; left:0; z-index:0; width:99%; height:2px; border-top:2px dashed #3366CC;}
#prices .boxs>li{
	position:relative; z-index:1; float:left; width:calc((100% / 3) - 3.1em); height:35.8em; padding:2.2em 2.2em; background-color:#fff; border:1px solid #3366CC; box-sizing:border-box;
	border-radius:1.3em;	-webkit-border-radius:1.3em;
}
#prices .boxs>li:first-child{margin:0 3em 0 0;}
#prices .boxs>li:nth-child(2){margin:0 1.5em 0 1.5em;}
#prices .boxs>li:nth-child(3){margin:0 0 0 3em;}

#prices .boxs>li:not(:first-child):before,
#prices .boxs>li:not(:last-child):after{
	content:""; position:absolute; top:calc(50% - 0.15em); width:0.3em; height:0.3em; background-color:#fff; border:2px solid #3366CC;
	border-radius:50%; -webkit-border-radius:50%;
}
#prices .boxs>li:before{left:-0.3em;}
#prices .boxs>li:after{right:-0.3em;}

#prices .boxs>li .titles{font-family:"NanumSquare",sans-serif;}
#prices .boxs>li .titles strong{display: block; font-weight:300; font-size:1.7em;}
#prices .boxs>li .titles em{display:block; font-size:2.9em; font-style:normal; font-weight:800; color:#3366CC;}

#prices .boxs>li .icons{margin-top:0.7em;}
#prices .boxs>li .icons li{display:inline-block;}
#prices .boxs>li .icons li:not(:last-child){margin-right:0.4em;}
#prices .boxs>li .icons li span{
	overflow:hidden; display:block; width:3.2em; height:3.2em; background-color:#F5F6F8; background-repeat:no-repeat; background-position:center; text-indent:-2000px;
	border-radius:50%; -webkit-border-radius:50%;
}
/* 항목별 아이콘 */
#prices .boxs>li .icons li span.icon_01{background-image: url(../img/sub/prices_icon_01.svg);}
#prices .boxs>li .icons li span.icon_02{background-image: url(../img/sub/prices_icon_02.svg);}
#prices .boxs>li .icons li span.icon_03{background-image: url(../img/sub/prices_icon_03.svg);}
#prices .boxs>li .icons li span.icon_04{background-image: url(../img/sub/prices_icon_04.svg);}
#prices .boxs>li .icons li span.icon_05{background-image: url(../img/sub/prices_icon_05.svg);}
#prices .boxs>li .icons li span.icon_06{background-image: url(../img/sub/prices_icon_06.svg);}
#prices .boxs>li .icons li span.icon_07{background-image: url(../img/sub/prices_icon_07.svg);}
#prices .boxs>li .icons li span.icon_08{background-image: url(../img/sub/prices_icon_08.svg);}
#prices .boxs>li .icons li span.icon_09{background-image: url(../img/sub/prices_icon_09.svg);}
#prices .boxs>li .icons li span.icon_10{background-image: url(../img/sub/prices_icon_10.svg);}
#prices .boxs>li .icons li span.icon_11{background-image: url(../img/sub/prices_icon_11.svg);}


#prices .boxs .graphbx{position:absolute; bottom:2.4em; left:2.2em; width:calc(100% - 2.2em*2);}
#prices .boxs .graphbx li{height:16.67em; line-height:2.67em;}
#prices .boxs .graphbx li:not(:last-child){margin-bottom:0.8em;}
#prices .boxs .graphbx li svg{border-radius:1em;}

#prices .boxs .graphbx li strong{display:inline-block; width:6.8em; padding-right:0.6em; font-size:0.9em; vertical-align:middle;}
#prices .boxs .graphbx li .graphs{
	display:inline-block; width:calc(100% - 6.5em); background-color:#F5F6F8; vertical-align:middle;
	border-radius:1em; -webkit-border-radius:1em;
}
#prices .boxs .graphbx li .graphs span{
	display:block; height:26px; line-height:26px; padding:0 1em; font-size:0.9em; color:#fff;
	border-radius:1em; -webkit-border-radius:1em;
}

/* 물가상승률별 컬러값 */
#prices .boxs .graphbx li .graphs .c_blue{background-color:#717AAB;}
#prices .boxs .graphbx li .graphs .c_gray{background-color:#A0A4B9;}
#prices .boxs .graphbx li .graphs .c_pink{background-color:#CFACB1;}
#prices .boxs .graphbx li .graphs .c_pink2{background-color:#D38C96;}
#prices .boxs .graphbx li .graphs .c_pink3{background-color:#D76C7B;}
#prices .boxs .graphbx li .graphs .c_red{background-color:#DB4C60;}
#prices .boxs .graphbx li .graphs .c_red2{background-color:#BD4253;}

#prices .tips{text-align:left; margin-bottom:15px;}
#prices .tips span:before{
	content:""; display:inline-block; width:0.65em; height:0.65em; margin-right:0.3em;
	border-radius:50%; -webkit-border-radius:50%;
}
#prices .tips span.c_blue:before{background-color:#717AAB;}
#prices .tips span.c_gray:before{background-color:#A0A4B9;}
#prices .tips span.c_pink:before{background-color:#CFACB1;}
#prices .tips span.c_pink2:before{background-color:#D38C96;}
#prices .tips span.c_pink3:before{background-color:#D76C7B;}
#prices .tips span.c_red:before{background-color:#DB4C60;}
#prices .tips span.c_red2:before{background-color:#BD4253;}

@media only screen and (max-width:1140px){
	#prices .boxs>li{float:left; width:calc((100% / 3) - 1.35em);}
	#prices .boxs>li:first-child{margin:0 1.3em 0 0;}
	#prices .boxs>li:nth-child(2){margin:0 0.7em 0 0.7em;}
	#prices .boxs>li:nth-child(3){margin:0 0 0 1.3em;}
}
@media only screen and (max-width:1024px){
	#prices{font-size:14px;}
	#prices .boxs>li{height:34em;}
}
@media only screen and (max-width:920px){
	#prices .boxs>li{width:100%; height:auto; margin:0 0 1.5em 0 !important;}
	#prices .boxs>li:last-child{margin:0 !important;}
	#prices .boxs>li:not(:first-child):before,
	#prices .boxs>li:not(:last-child):after{display:none;}

	#prices .boxs>li .icons li:not(:last-child){margin-bottom:1em; margin-right:0;}

	#prices .boxs .graphbx li:not(:last-child){margin-bottom:1.5em;}
	#prices .boxs .graphbx{position:static;}
}
@media only screen and (max-width:920px) and (min-width:641px){
	#prices .boxs>li{overflow:hidden;}
	#prices .boxs>li .titles{float:left; width:28%;}
	#prices .boxs>li .icons{position:relative; float:left; width:8em; margin-top:0; padding-left:4em; box-sizing:border-box;}
	#prices .boxs>li .icons:after{content:""; position:absolute; top:0; left:0; width:1px; height:100%; border-left:2px dashed #b2c0dc96;}
	#prices .boxs .graphbx{float:left; width:calc(72% - 8em); margin-top:0.25em;}
}
@media only screen and (max-width:740px) and (min-width:641px){
	#prices .boxs>li .titles{width:32%; font-size:13px;}
	#prices .boxs>li .icons{width:7em; padding-left:3em;}
	#prices .boxs .graphbx{float:left; width:calc(68% - 7em); margin-top:0.25em;}
}
@media only screen and (max-width:640px){
	#prices .boxs>li{padding:2em 1.8em;}
	#prices .boxs>li .titles{font-size:11px;}
	#prices .boxs>li .icons li:not(:last-child){margin-bottom:0.6em;}
	#prices .boxs>li .icons li:nth-child(even){margin-left:0.3em;}
	#prices .boxs>li .icons{position:absolute; top:2em; right:1.8em; width:7.3em; margin-top:0;}
	#prices .boxs .graphbx{width:100%; margin-top:1.8em;}
	#prices .boxs .graphbx li:not(:last-child){margin-bottom:1em;}
}
@media only screen and (max-width:420px){
	#prices{font-size:12px;}
	#prices .boxs>li .titles{font-size:10px;}
	#prices .boxs>li .titles strong{line-height:1.4; font-size:1.8em;}
	#prices .boxs .graphbx li .graphs{width:calc(100% - 7.8em);}
	#prices .boxs .graphbx li strong{font-size:13px;}
}
#hidTab:after,
#hidTab1:after,
#hidTab2:after{content:"";display:block;clear:both;}

/** print **/
@page{size:A4;margin:0}
@media print{
	header{display:none;}
	html,body{width:210mm;height:297mm;}	
}


div .legend_info {text-align:center; padding:15px 10px 8px 10px; /*position:absolute;*/ bottom:8px; right:10px;}
div .legend_info li { display:inline-block;}
div .legend_info span {margin-left:5px; display:inline-block; position:relative;}
div .legend_info span span { margin:0 0;}
div .legend_info li:nth-child(1) span span { color:#83a739;}
div .legend_info li:nth-child(2) span span { color:#ff3300;}

div .legend_info1 {text-align:center; padding:15px 10px 8px 10px; /*position:absolute;*/ bottom:8px; right:10px;}
div .legend_info1 li { display:inline-block;}
div .legend_info1 span {margin-left:5px; display:inline-block; position:relative;}
div .legend_info1 span span { margin:0 0;}
div .legend_info1 li:nth-child(1) span span { color:#83a739;}
div .legend_info1 li:nth-child(2) span span { color:#ff3300;}