@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2021.07.12 | 김소화 | 최초 등록
 * </pre>
 * @author 디자인팀 김소화
 * @since 2021.07.12
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */

/* 공통 */



#wrap{z-index:0;border-top:1px solid #e5e5e5;}
#wrap>.container {max-width:none;}
#body {font-size:16px;}
@media all and (max-width:1399px){
	#body {font-size:15px;}
}
@media all and (max-width:999px){
	#body {font-size:14px;}
}
@media all and (max-width:767px){
	#body {font-size:13px;}
	[id*=mainbody] .h1 {font-size:2em}
}
@media all and (max-width:599px){
	#body {font-size:12px;}
}


[id*="mainbody"]{position:relative;background:url() no-repeat  50% 0 / cover;} 
[id*="mainbody"] .container{max-width:1200px;margin:0 auto;padding:50px 0}
[id*="mainbody"] h2.h1{padding:0;margin:0 0 30px;
	color:#363c5a;
	font-family:"Jalnan", sans-serif;
	text-align:center;
	font-size:33px;
}
[id*="mainbody"] h2.h1 span{color:#3c76e2}
[id*="mainbody"] .period1{position:absolute;right:0;top:60px;
	font-size:15px;
	color:#646464;
}
[id*="mainbody"] .period1:before{content:'';
	display:inline-block;
	width:16px;height:16px;
	vertical-align:top;
	margin:2px 5px 0 0;
	background:url(../../img/main/ic16exclamation1.png) no-repeat;
}
@media all and (max-width:1259px){
	[id*="mainbody"] .container{padding:50px 0}
}
@media all and (max-width:1199px){
	[id*="mainbody"] .container{margin:0 15px}
}
@media all and (max-width:799px){
	[id*="mainbody"] h2.h1{margin:0 0 10px;}
	[id*="mainbody"] .period1{position:relative;right:0;top:auto;margin-bottom:10px;text-align:center;}
}


/* mainbody1 */
#mainbody1{background:#f1f5f9 url(../../img/main/mainbody1_bg.gif) no-repeat 50% 0 / cover;}

#mainbody1 .w{position:relative;
	border-radius:30px;
	padding:50px 30px 50px 160px;
	background:#fff;
	border:1px solid #ddd;
	overflow:hidden;
}
#mainbody1 .w .h2{
	font-family:"Jalnan", sans-serif;
	color:#363c5a;
	font-size:20px;
}
#mainbody1 .w .t1{
	color:#2a63cf;
	font-size:40px;
	font-weight:700;
}
#mainbody1 .w .t1 span{font-size:30px;}
#mainbody1 .w:before{content:'';
	display:block;position:absolute;left:30px;top:50%;
	width:107px;height:107px;
	margin-top:-53.5px;
	background:url() no-repeat 0 0 / contain;
}
#mainbody1 .column:nth-of-type(1) .w:before{background-image:url(../../img/main/ic107m1.png)}
#mainbody1 .column:nth-of-type(2) .w:before{background-image:url(../../img/main/ic107m2.png)}
#mainbody1 .column:nth-of-type(3) .w:before{background-image:url(../../img/main/ic107m3.png)}
@media all and (max-width:1199px){
	#mainbody1 .w{padding:160px 30px 30px;text-align:center;}
	#mainbody1 .w:before{left:50%;top:30px;margin: 0 0 0 -53.5px;}
	#mainbody1 .w .t1{font-size:30px}
	#mainbody1 .even-grid.gap40px{margin:10px -10px;}
	#mainbody1 .even-grid.gap40px>.column{padding:10px;}
}


#mainbody2{}
#year1data1{float:left;width:375px;overflow:hidden;}
#year1data1 .w{float:left;width:50%;text-align:center;}
#year1data1 .w .state1{position:relative;
	line-height:170px;
	width:170px;height:170px;
	margin:0 auto;
	border-radius:100%;
	color:#fff;font-size:44px;font-weight:700;
	letter-spacing:-1px;
}
#year1data1 .w .year{font-weight:600;font-size:20px;color:#000;margin:20px 0 0;}
#year1data1 .w.pre .state1{background:#3781ea}
#year1data1 .w.now .state1{background:#1e53c7;color:#ffc900}
#year1data1 .w.now .state1:before{content:'';display:block;
	position:absolute;right:-5px;bottom:-10px;
	width:60px;height:60px;
	background:url() no-repeat;
}
#year1data1 .w.now .state1.up:before{background-image:url(../../img/main/ic60up.png)}
#year1data1 .w.now .state1.down:before{background-image:url(../../img/main/ic60down.png)}


#part1data1{position:relative;float:right;width:calc(100% - 405px);margin-left:30px;box-sizing:border-box;} 
#part1data1 .period1{top:10px;}
#part1data1 ul{position:relative;padding:0 30px;overflow:hidden;}
#part1data1 ul:before{content:'';
	z-index:-1;
	position:absolute;left:0;right:0;top:0;height:62px;
	border-radius:30px;
	background:#748aa9;
}
#part1data1 ul:after{content:'';
	z-index:-1;
	position:absolute;left:0;right:0;bottom:0;height:130px;
	border-radius:30px;
	background:#f1f5f9;
}
#part1data1 li{float:left;width:16.666%;text-align:center;}
#part1data1 .t1{display:block;
	height:62px;line-height:62px;
	background:#748aa9;
	color:#fff;
	font-size:18px;
	font-weight:700;
}
#part1data1 .t2{display:block;position:relative;
	background:#f1f5f9;
	height:130px;
	font-size:42px;color:#646464;
	line-height:130px;
	margin-top:10px;
}
#part1data1 .t2:before{content:'';
	display:block;position:absolute;left:0;top:50%;
	border-left:1px solid #aec1d5;
	width:0;height:24px;
	margin:-12px 0 0;
}
#part1data1 li:first-child .t2:before{display:none;}

@media all and (max-width:1090px){
	#year1data1{float:none;clear:both;margin:0 auto 30px;}
	#part1data1 {float:none;clear:both;width:auto;margin-left:0}
}
@media all and (max-width:799px){
	#part1data1 .period1{top:auto}
}
@media all and (max-width:630px){
	#part1data1 ul{padding:0}
	#part1data1 ul:before,
	#part1data1 ul:after{display:none;}
	#part1data1 li{width:33.333%;margin-bottom:10px;}
	#part1data1 .t2{margin:0}
	#part1data1 li:nth-child(4) .t2:before{display:none}
}
@media all and (max-width:414px){
	#year1data1{width:auto;}
	#year1data1 .w .state1{width:150px;height:150px;line-height:150px;font-size:35px !important;}
}


#mainbody3{background:#fff3f5 url(../../img/main/mainbody3_bg.gif) no-repeat 50% 0 / cover;}
#mainbody3 .w{
	border-radius:30px;
	background:#fff;
	padding:50px 50px 70px;
}
#mainbody3 .chart1{	min-width:645px;}
#mainbody3 #chart1 ul{padding:0 50px;height:300px;border-bottom:5px solid #000;background:url(../../img/main/graph1_bg1.png) repeat 0 100%}
#mainbody3 #chart1 li{float:left;position:relative;
	width:11.11%;height:100%;
	margin:0;
	white-space:nowrap;
	text-align:center;
	overflow:visible;
}
#mainbody3 #chart1 .t1{position:absolute;left:0;right:0;bottom:-40px;
	display:block;
	color:#000;
	font-weight:bold;
	font-size:18px;
}
#mainbody3 #chart1 .bar{position:absolute;left:50%;bottom:0;
	display:block;
	width:40px;
	margin:0 0 0 -20px;
	background:#0091ff;
}
#mainbody3 #chart1 .num{position:absolute;left:0;right:0;}
@media all and (max-width:799px){
	#mainbody3 .w{overflow:hidden;overflow-x:auto;}
}



#mainbody4{overflow:hidden;}
#mainbody4>.container>div{position:relative;float:left;box-sizing:border-box;}
#mainbody4 h2.h1{text-align:left;}
#mainbody4 .period1{top:10px;}
#gender1data1{width:475px;overflow:hidden;}
#gender1data1 ul{margin-top:60px}
#gender1data1 .column{float:left;width:50%;}
#gender1data1 .column .tg1{float:left;margin-top:50px;margin-right:35px;}
#gender1data1 .column .tg1 .t1{
	text-align:center;
	border:1px solid #ddd;
	width:86px;
	padding:7px 10px;
	margin:0 auto;
	box-sizing:border-box;
	border-radius:20px;
	font-size:15px;
	color:#555
}
#gender1data1 .column .tg1 .num1{text-align:center;padding:10px 0;font-size:23px;color:#000}
#gender1data1 .column .f1{float:left;position:relative;width:112px;height:192px;}
#gender1data1 .column .f1p1{width:112px;height:192px;overflow:hidden;}
#gender1data1 .column .f1p1.male{background:url(../../img/main/male2.png);}
#gender1data1 .column .f1p1.female{background:url(../../img/main/female2.png);}
#gender1data1 .column .f1p1 .bg{display:block;position:absolute;width:112px;height:192px;left:0;right:0;bottom:0;background:url(../../img/main/male3.png) no-repeat 0 bottom;}
#gender1data1 .column .f1p1.female .bg{background-image:url(../../img/main/female3.png)}
#gender1data1 .column .f1 .num2{position:absolute;left:50%;top:50%;
	width:40px;height:40px;
	color:#fff;
	line-height:40px;
	background:rgba(0,0,0,0.8);
	border-radius:100%;
	margin:-35px 0 0 -20px;
	text-align:center;
	font-size:14px;
	font-weight:600;
}

#gender1data1 li.column:nth-child(2) .tg1{float:right;margin-right:0}
#gender1data1 li.column:nth-child(2) .f1{float:left;}

#age1data1{position:relative;width:calc(100% - 475px);padding-left:50px}
#age1data1 h2.h1{}
#age1data1 .w{}
#age1data1 .bubble1{padding-top:60px;text-align:center;width:675px;height:300px;overflow:visible;}
#age1data1 .bubble1 text{display:block;color:#fff;font-size:16px;}

#age1data1 .chart1{	min-width:645px;}
#age1data1 #chart2 ul{padding:0 50px;height:200px;border-bottom:5px solid #000;background:url(../../img/main/graph1_bg1.png) repeat 0 100%}
#age1data1 #chart2 li{float:left;position:relative;
	width:12.5%;height:100%;
	margin:0;
	white-space:nowrap;
	text-align:center;
	overflow:visible;
}
#age1data1 #chart2 .t1{position:absolute;left:0;right:0;bottom:-40px;
	display:block;
	color:#000;
	font-weight:bold;
	font-size:18px;
}
#age1data1 #chart2 .bar{position:absolute;left:50%;bottom:0;
	display:block;
	width:40px;
	margin:0 0 0 -20px;
	background:#5ec0ee;
}
#age1data1 #chart2 .num{position:absolute;left:0;right:0;}
@media all and (max-width:799px){
	#age1data1 .w{overflow:hidden;overflow-x:auto;
		width:auto;
		padding:0 0 50px;
	}
	#age1data1 #chart2 ul{margin:0;}
}




@media all and (max-width:1199px){
	#mainbody4>.container>div{float:none;clear:both;margin:0 auto 30px;}
	#mainbody4 h2.h1{text-align:center;margin-bottom:10px;}
	#mainbody4 .period1{text-align:center;position:relative;top:auto;}
	
	#gender1data1 ul{margin-top:10px}


	#age1data1{width:100%;padding-left:0;}
	#age1data1 h2.h1{position:relative;left:auto;top:auto;}
	#age1data1 h2.h1 span{display:inline-block;}


}
@media all and (max-width:590px){
	#gender1data1{width:auto;}
	#gender1data1 .column .tg1,
	#gender1data1 li.column:nth-child(2) .tg1{float:none;clear:both;margin:0}
	#gender1data1 .column .f1,
	#gender1data1 li.column:nth-child(2) .f1{float:none;clear:both;margin:0 auto}
}



#mainbody5{background:#e3f0ff url(../../img/main/mainbody5_bg.png) no-repeat 50% 0 / cover;}
#take1town1{float:right;width:calc(100% - 500px);margin-top:55px;}
#take1town1 a{display:block;
	border:1px solid #d0e4ff;
	border-radius:40px;
	background:#fff;
	text-align:center;
	height:70px;
	box-sizing:border-box;
	padding:13px 0 0;
	color:#5c5c5c;
	transition:.4s;
}
#take1town1 a .t1{display:block;font-size:14px;font-weight:600}
#take1town1 a .t2{display:block;margin-top:-3px;}
#take1town1 a .t2 b{font-size:19px;}
#take1town1 .on a{background:#0069f9;border-color:#0069f9;color:#fff;}
#map1{float:left;width:500px;
	overflow:hidden;
	overflow-x:auto;
}
#map1 .w1{display:block;
	position:relative;
	width:500px;
	height:458px; /* (457+여유) */
	margin:0 auto;
}
/* 지도요소 */
#map1 .z{display:block !important;
	position:absolute;
}
#map1 .z .t1{display:inline-block;
	z-index:10; /* ☆ */
	position:relative;
	bottom:4px;
	color:#fff;
	font-size:14px;
	line-height:1.125;
	width:auto;
}
#map1 .z7~.z .t1{ /* 동 */
	font-size:12px;
}
#map1 .z .f1{display:block;
	visibility:hidden;
	z-index:5; /* ☆ */
	position:absolute;
	opacity:0;
	transition:.4s;
}
#map1 .z .f1 img{max-width:none;}
/* 존(기준위치) */
#map1 .z1{left:50px;top:185px;} /* 진영읍 */
#map1 .z2{left:174px;top:279px;} /* 주촌면 */
#map1 .z3{left:79px;top:275px;} /* 진례면 */
#map1 .z4{left:158px;top:157px;} /* 한림면 */
#map1 .z5{left:228px;top:114px;} /* 생림면 */
#map1 .z6{left:323px;top:143px;} /* 상동면 */
#map1 .z7{left:396px;top:255px;} /* 대동면 */
#map1 .z8{left:288px;top:253px;} /* 동상동 */
#map1 .z9{left:276px;top:290px;} /* 회현동 */
#map1 .z10{left:250px;top:329px;} /* 부원동 */
#map1 .z11{left:234px;top:300px;} /* 내외동 */
#map1 .z12{left:247px;top:225px;} /* 북부동 */
#map1 .z13{left:213px;top:370px;} /* 칠산서부동 */
#map1 .z14{left:312px;top:301px;} /* 활천동 */
#map1 .z15{left:314px;top:237px;} /* 삼안동 */
#map1 .z16{left:359px;top:325px;} /* 불암동 */
#map1 .z17{left:165px;top:367px;} /* 장유 1동 */
#map1 .z18{left:72px;top:382px;} /* 장유 2동 */
#map1 .z19{left:161px;top:413px;} /* 장유 3동 */
/* 존(맵) */
#map1 .z1 .f1{left:-50px;top:-70px;} /* 진영읍 */
#map1 .z2 .f1{left:-43px;top:-58px;} /* 주촌면 */
#map1 .z3 .f1{left:-40px;top:-86px;} /* 진례면 */
#map1 .z4 .f1{left:-74px;top:-98px;} /* 한림면 */
#map1 .z5 .f1{left:-73px;top:-114px;} /* 생림면 */
#map1 .z6 .f1{left:-58px;top:-93px;} /* 상동면 */
#map1 .z7 .f1{left:-52px;top:-105px;} /* 대동면 */
#map1 .z8 .f1{left:-219px;top:-62px;} /* 동상동 */
#map1 .z9 .f1{left:-207px;top:-99px;} /* 회현동 */
#map1 .z10 .f1{left:-181px;top:-138px;} /* 부원동 */
#map1 .z11 .f1{left:-165px;top:-109px;} /* 내외동 */
#map1 .z12 .f1{left:-178px;top:-34px;} /* 북부동 */
#map1 .z13 .f1{left:-144px;top:-179px;} /* 칠산서부동 */
#map1 .z14 .f1{left:-243px;top:-110px;} /* 활천동 */
#map1 .z15 .f1{left:-245px;top:-46px;} /* 삼안동 */
#map1 .z16 .f1{left:-290px;top:-134px;} /* 불암동 */
#map1 .z17 .f1{left:-96px;top:-176px;} /* 장유 1동 */
#map1 .z18 .f1{left:-3px;top:-191px;} /* 장유 2동 */
#map1 .z19 .f1{left:-92px;top:-222px;} /* 장유 3동 */
/* 존(점) */
#map1 .z7~.z .a1:before{ /* 동 */
	content:'';display:inline-block;
	z-index:10; /* ☆ */
	position:absolute;
	width:8px;height:8px;
	border-radius:9999px;
	background:#b2dbff;
}
#map1 .z8 .a1:before{left:11px;top:15px;} /* 동상동 */
#map1 .z9 .a1:before{left:10px;top:15px;} /* 회현동 */
#map1 .z10 .a1:before{left:36px;top:4px;} /* 부원동 */
#map1 .z11 .a1:before{left:12px;top:-14px;} /* 내외동 */
#map1 .z12 .a1:before{left:19px;top:13px;} /* 북부동 */
#map1 .z13 .a1:before{left:23px;top:-14px;} /* 칠산서부동 */
#map1 .z14 .a1:before{left:3px;top:16px;} /* 활천동 */
#map1 .z15 .a1:before{left:17px;top:16px;} /* 삼안동 */
#map1 .z16 .a1:before{left:-3px;top:-11px;} /* 불암동 */
#map1 .z17 .a1:before{left:-12px;top:2px;} /* 장유 1동 */
#map1 .z18 .a1:before{left:44px;top:2px;} /* 장유 2동 */
#map1 .z19 .a1:before{left:-13px;top:0px;} /* 장유 3동 */

#map1 .z16 .t1{color:#174baa} /* 불암동 */
#map1 .z16.on .t1{margin:-10px 0 0 -20px;}
#map1 .z17.on .t1{margin:-10px 0 0 -20px;}
#map1 .z19.on .t1{margin:-10px 0 0 -20px;}
/* 효과 */
#map1 .z.on .t1{z-index:100;border-radius:20px;padding:10px 15px 10px 50px;background:#555;color:#fff;}
#map1 .z.on .t1:before{content:'';
	display:block;position:absolute;left:-10px;top:-15px;
	width:65px;height:50px;
	background:url(../../img/main/map1/go.png) no-repeat;
}
#map1 .z.on .f1{visibility:visible;opacity:1;}

@media all and (max-width:1025px){
	#take1town1{clear:both;float:none;width:100%;margin-top:0}
	#map1{clear:both;float:none;margin:0 auto;}
}
@media all and (max-width:600px){
	#take1town1 .on a{background:#fff;border-color:#d0e4ff;color:#5c5c5c;}
	#map1{display:none;}
}