#main-container{gap:14px; margin-top:20px; display: block; width: calc(100% - 80px)}
#main-container .main-title {font-size:20px; font-weight:600; font-family: var(--Score); color:#272f3c; display:flex; align-items: center; margin-top: 10px; margin-bottom: 20px;}
#main-container .main-title:before{content: ""; display:inline-block; width:3px; height:20px; background-color:#00A73C; margin:0 10px;}
.main-box {display: flex; justify-content:center;}

.cbx {display:flex;flex-direction:column;gap:16px;width:376px; margin: 0 20px;}
.cbx .tab-menu{display:flex;align-items:center;border-radius:14px;background-color:#EDF3FC;overflow:hidden;margin-bottom:10px}
.cbx .tab-menu button{width:50%;height:52px;line-height:52px;text-align:center;font-size:18px;font-weight:var(--fontweight-regular);color:#828282;border-radius:14px}
.cbx .tab-menu button.active{background-color:#00A73C; color:#fff;}
.cbx .cbx-content{border-radius:13px; background-color:#fff;padding:18px 16px 16px;box-sizing:border-box; height:440px;}
.cbx .cbx-content:last-child{flex:1}
.cbx .cbx-content.st-1{display:flex;flex-direction:column;padding-right:0;padding-bottom:0;height:384px}
.cbx .cbx-content.st-1 .pr{padding-right:16px;box-sizing:border-box}
.cbx .cbx-content.st-1 .data-list{padding-right:32px;background-color:transparent}
.cbx .cbx-content.st-1 .data-list ul li .list-item .title-box{gap:24px}
.cbx .cbx-content.st-1 .data-list ul li .list-item .name{font-weight:var(--fontweight-light)}
.cbx .cbx-content .graph-wrapper{display:flex;align-items:start;flex-direction:column;background-color:#394458;border-radius:4px}
.cbx .cbx-content .graph-wrapper .inbox-tab-menu{display:inline-block;background-color:#0593ff;border-radius:14px;margin:20px 0 63px 20px}
.cbx .cbx-content .graph-wrapper .inbox-tab-menu button{padding:12px 13.5px 12px 16px;box-sizing:border-box;font-weight:var(--fontweight-regular);color:#fff}
.cbx .cbx-content .graph-wrapper .graph-box{padding:0 10px 33px;box-sizing:border-box}
.cbx .cbx-content .tab-content{display:none}
.cbx .cbx-content .tab-content.active{display:block}
.cbx .cbx-content .tab-content.empty{display:none;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-size:14px;color:#717A8E; margin-top:100px;}
.cbx .cbx-content .tab-content.empty.active{display:flex}
.cbx .cbx-content .data-list{height:345px; border-top:1px solid #eee; padding:10px;box-sizing:border-box; overflow:auto; }
.cbx .cbx-content .data-list.active{display:block}
.cbx .cbx-content .data-list ul{flex:1; min-height:300px;}
.cbx .cbx-content .data-list ul li+li{margin-top:15px}
.cbx .cbx-content .data-list ul li .list-item{display:flex;justify-content:space-between;font-size:14px;gap:11px}
.cbx .cbx-content .data-list ul li .list-item.active .title-box .name,.cbx .cbx-content .data-list ul li .list-item:hover .title-box .name{color:var(--color-blue)}
.cbx .cbx-content .data-list ul li .list-item.active .btn-view,.cbx .cbx-content .data-list ul li .list-item:hover .btn-view{background-color:#0593ff}
.cbx .cbx-content .data-list ul li .list-item .title-box{display:flex;gap:8px;line-height:20px;font-size: 14px; flex:1; align-items:center;}
.cbx .cbx-content .data-list ul li .list-item .title-box .org{color:#fff;white-space:nowrap; background:var(--color-blue); border-radius: 50px; padding:2px 12px; flex-shrink:0;}
.cbx .cbx-content .data-list ul li .list-item .title-box .name{color:#494949;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;flex:1;word-break:break-all;}
.cbx .cbx-content .data-list ul li .btn-box{text-align:right}
.cbx .cbx-content .data-list ul li .btn-box .btn-list-more{display:inline-block;width:72px;height:24px;background:url(/images/sub/btn_more.png) no-repeat center/100%;font-size:0}
.cbx .cbx-content .data-list ul li .btn-box .btn-list-more.active,.cbx .cbx-content .data-list ul li .btn-box .btn-list-more:hover{background-image:url(/images/sub/btn_more_active.png)}
.cbx .info-box .title.cctv-count-title{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 14px;border-bottom:2px solid #eee;margin-bottom:0}
.cbx .info-box .title.cctv-count-title .count-label{font-size:15px;font-weight:var(--fontweight-regular);color:#494949}
.cbx .info-box .title.cctv-count-title .count-value{font-size:14px;font-weight:var(--fontweight-regular);color:#7a7f8c}
.cbx .info-box .title.cctv-count-title .count-value em{font-size:20px;font-weight:var(--fontweight-medium);color:#00A73C;margin-right:2px;font-style:normal}
.cbx .info-box .status{border-radius:4px;border-top:none;}
.cbx .status-graph-box{flex:1}
.cbx .status-graph-box #status-graph{border-radius:4px;overflow:hidden}
#map-container{position:relative;max-width:1490px;flex:1; min-height:900px;border-radius:13px;overflow:hidden}
.map{width: 100%; height: 100%;}
#map-container .ico-explain{position:absolute;bottom:28px;right:36px;width:108px;padding:12px 16px 16px;box-sizing:border-box;border:1px solid #d9d9d9;background-color:#fff;border-radius:11px;z-index:1}
#map-container .ico-explain ul li+li{margin-top:20px}
#map-container .ico-explain ul li span{display:block;font-weight:var(--fontweight-regular);background:no-repeat left center/19px 22px;padding-left:23px;box-sizing:border-box;height:22px;line-height:22px;color:#4e545e}
#map-container .ico-explain.env{width:auto;padding:17px 15px}
#map-container .ico-explain.env ul li span{height:20px;line-height:20px;padding-left:27px;background-size:20px 20px}
#map-container .ico-explain.env ul li:nth-child(1) span{color:#037cf4;background-image:url(/images/sub/ico_good.png)}
#map-container .ico-explain.env ul li:nth-child(2) span{color:#5dad3f;background-image:url(/images/sub/ico_normal.png)}
#map-container .ico-explain.env ul li:nth-child(3) span{color:#ff8a3b;background-image:url(/images/sub/ico_bad.png)}
#map-container .ico-explain.env ul li:nth-child(4) span{color:#ff828f;background-image:url(/images/sub/ico_very_bad.png)}
#map-container .ico-explain.cctv{padding:17px 14px;width:auto}
#map-container .ico-explain.cctv ul li span{color:#4e545e}
#map-container .ico-explain.cctv ul li:nth-child(1) span{background-image:url(/images/sub/ico_fixed_cam.png)}
#map-container .ico-explain.cctv ul li:nth-child(2) span{background-image:url(/images/sub/ico_control_cam.png)}
#map-container .env-status-box{position:absolute;border-radius:10px;background-color:#3a4459;border:1px solid #404f68;padding:20px 16px;box-sizing:border-box;z-index:1;width:284px}
#map-container .env-status-box .flex{display:flex;align-items:center;justify-content:space-between}
#map-container .env-status-box .title{font-weight:var(--fontweight-regular);color:#fff;margin-bottom:12px}
#map-container .env-status-box .number{font-size:32px;font-weight:var(--fontweight-medium)}
#map-container .env-status-box .unit{font-size:14px}
#map-container .env-status-box .env-icon{height:42px;line-height:42px;font-weight:var(--fontweight-medium);background:no-repeat left center/42px 42px;padding-left:48px;box-sizing:border-box}
#map-container .env-status-box.bad .env-icon{background-image:url(/images/sub/ico_env_bad.png);color:#ff8a3b}
#map-container .env-status-box.bad .number,#map-container .env-status-box.bad .unit{color:#ff8a3b}
#map-container .env-status-box.good .env-icon{background-image:url(/images/sub/ico_env_good.png);color:#6abfff}
#map-container .env-status-box.good .number,#map-container .env-status-box.good .unit{color:#6abfff}
#map-container .env-status-box.normal .env-icon{background-image:url(/images/sub/ico_env_normal.png);color:#8aea66}
#map-container .env-status-box.normal .number,#map-container .env-status-box.normal .unit{color:#8aea66}
#map-container .env-status-box.very-bad .env-icon{background-image:url(/images/sub/ico_env_very_bad.png);color:#ff828f}
#map-container .env-status-box.very-bad .number,#map-container .env-status-box.very-bad .unit{color:#ff828f}
#map-container .env-status-box.el-1{top:252px;left:218px}
#map-container .env-status-box.el-2{top:355px;left:598px}
#map-container .env-status-box.el-3{top:425px;left:218px}
#map-container .env-status-box.el-4{top:485px;left:628px}
#map-container .toggle-box{position:absolute;width:318px;top:26px;right:26px;z-index:1;border-radius:8px;background-color:#fff;border:1px solid #eee;overflow:hidden}
#map-container .toggle-box ul li+li{border:1px solid #eee}
#map-container .toggle-box ul li .toggle-content{display:flex;align-items:center;justify-content:space-between;padding:12px 10px 12px 14px;box-sizing:border-box;height:43px}
#map-container .toggle-box ul li .toggle-content.st-1{padding:8px 10px 12px 14px}
#map-container .toggle-box ul li .toggle-content .title{height:20px;line-height:20px;font-size:14px;font-weight:var(--fontweight-regular);color:#494949;padding-left:26px;box-sizing:border-box;background:no-repeat left center/20px 20px}
#map-container .toggle-box ul li .toggle-content .title.citizen{background-image:url(/images/sub/ico_citizen.png)}
#map-container .toggle-box ul li .toggle-content .title.totalCount{background-image:url(/images/sub/ico_citizen.png)}
#map-container .toggle-box ul li .toggle-content .title.mag{background-image:url(/images/sub/ico_mag.png)}
#map-container .toggle-box ul li .toggle-content .title.public{background-image:url(/images/sub/ico_public_lnb_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.school{background-image:url(/images/sub/ico_school_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.welfare{background-image:url(/images/sub/ico_welfare_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.hospital{background-image:url(/images/sub/ico_hospital_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.pharmacy{background-image:url(/images/sub/ico_pharmacy_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.kids{background-image:url(/images/sub/ico_kids_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.pbhlth{background-image:url(/images/sub/ico_center_health_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.park{background-image:url(/images/sub/ico_park_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.garosu{background-image:url(/images/sub/ico_garosu_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.shelter{background-image:url(/images/sub/ico_shelter_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.cvpl{background-image:url(/images/sub/ico_complaint_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.hsmp{background-image:url(/images/sub/ico_house_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.industry{background-image:url(/images/sub/ico_industry_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .title.industry_place{background-image:url(/images/sub/ico_industry_place.png)}
#map-container .toggle-box ul li .toggle-content .title.cctv{background-image:url(/images/sub/ico_security_lt.png);background-position:0px center;background-size:20px 24px;height:24px;line-height:24px}
#map-container .toggle-box ul li .toggle-content .switch-box{display:flex;align-items:center;gap:8px}
#map-container .toggle-box ul li .toggle-content .switch-box label{display:inline-block;width:36px;height:20px;background:url(/images/sub/ico_switch_off.png) no-repeat center/100%;font-size:0;cursor:pointer}
#map-container .toggle-box ul li .toggle-content .switch-box input:checked+label{background-image:url(/images/sub/ico_switch_on.png)}
#map-container .toggle-box ul li .toggle-content .switch-box button{display:inline-block;width:20px;height:20px;font-size:0;background:url(/images/sub/ico_delete.png) no-repeat center/100%}
#map-container .standard{position:absolute;right:26px;bottom:40px;width:318px;padding:18px 16px 16px;box-sizing:border-box;border:1px solid #d9d9d9;background-color:#fff;border-radius:8px; z-index:2;}
#map-container .standard .title{margin-bottom:9px;font-size:14px;color:#595757}
#map-container .standard .title span{font-weight:var(--fontweight-medium)}
#map-container .standard .title span.date{margin-left:6px}
#map-container .standard .bar.residnt1{border-radius:9px;height:29px;background-image:linear-gradient(90deg, #00DCFF, #07B3FC, #0D8CFA, #1460F7, #1844F5);margin-bottom:7px}
#map-container .standard .bar.residnt2{border-radius:9px;height:29px;background-image:linear-gradient(90deg, #FFEE00, #E1E401, #B8D702, #90CA03, #64BB05);margin-bottom:7px}
#map-container .standard .bar.residnt3{border-radius:9px;height:29px;background-image:linear-gradient(90deg, #FF8BF3, #DC78F3, #B462F4, #884AF5, #805BFF);margin-bottom:7px}
#map-container .standard .bar.residnt4{border-radius:9px;height:29px;background-image:linear-gradient(90deg, #FEE593, #F3B47C, #E67C63, #DB4B4D, #CF1535);margin-bottom:7px}
#map-container .standard .bar.residnt5{border-radius:9px;height:29px;background-image:linear-gradient(90deg, #FFCBA4, #FF9A6C, #FF6B3D, #E8431E, #C41E00);margin-bottom:7px}
#map-container .standard .bar.lv2{border-radius:9px;height:29px;background-image: linear-gradient(90deg, #00FF90, #04D683, #08AB76, #0C856A, #116A67);margin-bottom:7px}
#map-container .standard .bar.lv3{border-radius:9px;height:29px;background-image: linear-gradient(90deg, #54FC2B, #46E12A, #35C028, #229B26, #107825);margin-bottom:7px}
#map-container .standard .bar.lv4{border-radius:9px;height:29px;background-image: linear-gradient(90deg, #D1CCFF, #9994ED, #6B66DE, #3B36CF, #342FD8);margin-bottom:7px}
#map-container .standard .bar.lv5{border-radius:9px;height:29px;background-image: linear-gradient(90deg, #FFB347, #E8952E, #D07818, #B85A06, #9E3F00);margin-bottom:7px}
#map-container .standard .count{display:flex;align-items:center;justify-content:space-between}
#map-container .standard .count span{font-size:11px;color:rgba(72,72,72,.9215686275)}

.line-wrap {border:1px solid #B9B9B9; position:absolute;top:370px; left:400px;}
.map-popup-layer {min-width:300px; height:auto; background:rgb(255, 255, 255); padding:15px; border-top:5px solid var(--color-green); }
.map-popup-layer::before { border-color: #B9B9B9 transparent;  border-style: solid;  border-width:  12px 12px 0px 9.5px;  content: '';  display: block;  left: 50%;  position: absolute;  bottom: -13px;  width: 0;  z-index: 0;}
.map-popup-layer::after {border-color: #fff transparent; border-style: solid;  border-width: 12px 12px 0px 9.5px;  content: '';  display: block;  left: 50%;  position: absolute;  bottom:-12px;  width: 0;  z-index: 1; }
.map-popup-layer p {font-size:20px; font-weight:600; margin-bottom:10px;}
.map-popup-layer .gray-box {background:#eee; border-radius: 15px; padding:15px;}
.map-popup-layer .gray-box .text {display: flex; align-items: center; font-size:17px; padding:8px;}

.map-popup-layer .gray-box .text .title {font-weight:500; min-width:120px;}
.map-popup-layer .gray-box .text .sub {min-width:150px;}

#rbx-container{width:460px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;margin-left: 10px;}
#rbx-container .graph-box{background-color:#FFFFFF;border-radius:4px;overflow:hidden}
#rbx-container .source{display:block;text-align:right;font-size:11px;color:#999;padding:4px 10px 0}
.search-box{display:flex;flex-direction:column;width:350px;height:900px;border-radius:13px;border:1px solid #fff;background-color:#fff;padding:26px 0 26px 26px;box-sizing:border-box; margin-right: 10px;}
.search-box .pr{padding-right:26px;box-sizing:border-box; width: 300px;}
.search-box .title{font-size:18px;font-weight:var(--fontweight-regular);color:#494949;margin-bottom:12px}
.search-box .result{font-size:14px;font-weight:var(--fontweight-regular);color:#00A73C;margin-bottom:10px}
.search-box .quote{font-size:10px;color:rgba(255,255,255,.7607843137);margin-bottom:26px;font-weight:var(--fontweight-light)}
.search-form{position:relative;margin-bottom:12px}
.search-form input{display:block;width:100%;border-radius:8px;padding:13px 40px 13px 10px;box-sizing:border-box;border:none;color:#494949;font-size:14px;background-color:#EDF3FC;font-weight:var(--fontweight-light)}
.search-form input::-moz-placeholder{color:#8B939C;}
.search-form input::placeholder{color:#8B939C;}
.search-form .btn-search{position:absolute;width:20px;height:20px;top:50%;transform:translateY(-50%);right:10px;background:url(/images/sub/ico_input_search.png) no-repeat center/100%}
.search-list-title{padding:27px 16px 16px;font-weight:var(--fontweight-regular);color:var(--color-green);box-sizing:border-box}
.search-list{flex:1;overflow-y:auto;padding-right:26px;box-sizing:border-box}
.search-list.st-1{padding:0 16px 16px}
.search-list ul li+li{margin-top:10px}
.search-list ul li .search-item{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.search-list ul li .search-item .title-box {display:flex; align-items: center;}
.search-list ul li .search-item.active .title-box .name,.search-list ul li .search-item:hover .title-box .name{color:#00A73C;}
.search-list ul li .search-item.active .btn-view,.search-list ul li .search-item:hover .btn-view{background-color:#0593ff}
.search-list ul li .search-item .title-box .org{color:#00A73C;margin-right:2px; width: 92px;}
.search-list ul li .search-item .title-box .name{color:#494949; display: block; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; width:130px;}
.search-list ul li .search-item .btn-view{padding:3px 8px 4px 19px;box-sizing:border-box;border-radius:7px;color:#fff;font-size:9px;font-weight:var(--fontweight-medium);background:#5e6f93 url(/images/sub/ico_btn_view.png) no-repeat 6px center/10px 9px}
.policy-wrapper{gap:14px}
.policy-wrapper .titled-container{width:100%;flex:1;box-shadow:0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08); height:900px;}
.policy-wrapper .titled-container .title-box{padding-bottom:20px; border-bottom:1px solid #eee; width:100%; background:#fff;}
.policy-wrapper .titled-container .report-list {overflow:auto; scrollbar-width:thin;scrollbar-color:#EAECEF transparent; max-height:760px; padding: 20px;}
.policy-wrapper .titled-container .report-list ul { border-bottom: 1px solid #EDF3FC; }
.policy-wrapper .titled-container .report-list li{padding: 20px 10px 20px 10px; display:flex; justify-content: space-between;}
.policy-wrapper .titled-container .report-list li:hover, 
.policy-wrapper .titled-container .report-list li.active
 {background:rgba(0, 163, 12, 0.1); cursor: pointer;}
.policy-wrapper .titled-container .report-list li.active span:nth-of-type(1),
.policy-wrapper .titled-container .report-list li:hover span:nth-of-type(1) {font-weight:400; color:var(--color-green)}
.policy-wrapper .titled-container .report-list li span:nth-of-type(1) {    display: inline-block;  width: 100%;}
.policy-wrapper .titled-container .report-list li span:nth-of-type(2) {    display: inline-block;  width: 100%; text-align:right; font-size:14px; color:#888;}

.policy-wrapper .rbx-project-box{position:relative;display:flex; flex:4; gap:14px;margin-left:10px;}
.policy-wrapper .pdf-thumnail {display:flex; align-items: center; justify-content: center; flex-wrap: wrap; overflow: auto; height:810px; padding-left:5px;}
.policy-wrapper .thumnail-img {width:30%; height:280px; display:flex; flex-direction: column; align-items: center; margin:0px 10px 10px 0px;} 
.policy-wrapper .thumnail-img img:hover,
.policy-wrapper .thumnail-img img.active {border:1px solid var(--color-green); } 
.policy-wrapper .thumnail-img img {width:100%; height:auto; border:1px solid #ddd; }
.policy-wrapper .thumnail-img p {margin-top:10px;}

.data-box {min-height: 1080px; width: 100%}
.data-box .data-tab {width:100%; display:flex; flex-wrap: wrap; align-items:center; position:relative; margin:50px 0px;}
.data-box .data-tab:before { content: '';  display: block;  position: absolute;   left: 0;   bottom: -18px;   width: 100%;   height: 1px;  background-color: var(--color-green);  z-index: 1;background-repeat: no-repeat; bottom: -17px;}
.data-box .data-tab ul {margin: 0px; padding: 0px; list-style: none; display: flex; }
.data-box .data-tab ul li a {background:#E5EBF4; color:#555; padding:16px 25px; line-height:18px; font-size:18px; font-weight:400; text-align:center; cursor:pointer; border-color:#92979E; border-style:solid; border-width:1px 1px 0; border-radius: 10px 10px 0px 0px; margin-right:5px; z-index:2;}
.data-box .data-tab ul li a:hover {background:#D5DBE5;}
.data-box .data-tab ul li.active a {background:#fff; color:var(--color-green) !important; color: var(--color-green);  border-color: var(--color-green);  text-decoration: none;    z-index: 2; position:sticky; font-weight:500;}
.data-box .data-tab ul li.active a:after { content: ''; display: block;  position: absolute;  left: 50%;  bottom: 8px;  margin-left: -15px;  width: 30px;  height: 3px;  background-color: var(--color-green);}
.data-content {display: flex; flex-wrap: wrap; width: 100%; align-items: stretch;}
.data-content .box-1 {padding:20px; border:1px solid #ddd; background:#fff; width:calc(25% - 16px); min-width:280px; box-sizing:border-box; margin:0 8px 16px; display: flex; flex-direction: column; height: 320px;}
.data-content .box-1 .title {text-align:center; margin-bottom: 15px; flex: 1; /* display: flex; flex-direction: column; justify-content: center; */ min-height: 130px;}
.data-content .box-1 .title .bold {font-weight:500; font-family: var(--Score); font-size:18px; margin:20px 0px 10px 0px;  display: block; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
.data-content .box-1 .title .clamp-2 {line-height:1.3;  display: block; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; color:#222; min-height: 40px;}
.data-content .box-1 hr {background:#eee; height:1px; border:0; margin: 2px 0;}
.data-content .box-1 .bottom-section {flex-shrink: 0;}
.data-content .box-1 .date {margin-bottom:15px;}
.data-content .box-1 .date p:nth-of-type(1) {margin-top:15px;}
.data-content .box-1 .date p {font-size:14px; padding:5px 0px;}
.data-content .box-1 button {width:100%;border:1px solid var(--color-green); color:var(--color-green); border-radius: 10px; padding:15px; font-size:16px;}
.data-content .box-1 button:hover {background:#00A73C; color:#fff; transition:all 0.2s;}
.badge-blue {padding:5px 10px; background:#037cf4; color:#fff;border-radius: 6px; font-size:14px;}
.badge-black {padding:5px 10px; background:#111; color:#fff;border-radius: 6px; font-size:14px;}
.badge-pink {padding:5px 10px; background:#E6007E; color:#fff;border-radius: 6px; font-size:14px;}
.badge-green {padding:5px 10px; background:#00A73C; color:#fff;border-radius: 6px; font-size:14px;}

.municipal-data {border-radius: 10px; width:auto !important}
.municipal-data #lnb {border-radius: 15px;}
.municipal-content-wrap {width:100%; margin-left:20px;}
.municipal-content-wrap .search {width:100%; display:flex; align-items:center;justify-content: space-between;}
.municipal-content-wrap .datepicker {display:flex;}
.municipal-content-wrap .datepicker input {border-radius:15px; border:1px solid #EFEFEF; font-weight: var(--fontweight-light);}
.municipal-content-wrap .datepicker #datepicker {width:200px; margin-right:8px; padding:20px;}
.municipal-content-wrap .datepicker .search-txt{width:600px; padding:20px;}
.municipal-content-wrap .search-wrap{position: relative;}
.search-wrap .btn-search { position: absolute; width: 20px;  height: 20px;  top: 50%;  transform: translateY(-50%);  right: 20px;  background: url(/images/sub/ico_input_search.png) no-repeat center / 100%;}
.municipal-content-wrap .datepicker-wrap{    position: relative;}
.datepicker-wrap .btn-date { position: absolute; width: 20px;  height: 20px;  top: 50%;  transform: translateY(-50%);  right: 20px;  background: url(/images/sub/ico_input_date.png) no-repeat center / 100%;}
.municipal-content-wrap .total-number {background:#fff; padding:15px 25px; border-radius:15px; display:flex; justify-content: space-around; align-items:center; font-family:var(--Score); font-weight:400; line-height:25px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08);}
.municipal-content-wrap .total-number img {width:40px; height:40px; margin-right:15px;}
.municipal-content-wrap .total-number p:nth-of-type(2) {color:#888; font-size:14px;}
.municipal-content-wrap .data-total {color:var(--color-green); font-weight:600; font-size:25px;}
.municipal-content-wrap .data-wrap {display:flex; flex-flow: wrap;  margin-top:20px;}
.municipal-content-wrap .data-box-1 {background:#fff; padding:20px; width:260px; height:360px; box-sizing:border-box; border-radius: 20px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.08); margin:0 20px 20px 0;}
.municipal-content-wrap .data-box-1 .btn-wrap {position:relative}
.municipal-content-wrap .data-box-1 button {position: absolute; width: 30px;  height: 30px;  top: 15px;  transform: translateY(-50%);}
.municipal-content-wrap .data-box-1 .btn-img {background: url(/images/sub/ico_input_img.png) no-repeat center / 100%; right: 70px;}
.municipal-content-wrap .data-box-1 .btn-table {background: url(/images/sub/ico_input_table.png) no-repeat center / 100%; right: 35px;}
.municipal-content-wrap .data-box-1 .btn-excel {background: url(/images/sub/ico_input_excel.png) no-repeat center / 100%; right:0;}
.municipal-content-wrap .data-view {width:100%; height:212px; margin:0 auto; overflow:hidden;}
.municipal-content-wrap .data-view img {width:100%; height:auto;}
.municipal-content-wrap .data-box-1 .title {font-size:17px; font-family: var(--Score); font-weight:400; color:#292929; line-height:22px; margin-top:10px; overflow: hidden; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.view-date {display:flex;justify-content: space-between; color:#555; font-size:14px;margin-top:20px;}
.view-date span {display:flex; align-items: center;}
.view-date span img {width:12px; height:12px; margin-right:5px;}

.rbx-project-box .titled-container {
    flex: 2;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.report-placeholder {
    text-align: center;
    padding: 40px 20px;
}

.report-placeholder svg {
    color: #adb5bd;
    margin-bottom: 20px;
}
.report-placeholder .placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.report-placeholder .placeholder-desc {
    font-size: 14px;
    color: #868e96;
    line-height: 1.6;
}

#pdf-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 810px;
}

.viewer-placeholder {
    z-index: 1;
    text-align: center;
    padding: 60px 40px;
    max-width: 500px;
}

.viewer-placeholder svg {
    margin-bottom: 24px;
}

.viewer-placeholder .viewer-title {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 16px;
}

.viewer-placeholder .viewer-desc {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 32px;
    line-height: 1.6;
}

.viewer-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 8px;
}

.viewer-features .feature-item {
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
    line-height: 1.5;
}

    #popltnTable {
      padding: 20px;
    }

    /* 행 스타일 */
    .table-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      padding: 14px 10px;
    }

    .table-row:last-child {
      border-bottom: none;
    }

    /* 셀 스타일 */
    .cell-label {
      color: #666;
      font-weight: 500;
      font-size: 14px;
      background: #f8f8f8;
      padding: 8px 12px;
      border-radius: 4px;
      flex: 1;
    }

    .cell-value {
      color: #333;
      font-weight: 600;
      font-size: 14px;
      text-align: right;
      margin-left: 20px;
    }

    /* 총인구 행 강조 */
    .table-row.highlight .tb-label {
      color: #e74c3c;
      font-weight: 700;
      font-size: 15px;
    }

    .table-row.highlight .tb-value {
      color: #e74c3c;
      font-weight: 700;
      font-size: 16px;
    }

    /* 데모 버튼 */
    .demo-btn {
      padding: 10px 20px;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .demo-btn:hover {
      background: #2980b9;
    }
    
.sub-wrap-1 {width:100%; margin:0 auto;}
.flex-column {display:flex; flex-direction: column;}
.about-banner {width:100%;}
.about-banner img {width:100%;}

.about-bottom {width:100%; display: flex; flex-direction: row; align-items:center;}
.about-text {width:50%; height:auto; }
.about-text .text-wrap {padding:60px;}
.about-text .text-wrap h1 {font-size:30px; font-weight:500;}
.about-text .text-wrap p {line-height:28px;margin-top:20px;}
.about-link {width:50%; display:flex; align-items:center;justify-content: space-around;}
.link-content {width:300px; height:380px; background:#fff;border-radius: 20px; box-sizing:border-box; margin:10px; cursor: pointer;}
.link-content img {width:100%; border-radius: 20px 20px 0 0px;}
.link-text {padding:20px; text-align:center;}
.link-text h1 {font-size:24px; font-weight:500; margin-top:10px;}
.link-text p {color:#333; line-height:24px; margin-top:15px;}
.link-content:hover {transform: scale(1.02);  transition: transform 0.3s ease; }

.hr-sect { display: flex; flex-basis: 100%; align-items: center; font-size: 12px;  margin: 8px 0px; }
.hr-sect::after {content: ""; flex-grow: 1; background: rgba(0, 0, 0, 0.25);   height: 1px;  font-size: 0px; line-height: 0px; margin: 0px 16px; }


.about-img {width:50%;}
.about-img img {width:90%; padding:40px;}
.about-text p {font-size:19px; line-height:36px !important;}


/* 지역 선택 체크박스 스타일 */
.area-checkbox-wrapper {
    padding: 20px;
    background: #fff;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.area-checkbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eee;
    flex-shrink: 0;
}

.area-checkbox-header h4 {
    font-size: 16px;
    font-weight: var(--fontweight-regular);
    color: #494949;
    margin: 0;
}

.btn-select-all {
    padding: 8px 20px;
    background: #00A73C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: var(--fontweight-medium);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-select-all:hover {
    background: #008c32;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 167, 60, 0.2);
}

.area-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    align-content: start;
}

.area-checkbox-grid::-webkit-scrollbar {
    width: 6px;
}

.area-checkbox-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.area-checkbox-grid::-webkit-scrollbar-thumb {
    background: #00A73C;
    border-radius: 4px;
}

.area-checkbox-grid::-webkit-scrollbar-thumb:hover {
    background: #008c32;
}

.area-checkbox-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #EDF3FC;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.area-checkbox-item:hover {
    background: rgba(0, 167, 60, 0.08);
    border-color: #00A73C;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 167, 60, 0.12);
}

.area-checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #B9B9B9;
    border-radius: 4px;
    background: #fff;
    margin-right: 8px;
    position: relative;
    transition: all 0.3s;
    flex-shrink: 0;
}

.area-checkbox-item input[type="checkbox"]:checked + .checkbox-custom {
    background: #00A73C;
    border-color: #00A73C;
}

.area-checkbox-item input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    font-size: 14px;
    color: #494949;
    font-weight: var(--fontweight-regular);
    user-select: none;
}

.area-checkbox-item input[type="checkbox"]:checked ~ .checkbox-label {
    color: #00A73C;
    font-weight: var(--fontweight-medium);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .area-checkbox-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .area-checkbox-item {
        padding: 8px 10px;
    }

    .checkbox-label {
        font-size: 13px;
    }
}

/* 스크롤 영역 스타일 개선 */
.data-list.custom-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.data-list.custom-scroll::-webkit-scrollbar {
    width: 8px;
}

.data-list.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.data-list.custom-scroll::-webkit-scrollbar-thumb {
    background: #00A73C;
    border-radius: 4px;
}

.data-list.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #008c32;
}

.xAxisDate {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #f9fafb;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	margin-bottom: 16px;
}

.xAxisDate input[type="text"] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: white;
	font-size: 14px;
	color: #374151;
	transition: all 0.2s;
}

.xAxisDate input[type="text"]:hover {
	border-color: #2563eb;
}

.xAxisDate input[type="text"]:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.xAxisDate input[type="text"]::placeholder {
	color: #9ca3af;
}

/* ~ 기호 스타일 */
.xAxisDate > :not(input) {
	color: #6b7280;
	font-weight: 500;
	font-size: 14px;
}

/* 검색 버튼 스타일 */
.btn-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.btn-search:hover {
	background: linear-gradient(135deg, #1d4ed8, #2563eb);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.btn-search:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.btn-search svg {
	width: 16px;
	height: 16px;
}