@charset "UTF-8";
/*
	color code
	
	막대그래프 위에 글씨 : #5f5f5f
	막대그래프 뒤에 선 : #666666
	인구 수 막대 그래프 : #61c6db
	사업체 수 막대 그래프: #4b73d9
	원형그래프 시군구: #f8abbe
	원형그래프 전국 : #66a1e5
	
	지도 베이스 : #f3fffd
	도시쇠퇴 진행중 도시 : #208ab7
	도시쇠퇴 징후 시작 도시 : #6db1ce
	
	추가적 요청사항
	
	지도 도 경계선이 실선으로 얇았으면 좋겠다고 하십니다.
*/

@font-face										{ font-family: 'pretendard'; src: url(/fonts/PretendardVariable.woff2); }

/* reset */
* 												{ margin: 0; padding: 0; line-height: 1; }
ul 												{ list-style: none; }
a												{ color: inherit; text-decoration: none; }
/* reset end */

html											{ font-family: 'pretendard'; color: #363636; }
html,body,button 								{ font-family: 'Noto Sans KR', sans-serif; height: 25%; }

.ol-zoom 										{ top: unset; left: unset; bottom: 0.5em; right: 0.5em; display: flex; }
.ol-control button 								{ background-color: #d4ebe6; border: 0; color: #000; width: 30px; height: 30px; border-radius: 5px; font-size: 24px; font-weight: bold; } 
.decline										{ width: 1200px; margin: 0 auto; }

h1												{ color: #1bacae; font-size: 24px; }
#lnb > .webWidthBig .h1 						{ color: #2ca48e; font-size: 32px; }
#lnb > .webWidthBig .snsBox						{ position: absolute; bottom: 0; right: 0; }
#container 										{ padding-bottom: 50px; background-color: #fff; }
.con											{ width: 1200px; background-color: #1bacae; border-radius: 10px; margin: 5px 0 5px; padding: 15px 0; }
.con .cover										{ width: 1170px; background-color: #f5f5f5; border-radius: 10px; margin: 0 auto; }
.con .cover .null								{ width: 1080px; margin: 0 auto; padding: 25px 0; }
.con .title										{ width: 340px; height: 50px; }

#main_title										{ flex-wrap: wrap; justify-content: center; width: 1080px; }

.stdYear										{ color: #ffffff; font-size: 20px; text-align: center; line-height: 50px; width: 100px; height: 50px; background-color: #006c9a;  }
.stdYear.active									{ background-color: #fff; color: #006c9a; border: #006c9a solid 2px; }
.con .box										{ width: 1080px; height: 823px; border: #51d5ca 2px solid; background-color: rgba(163,229,223,0.5); border-radius: 10px; position: relative; }
.con .map										{ position: absolute; top: 0; left: 0; background-color: #ffffff; width: 613px; height: 819px; border-radius: 10px; }
.con .map #sgg_map								{ width: 100%; height: 100%; }

.con .chartBox									{ width: 430px; position: absolute; top: 0; right: 20px; }
.con .chartBox h3								{ text-align: center; padding: 10px 0; font-size: 22px; }
.con .chartBox .chart							{ width: 430px; height: 238px; background-color: #ffffff; border-radius: 10px; border: #51bed5 2px solid; box-sizing: border-box; }
#chart02										{ margin: 20px 0; }
.con .chartBox .chart h4						{ color: #006c9a; padding: 25px 0 20px 30px; font-size: 20px; }
.con .chartBox .chart .graph					{ width: 370px; height: 130px; margin: 0 auto; }
#chart03 .item									{ display: flex; }
#chart03 .cir									{ width: 140px; height: 140px; margin-left: 28px; }
#chart03 .item									{ display: flex; align-items: flex-end; justify-content: center; }
#chart03 .bar									{ margin-right: 5px; margin-bottom: 15px; width: 170px; font-size: 13px; }
#chart03 .bar .co								{ display: flex; justify-content: flex-start; align-items: center; width: 100%; }
#chart03 .bar .co:last-child					{ margin-top: 10px; }
#chart03 .bar .remark							{ width: 30px; height: 18px; border: #eee 2px solid; box-sizing: border-box; margin-right: 5px; }
#chart03 .bar p									{ padding-left: 15px; }
#chart03 .bar .area .remark						{ border: solid; background-image:URL('/images/portal/map/sutMap/sutPattern3.png'); }
#chart03 .bar .nation .remark					{ border: solid; background-image:URL('/images/portal/map/sutMap/sutPattern4.png'); }

.con .grid										{ width: 1080px; display: flex; margin: 0 auto; }
.con .grid .mean_l 								{ width: 633px; }
.con .grid .mean_l>div							{ display: flex; align-items: center; }

.con .grid .ing>div, .con .grid .start > div	{ width: 24px; height: 24px; border-radius: 5px; }

.con .grid .ing>div								{ border: solid; background-image: URL('/images/portal/map/sutMap/sutPattern1.png'); }
.con .grid .start>div							{ border: solid; background-image: URL('/images/portal/map/sutMap/sutPattern2.png'); }
.con .grid .mean_l p							{ font-size: 18px; font-weight: bold; padding-left: 10px; }
.con .grid .mean_l .start						{ margin-top: 15px; }
.con .grid .mean_l .ing p span					{ color: #208ab7; }
.con .grid .mean_l .start p span				{ color: #208ab7; }
.con .grid article p							{ font-size: 16px; line-height: 21px; color: #5F5F5F; }
.con .grid article p::before					{ content: '▪'; padding: 0 10px 0 0; color: #5F5F5F; }
.massge											{ display: none; position: absolute; width: 300px; height: 50px; text-align: center; line-height: 300%; color: #fff; background-color: red; margin-top: 300px; margin-left: 170px; }
.index_count_1, .index_count_2					{ padding: 0px 5px; font-size: 20px; font-weight: bold; }
.index_unit										{ padding-right: 20px; font-size: 10px; font-weight: bold; }
.text-bold										{ padding: 0px 5px; font-weight: bold; }
.vt0102, .vt0202								{ height: 230px; }
.vt0301											{ height: 150px; margin: 9px; }
.chart h4										{ display: flex; justify-content: space-between; }