@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2020.04.06 | 김소화 | 최초 등록
 * 2020.04.09 | 김소화 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 디자인팀 김소화
 * @since 2020.04.02
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

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

/* html,
body,
#container, #wrap, #body,
.container{
	height:100%;
} */







/* 배치.메인 20200407 */
#wrap{background:#edf5fc url(../../img/main/main_bg1.gif) no-repeat 50% 100% / cover;}
	#wrap>.container{
		width:auto; 
		max-width:none;
		margin:auto;
	}
	#body{
		/* z-index:0; ☆ z ( #go1mainbody > #foot ) */
		position:relative;
		margin:auto;
		padding:0;
		line-height:1.375;
	}


/* ◇◆ 공통 조정 ◇◆ */
/* none  */


/* ☆감춤 20200407 */
/* none ★☆ToEdit) 나중에 작업할거 ☆  */


/* ☆공용 20200407 */
/* none */
.init img{max-width:100%;} 


/* #body */


@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

#mainbody1>.container{padding:50px 0}



/* 동네정보 20200220 */
#towninfo1{margin:0 50px;}
#towninfo1 .hg1{position:relative;text-align:center;padding:120px 0 0}
#towninfo1 .h1{position:absolute;left:50%;top:0;
	font-family: 'GmarketSans';
	color:#ee4560;
	font-size:50px;
	margin:0 0 0 -30px;
}
#towninfo1 .h1 [class*='c']{display:inline-block;
	width:60px;height: 200px;
	transform-origin: bottom center;
	position:absolute;left:0;top:0;
}
#towninfo1 .h1 .c1{transform: rotate(-42deg);}
#towninfo1 .h1 .c2{transform: rotate(-26deg);}
#towninfo1 .h1 .c3{transform: rotate(-13deg);}
#towninfo1 .h1 .c4{transform: rotate(0deg);}
#towninfo1 .h1 .c5{transform: rotate(14deg);}
#towninfo1 .h1 .c6{transform: rotate(30deg);}
#towninfo1 .h1 .c7{transform: rotate(45deg);}
#towninfo1 .t1{color:#000;
	font-family: 'ONE-Mobile';
	font-weight:600;
	font-size:24px;
}




/* 지도 20180711 */
#map1{display:block;
	float:left;
	width:584px;
	z-index:0;
	position:relative;
	margin:auto;
	overflow:hidden;
}
#map1 .w1{display:block;
	position:relative;
	width:584px;
	height:547px;
}
#map1 .w1 .domap img{
	width:584px;
	height:547px;
}


/* 지도요소 */
#map1 .z{display:inline-block;
	position:absolute;
	width:0;height:0;
}
#map1 .z .a1{display:inline-block;
	position:absolute;
	line-height:1;
	white-space:nowrap;
}
#map1 .z .t1{display:block;
	z-index:10; 
	position:relative;
	color:#04407d;
	font-weight:600;
	font-size:15px;
	line-height:1.125;
}
#map1 .z7~.z .t1{ /* 동 */}

#map1 .z .ic1{display:inline-block;
	visibility:hidden; 
	z-index:30; 
	position:absolute;left:0;bottom:0;
	width:63px;height:48px;
	margin:4px -16px;
	background:url(../../img/main/map1/map1marker1on@2x.png) no-repeat center center;
	background-size:contain;
	vertical-align:middle;
	text-indent:-9999px;
	overflow:hidden;
}
#map1 .z .f1{display:inline-block;
	visibility:hidden;
	z-index:5; 
	position:absolute;
	opacity:0;
	transition:.4s;
}
#map1 .z .f1 img{
	max-width:none;
}
#map1 .z .t2{display:block;
	visibility:hidden;
	z-index:20; 
	position:absolute;left:-30px;top:-10px;
	border-radius:30px;
	padding:15px 20px 15px 60px;
	background:#082947;
	color:#fff;
	font-weight:600;
	font-size:17px;
	opacity:0;
	transition:.4s;
}
#map1 .z .t2:before{content:'';
	position:absolute;left:-10px;bottom:5px;
	width:80px;height:60px;
	background:url(../../img/main/pointer@2x.png) no-repeat 0 0 / contain
}
/* 존(기준위치) */
#map1 .z1{left:64px;top:212px;} /* 진영읍 */
#map1 .z2{left:211px;top:319px;} /* 주촌면 */
#map1 .z3{left:93px;top:328px;} /* 진례면 */
#map1 .z4{left:186px;top:176px;} /* 한림면 */
#map1 .z5{left:269px;top:114px;} /* 생림면 */
#map1 .z6{left:392px;top:150px;} /* 상동면 */
#map1 .z7{left:474px;top:288px;} /* 대동면 */
#map1 .z8{left:300px;top:313px;} /* 동상동 */
#map1 .z9{left:320px;top:339px;} /* 회현동 */
#map1 .z10{left:343px;top:411px;} /* 부원동 */
#map1 .z11{left:277px;top:360px;} /* 내외동 */
#map1 .z12{left:290px;top:255px;} /* 북부동 */
#map1 .z13{left:253px;top:434px;} /* 칠산서부동 */
#map1 .z14{left:375px;top:350px;} /* 활천동 */
#map1 .z15{left:352px;top:290px;} /* 삼안동 */
#map1 .z16{left:415px;top:400px;} /* 불암동 */
#map1 .z17{left:165px;top:416px;} /* 장유 1동 */
#map1 .z18{left:118px;top:467px;} /* 장유 2동 */
#map1 .z19{left:189px;top:490px;} /* 장유 3동 */
/* 존(맵) */
#map1 .z1 .f1{left:-65px;top:-75px;} /* 진영읍 */
#map1 .z2 .f1{left:-53px;top:-54px;} /* 주촌면 */
#map1 .z3 .f1{left:-45px;top:-96px;} /* 진례면 */
#map1 .z4 .f1{left:-85px;top:-108px;} /* 한림면 */
#map1 .z5 .f1{left:-82px;top:-115px;} /* 생림면 */
#map1 .z6 .f1{left:-75px;top:-93px;} /* 상동면 */
#map1 .z7 .f1{left:-62px;top:-110px;} /* 대동면 */
#map1 .z8 .f1{left:-218px;top:-85px;} /* 동상동 */
#map1 .z9 .f1{left:-237px;top:-110px;} /* 회현동 */
#map1 .z10 .f1{left:-259px;top:-184px;} /* 부원동 */
#map1 .z11 .f1{left:-193px;top:-131px;} /* 내외동 */
#map1 .z12 .f1{left:-205px;top:-26px;} /* 북부동 */
#map1 .z13 .f1{left:-170px;top:-205px;} /* 칠산서부동 */
#map1 .z14 .f1{left:-293px;top:-123px;} /* 활천동 */
#map1 .z15 .f1{left:-269px;top:-61px;} /* 삼안동 */
#map1 .z16 .f1{left:-331px;top:-172px;} /* 불암동 */
#map1 .z17 .f1{left:-80px;top:-187px;} /* 장유 1동 */
#map1 .z18 .f1{left:-35px;top:-239px;} /* 장유 2동 */
#map1 .z19 .f1{left:-106px;top:-263px;} /* 장유 3동 */
/* 구역이미지 */
#map1 .z1 .f1 img{width:178px;height:202px;} /* 진영읍 */
#map1 .z2 .f1 img{width:145px;height:155px;} /* 주촌면 */
#map1 .z3 .f1 img{width:153px;height:201px;} /* 진례면 */
#map1 .z4 .f1 img{width:204px;height:216px;} /* 한림면 */
#map1 .z5 .f1 img{width:185px;height:276px;} /* 생림면 */
#map1 .z6 .f1 img{width:192px;height:225px;} /* 상동면 */
#map1 .z7 .f1 img{width:171px;height:210px;} /* 대동면 */
#map1 .z7 ~ .z .f1 img{width:354px;height:319px;} /* 동상동  ~ 장유3동*/

/* 존(점) */
#map1 .z7~.z .a1:before{ /* 동 */
	content:'';
	display:block;
	z-index:10; 
	position:absolute;
	width:10px;height:10px;
	border-radius:9999px;
	background:#1d4777;
}
#map1 .z8 .a1:before{left:47px;top:3px;} /* 동상동 */
#map1 .z9 .a1:before{left:15px;top:20px;} /* 회현동 */
#map1 .z10 .a1:before{left:-14px;top:-14px;} /* 부원동 */
#map1 .z11 .a1:before{left:15px;top:-14px;} /* 내외동 */
#map1 .z12 .a1:before{left:17px;top:20px;} /* 북부동 */
#map1 .z13 .a1:before{left:28px;top:-16px;} /* 칠산서부동 */
#map1 .z14 .a1:before{left:3px;top:25px;} /* 활천동 */
#map1 .z15 .a1:before{left:39px;top:17px;} /* 삼안동 */
#map1 .z16 .a1:before{left:-4px;top:-20px;} /* 불암동 */
#map1 .z17 .a1:before{left:21px;top:25px;} /* 장유 1동 */
#map1 .z18 .a1:before{left:22px;top:-16px;} /* 장유 2동 */
#map1 .z19 .a1:before{left:-15px;top:2px;} /* 장유 3동 */
/* 효과 */
#map1 .z .a1:hover .ic1,
#map1 .z .a1:focus .ic1,
#map1 .z.on .a1 .ic1{
	visibility:visible;
	background:url(../../img/main/map1/map1marker1on@2x.png);
	animation:kfx1move1vertic2 .6s ease-in-out infinite;
}
/* #map1 .z .a1:focus .ic1{outline:1px dotted #000;} */
#map1 .z .a1:hover .f1,
#map1 .z .a1:focus .f1,
#map1 .z.on .f1,
#map1 .z .a1:hover .t2,
#map1 .z .a1:focus .t2,
#map1 .z.on .t2{
	visibility:visible;
	opacity:1;
}




/* 동네고르다 20200220 */
#take1town1{position:relative;
	float:left;
	width:calc(100% - 620px);
	margin:50px 0 0 20px;
}
#take1town1 .wrap1{}
#take1town1 .w1{display:block;
	margin:0 0 20px;
	text-align:center;
}
#take1town1 ul{}
#take1town1 li{display:inline-block;}
#take1town1 li a{display:block;
	position:relative;
	width:150px;height:60px;
	box-sizing:border-box;
	line-height:60px;
	border:1px solid #62778b;
	background:#72879a;
	color:#fff;
	font-size:17px;
	text-align:center;
	font-family: 'ONE-Mobile';
	margin:5px;
	border-radius:10px;
}
#take1town1 li a:hover,
#take1town1 li a:focus,
#take1town1 li.on a{
	border-color:#0f54a2;
	background-color:#0f54a2;
	box-shadow: 2px 4px 0px 2px rgba(0,37,69,1);
}
#take1town1 li.on a:before{content:'';
	position:absolute;right:5px;top:-15px;
	width:30px;height:30px;
	background:url(../../img/main/check@2x.png) no-repeat 0 0 / contain;
}


@media all and (max-width:1419px){
	#take1town1 li a{width:120px;}

}
@media all and (max-width:1099px){
	#towninfo1{margin:0}
}
@media all and (max-width:920px){
	#map1{float:none;margin:0 auto 20px;width:100%;overflow-x:auto;}
	#map1 .wrap1{width:584px;margin:0 auto;padding-bottom:10px}
	#take1town1{float:none;width:100%;margin:0;;}
	#take1town1 li a{font-size:14px;height:auto;line-height:120%;padding:15px 0}
}
@media all and (max-width:430px){

	#take1town1{text-align:center;}
	#take1town1 li a{margin:5px 0;width:100px;}
	#towninfo1 .hg1{padding:80px 0 0;}
	#towninfo1 .h1 [class*='c']{font-size:40px;}
	#towninfo1 .t1{font-size:17px;}
}