@charset "utf-8";
#main														{ padding:6.25em 0 5em; background:url(/resource/town/images/main/bg.jpg) no-repeat center bottom / cover;  }

@media all and (max-width:1268px){
	#main													{ padding:5.625em 0 4em;}
}

@media all and (max-width:868px){
	#main													{ padding: 5em 0 3.25em; }
}

@media all and (max-width:768px){
	#main													{ padding: 4em 0 3em; }
}

@media all and (max-width:668px){
	#main													{ padding: 3em 0; }
}

				
/* 타이틀 */
[data-main-con] .title										{margin-bottom:3.125em;text-align:center;}
[data-main-con] .title .h2_title									{ font-size:3em; font-weight:400; line-height:1; margin-bottom:.325em; font-family:var(--font-esamanru);color:#007a50; }
[data-main-con] .title .text 									{color:#313a4a;font-size:1.25em;font-weight:500;} 
[data-main-con] .tit												{display:flex;align-items:center;justify-content: space-between;margin-bottom:1.25em;height:34px;}
[data-main-con] .h3_title										{ font-size:1.5em; font-weight:700; line-height:1;color:var(--color-white);}
[data-main-con] .tit>span									{ display:flex; gap:5px; }
@media all and (max-width:1568px){
	/* 타이틀 */
	[data-main-con] .title .h2_title								{ font-size:2.75em;  }
  	[data-main-con] .tit									{height:32px;}
	[data-main-con] .h3_title								{font-size:1.375em;}
}
@media all and (max-width:1268px){
	/* 타이틀 */
	[data-main-con] .title									{margin-bottom:2.25em;}
	[data-main-con] .title .h2_title								{ font-size:2.5em; }
	[data-main-con] .title .text 							{font-size:1.125em;}
	[data-main-con] .h3_title								{ font-size:1.28em; }
	
	/* 더보기 */
	.icon_more												{  width:30px; height:30px; }
	.icon_more::before										{ background-size:9px; }
}

@media all and (max-width:1168px){
	[data-main-con] .title									{margin-bottom:2em;}
	[data-main-con] .title .text span							{display:block;}
}

@media all and (max-width:868px){
	/* 타이틀 */
	[data-main-con] .title .h2_title								{ font-size:2em; }
	[data-main-con] .title .text 							{font-size:1.063em;}
	
	.area_map .list_map .info .tit							{ flex-flow:column; align-items:flex-start; height:inherit; gap:10px; }
}

@media all and (max-width:768px){
	[data-main-con] .title									{margin-bottom:1.75em;}
	[data-main-con] .tit									{margin-bottom:1em;}
	.area_map .list_map .info .tit							{ flex-flow:row wrap; align-items:center; }
}

@media all and (max-width:668px){
	[data-main-con] .title									{text-align:left;}
}

@media all and (max-width:468px){
	/* 타이틀 */
	[data-main-con] .title									{text-align:center;margin-bottom:1.375em;}
	[data-main-con] .title .h2_title						{ font-size:1.75em; }
	[data-main-con] .title .text 							{font-size:1em;}
	[data-main-con] .h3_title								{ font-size:1.25em; }
}	

@media all and (max-width:368px){
  	/* 타이틀 */
	[data-main-con] .tit									{height:26px;margin-bottom:.625em;}
  	[data-main-con] .h3_title								{font-size:1.125em; }
	.area_map .list_map .info .tit							{ flex-flow:column; align-items:flex-start; }
}


.more														{ position:relative; display:flex; justify-content:center; align-items:center; gap: 0 .5em; padding: .45em .875em;border-radius:20px; background:transparent;border:1px solid var(--color-white); transition:var(--trans-ani);}
.more span                                                  {color:var(--color-white);line-height: 1;font-size:1em;}
.more .icon                                                 {width: 11px;height: 11px;background:url(/resource/town/images/main/icon_more.svg) no-repeat 50% 50% / auto 100%; }

.more:hover,
.more:focus													{ background:var(--color-white); }
.more:hover span,
.more:focus span											{ color:var(--color-base);}
.more:hover .icon,
.more:focus .icon											{filter:invert(1);}	

@media all and (max-width:1024px){
  .more														{padding:.45em .75em;gap:0 .25em;}
  .more .icon												{width:10px;height:10px;}
}

@media all and (max-width:368px){
	.more 												{width:26px;height:26px;border-radius:100%;padding:0;}
	.more span							 				{position: absolute;left: -99999px;display: block;width: 1px;height: 1px; overflow: hidden;text-indent: -99999px;clip: rect(0, 0, 0, 0);}
	.area_map .list_map .info .tit .more				{ width:inherit; padding:.45em .75em; border-radius:20px;}
	.area_map .list_map .info .tit .more span			{ position:initial; width:inherit; height:inherit; overflow:inherit; text-indent:0; clip:inherit; display:flex; align-items:center; }
}


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

 						슬라이드

**********************************************************************/
.swiper_page .swiper-pagination-current,
.swiper_page .swiper-pagination-total			{ color:var(--color-white);}
.swiper_page i::after							{background:rgba(255,255,255,.5); } 

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

 									tab 

**********************************************************************/
.map_tab														{ position:relative; }
.map_tab::before												{content:'';position:absolute;display:block;background:url('/resource/town/images/main/img_visual_left.png') no-repeat center / 100%;width:276px;height:168px;bottom:100%;left:2.5em;}
.map_tab::after													{content:'';position:absolute;display:block;background:url('/resource/town/images/main/img_visual_right.png') no-repeat center / 100%;width:293px;height:193px;bottom:100%;right:2.5em;}
.map_tab>ul														{ width:100%; border-radius:2.5em; background:var(--color-point);--sizeBig:54px; padding:10px;
																	display:flex; flex-wrap:wrap; box-sizing:border-box; overflow:hidden}
.map_tab>ul>li													{ width:calc(100% / 11);  font-weight:400; color:var(--color-white); background:transparent; height:var( --sizeBig)!important; }
.map_tab>ul>li button											{ display:flex; width:100%; height:100%; position:relative; display: flex; justify-content:center; align-items:center;border-radius:2.5em;font-size:19px;}
.map_tab>ul>li.active button									{ background:var(--color-white); color:var(--color-point); font-weight:600;}

.area_map														{ position:relative; display:flex; justify-content:end; margin-top:5em; }



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

 							main contents 

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

/* 지도 */
.area_map .map													{ position:absolute; left:0; width:900px; height:674px; }
.area_map .map .text												{position:absolute;right:0;top:2.25em;}
.area_map .map .text p												{color:var(--color-base2);font-size:1em;}
.area_map .map .text h3												{color:var(--color-base1);font-size:2.125em;font-weight:400;font-family:var(--font-esamanru);}
.area_map .map .map_img											{ position:relative;width:100%; height: 100%; background: url(/resource/town/images/main/bg_map.png) no-repeat left center / 100% auto;z-index:2; }
.area_map .map .map_img img										{ opacity:0; position:relative; z-index:2; width:100%; height:100%; image-rendering: -webkit-optimize-contrast; }
.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 .bg_map												{position:absolute; width:100%; height:100%; left:0; bottom:0;z-index:1;pointer-events: none; }
.area_map .map .bg_map .updown									{animation:updown 3s linear infinite;}
.area_map .map .bg_map .balloon										{position:absolute;top:.375em;left:1.25em;width:62px;height:65px;background:url(/resource/town/images/main/img_balloon.svg) no-repeat center / 100%;}
.area_map .map .bg_map .camping-car								{position:absolute;top:6.5625em;left:1.75em;width:84px;height:47px;background:url(/resource/town/images/main/img_camping-car.svg) no-repeat center / 100%;}
.area_map .map .bg_map .child										{position:absolute;top:1em;left:23.5em;width:100px;height:96px;background:url(/resource/town/images/main/img_child.svg) no-repeat center / 100%;}
.area_map .map .bg_map .child::before								{content:'';position:absolute;left:1.5em;top:0;width:14px;height:14px;background:url(/resource/town/images/main/img_pinwheel_orange.svg) no-repeat center / 100%;animation:degShow 3s linear infinite;}
.area_map .map .bg_map .child::after								{content:'';position:absolute;right:.25em;top:.875em;width:14px;height:14px;background:url(/resource/town/images/main/img_pinwheel_blue.svg) no-repeat center / 100%;animation:degShow 3s linear infinite;}
.area_map .map .bg_map .cloud01									{position:absolute;top:.375em;left:6.25em;width:53px;height:16px;background:url(/resource/town/images/main/img_cloud01.png) no-repeat center / 100%;}
.area_map .map .bg_map .cloud02									{position:absolute;top:1.875em;left:31.625em;width:44px;height:17px;background:url(/resource/town/images/main/img_cloud02.png) no-repeat center / 100%;animation-delay:1s;}
.area_map .map .bg_map .family01								{position:absolute;bottom:2.875em;left:-2em;width:457px;height:157px;background:url(/resource/town/images/main/img_family01.png) no-repeat center / 100%;}
.area_map .map .bg_map .family02								{position:absolute;bottom:3.5em;right:-3.875em;width:318px;height:155px;background:url(/resource/town/images/main/img_family02.png) no-repeat center / 100%;}
.area_map .map .bg_map .family02::before						{content:'';position:absolute;top:.25em;left:7.75em;;width:60px;height:86px;background:url(/resource/town/images/main/img_family02_people.svg) no-repeat center / 100%;animation:move 3s ease-in-out infinite;}

.area_map .list_map												{ position:relative;width:540px; z-index:2;}

/*행정복지센터*/
.area_map .list_map	 .info									{ position:relative; width:100%;background:#0496ba;border-radius:14px; padding:1.875em;}
.area_map .list_map	 .info .text_wrap							{ background:url(/resource/town/images/main/bg_info.jpg) no-repeat 50% 50%/ cover; padding:1.875em 1.5625em;border-radius:10px;min-height:234px;}
.area_map .list_map	 .info .text_wrap dl						{ display: flex;flex-flow: column;line-height: 1;gap:.45em; }
.area_map .list_map	 .info .text_wrap dl + dl					{ margin-top:1.375em;}
.area_map .list_map	 .info .text_wrap dl>dt							{ font-size:1em; color:var(--color-base2); }
.area_map .list_map	 .info .text_wrap dl>dd							{ font-size:1em;font-weight:700; }
.area_map .list_map	 .info .text_wrap dl>dd.tel							{font-size:1.75em;font-weight:800;}
.area_map .list_map	 .info .text_wrap dl>dd .color_red				{ font-weight:400; font-size:.88em;margin-left:6px;}

/*이장회보*/
.area_map .list_map .board								{ position:relative;  width:100%;background:var(--color-green);border-radius:14px; padding:1.875em;margin-top:1.25em;}
.area_map .list_map .board .swiper						{ width:calc(100% + 10px); margin-left:-5px;margin-right:-5px;height:100% }
.area_map .list_map .board .swiper-slide					{ width:50%; justify-content:space-between; align-items: stretch; display:flex;}
.area_map .list_map .board .swiper-slide a				{ width:100%;display:flex; flex-flow:column; justify-content:space-between; margin:0 5px; border:1px solid #dfdfdf; border-radius:10px; 
																		background:var(--color-white); padding:1.375em 1.5625em;}
.area_map .list_map .board .swiper-slide.none_data		{padding:0;pointer-events:none;}
.area_map .list_map .board .swiper-slide.none_data a	{min-height:6em;justify-content: center;}
.area_map .list_map .board .swiper-slide dl				{ display:flex; flex-flow:column; gap:.75em; }
.area_map .list_map .board .swiper-slide dl>dt			{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.125em; font-weight:700; line-height:1.3;min-height: 2.6em;}
.area_map .list_map .board .swiper-slide dl>dd			{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:1em; line-height:1;color:var(--color-base2);}
.area_map .list_map .board .swiper-slide .date			{ display:block; margin-top:1em; font-size:.88em;color:var(--color-base2); }
.area_map .list_map .board .control						{ position:absolute; right:1.875em; top:1.875em; display:flex; align-items:center; }
.area_map .list_map .board .control button				{filter:invert(1);}
.area_map .list_map .board .control	.more				{margin-left:10px;}

.area_map .list_map .board .swiper,
.area_map .list_map .board .swiper .swiper-wrapper,
.area_map .list_map .board .swiper-slide					{ height:inherit; }
@media all and (max-width:1568px){
	.area_map														{margin-top:4em;}	

	/* 지도 */
	.area_map .map												{ transform:scale(0.94) translateY(-50%);transform-origin: 0 0;will-change: transform;image-rendering: -webkit-optimize-contrast;top:50%;height:624px;}
  	.area_map .map .map_img										{background-position:left top;}
  	.area_map .map .bg_map .child								{top:0;}
	.area_map .list_map											{ width:500px; }

	/*행정복지센터*/
	.area_map .list_map .info .text_wrap					{ min-height: initial;}
}

@media all and (max-width:1468px){

	.area_map														{margin-top:3.5em;}	

	/* 지도 */
	.area_map .map												{ transform:scale(0.88) translateY(-50%);}
	.area_map .map .bg_map .family01							{width: 357px;left: 1em;background-size: auto 157px;}

	.area_map .list_map											{ width:480px; }
}

@media all and (max-width:1368px){
	.area_map														{margin-top:3em;}	

	/* 지도 */
	.area_map .map												{ transform:scale(0.8) translateY(-50%); }
	.area_map .map .text										{top:1.875em;}

	.area_map .list_map											{ width:460px; }

	/*행정복지센터*/
	.area_map .list_map .info,
	.area_map .list_map .board									{padding:1.75em;}
	.area_map .list_map .info .text_wrap					{padding:1.75em 1.5em;}
	.area_map .list_map .info .text_wrap dl + dl				{margin-top:1.25em;}

	/*이장회보*/
	.area_map .list_map .board									{margin-top:1em;}
	.area_map .list_map .board .control						{top:1.75em;right:1.5em;}
	.area_map .list_map .board .swiper-slide a				{padding:1.25em 1.375em;}
}

@media all and (max-width:1268px){
	/* tab */
	.map_tab::before												{width:246px;height:151px;left:2em;}
	.map_tab::after													{width:263px;height:173px;right:2em;}
	.map_tab>ul														{--sizeBig: 48px;}
	.map_tab>ul>li button										{font-size:18px;}

	.area_map														{margin-top:2em;}

	/* 지도 */
	.area_map .map												{ transform:scale(0.75) translateY(-50%); }

	.area_map .list_map											{ width:450px; }

	/*행정복지센터*/
	.area_map .list_map .info,
	.area_map .list_map .board									{padding:1.5em;}
	.area_map .list_map .info .text_wrap					{padding:1.5em 1.375em;}
	.area_map .list_map .info .text_wrap dl + dl				{margin-top:1em;}
	.area_map .list_map .info .text_wrap dl>dd.tel			{font-size:1.5em;}

	/*이장회보*/
	.area_map .list_map .board .control						{top:1.5em;right:1.375em;}
	.area_map .list_map .board .swiper-slide a				{padding:1.125em 1.25em;}
}

@media all and (max-width:1218px){
	/* 지도 */
	.area_map .map												{ transform:scale(0.72) translateY(-50%); }

	.area_map .list_map											{ width:440px; }
}
@media all and (max-width:1168px){
	/* tab */
	.map_tab>ul														{border-radius:14px;}
	.map_tab>ul>li												{ width:calc(100% / 9);}
	.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:1rem; }
	.map_tab>ul>li button::before								{ width:9px; height:8px; bottom:8px; }
	
	.area_map													{ margin-top:1.5em; }

	/* 지도 */
	.area_map .map												{ display:none; }

	.area_map .list_map											{ width:100%; }
  	.area_map .list_map .con									{display: flex;gap:10px;justify-content: space-between;flex-wrap:wrap;width:100%;}

	/*행정복지센터*/
	.area_map .list_map .info,
	.area_map .list_map .board									{width:calc((100% - 10px) / 2);}

	/*이장회보*/
	.area_map .list_map .board									{margin-top:0;}
  	.area_map .list_map .board .swiper							{ height:calc(100% - 1em); }
	.area_map .list_map .board .swiper-slide dl>dd				{ -webkit-line-clamp:2; line-height:1.3;}
	
}
@media all and (max-width:1024px){
	/* tab */
	.map_tab::before												{width:226px;height:138px;}
	.map_tab::after													{width:243px;height:160px;}
	.map_tab>ul>li													{ width:calc(100% / 8);}
  
  	/*이장회보*/
  	.area_map .list_map .board .control	.more						{margin-left:4px;}
}

@media all and (max-width:868px){
	/* tab */
	.map_tab>ul>li												{ width:calc(100% / 7);}

	.area_map														{margin-top:2em;}	
}

@media all and (max-width:768px){
	/* tab */
	.map_tab::before												{width:186px;height:113px;left:.75em}
	.map_tab::after													{width:203px;height:133px;right:.75em;}
	.map_tab>ul 												{ --sizeBig:42px;}
	.map_tab>ul>li												{ width:calc(100% / 6);}

	.area_map														{margin-top:2em;}	

	/* 지도 */
	.area_map .map												{ display:none; }

	.area_map .list_map .con									{ flex-flow:column; }

	/*행정복지센터*/
	.area_map .list_map .info,
	.area_map .list_map .board									{width:100%;padding:1.375em;}
	.area_map .list_map .info .text_wrap					{padding:1.375em 1.25em;background-position: left center;}
	.area_map .list_map .info .text_wrap dl + dl			{margin-top:.875em;}

	/*이장회보*/
  	.area_map .list_map .board .swiper						{height:inherit;}
	.area_map .list_map .board .swiper-slide.none_data a	{min-height:initial;}
	.area_map .list_map .board .control						{top:1.375em;right:1.375em;}
	.area_map .list_map .board .swiper-slide a				{padding:1em 1.125em;}
}

@media all and (max-width:668px){
	/* tab */
	.map_tab::before											{left:inherit;right:1em;transform:scaleX(-1); }
	.map_tab::after												{width:62px;height:65px;background:url(/resource/town/images/main/img_balloon.svg) no-repeat center / 100%;right: 15em;bottom: initial;top: -8em;animation:updown 3s linear infinite;}
	
	.area_map														{margin-top:1.5em;}	
}

@media all and (max-width:568px){
	/* tab */
  	.map_tab::before											{right: .75em;width:176px;height: 107px;}
	.map_tab::after												{display:none;}
	.map_tab>ul 												{ --sizeBig:36px; }
	.map_tab>ul>li												{ width:calc(100% / 5)}
	.map_tab>ul>li button										{ font-size:.88rem; }

	/*행정복지센터*/
	.area_map .list_map .info .text_wrap dl>dd.tel			{font-size:1.375em;}

	/*이장회보*/
	.area_map .list_map .board .swiper							{width:100%; margin:0;}
	.area_map .list_map .board .swiper-slide					{width:100%;}
	.area_map .list_map .board .swiper-slide a					{margin:0;}
	.area_map .list_map .board .swiper-slide dl>dt				{  -webkit-line-clamp: 1;min-height:initial;}
}

@media all and (max-width:468px){
	/* tab */
	.map_tab::before											{display:none;}
}

@media all and (max-width:368px){
	/* tab */
	.map_tab>ul>li												{ width:calc(100% / 5)}
  

}

@media all and (max-width:320px){
	/* tab */
	.map_tab>ul>li												{ width:calc(100% / 4);}
  
  	/* 행정복지센터 */
  	.area_map .list_map .info,
  	.area_map .list_map .board									{padding:1em;}

	/*이장회보*/
    .area_map .list_map .board .control							{top:1em;right:1em;}
	.area_map .list_map .board .control .swiper_page			{margin-right:5px;}
	.area_map .list_map .board .control .more					{margin-left:5px;}
}