@charset "utf-8";
/* CSS Document */

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

 							업무 소개

**********************************************************************/
[data-subarea="introduction"] .icon_box									{ position:relative; display:flex;gap:20px;justify-content: space-between; flex-wrap:wrap;}
[data-subarea="introduction"] .icon_box	li								{ position:relative;flex:1 1 20%;padding:1.375em;background:var(--color-white);border:1px solid #e8e8e8;border-radius:10px;}
[data-subarea="introduction"] .icon_box	li::before						{ content: "";position: absolute;top:-1px;left: -1px;width: 2.5em;height: 2em;;background: transparent;border-top: 2px solid var(--color-point);border-left: 2px solid var(--color-point);
																			border-top-left-radius: 10px; transition:all .1s ease;}
[data-subarea="introduction"] .icon_box	li:focus::before,
[data-subarea="introduction"] .icon_box	li:hover::before				{ width:3em;height:2.5em;}
[data-subarea="introduction"] .icon_box	li .box							{ text-align:left;}
[data-subarea="introduction"] .icon_box	li .box strong					{ display:block;height: 2.5em;font-size:1.063em;font-weight:700;color:var(--color-base);opacity:.9;line-height:1.3;margin-bottom:1.25em;}
[data-subarea="introduction"] .icon_box	li .box .icon				 	{display:block;--sizeHig:55px;width:var(--sizeHig);height:var(--sizeHig);}
[data-subarea="introduction"] .icon_box	li .box .icon::before			{content:'';display:block;width:100%;height:100%;}
[data-subarea="introduction"] .icon_box	li .box .icon1::before			{background:url('/resource/green/images/contents/info_icon01.svg') no-repeat left bottom;background-size: auto 47px;}
[data-subarea="introduction"] .icon_box	li .box .icon2::before			{background:url('/resource/green/images/contents/info_icon02.svg') no-repeat left bottom;background-size: auto 49px;}
[data-subarea="introduction"] .icon_box	li .box .icon3::before			{background:url('/resource/green/images/contents/info_icon03.svg') no-repeat left bottom;background-size: auto 55px;}
[data-subarea="introduction"] .icon_box	li .box .icon4::before			{background:url('/resource/green/images/contents/info_icon04.svg') no-repeat left bottom;background-size: auto 54px;}
[data-subarea="introduction"] .icon_box	li .box .icon5::before			{background:url('/resource/green/images/contents/info_icon05.svg') no-repeat left bottom;background-size: auto 47px;}
[data-subarea="introduction"] .icon_box	li .box .icon6::before			{background:url('/resource/green/images/contents/info_icon06.svg') no-repeat left bottom;background-size: auto 50px;}
[data-subarea="introduction"] .icon_box	li .box .icon7::before			{background:url('/resource/green/images/contents/info_icon07.svg') no-repeat left bottom;background-size: auto 52px;}
[data-subarea="introduction"] .icon_box	li .box .icon8::before			{background:url('/resource/green/images/contents/info_icon08.svg') no-repeat left bottom;background-size: auto 53px;}


@media all and (max-width:1568px){
	[data-subarea="introduction"] .icon_box	li .box strong br 			{ display:none;}
}
@media all and (max-width:1468px){
	[data-subarea="introduction"] .icon_box								{ gap:10px;}
	[data-subarea="introduction"] .icon_box li							{ padding:1.25em;}
	[data-subarea="introduction"] .icon_box li .box strong				{ font-size:1em; margin-bottom:1.125em;}
	[data-subarea="introduction"] .icon_box	li .box .icon			  	{ --sizeHig:50px;}
	[data-subarea="introduction"] .icon_box	li .box .icon1::before		{background-size: auto 42px;}
	[data-subarea="introduction"] .icon_box	li .box .icon2::before		{background-size: auto 44px;}
	[data-subarea="introduction"] .icon_box	li .box .icon3::before		{background-size: auto 50px;}
	[data-subarea="introduction"] .icon_box	li .box .icon4::before		{background-size: auto 49px;}
	[data-subarea="introduction"] .icon_box	li .box .icon5::before		{background-size: auto 42px;}
	[data-subarea="introduction"] .icon_box	li .box .icon6::before		{background-size: auto 45px;}
	[data-subarea="introduction"] .icon_box	li .box .icon7::before		{background-size: auto 47px;}
	[data-subarea="introduction"] .icon_box	li .box .icon8::before		{background-size: auto 48px;}

}
@media all and (max-width:1368px){
	[data-subarea="introduction"] .icon_box li							{ padding:1.125em;}
	[data-subarea="introduction"] .icon_box li .box strong				{ margin-bottom:1.063em;}
}
@media all and (max-width:1024px){
	[data-subarea="introduction"] .icon_box li							{ flex:1 1 40%;}
}
@media all and (max-width:468px){
	[data-subarea="introduction"] .icon_box li 							{ flex:1 1 100%;}
	[data-subarea="introduction"] .icon_box li .box strong				{ height:auto; margin-bottom:1em;}
}


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

 							사무실 안내

**********************************************************************/
[data-subarea="location"] .map_box											{ position:relative; overflow:hidden; width:100%; height:450px; border-bottom:1px solid rgba(0,0,0,.1); }
[data-subarea="location"] .map_box .root_daum_roughmap						{ width:100%; height:100% !important;}
[data-subarea="location"] .map_info											{ display:flex; flex-flow:column; gap:.75em; padding:2em 0; border-bottom:2px solid var(--color-base); }
[data-subarea="location"] .map_info>li										{ position:relative; display:flex; gap:.75em 0; flex-wrap:wrap; align-items:center; padding-left:30px; font-size:1.06em; line-height:1.3 }
[data-subarea="location"] .map_info>li .icon								{ position:absolute; left:0; top:3px; }
[data-subarea="location"] .map_info>li .icon::before						{ display:block; content:''; background-position:50%; background-repeat:no-repeat; }
[data-subarea="location"] .map_info>li .icon1::before						{ width:16px; height:18px; background-image:url(/resource/green/images/contents/icon_map01.svg); }
[data-subarea="location"] .map_info>li .icon2:before						{ width:17.5px; height:18px; background-image:url(/resource/green/images/contents/icon_map02.svg); }
[data-subarea="location"] .map_info>li>dl									{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
[data-subarea="location"] .map_info>li>dl>dt								{ font-weight:bold; }
[data-subarea="location"] .map_info>li>dl+dl								{ padding-left:1em; margin-left:.75em; }
[data-subarea="location"] .map_info>li>dl+dl::before						{ position:absolute; left:0; top:50%; width:5px; height:5px; background:rgba(0,0,0,.3); border-radius:100%; content:''; transform:translateY(-50%); }
.root_daum_roughmap .wrap_btn_zoom{ z-index:1 !important; }
@media all and (max-width:1024px){
	[data-subarea="location"] .map_box										{ height:350px; }
	[data-subarea="location"] .map_info>li									{ padding-left:22px; }
	[data-subarea="location"] .map_info>li .icon							{ top:2px; }
	[data-subarea="location"] .map_info>li .icon1::before					{ width:14px; height:16px;  }
	[data-subarea="location"] .map_info>li .icon2:before					{ width:15.5px; height:16px; }
}
@media all and (max-width:668px){
	[data-subarea="location"] .map_box										{ height:300px; }
	[data-subarea="location"] .map_info>li									{ padding-left:22px; gap:.25em 0; }
	[data-subarea="location"] .map_info>li .icon							{ top:2px; }
	[data-subarea="location"] .map_info>li .icon1::before					{ width:14px; height:16px;  }
	[data-subarea="location"] .map_info>li .icon2:before					{ width:15.5px; height:16px; }
	[data-subarea="location"] .map_info>li>dl								{ width:100%; }
	[data-subarea="location"] .map_info>li>dl+dl							{ padding-left:0; margin-left:0; }
	[data-subarea="location"] .map_info>li>dl+dl::before					{ display:none; }
}



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

 							공원사용안내

**********************************************************************/
[data-subarea="use"] .area_diagram .list .icon 					{ display:block; --sizeHig:55px;width:var(--sizeHig);height:var(--sizeHig); font-size:0; text-indent:-9999em; }
[data-subarea="use"] .area_diagram .list .icon::before			{ content:''; display:block; width:100%; height:100%; background-size:auto 55px; background-position:50%; background-repeat:no-repeat}
[data-subarea="use"] .area_diagram .list .icon1::before			{ background-image:url('/resource/green/images/contents/icon_use01.svg');}
[data-subarea="use"] .area_diagram .list .icon2::before			{ background-image:url('/resource/green/images/contents/icon_use02.svg');}
[data-subarea="use"] .area_diagram .list .icon3::before			{ background-image:url('/resource/green/images/contents/icon_use03.svg');}
[data-subarea="use"] .area_diagram .list .icon4::before			{ background-image:url('/resource/green/images/contents/icon_use04.svg');}




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

 							지역별 검색

**********************************************************************/
/* tabmenu */
.map_tab														{ position:relative; display:none }
.map_tab>ul														{ width:100%; border:1px solid #e5e5e5; border-left:1px solid #e5e5e5; height:var(--sizeBox); border-radius:10px; background:#fff; --sizeBox:140px; --sizeBig:70px; 
																	display:flex; flex-wrap:wrap; box-sizing:border-box; overflow:hidden}
.map_tab>ul>li													{ width:calc(100% / 15); font-size:17px; font-weight:400; color:var(--color-base); background:var(--color-white); height:var( --sizeBig)!important; 
																	border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5 }
.map_tab>ul>li:nth-child(15)									{ border-right-width:0; }
.map_tab>ul>li button											{ display:flex; width:100%; height:100%; position:relative; display: flex; justify-content:center; align-items:center; background:#fff }
.map_tab>ul>li button span										{ margin-top:-.3em; }
.map_tab>ul>li button::before									{ position:absolute; width:11px; height:10px; left:50%; bottom:12px; background:url(/resource/town/images/main/icon_tab_arr.svg) no-repeat 50% 50% / cover; content:'';  
																	transition:var(--trans-ani); transform:translateX(-50%); opacity:0; }
.map_tab>ul>li.active button									{ background:var(--color-point); color:var(--color-white); }
.map_tab>ul>li.active button::before							{ opacity:1;  }


/* 지도 */
.area_map														{ position:relative; display:flex; justify-content:end; min-height:853px }
.area_map .map													{ position:absolute; left:0; width:721px; height:853px; }
.area_map .map .map_img											{ width:100%; height: 100%; background: url(/resource/town/images/main/bg_map.png) no-repeat left top / 100% auto; }
.area_map .map .map_img img										{ opacity:0; position:relative; z-index:2; width:100%; height:100%; }
.area_map .map .map_img::after									{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; background-position:center; background-repeat:no-repeat; background-size:contain; content:''; opacity:0;
																	visibility:hidden } 
.area_map .map .map_img.mapTab01::after 						{ background-image:url(/resource/town/images/main/img_map01.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab02::after 						{ background-image:url(/resource/town/images/main/img_map02.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab03::after 						{ background-image:url(/resource/town/images/main/img_map03.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab04::after 						{ background-image:url(/resource/town/images/main/img_map04.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab05::after 						{ background-image:url(/resource/town/images/main/img_map05.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab06::after 						{ background-image:url(/resource/town/images/main/img_map06.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab07::after 						{ background-image:url(/resource/town/images/main/img_map07.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab08::after 						{ background-image:url(/resource/town/images/main/img_map08.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab09::after 						{ background-image:url(/resource/town/images/main/img_map09.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab10::after 						{ background-image:url(/resource/town/images/main/img_map10.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab11::after 						{ background-image:url(/resource/town/images/main/img_map11.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab12::after 						{ background-image:url(/resource/town/images/main/img_map12.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab13::after 						{ background-image:url(/resource/town/images/main/img_map13.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab14::after 						{ background-image:url(/resource/town/images/main/img_map14.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab15::after 						{ background-image:url(/resource/town/images/main/img_map15.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab16::after 						{ background-image:url(/resource/town/images/main/img_map16.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab17::after 						{ background-image:url(/resource/town/images/main/img_map17.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab18::after 						{ background-image:url(/resource/town/images/main/img_map18.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab19::after 						{ background-image:url(/resource/town/images/main/img_map19.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab20::after 						{ background-image:url(/resource/town/images/main/img_map20.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab21::after 						{ background-image:url(/resource/town/images/main/img_map21.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab22::after 						{ background-image:url(/resource/town/images/main/img_map22.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab23::after 						{ background-image:url(/resource/town/images/main/img_map23.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab24::after 						{ background-image:url(/resource/town/images/main/img_map24.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab25::after 						{ background-image:url(/resource/town/images/main/img_map25.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab26::after 						{ background-image:url(/resource/town/images/main/img_map26.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab27::after 						{ background-image:url(/resource/town/images/main/img_map27.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab28::after 						{ background-image:url(/resource/town/images/main/img_map28.png); opacity:1; visibility:inherit }
.area_map .map .map_img.mapTab29::after 						{ background-image:url(/resource/town/images/main/img_map29.png); opacity:1; visibility:inherit }

.area_map .conts_tab											{ flex:auto; max-width:500px; padding:3em; background:#ededed; border-radius:20px;  }
.area_map .conts_tab .h5_title									{ margin-top:0; }
.area_map .conts_tab ul											{ position:relative; display:flex; flex-flow:column; gap:1em; overflow-y:auto; overflow-x:hidden; padding-top:1em; max-height:45em; border-top:2px solid var(--color-base); }
.area_map .conts_tab ul>li>dl									{ display:flex; flex-flow:column; gap:.25em 1em; line-height:1.4; font-size:1.06em }
.area_map .conts_tab ul>li>dl>dt								{ position:relative; padding-left:10px; font-weight:500; color:var(--color-point) }
.area_map .conts_tab ul>li>dl>dt::before						{ position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:100%; background:var(--color-point); content:''; }
.area_map .conts_tab ul>li>dl>dd								{ position:relative; padding-left:20px; }
.area_map .conts_tab ul>li>dl>dd::before						{ position:absolute; left:0; top:2px; width:16px; height:18px; background:url(/resource/green/images/contents/icon_map01.svg) no-repeat 50% 50% / contain; content:''; } 
@media all and (max-width:1668px){
	.area_map													{ min-height:48.5em; }
	.area_map .map												{ left:-2.25em; top:-2.45em; transform:scale(0.9);}
}
@media all and (max-width:1568px){
	.area_map													{ min-height:42.8em; }
	.area_map .map												{ transform:scale(0.8); left:-4.5em; top:-5.25em }
	.area_map .conts_tab										{ max-width:450px; }
}
@media all and (max-width:1368px){
	.area_map													{ min-height:40.5em; }
	.area_map .map												{ transform:scale(0.75); left:-5.4em; top:-6.4em; }
	.area_map .conts_tab										{ max-width:400px; }
}
@media all and (max-width:1168px){
	/* tab */
	.map_tab													{ display:block; }
	.map_tab>ul 												{ --sizeBig:60px; --sizeBox:180px; }
	.map_tab>ul>li												{ width:calc(100% / 10)}
	.map_tab>ul>li:nth-child(15)								{ border-right-width:1px; }
	.map_tab>ul>li:nth-child(10),
	.map_tab>ul>li:nth-child(20)								{ border-right-width:0; }
	.map_tab>ul>li button										{ font-size:.95rem; }
	.map_tab>ul>li button::before								{ width:9px; height:8px; bottom:8px; }
	
	.area_map													{ margin-top:2em; min-height:inherit }
	.area_map .map												{ display:none; }
	.area_map .conts_tab										{ max-width:inherit; flex:100%; width:100%; }
	.area_map .conts_tab ul										{ max-height:inherit; overflow-y:hidden }
	.area_map .conts_tab ul>li>dl								{ flex-flow:row wrap; align-items:center; }
	.area_map .conts_tab ul>li>dl>dt							{ width:15em; }
	
}
@media all and (max-width:1024px){
	.area_map .conts_tab ul>li>dl>dd::before					{ width:14px; height:16px;  }
}
@media all and (max-width:768px){
	/* tab */
	.map_tab>ul 												{ --sizeBig:50px; --sizeBox:200px; }
	.map_tab>ul>li												{ width:calc(100% / 8)}
	.map_tab>ul>li:nth-child(15)								{ border-right-width:1px; }
	.map_tab>ul>li:nth-child(10),
	.map_tab>ul>li:nth-child(20)								{ border-right-width:1px; }
	.map_tab>ul>li:nth-child(8),
	.map_tab>ul>li:nth-child(16),
	.map_tab>ul>li:nth-child(24)								{ border-right-width:0; }
}
@media all and (max-width:568px){
	/* tab */
	.map_tab>ul 												{ --sizeBig:40px; --sizeBox:240px; }
	.map_tab>ul>li												{ width:calc(100% / 5)}
	.map_tab>ul>li:nth-child(8),
	.map_tab>ul>li:nth-child(16),
	.map_tab>ul>li:nth-child(24)								{ border-right-width:1px; }
	.map_tab>ul>li:nth-child(5),
	.map_tab>ul>li:nth-child(10),
	.map_tab>ul>li:nth-child(15),
	.map_tab>ul>li:nth-child(20),
	.map_tab>ul>li:nth-child(25)								{ border-right-width:0; }
	.map_tab>ul>li button										{ font-size:.88rem; }
	.map_tab>ul>li button::before								{ bottom:4px; }
	
	.area_map .conts_tab										{ padding:2em; border-radius:10px; }
	.area_map .conts_tab ul>li>dl								{ flex-flow:column; align-items:flex-start; }

}
@media all and (max-width:368px){
	.area_map .conts_tab										{ padding:2em 1.5em; }
}