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

body {font-size: 1.7rem; line-height: 1.5;}
h3 {font-family: var(--font-paper); font-size: 2.8rem; line-height: 1;}

#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: linear-gradient(90deg, #DD284C 0%, #D5265E 25.86%, #D02568 35.99%, #CB2675 47.87%, #BC2983 65.33%, #AF2C90 83.15%, #A1309E 100%);} */
.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: 5.8rem 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(14rem + 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:1920px){
	.top-con:before{top:0px; }
}
.top-con .inner {display: flex; gap: 5rem}
.top-con .right-box .quick {display: flex; padding: 1.5rem 2rem; border-radius: 1.6rem; background: var(--sub-gra)}
.top-con .right-box .quick li {flex: 1;}
.top-con .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;}
.top-con .right-box .quick li a:hover { background-color: rgba(0,0,0,.1); border-radius:.5rem}
.top-con .right-box .quick li.info a {background-image: url(../img/main/ico_quick_info.svg);}
.top-con .right-box .quick li.part a {background-image: url(../img/main/ico_quick_part.svg);}
.top-con .right-box .quick li.orga a {background-image: url(../img/main/ico_quick_orga.svg);}
.top-con .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; align-items: center; color: #050505; height: 12.2rem; padding: 0.5rem 0 2rem 0;; text-align: center; line-height: 1; border-radius: 1.7rem; }
.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{flex: 0 0 auto; display: block; content: ''; width: 10rem; height:8rem; 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;}

#main-visual {position: relative; padding: 3.2rem 0 0 3.3rem;}
/* #main-visual:before {content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: calc(100% - 3.3rem); height: 31rem; border-radius: 2rem 12rem 2rem 5rem; background: url(../img/main/ico_visual_deco.svg) no-repeat right 14.8rem top, linear-gradient(113deg, var(--color-01, #DF2947) 7.97%, #CC2574 50.11%, var(--color-03, #9F31A1) 92.25%);} */
#main-visual:before {content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: calc(100% - 3.3rem); aspect-ratio: 1/0.362; min-height: 25rem; border-radius: 2rem 12rem 2rem 5rem; background: url(../img/main/ico_visual_deco.svg) no-repeat right 14.8rem top, var(--main-gra);;}
#main-visual h3 {position: relative; z-index: 2; color: #fff; padding-left: .7rem;}
#main-visual .visual-swiper {width: 87.5rem; aspect-ratio:2.1875/1; margin-top: 2.2rem; border-radius: 1.8rem; box-shadow: 0 0.2rem 1.5rem 0 rgba(0,0,0,0.25); overflow: hidden;}
#main-visual .visual-swiper .swiper-slide a {display: block; height: 100%;}
#main-visual .visual-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
#main-visual .control {position: absolute; z-index: 2; top: 3.2rem; right: 10.8rem; display: flex; align-items: center;}
#main-visual .control .swiper-pagination {position: static; display: flex; gap: 0.2rem; margin-right: 1.4rem; color: #fff;}
#main-visual .control .swiper-pagination .swiper-pagination-total {font-weight: 700;}
#main-visual .control button::before {background: #fff;}

.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-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 {flex: 1 1 auto;}

#headman {position: relative; margin-bottom: 1.7rem;}
#headman h3 {height: 3.2rem;}
#headman h3 a {display: inline-block; line-height: 1; padding-right: 2rem; font-weight: 500; background: url(../img/main/ico_headman_arr.svg) no-repeat right center;}

#headman .head-btn {position: relative; margin-top: 1.4rem; width: 100%; height: 31rem; border-radius: 1.6rem; background: url(../img/main/headman-bg.png) no-repeat 0 0 / cover; box-shadow: 0 0.1rem 0.8rem 0 rgba(0,0,0,0.15); overflow: hidden;}
#headman .slogan {position: relative; padding-top: 6rem; padding-left: 3rem; color: #2B324A; font-family: var(--font-estab); font-size: 2.4rem; z-index: 2;}
#headman .slogan span {display: inline-block; font-size: 3.1rem; line-height: normal;}
#headman .slogan .txt01 {background: linear-gradient(90deg, #0091AA 7.08%, #003CAA 100%);  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#headman .slogan .txt02 {background: linear-gradient(90deg, #E56C01 7.08%, #EF3A03 100%);  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#headman .slogan .txt03 {color: #152A75;}
#headman .photo {position: absolute; right: -3.5rem; bottom: 0; width: 27.9rem;}
#headman .photo img {width: 100%;}

/*#headman .head-btn {position: relative; border-radius: 1.6rem; margin: 1.4rem 0 0; overflow: hidden; box-shadow: 0 0.1rem 0.8rem 0 rgba(0,0,0,0.15);}
#headman .head-btn img {width: 100%;}

#headman .latest {position: relative;}
#headman .latest a {display: block; width: 100%; width: 44rem; height: 25.4rem; border-radius: 1.6rem 1.6rem 0 0; overflow: hidden;}
#headman .latest a:focus {outline: 0.2rem solid var(--krds-color-light-primary-50);}
#headman .latest .txt {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; color: #fff; padding: 5rem 2rem 1rem; text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 700;}
#headman .latest:hover .txt {text-decoration: underline; text-underline-position: under;}
*/
#headman .head-btn .btn-wrap {position: absolute; z-index: 1; left: 0; bottom: 0; margin: 0; background: linear-gradient(90deg, rgba(23, 51, 157, 0.95) 0%, rgba(75, 28, 169, 0.95) 100%);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.20); border-radius: 1.6rem;}
#headman .head-btn .btn-wrap a {flex: 1; min-width: 0; text-align: center; font-weight: 700; color: #fff; padding: 1.9rem 0;}
#headman .head-btn .btn-wrap a::before {content:''; display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; margin-right: 0.6rem; background-repeat: no-repeat; background-size: 100%;}
#headman .head-btn .btn-wrap > a:focus {box-shadow: inset var(--krds-box-shadow-outline);}
#headman .head-btn .btn-wrap > a:hover {text-decoration: underline; text-underline-position: under;}
#headman .head-btn .btn-wrap::after {content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0.1rem; height: 2.6rem; background: rgba(255, 255, 255, 0.30); transform: translateY(-50%);}
#headman .head-btn .btn-wrap .greeting::before {background-image: url(../img/main/ico_main_headman_btn_greeting01.svg);}
#headman .head-btn .btn-wrap .promise::before {background-image: url(../img/main/ico_main_headman_btn_promise01.svg);}
#headman .wish {position: absolute; z-index: 1; right: 0; top: 0.6rem; padding-left: 3.2rem; line-height: 2.8rem; font-weight: 700; color: #333; background: url(../img/main/ico_head_wish.png) no-repeat left center/2.8rem;}

.board-con {position: relative; display: flex; gap: 11.6rem; padding-top: 6.5rem; padding-bottom: 12.2rem;}
.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-shrink: 0; width: 58.2rem;}
.board-con .right {flex-grow: 1;}

#news .tab-wrap {position: relative;}
#news .tablist {display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.9rem;}
#news .tablist button {flex-shrink: 0; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; color: #222; width: 10.8rem; height: 3.7rem; border: 0.1rem solid var(--krds-light-color-text-basic); border-radius: 10rem; box-sizing: border-box;}
#news .tablist button:hover {border-width: 0.2rem;}
#news .tablist .select { font-weight: 600; color: #fff; background: var(--sub-gra); border: 0;}
#news .tabpanel ul li:not(:first-child) + li{border-top:1px dashed #666}
#news .tabpanel ul li a {display: block; padding: 2.6rem 2rem; transition: var(--krds-transition-base); border-radius: 1.5rem; }
#news .tabpanel ul li a .title {display: block; width: calc(100% - 10rem); color: #222; font-size: 1.9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: var(--krds-transition-base);}
#news .tabpanel ul li a p {margin-top: 0.5rem; font-size: 1.5rem; color: var(--krds-light-color-text-disabled); transition: var(--krds-transition-base);}
#news .tabpanel ul li a:hover{text-decoration: underline;}
#news .tabpanel ul li:first-child a {background: var(--krds-light-color-text-basic); padding-left: 3rem; padding-right: 3rem;}
#news .tabpanel ul li:first-child a * {color: #fff;}
#news .tabpanel ul li:first-child a p {opacity: 0.5;}

#news .tabpanel .more-btn {position: absolute; z-index: 2; top: 0; right: 0; width: 3.1rem; height: 3rem; background: url(../img/main/ico_main_plus01.svg) no-repeat left top;}
#news .tabpanel .more-btn span {display: block; text-indent: -999.9rem;}

#smbnr {height: 21.5rem; margin-top: 0.7rem;}
#smbnr .smbnr-swiper-wrap {display: flex; align-items: stretch; justify-content: space-between; gap: 0.4rem; height: 100%;}
#smbnr .smbnr-swiper-wrap .swiper-slide a {display: block; height: 100%;}
#smbnr .smbnr-swiper-wrap .swiper-slide a img {display: block; height: 100%; object-fit: cover; width: 100%;}
#smbnr .smbnr-swiper-wrap .smbnr-swiper {flex-grow: 1; height: 100%; overflow: hidden; border-radius: 1rem;}
#smbnr .smbnr-swiper-wrap .control {display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-shrink: 0; width: 3.8rem; background: #E5E5E5; border-radius: 1rem; padding: 1.8rem 0 1.7rem;}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination {display: flex; align-items: center; flex-direction: column; position: static; font-size: 1.5rem; gap: 0.2rem}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination-current {color: #333;}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination-total {position: relative; padding-top: 0.6rem; font-weight: 700; color: #333;}
#smbnr .smbnr-swiper-wrap .control .swiper-pagination-total::before {content:''; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); width: 0.4rem; height: 0.4rem; border-radius: 0.4rem; background: #333;}
#smbnr .smbnr-swiper-wrap .control .btn-wrap {display: flex; flex-direction: column; align-items: center; gap: 0;}
#smbnr .smbnr-swiper-wrap .control .btn-wrap button::before {transform: rotate(90deg); background: #333;}

#now ul {display: flex; flex-wrap: wrap; gap: 8.3rem 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;  background-repeat: no-repeat, no-repeat; background-position: left center, right center;}
#now ul li a {display: block;}
#now ul li.photo {width: 100%;}
#now ul li.photo .con {display: flex; margin-top: 1.6rem; gap: 3.2rem;}
#now ul li.photo .con a + a {margin-top: 0;}
#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;}

.together {padding-top: 1.6rem; padding-bottom: 4.9rem;}
.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 {width: 4rem; height: 4rem; text-indent: -999.9rem; overflow: hidden; border-radius: 4rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
.together .sns-list .facebook {background-image: url(../img/main/ico_sns_facebook.svg);}
.together .sns-list .youtube {background-image: url(../img/main/ico_sns_youtube.svg);}
.together .sns-list .insta {background-image: url(../img/main/ico_sns_insta.svg);}
.together .sns-list .naverblog {background-image: url(../img/main/ico_sns_blog.svg);}
.together .sns-list .kakao {background-image: url(../img/main/ico_sns_kakao.svg);}
.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: 4.9rem; justify-content: space-between;}

#magazine {flex-shrink: 0; width: 31.1rem;}
#magazine a {position: relative; display: block;}
#magazine a .img {display: block; border-radius: 2rem; overflow: hidden; box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.25);}
#magazine a p {position: absolute; z-index: 1; bottom: -2.2rem; left: 50%; transform: translateX(-50%); display: inline-block; padding: 1.3rem 4.5rem; border-radius: 6rem 6rem 2rem 2rem; background: var(--sub-color); box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.20); white-space: nowrap;}
#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;}

#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);}

#sns-con {margin-top: 5.8rem;}
#sns-con ul {display: flex; align-items: stretch; gap: 2rem}
#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;}

#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: 0.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: 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);}
/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1448px) {
	.top-con:before {width: 100%; left: 50%; bottom: 0; height: 71%; transform: translate(-50%,65%);}
	.top-con > .inner:not(.favorite) {flex-direction: column; width: 95.6rem;}
	#headman .latest .img {width: 100%; height: auto;}

	.board-con {gap: 8rem}
	.board-con::before {width: 96%;}
	.board-con::after {left: auto; margin-left: 0; bottom: 5%; right: 1.6rem; width: 80%; height: 14%; background-size: 100%;}
	.board-con .left {width: 46%;}
	.board-con .right {width: 46%;}
}

@media (max-width: 1199px) {
}

@media (max-width: 1023px) {
	.top-con:before {height: 60%;}
	.top-con > .inner:not(.favorite) {width: 100%;}
	#main-visual .visual-swiper {width: 100%;}

	.favorite.inner {flex-wrap: wrap;}
	.favorite li {width: 20%; min-width: calc((100% - 4rem)/5)}

	.board-con {flex-direction: column;}
	.board-con .left {width: 100%;}
	.board-con .right {width: 100%;}

	#magazine {display: none;}
	#geondan-swipe-wrap .geondan-swiper {height: 90%;}

	#sns-con ul {flex-wrap: wrap;}
	#sns-con ul li {min-width: 48%;}

	#custom h3::before {height: 100%;}
	#custom .sv-list li {max-width: calc((100% - 2.4rem) / 4); width: 25%;}
}


@media (max-width: 768px) {
	.top-con {background: transparent; padding-top: 0rem; padding-bottom: 0;}
	.top-con .inner {gap: 4.1rem;}
	.top-con .right-box .quick li a {background-size: 3.3rem;}
	#main-visual{padding:3.2rem 0px}
	#main-visual:before{left: calc(-1 * var(--krds-contents-padding-x));  width: calc(100% + 2 * var(--krds-contents-padding-x)); border-radius:0px 0px 10rem 10rem}
	#main-visual .visual-swiper {aspect-ratio:2/1}
	#main-visual .control{right: .5rem;}

	.krds-modal.visual-modal .modal-dialog .modal-header .modal-title span {padding: 2.1rem 0 3.5rem 10rem; margin-left: -5rem; background-size: 8rem;}

	#headman {margin-bottom: 1rem;}
	#headman .wish {display: none;}
	#headman .head-btn .btn-wrap {flex-wrap: nowrap; gap: 0; flex-direction: row;}

	.favorite.inner {gap: 0; justify-content: flex-start; margin-top: 0.8rem; padding: 0 2rem 3rem;}
	.favorite li {max-width: 20%; min-width: 20%;}
	.favorite li a {height: auto; padding: 1rem .5rem; word-break: keep-all;}
	.favorite li a::before{margin-bottom: 0px; transform: scale(.95);}


	#news .main-tit {display: inline-block; line-height: 1; margin-bottom: 2.2rem; background: linear-gradient(90deg, #DF2847 0%, #CC2574 25%, #9F31A0 50%, #6C2FB8 75%, #2C32AB 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
	#news .main-tit strong {background: transparent;}

	.board-con {padding: 0; gap: 0;}
	.board-con::before {display: none;}
	.board-con::after {display: none;}
	.board-con .left {padding: 5.6rem var(--krds-contents-padding-x) 3.7rem; background: linear-gradient(180deg, #F6F6FD 0%, #E9E9FF 100%);}
	.board-con .right {padding: 5.5rem var(--krds-contents-padding-x) 5rem;}

	#news .tab-cover {width: calc(100% + 2.5rem); margin: 0 -2.5rem 0 0; overflow-x: auto; margin-bottom: 2.5rem;}
	#news .tablist {display: inline-flex; white-space: nowrap; margin: 0; padding-right: 2.5rem; padding-bottom: 0.6rem;}
	#news .tabpanel .more-btn {display: block; position: static; text-align: center; width: 100%; height: auto; padding-top: 1.2rem; background: transparent;}
	#news .tabpanel .more-btn span {display: inline-block;  line-height: 1.2; font-weight: 700; text-indent: 0; padding-right: 3.2rem; background: url(../img/main/ico_news_mb_more01.svg) no-repeat right center;}
	#news .tabpanel ul li + li{border:0px !important; margin-top: .6rem}
	#news .tabpanel ul li a{background: #fff;}

	#smbnr {margin-top: 3.7rem; height: auto;}
	#smbnr .smbnr-swiper-wrap {flex-direction: column;}
	#smbnr .smbnr-swiper-wrap .smbnr-swiper {height: auto;}
	#smbnr .smbnr-swiper-wrap .control {flex-direction: row; width: 100%; gap: 1.1rem; padding: 10px 0 0; background: transparent; border-radius: 0;}
	#smbnr .smbnr-swiper-wrap .control .btn-wrap {flex-direction: row; order: 1; width: auto; flex-wrap: nowrap;}
	#smbnr .smbnr-swiper-wrap .control .btn-wrap button {transform: rotate(-90deg); width: 2rem;}
	#smbnr .smbnr-swiper-wrap .control .swiper-pagination {flex-direction: row; order: 0; justify-content: flex-end;}
	#smbnr .smbnr-swiper-wrap .control .swiper-pagination-total {padding-top: 0; padding-left: 0.8rem;}
	#smbnr .smbnr-swiper-wrap .control .swiper-pagination-total::before {left: 0; top: 50%; transform: translateY(-50%);}

	#now .main-tit {display: none; padding-top: 5.5rem;}
	#now ul {flex-direction: column; align-items: flex-start; padding: 0 1.5rem; gap: 4.4rem;}
	#now ul li {width: 100%;}
	#now ul li .go-board {padding-top: 0.2rem; padding-left: 4.5rem; padding-bottom: 0.6rem; background-position: left top 0.1rem, right top 0.4rem}
	#now ul li a + a {margin-top: 1rem;}
	#now ul li a .img.video::before {border-radius: 2rem;}
	#now ul li a p {margin-top: 1rem;}
	#now ul li.photo .con {flex-direction: column;}

	.together {padding-top: 1.8rem; padding-bottom: 0; margin-bottom: 4.1rem;}
	.together .sns-list {margin-bottom: 3.4rem;}
	.together .sns-list a {width: 5rem; height: 5rem;}
	.together .main-tit {margin-bottom: 0; }
	.together .main-tit::after {display: none;}

	#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;}

	#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;}

	#custom {flex-direction: column; gap: 2.7rem; background: #613D9E;}
	#custom::before {top: -4.1rem; left: 0; width: 100%; transform: translateX(0);}
	#custom h3 {padding: 0; width: 100%; line-height: 1; text-align: center;}
	#custom h3::before,
	#custom h3::after {display: none; gap: 3.7rem;}
	#custom .tab-wrap {align-items: center; padding-top: 0; padding-bottom: 0; gap: 3.6rem}
	#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{gap:4px}
	#custom .sv-list li a {font-size: 1em; letter-spacing: -1px;}

	.krds-modal .modal-dialog .modal-conts .conts-area.main-visual-list {flex-direction: column; align-items: flex-start;}
	.krds-modal .modal-dialog .modal-conts .conts-area.main-visual-list a {width: 100%;}
}

@media (max-width: 420px) {
	#headman .head-btn {display: flex; flex-direction: column; align-items: center; height: auto; }
	#headman .slogan {text-align: center; padding: 3rem 3rem 0; width: 100%;}
	#headman .slogan br {display: none;}
	#headman .photo {position: static;}
}