@charset "utf-8";
@import url('/share/css/swiper.min.css');

/* 그외수정파일
krds-layout 142줄
sub.css 검색영역만 삭제
inc.css 검색 영역만 변경, 인기검색어추가, 상단메뉴하단라인삭제, .main-nav .gnb-menu 그로우

헤더 인기검색어 추가
*/
body {font-size: 1.7rem; line-height: 1.5;}
h3 {font-family: var(--font-paper); font-size: 2.8rem; line-height: 1;}

.krds-modal.main-layer .modal-dialog .modal-conts.pop-one a {
    display: inline-block;
    width: auto;
    max-width: none;
}
.krds-modal .modal-back.in {
    display: none;
}
@media (max-width: 1023px) {
    .krds-modal.main-layer .modal-dialog .modal-conts .conts-area:not(.pop-one) {
        padding: 0 !important;
    }
}
.krds-modal.main-layer .modal-dialog .modal-conts.pop-one a {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}


#contents {overflow-x: hidden;}
/* #contents a:active, #contents a:focus, #contents a:hover, #contents button:active, #contents button:focus, #contents button:hover {text-decoration: underline; text-underline-position: under;}*/
:where(#headman, #now, #geondan-swipe-wrap, #sns-con) a:hover {text-decoration: underline; text-underline-position: under;}
.main-tit {color: #222; font-size: 2.8rem; margin-bottom: 3.2rem; line-height: 0.8;}
.main-tit strong {background: var(--sub-gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; leading-trim: both; text-edge: cap;}
.main-tit .color02 {background-image: var(--main-gra)}

.control button {position: relative; flex-shrink: 0; width: 1.7rem; height: 1.7rem;}
.control button::before {content: ''; position: absolute; inset: 0; mask-repeat: no-repeat; mask-position: center;}
.control button.prev-btn::before {mask-image: url(../img/main/ico_prev.svg);}
.control button.next-btn::before {mask-image: url(../img/main/ico_next.svg);}
.control button.play-btn.pause::before {mask-image: url(../img/main/ico_pause.svg);}
.control button.play-btn.play::before {mask-image: url(../img/main/ico_play.svg); background: #fff;}
.control button.all-btn {width: 2.3rem; height: 1.6rem;}
.control button.all-btn::before {mask: url(../img/main/ico_pop_all.svg) no-repeat left 0.5rem bottom;}
.control .btn-wrap {margin-top: 0;}

/***  팝업존, 구청장, 배너  ***/
.top-con {position: relative; padding: 4rem 0 4.6rem/* ; background: url(../img/main/bg_top_con.png) no-repeat right top; */}
.top-con:before {content: ''; position: absolute; z-index: -1; left: 0%; top:  calc(12rem + max(0px, (100vw - 1920px) * 0.06)); width: 100%; aspect-ratio:1/.62; background: url(../img/main/bg_main.svg) no-repeat 0 0 / cover; }
@media all and (min-width:1921px) {
	.top-con:before {top:0px; }
}
.top-con .inner {display: flex; gap: 4.2rem; }
@media all and (max-width:1400px) {
	.top-con .inner{align-items: flex-start;}
}

#main-visual {position: relative; width: 64.858%}
#main-visual h3 {opacity:0; position: absolute; width: 1px; height: 1px;}
#main-visual .visual-swiper {width: 100%; aspect-ratio:1.8916/1; max-height: 480px; border-radius: 1.8rem; box-shadow: 0 0.2rem .6rem 0 rgba(0,0,0,.05); overflow: hidden;}
#main-visual .visual-swiper .swiper-slide a {display: block; height: 100%;}
#main-visual .visual-swiper .swiper-slide a:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 1.8rem; box-sizing: border-box; }
#main-visual .visual-swiper .swiper-slide a:focus-visible::after { content: ''; position: absolute; left: 2px; top: 2px; width: calc(100% - 3px); height: calc(100% - 3px); outline: 2px solid var(--krds-color-light-primary-50); border: 2px solid #fff; box-sizing: border-box; }
#main-visual .visual-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
#main-visual .control {position: absolute; display: flex; align-items: center;  justify-content: center; padding-left: 1rem; width: 17.1rem; height: 4.4rem; background:  url(../img/main/visual_control_bg.svg) no-repeat center top / contain; }
#main-visual .control button::before {background: #fff;}
#main-visual .control button.all-btn{margin-left: .3rem;}
#main-visual .swiper-pagination {all:unset; display: flex; gap: 0.2rem; align-items: center;  justify-content: center; position: absolute; width: 12.9rem;
height: 5.3rem;  color: #fff;  background:  url(../img/main/visual_paging_bg.svg) no-repeat center top / contain; font-weight: 400;}
#main-visual .swiper-pagination .swiper-pagination-total {font-weight: 600;}
#main-visual .control,
#main-visual .swiper-pagination{right: -3rem; bottom: -7px; z-index: 1;}
#main-visual .swiper-pagination{margin-bottom: -1.5rem; margin-right: 13rem;}

/* 상단 팝업존 모아보기 */
.krds-modal.visual-modal .modal-dialog .modal-header {padding-top: 4.1rem; padding-bottom: 0;}
.krds-modal.visual-modal .modal-dialog .modal-header .modal-title {text-align: center;}
/* .krds-modal.visual-modal .modal-dialog .modal-header .modal-title span {display: inline-block; font-size: 4.1rem; line-height: 1.04; font-weight: 600; font-family: var(--font-paper); padding: 3.1rem 0 5.2rem 18.5rem; background: url(../img/main/pic_main_modal_deco01.png) no-repeat left top/12.3rem; margin-left: -18.5rem;} */
.krds-modal.visual-modal .modal-dialog .modal-header .modal-title span {display: inline-block; font-size: 4.1rem; line-height: 1.04; font-weight: 600; font-family: var(--font-paper); padding: 3.1rem 0 5.2rem 16rem; background: url(../img/main/3d_danbi.png?v1) no-repeat left top/ 14rem; margin-left: -16rem;}
.krds-modal.visual-modal .modal-dialog .modal-content {gap: 0;}
.krds-modal.visual-modal .modal-dialog .modal-content.inner {padding-left: 1.5rem; padding-right: 1.5rem;}
.krds-modal .modal-dialog .modal-conts .conts-area.main-visual-list {flex-direction: row; gap: 1.8rem; flex-wrap: wrap; justify-content: space-between;}
.krds-modal .modal-dialog .modal-conts .conts-area > * {/* width: calc((100% - 1.8rem)/2);  */border-radius: 1.4rem; overflow: hidden;}
.krds-modal .modal-dialog .modal-conts .conts-area.main-visual-list > * {width: calc((100% - 1.8rem)/2)}
.krds-modal.visual-modal .close-modal {top: 2.4rem; right: 4rem; width: 5rem; height: 5rem;}
.krds-modal.visual-modal .krds-btn.icon .svg-icon.ico-popup-close {mask-image: url(../img/main/ico_main_modal_close01.svg);}
.krds-modal.visual-modal .close-modal.no-fix {position: static; width: auto; height: 4.7rem; margin: 3.2rem auto 0; font-family: var(--font-paper); font-size: 1.8rem; font-weight: 600; color: var(--krds-light-color-text-subtle); padding: 0 5rem; background: #fff; border-radius: 10rem;}
.krds-modal.visual-modal .close-modal.no-fix .svg-icon.ico-popup-close {display: inline-block; vertical-align: top; margin-top: 0.5rem; width: 1.6rem; height: 1.6rem; mask-image: url(../img/main/ico_main_modal_close02.svg); background: var(--krds-light-color-background-inverse);}

.right-box {display: flex; flex-direction: column; gap:1.7rem; flex: 1 1 auto;}
#headman {flex-grow: 1; position: relative; width: 100%; border-radius: 1.6rem; background: url(../img/main/headman-bg.png) no-repeat 0 0 / cover; }
#headman h3 {opacity:0; position: absolute; width: 1px; height: 1px;}
#headman .headman-img{display: flex; flex-direction: column; position: relative; width: 100%; height: calc(100% - 5rem); min-height: 300px; padding:4rem 4rem 6rem; overflow: hidden; }
#headman .headman-img .slogan{flex-grow:2}
#headman .headman-img .slogan img {width: 65%; max-width:22.6rem}
#headman .headman-img a{flex-grow:1; margin-top: 5rem; font-family: 'Paperlogy'; font-size: 1.9rem;}
#headman .headman-img a strong{font-size: 1.4em;}
#headman .headman-img .photo {position: absolute; right: -3.5rem; top: 0; width: 26.9rem;}
#headman .headman-img .photo img {width: 100%;}
#headman .headman-btn {display: flex; justify-content: space-between; position: absolute; z-index: 1; left: 0; bottom: 0; padding:2.3rem 3%; width: 100%; background: linear-gradient(90deg, rgba(23, 51, 157, 0.95) 0%, rgba(75, 28, 169, 0.95) 100%); border-radius: 1.4rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2); }
#headman .headman-btn>li { flex: 1 0 auto; position: relative}
#headman .headman-btn > li + li::before {content: "";  position: absolute; left:0%; top: .3rem;  bottom: .3rem; width: 1px; background: #fff;  opacity:.2}
#headman .headman-btn a {display: flex; justify-content: center; align-items: center; font-weight: 500; color: #fff; font-size: 1.7rem}
#headman .headman-btn a::before {content:''; display: block; width: 2rem; height: 2rem; margin-right: 0.3rem; background-repeat: no-repeat; background-size: 100%;}
#headman .headman-btn > a:focus {box-shadow: inset var(--krds-box-shadow-outline);}
#headman .headman-btn > a:hover {text-decoration: underline}
#headman .headman-btn .greeting::before {background-image: url(../img/main/ico_main_headman_btn_greeting01.svg);}
#headman .headman-btn .promise::before {background-image: url(../img/main/ico_main_headman_btn_promise01.svg);}
#headman .headman-btn .wish::before {background-image: url(../img/main/ico_main_headman_btn_wish.svg);}
.right-box .quick {display: flex; padding: 2.6rem 2rem 2.3rem; border-radius: 1.6rem; background: var(--sub-gra); box-shadow: 0 0.1rem .4rem 0 rgba(0,0,0,.2); }
.right-box .quick li {flex: 1;}
.right-box .quick li a {display: block; padding: 5.4rem 0 1rem; text-align: center; line-height: 1; color: #fff; background-repeat: no-repeat; background-position: center top 1rem;}
.right-box .quick li a:hover { background-color: rgba(0,0,0,.1); border-radius:.5rem}
.right-box .quick li.info a {background-image: url(../img/main/ico_quick_info.svg);}
.right-box .quick li.part a {background-image: url(../img/main/ico_quick_part.svg);}
.right-box .quick li.orga a {background-image: url(../img/main/ico_quick_orga.svg);}
.right-box .quick li.loca a {background-image: url(../img/main/ico_quick_loca.svg);}

.favorite.inner {margin-top: 4.4rem; gap: 1rem; padding: 0 1.5rem;}
.favorite li {flex: 1; min-width: 0;}
.favorite li a {display: flex; flex-direction: column; color: #050505; padding: 2rem .5rem; text-align: center; line-height: 1; border-radius: 1.7rem; height: 100%; word-break: keep-all;}
.favorite li a span {display: flex; flex-direction: column; justify-content: center; line-height: 1; flex-grow: 1}
.favorite li a:hover, .favorite li a:focus {background-color: #fff; box-shadow: 0 0.2rem 0.8rem 0 rgba(90,48,180,0.3);}
.favorite li a::before {display: block; content: ''; margin:0px auto; width: 6.5rem; height:6.5rem; background-repeat: no-repeat; background-position: center center}
.favorite li.job a::before {background-image: url(../img/main/ico_fv_job.svg);}
.favorite li.form a::before {background-image: url(../img/main/ico_fv_form.svg);}
.favorite li.waste a::before {background-image: url(../img/main/ico_fv_waste.svg);}
.favorite li.sms a::before {background-image: url(../img/main/ico_fv_sms.svg);}
.favorite li.economy a::before {background-image: url(../img/main/ico_fv_eco.svg);}
.favorite li.edu a::before {background-image: url(../img/main/ico_fv_edu.svg);}
.favorite li.culture a::before {background-image: url(../img/main/ico_fv_ct.svg);}
.favorite li.build a::before {background-image: url(../img/main/ico_fv_build.svg);}
.favorite li.traffic a::before {background-image: url(../img/main/ico_fv_tf.svg);}
.favorite li.env a::before {background-image: url(../img/main/ico_fv_env.svg);}
.favorite li.safe a::before {background-image: url(../img/main/ico_fv_safe.svg);}
.favorite li.area a::before {background-image: url(../img/main/ico_fv_area.svg);}
.favorite li.tax a::before {background-image: url(../img/main/ico_fv_tax.svg);}
.favorite li.talk a::before {background-image: url(../img/main/ico_fv_talk.svg); font-weight: 700;}
.favorite li.news a::before {background-image: url(../img/main/ico_fv_news.svg);}


/***  검단소식, 지금검단  ***/
.board-con {position: relative; display: flex; gap: 6.429%; padding-top: 6.5rem; padding-bottom: 8rem;}
.board-con::before {content:''; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); width: 140.1rem; height: 0.5rem; background: #fff;}
.board-con::after {content:''; position: absolute; z-index: -1; bottom: 0; left: 50%; width: 150rem; height: 28.1rem; margin-left: -59.4rem; background: url(../img/main/ico_board_con_deco01.svg) no-repeat center/cover;}
.board-con .left {flex:0 0 40%}
.board-con .right {position: relative; flex-grow: 1; min-width: 1px;}
.board-con .right:After{display: block; content: ''; position: absolute; right: 3rem; top: -5rem; width: 41%; max-width: 307px; max-height:246px; aspect-ratio:1/0.8; background: url(../img/main/3d_character.png) no-repeat center/contain;}

#news  .main-tit {margin-bottom: 2rem;}
#news .tab-wrap {position: relative;}
#news .tablist {display: flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem;}
#news .tablist button {flex:1; min-width: 1px; font-size: 1.8rem; padding:2.2rem 0px; color: var(--krds-light-color-text-disabled-on); border: 1px solid  var(--krds-color-high-contrast-gray-10); border-radius: 1.2rem; box-sizing: border-box; font-weight: 500; background: #fff;}
#news .tablist button:before {display: block; content: ''; margin: auto; --size:5rem; width: var(--size); height: var(--size); background: url(../img/main/ico_board_tab.png) no-repeat left top / calc(2 * var(--size)) }
#news .tablist #tab_news_02:before {background-position-y: calc(-1 * var(--size))}
#news .tablist #tab_news_03:before {background-position-y: calc(-2 * var(--size))}
#news .tablist #tab_news_04:before {background-position-y: calc(-3 * var(--size))}
#news .tablist .select { font-weight: 600; color: #fff; background: var(--sub-gra); border: 0; box-shadow: 0px 1px 3px rgba(0,0,0,.1)}
#news .tablist .select:before { background-position-x: calc(-1 * var(--size))}
#news .tablist .select:focus-visible {outline: .2rem solid var(--krds-color-light-primary-50); outline-offset: .1rem; box-shadow: inset 0 0 0 0.1rem #fff;}
#news .tabpanel ul li {border-bottom:1px dashed #666}
#news .tabpanel ul li:last-child {border-bottom-style:solid}
#news .tabpanel ul li a {display: block;  padding: 2.4rem 1.5rem; transition: var(--krds-transition-base); border-radius: 1.5rem; }
#news .tabpanel ul li a .title {display: block; color: #222; font-size: 1.9rem; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1;  overflow: hidden; transition: var(--krds-transition-base);}
#news .tabpanel ul li a p.txt {display: none }
#news .tabpanel ul li a p.writer {margin-top: .8rem; color: var(--krds-light-color-text-disabled); transition: var(--krds-transition-base);}
#news .tabpanel ul li a:hover {text-decoration: underline;}
@media (min-width: 1024px) {
	#news .tabpanel ul li:first-child {border-bottom: 0px;}
	#news .tabpanel ul li:first-child {margin-bottom: .8rem}
	#news .tabpanel ul li:first-child a {display: flex; flex-direction: column; background: var(--main-primary-10); padding:2.8rem 3.7rem 2.5rem; min-height:23rem }
	#news .tabpanel ul li:first-child a .title {font-size: 2.2rem; -webkit-line-clamp: 2;  overflow: hidden}
	#news .tabpanel ul li:first-child a p.txt {margin-top: 1.1rem; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}
	#news .tabpanel ul li:first-child a p.writer {display: flex; flex-grow: 1; align-items: flex-end; margin-top: 2.2rem;}
}
#news .tabpanel .more-btn {position: absolute; z-index: 2; top: -5rem; right: 0; width: 3rem; height: 3rem; background: url(../img/main/ico_main_plus01.svg) no-repeat center center;}
#news .tabpanel .more-btn span {display: block; text-indent: -999.9rem;}

#now ul {display: flex; flex-wrap: wrap; gap: 5rem 3.2rem}
#now ul li {width: 46%; flex: 1 1 auto;}
#now ul li .go-board {display: inline-block; line-height: 1.1; font-family: var(--font-paper); font-size: 2.2rem; font-weight: 600; padding-left: 3.5rem; padding-right: 2.3rem; padding-top: 0.1rem; background-repeat: no-repeat, no-repeat; background-position: left center, right center;}
#now ul li a {display: block;}
#now ul li .con a {display: block; max-width: 46%; flex: 1 1 auto;}
#now ul li.photo .go-board {background-image: url(../img/main/ico_main_now_photo01.svg)/* , url(../img/main/ico_main_now_tit01.svg); */}
#now ul li.vid .go-board {background-image: url(../img/main/ico_main_now_vid01.svg), url(../img/main/ico_main_now_tit01.svg);}
#now ul li.card .go-board {background-image: url(../img/main/ico_main_now_card01.svg), url(../img/main/ico_main_now_tit01.svg);}
#now ul li.report .go-board {background-image: url(../img/main/ico_main_now_report01.svg), url(../img/main/ico_main_now_tit01.svg);}
#now ul li a + a {margin-top: 1.6rem;}
#now ul li a .img {width: 100%; border-radius: 1.8rem; overflow: hidden; aspect-ratio:1/0.7; }
#now ul li a .img.video {position: relative;}
#now ul li a .img.video::before {content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: calc(100% - 2rem); height: calc(100% - 2rem); transform: translate(-50%,-50%); border-radius: 1.2rem; border: 0.2rem solid #fff}
#now ul li a .img.video::after {content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.7rem; height: 3.3rem; transform: translate(-50%,-50%); background: url(../img/main/ico_new_now_vid01.svg) no-repeat center;}
#now ul li a .img img {display: block; height: 100%; object-fit: cover; transition: var(--krds-transition-base)}
#now ul li a p {margin-top: 0.9rem; text-align: center; font-size: 1.7rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/* 포토스와이퍼 */
#now ul li.photo {position: relative; width: 100%;}
#now ul li.photo .now-photo-swiper {position: relative; width: 100%;  min-width: 0; overflow: hidden;}
#now ul li.photo .swiper-wrapper {margin-top: 1.6rem; justify-content: space-between;}
#now ul li.photo .swiper-wrapper a.swiper-slide {position: relative; max-width:49%}
#now ul li.photo .swiper-wrapper a.swiper-slide .img{overflow:hidden; aspect-ratio:1.36125/1;}
#now ul li.photo .swiper-wrapper a + a {margin-top: 0;}
#now ul li.photo .control {position: absolute; left: 13rem; top: .2rem; display: flex; align-items: center; justify-content: center; }
#now ul li.photo .control {flex: 0 0 auto; gap:2px; width: unset;}
#now ul li.photo .control button::before {background: #333;}
#now ul li.photo .control .more-btn {position: relative; border-radius:100px; overflow:hidden; margin-left: 3px; margin-top: 0.2rem; width: 18px; height: 18px; background: #333;}
#now ul li.photo .control .more-btn:after{display: flex; content: '+'; position: absolute; width: 100%; height: 100%; left: 0px; top: 1px; align-items: center; justify-content: center; text-align: center; font-weight: bold; font-family: 'Dotum'; font-size: 19px; line-height: 19px; text-shadow: 0px 1px 0px #fff; color: #fff;}


/*** 구민과 함께하는 검단 ***/
.together {padding-top: 4rem; padding-bottom: 5rem;}
.together .together-tit {text-align: center; margin-bottom: 4.6rem;}
.together .sns-list {display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2.7rem}
.together .sns-list a {--size:6.5rem; width: var(--size); height: var(--size); text-indent: -999.9rem; overflow: hidden; border-radius: 100%; background-repeat: no-repeat; background-position: center top; background-image: url(../img/main/ico_main_sns.png); background-size: cover;}
.together .sns-list .youtube {background-color:#E02F2F; }
.together .sns-list .insta { background-image:url(../img/main/ico_main_sns.png),  linear-gradient(45deg, #FFC107 9.15%, #F44336 50.57%, #9C27B0 90.03%);  background-position-y: calc(-1 * var(--size)), center}
.together .sns-list .naverblog {background-color:#2EB34A; background-position-y: calc(-2 * var(--size))}
.together .sns-list .kakao {background-color:#FFEC19; background-position-y: calc(-3 * var(--size))}
.together .main-tit {display: inline-block; position: relative; font-size: clamp(3.2rem, 3vw, 4.2rem)}
.together .main-tit::after {content:''; position: absolute; z-index: -1; top: -2.4rem; right: -4rem; width: 5.4rem; height: 3.7rem; background: url(../img/main/ico_together_deco01.svg) no-repeat center/cover;}
.together .top {display: flex; align-items: stretch; gap: 4rem; justify-content: space-between; margin-top: 3rem;}

#sns-con {margin-top: 3rem;}
#sns-con ul {display: flex; align-items: stretch; gap: max(1.429%, 10px)}
#sns-con ul li {flex: 1; min-width: 0;}
#sns-con ul li a {position: relative; display: block;}
#sns-con ul li a::after {content:''; position: absolute; z-index: 1; display: inline-block; top: 0; right: 0; width: 4.6rem; height: 4.6rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
#sns-con ul li.facebook a::after {background-image: url(../img/main/ico_main_sns_fb01.svg);}
#sns-con ul li.youtube a::after {background-image: url(../img/main/ico_main_sns_ytb01.svg);}
#sns-con ul li.naverblog a::after {background-image: url(../img/main/ico_main_sns_nb01.svg);}
#sns-con ul li.instagram a::after {background-image: url(../img/main/ico_main_sns_ig01.svg);}
#sns-con ul li.kakao a::after {background-image: url(../img/main/ico_main_sns_kc01.svg);}
#sns-con ul li a .img {border-radius: 2rem 6.2rem 2rem 2rem; overflow: hidden; aspect-ratio:1/.73135}
#sns-con ul li a .img img {display: block; height: 100%; object-fit: cover; transition: var(--krds-transition-base)}
#sns-con ul li a p {padding: 1.3rem 1rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#magazine {position: relative; flex-shrink: 0; width: 31rem; }
#magazine a .img {width: 100%; aspect-ratio:1/1.2323; border-radius: 2rem; overflow: hidden; font-size: 0px;}
#magazine a img {width: 100%; height: 100%; object-fit:cover}
#magazine a p {position: absolute; bottom: 0rem; left: 50%; transform: translateX(-50%); display: inline-block; text-align: center; padding: 1.3rem 0; width: 70%; border-radius: 6rem 6rem .5rem .5rem; background: var(--sub-color); ; box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.25);}
#magazine a p span {display: inline-block; padding-right: 2.4rem; color: #fff; font-weight: 700; background: url(../img/main/ico_main_bell01.svg) no-repeat right center;}

#smbnr {flex:1 1 0; min-width: 0; max-height:38.2rem; overflow:hidden}
#smbnr .smbnr-swiper-wrap,
#smbnr .smbnr-swiper-wrap .swiper {position: relative; width: 100%;  min-width: 0; overflow: hidden;}
#smbnr .smbnr-swiper-wrap .swiper-slide {border-radius:1.5rem; overflow:hidden; aspect-ratio:1.36125/1; max-width: 520px}
#smbnr .smbnr-swiper-wrap .swiper-slide a {display: block; height: 100%;}
#smbnr .smbnr-swiper-wrap .swiper-slide img {width: 100%; height: 100%; object-fit: cover; }
#smbnr .smbnr-swiper-wrap .control {display: flex; gap:1rem; align-items: center; justify-content: center; position: absolute; left: 0%; right: 0; bottom: 0px; margin: auto; padding-top: 1rem; width: 25.2rem; height: 3.4rem; background:url(../img/main/smbnr_btn_bg.png) no-repeat center top / cover; z-index: 1;}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination {all:unset; display: flex; gap:1rem; font-size: 1.7rem; gap: 0.2rem}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination-current {color: #333;}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination-total {position: relative; font-weight: 700; color: #333;}
#smbnr .smbnr-swiper-wrap .control .btn-wrap {flex-wrap: nowrap; flex: 0 0 auto; gap:2px; width: unset;}
#smbnr .smbnr-swiper-wrap .control .btn-wrap button::before {background: #333;}

/* 검단관광 비주얼
#geondan-swipe-wrap {position: relative; flex-grow: 1; width: 50%;}
#geondan-swipe-wrap .swiper-container {height: 100%;}
#geondan-swipe-wrap .geondan-swiper {width: 100%; height: 93%; border-radius: 2rem; overflow: hidden; box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.10);}
#geondan-swipe-wrap .geondan-swiper .swiper-slide img {height: 100%; object-fit: cover; width: 100%;}
#geondan-swipe-wrap .btn-wrap {justify-content: flex-end}
#geondan-swipe-wrap .control {display: flex; align-items: center; justify-content: flex-start; gap: 1.4rem; margin-top: 0.8rem; padding-left: 0.7rem;}
#geondan-swipe-wrap .control button::before {background: var(--krds-light-color-text-disabled-on);}
#geondan-swipe-wrap .control .swiper-pagination {position: static; width: auto; display: flex; align-items: center; gap: 0.2rem; font-size: 1.7rem; color:  var(--krds-light-color-text-disabled-on);}
#geondan-swipe-wrap .control .swiper-pagination .swiper-pagination-current {color:  var(--krds-light-color-text-basic);}
#geondan-swipe-wrap .control .swiper-pagination .swiper-pagination-total {font-weight: 700;}
#geondan-swipe-wrap > ul {position: absolute; z-index: 1; bottom: 0.6rem; right: -1.5rem; border-radius: 1.5rem; padding: 1rem 2rem; background: #fff; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);}
#geondan-swipe-wrap > ul li a {display: block; padding: 2.6rem 2rem 2.6rem 2.2rem; font-size: 1.7rem; font-weight: 700; color: #333; background: url(../img/main/ico_main_geondan_line01.svg) no-repeat left bottom;}
#geondan-swipe-wrap > ul li:first-child a {padding-top: 2.2rem;}
#geondan-swipe-wrap > ul li:last-child a {padding-bottom: 2.2rem;}
#geondan-swipe-wrap > ul li:last-child a {background: transparent;}
#geondan-swipe-wrap > ul li a span {display: block; padding: 0.2rem 0 0.2rem 4.5rem; background-repeat: no-repeat; background-position: left center;}
#geondan-swipe-wrap > ul li.travel a span {background-image: url(../img/main/ico_main_geomdan_deco01.svg);}
#geondan-swipe-wrap > ul li.event a span  {background-image: url(../img/main/ico_main_geomdan_deco02.svg);}
#geondan-swipe-wrap > ul li.map a span {padding-top: 0.4rem; padding-bottom: 0; background-image: url(../img/main/ico_main_geomdan_deco03.svg);} */


/*** 구민맞춤 서비스 ***/
#custom {display: flex; align-items: stretch; position: relative; padding-top: 5.9rem; padding-bottom: 5.6rem; gap: 3.6rem;}
#custom::before {content:''; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); width: 144rem; height: 0.3rem; background: #E5E5E5; opacity: 0.3;}
#custom h3 {flex-shrink: 0; position: relative; font-size: 3.8rem; color: #fff; padding: 5.8rem 0 0 5rem; line-height: 1.25;}
#custom h3::before {content:''; position: absolute; z-index: -2; top: 0; left: 0; width: 59rem; height: 43.8rem; background: var(--main-color); border-radius: 2rem 4rem 28rem 2rem;}
#custom h3::after {content:''; position: absolute; z-index: -1; bottom: -2.4rem; left: -14rem; width: 34.3rem; height: 27.2rem; background: url(../img/main/pic_main_custom_deco01.png) no-repeat center/cover;}
#custom .tab-wrap {display: flex; align-items: flex-end; gap: 2.4rem; flex-direction: column; flex-grow: 1; padding-top: 1.1rem; padding-bottom: 4.1rem;}
#custom .tab-wrap .tablist {display: flex; align-items: center; gap: 0.2rem;}
#custom .tab-wrap .tablist button {font-family: var(--font-paper); width: 20rem; height: 5.2rem; font-size: 2rem; color: var(--main-primary-95)  font-weight: 600; letter-spacing: 0.02rem; border-radius: 5rem 5rem 5rem 10rem; border: 0.2rem solid var(--main-primary-95); background: #FFF;}
#custom .tab-wrap .tablist button.select {border: 0; color: #fff;  background: var(--sub-gra)}
#custom .tab-wrap .tabpanel {width: 100%;}
#custom .sv-list {display: flex; align-items: stretch; gap:min(1.7vw, .8rem); flex-wrap: wrap; width: 100%;}
#custom .sv-list li {text-align: center; max-width: calc((100% - 4rem) / 6); width: 17%; border-radius: 1.5rem; background: var(--main-primary-5); border:0.1rem solid var(--main-primary-5)}
#custom .sv-list li:hover {border-color:var(--main-primary-95)}
#custom .sv-list li a {display: block; font-size: clamp(1.4rem, 3vw,1.8rem); color: #333; padding: min(3vw, 3rem) 0 }
#custom .sv-list li a::before {display: block; content: ''; width: 5rem; height:5rem; margin: 0px auto 1rem; background-repeat: no-repeat; background-position: center center; background-size: cover}
#custom .sv-list li.complaint a::before {background-image: url(../img/main/ico_custom_complaint.svg);}
#custom .sv-list li.result a::before {background-image: url(../img/main/ico_custom_result.svg);}
#custom .sv-list li.passport a::before {background-image: url(../img/main/ico_custom_passport.svg);}
#custom .sv-list li.form a::before {background-image: url(../img/main/ico_custom_form.svg);}
#custom .sv-list li.taxacc a::before {background-image: url(../img/main/ico_custom_taxacc.svg);}
#custom .sv-list li.waste a::before {background-image: url(../img/main/ico_custom_waste.svg);}
#custom .sv-list li.gov a::before {background-image: url(../img/main/ico_custom_gov.svg);}
#custom .sv-list li.tax a::before {background-image: url(../img/main/ico_custom_tax.svg);}
#custom .sv-list li.freelaw a::before {background-image: url(../img/main/ico_custom_freelaw.svg);}
#custom .sv-list li.price a::before {background-image: url(../img/main/ico_custom_price.svg);}
#custom .sv-list li.car a::before {background-image: url(../img/main/ico_custom_car.svg);}
#custom .sv-list li.problem a::before {background-image: url(../img/main/ico_custom_problem.svg);}
#custom .sv-list li.reserve a::before {background-image: url(../img/main/ico_custom_reserv.svg);}
#custom .sv-list li.evt a::before {background-image: url(../img/main/ico_custom_evt.svg);}
#custom .sv-list li.welfare a::before {background-image: url(../img/main/ico_custom_welfare.svg);}
#custom .sv-list li.edu a::before {background-image: url(../img/main/ico_custom_edu.svg);}
#custom .sv-list li.work a::before {background-image: url(../img/main/ico_custom_work.svg);}
#custom .sv-list li.economy a::before {background-image: url(../img/main/ico_custom_economy.svg);}
#custom .sv-list li.parking a::before {background-image: url(../img/main/ico_custom_parking.svg);}
#custom .sv-list li.hygiene a::before {background-image: url(../img/main/ico_custom_hygiene.svg);}
#custom .sv-list li.park a::before {background-image: url(../img/main/ico_custom_park.svg);}
#custom .sv-list li.city a::before {background-image: url(../img/main/ico_custom_city.svg);}
#custom .sv-list li.defence a::before {background-image: url(../img/main/ico_custom_defence.svg);}
#custom .sv-list li.tour a::before {background-image: url(../img/main/ico_custom_tour.svg);}
#custom .sv-list li.participatory a::before {background-image: url(../img/main/ico_custom_participatory.svg);}


/********************************************************************************** 반응형*********************************************************************/

@media (max-width: 1023px) {
	.top-con .inner:not(.favorite) {flex-direction: column}
	#main-visual{width: 100%; max-width:908px; margin: auto;}
	.right-box {flex-direction: row; width: 100%;}
	#headman .headman-img .slogan{flex-grow: 0;}
	.right-box .quick{flex:0 0 40%; flex-wrap: wrap;}
	.right-box .quick li{flex: 1 0 50%;}
	.favorite.inner {flex-wrap: wrap;}
	.favorite li {width: 20%; min-width: calc((100% - 4rem)/5)}
	#sns-con{margin-top: 0;}
	#custom {flex-direction: column; gap:0px}
	#custom h3 br,
	#custom h3::after{display: none;}
	#custom .tab-wrap{padding:0px max(5%,20px); margin-top: -3rem;}
	/* #geondan-swipe-wrap .geondan-swiper {height: 90%;} */
}

@media (max-width: 768px) {
	.right-box {flex-direction: column; width: 100%;}
	.right-box .quick li{flex: 1 0 25%;}
	.board-con {flex-direction: column; gap:5rem; padding-top: 3rem}
	.board-con .right:After{top: -3rem}
	#now ul li.photo .swiper-wrapper a.swiper-slide{max-width: 90%;}
	#sns-con ul {flex-wrap: wrap; padding:0px 10px}
	#sns-con ul li {flex: 0 0 calc(50% - max(1.429%, 10px))}
	.together .top {flex-direction: column; align-items: center;}
	#magazine {width: 50%; min-width:31rem}
	#smbnr {flex:auto; align-self: stretch; order:-1}
	#smbnr .btn-wrap {display: none;}
	#smbnr .smbnr-swiper-wrap .control{right:-34%}
	#custom {flex-direction: column; gap: 2.7rem; background: var(--main-color)}
	#custom::before {display: none;}
	#custom h3 {padding: 0; width: 100%; line-height: 1; text-align: center;}
	#custom h3::before {display: none }
	#custom .tab-wrap{padding:0px; margin-top: 0px;}
	#custom .tab-wrap .tablist {width: 100%; justify-content: center;}
	#custom .tab-wrap .tablist button {width: calc(50% - 2.2rem); max-width: 145px; border-radius:100px}
	#custom .sv-list li {max-width: calc((100% - 2rem) / 4); width: 23.5%;}
	#custom .sv-list li a {letter-spacing: -1px;}

	/* #geondan-swipe-wrap {display: flex; align-items: flex-start; flex-direction: column; width: 100%; gap: 0.7rem}
	#geondan-swipe-wrap .swiper-container {width: 100%;}
	#geondan-swipe-wrap .geondan-swiper {height: auto;}
	#geondan-swipe-wrap ul {order: 0; position: relative; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; width: calc(100% + 1.5rem); box-shadow: none; padding: 0; gap: 1.3rem;}
	#geondan-swipe-wrap ul li {position: relative; width: 34%; height: auto;}
	#geondan-swipe-wrap ul li:before {content:''; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: -0.6rem; width: 0.2rem; height: calc(100% - 2.5rem); background: url(../img/main/ico_main_geondan_line01_m.svg) no-repeat right center;}
	#geondan-swipe-wrap ul li:first-child:before {display: none;}
	#geondan-swipe-wrap ul .event {width: 26.5%;}
	#geondan-swipe-wrap ul li a {text-align: center; background: none; padding: 1.2rem 0 !important;}
	#geondan-swipe-wrap ul li a span {padding-top: 5.6rem !important; padding-left: 0; background-position: top center;}
	#geondan-swipe-wrap .swiper-container {order: 1;}
	#geondan-swipe-wrap > ul li:last-child a {padding-bottom: inherit;}
	#geondan-swipe-wrap .control {justify-content: flex-end; margin-top: 1.3rem;}
	#geondan-swipe-wrap .control .btn-wrap {flex-direction: row; gap: 0;} */
}

@media (max-width: 420px) {
	#now ul li:not(.photo){width: 100%;}
	#sns-con {width: calc(100% + 2.5rem); overflow-x: auto; padding-bottom: 1.8rem; margin-right: -2.5rem;}
	#sns-con ul {display: inline-flex; flex-wrap: nowrap; white-space: nowrap; flex-direction: row; padding-right: 2.5rem;}
	#sns-con ul li {flex: none; width: 80vw; min-width: auto;}
	#sns-con ul li a .img {width: 100%;}
	#sns-con ul li a p {padding-left: 3.1rem; padding-right: 3.1rem;}
	#smbnr .smbnr-swiper-wrap .control{right:-75%}
}