.inner {
  width: 1152px;
  margin: 0 auto;
}

.inner1 {
  display: flex;
  position: relative;
}
.inner1 .main-col-left {
  display: flex;
  position: relative;
  width: 770px;
  height: 350px;
}
.inner1 .main-col-left .tab {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 80px;
}
.inner1 .main-col-left .tab button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 175px;
  background-color: #d2e1e9;
  color: #333;
  font-weight: 600;
  text-align: center;
}
.inner1 .main-col-left .tab .tab-news {
  top: 0;
  left: 0;
}
.inner1 .main-col-left .tab-participation {
  top: 175px;
  left: 0;
}
.inner1 .main-col-left .tab button span::before {
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  background-color: #fff;
  border-radius: 50%;
}
.inner1 .main-col-left .tab-news span::before {
  background-position: 0 0;
}
.inner1 .main-col-left .tab-participation span::before {
  background-position: -50px 0px;
}
.inner1 .main-col-left .tab button.on {
  background-color: #0158a8;
  color: #fff;
}
.inner1 .main-col-left .tab button.on::after {
  position: absolute;
  content: "";
  z-index: 10;
  left: 99%;
  top: 50%;
  border-style: solid;
  border-width: 25px 0 25px 32px;
  border-color: transparent transparent transparent #0158a8;
  margin-top: -25px;
}

.inner1 .main-col-left .swiper {
  position: relative;
  width: calc(100% - 80px);
  height: 100%;
  margin-left: auto;
}
.inner1 .main-col-left [data-swiper="pSlide"] {
  display: none;
}
.inner1 .main-col-left .swiper-slide img {
  width: 100%;
}
.inner1 .main-col-left .swiper-slide p {
  visibility: hidden;
}
.inner1 .main-col-left .slide-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 1;
}
.inner1 .main-col-left .slide-bottom .slide-content {
  padding-left: 10px;
  padding-right: 122px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inner1 .slide-bottom .slide-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 110px;
  height: inherit;
  z-index: 11;
}
.inner1 .slide-control .swiper-pagination {
  display: flex;
  align-items: center;
  position: relative;
  width: auto;
  top: 0;
  left: 4px;
}
.inner1 .slide-control .swiper-pagination::after {
  position: absolute;
  left: 34px;
  content: "";
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
}
.inner1 .slide-control .control-area {
  display: flex;
  position: absolute;
  right: 10px;
}
.inner1 .slide-control [class*="btn-"] {
  content: "";
  width: 18px;
  height: 18px;
}
.inner1 .slide-control [class*="btn-prev"] {
  background-position: -241px -285px;
}
.inner1 .slide-control .btn-pauseOrPlay {
  background-position: -285px -285px;
}
.inner1 .slide-control .btn-pauseOrPlay.click {
  background-position: -269px -285px;
}
.inner1 .slide-control [class*="btn-next"] {
  background-position: -256px -285px;
}
.inner1 .main-col-right {
  position: absolute;
  width: 360px;
  height: 350px;
  right: 0;
}
.inner1 .main-col-right .mayor-news {
  position: relative;
  margin-bottom: 10px;
}
.inner1 .main-col-right .mayor-news span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.inner1 .main-col-right .mayor {
  position: relative;
}
.inner1 .main-col-right .link-mayor-hope {
  position: absolute;
  top: 18px;
  right: 14px;
}
.inner1 .main-col-right .link-area {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 26px;
}

.inner1 .main-col-right .link-area a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(25% - 1px);
  height: 100%;
  background-color: #8b7153;
}
.inner1 .main-col-right .sns-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  padding: 0 14px;
  background: #eff4f8;
}

.inner1 .sns-area [class*="link-"]::before {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
}
.inner1 .sns-area .link-kakaotalk::before {
  background-position: 0 0;
  width: 114px;
  height: 30px;
}
.inner1 .sns-area .link-instagram::before {
  background-position: -145px 0;
}
.inner1 .sns-area .link-youtube::before {
  background-position: -175px 0;
}
.inner1 .sns-area .link-facebook::before {
  background-position: -115px 0;
}
.inner1 .sns-area .link-twiter::before {
  background-position: -205px 0;
}
.inner1 .sns-area .link-naverblog::before {
  background-position: -235px 0;
}
.inner1 .sns-area .link-kakaostory::before {
  background-position: -265px 0;
}

.main-service {
  position: relative;
  padding-top: 50px;
}
/* 공통 */
.headline {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.border-1px {
  margin-bottom: 20px;
  border-bottom: 1px solid #dbdbdb;
}
.border-2px {
  border-bottom: 2px solid #dbdbdb;
}

.link-all {
  position: absolute;
  top: 46px;
  left: 140px;
  width: 112px;
  height: 29px;
  border: 1px solid #ddd;
  font-size: 15px;
  padding-left: 13px;
  line-height: 28px;
  background: url("../images/arrow.png") no-repeat right 13px top 50%;
}
.main-service .list {
  display: flex;
  justify-content: space-between;
}
.main-service .list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-service .list li [class*="ico-"]::before {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  content: "";
}
.main-service .list li .ico-reservation::before {
  background-position: -360px 0;
}
.main-service .list li .ico-reply::before {
  background-position: 0 0;
}
.main-service .list li .ico-work::before {
  background-position: -120px 0;
}
.main-service .list li .ico-real_estate::before {
  background-position: -300px 0;
}
.main-service .list li .ico-learn::before {
  background-position: -180px 0;
}
.main-service .list li .ico-welfare::before {
  background-position: -960px 0;
}
.main-service .list li .ico-home::before {
  background-position: -780px 0;
}
.main-service .list li .ico-youth::before {
  background-position: -1140px 0;
}
.main-service .list li .ico-my_hand::before {
  background-position: -1020px 0;
}
.main-service .list li .ico-imagine::before {
  background-position: -60px 0;
}
.main-service .list li .ico-ebook::before {
  background-position: -1080px 0;
}
.main-service .list li .ico-city::before {
  background-position: -600px 0;
}

.inner3 {
  display: flex;
  justify-content: center;
  margin-top: 35px;
  background: #eff4f8;
}
.inner3 .quick-link {
  display: flex;
}
.inner3 .quick-link a {
  padding: 20px 0;
}
.inner3 .quick-link a + a::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 60px;
  background: #dbdbdb;
}

.inner4 {
  display: flex;
  padding: 50px 0 50px;
  border-bottom: 2px solid #222222;
}
/* 공통 */
.inner4 .link-more {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 22px;
  height: 20px;
  border: 1px solid #ddd;
  background-position: -1px -1px;
}
.sc-best,
.inner4 .sc-board {
  position: relative;
  width: 360px;
}
.inner4 .sc-board {
  margin-right: 36px;
}
.inner4 .sc-board .list li {
  position: relative;
  width: 100%;
  padding: 8px 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inner4 .sc-board .list li [class*="color-"] {
  margin-right: 9px;
}

/* 개별 */
.inner4 .sc-best .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  margin: 0;
  padding: 17px 5px 7px 20px;
  background: #eff4f8;
}
.inner4 .sc-best .list li {
  position: relative;
  padding: 0 0 12px 10px;
}
.inner4 .sc-best .list li::before {
  position: absolute;
  content: "";
  background: #666666;
  width: 2px;
  height: 2px;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.information {
  height: 185px;
  padding-top: 40px;
}
.information .list {
  display: flex;
  justify-content: space-between;
  padding: 0 27px;
  height: 145px;
}
.information .list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}
.information .list li [class*="ico-"] {
  margin-bottom: 17px;
}
.information .list li [class*="ico-"]::after {
  display: block;
  content: "";
  width: 85px;
  height: 85px;
}
.information .list li .ico-house::after {
  background-position: -220px -10px;
}
.information .list li .ico-economy::after {
  background-position: -10px -10px;
}
.information .list li .ico-traffic::after {
  background-position: -10px -115px;
}
.information .list li .ico-environment::after {
  background-position: -115px -10px;
}
.information .list li .ico-welfare::after {
  background-position: -115px -115px;
}
.information .list li .ico-safty::after {
  background-position: -10px -220px;
}
.information .list li .ico-culture::after {
  background-position: -115px -220px;
}
.information .list li .ico-work::after {
  background-position: -220px -115px;
}

.new-issue {
  position: relative;
  top: 44px;
  padding: 20px 0 30px;
}
.new-issue .link-all-issue {
  position: absolute;
  top: 36px;
  right: 21px;
  font-size: 15px;
  color: #7d7d7d;
}
.new-issue .link-all-issue::before {
  position: absolute;
  top: -2px;
  content: "";
  width: 75px;
  height: 75px;
  background-position: 0 -259px;
}

.new-issue .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 0;
  column-gap: 20px;
}
.new-issue .list li {
  width: 273px;
}
.new-issue .list li a {
  display: block;
  position: relative;
}
.new-issue .thumb-box {
  overflow: hidden;
  margin-bottom: 10px;
}
.new-issue .thumb-box img {
  width: 100%;
  transition: transform 0.3s ease-in-out;
}
.new-issue .thumb-box img:hover {
  transform: scale(1.1);
}
.new-issue .thumb-box em {
  position: absolute;
  bottom: 55px;
  width: 82px;
  height: 32px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  z-index: 1;
}
.new-issue .list li p {
  font-size: 15px;
  width: 100%;
  height: 3em;
  line-height: 1.5em;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
}

.inner7 {
  display: flex;
  padding: 50px 0;
}
.inner7 .group-video a {
  position: relative;
  float: left;
  width: 280px;
  height: 152px;
  overflow: hidden;
}
.inner7 .group-video a img {
  transition: transform 0.3s ease-in-out;
}
.inner7 .group-video a img:hover {
  transform: scale(1.1);
}
.inner7 .group-video p {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  padding: 11px 20px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(0, 0, 0, 0.5);
}
.inner7 .group-issue {
  width: 480px;
  margin-left: 20px;
}
.inner7 .group-issue .list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inner7 .group-issue .list li {
  display: flex;
  padding: 8px 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #555555;
}
.inner7 .group-issue .list li a {
  overflow: hidden;
}
.inner7 .group-issue .list li span {
  color: #09ac43;
  margin-right: 18px;
}
.inner7 .group-issue .list li p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inner7 .group-sns {
  position: relative;
  width: 350px;
  height: 195px;
  margin-left: 22px;
  background: url("../images/seoul-bg.jpg") no-repeat 0 0;
}
.inner7 .group-sns .link-sns {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 5px;
  width: 100%;
  height: 100%;
  padding: 10px 15px;
}
.inner7 .group-sns .link-sns .headline {
  font-size: 22px;
}
.inner7 .group-sns .link-sns span {
  position: relative;
  color: #7d7d7d;
  font-size: 15px;
  font-weight: 600;
  content: "";
  width: 70px;
  height: 20px;
  line-height: 20px;
  background-position: -5px -258px;
}
.inner7 .group-sns .list {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 303px;
  left: calc((100% - 303px) / 2);
  top: 90px;
}
.inner7 .group-sns .list [class*="link-"]::before {
  display: block;
  content: "";
  width: 40px;
  height: 40px;
}
.inner7 .group-sns .link-facebook::before {
  background-position: -40px 0;
}
.inner7 .group-sns .link-instagram::before {
  background-position: 0 0;
}
.inner7 .group-sns .link-youtube::before {
  background-position: -160px 0;
}
.inner7 .group-sns .link-twiter::before {
  background-position: -80px 0;
}
.inner7 .group-sns .link-naverblog::before {
  background-position: -120px 0;
}
.inner7 .group-sns .link-kakaostory::before {
  background-position: -200px 0;
}
.inner7 .group-sns .link-kakaotalk::before {
  background-position: -240px 0;
}

.inner8 {
  position: relative;
  padding: 50px 0 75px;
  border-top: 2px solid #222;
}
.inner8 .swiper {
  width: 100%;
  height: 152px;
}
.inner8 .swiper img {
  width: 100%;
}
.inner8 .banner-control {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 5px;
  z-index: 1;
}
.inner8 .banner-control .swiper-pagination {
  left: auto;
  top: 4px;
  right: 45px;
  pointer-events: none;
}
.inner8 .banner-control .control-area {
  display: flex;
  width: 62px;
  height: 21px;
  border: 1px solid #999;
  margin-left: 5px;
}
.inner8 .control-area button {
  width: 20px;
  height: 20px;
}
.inner8 .control-area .btn-prev-banner {
  border-right: 1px solid #999;
  background-position: -45px -43px;
}
.inner8 .control-area .btn-pauseOrPlay {
  border-right: 1px solid #999;
  background-position: -65px -43px;
}
.inner8 .control-area .btn-pauseOrPlay.click {
  background-position: -101px -43px;
}
.inner8 .control-area .btn-next-banner {
  background-position: -86px -43px;
}

.related-site {
  position: relative;
  margin-bottom: 20px;
}
.related-site .site-list {
  display: flex;
}
.related-site .site-item {
  flex: 1;
  background: #f7f7f7;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #333;
  z-index: 2;
}
.related-site .site-item:first-child {
  border-left: 1px solid #d0d0d0;
}
.related-site .site-item .btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 0;
}
.related-site .site-item .btn-menu.active {
  background-color: #e2e2e2;
}
.related-site .site-item .menu-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-style: solid;
  border-color: #373737;
  border-width: 0px 2px 2px 0px;
  margin-left: 10px;
  margin-top: 5px;
  transform: rotate(-135deg);
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform-origin: center center;
}
.related-site .site-item .menu-toggle.rotate-icon::after {
  transform: rotate(45deg);
  margin-top: -2px;
}
.related-site .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: 47px;
  width: 100%;
  height: 227px;
  background: #fff;
  padding: 10px 20px 20px;
  border: 1px solid #d0d0d0;
  overflow: hidden;
  z-index: 1;
}
.related-site .sub-menu .sub-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 1fr);
}
.related-site .sub-menu .sub-item {
  margin-top: 14px;
}