@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/* -------------------------------
	인트로
-------------------------------- */
body#body-intro{min-width:100%;overflow:hidden}
body#body-intro .container{width:100%;min-width:100%;}
body#body-intro #header{padding:0;}
body#body-intro #footer{position:fixed;left:0;bottom:0;width:100%;border-top:0;padding:8px;text-align:center;font-size:12px;background:#fff;}

#intro{height:100%;width:100%;position:fixed;left:0;top:0;}
#intro .column{float:left;width:25%;height:100%;position:relative;background:url(../images/img-intro2.jpg) no-repeat center center;background-size:cover;transition:.3s;}
#intro .column:nth-of-type(2){background-image:url(../images/img-intro1.jpg)}
#intro .column:nth-of-type(3){background-image:url(../images/img-intro3.jpg)}
#intro .column:nth-of-type(4){background-image:url(../images/img-intro4.jpg)}
#intro .column:before{content:'';background-color:transparent;opacity:0;top:0;z-index:-1;box-shadow:none;visibility:hidden;transition:1s;}
#intro .column h3{font-family:'Nanum Myeongjo',sans-serif;font-size:35px;color:#fff;}
#intro .column .sub{font-size:16px;color:#fff;margin-top:5px;display:inline-block}
#intro .column p{font-size:13px;color:#d9e9ff;line-height:1.4;text-align:center;}
#intro .column .btn{border-radius:100px;border:4px solid #fff;text-align:center;display:inline-block;font-size:14px;font-weight:700;padding:5px 25px;color:#fff;margin-top:20px;}
#intro .column .column-content{position:absolute;bottom:50px;width:100%;text-align:center;padding:18px;z-index:11;}
#intro .column .column-hide{transition:1s;opacity:0;visibility:hidden;max-height:10px;position:relative;}

@media screen and (min-width: 768px){
	#intro .column:hover{}
	#intro .column:hover:before{content:'';width:102%;height:102%;opacity:1;background-color:rgba(35,53,96,.8);position:absolute;left:-1%;top:0;box-shadow: 0 0 10px 0 #232f4b;z-index:10;transition:1s;visibility:visible;}
	#intro .column:hover .column-hide{max-height:300px;top:21px;opacity:1;visibility:visible;transition:2s;margin-bottom:30px;}
}

@media screen and (max-width: 767px){
	body#body-intro{min-width:100%;overflow:visible}
	body#body-intro #footer{position:relative;}
	#intro{position:relative;height:auto;padding-top:60px;}
	#intro .column:active:before{content:'';width:102%;height:102%;opacity:1;background-color:rgba(35,53,96,.8);position:absolute;left:-1%;top:0;box-shadow: 0 0 10px 0 #232f4b;z-index:10;transition:.4s;visibility:visible;opacity:1}
	#intro .column{float:none;clear:both;width:100%;height:250px;border-bottom:1px solid rgba(255,255,255,.3)}
	#intro .column:before{content:'';width:100%;height:100%;opacity:1;background-color:rgba(35,53,96,.3);visibility:visible;position:absolute;left:-1%;top:0;z-index:10;transition:.7s;}
	#intro .column .column-content{padding-top:0;position:relative;bottom:auto;padding-top:110px;}
	#intro .column h3{margin-top:-30px;}
	#intro .column .column-hide{opacity:1;visibility:visible;}
	#intro .column p{display:none}
}

/* -------------------------------
	00. 메인
-------------------------------- */
#main{height:100%;background:url(../images/bg_main.png) no-repeat center center;background-size:cover;width:100%;position:absolute;}
#main:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;}

#main .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:100%;height:100%;text-align:center;justify-content:center}
#main .wrap h2{color:#fff;font-size:34px;font-weight:700;line-height:1.5;font-family:'Nanum Myeongjo',sans-serif}

#main .container{position:relative}
#main nav{background-color:rgba(255,255,255,.5);width:1000px;bottom:140px;}
#main nav > ul > li > a{display:block;padding:26px;color:#1a1a1a;background:url(../images/ic-arrow-b.svg) no-repeat 92% center;background-size:25px 11px;}
#main nav > ul > li.active > a{color:#fff;background-color:#233560;background-image:url(../images/ic-arrow-w.svg);font-weight:700;}

/* 메인에서만 푸터 처리 */
body#body-main #footer{position:fixed;bottom:0;width:100%;left:0;}

@media screen and (max-width: 767px){
	#main{height:auto;position:relative}
	#main .wrap{display:block;height:auto;position:relative;padding:100px 20px}
	body#body-main #footer{position:relative;}	
	
	#main nav{position:relative;clear:both;bottom:auto;width:100%;background-color:rgba(255,255,255,.7);margin-top:40px;}
	#main nav{margin-left:0}
	#main nav > ul > li{width:100%;float:none;padding:0;}
}

/* -------------------------------
	04. 알림마당
-------------------------------- */
#menu-4{background-image:url(../images/bg_main.png)}
#menu-4 .page__head .page___title{padding-bottom:0}

/* -------------------------------
	03. 생태복원사업 
-------------------------------- */
#menu-3{background-image:url(../images/bg_main.png)}
#menu-3 .page__body .page___title{}

/* 조사평가 리스트 */
.research-list .box{text-align:center;height:100px;padding:25px;display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;}
.research-list .box:before{content:'';background-color:#676767;width:100%;height:3px;position:absolute;top:50%;right:0;transform:translate(-50%);z-index:-1;}
.research-list li:nth-child(4n+1) .box:before{content:'';display:none;}
.research-list .box p{vertical-align:middle}

@media screen and (max-width: 767px){
	.research-list{overflow:hidden;position:relative;}
	.research-list:before{content:'';background-color:#676767;width:1px;height:100%;position:absolute;top:0%;right:auto;left:50%;transform:translate(-50%);z-index:-1;}
	.research-list .box:before{content:'';display:none}
}

/* -------------------------------
	02. 토지매수진행현황 
-------------------------------- */
/* 맵 시스템 */
#MapSystem *{font-family: 'NanumSquare', sans-serif;}

/* 맵컨트롤 :: 우측 상단 */
/* 20191016 수정 */
#map-control{position:absolute;right:20px;top:20px;z-index:1001;}
#map-control ul{background:#1a284d;display:inline-block;float:right}
#map-control ul > li{float:left;font-size:0;line-height:1;float:left;position:relative;}
/* / 20191016 수정 */
#map-control ul > li:after{content:'';width:1px;height:100%;position:absolute;right:0;top:0;background-color:rgba(255,255,255,.15)}
#map-control ul > li button{text-indent:-10000em;overflow:hidden;display:block;background:#686e76;width:40px;height:43px;background-size:100%;box-shadow:2px 2px 2px gray;}
#map-control ul > li button#prev{background-image:url(../images/ic_left.svg)}
#map-control ul > li button#next{background-image:url(../images/ic_right.svg)}
#map-control ul > li button#refresh{background-image:url(../images/ic_rotate.svg)}
#map-control ul > li button#lengthMeasure{background-image:url(../images/ic_ic1.svg)}
#map-control ul > li button#areaMeasure{background-image:url(../images/ic_ic2.svg)}
#map-control ul > li button#location{background-image:url(../images/ic-location.svg)}
#map-control ul > li button#info{background-image:url(../images/ic-info.svg)}
#map-control ul > li button#mapChange{background-image:url(../images/icon_ex4.svg);background-repeat:no-repeat;background-size:23px;background-position:center;}

/* 20191016 추가 */
#map-control ul > li button#zoomIn{background-image:url(../images/ic-zoomin.svg)}
#map-control ul > li button#zoomOut{background-image:url(../images/ic-zoomout.svg)}
#map-control ul > li button#dragPan{background-image:url(../images/ic-drag.svg)}
/* / 20191016 추가 */

#map-control ul > li.text button{font-size:13px;letter-spacing:0.8px;color:#fff;font-weight:800;width:auto;text-indent:0;padding:0 10px;box-shadow:2px 2px 2px gray;}
#map-control ul > li button#c_down{background-image:url(../images/ic_down.svg)}

/* 맵컨트롤 :: 우측 확대축소 */
#map-zoom{position:absolute;right:35px;top:105px;z-index:1001}
#map-zoom .zoom{display:block;clear:both;width:40px;height:40px;text-indent:-10000em;overflow:hidden;background:url(../images/ic-zoom-out.svg) no-repeat center center #fff;background-size:cover;border-top:1px solid rgba(0,0,0,.1);}
#map-zoom #btn-zoomIn{background-image:url(../images/ic-zoom-in.svg);border-bottom:1px solid rgba(0,0,0,.1);}

#map-zoom #btn-slide{height:110px!important;background:#fff;}
#map-zoom .ui-slider-vertical{width:40px;height:120px!important}
#map-zoom .ui-slider-vertical .ui-slider-handle{left:10px;width:20px;height:7px;background:#1a284d;box-shadow: 1px 1px 4px 0 rgba(80, 89, 114, 0.78);border-radius:0;border:0}
#map-zoom .ui-slider-vertical .ui-slider-range{width:6px;left:16px;top:7px;height:95px!important;border-radius:0}
#map-zoom #slider-vertical{height:115px;border-radius:0;border:0;box-shadow:none;background:#fff;}



/* ----- 20191015 수정 ----- */
#MapSystem #aside{left:0;top:0;width:400px;height:100%;z-index:1000;background:#FAFAFA;overflow-y:auto;box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.15);-webkit-overflow-scrolling: touch;overflow-x:hidden;}
#MapSystem #aside #aside-header{background-color:#E6E6E6;padding:27px;margin-bottom:0;}
#MapSystem #aside #aside-header h1{font-size:18px;color:#1a264d;font-weight:900;margin-bottom:30px;}
#MapSystem #aside #aside-header .form-group label{color:#686e76;font-size:14px;padding:6px 13px;cursor:pointer;border-radius:4px;}
/* ----- // 20191015 수정 ----- */

#MapSystem #aside #aside-header .form-group label.active{background-color:#686e76;color:#fff;font-weight:700;box-shadow:2px 2px 2px gray;}
#MapSystem #aside #aside-header .form-group input[type="radio"]{display:none;}
#MapSystem #aside #aside-header .form-group.search{border-radius:4px;display:flex;height:30px;line-height:30px;overflow:hidden}
#MapSystem #aside #aside-header .form-group.search select,
#MapSystem #aside #aside-header .form-group.search input[type="text"]{flex:1 1 auto;border:0;padding-left:10px;font-size:13px;}
#MapSystem #aside #aside-header .form-group.search .search-submit{flex:1 1 auto;border:0;background:#fff;font-size:13px;color:#1a284d;padding-left:15px;padding-right:15px;cursor:pointer;position:relative}
#MapSystem #aside #aside-header .form-group.search .search-submit input[type="button"]{background:none;}
#MapSystem #aside #aside-header .form-group.search .search-submit:before{content:'';width:1px;height:12px;background-color:#1a284d;position:absolute;left:4px;top:9px;}

/* ----- 20191015 추가 ----- */
#MapSystem #aside #aside-header .form-group.radio .group{float:left;margin-right:10px;}
#MapSystem #aside #aside-header .form-group.radio .group input[type="radio"]{display:block;float:left;vertical-align:middle;margin-right:5px;}
#MapSystem #aside #aside-header .form-group.radio .group label{display:block;float:left;vertical-align:middle;padding:0;color:#686e76;}

#MapSystem #aside #aside-header .form-group.select{display:block;margin-left:-3px;}
#MapSystem #aside #aside-header .form-group.select select{padding:0;width:23%;height:30px;border-radius:3px;background-size:15px 10px;padding-left:10px;margin-left:3px;}
#MapSystem #aside #aside-header .form-group .btn-sch{display:block;background-color:#fff;clear:both;width:100%;border-radius:4px;font-size:13px;font-weight:700;color:#1a284d;height:30px;cursor:pointer}
/* // ----- 20191015 추가 ----- */

#MapSystem #aside #aside-content{clear:both;}

/* ----- 20191015 수정 ----- */
#MapSystem #aside #aside-content h2{background-color:#686e76;display:block;font-size:13px;color:#fff;height:34px;line-height:34px;padding-left:27px;}
/* ----- / 20191015 수정 ----- */

#MapSystem #content{left:0;top:0;width:100%;height:100%;z-index:999;}
#MapSystem .map iframe{width:100%;height:100%;}

/* ----- 20191015 수정 ----- */
#MapSystem #aside .box{clear:both;margin-bottom:5px;background:#fff;padding:0;border:0;}
/* ----- / 20191015 수정 ----- */
#MapSystem #aside .box .box__head{padding:0px 27px;border-bottom:1px solid #ddd;}

/* ----- 20191015 수정 ----- */
#MapSystem #aside .box .box__head .box-title{font-size:15px;line-height:1;font-weight:700;float:left}
/* ----- 20191015 수정 ----- */

/* ----- 20191015 추가 ----- */
#MapSystem #aside .box .box__head .box-info{color:#686e76;float:right;font-size:13px;}
#MapSystem #aside .box .box-title2{border-top:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2;display:block;padding:13px 28px;font-size:14px;font-weight:700}
#MapSystem #aside .box .box-title2:before{content:'+';padding-right:5px;}
#MapSystem #aside .box .box-title2 + .filter-span{float:right;position:absolute;right:28px;margin-top:-32px;}
/* ----- / 20191015 추가 ----- */

/* ----- 20191015 수정 ----- */
#MapSystem #aside .box .box__body{clear:both;padding:18px 27px;position:relative;display:none}
/* ----- / 20191015 수정 ----- */
#MapSystem #aside .box .box__body.no-padding{padding:0px;}
#MapSystem #aside .box p{font-size:12px;color:#1a284d;line-height:1.4;margin-bottom:15px;}
#MapSystem #aside .box .point{color:#97284d;font-weight:600;font-size:14px;}

#MapSystem #aside #aside-map{display:none}

#MapSystem #aside .scrollbox{height:150px;}

/* ----- 20191015 수정 ----- */
#MapSystem #aside .scrollbox li{padding-bottom:7px;}
/* ----- / 20191015 수정 ----- */

#MapSystem #aside .scrollbox li:last-child{padding-bottom:0;}
#MapSystem #aside .scrollbox .title{color:#97284d;font-size:14px;font-weight:600;margin-bottom:6px;display:inline-block;}
#MapSystem #aside .scrollbox .title:hover{text-decoration:underline;}
#MapSystem #aside .scrollbox .address{color:#1a284d;font-size:13px;display:block;clear:both;}

#MapSystem #aside .filter{display:flex;align-items:center;justify-content:space-between}

/* ----- 20191015 수정 ----- */
#MapSystem #aside .filter-listing{padding-left:37px;}
/* ----- / 20191015 수정 ----- */

/* ----- 20191015 수정 ----- */
#MapSystem #aside .filter-listing .selected{background:#dee1e7;}
#MapSystem #aside .filter-listing > li{display:block;clear:both;border-bottom:1px solid rgba(0,0,0,.15);padding:7px 27px;padding-left:0;}
#MapSystem #aside .filter-listing > li:last-child{border-bottom:0;}
#MapSystem #aside .filter .filter-title,
#MapSystem #aside .filter .filter-control{flex:1 1 auto;}
#MapSystem #aside .filter .filter-title{color:#686e76;font-size:13px;line-height:1;font-weight:600}
#MapSystem #aside .filter .filter-title:before{content:'';padding-right:5px}
/* ----- / 20191015 수정 ----- */
#MapSystem #aside .filter .filter-control{float:right;text-align:right;}

/* ----- 20191015 수정 ----- */
.filter-span{display:inline-block;margin-left:1px;line-height:9.6px;vertical-align:middle}
.filter-span .filter_up,
.filter-span .filter_down{width:18.5px;height:19.2px;text-indent:-1000em;overflow:hidden;display:block;background:url(../images/ic_fliter_up.svg) no-repeat center center;float:left;background-size:18.5px 19.2px;}
.filter-span .filter_down{background-image:url(../images/ic_fliter_down.svg);margin-left:-1px;}
.filter-span .filter_input{float:left;height:19.2px;font-size:11px;border:1px solid #a6a6a6;text-align:center;width:35.5px;color:#1a284d;}
/* ----- / 20191015 수정 ----- */

#MapSystem #aside .filter .filter-span .filter-count{float:left;}
#MapSystem #aside .filter .filter-span .filter-count .filter_up2,
#MapSystem #aside .filter .filter-span .filter-count .filter_down2{display:block;clear:both;width:9.6px;height:9.6px;background:url(../images/ic_fliter_up1.svg) no-repeat center center;text-indent:-1000em;}
#MapSystem #aside .filter .filter-span .filter-count .filter_down2{background-image:url(../images/ic_fliter_down2.svg)}
#MapSystem #aside .filter .filter-span .filter_trash{background:url(../images/ic_fliter_trash.svg) no-repeat center center;width:19.2px;height:19.2px;text-indent:-1009em;}
#MapSystem #aside .filter .filter-span .filter_eye{background:url(../images/ic_fliter_eye.svg) no-repeat center center;width:19.2px;height:19.2px;text-indent:-1009em;}
#MapSystem #aside .filter .filter-span .filter_eye_close{background:url(../images/ic-fliter-eye-select.svg) no-repeat center center;width:19.2px;height:19.2px;text-indent:-1009em;}
#MapSystem #aside .filter .filter-span .filter_layer_info{background:url(../images/layer_info.png) no-repeat center center;width:19.2px;height:19.2px;text-indent:-1009em;}

/* 모바일 일때 */
#MapSystem.mobile #aside{width:100%;padding-top:68px;}
#MapSystem.mobile #aside h1{display:none;}
#MapSystem.mobile #aside #aside-header .form-group.search{height:43px;}
#MapSystem.mobile #aside #aside-header .form-group.search .search-submit input[type="button"]{height:43px;font-size:15px;}
#MapSystem.mobile #aside #aside-header .form-group.search .search-submit:before{top:15px}
#MapSystem.mobile #aside #aside-content h2{height:50px;line-height:50px;font-size:15px;}
#MapSystem.mobile #aside .box .box__head{background:url(../images/expand-button-down.svg) no-repeat 95% center;background-size:14px;cursor:pointer}
#MapSystem.mobile #aside .box .box__head.active{background-image:url(../images/expand-button-up.svg)}

/* ----- 20191015 수정 ----- */
#MapSystem.mobile #aside .box .box__body{display:none;}
/* ----- 20191015 수정 ----- */
#MapSystem.mobile #aside .box .box__body.active{display:block}

#MapSystem #aside #aside-map{display:block;height:400px;position:relative;}
#MapSystem.mobile #map-control{right:10px;}
#MapSystem.mobile #map-zoom{right:10px;}

/* ----- 20191015 추가 ----- */
#MapSystem.mobile #aside #aside-header .form-group.radio .group{float:left;margin-right:10px;}
#MapSystem.mobile #aside #aside-header .form-group.radio .group input[type="radio"]{display:block;float:left;vertical-align:middle;margin-right:5px;}
#MapSystem.mobile #aside #aside-header .form-group.radio .group label{display:block;float:left;vertical-align:middle;padding:0;color:#686e76;}

#MapSystem.mobile #aside #aside-header .form-group.select{display:block;margin-left:-1%;}
#MapSystem.mobile #aside #aside-header .form-group.select select{padding:0;width:24%;float:left;height:30px;border-radius:3px;background-size:15px 10px;padding-left:10px;margin-left:1%;}
#MapSystem.mobile #aside #aside-header .form-group .btn-sch{display:block;background-color:#fff;clear:both;width:100%;border-radius:4px;font-size:13px;font-weight:700;color:#1a284d;height:30px;cursor:pointer}
/* // ----- 20191015 추가 ----- */

/* -------------------------------
	01. 토지매수사업소개 
-------------------------------- */
.formula{color:#4d4d4d;font-weight:700;display:flex;flex-direction:row;align-items:center;padding-left:100px;padding-right:100px;font-size:17px;margin-bottom:10px;}
.formula .float-left{flex:1 1 auto;}
.formula .float-left .row:first-child{padding-bottom:20px;}
.formula .float-left .row:last-child{position:relative;padding-top:20px;}
.formula .float-left .row:last-child:before{content:'';width:90%;height:1px;background-color:#000;top:0%;position:absolute;}

@media screen and (max-width: 767px){
	.formula{padding-left:20px;padding-right:20px;font-size:11px;}
}


/* 절차안내 */
.step{clear:both;padding-left:260px;position:relative;overflow:hidden;}
.step:before{content:'';height:802px;width:1px;background-color:#676767;position:absolute;left:100px;top:30px;z-index:-1}
.step:after{content:'';display:block;clear:both;width:50%;height:1px;background:#676767;position:absolute;left:100px;bottom:30px;z-index:-1;}
.step-title{width:196px;height:164px;display:block;text-align:center;position:absolute;left:0;border:3px solid #b6e2ec;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(0,-50%);background:#fff;flex-direction:row}
.step .box{padding:15px;text-align:center;position:relative}
.step .box p{font-size:20px;color:#4d4d4d;line-height:1.3}
.step .box .text-small{margin-top:10px;display:block;}
.step .box.hide{border:0;background:transparent}
.step li:first-child,.step li:nth-child(2){}
.step li:nth-child(2n+1) .box{background-color:#f0f9fb}
.step li{position:relative;}
.step li:nth-last-child(1),.step li:nth-last-child(2){padding-bottom:0;}
.step ol{position:relative;display:block;overflow:hidden}
.step .fake{width:70%;height:1px;background:#676767;position:absolute;left:100px;top:30px;}
.step .box.line-vertical:before{content:'';height:600%;width:1px;background-color:#676767;position:absolute;left:50%;transform:translate(-50%,0);z-index:-1}
.step .box.line-horizon:after{content:'';height:1px;width:100%;background-color:#676767;position:absolute;right:0%;z-index:-1;top:50%;transform:translate(100%,-50%)}

.step .height .box{height:132px;display:flex;flex-direction:row;align-items:center;justify-content:center;}

.step.second{margin-top:50px;}
.step.second span{color:#4d4d4d;font-size:21px;position:absolute;top:-40px;font-weight:300;display:inline-block;width:150px;left:70px;}
.step.second:before{height:548px;}
.step.second .box.line-vertical:before{height:445%;}
.step .box.line-vertical.left:before{left:25%;top:0;height:130px;}
.step .box.line-vertical.right:before{left:150%;top:-100px;height:230px;}
.step .box.line-vertical.top-none:before{left:auto;display:none}
.step .box.line-vertical.top-none span{right:-40px;font-size:18px;left:auto;right:-40px;}
.step.second li:nth-child(2n+1) .box{background-color:#f9fbf0}
.step.second li:first-child:before{content:'';height:100%;width:1px;background:red;position:absolute;left:50%;top:-50px;}
.step.second li:nth-child(3) .box{width:50%;}
.step.second li:nth-child(3) .box p{color:#de8c75;font-weight:700}

@media screen and (max-width: 767px){
	.step{padding-left:0px;}
	.step:after{display:none}
	.step .fake{display:none}
	.step .list.column-2 > li{clear:none;float:left;width:48%;}
	.step .list.column-2 > li:nth-child(2n+1){clear:both;float:left;}
	.step .list.column-2 > li:nth-child(even){float:none;float:right}
	.step:before{content:'';display:none}
	.step-title{position:relative;width:auto;height:auto;display:block;padding:15px;transform:none;margin-bottom:20px;}
	.step-title br{display:none;}
	.step .box p{font-size:11px;}
	.step .box br{display:none}
	.step .box .text-small{font-size:9px;margin-top:5px;}
	.step .line-vertical.right{padding-left:5px;padding-right:5px;}
	.step.second span{font-size:12px;left:10%;border:1px solid #ddd;display:inline-block;padding:0;width:100px;background:#fff;top:-30px;width:auto;padding:5px;}
	.step .box.line-vertical.top-none span{font-size:11px;float:right;margin-right:15%;}
	.step .box.line-vertical.right:before{height:170px!important;}
	.step .box.line-vertical.left:before{height:200px!important}
	.step.second .mb-line-none:before{display:none}
	.step.second .mb-line-vertical:before{content:'';height:100px;width:1px;position:absolute;left:50%;top:0;background:#676767;z-index:-1}
	.step.second .mb-line-vertical2:after{content:'';height:100px;width:1px;position:absolute;left:50%;top:0;background:#676767;z-index:-1}
}