@charset "utf-8";


/*********************************
	Common Style
*********************************/

.mainSection {position:relative; padding-left:1em; padding-right:1em;}

/****************************************************************
	Slider Common Style
****************************************************************/

.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper .swiper-slide {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper .swiper-slide a {display:block; position:relative;}
.fix-scroll .swiper-wrapper .swiper-slide a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}



/****************************************************************
	Tab Style
****************************************************************/

.tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.tab-group .tabs li button.on .selected {display:block;}
.tab-group .tab-con {display:none;}
.tab-group .tab-con.on {display:block;}


/****************************************************************
	상단 링크 영역 : 생애주기별, 자주찾는 서비스
****************************************************************/

.mainLinkWrap {padding-top:3em; z-index:1;}
.mainLinkWrap:after {content:""; display:block; position:absolute; bottom:2.7em; right:0; width:7.1em; height:7.2em; height:7.2em; background:url(../img/main/bak_decoration2.png) no-repeat 100% 100%; background-size:contain; z-index:-1;}
.mainLinkWrap:before {content:""; display:block; position:absolute; top:0; bottom:0; left:50%; right:0; margin-left:-25.8em; background:#FBF5F9; z-index:-2;}
.mainLinkWrap > .inner {z-index:0;}

@media all and (max-width:1024px) {
	.mainLinkWrap {padding-top:0;}
	.mainLinkWrap:before {display:none;}
}


/** 생애 주기별 링크 모음 */

.mainLifeLink {position:absolute; top:.5em; left:0; bottom:0; right:54.15em; padding-left:2.4em; overflow:hidden;}
.mainLifeLink .slogan {display:block; position:absolute; top:.5em; left:0; width:1.5em; height:16.25em; background:url(../img/main/spr_typo.svg) no-repeat 0 0; background-size:auto 17.5em; text-indent:-999px; overflow:hidden;}
.mainLifeLink .in {display:block; position:relative; min-height:100%; padding:1.5em; background:linear-gradient(151deg, #D1336D 2.25%, #222A89 155.52%); border-radius:0 1.5em 0 1.5em; overflow:hidden; z-index:0;}
.mainLifeLink .in:before {content:""; display:block; position:absolute; top:0; right:0; width:11.75em; height:14.35em; background:url(../img/main/bak_life_link.png) no-repeat 100% 0; background-size:contain; z-index:-1;}
.mainLifeLink .tit {display:block; position:relative; padding:1em .5em 0 .5em; margin-bottom:1.3em;}
.mainLifeLink .tit strong {display:block; position:relative; font-size:1.4em; color:#fff; font-family:'TTWanjudaedunsancheB'; font-weight:400; line-height:1.1em;}
.mainLifeLink .control {display:block; position:absolute; top:4em; right:1.5em;}
.mainLifeLink .control:before {content:""; display:block; position:absolute; top:50%; left:50%; margin-top:-.45em; width:1px; height:.9em; background:rgba(255,255,255,.2);}
.mainLifeLink .control > * {display:block; position:relative; width:1.5em; height:1.5em; text-indent:-999px; overflow:hidden; float:left; background:url(../img/main/spr_arrow.svg) no-repeat 0 0; background-size:auto 1.5em;}
.mainLifeLink .control > *.swiper-button-disabled {opacity:.5;}
.mainLifeLink .control > * + * {margin-left:.8em;}
.mainLifeLink .control .prev {background-position:0 50%;}
.mainLifeLink .control .next {background-position:-1.5em 50%;}
.mainLifeLink .slider {background:#fff; border-radius:1em; height:14em; padding:1.25em 1em;}
.mainLifeLink .slider .swiper-container,
.mainLifeLink .slider .swiper-wrapper {height:100%;}
.mainLifeLink .swiper-slide {height:25%;}
.mainLifeLink .swiper-slide a {display:block; position:relative; height:100%; border-bottom:1px dashed #D2D4DB; color:#212121;}
.mainLifeLink .swiper-slide a:after {content:""; display:block; position:absolute; top:50%; right:0; margin-top:-.85em; width:1.7em; height:1.7em; background:url(../img/main/spr_arrow.svg) no-repeat -5.9em 50% rgba(209,51,109,.15); background-size:auto 1.5em; border-radius:100%;}
.mainLifeLink .swiper-slide a > * {display:block; position:relative; padding-top:.2em; height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mainLifeLink .swiper-slide a > *:after {content:""; display:inline-block; vertical-align:middle; height:100%; width:0px;}
.mainLifeLink .swiper-slide a:hover,
.mainLifeLink .swiper-slide a:focus {border-color:rgba(209,51,109,.5); color:#D1336D; font-weight:700;}
.mainLifeLink .swiper-slide a:hover:after,
.mainLifeLink .swiper-slide a:focus:after {background-color:#B83272;}

@media all and (max-width:1500px) {
	.mainLifeLink {right:52.15em;}
}
@media all and (min-width:1025px) {
	.mainLifeLink.fix-scroll .swiper-wrapper {display:block !important; width:auto !important;}
	.mainLifeLink.fix-scroll .swiper-wrapper .swiper-slide {display:block !important; border:0 !important; width:auto !important;}
}
@media all and (max-width:1024px) {
	.mainLifeLink {position:relative; padding-top:3.5em; top:auto; left:auto; bottom:auto; right:auto; padding-left:0; margin:0 -1em; border-radius:0;}
	.mainLifeLink .slogan {width:16.25em; height:1.5em; top:1em; left:1em; background-position:-2.5em 0;}
	.mainLifeLink .in {border-radius:0; padding:1.5em 1em;}
	.mainLifeLink .control {display:none !important;}
	.mainLifeLink .tit {padding:0; margin-bottom:1em;}
	.mainLifeLink .tit br {display:none;}
	.mainLifeLink .slider {height:auto; overflow:hidden; padding:.8em;}
	.mainLifeLink .slider .swiper-container,
	.mainLifeLink .slider .swiper-wrapper {display:block !important; width:auto !important; height:auto; overflow:hidden !important;}
	.mainLifeLink .slider .swiper-slide {display:block !important; height:auto; width:33.33% !important; float:left; padding:.3em;}
	.mainLifeLink .slider .swiper-slide a {padding:.8em 1em 1em; border-radius:1em; border:1px dashed #D2D4DB; }
	.mainLifeLink .slider .swiper-slide a:before {display:none !important;}
	.mainLifeLink .slider .swiper-slide a:after {right:.5em;}
	.mainLifeLink .slider .swiper-slide-none {display:none !important;}
}
@media all and (max-width:640px) {
	.mainLifeLink .slider {font-size:.9em;}
}
@media all and (max-width:490px) {
	.mainLifeLink .slider {font-size:.9em;}
	.mainLifeLink .slider .swiper-slide {width:50% !important;}
	.mainLifeLink .slider .swiper-slide a:after {font-size:.9em;}
}


/** 자주찾는 서비스 링크 */

.mainFavService {position:relative; width:50em; float:right; clear:both; min-height:23em;}
.mainFavService .tit {display:block; position:absolute; top:0; left:0; padding-top:8.4em; width:6.5em;}
.mainFavService .tit:before {content:""; display:block; position:absolute; top:1.75em; left:.45em; width:5.1em; height:5.6em; background:url(../img/main/spr_visual.svg) no-repeat 0 0; background-size:auto 26em;}
.mainFavService .tit strong {display:block; position:relative; margin-left:.33em; font-size:1.5em; line-height:1.1; font-family:'TTWanjudaedunsancheB'; font-weight:400; color:#212121;}
.mainFavService .control {display:block; position:absolute; top:14.3em; left:.3em;}
.mainFavService .control:before {content:""; display:block; position:absolute; top:50%; left:50%; margin-top:-.45em; width:1px; height:.9em; background:rgba(33,33,33,.2);}
.mainFavService .control > * {display:block; position:relative; width:1.5em; height:1.5em; text-indent:-999px; overflow:hidden; float:left; background:url(../img/main/spr_arrow.svg) no-repeat 0 0; background-size:auto 1.5em;}
.mainFavService .control > *.swiper-button-disabled {opacity:.5;}
.mainFavService .control > * + * {margin-left:.8em;}
.mainFavService .control .prev {background-position:-3em 50%;}
.mainFavService .control .next {background-position:-4.5em 50%;}
.mainFavService .slider {margin-left:10em; padding:.5em 0;}
.mainFavService .slider .swiper-slide a {display:block; position:relative; padding:1.25em 0; text-align:center;}
.mainFavService .slider .swiper-slide a strong {display:block; position:relative; font-size:.85em; color:#000; line-height:1.11em; font-weight:500;}
.mainFavService .slider .swiper-slide a:hover strong,
.mainFavService .slider .swiper-slide a:focus strong {font-weight:800;}
.mainFavService .slider .swiper-slide a .icon {display:block; position:relative; width:6em; height:6em; margin:0 auto .75em; background:url(../img/main/spr_icons.svg) no-repeat 0 0 #fff; background-size:auto 12em; border-radius:1em;}
.mainFavService .slider .swiper-slide a:hover .icon:before,
.mainFavService .slider .swiper-slide a:focus .icon:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:1em; border:.15em solid #D1336D;}
.mainFavService .slider .swiper-slide a .icon[data-link="수도요금조회"]	 {background-position:0 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="스페이스워크"]	 {background-position:-6em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="대형폐기물 배출"] {background-position:-12em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="일자리"]	 {background-position:-18em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="주정차단속알림"] {background-position:-24em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="교육신청"] {background-position:-30em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="휴일/야간 운영약국"] {background-position:-36em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="아동수당"] {background-position:-42em 0;}
.mainFavService .slider .swiper-slide a .icon[data-link="대중교통 모니터"] {background-position:0 -6em;}
.mainFavService .slider .swiper-slide a .icon[data-link="청년지원사업"] {background-position:-6em -6em;}

@media all and (max-width:1024px) {
	.mainFavService {width:auto; float:none; min-height:0; background:#FBF5F9; margin:0 -1em; padding-left:1em; padding-right:1em;}
	.mainFavService .tit,
	.mainFavService .control {left:1em;}
	.mainFavService .slider {margin-left:8em; padding:1em 0;}
	.mainFavService .slider .swiper-slide a {padding:1em 0;}
}
@media all and (max-width:770px) {
	.mainFavService {padding-top:3em;}
	.mainFavService .tit {position:relative; left:auto; top:auto; padding:0; width:auto; text-align:center;}
	.mainFavService .tit br {display:none;}
	.mainFavService .tit:before {top:-2em; left:-1em;}
	.mainFavService .control {top:3em; right:1em; left:auto;}
	.mainFavService .slider {margin-left:0;}
	.mainFavService .slider .swiper-slide a {padding:.5em;}
	.mainFavService .slider .swiper-slide a strong {height:2.22em; word-break:keep-all;}
	.mainFavService .slider .swiper-slide a .icon {font-size:.9em;}
}
@media all and (max-width:460px) {
	.mainFavService {padding-bottom:2em;}
	.mainFavService .tit:before {display:none;}
	.mainFavService .control {position:relative; width:3.8em; margin:0 auto; padding:0; top:auto; right:auto; left:auto; overflow:hidden;}
	.mainFavService .slider {padding-bottom:0;}
}


/****************************************************************
	분야별 주요서비스
****************************************************************/

.mainServiceWrap {padding-top:3em; z-index:3;}
.mainServiceWrap:before {content:""; display:block; position:absolute; left:0; right:0; top:7em; height:15em; background:linear-gradient(90deg, rgba(255, 253, 204, 0.30) 0.14%, #FFEAF0 107.26%); transform:rotate(-180deg); -webkit-transform:rotate(-180deg); z-index:-1;}
.mainServiceWrap:after {content:""; display:block; position:absolute; top:0; right:0; width:23.2em; height:19.75em; background:url(../img/main/bak_decoration.png) no-repeat 100% 100%; background-size:contain; z-index:0;}
.mainServiceWrap > .inner {z-index:1;}
.mainServiceWrap .sec-tit {display:block; position:relative; padding:.6em 0 1.5em;}
.mainServiceWrap .sec-tit strong {display:block; position:relative; font-size:1.8em; color:#212121; font-family:'TTWanjudaedunsancheB'; text-align:center; line-height:1.05em;}

.mainService {position:relative; padding:0 4em;}
.mainService .swiper-container {overflow:visible;}
.mainService .swiper-slide {padding:2.35em 1.75em 2.5em;}
.mainService .control button {display:block; position:absolute; top:50%; margin-top:0; width:3.5em; height:3.5em; border-radius:100%; text-indent:-999px; overflow:hidden; box-shadow:.2em .2em .5em 0 rgba(0,0,0,.2); background:#D1336D; z-index:5;}
.mainService .control button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-.75em 0 0 -.75em; width:1.5em; height:1.5em; background:url(../img/main/spr_arrow.svg) no-repeat -7.5em 50%; background-size:auto 1.5em;}
.mainService .control button.prev {left:0;}
.mainService .control button.next {right:0;}
.mainService .control button.next:before {background-position:-9em 50%;}

.serviceLinkList {display:block; position:relative;}
.serviceLinkList .tit {display:block; position:relative; height:3.7em; padding:1.15em 1.25em .85em; z-index:0;}
.serviceLinkList .tit:after {content:""; display:block; position:absolute; right:1em; top:0; width:6em; height:6em; background:url(../img/main/spr_visual.svg) no-repeat 0 0; background-size:auto 26em; transition:.3s all; -webkit-transition:.3s all;}
.serviceLinkList .tit strong {display:block; position:relative; font-size:1.6em; line-height:1.0625em; font-family:'TTWanjudaedunsancheB'; color:#212121;}
.serviceLinkList:hover .tit:after {top:-1em;}
.serviceLinkList[data-group="푸른도시"] .tit:after {background-position:0 -6em;}
.serviceLinkList[data-group="복지"] .tit:after {background-position:-6.5em -6em;}
.serviceLinkList[data-group="환경"] .tit:after {background-position:-13em -6em;}
.serviceLinkList[data-group="도시안전해양"] .tit:after {background-position:-19.5em -6em;}
.serviceLinkList[data-group="농축수산"] .tit:after {background-position:-26em -6em;}
.serviceLinkList[data-group="건설교통"] .tit:after {background-position:-32.5em -6em;}
.serviceLinkList[data-group="지역경제"] .tit:after {background:url(../img/common/img_lnb_title_03_07.svg) no-repeat 0 0; background-size:80%; }
.serviceLinkList ul {display:block; position:relative; min-height:17.8em; border-radius:.75em; padding:.5em 1.5em; background:#fff; box-shadow:0 .2em 1em 0 rgba(0,0,0,.1);}
.serviceLinkList li + li {border-top:1px dashed #D2D4DB;}
.serviceLinkList li a {display:block; position:relative; padding:.9em 0;}
.serviceLinkList li a:after {content:""; display:block; position:absolute; width:1.5em; height:1.5em; right:0; top:50%; margin-top:-.75em; background:url(../img/main/spr_arrow.svg) no-repeat -13.5em 50%; background-size:auto 1.5em;}
.serviceLinkList li a strong {display:block; position:relative; font-size:.85em; color:#212121; line-height:1.17647em;}
.serviceLinkList li a:hover strong,
.serviceLinkList li a:focus strong {font-weight:800; color:#D1336D;}


@media all and (max-width:1024px) {
	.mainService {padding:0 2.5em;}
	.mainServiceWrap:after {font-size:.7em; right:-5em;}
	.mainService .control button.prev {left:-1em;}
	.mainService .control button.next {right:-1em;}
	.mainService .swiper-slide {padding:1em; width:20em; max-width:100%;}
}
@media all and (max-width:640px) {
	.mainServiceWrap:after {font-size:.4em;}
}
@media all and (max-width:450px) {
	.mainService {padding:0;}
	.mainService .control button {font-size:.8em;}
}


/****************************************************************
	분야별 소식
****************************************************************/

.mainBoardWrap {padding-top:2.75em; padding-bottom:2.25em;}
.mainBoardWrap:before {content:""; display:block; position:absolute; left:0; top:0; right:50%; margin-right:9em; bottom:0; border-radius:0 9em 0 0; background:linear-gradient(125deg, #FBF5F9 -0.91%, rgba(251,245,249,.2) 109.14%); z-index:-1;}

.mainBoard .tit,
.mainBoard .tabs {position:absolute; left:0; width:13.5em;}
.mainBoard .tit {top:.75em; padding:1.75em 0 0 .6em;}
.mainBoard .tit strong {display:block; position:relative; font-size:1.8em; font-family:'TTWanjudaedunsancheB'; color:#212121;}

.mainBoard .more {display:block; position:absolute; top:1.8em; left:11em; width:2.5em; height:2.5em; border-radius:9em 9em 9em 0; text-indent:-999px; overflow:hidden; background:linear-gradient(0deg, #2249A6 0%, #2249A6 100%), #152248; box-shadow:.15em .15em .4em 0 rgba(0,0,0,.2);}
.mainBoard .more:before {content:""; display:block; position:absolute; width:1.5em; height:1.5em; top:50%; left:50%; margin:-.75em 0 0 -.75em; background:url(../img/main/spr_arrow.svg) no-repeat -18em 50%; background-size:auto 1.5em;}

.mainBoard .tabs {top:5.85em;}
.mainBoard .tabs ul {margin-right:1em;}
.mainBoard .tabs li {display:block; position:relative; border-top:1px dashed #E9D4DD; transition:.3s margin; -webkit-transition:.3s margin;}
.mainBoard .tabs li:first-child {border-top-width:0;}
.mainBoard .tabs button {display:block; position:relative; width:100%; height:3em; padding:0 1.3em;}
.mainBoard .tabs button strong {display:block; position:relative; font-size:.95em; color:#212121; text-align:left;}
.mainBoard .tabs li.tab-active {border-top-width:0; margin-right:-1em;}
.mainBoard .tabs li.tab-active + li {border-top-width:0;}
.mainBoard .tabs button.on {padding-left:1.5em; border-radius:9em 0 9em 9em; background:#D1336D; box-shadow:.2em .2em .75em 0 rgba(0,0,0,.2);}
.mainBoard .tabs button.on:after {content:""; display:block; position:absolute; width:1.5em; height:1.5em; right:.65em; top:50%; margin-top:-.75em; background:url(../img/main/spr_arrow.svg) no-repeat -10.5em 50%; background-size:auto 1.5em;}
.mainBoard .tabs button.on strong {color:#fff; font-weight:600;}
.mainBoard .tab-content {display:block; margin-left:18em; min-height:27em;}

.mainBoard .list {display:block; position:relative; margin:0 -.75em;}
.mainBoard .list:after {content:""; display:block; clear:both;}
.mainBoard .list li {display:block; position:relative; padding:.75em; width:33.33%; float:left;}
.mainBoard .list li:before {content:""; display:block; position:absolute; top:.75em; left:.75em; right:.75em; bottom:.75em; background:#DCE1E7; z-index:0; border-radius:1em;}
.mainBoard .list li.no-data {display:table; width:100% !important; height:27em; float:none;}
.mainBoard .list li.no-data:before {display:none;}
.mainBoard .list li.no-data > * {display:table-cell; vertical-align:middle; text-align:center; border:2px dashed #dadada; border-radius:1.5em; background:#fff;}
.mainBoard .list li a {display:block; position:relative; border-radius:1em; height:12em; padding:1em 2em 1.5em; overflow:hidden; z-index:1;}
.mainBoard .list li a:before,
.mainBoard .list li a:after {content:""; display:block; position:absolute; border-radius:1em; top:0; left:0; right:0; bottom:0;}
.mainBoard .list li a:before {background:#333; width:3.5em; height:3.5em; border-radius:1em 0 0 0; z-index:-2; transition:.3s all; -webkit-transition:.3s all;}
.mainBoard .list li a:after {top:1px; left:1px; right:1px; bottom:1px; background:#fff; z-index:-1; border-radius:.95em;}
.mainBoard .list li a:hover:before,
.mainBoard .list li a:focus:before {width:100%; height:100%; border-radius:1em;}
.mainBoard .list .cate {display:block; position:relative; font-size:.85em; margin-left:-1.25em; margin-bottom:2.0588235294em; padding-left:2.35294em; line-height:1.764705882352941em; font-weight:600;}
.mainBoard .list .cate:before {content:""; display:block; position:absolute; left:0; top:50%; font-size:1.176470588235294em; width:1.5em; height:1.5em; background:url(../img/main/spr_category.svg) no-repeat 0 0; background-size:auto 1.5em; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.mainBoard .list .subj {display:block; position:relative; font-size:.95em; color:#212121; line-height:1.45em; height:2.9em; font-weight:500; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.mainBoard .list .date {display:block; position:relative; padding-top:1.428em; font-size:.7em; color:#989898; line-height:1.42em; border-top:1px solid #DCE1E7; margin-top:2.71428em;}
.mainBoard .list li a[data-cate="복지"]:before {background:#F065A7;}
.mainBoard .list li a[data-cate="복지"] .cate {color:#F065A7;}
.mainBoard .list li a[data-cate="복지"] .cate:before {background-position:0 0; }
.mainBoard .list li a[data-cate="환경"]:before {background:#00BC9A;}
.mainBoard .list li a[data-cate="환경"] .cate {color:#00BC9A;}
.mainBoard .list li a[data-cate="환경"] .cate:before {background-position:-1.5em 0;}
.mainBoard .list li a[data-cate="도시안전해양"]:before {background:#31A2E2;}
.mainBoard .list li a[data-cate="도시안전해양"] .cate {color:#31A2E2;}
.mainBoard .list li a[data-cate="도시안전해양"] .cate:before {background-position:-3em 0;}
.mainBoard .list li a[data-cate="농축수산"]:before {background:#36A310;}
.mainBoard .list li a[data-cate="농축수산"] .cate {color:#36A310;}
.mainBoard .list li a[data-cate="농축수산"] .cate:before {background-position:-4.5em 0;}
.mainBoard .list li a[data-cate="건설교통"]:before {background:#634CD5;}
.mainBoard .list li a[data-cate="건설교통"] .cate {color:#634CD5;}
.mainBoard .list li a[data-cate="건설교통"] .cate:before {background-position:-6em 0;}
.mainBoard .list li a[data-cate="푸른도시"]:before {background:#1457CE;}
.mainBoard .list li a[data-cate="푸른도시"] .cate {color:#1457CE;}
.mainBoard .list li a[data-cate="푸른도시"] .cate:before {background-position:-7.5em 0;}


@media all and (max-width:1024px) {
	.mainBoardWrap:before {top:16em; left:0; right:0; margin-right:0; border-radius:0;}

	.mainBoard .tit {position:relative; top:auto; padding:0 .5em 1.5em; width:auto; text-align:center;}
	.mainBoard .more {top:-.5em; left:50%; margin-left:5.5em;}

	.mainBoard .tabs {position:relative; top:auto; width:auto; left:auto; margin-bottom:1em;}
	.mainBoard .tabs ul {margin-right:0; padding-left:7.5em; margin:-.25em;}
	.mainBoard .tabs ul:after {content:""; display:block; clear:both;}
	.mainBoard .tabs li {width:33.33%; float:left; margin:0 !important; border:none; padding:.25em;}
	.mainBoard .tabs li:first-child {position:absolute; width:7em; float:none; top:0; left:0; bottom:0;}
	.mainBoard .tabs li:first-child button {height:100%;}
	.mainBoard .tabs button {border-radius:1em; text-align:center; border:1px dashed #dadada; padding:0 !important;}
	.mainBoard .tabs button strong {text-align:center;}
	.mainBoard .tabs button.on {border-radius:1em !important; border:1px solid #D1336D;}
	.mainBoard .tabs button.on:after {display:none;}

	.mainBoard .tab-content {margin-left:0; min-height:0;}

	.mainBoard .list {margin:0 -.5em;}
	.mainBoard .list li {padding:.5em;}
	.mainBoard .list li:before {top:.5em; left:.5em; right:.5em; bottom:.5em;}
	.mainBoard .list li a {padding:1em 1.5em; height:auto;}
	.mainBoard .list .cate {margin-left:-.5em; margin-bottom:1em;}
	.mainBoard .list .date {margin-top:2em;}

	.mainBoard .list li.no-data {height:15em;}
}
@media all and (max-width:770px) {
	.mainBoard .list li {width:50%;}
}
@media all and (max-width:640px) {
	.mainBoardWrap:before {top:18em;}

	.mainBoard .tabs {font-size:.9em;}
	.mainBoard .tabs ul {padding-left:0;}
	.mainBoard .tabs li:first-child {position:relative; width:auto; float:none; clear:both;}
	.mainBoard .tabs li:first-child button {height:3em;}
	.mainBoard .list {font-size:.9em;}
}
@media all and (max-width:490px) {
	.mainBoardWrap:before {top:23em;}
	.mainBoard .list {font-size:1em;}
	.mainBoard .list li {width:auto; float:none;}
	.mainBoard .list .subj {display:block; -webkit-line-clamp:1; white-space:nowrap; overflow:hidden; height:auto;}
	.mainBoard .list .date {margin-top:1.1em;}
	.mainBoard .list li:nth-child(3) ~ li {display:none;}

	.mainBoard .tabs li {width:50%;}
}


/****************************************************************
	생활지도 서비스
****************************************************************/

.mainMapWrap {padding-top:2.5em; padding-bottom:3.5em;}
.mainMapWrap .acc-typo {display:block; position:absolute; top:2.5em; left:0; width:46.6em; height:10em; background:url(../img/main/spr_typo.svg) no-repeat -2.5em -2.5em; background-size:auto 17.5em; text-indent:-999px; overflow:hidden; z-index:-3;}
.mainMapWrap .acc .obj {display:block; position:absolute; background:url(../img/main/spr_visual.svg) no-repeat 0 0; background-size:auto 26em; text-indent:-999px; overflow:hidden; z-index:-1;}
.mainMapWrap .acc .obj.ty1 {top:0; left:18.35em; width:18.3em; height:7em; background-position:0 -15em; z-index:-3;}
.mainMapWrap .acc .obj.ty2 {top:14.5em; right:-10.9em; width:20.6em; height:10.5em; background-position:-18.5em -15em; z-index:-1;}
.mainMapWrap .acc .obj.ty3 {top:0; right:0; height:25em; width:44em; border-radius:1.5em; background:linear-gradient(151deg, #D1336D 2.25%, #222A89 155.52%); z-index:-2;}
.mainMapWrap .mo-link {display:none;}

@media all and (max-width:1024px) {
	.mainMapWrap .inner {padding-top:7.5em; max-width:45em; margin:0 auto;}
	.mainMapWrap .acc .obj.ty1 {top:.5em; left:auto; right:1.5em;}
	.mainMapWrap .acc .obj.ty2 {top:auto; right:-5em; bottom:0; z-index:3;}
	.mainMapWrap .acc .obj.ty3 {display:none;}

	.mainMapWrap .mo-link {display:block; position:absolute; top:7.5em; left:0; right:0; bottom:0; text-indent:-999px; overflow:hidden; z-index:2;}
}
@media all and (max-width:640px) {
	.mainMapWrap {font-size:.8em;}
	.mainMapWrap .inner {padding-top:6em;}
	.mainMapWrap .acc-typo {font-size:.82em;}
}
@media all and (max-width:460px) {
	.mainMapWrap .acc .obj.ty2 {display:none;}
}

.mainMapWrap .sec-tit {position:relative; float:right; clear:both; width:40em; padding:3.15em 0 1.9em; color:#fff;}
.mainMapWrap .sec-tit strong {font-size:1.8em; font-family:'TTWanjudaedunsancheB';}
.mainMapWrap .sec-tit span {font-size:.85em; color:#fff; font-weight:300; margin-left:2.5em;}
@media all and (max-width:1024px) {
	.mainMapWrap .sec-tit {height:20.8em; padding:3.5em 3.2em; background:linear-gradient(151deg, #D1336D 2.25%, #222A89 155.52%); float:none; width:auto; border-radius:1.5em; overflow:hidden; z-index:0;}
	.mainMapWrap .sec-tit strong {display:block; position:relative; font-size:2.4em;}
	.mainMapWrap .sec-tit span {display:block; position:relative; font-size:1.2em; margin:.4em 0 0 0; word-break:keep-all; line-height:1.2em;}
	.mainMapWrap .sec-tit:before,
	.mainMapWrap .sec-tit:after {content:""; display:block; position:absolute; background:no-repeat 50% 50%; background-size:contain;}
	.mainMapWrap .sec-tit:before {left:0; bottom:0; width:26em; height:10.7em; background-image:url(../img/main/img_map_obj.svg);}
	.mainMapWrap .sec-tit:after {top:0; right:0; bottom:0; width:20.5em; background-image:url(../img/main/bak_map.svg);}
}
@media all and (max-width:510px) {
	.mainMapWrap .sec-tit:before {left:-2em;}
}
@media all and (max-width:380px) {
	.mainMapWrap .sec-tit {padding:3em 2em;}
}


.mainMapFrame {position:relative; margin:0 auto; max-width:1780px;}
.mainMap {display:block; position:relative; margin-right:14.75em; height:26.5em; border-radius:1.5em; overflow:hidden; background:#fff; box-shadow:.2em .2em 1em 0 rgba(0,0,0,.1); z-index:0;}
.mainMap > .in {display:block; position:relative; width:100%; height:100%; z-index:0;}
.mainMap .goto {display:table; position:absolute; right:0; bottom:0; width:6em; height:3em; z-index:1;}
.mainMap .goto > * {display:table-cell; vertical-align:middle; text-align:center; font-size:.9em; color:#fff; font-family:'TTWanjudaedunsancheB'; line-height:1.25em; border-radius:1.25em 0 0 0; background:linear-gradient(136deg, rgba(34, 73, 166, 0.20) 4.06%, rgba(16, 52, 137, 0.20) 105.58%), #2249A6;}
@media all and (max-width:1820px) {
	.mainMap {margin-right:9.2em;}
}
@media all and (max-width:1024px) {
	.mainMapFrame {display:none;}
}


/****************************************************************
	생활지도 서비스 지도 UI : PC 버전
****************************************************************/

.guide-example {position:absolute; top:50%; left:50%;}

#map_search {position:absolute; top:0; left:0; bottom:0; z-index:10;}
#map_search .control {display:block; position:absolute; left:100%; top:50%; margin-top:-1.75em; width:2em; height:3.5em; border-radius:0 .25em .25em 0; border:1px solid #DCE1E7; border-left-width:0; background:#FFFFFF;}
#map_search .control:before {content:""; display:block; position:relative; margin:0 auto; width:1.5em; height:1.5em; background:url(../img/main/spr_arrow.svg) no-repeat -15em 0; background-size:auto 1.5em;}
#map_search .control strong {display:block; font-size:.65em;}
#map_search .control.open {display:none;}
#map_search .control.open:before {background-position:-16.5em 0;}
#map_search .control.close:before {background-position:-15em 0;}
#map_search.search-close .control.open {display:block;}
#map_search.search-close .control.close {display:none;}
#map_search .pannel {display:block; position:relative; height:100%; background:#FFFFFF; padding-right:15em; transition:.3s padding; -webkit-transition:.3s padding;}
#map_search.search-close .pannel {padding-right:0;}
#map_search .category {position:relative; height:100%; z-index:1; background:#fff;}
#map_search .category > ul {display:block; position:relative; height:100%; width:15.75em; padding:1em 7.5em 1em 0; z-index:0; background:#F9F9F9;}
#map_search .category > ul:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:8.25em; background:#F2F2F2; z-index:-1;}
#map_search .category > ul > li {display:block; z-index:1;}
#map_search .category > ul > li > button {display:block; position:relative; width:100%; padding:.6em 1em .6em 1.5em; text-align:left;}
#map_search .category > ul > li > button span {display:block; position:relative; color:#212121; font-size:.85em; font-weight:600;}
#map_search .category > ul > li.on {margin-right:-.45em;}
#map_search .category > ul > li.on > button,
#map_search .category > ul > li > button.on {border-radius:9em 0 9em 9em; background:#D1336D;}
#map_search .category > ul > li.on > button span,
#map_search .category > ul > li > button.on span {color:#fff;}
#map_search .category > ul > li.on > button:after,
#map_search .category > ul > li > button.on:after {content:""; display:block; position:absolute; width:1.5em; height:1.5em; right:.45em; top:50%; margin-top:-.75em; background:url(../img/main/spr_arrow.svg) no-repeat -12em 50%; background-size:auto 1.5em;}
#map_search .category > ul > li > ul {display:none; position:absolute; top:0; right:0; bottom:0; padding:1em 0 1em 1.5em; width:7.5em; overflow:auto; z-index:0;}
#map_search .category > ul > li.on > ul {display:block;}
#map_search .category > ul ul button {display:block; position:relative; width:100%; height:2em; text-align:left;}
#map_search .category > ul ul button span {display:block; position:relative; font-size:.8em; color:#686868; font-weight:500;}
#map_search .category > ul ul button.on span {color:#D1336D; font-weight:700;}
#map_search .searchWrap {position:absolute; top:0; right:0; bottom:0; width:15em; z-index:0; transition:.3s all; -webkit-transition:.3s all;}
#map_search.search-close .searchWrap {visibility:hidden; opacity:0;}
#map_search .searchWrap .frmSearch {display:block; position:relative; padding:1em; height:9.8em; background:linear-gradient(116deg, #0F86C9 -1.7%, #2249A6 104.2%); overflow:hidden;}
#map_search .searchWrap .frmSearch > * {position:relative; padding:.25em;}
#map_search .searchWrap .multiSelect {display:table; width:100%; table-layout:fixed; padding:0;}
#map_search .searchWrap .multiSelect > * {display:table-cell; padding:.25em;}
#map_search .searchWrap .multiSelect button {display:block; position:relative; width:100%; height:2em; border-radius:.25em; background:#fff; color:#686868; padding-bottom:.2em;}
#map_search .searchWrap .multiSelect button span {font-size:.75em; font-weight:500;}
#map_search .searchWrap select {font-size:.75em; padding:0 1em; height:2.6667em; border-radius:.334em; border:none; width:100%; font-weight:500;}
#map_search .searchWrap input[type="text"],
#map_search .searchWrap input[type="search"] {font-size:.75em; padding:0 1em; height:2.6667em; border-radius:.334em; border:none; width:100%; color:#212121; font-weight:500;}
#map_search .searchWrap input[type="text"]::placeholder,
#map_search .searchWrap input[type="search"]::placeholder {color:#686868;}
#map_search .searchWrap .input input[type="button"],
#map_search .searchWrap .input input[type="submit"],
#map_search .searchWrap .input button[type="submit"],
#map_search .searchWrap .input button[type="button"] {display:block; position:absolute; top:50%; width:1.2em; height:1.2em; right:1em; margin-top:-.6em; background:url(../img/main/ico_search.svg) no-repeat 50% 50%; background-size:contain; border:none; text-indent:-999px; overflow:hidden;}
#map_search .searchWrap .resultSearch {position:absolute; top:9.8em; bottom:0; left:0; right:0; padding:.65em 1em; overflow:auto;}
#map_search .searchWrap .resultSearch .list li {display:block; position:relative;}
#map_search .searchWrap .resultSearch .list li + li {border-top:1px solid #DCE1E7;}
#map_search .searchWrap .resultSearch .list a {display:block; position:relative; padding:.75em 0;}
#map_search .searchWrap .resultSearch .list a > * {display:block; position:relative; line-height:1.1em;}
#map_search .searchWrap .resultSearch .list .subj {color:#212121; font-weight:700; font-size:.9em;}
#map_search .searchWrap .resultSearch .list .txt {font-size:.8em; color:#484848; margin-top:.5em;;}
#map_search .searchWrap .resultSearch .moreBox {display:block; position:relative; border-top:1px solid #DCE1E7; margin-top:1em;}
#map_search .searchWrap .resultSearch .moreBox a {display:block; position:relative; padding:.5em; text-align:center;}
#map_search .searchWrap .resultSearch .moreBox a strong {font-size:.8em;}
#map_area {position:absolute; top:0; left:30.75em; right:0; bottom:0; background:#c9c9c9; z-index:0; transition:.3s all; -webkit-transition:.3s all;}
#map_search.search-close ~ #map_area {left:15.75em;}



#map_area .map-infoWdw {display:block; position:absolute; bottom:100%; left:50%; margin-left:-7.5em; width:15em; border-radius:.75em; box-shadow:.2em .2em 1em 0 rgba(0, 0, 0, 0.15); background:linear-gradient(151deg, #D1336D 2.25%, #222A89 155.52%);}
#map_area .map-infoWdw .close {display:block; position:absolute; width:2em; height:2em; background:#D1336D; border-radius:100%; top:-.5em; right:-.5em; text-indent:-999px; overflow:hidden; z-index:1; box-shadow:.15em .15em .4em 0 rgba(0,0,0,.2);}
#map_area .map-infoWdw .close:before {content:""; display:block; position:absolute; width:1.5em; height:1.5em; top:50%; left:50%; margin:-.75em 0 0 -.75em; background:url(../img/main/spr_arrow.svg) no-repeat -19.5em 50%; background-size:auto 1.5em;}
#map_area .map-infoWdw .info {display:block; position:relative; margin:.05em; background:#fff; border-radius:.7em; padding:1em 1.25em; z-index:0;}
#map_area .map-infoWdw .info .title {display:block; position:relative; margin-bottom:.45em; font-weight:600; white-space:normal;}
#map_area .map-infoWdw .info .title strong {font-size:.9em; font-weight:600;}
#map_area .map-infoWdw .info .con {display:block; position:relative; }
#map_area .map-infoWdw .info .con > p {font-size:.75em; color:#484848; line-height:1.2em; font-weight:500; white-space:normal;}
#map_area .map-infoWdw .info .con .box {display:block; position:relative; margin-top:.75em; border-radius:.5em; background:#f6f6f6; padding:.73em; overflow:hidden;}
#map_area .map-infoWdw .info .con .box li {display:block; position:relative; font-size:.8em; white-space:normal;}
#map_area .map-infoWdw .info .con .box li > * {display:inline-block; vertical-align:middle; padding:.2em 0; font-weight:500; color:#484848;}
#map_area .map-infoWdw .info .con .box li strong {padding-right:.8em; font-weight:600; color:#D1336D;}

.map-infoWdw .pop-list {position:absolute; top:0; left:-10em; margin-left:-10px; width:10em; min-height:11em; padding:5px; z-index:1; background:#fff; border-radius:1.3334em; font-size:15px; line-height:1.6; color:#777777; font-weight:300; border:1px solid #D1336D; overflow:hidden;}
.map-infoWdw .pop-list img {max-width:100%;}
.map-infoWdw .pop-list .list {max-height:10em; overflow:auto;}
.map-infoWdw .pop-list .list::-webkit-scrollbar{width: 5px; height: 5px;}
.map-infoWdw .pop-list .list::-webkit-scrollbar-thumb{background: #B3AFB3; border-radius: 0px;}
.map-infoWdw .pop-list .list::-webkit-scrollbar-thumb:hover{background: #B3AFB3;}
.map-infoWdw .pop-list .list::-webkit-scrollbar-track{background: #F0F0F0; border-radius: 0px; box-shadow: inset 0px 0px 0px 0px #F0F0F0;}

.map-infoWdw .pop-list .list li {display:block; position:relative;}
.map-infoWdw .pop-list .list li + li {border-top:1px solid #efefef;}
.map-infoWdw .pop-list .list li a,
.map-infoWdw .pop-list .list li button {display:block; position:relative; padding:.8em 1.05em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#333333; font-weight:400;}
.map-infoWdw .pop-list .list li.on a,
.map-infoWdw .pop-list .list li.on button,
.map-infoWdw .pop-list .list li a.on,
.map-infoWdw .pop-list .list li button.on {font-weight:600;}