#skipNav a{ position: absolute; top: 0; left: 0; width: 200px; height: 50px; background: #000; color: #fff; text-align: center; line-height: 50px; transform: translateY(-100%); }
#skipNav a:active, #skipNav a:focus{ transform: translateY(0%); }

/* inner1 */
.inner1{ display: flex; justify-content: space-between; }

/* sc-visual */
.sc-visual{ display: flex; width: 770px; height: 350px; }
.sc-visual .tab-nav{ display: flex; flex-direction: column; background: #d3e1e9; width: 80px; }
.sc-visual .tab-nav .tab{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; }
.sc-visual .tab-nav .tab::before{ content: ""; display: block; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; }
.sc-visual .tab-nav .news::before{ background-position: 0 0; }
.sc-visual .tab-nav .citizen::before{ background-position: -50px 0; }
.sc-visual .tab-nav .tab.active{ background: #0158a8; color: #fff; }

.sc-visual .main-slide{ width: 690px; }
.sc-visual .main-slide .desc{ position: absolute; left: 0; bottom: 0px; width: 100%; height: 40px; line-height: 40px; padding-left: 10px; padding-right: 122px; background-color: rgba(0,0,0,.7); color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.sc-visual .control-area{ display: flex; align-items: center; position: absolute; gap: 5px; bottom: 0; right: 0; color: #fff; /* background-color: #222; */ height: 40px; background-color: rgba(0, 0, 0, 0.5); z-index: 1; padding: 0 10px; }
.sc-visual .control-area::before{ content: ''; position: absolute; right: 76px; width: 1px; height: 18px; background: rgba(255,255,255,.5); }
.sc-visual .control-area .fraction{width: auto; font-size: 13px;}
.sc-visual .control-area .btn-prev::after{ background-position: -237px -284px; }
.sc-visual .control-area .btn-next::after{ background-position: -255px -284px; }
.sc-visual .control-area .btn-autoplay::after{ background-position: -283px -284px; }
.sc-visual .control-area .btn-autoplay.on::after{ background-position: -269px -284px; }

/* col-right */

.col-right{ display: flex; flex-direction: column; gap: 10px; width: 360px; height: 350px; }

.col-right .sc-municipal{ position: relative; height: 190px; overflow: hidden;}
.col-right .sc-municipal .desc{ display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, .7); color: #fff; font-weight: 700; }

.col-right .sc-mayor{ position: relative; }
.col-right .sc-mayor .major-bg{ position: relative; }
.col-right .sc-mayor .major-btn{ position: absolute; top: 18px; right: 14px; }
.col-right .sc-mayor .link-area{ display: flex; width: 100%; height: 26px; justify-content: space-between; position: absolute; bottom: 0; left: 0; background-color: #8b7153; }
.col-right .sc-mayor .link-area a{ display: flex; align-items: center; justify-content: center; width: calc(25% - 1px); border-right: 1px solid #fff; }
.col-right .sc-mayor .link-area a:last-of-type{ border-right: 0; }

.col-right .sc-kakao{ background: #eed925; }
.col-right .sc-kakao a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; }
/* inner1.end */



/* sc-service */

.sc-service{ padding-top: 50px; padding-bottom: 10px; position: relative;}
.sc-service .group-header{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}
.sc-service .group-header .headline{ font-size: 24px; font-weight: 700; line-height: 24px;}/* padding-right: 20px; */
.sc-service .group-header .service-link{display: flex;}
.sc-service .service-link .ic-story::after{ width: 65px; background-position: 0 0; } 
.sc-service .service-link .ic-festival::after{ width: 95px; background-position: -65px 0; }
/* 호버시 */
.sc-service .service-list{ display: flex; justify-content: space-between; margin-top: 20px; height: 90px; }
.sc-service .service-item a{ display: flex; flex-direction: column; align-items: center; }
.sc-service .service-item .ic-book::after{ background-position: -360px 0; }
.sc-service .service-item .ic-answer::after{ background-position: 0 0; }
.sc-service .service-item .ic-job::after{ background-position: -120px 0; }
.sc-service .service-item .ic-real::after{ background-position: -300px 0; }
.sc-service .service-item .ic-portal::after{ background-position: -180px 0; }
.sc-service .service-item .ic-welfare::after{ background-position: -960px 0; }
.sc-service .service-item .ic-living::after{ background-position: -780px 0; }
.sc-service .service-item .ic-young::after{ background-position: -1140px 0; }
.sc-service .service-item .ic-mediahub::after{ background-position: -1020px 0; }
.sc-service .service-item .ic-demo::after{ background-position: -60px 0; }
.sc-service .service-item .ic-ebook::after{ background-position: -1080px 0; }
.sc-service .service-item .ic-council::after{ background-position: -600px 0; }
.sc-service .service-item .name{ font-size: 15px; }

.sc-service .site-go{ display: flex; position: absolute; top: 50px; left: 112px; margin-left: 20px; justify-content: center; align-items: center; margin-right: auto; border: 1px solid #ddd; width: 112px; height: 29px; font-size: 15px; }
.sc-service .site-go::after{ content: ""; display: block; background-image: url(../images/icon_link6.png); background-repeat: no-repeat; width: 6px; height: 11px; margin-left: 13px; }


/* sc-banner */
.sc-banner{ display: flex; align-items: center; background: #eff4f8; height: 110px; margin-top: 35px; }
.sc-banner .banner-list{ display: flex; position: relative; justify-content: space-between; }
.sc-banner .banner-list li+li::before{ display: block; position: absolute; content: ""; width: 1px; height: 60px; background: #dbdbdb; top: 5px; }


/* inner2 */
.inner2{ display: flex; justify-content: space-between; padding: 50px 0; }
.inner2 .headline{ line-height: 1.35em; font-size: 24px; margin-bottom: 10px; padding-bottom: 5px; font-weight: 700; }
.inner2 .sc-board .headline{border-bottom: 2px solid #dbdbdb;}

/* sc-board */
.sc-board{width: 360px; position: relative;}
.sc-board li{width: 360px; display: flex; padding: 6px 0 6px 0;}
.sc-board a{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-board span{width: 27px; margin-right: 9px;}
.sc-board .title-eco{color: #599100;}
.sc-board .title-house{color: #c35c3c;}
.sc-board .title-wellfare{color: #d76000;}
.sc-board .title-economic{color: #069363;}
.sc-board .title-traffic{color: #337ee2;}
.sc-board .title-culture{color: #9b64d3;}
.sc-board .more-btn::after{ width: 22px; height: 20px; position: absolute; right: 0; top: 6px; border: 1px solid #ddd; background-position: -1px -1px; }

.sc-often{width: 360px;}
.sc-often ul{ display: grid; grid-template-columns: 1fr 1fr; background-color: #eff4f8; padding: 17px 5px 7px 20px; }
.sc-often li{ position: relative; color: #333; font-size: 15px; padding: 0 0 10px 10px; }
.sc-often li::before{ content: ''; position: absolute; background: #666666; width: 2px; height: 2px; left: 0; top: 50%; margin-top: -6px; }


/* sc-info */
.sc-info{ padding-top: 40px; border-top: 2px solid #222; }
.sc-info .headline{ font-size: 24px; padding: 0 0 20px 0; font-weight: bold; line-height: 24px; }
.sc-info .info-list{ display: flex; justify-content: space-around; }
.sc-info .info-item{ display: flex; text-align: center; height: 145px; }
.sc-info .info-item [class*="ic"]::after{ display: block; content: ""; width: 85px; height: 85px; background-repeat: no-repeat; margin-bottom: 20px; }

.sc-info .info-item .ic-house::after{ background-image: url(../images/info-bg1.png); }
.sc-info .info-item .ic-economy::after{ background-image: url(../images/info-bg2.png); }
.sc-info .info-item .ic-traffic::after{ background-image: url(../images/info-bg3.png); }
.sc-info .info-item .ic-environment::after{ background-image: url(../images/info-bg4.png); }
.sc-info .info-item .ic-welfare::after{ background-image: url(../images/info-bg5.png); }
.sc-info .info-item .ic-safe::after{ background-image: url(../images/info-bg6.png); }
.sc-info .info-item .ic-culture::after{ background-image: url(../images/info-bg7.png); }
.sc-info .info-item .ic-administration::after{ background-image: url(../images/info-bg8.png); }


/* .sc-news */
.sc-news{position: relative; margin: 20px 0 30px; }
.sc-news .headline{ padding-bottom: 20px; font-size: 24px; font-weight: bold; line-height: 24px; }
.sc-news .news-list{ display: grid; gap: 20px; grid-template-columns: repeat(4,1fr); }

.sc-news .img-box{ position: relative; }
.sc-news .img-box .badge{ display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; width: 82px; height: 32px; color: #fff; }
.sc-news .img-box .admin{background-color: #028ab6;}
.sc-news .img-box .well{background-color: #d76000;}
.sc-news .img-box .eco{background-color: #599100;}
.sc-news .img-box .traffic{background-color: #337ee2;}
.sc-news .img-box .house{background-color: #c35c3c;}
.sc-news .news-item .desc{ margin: 15px 0 20px; font-size: 16px; /* width: 100%; */ overflow: hidden; text-overflow: ellipsis; /* word-break: keep-all; */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.sc-news .btn-more{ position: absolute; top: 6px; right: 0; display: flex; color: #7d7d7d; font-size: 15px; }
.sc-news .btn-more::after{ content: ""; display: block; width: 12px; background-image: url(../images/sp1.png); background-repeat: no-repeat; background-position: -63px -260px; margin-left: 10px; }


/* sc-media */
.sc-media{ display: flex; justify-content: space-between; padding-bottom: 50px; border-bottom: 2px solid #222; }
.sc-media .headline{ font-size: 24px; line-height: 24px; font-weight: bold; padding-bottom: 11px; }


/* group-video */
.sc-media .group-video a{position: relative;}
.sc-media .group-video .desc{ position: absolute; bottom: 0; left: 0; color: #fff; font-size: 16px; font-weight: 700; background-color: rgba(0, 0, 0, 0.5); padding: 11px 20px; width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* group-news */
.sc-media .group-news .txt-wrap{ display: flex; width: 480px; font-size: 16px; color: #555; }
.sc-media .group-news .txt-wrap li{ display: flex; padding: 8px 0; }
.sc-media .group-news .title{ color: #09ac43; font-size: 16px; margin-right: 18px; }
.sc-media .group-news .desc{ width: 400px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* group-sns */
.sc-media .group-sns{ background-image: url(../images/sns-area-bg.jpg); background-repeat: no-repeat; width: 350px; height: 195px; padding: 10px 15px; position: relative; }
.sc-media .group-sns .headline{ font-size: 22px; font-weight: 700; line-height: 1.25em; }
.sc-media .group-sns ul{ display: flex; gap: 6px; position: absolute; top: 90px; left: 50%; transform: translateX(-50%); }
.sc-media .group-sns [class*="sns-"]::after{ display: block; content: ""; background-image: url(https://www.seoul.go.kr/res_newseoul/images/main/ico_sns_list_202309.png?ver=); background-repeat: no-repeat; width: 40px; height: 40px; }
.sc-media .group-sns .sns-facebook::after{ background-position: -40px 0; } 
.sc-media .group-sns .sns-twit::after{ background-position: -80px 0; }
.sc-media .group-sns .sns-blog::after{ background-position: -120px 0; } 
.sc-media .group-sns .sns-youtube::after{ background-position: -160px 0; } 
.sc-media .group-sns .sns-kakao::after{ background-position: -200px 0; }
.sc-media .group-sns .sns-kakaochannel::after{ background-position: -240px 0; }


/* sc-slide */
.sc-banner-slide{ padding: 50px 0; }
.sc-banner-slide .control-area{ display: flex; align-items: center; justify-content: flex-end; height: 40px; z-index: 1; padding: 0 10px; }
.sc-banner-slide .control-area .fraction{width: auto; margin-right: 10px;}
.sc-banner-slide .control-area [class*="btn-"]{ width: 20px; height: 20px; border: 1px solid #999; }
.sc-banner-slide .control-area .btn-prev{ background-image: url(../images/sp1.png); background-repeat: no-repeat; background-position: -45px -43px; }
.sc-banner-slide .control-area .btn-next{ background-image: url(../images/sp1.png); background-repeat: no-repeat; background-position: -86px -43px; }
.sc-banner-slide .control-area .btn-autoplay{ background-image: url(../images/sp1.png); background-repeat: no-repeat; background-position: -65px -43px; border-left: 0; border-right: 0; }
.sc-banner-slide .control-area .btn-autoplay.on{ background-image: url(../images/sp1.png); background-repeat: no-repeat; background-position: -101px -43px; }


/* sc-relate */
.sc-relate{ position: relative; margin-bottom: 20px; }
.sc-relate .relate-list{ display: flex; border: 1px solid #d0d0d0; background: #f7f7f7; }
.sc-relate .relate-item{ flex: 1; color: #333; }
.sc-relate .relate-item+.relate-item{border-left: 1px solid #d0d0d0;}
.sc-relate .relate-item .btn{ display: flex; gap: 10px; width: 100%; align-items: center; justify-content: center; height: 50px; }
.sc-relate .relate-item button.btn::after{ display: flex; content: ""; height: 7px; width: 7px; border-style: solid; border-color: #373737; border-width: 0px 2px 2px 0px; transform: rotate(-135deg); transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); transform-origin: center center; box-sizing: content-box; }
.sc-relate .relate-item button.btn.on{ background: #e2e2e2; }
.sc-relate .relate-item button.btn.on::after{ transform: rotate(45deg); transform-origin: center center; }
.sc-relate .sub{ display: none; position: absolute; border: 1px solid #d0d0d0; bottom: calc(100% - 1px); left: 0; width: 100%; z-index: 99999; background: #fff; }
.sc-relate .sub-list{ display: flex; flex-wrap: wrap; padding: 10px 20px 20px; }
.sc-relate .sub-list li{ margin-top: 10px; width: 25%; }