#wrapper {overflow:visible;}
body {box-sizing:border-box; height:auto; min-height:100%; overflow-y:auto; background:#E9F2FF; }
.title-box{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;white-space:nowrap}
.title-box .title{font-family:var(--Score);font-weight:var(--fontweight-regular);font-size:18px;color:#394458}
.title-box .date{font-size:11px;color:#6C6C6C}

.wrapwrap {position:relative; display:flex; margin: 0 auto;}
#grid-left {background:#D6E7FF; width:100%;  min-height: 970px; display: inline-block; border-bottom-right-radius:70px; font-family: var(--Score); font-weight:300; line-height:normal;}
.content-wrap { width:700px; height:auto; display:flex; justify-content: space-between; z-index: 1; margin: 0 auto;}
.content-box {width:340px; display: flex; align-items: center; flex-direction: column; white-space: nowrap;}
.content-box .title-wrap {width:100%; display: flex;justify-content: space-between;     align-items: baseline;margin-bottom:5px;}
.content-box .title {font-weight: var(--fontweight-medium); font-size: 20px; color: #272f3c;}
.content-box .date {font-size: 11px; color: #6C6C6C;}
.sub-box {width:100%; background:#fff; border-radius:30px; display:flex;flex-wrap:wrap; box-sizing: border-box; padding:10px}

.item-box {width:155px; height: 75px; padding: 14px; box-sizing: border-box; display: flex; align-items: center;}

#msfrtnSafe .item-box,
#trnsportSttus .item-box {
	cursor: pointer;
}

#msfrtnSafe .item-box:hover,
#trnsportSttus .item-box:hover {
    background-color: #e8f4fd;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
    transition: all 0.2s ease;
}
.item-box:nth-of-type(1) {border-bottom:1px solid #DDEBFF; border-right:1px solid #ddebff;}
.item-box:nth-of-type(2) {border-bottom:1px solid hsl(215, 100%, 93%);}
.item-box:nth-of-type(3) { border-right:1px solid #ddebff;}
.item-box .main {height: 50px; width: 50px; display:inline-block; margin-right:10px;  background: no-repeat left center / 42px 42px;}
.item-box .text-box {display:inline-block; vertical-align: super;}
.item-box .title {font-weight: var(--fontweight-regular); color: #394458;box-sizing: border-box; font-size:14px;}
.item-box .count {color: #6C6C6C; font-size: 12px;}
.item-box .count i { font-size: 20px; font-weight: var(--fontweight-medium); margin-right: 6px; letter-spacing: -0.1px;}
.color-green {color:#00A73C;}
.color-blue {color:#4584FF;}
.color-pink {color:#E6007E;}

#map-container{width:100%;position:relative; display: flex; justify-content: center;}
#map-container .icon-explain{position:absolute;bottom:0; transform: translate(290px, 0); display: none; z-index: 900;}
#map-container .icon-explain.active{display: block;}
#map-container .icon-explain ul{display:flex;flex-direction:column;gap:16px}
#map-container .icon-explain ul li span{display:inline-block;padding-left:26px;box-sizing:border-box;font-weight:var(--fontweight-regular);background:no-repeat left center/23px 26px;color:#858585;height:26px;line-height:24px; font-size: 15px;}
#map-container #svg-map .map-label{position: absolute; transform: translate(0%, -101%);}
/*#map-container #svg-map .map-label{position:absolute; top:0; display:flex; justify-content:center; width: 693px; height: 640px; margin-top: 50px;}*/
#map-container #svg-map .map-label .map-content{position:relative; width: 543px; height: 634px;}
 
#map-container #svg-map{padding-top:50px; position: relative; width: 100%; min-width: 543px; max-width: 543px;}
#map-container #svg-map svg path:hover{stroke:var(--color-yellow);stroke-width:5px}
#map-container #svg-map svg path{z-index:999;}
#map-container #svg-map .ico-box{position:absolute;white-space:nowrap;text-align:center;pointer-events:none}
#map-container #svg-map .ico-box .icon{position: absolute;top: -19px;left: -6px;
transform: translate(-30%, -50%);display:inline-block; width:36px;height:44px;font-size:0;background-size:100% 100%}
#map-container #svg-map .ico-box .icon+.icon{margin-left:35px}

#map-container #svg-map .ico-box .location{display:block;margin-top:10px;color:#272f3c;font-family:var(--pretendard);font-weight:var(--fontweight-medium)}
#map-container #svg-map .ico-box.el-1 { top: 85px; left: 200px; }
#map-container #svg-map .ico-box.el-2 { top: 140px; left: 60px; }
#map-container #svg-map .ico-box.el-3 { top: 250px; left: 39px; }
#map-container #svg-map .ico-box.el-4 { top: 95px; left: 390px; }
#map-container #svg-map .ico-box.el-5 { top: 290px; left: 78px; }
#map-container #svg-map .ico-box.el-6 { top: 265px; left: 150px; }
#map-container #svg-map .ico-box.el-7 { top: 185px; left: 260px; }
#map-container #svg-map .ico-box.el-8 { top: 250px; left: 290px; }
#map-container #svg-map .ico-box.el-9 { top: 285px; left: 410px; }
#map-container #svg-map .ico-box.el-10 { top: 475px; left: 380px; }
#map-container #svg-map .ico-box.el-11 { top: 415px; left: 280px; }
#map-container #svg-map .ico-box.el-12 { top: 405px; left: 90px; }
#map-container #svg-map .ico-box.el-13 { top: 290px; left: 270px; }
#map-container #svg-map .ico-box.el-14 { top: 325px; left: 218px; }
#map-container #svg-map .ico-box.el-15 { top: 355px; left: 115px; }
#map-container #svg-map .ico-box.el-16 { top: 425px; left: 155px; }
#map-container #svg-map .ico-box.el-17 { top: 350px; left: 164px; }
#map-container #svg-map .ico-box.el-18 { top: 375px; left: 190px; }
#map-container #svg-map .ico-box.el-19 { top: 410px; left: 190px; }
#map-container #svg-map .ico-box.el-20 { top: 393px; left: 135px; }

.indic{position:absolute;bottom:0;transform:translate(-315px, 0); width:50px; }
.map-btn-group ul {position: relative;}
.map-btn-group ul:before {content: ""; position: absolute; top: 0; bottom: 0;left: 50%; width: 1px; height: auto; background: #6584b4;  opacity: .4; z-index: 0;}
.map-btn-group ul li {margin-bottom: 10px; }
.map-btn-group ul li a{background-size:100%;}
.map-btn-group ul li p {font-size:12px;}
.map-btn-group ul li:nth-child(2) a {background-image: url(/images/main/map_btn_ico_01_off.png);}
.map-btn-group ul li.on:nth-child(2) a {background-image: url(/images/main/map_btn_ico_01_on.png);}
.map-btn-group ul li:nth-child(3) a {background-image: url(/images/main/map_btn_ico_02_off.png);}
.map-btn-group ul li.on:nth-child(3) a {background-image: url(/images/main/map_btn_ico_02_on.png);}
.map-btn-group ul li:nth-child(4) a {background-image: url(/images/main/map_btn_ico_03_off.png);}
.map-btn-group ul li.on:nth-child(4) a {background-image: url(/images/main/map_btn_ico_03_on.png);}
.map-btn-group ul li:nth-child(5) a {background-image: url(/images/main/map_btn_ico_04_off.png);}
.map-btn-group ul li.on:nth-child(5) a {background-image: url(/images/main/map_btn_ico_04_on.png);}
.map-btn-group ul li:nth-child(1) a {background-image: url(/images/main/map_btn_ico_05_off.png);}
.map-btn-group ul li.on:nth-child(1) a {background-image: url(/images/main/map_btn_ico_05_on.png);}
/* .map-btn-group ul li a::before, .map-btn-group ul li a::after {position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; content: ''; opacity: 0;  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;  -moz-transition: -moz-transform 0.3s, opacity 0.3s;  transition: transform 0.3s, opacity 0.3s;  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);  -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);  transform: translateX(-50%) translateY(-50%) scale(0.2);}
.map-btn-group ul li a::after { width: 90px; height: 90px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);  transform: translateX(-50%) translateY(-50%) scale(0.8);}
.map-btn-group ul li a:hover:before, .map-btn-group ul li a:hover:after, .map-btn-group ul li a:focus:before, .map-btn-group ul li a:focus:after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1);  -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1);} */
.map-btn-group ul li a {position: relative; display: block; text-align: center;  padding-top: 55px; background-position: center top;  background-repeat: no-repeat; z-index: 1;   transition: all .3s;}




/*2025-08-29*/
.left-wrap { padding:30px; padding-top:20px;}
.grid-right {width:100%; font-family: var(--Score); font-weight: 300; line-height: normal; display: flex;}
.grid-right .main-wrap { width:550px; box-sizing: border-box;padding:20px 30px 0px 30px; display: inline-block;}
.grid-right .content-box {width:100%; display: flex; align-items: center; flex-direction: column; white-space: nowrap;}
.grid-right .content-box .title-wrap {width:100%; display: flex;justify-content: space-between;     align-items: baseline;margin-bottom:5px;}
.grid-right .content-box .title {font-weight: var(--fontweight-medium); font-size: 20px; color: #272f3c;}
.grid-right .content-box .date {font-size: 11px; color: #6C6C6C;}
.grid-right .status-population{width:100%; height:240px; background:#fff; border-radius:30px; display:flex;flex-wrap:wrap; box-sizing: border-box; padding:10px;}
.grid-right .status-population .pop-total {width:100%; height:50%;text-align:center; justify-content: center; margin-top:10px;}


.grid-right .sub-box {width:100%; border-radius:30px; display:flex;flex-wrap:nowrap; box-sizing: border-box; padding:10px; justify-content: center;}

.grid-right .item-box {width:155px; height: 75px; padding: 14px; box-sizing: border-box; display: flex;  align-items: center;  justify-content: center;}
.grid-right .item-box:nth-of-type(1) {border:none !important}
.grid-right .item-box:nth-of-type(2) {border-left:1px solid hsl(215, 100%, 93%); border-bottom:none;}
.grid-right .item-box:nth-of-type(3) { border-left:1px solid #ddebff; border-right:none;}
.grid-right .item-box .main {height: 50px; width: 50px; display:inline-block; margin-right:10px;  background: no-repeat left center / 42px 42px;}
.grid-right .item-box .text-box {display:inline-block; vertical-align: super;}
.grid-right .item-box .title {font-weight: var(--fontweight-regular); color: #394458;box-sizing: border-box; font-size:14px;}
.grid-right .item-box .count {color: #252525; font-size: 12px;}
.grid-right .item-box .count i { font-size: 20px; font-weight: var(--fontweight-medium); margin-right: 6px; letter-spacing: -0.1px;}

.percentage {font-size:14px; }
.text-large {font-size:30px !important; font-weight: 600 !important;}
.main-content { width:340px; height:auto; padding-top:110px; display:flex; justify-content: space-between; z-index: 1;}

.grid-right .total-box {width:155px; height: 75px; padding: 14px; box-sizing: border-box; display: flex;  align-items: center;  justify-content: center;}
.grid-right .total-box .icon{height: 100px; width: 100px; display: inline-block;   margin-right: 15px; background: no-repeat left center / 42px 42px; background-size:100%;}
.grid-right .sub-box .text-box {text-align:center;}
.grid-right .text-box .small  {display:inline-block; vertical-align:middle; background:no-repeat left center; background-size:100%; width:14px; height:14px; margin-right:5px;}

/*메인-인구지표*/
.indicator-wrap {flex-direction: column; display:flex; font-family: var(--Score);}
.indicator-wrap button {font-family: var(--Score);}
.indicator-tabs {display:flex; align-items:center; gap:8px; padding-bottom:10px;}
.js-tab { padding:12px 20px; border-radius:10px; border:1px solid #d7dbe3;
  font-size:18px; font-weight:500; color:#93979D; line-height:1; cursor:pointer;}
.js-tab.is-active {background:#E6007E; border-color:#E6007E; color:#fff;
  box-shadow:0 2px 8px rgba(255,90,138,0.25);}

.js-panel {margin-top:10px; width:100%; height:auto; display: flex; flex-wrap: wrap; gap: 16px; margin: 0 auto;}

.js-panel .box-wrap {text-align:center; display:flex; flex-direction:column; align-items: center; justify-content: center; height: 100%; position: relative;}
.js-panel .box-wrap .sub-title {position: absolute; top: 5px; left: 66px; font-size: 11px; color: #6C6C6C; width: 60px;}
.js-panel img {width:50px;}
.js-panel p {font-size:18px; font-weight:500; padding-top:5px;}
.population-box {height:140px;background:#fff; border-radius:30px; display:flex; justify-content: center; flex-direction: column; align-items: center; min-height:120px; overflow:hidden;  flex: 1 1 calc(50% - 16px); /* 2열 크기 계산 */}
.blue-bottom {background:#003894; width:100%; text-align: center; color:#fff;  margin-top: auto; padding:10px; box-sizing: border-box; font-size:12px;}
.large-font {font-size:24px; font-weight:500; margin-right:5px;}
.box-shadow { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08);}
.indicator-tabs .date {font-size: 11px; color: #6C6C6C; margin-left:auto; margin-top: auto;}

.civil-service {width:100%; height:auto;background:#fff; border-radius:30px; display: flex;  flex-wrap: wrap;  gap: 10px;margin: 0 auto; padding:15px; box-sizing:border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08);}
.civil-service-box {height:auto; display:flex; justify-content: center; flex-direction: column; align-items: center; min-height:120px; flex: 1 1 calc(50% - 16px); text-align: center;}
.civil-service img {width:50px;}
.civil-service p {font-size:16px; font-weight:400; padding-top:5px;}
.civil-service-box:nth-child(1) {border-right:1px solid #ddebff;}
.gray-box {font-size:12px; color:#515151; background:#efefef; padding:5px 15px; border-radius:5px; margin:0 auto;}

.civil-service-graph {width:100%; height:275px;}
.civil-service-graph img {width:90%; margin:0 auto;}

.civil-service-graph > div:first-child {display: flex; justify-content: center;}

/* 탭 버튼 영역 */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    position: relative;
    left: 334px;
}

.tab-btn {
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 6px;
    background-color: #f0f0f0;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
}

.tab-btn:hover {
    background-color: #e0e0e0;
}

.tab-btn.active {
    background-color: #4CAF50;
    color: #fff;
    font-weight: 600;
}

.civil-service-keyword {display: flex; flex-wrap:wrap; height:100px; overflow-x: hidden; overflow-y: auto; }
.civil-service-keyword span {border-radius: 20px; padding:5px 10px; border:1px solid #1998FF; color:#1998FF; margin:10px 3px 0px 3px; font-size:16px; font-weight:400;}
.civil-service-keyword .top {background:#1998FF; color:#fff; position:relative}
.civil-service-keyword .top::before {content:"";}
.civil-service-keyword .badge {position: absolute; top: -20px; left: 50%;  transform: translateX(-50%);  background: #ff3b82; border: #ff3b82;   color: #fff;  font-size: 8px; font-weight: 500;  padding: 2px 6px;  border-radius: 10px;  white-space: nowrap;}

.mo{position: relative;}
.slider {display:flex;align-items:center; width: 100%;}
.slider button{display:inline-block;width:46px;height:46px;background:url(/images/main/ico_navi.png) no-repeat center/100%;font-size:0}
.slider button:last-child{transform:rotate(180deg)}
/*
.slider .swiper-navigation-box{position: absolute;  z-index: 3;  top: 20px; left: 0;  right: 0; display: flex; padding:5px; justify-content: space-between;  align-items: center; }
.slider .swiper-navigation-box button{display:inline-block;width:25px;height:25px;font-size:0;background:no-repeat center/100%;cursor:pointer;border:none}
.slider .swiper-navigation-box button.swiper-navi-prev{background-image:url(/images/main/ico_navi_prev.png)}
.slider .swiper-navigation-box button.swiper-navi-next{background-image:url(/images/main/ico_navi_next.png); }
*/
.slider .institution{overflow:hidden; width:100%; position:relative;}
.slider .institution ul{counter-reset:list-counter; display: flex; justify-content: center; align-items: center;}
.slider .institution ul li{background-color:#fff;border-radius:10px;  display:inline-block; margin-right:5px;}
.slider .institution ul li a{display:block;color:#fff; padding:7.5px 8px;box-sizing:border-box; width:145px; height:70px;}
.slider .institution ul li img {height:100%; width:100%; object-fit: contain;
  display: block; padding:10px; box-sizing: border-box; }

.slider .swiper-navigation-box button { cursor: pointer;  border-radius: 50%;  transition: transform 0.2s ease, box-shadow 0.2s ease;}
.slider .swiper-navigation-box button:hover { transform: scale(1.1);   box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.character_namyangju {position:absolute; top:-60px; right:0; z-index:3; width:160px;}

::-webkit-scrollbar { width: 6px; height: 6px;}
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px;}
::-webkit-scrollbar-track { background: transparent;}
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;}

.mb-1 {margin-bottom:10px}
.mb-2 {margin-bottom:0px}
.mb-3 {margin-bottom:20px}
.mb-5 {margin-bottom:50px}
.icon.ptotal{background-image:url(/images/main/ico_poptotal.png)!important}
.icon.up{background-image:url(/images/main/icon_up.png)!important}
.icon.down{background-image:url(/images/main/icon_down.png)!important}
.icon.no{background-image:url(/images/main/icon_nochange.png)!important}

.chart-div{position: relative;width: 490px;height: 180px;}

.bicycle-bg {
	background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 0;
    display: none;
}
.bicycle-bg.active {
	display: block;
}

.detail-box {
	position: relative;
	text-align: right;
    width: 100%;
}

.detail-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-btn:hover {
    background-color: #e8e8e8;
    color: #333;
    transform: translateY(-1px);
}

.detail-btn:active {
    transform: translateY(0);
}

.temp-box {
	position: relative;
	text-align: center;
    width: 100%;
    height: 0px;
    font-size: 12px;
    font-weight: 500;
}

#map-cover {
	position: absolute;
	width: 810px;
	height: 100%;
	background-color: black;
	opacity: 0.5;
	top: 0;
    left: 0;
    border-bottom-right-radius: 70px;
}