@charset "utf-8";
/*  */
html,body {overflow: auto;}
body.stop {overflow: hidden;}
#wrap {
    height: 100vh;
    position: relative;
    top: 0;
    font-family: 'EliceDXNeolli', 'Pretendard GOV', 'Montserrat', 'SCDream', sans-serif;
}

.blind {position: absolute; width: 0; height: 0; display: none;}

/* input,select,textarea */
input[type=text],
input[type=number],
input[type=password],
input[type=search],
select {
    height: 30px;
    vertical-align: middle;
    padding: 2px 15px;
    box-sizing: border-box;
    margin: 0px;
    border: 1px solid #D9D6D6;
    background: #fff;
    font-family: 'Pretendard GOV';
    color: #3F3F3F;
    border-radius: 5px;
    font-weight: 400;
    font-size: 14px;
    min-width: 80px;
}

input[disabled] {
    background: #ebebeb;
}

input[type=number]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select {
    padding: 2px 20px 2px 10px;
    background: url(../../roda/images/select.png)var(--input-background) no-repeat;
    background-position: right 10px center;
    -webkit-background-size: 16px;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input::placeholder {
    font-size: 0.875rem;
    color: #aeaeae;
}

.radbox_lb {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    padding: 0 14px 0 24px;
    height: 22px;
    background: url(../../roda/images/radiobox-blank.png)no-repeat left center;
    cursor: pointer;
}

.rad_ty1:checked + .radbox_lb {
    background: url(../../roda/images/radiobox-marked.png) no-repeat left center;
}

.checbox_lb {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    padding: 0 14px 0 24px;
    height: 22px;
    background: url(../images/check_box.png) no-repeat left center;
    cursor: pointer;
}

.chec_ty1:checked + .checbox_lb {
    background: url(../images/check_box_checked.png) no-repeat left center;
}

textarea {
    height: auto;
    resize: none;
    overflow: visible;
    vertical-align: middle;
    padding: 8px 15px;
    box-sizing: border-box;
    margin: 0px;
    background: #fff;
    border-radius: 5px;
    color: var(--color-black01);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    font-weight: 400;
    font-size: 1rem;
}

textarea:focus {
    outline: 0;
}

textarea::placeholder {
    font-size: 0.875rem;
    color: #aeaeae;
}

.blind {
    visibility: hidden;
    position: absolute;
    top: -9999999px;
    left: -9999999px;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    text-indent: -9999999px;
}

.text_ov {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-control.docs-date {
    background: url(../../roda/images/calendar.png)#fff no-repeat right 10px center;
    cursor: pointer;
    display: inline-block;
}

.datepicker-container {font-family: 'Pretendard GOV'}

/* 스크롤 안보이게 */
.noscrol {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.noscrol::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}




/* 창원시 소통맵 ---------------------------------------------------------------------------------------------------------------- */
.left_menu {position: fixed; left: -330px; top: 0; width: 330px; height: 100%; background: #fff; box-shadow: 0px 0px 5px rgba(120, 112, 112, 0.25); z-index: 10; transition: 0.5s;}
.left_menu.show {left: 0;} 
.left_menu .side_btn {position: absolute; top: 50%; right: -20px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 0 5px 5px 0; margin-top: -25px; width: 20px; height: 50px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);}
.left_menu .side_btn:hover {background: #f9f9f9;}
.left_menu .side_btn span {width: 10px; height: 20px; background: url(../../roda/images/arrow.png) no-repeat center;}
.left_menu .side_btn.show span {transform: rotate(180deg);}

.left_menu .title {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 160px; background: url(../../roda/images/logo_bg.png);}
.left_menu .title .ci {margin-bottom: 15px;}
.left_menu .titimg {margin-left: 0;}

.left_menu .list {height: calc(100% - 160px); padding:0 20px; overflow: auto;}
.left_menu .list li {display: flex; align-items: center; height: 60px; padding: 0px; border-bottom: 1px solid #D9D9D9; font-family:"SCDream"; font-size: 16px;}
.left_menu .list li .list_icon {padding-left: 23px;}
.checbox_lb { display: inline-flex; align-items: center; flex: 1; padding: 0 20px 0 15px; height: 22px; background: url(../images/check_box.png) no-repeat right center; color: #666; font-weight: 500; cursor: pointer;}
.chec_ty1:checked + .checbox_lb {background: url(../images/check_box_checked.png) no-repeat right center; font-weight: 600; color: #1987AD;}


.map_area {position: relative; width: 100%; height: 100%;}
.map_area .map_sample {width: 100%; height: 100%; background: url(../../roda/images/bg_map.png); background-position: center;}

.map_area .map_icon {position: absolute; width: 32px; height: 40px; }
.map_area .map_icon .icon {cursor: pointer; margin: 0 auto;display: block; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));}

.map_area .map_icon .box {position: absolute; display: none; left: -100px; bottom: 55px; width: 220px; height: auto;  padding: 5px ; background: #111; border:1px solid #C2C2C2;  border-radius: 12px;  box-shadow: 4px 4px 4px rgba(99, 99, 99, 0.3);}
.map_area .map_icon .box:before {content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -5px; width: 0; height: 0; border-bottom: 0px solid transparent; border-top: 10px solid #111; border-left: 10px solid transparent; border-right: 10px solid transparent;}
.map_area .map_icon .box_hd {display: flex; justify-content: space-between; align-items: flex-start; padding: 2px 2px 4px;  color: #fff; font-size: 17px;  word-break: keep-all;}
.map_area .map_icon .box_hd .close{width: 22px; height: 22px; background: url(../../roda/images/closed_w.png) no-repeat center; margin-left: 5px;}

.map_area .map_icon .box .board {padding: 5px 8px; border-radius: 0 0 8px 8px; background: #fff; font-size: 13px; line-height: 1.3; box-shadow: 0px 0px 2px #4A68C9;}
.map_area .map_icon .box .board li {display: flex;}
.map_area .map_icon .box .board strong {width: 110px; padding-right: 5px; text-align: left;}
.map_area .map_icon .box .board span {flex: 1;}
.map_area .map_icon .box {width:300px;}

.map_area .map_icon.ty01 .box {background: #00C4A4;}
.map_area .map_icon.ty01 .box:before {border-top: 10px solid #00C4A4;}
.map_area .map_icon.ty02 .box {background: #1596FF;}
.map_area .map_icon.ty02 .box:before {border-top: 10px solid #1596FF;}
.map_area .map_icon.ty03 .box {background: #7751F6;}
.map_area .map_icon.ty03 .box:before {border-top: 10px solid #7751F6;}
.map_area .map_icon.ty04 .box {background: #E2C628;}
.map_area .map_icon.ty04 .box:before {border-top: 10px solid #E2C628;}
.map_area .map_icon.ty05 .box {background: #54C92A;}
.map_area .map_icon.ty05 .box:before {border-top: 10px solid #54C92A;}
.map_area .map_icon.ty06 .box {background: #FC5B9E;}
.map_area .map_icon.ty06 .box:before {border-top: 10px solid #FC5B9E;}
.map_area .map_icon.ty07 .box {background: #1F41E4;}
.map_area .map_icon.ty07 .box:before {border-top: 10px solid #1F41E4;}
.map_area .map_icon.ty08 .box {background: #EB3B2F;}
.map_area .map_icon.ty08 .box:before {border-top: 10px solid #EB3B2F;}
.map_area .map_icon.ty09 .box {background: #2F9990;}
.map_area .map_icon.ty09 .box:before {border-top: 10px solid #2F9990;}
.map_area .map_icon.ty10 .box {background: #BB965F;}
.map_area .map_icon.ty10 .box:before {border-top: 10px solid #BB965F;}

.map_area .map_icon.ty11 .box {background: #FD5B46;}
.map_area .map_icon.ty11 .box:before {border-top: 10px solid #FD5B46;}
.map_area .map_icon.ty12 .box {background: #3183B1;}
.map_area .map_icon.ty12 .box:before {border-top: 10px solid #3183B1;}
.map_area .map_icon.ty13 .box {background: #FF9700;}
.map_area .map_icon.ty13 .box:before {border-top: 10px solid #FF9700;}
.map_area .map_icon.ty14 .box {background: #1B961F;}
.map_area .map_icon.ty14 .box:before {border-top: 10px solid #1B961F;}
.map_area .map_icon.ty15 .box {background: #4654B2;}
.map_area .map_icon.ty15 .box:before {border-top: 10px solid #4654B2;}
.map_area .map_icon.ty16 .box {background: #858F87;}
.map_area .map_icon.ty16 .box:before {border-top: 10px solid #858F87;}
.map_area .map_icon.ty17 .box {background: #E56E70;}
.map_area .map_icon.ty17 .box:before {border-top: 10px solid #E56E70;}
.map_area .map_icon.ty18 .box {background: #0DC8D4;}
.map_area .map_icon.ty18 .box:before {border-top: 10px solid #0DC8D4;}
.map_area .map_icon.ty19 .box {background: #982596;}
.map_area .map_icon.ty19 .box:before {border-top: 10px solid #982596;}
.map_area .map_icon.ty20 .box {background: #B02926;}
.map_area .map_icon.ty20 .box:before {border-top: 10px solid #B02926;}

.map_area .map_icon.ty21 .box {background: #876B5F;}
.map_area .map_icon.ty21 .box:before {border-top: 10px solid #876B5F;}
.map_area .map_icon.ty22 .box {background: #CE56EF;}
.map_area .map_icon.ty22 .box:before {border-top: 10px solid #CE56EF;}
.map_area .map_icon.ty23 .box {background: #946504;}
.map_area .map_icon.ty23 .box:before {border-top: 10px solid #946504;}
.map_area .map_icon.ty24 .box {background: #6DB091;}
.map_area .map_icon.ty24 .box:before {border-top: 10px solid #6DB091;}
.map_area .map_icon.ty25 .box {background: #17306C;}
.map_area .map_icon.ty25 .box:before {border-top: 10px solid #17306C;}







/* 인구경제 데이터 시각화 --------------------------------------------------------------------------------------------------- */
#wrap.dataVisualization {height: auto; min-height: calc(100vh - 80px); display: flex;  background: #F3FDFF; }

@media (max-width:1024px) {
    #wrap.dataVisualization { margin-top: 50px;}
}

/* 좌측영역 */
.dataVisualization .left_map {position: relative; width: 100%; max-width: 750px; height: 100%; min-height: calc(100vh - 80px); padding: 30px 0 30px 30px; background: url(../images/main_bg.png); background-position: bottom left;}


.dataVisualization .left_map .map_area_top {position: relative; display: flex; align-items: flex-end;}
.dataVisualization .left_map .map_area_top .small_map_area {width: 250px; height: 230px; padding: 5px; background: #E4EDF2; border-radius: 10px;}
.dataVisualization .left_map .map_area_top .small_map_area .small_map {position: relative; display: flex; align-items: center; justify-content: center;width: 100%; height: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);z-index: 5;}

.dataVisualization .left_map .map_area_top .small_map_area .small_map button.all_map {position: absolute; top: 5px; left: 5px; padding: 5px; background: #0055A2; border-radius: 5px; color: #fff; font-size: 16px; font-family:'Pretendard GOV'; }
.dataVisualization .left_map .map_area_top .small_map_area .small_map button.all_map:hover {background: #003c72;}

.sm_map { fill:#F1F2F6; pointer-events: none;}
.small_map .gu_name {display: none;}
.small_map.active .sm_map {position: relative; fill:#F1F2F6; stroke:#C0C3C6; cursor: pointer; pointer-events: all;}
.small_map.active .sm_map:hover {fill:#d3e7f8; stroke:#C0C3C6; }
.small_map.active .sm_map.active {fill:#4767B4;}
.small_map.active .gu_name {display: block;}
.small_map.active .gu_name .point.active {color: #fff; text-shadow: 1px 1px 0px #4767B4, -1px -1px 0px #4767B4, -1px 1px 0px #4767B4, -1px 1px 0px #4767B4;}

.gu_name {position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;}
.gu_name .point {position: absolute; text-align: center; transition: 0.5s; z-index: 0; font-size: 12px; width: 60px; color: #26448D; font-weight: 500; line-height: 1;}

.gu_name .point.no01 {top: 68%; left: 16%;} 
.gu_name .point.no02 {top: 45%; left: 26.5%;} 
.gu_name .point.no03 {top:51%; left: 52.5%;} 
.gu_name .point.no04 {top: 25%; left: 47.5%;} 
.gu_name .point.no05 {top: 70%; left: 66%;} 



.dataVisualization .left_map .map_area_top h2 {position: relative; color: #0055A2; font-size: 44px; padding: 10px 0px 10px 10px;}
.dataVisualization .left_map .map_area_top h2:before {content: url(../images/ci_tit.png); position: absolute; left: 20px; top: -88px;}
.dataVisualization .left_map .map_area_top h2 span {color: #3D5D7A; font-size: 36px; font-weight: 500;}



.dataVisualization .top_btn_area {position: absolute; display: flex; top:0; right: 30px; gap:12px;}
.dataVisualization .top_btn_area button {padding: 7px 20px; border: 2px solid #6082A1; border-radius: 5px; color: #0055A2; font-size: 15px; background: #fff; font-weight: 500;}
.dataVisualization .top_btn_area button.active,.dataVisualization .top_btn_area button:hover {background: #0055A2; color: #fff; border:2px solid #00417B;}



.dataVisualization .detail_map {width: 100%; display: flex; justify-content: center; height: calc(100% - 250px); padding-right: 50px;}
.tab-content{position: relative; margin-top: 10px; display: none; width: 100%; max-width: 520px; }
.tab-content.current{ display: flex;  justify-content: center;}

.map_area01 {position: absolute; display: flex; justify-content: center; width: 100%; max-width: 540px; height: 0; padding-bottom: 100%; }
.map_area01 svg {position: absolute; width: 100%; height: 100%;}

.map_viwe.pod01 {fill: #FFEDED; background:#FFEDED;}
.map_viwe.pod02 {fill: #FFD6D6; background:#FFD6D6;}
.map_viwe.pod03 {fill: #FFBDBD; background:#FFBDBD;}
.map_viwe.pod04 {fill: #FF9292; background:#FF9292;}
.map_viwe.pod05 {fill: #FF7676; background:#FF7676;}
.map_viwe.pod06 {fill: #FF6060; background:#FF6060;}
.map_viwe.pod07 {fill: #FF3F3F; background:#FF3F3F;}
.map_viwe.pod08 {fill: #FF2727; background:#FF2727;}
.map_viwe.pod09 {fill: #EB1B1B; background:#EB1B1B;}
.map_viwe.pod10 {fill: #CC0000; background:#CC0000;}

.legend .pod01 {fill: #FFEDED; background:#FFEDED;}
.legend .pod02 {fill: #FFD6D6; background:#FFD6D6;}
.legend .pod03 {fill: #FFBDBD; background:#FFBDBD;}
.legend .pod04 {fill: #FF9292; background:#FF9292;}
.legend .pod05 {fill: #FF7676; background:#FF7676;}
.legend .pod06 {fill: #FF6060; background:#FF6060;}
.legend .pod07 {fill: #FF3F3F; background:#FF3F3F;}
.legend .pod08 {fill: #FF2727; background:#FF2727;}
.legend .pod09 {fill: #EB1B1B; background:#EB1B1B;}
.legend .pod10 {fill: #CC0000; background:#CC0000;}

.point_name {position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;}
.point_name .point {position: absolute; width: 60px; height: 12px; font-size: 12px; text-align: center; line-height: 1;} 
.point_name .point.co01 {color: #420A00; text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff;}
.point_name .point.co02 {color: #420A00; text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff;}

.map_viwe {stroke:#C0C3C6; fill:#eee; stroke-width:1; transition: 0s;}
.map_viwe.chosen {stroke: #001999; stroke-width: 3px;}
.map_viwe.cardchosen {stroke: #D43450; stroke-width: 3px;}
.map_viwe:hover {filter: grayscale(0) drop-shadow(1px 1px 1px #555) hue-rotate(200deg); stroke-width:2; cursor: pointer;}
.left_map .map_viwe.active,.left_map .map_viwe.active:hover {animation: marker 1.5s infinite; animation-timing-function:step-end; stroke:#111;stroke-width:2;}

@keyframes marker {
  0% {filter: drop-shadow(1px 1px 1px #555) hue-rotate(200deg)}
  50% {filter:drop-shadow(1px 1px 1px #555) hue-rotate(0deg);}
  100% {filter: drop-shadow(1px 1px 1px #555) hue-rotate(200deg);}
} 


.sum_box {position: absolute; left: -45px; bottom: 25px; width: 150px; padding: 5px; background: #fff; border: 2px solid #F27E50; border-radius: 5px; color: #545454; font-family: 'Pretendard GOV'; z-index: 10; font-size: 13px; display: none;}
.point.active .sum_box,.point.current .sum_box {display: block;}
.point.active .sum_box {z-index: 20;}
.sum_box strong {font-size: 16px; letter-spacing: -1px;}
.sum_box:after {content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -10px;
  border-bottom: 0px solid transparent;
  border-top: 10px solid #F27E50;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


/*창원 전체(행정구)*/
.point_name.changwon > * {width: 60px;}
.point_name.changwon .no01 {top:70%; left: 22%;}
.point_name.changwon .no02 {top:44%; left: 34%;}
.point_name.changwon .no03 {top:53%; left: 59%;}
.point_name.changwon .no04 {top:27%; left: 54%;}
.point_name.changwon .no05 {top:71%; left: 74%;}


/*창원 전체(행정동)*/
.point_name.all_changwon > * {width: 60px; display: none; }
.point_name.all_changwon .point.active {display: block; z-index: 20; font-size: 14px;} 
.point_name.all_changwon .point.current {display: block;} 

.point_name.all_changwon .no01 {top:70%; left: 2%;}
.point_name.all_changwon .no02 {top:66%; left: 16%;}
.point_name.all_changwon .no03 {top:68%; left: 26%;}
.point_name.all_changwon .no04 {top:75%; left: 38%;}
.point_name.all_changwon .no05 {top:65%; left: 34%;}
.point_name.all_changwon .no06 {top:63%; left: 38%;}
.point_name.all_changwon .no07 {top:59%; left: 35%;}
.point_name.all_changwon .no08 {top:57%; left: 34%;}
.point_name.all_changwon .no09 {top:54%; left: 33%;}
.point_name.all_changwon .no10 {top:54%; left: 36%;}
.point_name.all_changwon .no11 {top:52%; left: 35%;}
.point_name.all_changwon .no12 {top:51%; left: 34%;}
.point_name.all_changwon .no13 {top:53%; left: 37%;}
.point_name.all_changwon .no14 {top:51%; left: 38%;}
.point_name.all_changwon .no15 {top:49%; left: 38%;}

.point_name.all_changwon .no21 {top:47%; left: 24%;}
.point_name.all_changwon .no22 {top:45%; left: 32%;}
.point_name.all_changwon .no23 {top:49%; left: 34%;}
.point_name.all_changwon .no24 {top:46%; left: 37%;}
.point_name.all_changwon .no25 {top:49%; left: 37%;}
.point_name.all_changwon .no26 {top:47%; left: 39%;}
.point_name.all_changwon .no27 {top:45%; left: 40%;}
.point_name.all_changwon .no28 {top:41%; left: 37%;}
.point_name.all_changwon .no29 {top:39%; left: 39%;}
.point_name.all_changwon .no30 {top:41%; left: 42%;}
.point_name.all_changwon .no31 {top:44%; left: 41%;}
.point_name.all_changwon .no32 {top:47%; left: 43%;}

.point_name.all_changwon .no41 {top:55%; left: 49%;}
.point_name.all_changwon .no42 {top:47%; left: 54%;}
.point_name.all_changwon .no43 {top:57%; left: 66%;}
.point_name.all_changwon .no44 {top:44%; left: 55%;}
.point_name.all_changwon .no45 {top:45%; left: 59%;}
.point_name.all_changwon .no46 {top:51%; left: 61%;}
.point_name.all_changwon .no47 {top:49%; left: 60%;}
.point_name.all_changwon .no48 {top:47%; left: 64%;}

.point_name.all_changwon .no51 {top:44%; left: 47%;}
.point_name.all_changwon .no52 {top:37%; left: 44%;}
.point_name.all_changwon .no53 {top:40%; left: 52%;}
.point_name.all_changwon .no54 {top:41%; left: 60%;}
.point_name.all_changwon .no55 {top:24%; left: 44%;}
.point_name.all_changwon .no56 {top:29%; left: 55%;}
.point_name.all_changwon .no57 {top:19%; left: 65%;}

.point_name.all_changwon .no61 {top:66%; left: 50%;}
.point_name.all_changwon .no62 {top:62%; left: 56%;}
.point_name.all_changwon .no63 {top:65%; left: 58%;}
.point_name.all_changwon .no64 {top:63%; left: 60%;}
.point_name.all_changwon .no65 {top:64%; left: 62%;}
.point_name.all_changwon .no66 {top:63%; left: 64%;}
.point_name.all_changwon .no67 {top:65%; left: 68%;}
.point_name.all_changwon .no68 {top:66%; left: 64%;}
.point_name.all_changwon .no69 {top:68%; left: 65%;}
.point_name.all_changwon .no70 {top:72%; left: 65%;}
.point_name.all_changwon .no71 {top:76%; left: 73%;}
.point_name.all_changwon .no72 {top:68%; left: 79%;}
.point_name.all_changwon .no73 {top:76%; left: 88%;}





/*마산합포구 */
.point_name.masan_happo-gu .no01 {top:64%; left: 11%;}
.point_name.masan_happo-gu .no02 {top:60%; left: 32%;}
.point_name.masan_happo-gu .no03 {top:58%; left: 52%;}
.point_name.masan_happo-gu .no04 {top:74%; left: 72%;}
.point_name.masan_happo-gu .no05 {top:58%; left: 65%;}
.point_name.masan_happo-gu .no06 {top:51%; left: 71%;}
.point_name.masan_happo-gu .no07 {top:43%; left: 65%;}
.point_name.masan_happo-gu .no08 {top:33%; left: 61%;}
.point_name.masan_happo-gu .no09 {top:24%; left: 59%;}
.point_name.masan_happo-gu .no10 {top:27%; left: 69%;}
.point_name.masan_happo-gu .no11 {top:17%; left: 67%;}
.point_name.masan_happo-gu .no12 {top:12%; left: 65%;}
.point_name.masan_happo-gu .no13 {top:18%; left: 77%;}
.point_name.masan_happo-gu .no14 {top:11%; left: 81.5%;}
.point_name.masan_happo-gu .no15 {top:6%; left: 83.5%;}
/*마산회원구*/
.point_name.masanhoewon-gu .no01 {top:43%; left: 19%;}
.point_name.masanhoewon-gu .no02 {top:41%; left: 46%;}
.point_name.masanhoewon-gu .no03 {top:54%; left: 49.5%;}
.point_name.masanhoewon-gu .no04 {top:54%; left: 60%;}
.point_name.masanhoewon-gu .no05 {top:45%; left: 59.5%;}
.point_name.masanhoewon-gu .no06 {top:50%; left: 68%;}
.point_name.masanhoewon-gu .no07 {top:44%; left: 70%;}
.point_name.masanhoewon-gu .no08 {top:30%; left: 60%;}
.point_name.masanhoewon-gu .no09 {top:39%; left: 73%;}
.point_name.masanhoewon-gu .no10 {top:26%; left: 72%;}
.point_name.masanhoewon-gu .no11 {top:30%; left: 75%;}
.point_name.masanhoewon-gu .no12 {top:48%; left: 81%;}
/*성산*/
.point_name.seongsan .no01 {top:53%; left: 29%;}
.point_name.seongsan .no02 {top:61%; left: 70%;}
.point_name.seongsan .no03 {top:46%; left: 59%;}
.point_name.seongsan .no04 {top:37%; left: 53%;}
.point_name.seongsan .no05 {top:35%; left: 42%;}
.point_name.seongsan .no06 {top:35%; left: 70%;}
.point_name.seongsan .no07 {top:26%; left: 52%;}
.point_name.seongsan .no08 {top:18%; left: 40%;}

/*의창구*/
.point_name.uichang-gu .no01 {top:37%; left: 22%;}
.point_name.uichang-gu .no02 {top:46%; left: 47%;}
.point_name.uichang-gu .no03 {top:29%; left: 69%;}
.point_name.uichang-gu .no04 {top:86%; left: 29%;}
.point_name.uichang-gu .no05 {top:70%; left: 23%;}
.point_name.uichang-gu .no06 {top:76%; left: 39%;}
.point_name.uichang-gu .no07 {top:79%; left: 58%;}

/* 진해 */
.point_name.jinhae .no01 {top:30%; left: 8%;}
.point_name.jinhae .no02 {top:23%; left: 17%;}
.point_name.jinhae .no03 {top:31%; left: 22%;}
.point_name.jinhae .no04 {top:25%; left: 25%;}
.point_name.jinhae .no05 {top:28%; left: 30%;}
.point_name.jinhae .no06 {top:27%; left: 36%;}
.point_name.jinhae .no07 {top:31%; left: 45%;}
.point_name.jinhae .no08 {top:33.5%; left: 33%;}
.point_name.jinhae .no09 {top:37%; left: 36%;}
.point_name.jinhae .no10 {top:43%; left: 39%;}
.point_name.jinhae .no11 {top:47%; left: 51%;}
.point_name.jinhae .no12 {top:37%; left: 67%;}
.point_name.jinhae .no13 {top:52%; left: 83%;}


.dataVisualization .legend {position: absolute; bottom: 30px; right: 30px; padding: 5px 10px; background: #fff; border: 1px solid #E1E1E1; border-radius: 5px; font-family: 'Pretendard GOV'; }
.dataVisualization .legend p.tit {font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 5px; pointer-events: none;}
.dataVisualization .legend ul {pointer-events: none;}
.dataVisualization .legend ul li {display: flex; font-size: 10px; font-weight: 400; color: #797979; margin-bottom: 5px; letter-spacing: -0.5px}
.dataVisualization .legend .box {display: block; width: 22px; height: 11px; border: 1px solid #3D3D3D; margin-right: 5px;}

.legend .all_map {position: absolute; top: -50px; left: 0; border-radius: 5px; background: #0055A2; border: 1px solid #5394ce; padding: 10px 0; width: 100%; color: #fff; font-size:14px; font-weight: bold;text-align: center;}
.legend .all_map:hover {background: #3D5D7A;}

@media (max-width:1400px) {
    #wrap.dataVisualization {flex-direction: column; min-height: 0;}
    
    #wrap.dataVisualization .left_map {display: flex;  justify-content: center; width: 100%; max-width: 100%; height: auto; min-height: inherit; padding: 20px 10px 10px 10px}
    
    #wrap.dataVisualization .left_map .map_area_top {width: 440px; min-width: 450px; padding-top: 150px; align-items: flex-start; justify-content: flex-end; flex-direction: column-reverse;}
    #wrap.dataVisualization .top_btn_area {right: inherit;left: 20px;}
    #wrap.dataVisualization .left_map .map_area_top .small_map_area {margin: auto 0;}
    
    #wrap.dataVisualization .detail_map {max-width: 500px; padding-right: 0;}
    #wrap.dataVisualization .detail_map .map_area01 {position: relative;}
    #wrap.dataVisualization .legend { right: 50%; bottom: 10px; }
    #wrap.dataVisualization .map_mvmn .legend {right: 30px;}
}

@media (max-width:900px) {
    #wrap.dataVisualization .left_map .map_area_top {width: 360px; min-width: 360px;}
    #wrap.dataVisualization .left_map .map_area_top h2 {font-size: 40px;}
    #wrap.dataVisualization .left_map .map_area_top h2 span {font-size: 30px;}
    
    #wrap.dataVisualization .top_btn_area {top:0; left: 10px; gap:10px;}
    #wrap.dataVisualization .top_btn_area button {padding: 5px 15px;}
    
}

@media (max-width:768px) {
    #wrap.dataVisualization .left_map {flex-direction: column; align-items: center; }
    
    #wrap.dataVisualization .left_map .map_area_top { width: 100%; max-width: 600px; margin: 0 auto; padding-top: 50px}
    #wrap.dataVisualization .left_map .map_area_top { flex-direction: row; align-items: flex-end;}
    #wrap.dataVisualization .left_map .map_area_top .small_map_area {width: 250px; height: 230px; padding: 5px; background: #E4EDF2; border-radius: 10px;}
    
    .map_area01 {position: relative; }
    #wrap.dataVisualization .tab-content {margin-top: 0px;}
    
    #wrap.dataVisualization .legend {right: inherit; left: 10px; bottom: 10px; }
    #wrap.dataVisualization .map_mvmn .legend {left: initial; right: 30px; bottom: 10px;}
}

@media (max-width:600px) {
    #wrap.dataVisualization .left_map .map_area_top {width: 100%; max-width: 440px; min-width: inherit; padding-top: 90px; align-items: flex-start; justify-content: flex-end; flex-direction: column-reverse;}
    #wrap.dataVisualization .top_btn_area {right: none;left: 20px;}
    #wrap.dataVisualization .left_map .map_area_top .small_map_area {margin: auto 0;}
    
    #wrap.dataVisualization .left_map { padding-bottom: 140px}
    #wrap.dataVisualization .legend {right: inherit; left: 10px; bottom: 10px; }
    #wrap.dataVisualization .map_mvmn .legend {right: 10px; left: initial; bottom: 10px;}
}




/* 우측 영역 */
.right_section {display: flex;  flex: auto; min-height: 820px; background: #fff; border: 1px solid #CCDAEB; box-shadow: -4px 0 4px #D2DFEB; padding: 20px 25px 10px; gap: 20px;}

.right_section >[class*="group"] {display: flex; flex: 1; flex-direction: column;}
.right_section >[class*="group"]>* {margin-bottom: 15px;}
.right_section >[class*="group"]>*:last-child {margin-bottom: 0px;}

.right_section .flexbox {display: flex; width: 100%;}
.right_section .flexbox.gap30 {gap:30px; }
.right_section .flexbox.gap15 {gap:15px;}
.right_section .flexbox.gap10 {gap:10px 10px;}
.right_section .fl_col {flex-direction: column;}
.right_section .innerbox {border: 2px solid #D4D4D4; border-radius: 10px;  overflow: hidden;}
.right_section .innerbox.graph {border: none; border-radius: 0px;}
.right_section .tablebox {border: 0px solid #D4D4D4; border-radius: 0px;  overflow: hidden;}

.tablebox table {width: 100%; height: 100%;}
table {border: 0px solid; border-spacing: 0; width:100%; box-sizing: border-box; border-collapse: collapse; margin: 0; }
table th,table td {height: 40px; vertical-align: middle;border-right: 1px solid #B0B0B0;}
table tbody tr {border-bottom: 1px solid #B0B0B0;}
table th { padding: 5px 10px; background: #6B769A; align-items: center; color: #fff; font-weight: 500;}
table td { padding: 5px 10px; text-align: center;}
table th:last-child, table td:last-child {border-right: none;}

.colye {color: #FFC934; font: inherit;}
.colred {color: #FF381E; font: inherit;}
.colbl {color: #004DF4; font: inherit;}
.colgray {color: #7e7e7e; font: inherit;}

.right_section .titlebox {position: relative; display: flex; align-items: center; justify-content: center; padding:5px 10px; background: #0055A2; font-size: 20px; color: #fff; width: 100%; min-height: 40px; border-radius: 10px;}
.right_section .titlebox .year {position: absolute; right: 15px; font-size: 12px; font-family: 'Pretendard GOV'; color: #d3d3d3;}

.right_section .titlebox p.exp {display: flex; align-items: center}
.right_section .titlebox p.exp .que{ position: relative; display: inline-block; width: 15px; height:15px; margin-left: 5px; border: 2px solid #fff; border-radius: 50%; font-family:'Pretendard GOV' ; font-size: 12px; line-height: 1; text-align: center; cursor: pointer;}
.right_section .titlebox p.exp .que .txt {position: absolute; display:none; bottom: 20px; width: max-content; max-width:200px; margin-left: 7px; padding:5px; background: #fff; border: 1px solid #7e7e7e; border-radius:5px; color: #7e7e7e;font-family:'Pretendard GOV' ; text-align:left; transform: translateX(-50%); }
.right_section .titlebox p.exp .que .txt:after {content: ""; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; border-bottom: 0px solid transparent; border-top: 5px solid #7e7e7e; border-left: 5px solid transparent; border-right: 5px solid transparent;}
.right_section .titlebox p.exp .que:hover .txt {display: block;}

.right_section.dv01 .group02 .titlebox p,.right_section.dv03 .group02 .titlebox p {padding-right: 40px;}
.right_section.dv03 .group02 .chart2 .titlebox p {padding-right: 0;}
.right_section.dv03 .group02 .chart2 select {margin-left: 10px; width: 90px; min-height: 24px; height: 24px;margin-right: 40px;}

@media (min-width:1900px) {
	.right_section {max-height: calc(100vh - 80px);}
}

@media (max-width:1920px) {
	.right_section .group01 .graph {max-height: 230px;}
	.right_section .group02 .graph {max-height: 205px;}
	.right_section .group02 .flexbox > .flexbox{height: calc(calc(100% - 30px) / 3);} 
}

@media (max-width:1900px) {
	.right_section .titlebox {font-size: 18px;}
}

@media (min-width:1681px) and (max-width:1860px) {
    .right_section.dv01 .group02 .titlebox,.right_section.dv03 .group02 .titlebox {justify-content: flex-start;}
}

@media (max-width:1860px) {
	.right_section.dv01 .group02 .titlebox p,.right_section.dv03 .group02 .titlebox p {padding-right: 0px;}
	.right_section.dv03 .group02 .chart2 select {margin-right: 0;}
}

@media (max-width:500px) {
	.right_section .titlebox {flex-direction: column;}
	.right_section .titlebox .year {position: relative; right:0;}
	.right_section.dv03 .group02 .chart2 select {margin-bottom: 5px;}
}










.right_section .graph { height: 100%; display: grid;}


.right_section .txt_y {font-size: 12px; color: #999; background: #e3f2ff; padding: 3px 15px; color: #646464; border-radius: 8px; font-weight: 300;}
.right_section .txt01 {font-family: 'Pretendard GOV'; color: #3D5D7A; font-size: 18px; font-weight: 700;  }
.right_section .txt02 {display: flex; align-items: center;}
.right_section .txt02 span {font-family: 'Montserrat'; font-size: 30px; font-weight: 600; margin-right: 3px; letter-spacing: -1px;}
.right_section .txt02 small {font-size: 14px; margin-bottom: -4px;}
.right_section .txt03 {display: flex; align-items: flex-end; padding: 5px 20px; background: #EDEDED; font-size: 13px; border-radius: 20px;}

.right_section .txt03 .arrow_up {display: inline-block;width: 11px; height: 7px; margin: 0 0px 4px 5px; background: url(../images/arrow_up.png);}
.right_section .txt03 .arrow_down {display: inline-block;width: 11px; height: 7px; margin: 0 0px 4px 5px; background: url(../images/arrow_down.png);}
.right_section .txt03 .arrow_none {display: inline-block;width: 10px; height: 13px; margin: 0 0px 4px 5px; background: url(../images/arrow_none.png);}
.right_section .txt03 .figures {font-size: 15px; margin-left: 5px;}

.right_section.dv02 .ty01 .innerbox.textbox {position: relative; overflow: inherit;}
.right_section.dv03 .ty02 .innerbox.textbox {position: relative; overflow: inherit;}
.compare_area .innerbox.textbox {position: relative; overflow: inherit;}
.textbox .txt02 {cursor: pointer;}
.textbox .formula {position: absolute; display: none; top: -9px; background: #fff;  padding: 2px 5px; border:1px solid #c7c7c7; border-radius: 5px; font-family: 'Pretendard GOV'; font-size: 14px; color: #7a7a7a; }
.textbox .txt02:hover + .formula {display: block;}
.textbox .formula span {color: #ed5858;}
.textbox .formula:after {content: ""; position: absolute; bottom: -5px; left: 50%; margin-left: -5px;
  border-bottom: 0px solid transparent;
  border-top: 5px solid #c6c6c6;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}



@media (max-width:1680px) {
    .right_section {flex-direction: column; height: calc(100vh - 80px); overflow: auto;}
}

@media (max-width:1400px) {
    .right_section {flex-direction: column; min-height: unset;}
    
}

@media (max-width:600px) {
    .right_section {padding: 10px;}
    .right_section .flexbox.gap15 {gap:10px;}
    .right_section .flexbox.gap10 {gap:10px;}
}

/* 1.인구 */
.right_section.dv01 .group01 {flex: 9;}
.right_section.dv01 .group02 {flex: 7;}

.right_section.dv01 .ty01,.right_section.dv01 .ty02 {flex-wrap: wrap;}
.right_section.dv01 .ty01 .innerbox,.right_section.dv01 .ty02 .innerbox {display: flex; gap:10px; flex-direction: column; align-items: center;  padding: 15px 5px;  max-height: 123px; white-space: nowrap;}
.right_section.dv01 .ty01 .innerbox {width: calc(calc(100% - 20px) / 3);}
.right_section.dv01 .ty02 .innerbox {width: calc(calc(100% - 15px) / 2);}

.right_section.dv01 .ty03.flexbox {height: calc(100% - 460px); min-height: 200px;}
.right_section.dv01 .ty03 .innerbox{height: calc(100% - 55px); min-height: 200px;}

.right_section.dv01 .ty04.flexbox {flex: 1; height: 100%;}
.right_section.dv01 .ty04.flexbox .flexbox{flex: 1;}
.right_section.dv01 .ty04 .innerbox {height: calc(100% - 55px); min-height: 200px;}

.right_section.dv01 .ty04 .flexbox.pltx {gap:5px;}
.right_section.dv01 .ty04 .flexbox.pltx>span {font-size: 13px; line-height:1.2; color: #999;}
.right_section.dv01 .ty04 .flexbox.pltx .innerbox{height: calc(100% - 70px); min-height: 180px;}


.right_section.dv01 .ty05 {width: 100%; align-items: center; padding: 5px;}
.right_section.dv01 .ty06 {display: flex; width: 100%; gap:10px; flex-direction: row; justify-content: center; align-items: center;  padding: 15px 5px;  max-height: 108px; white-space: nowrap;}

@media (max-width:600px) {
	.right_section.dv01 .ty04 .flexbox.pltx .innerbox {min-height: 200px;}
}

@media (max-width:600px) {
    .right_section.dv01 .ty01 .innerbox {width: 100%;}
    .right_section.dv01 .ty02 .innerbox {width: 100%;}
    
    .right_section.dv01 .ty06 {flex-direction: column;}
    
    
}


/* 2.인구이동, 4.경제이동 */
.right_section.dv02 .ty01 {flex-wrap: wrap;}
.right_section.dv02 .ty01 .innerbox{display: flex; gap:5px; flex-direction: column; align-items: center;  padding: 10px;  max-height: 108px; white-space: nowrap; width: calc(calc(100% - 20px) / 3);}

.right_section.dv02 .ty02.flexbox {flex: 1; display: flex;}
.right_section.dv02 .ty02 .innerbox{height: calc(100% - 55px); min-height: 200px;}

.right_section.dv02 .ty04 {height: calc(100% - 185px); min-height: 500px;}
.right_section.dv02 .ty04 .innerbox{position: relative; height: calc(100% - 55px); flex: 1;}
.right_section.dv02 .ty04 .innerbox .in_btnbox {position: absolute; left: 10px; top: 38px; display: flex;gap:12px; z-index: 10;}
.right_section.dv02 .ty04 .innerbox .in_btnbox button {padding: 7px 20px; border: 2px solid #6082A1; border-radius: 5px; color: #0055A2; font-size: 16px; background: #fff; font-weight: 500;}
.right_section.dv02 .ty04 .innerbox .in_btnbox button.active,.right_section.dv02 .ty04 .innerbox .in_btnbox button:hover {background: #0055A2; color: #fff; border:2px solid #00417B;}

.right_section.dv02 .ty04 .map_mvmn {height: 100%;}
.right_section.dv02 .ty04 .map_mvmn .dock_inner {border:none;}


@media (max-width:1740px) {
    .right_section.dv02 .ty03 {flex-direction: column;}
}

@media (max-width:1400px) {
	.right_section.dv02 .ty04 .map_mvmn {height: 500px;}
	
}

@media (max-width:600px) {
    .right_section.dv02 .ty01 .innerbox {width: 100%;}
}




/* 3.경제 */
.map_colbu .pod01 {fill: #F0EDFF; background:#F0EDFF;}
.map_colbu .pod02 {fill: #DAD6FF; background:#DAD6FF;}
.map_colbu .pod03 {fill: #C7BDFF; background:#C7BDFF;}
.map_colbu .pod04 {fill: #A292FF; background:#A292FF;}
.map_colbu .pod05 {fill: #8476FF; background:#8476FF;}
.map_colbu .pod06 {fill: #6B60FF; background:#6B60FF;}
.map_colbu .pod07 {fill: #5C3FFF; background:#5C3FFF;}
.map_colbu .pod08 {fill: #3D27FF; background:#3D27FF;}
.map_colbu .pod09 {fill: #291BEB; background:#291BEB;}
.map_colbu .pod10 {fill: #0E00CC; background:#0E00CC;}

.map_colbu .map_viwe:hover {filter: grayscale(0) drop-shadow(1px 1px 1px #555) hue-rotate(100deg); stroke-width:2; cursor: pointer;}
.left_map .map_colbu .map_viwe.active,.left_map .map_colbu .map_viwe.active:hover {animation: marker01 1.5s infinite; animation-timing-function:step-end; stroke:#111;stroke-width:2;}
@keyframes marker01 {
  0% {filter: drop-shadow(1px 1px 1px #555) hue-rotate(100deg)}
  50% {filter:drop-shadow(1px 1px 1px #555) hue-rotate(0deg);}
  100% {filter: drop-shadow(1px 1px 1px #555) hue-rotate(100deg);}
} 


@media (max-width:900px) {
    .left_map .map_area_top h2.sm01 {font-size: 36px;}
    .left_map .map_area_top h2.sm01 span {font-size: 28px;}
}

.right_section.dv03 .group01 {flex: 9;}
.right_section.dv03 .group02 {flex: 7;}


.right_section.dv03 .ty01,.right_section.dv03 .ty02 {flex-wrap: wrap;}
.right_section.dv03 .ty01 .innerbox,.right_section.dv03 .ty02 .innerbox {display: flex; gap:5px; flex-direction: column; align-items: center;  padding: 10px;  max-height: 108px; white-space: nowrap;}
.right_section.dv03 .ty01 .innerbox {width: calc(calc(100% - 10px) / 2);}
.right_section.dv03 .ty02 .innerbox {width: calc(calc(100% - 20px) / 3);}

.right_section.dv03 .ty03 { flex: 1;}
.right_section.dv03 .ty03 .tablebox {height: calc(100% - 55px); min-height: 220px; }
.right_section.dv03 .ty03 .tablebox th,
.right_section.dv03 .ty03 .tablebox td {height: 20px; font-size: 14px;}

.right_section.dv03 .ty04.flexbox {flex: 1; height: 100%;}
.right_section.dv03 .ty04.flexbox .flexbox{flex: 1;}
.right_section.dv03 .ty04 .innerbox{height: calc(100% - 55px); min-height: 200px;}

.right_section.dv03 .ty05.flexbox {width: 100%; align-items: center;}
.right_section.dv03 .ty05 .innerbox{display: flex; width: 100%; gap:10px; flex-direction: row; justify-content: center; align-items: center;  padding: 15px 5px;  max-height: 108px; white-space: nowrap;}

@media (max-width:600px) {
    .right_section.dv03 .ty01 .innerbox {width: 100%;}
    .right_section.dv03 .ty02 .innerbox {width: 100%;}
    
    .right_section.dv03 .ty05 .innerbox {flex-direction: column;}
}










/* 좌측 타입2 */
.dataVisualization .left_map.ty02 {position: relative; min-width: 800px;  height: 100%; min-height: calc(100vh - 80px); padding: 20px 30px 30px 30px; background: url(../images/main_bg.png); background-position: bottom left;}
.dataVisualization .left_map.ty02 .loding_bar {position: absolute;}

.dataVisualization .left_map.ty02 .map_area_top {position: relative; display: flex; align-items: flex-end; }
.dataVisualization .left_map.ty02 .map_area_top .small_map_area {position: absolute; top: 0; width: 250px; height: 230px; }

.dataVisualization .left_map.ty02 .detail_map {padding-right: 0px; padding-left: 270px; justify-content: flex-start;}

.left_map.ty02 .tab-content { max-width: 460px; margin-top: 0;}
.left_map.ty02 .map_area01 {max-width: 460px; height: 0; padding-bottom: 100%; }

.left_map.ty02 .map_area01 .sum_box {left:-70px;}
#wrap.dataVisualization .left_map.ty02 .legend {top: 600px;left: 30px; right: unset; bottom: unset; }



.left_map.ty02 .titlebox {position: relative; display: flex; align-items: center; justify-content: center; padding:5px 10px; background: #0055A2; font-size: 20px; color: #fff; width: 100%; min-height: 40px; border-radius: 10px;}
.left_map.ty02 .titlebox .year {position: absolute; right: 15px; font-size: 12px; font-family: 'Pretendard GOV'; color: #d3d3d3;}

.left_map.ty02 .flexbox {display: flex; width: 100%;}
.left_map.ty02>.flexbox {flex-direction: column; margin-bottom: 10px;}
.left_map.ty02 .flexbox.gap15 {gap:15px;}
.left_map.ty02 .flexbox.gap10 {gap:10px 10px;}
.left_map.ty02 .fl_col {flex-direction: column;}
.left_map.ty02 .innerbox {border: 2px solid #D4D4D4; border-radius: 10px;  overflow: hidden;}

.left_map.ty02 .txt01 {font-family: 'Pretendard GOV'; color: #3D5D7A; font-size: 18px; font-weight: 700;  }
.left_map.ty02 .txt02 {display: flex; align-items: center;}
.left_map.ty02 .txt02 span {font-family: 'Montserrat'; font-size: 30px; font-weight: 600; margin-right: 3px; letter-spacing: -1px;}
.left_map.ty02 .txt02 small {font-size: 14px; margin-bottom: -4px;}
.left_map.ty02 .txt03 {display: flex; align-items: flex-end; padding: 5px 20px; background: #EDEDED; font-size: 13px; border-radius: 20px;}
.left_map.ty02 .txt03 .arrow_up {display: inline-block;width: 11px; height: 7px; margin: 0 5px 4px; background: url(../images/arrow_up.png);}
.left_map.ty02 .txt03 .arrow_down {display: inline-block;width: 11px; height: 7px; margin: 0 5px 4px; background: url(../images/arrow_down.png);}
.left_map.ty02 .txt03 .arrow_none {display: inline-block;width: 10px; height: 13px; margin: 0 5px 1px; background: url(../images/arrow_none.png);}
.left_map.ty02 .txt03 .figures {font-size: 15px;}

.left_map.ty02 .ty01 {flex-wrap: wrap;}
.left_map.ty02 .ty01 .innerbox{display: flex; gap:5px; flex-direction: column; align-items: center;  padding: 10px 5px; white-space: nowrap; width: calc(calc(100% - 20px) / 3); background: #fff;}
.left_map.ty02 .ty01 .innerbox.textbox {position: relative; overflow: inherit;}
.textbox .formula {position: absolute; display: none; top: -3px; pointer-events: none;}


@media (max-width:1400px) {
    .dataVisualization .left_map.ty02 {flex-direction: column; min-width: unset;}
    #wrap.dataVisualization .left_map.ty02 .detail_map {max-width: 100%; padding-left: 0; justify-content: center;}
    #wrap.dataVisualization .left_map.ty02 .map_area_top {padding-top: 0;}
    #wrap.dataVisualization .left_map.ty02 .legend {left: 10px;}
}

@media (max-width:1024px) {
    #wrap.dataVisualization .left_map.ty02 .detail_map {max-width: 100%; padding-left: 200px;}
}

@media (max-width:880px) {
	.left_map.ty02 .tab-content {margin-top: 10px;}
    #wrap.dataVisualization .left_map.ty02 .map_area_top { align-items:flex-start; flex-direction: column; width: 100%; max-width: unset;}
    #wrap.dataVisualization .left_map.ty02 .map_area_top .small_map_area {position: relative; }
    
    #wrap.dataVisualization .left_map.ty02 .detail_map {max-width: 100%; padding-left: 0px;}
    
    #wrap.dataVisualization .left_map.ty02 .legend {left: unset; right: 10px; top:410px; bottom:unset;}
}

@media (max-width:768px) {
    #wrap.dataVisualization .left_map.ty02 .legend { right: 30px; top:410px; left:unset;}
}

@media (max-width:600px) {
    #wrap.dataVisualization .left_map.ty02 .legend { right: 30px; top:unset; bottom: 20px; }
    
    .left_map.ty02 .ty01 .innerbox { width: 100%;}
}

@media (max-width:500px) {
    .left_map.ty02 .titlebox {flex-direction: column;}
	.left_map.ty02 .titlebox .year {position: relative; right:0;}
}

/* 2.인구이동, 4.경제이동 */
.right_section.dv02 {flex: 1; min-height: 600px;}

.right_section.dv02 .ty04 {height: calc(100%); min-height: 600px;}
.right_section.dv02 .ty04 .innerbox{position: relative; height: calc(100% - 55px); flex: 1;}
.right_section.dv02 .ty04 .innerbox .in_btnbox {position: absolute; left: 10px; top: 38px; display: flex;gap:12px; z-index: 10;}
.right_section.dv02 .ty04 .innerbox .in_btnbox button {padding: 7px 20px; border: 2px solid #6082A1; border-radius: 5px; color: #0055A2; font-size: 16px; background: #fff; font-weight: 500;}
.right_section.dv02 .ty04 .innerbox .in_btnbox button.active,.right_section.dv02 .ty04 .innerbox .in_btnbox button:hover {background: #0055A2; color: #fff; border:2px solid #00417B;}

.right_section.dv02 .ty04 .map_mvmn {height: 100%;}
.right_section.dv02 .ty04 .map_mvmn .dock_inner {border:none;}


@media (max-width:1740px) {
    .right_section.dv02 .ty03 {flex-direction: column;}
}

@media (max-width:1400px) {
    .right_section.dv02 {min-width: unset;}
	.right_section.dv02 .ty04 .map_mvmn {height: 540px;}
}

@media (max-width:600px) {
    .right_section.dv02 .ty01 .innerbox {width: 100%;}
}





































/* 데이터 비교*/
#wrap.comparativeAnalysis {height: auto; background: url(../images/main_bg.png)#F1F5F9 no-repeat top left; padding: 30px 20px;}

@media (max-width:1024px) {
    #wrap.comparativeAnalysis { margin-top: 50px;}
}


.comparativeAnalysis .top_alarm {position: relative; width: calc(100% - 30px); padding: 20px; margin-left: 30px; margin-bottom: 20px; background: #fff;  border: 2px dashed rgba(38, 68, 141, 0.5); border-left: none; border-radius: 10px;}
.comparativeAnalysis .top_alarm:after {content: url(../images/top_alarm_img.png); position: absolute; top:-24px; left: -30px; width: 84px; height: 125px;}
.comparativeAnalysis .top_alarm p {text-align: center; padding-right: 30px; color: #023A8C; font-size: 20px;}
.comparativeAnalysis .top_alarm p br.mo {display: none;}

@media (max-width:1024px) {
    .comparativeAnalysis .top_alarm {margin-left: 0; padding: 15px 10px; width: 100%; border: 2px dashed rgba(38, 68, 141, 0.5);}
    .comparativeAnalysis .top_alarm:after {display: none;}
    .comparativeAnalysis .top_alarm p {font-size: 16px;}
}

@media (max-width:780px) {
    .comparativeAnalysis .top_alarm p br.mo {display: block;}
}

@media (max-width:400px) {
    .comparativeAnalysis .top_alarm p {font-size: 14px;}
}


.comparativeAnalysis .top_map {display: flex; width: 100%; gap:30px; margin-bottom: 30px;}
.comparativeAnalysis .top_map .map_area {flex: 1; border:3px solid #6082A1; height: 620px; border-radius: 20px; background: #fff; overflow: hidden;}
.comparativeAnalysis .top_map .map_area .hd {display: flex; align-items: center; justify-content: space-between; width: 500px;; padding: 10px 20px 13px; border-bottom-right-radius: 15px;; background: #6082A1; color: #fff; margin-bottom: 20px;}
.comparativeAnalysis .top_map .map_area .hd span {font-size: 24px;}
.comparativeAnalysis .top_map .map_area .hd lable {font-size: 17px;}


.comparativeAnalysis .small_map_area {position: absolute; top: 10px; right: 10px; width: 250px; height: 230px; padding: 5px; background: #E4EDF2; border-radius: 10px; z-index: 1;}
.comparativeAnalysis .small_map_area .small_map {position: relative; display: flex; align-items: center; justify-content: center;width: 100%; height: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);}


.comparativeAnalysis .small_map .sm_map {position: relative; fill:#F1F2F6; stroke:#C0C3C6; cursor: pointer; pointer-events: all;}
.comparativeAnalysis .small_map .sm_map:hover {fill:#d3e7f8; stroke:#C0C3C6; }
.comparativeAnalysis .small_map .sm_map.active {fill:#4767B4;}
.comparativeAnalysis .small_map .gu_name {display: block; transition: 0.2s;}
.comparativeAnalysis .small_map .gu_name .point.active {color: #fff; text-shadow: 1px 1px 0px #4767B4, -1px -1px 0px #4767B4, -1px 1px 0px #4767B4, -1px 1px 0px #4767B4;}

.comparativeAnalysis .legend {position: absolute; top: 250px; right: 10px; padding: 5px 10px; background: #fff; border: 1px solid #E1E1E1; border-radius: 5px; font-family: 'Pretendard GOV'; }
.comparativeAnalysis .legend p.tit {font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 5px; pointer-events: none;}
.comparativeAnalysis .legend ul {pointer-events: none;}
.comparativeAnalysis .legend ul li {display: flex; font-size: 10px; font-weight: 400; color: #797979; margin-bottom: 5px; letter-spacing: -0.5px}
.comparativeAnalysis .legend .box {display: block; width: 22px; height: 11px; border: 1px solid #3D3D3D; margin-right: 5px;}

.comparativeAnalysis .small_map_area .small_map button.all_map {position: absolute; top: 5px; left: 5px; padding: 5px; background: #0055A2; border-radius: 5px; color: #fff; font-size: 16px; font-family:'Pretendard GOV'; }



.comparativeAnalysis .detail_map {padding-right: 200px; margin-left: 100px;}
.comparativeAnalysis .map_viwe {transition: 0s;}
.comparativeAnalysis .map_viwe:hover {filter: grayscale(0) drop-shadow(1px 1px 1px #555) hue-rotate(200deg); stroke-width:2; cursor: pointer;}

.comparativeAnalysis .map_viwe.active,.comparativeAnalysis .map_viwe.active:hover {/* animation: marker 1.5s infinite; */ animation-timing-function:step-end; stroke:#111; stroke-width:2;}



.comparativeAnalysis .standard {position: absolute; bottom: 30px; right: 10px; padding: 10px 15px; border-radius: 10px; background: #EFEFEF; color: #7d7d7d; font-size: 15px; font-family:  'Pretendard GOV';}
.comparativeAnalysis .standard span {display: inline-block;width: 60px; text-align: center;}



.comparativeAnalysis .compare {display: flex; gap:30px;}
.comparativeAnalysis .compare_area {flex: 1; width: calc(calc(100% - 30px) / 2);}
.comparativeAnalysis .compare_area > * {margin-bottom: 20px;}
.comparativeAnalysis .compare_area > *:last-child {margin-bottom: 0px;}

.comparativeAnalysis .titlebox  {position:relative; display: flex; align-items: center; justify-content: center;background: #0055A2; font-size: 20px; color: #fff; width: 100%; height: 40px; border-radius: 10px;}
.comparativeAnalysis .titlebox .year {position: absolute; right: 15px; font-size: 12px; font-family: 'Pretendard GOV'; color: #d3d3d3;}
.comparativeAnalysis .compare_area>.titlebox {display: none;}

.comparativeAnalysis .compare_area .box01 {display: flex; flex-direction: column; gap:15px; }
.comparativeAnalysis .compare_area .box01 .innerbox {display: flex; flex-direction: column; align-items: center;padding: 10px; gap:5px; white-space: nowrap;}
.comparativeAnalysis .compare_area .txt01 {font-family: 'Pretendard GOV'; color: #3D5D7A; font-size: 18px; font-weight: 700;  }
.comparativeAnalysis .compare_area .txt02 {display: flex; align-items: center;}
.comparativeAnalysis .compare_area .txt02 span {font-family: 'Montserrat'; font-size: 30px; font-weight: 600; margin-right: 5px; letter-spacing: -1px;}
.comparativeAnalysis .compare_area .txt02 small {font-size: 18px;}
.comparativeAnalysis .compare_area .txt03 {display: flex; align-items: flex-end; padding: 5px 20px; background: #EDEDED; font-size: 13px; border-radius: 20px;}
.comparativeAnalysis .compare_area .txt03 .arrow_up {display: inline-block;width: 11px; height: 7px; margin: 0 0px 4px 5px; background: url(../images/arrow_up.png);}
.comparativeAnalysis .compare_area .txt03 .arrow_down {display: inline-block;width: 11px; height: 7px; margin: 0 0px 4px 5px; background: url(../images/arrow_down.png);}
.comparativeAnalysis .compare_area .txt03 .figures {font-size: 15px; margin-left: 5px;}

.comparativeAnalysis .compare_area .ty01 .innerbox {width: 100%; flex-direction: row; justify-content: center; gap:20px;}

.comparativeAnalysis .compare_area .ty02 {display: flex; gap:10px}
.comparativeAnalysis .compare_area .ty02 .innerbox {width: calc(calc(100% - 40px) / 5);}

.comparativeAnalysis .compare_area .ty03 {display: flex; gap:10px}
.comparativeAnalysis .compare_area .ty03 .innerbox {width: calc(calc(100% - 10px) / 2);}

.comparativeAnalysis .compare_area .ty04 {display: flex; gap:10px}
.comparativeAnalysis .compare_area .ty04 .ty05 {display: flex; flex-direction: column; width: calc(calc(100% - 10px) / 3); gap:10px;}
.comparativeAnalysis .compare_area .ty04 .ty05 .titlebox {font-size: 18px;}


.comparativeAnalysis .compare_area .innerbox {border: 2px solid #D4D4D4; border-radius: 10px; background: #fff; overflow: hidden;}
.comparativeAnalysis .compare_area .innerbox .titname {display: flex; align-items: center; width: 100%; height: 40px; padding: 0 15px; background: #F3F4FD; border-bottom: 2px solid #D4D4D4;}
.comparativeAnalysis .compare_area .innerbox .titname p {font-size: 18px; line-height: 1.3; color: #3D5D7A;}
.comparativeAnalysis .compare_area .innerbox .titname select {width: 100px; margin-left: 10px;}
.comparativeAnalysis .compare_area .innerbox .graph {height: 220px; padding: 10px;}

.comparativeAnalysis .compare_area .btn_area {display: flex; gap: 10px; margin-bottom: 10px;}
.comparativeAnalysis .compare_area .btn_area  button {padding: 7px 20px; border: 2px solid #6082A1; border-radius: 5px; color: #0055A2; font-size: 16px; background: #fff; font-weight: 500;}
.comparativeAnalysis .compare_area .btn_area  button.active,.comparativeAnalysis .compare_area .btn_area  button:hover {background: #0055A2; color: #fff; border:2px solid #00417B;}

/*창원 전체(행정구)*/
.comparativeAnalysis .point_name.changwon > * {width: 60px;}
.comparativeAnalysis .point_name.changwon .no01 {top:70%; left: 22%;}
.comparativeAnalysis .point_name.changwon .no02 {top:44%; left: 34%;}
.comparativeAnalysis .point_name.changwon .no03 {top:53%; left: 59%;}
.comparativeAnalysis .point_name.changwon .no04 {top:27%; left: 54%;}
.comparativeAnalysis .point_name.changwon .no05 {top:71%; left: 74%;}


/*창원 전체(행정동)*/
.comparativeAnalysis .point_name.all_changwon > * {width: 60px; display: none; }
.comparativeAnalysis .point_name.all_changwon .point.active {display: block; z-index: 20; font-size: 14px;} 
.comparativeAnalysis .point_name.all_changwon .point.current {display: block;} 

.comparativeAnalysis .point_name.all_changwon .no01 {top:70%; left: 2%;}
.comparativeAnalysis .point_name.all_changwon .no02 {top:66%; left: 16%;}
.comparativeAnalysis .point_name.all_changwon .no03 {top:68%; left: 26%;}
.comparativeAnalysis .point_name.all_changwon .no04 {top:75%; left: 38%;}
.comparativeAnalysis .point_name.all_changwon .no05 {top:65%; left: 34%;}
.comparativeAnalysis .point_name.all_changwon .no06 {top:63%; left: 38%;}
.comparativeAnalysis .point_name.all_changwon .no07 {top:59%; left: 35%;}
.comparativeAnalysis .point_name.all_changwon .no08 {top:57%; left: 34%;}
.comparativeAnalysis .point_name.all_changwon .no09 {top:54%; left: 33%;}
.comparativeAnalysis .point_name.all_changwon .no10 {top:54%; left: 36%;}
.comparativeAnalysis .point_name.all_changwon .no11 {top:52%; left: 35%;}
.comparativeAnalysis .point_name.all_changwon .no12 {top:51%; left: 34%;}
.comparativeAnalysis .point_name.all_changwon .no13 {top:53%; left: 37%;}
.comparativeAnalysis .point_name.all_changwon .no14 {top:51%; left: 38%;}
.comparativeAnalysis .point_name.all_changwon .no15 {top:49%; left: 38%;}

.comparativeAnalysis .y2019 .point_name.all_changwon .no16 {top:49%; left: 37%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no16 {top:49%; left: 37%;}


.comparativeAnalysis .point_name.all_changwon .no21 {top:47%; left: 24%;}
.comparativeAnalysis .point_name.all_changwon .no22 {top:45%; left: 32%;}
.comparativeAnalysis .point_name.all_changwon .no23 {top:49%; left: 34%;}
.comparativeAnalysis .point_name.all_changwon .no24 {top:46%; left: 37%;}
.comparativeAnalysis .point_name.all_changwon .no25 {top:49%; left: 37%;}
.comparativeAnalysis .point_name.all_changwon .no26 {top:47%; left: 39%;}
.comparativeAnalysis .point_name.all_changwon .no27 {top:45%; left: 40%;}
.comparativeAnalysis .point_name.all_changwon .no28 {top:41%; left: 37%;}
.comparativeAnalysis .point_name.all_changwon .no29 {top:39%; left: 39%;}
.comparativeAnalysis .point_name.all_changwon .no30 {top:41%; left: 42%;}
.comparativeAnalysis .point_name.all_changwon .no31 {top:44%; left: 41%;}
.comparativeAnalysis .point_name.all_changwon .no32 {top:47%; left: 43%;}


.comparativeAnalysis .point_name.all_changwon .no41 {top:55%; left: 49%;}
.comparativeAnalysis .point_name.all_changwon .no42 {top:47%; left: 54%;}
.comparativeAnalysis .point_name.all_changwon .no43 {top:57%; left: 66%;}
.comparativeAnalysis .point_name.all_changwon .no44 {top:44%; left: 55%;}
.comparativeAnalysis .point_name.all_changwon .no45 {top:45%; left: 59%;}
.comparativeAnalysis .point_name.all_changwon .no46 {top:51%; left: 61%;}
.comparativeAnalysis .point_name.all_changwon .no47 {top:49%; left: 60%;}
.comparativeAnalysis .point_name.all_changwon .no48 {top:47%; left: 64%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no42 {top:47%; left: 56%;}

.comparativeAnalysis .point_name.all_changwon .no51 {top:44%; left: 47%;}
.comparativeAnalysis .point_name.all_changwon .no52 {top:37%; left: 44%;}
.comparativeAnalysis .point_name.all_changwon .no53 {top:40%; left: 52%;}
.comparativeAnalysis .point_name.all_changwon .no54 {top:41%; left: 60%;}
.comparativeAnalysis .point_name.all_changwon .no55 {top:24%; left: 44%;}
.comparativeAnalysis .point_name.all_changwon .no56 {top:29%; left: 55%;}
.comparativeAnalysis .point_name.all_changwon .no57 {top:19%; left: 65%;}

.comparativeAnalysis .y2020 .point_name.all_changwon .no58 {top:45%; left: 60%;}
.comparativeAnalysis .y2019 .point_name.all_changwon .no58 {top:45%; left: 60%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no51 {top:45%; left: 49%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no58 {top:45%; left: 60%;}

.comparativeAnalysis .point_name.all_changwon .no61 {top:66%; left: 50%;}
.comparativeAnalysis .point_name.all_changwon .no62 {top:62%; left: 56%;}
.comparativeAnalysis .point_name.all_changwon .no63 {top:65%; left: 58%;}
.comparativeAnalysis .point_name.all_changwon .no64 {top:63%; left: 60%;}
.comparativeAnalysis .point_name.all_changwon .no65 {top:64%; left: 62%;}
.comparativeAnalysis .point_name.all_changwon .no66 {top:63%; left: 64%;}
.comparativeAnalysis .point_name.all_changwon .no67 {top:65%; left: 68%;}
.comparativeAnalysis .point_name.all_changwon .no68 {top:66%; left: 64%;}
.comparativeAnalysis .point_name.all_changwon .no69 {top:68%; left: 65%;}
.comparativeAnalysis .point_name.all_changwon .no70 {top:72%; left: 65%;}
.comparativeAnalysis .point_name.all_changwon .no71 {top:76%; left: 73%;}
.comparativeAnalysis .point_name.all_changwon .no72 {top:68%; left: 79%;}

.comparativeAnalysis .point_name.all_changwon .no73 {top:76%; left: 88%;}
.comparativeAnalysis .y2019 .point_name.all_changwon .no61 {top:66%; left: 57%;}
.comparativeAnalysis .y2019 .point_name.all_changwon .no74 {top:69%; left: 57%;}
.comparativeAnalysis .y2019 .point_name.all_changwon .no75 {top:65%; left: 51%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no61 {top:66%; left: 57%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no74 {top:69%; left: 57%;}
.comparativeAnalysis .y2018 .point_name.all_changwon .no75 {top:65%; left: 51%;}



/*마산합포구 */
.comparativeAnalysis .point_name.masan_happo-gu .no01 {top:64%; left: 11%;}
.comparativeAnalysis .point_name.masan_happo-gu .no02 {top:60%; left: 32%;}
.comparativeAnalysis .point_name.masan_happo-gu .no03 {top:58%; left: 52%;}
.comparativeAnalysis .point_name.masan_happo-gu .no04 {top:74%; left: 72%;}
.comparativeAnalysis .point_name.masan_happo-gu .no05 {top:58%; left: 65%;}
.comparativeAnalysis .point_name.masan_happo-gu .no06 {top:51%; left: 71%;}
.comparativeAnalysis .point_name.masan_happo-gu .no07 {top:43%; left: 65%;}
.comparativeAnalysis .point_name.masan_happo-gu .no08 {top:33%; left: 61%;}
.comparativeAnalysis .point_name.masan_happo-gu .no09 {top:24%; left: 59%;}
.comparativeAnalysis .point_name.masan_happo-gu .no10 {top:27%; left: 69%;}
.comparativeAnalysis .point_name.masan_happo-gu .no11 {top:17%; left: 67%;}
.comparativeAnalysis .point_name.masan_happo-gu .no12 {top:12%; left: 65%;}
.comparativeAnalysis .point_name.masan_happo-gu .no13 {top:18%; left: 77%;}
.comparativeAnalysis .point_name.masan_happo-gu .no14 {top:11%; left: 81.5%;}
.comparativeAnalysis .point_name.masan_happo-gu .no15 {top:6%; left: 83.5%;}
.comparativeAnalysis .y2019 .point_name.masan_happo-gu .no16 {top:9%; left: 73.5%;}
.comparativeAnalysis .y2018 .point_name.masan_happo-gu .no16 {top:9%; left: 73.5%;}
/*마산회원구*/
.comparativeAnalysis .point_name.masanhoewon-gu .no01 {top:43%; left: 19%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no02 {top:41%; left: 46%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no03 {top:54%; left: 49.5%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no04 {top:54%; left: 60%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no05 {top:45%; left: 59.5%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no06 {top:50%; left: 68%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no07 {top:44%; left: 70%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no08 {top:30%; left: 60%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no09 {top:39%; left: 73%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no10 {top:26%; left: 72%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no11 {top:30%; left: 75%;}
.comparativeAnalysis .point_name.masanhoewon-gu .no12 {top:48%; left: 81%;}
/*성산*/
.comparativeAnalysis .point_name.seongsan .no01 {top:50%; left: 29%;}
.comparativeAnalysis .point_name.seongsan .no02 {top:56%; left: 70%;}
.comparativeAnalysis .point_name.seongsan .no03 {top:40%; left: 59%;}
.comparativeAnalysis .point_name.seongsan .no04 {top:33.5%; left: 55%;}
.comparativeAnalysis .point_name.seongsan .no05 {top:29%; left: 38%;}
.comparativeAnalysis .point_name.seongsan .no06 {top:30%; left: 68%;}
.comparativeAnalysis .point_name.seongsan .no07 {top:23%; left: 52%;}
.comparativeAnalysis .point_name.seongsan .no08 {top:17%; left: 41%;}
.comparativeAnalysis .y2020 .point_name.seongsan .no05 {top:31%; left: 42%;}
.comparativeAnalysis .y2020 .point_name.seongsan .no08 {top:17%; left: 39%;}
.comparativeAnalysis .y2019 .point_name.seongsan .no05 {top:31%; left: 42%;}
.comparativeAnalysis .y2019 .point_name.seongsan .no08 {top:17%; left: 39%;}
.comparativeAnalysis .y2018 .point_name.seongsan .no05 {top:31%; left: 42%;}
.comparativeAnalysis .y2018 .point_name.seongsan .no08 {top:17%; left: 39%;}
/*의창구*/
.comparativeAnalysis .point_name.uichang-gu .no01 {top:37%; left: 22%;}
.comparativeAnalysis .point_name.uichang-gu .no02 {top:46%; left: 47%;}
.comparativeAnalysis .point_name.uichang-gu .no03 {top:29%; left: 69%;}
.comparativeAnalysis .point_name.uichang-gu .no04 {top:86%; left: 29%;}
.comparativeAnalysis .point_name.uichang-gu .no05 {top:70%; left: 23%;}
.comparativeAnalysis .point_name.uichang-gu .no06 {top:76%; left: 39%;}
.comparativeAnalysis .point_name.uichang-gu .no07 {top:79%; left: 58%;}
.comparativeAnalysis .y2020 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
.comparativeAnalysis .y2020 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
.comparativeAnalysis .y2019 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
.comparativeAnalysis .y2019 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
.comparativeAnalysis .y2018 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
.comparativeAnalysis .y2018 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
/* 진해 */
.comparativeAnalysis .point_name.jinhae .no01 {top:30%; left: 8%;}
.comparativeAnalysis .point_name.jinhae .no02 {top:23%; left: 17%;}
.comparativeAnalysis .point_name.jinhae .no03 {top:31%; left: 22%;}
.comparativeAnalysis .point_name.jinhae .no04 {top:25%; left: 25%;}
.comparativeAnalysis .point_name.jinhae .no05 {top:28%; left: 30%;}
.comparativeAnalysis .point_name.jinhae .no06 {top:27%; left: 36%;}
.comparativeAnalysis .point_name.jinhae .no07 {top:31%; left: 45%;}
.comparativeAnalysis .point_name.jinhae .no08 {top:33.5%; left: 33%;}
.comparativeAnalysis .point_name.jinhae .no09 {top:37%; left: 36%;}
.comparativeAnalysis .point_name.jinhae .no10 {top:43%; left: 39%;}
.comparativeAnalysis .point_name.jinhae .no11 {top:47%; left: 51%;}
.comparativeAnalysis .point_name.jinhae .no12 {top:37%; left: 67%;}
.comparativeAnalysis .point_name.jinhae .no13 {top:52%; left: 83%;}
.comparativeAnalysis .y2019 .point_name.jinhae .no01 {top:35%; left: 18%;}
.comparativeAnalysis .y2019 .point_name.jinhae .no14 {top:42%; left: 19%;}
.comparativeAnalysis .y2019 .point_name.jinhae .no15 {top:30%; left: 8%;}
.comparativeAnalysis .y2018 .point_name.jinhae .no01 {top:35%; left: 18%;}
.comparativeAnalysis .y2018 .point_name.jinhae .no14 {top:42%; left: 19%;}
.comparativeAnalysis .y2018 .point_name.jinhae .no15 {top:30%; left: 8%;}




@media (max-width:1840px) {
    .comparativeAnalysis .detail_map {padding-right: 200px; margin-left: 10px;}
    
    .comparativeAnalysis .compare_area .ty02 {flex-wrap: wrap;}
    .comparativeAnalysis .compare_area .ty02 .innerbox:nth-child(n+0) {width: calc(calc(100% - 10px) / 2);}
    .comparativeAnalysis .compare_area .ty02 .innerbox:nth-child(n+3) {width: calc(calc(100% - 20px) / 3);}
    
}


@media (max-width:1600px) {
    .comparativeAnalysis .top_map .map_area .hd {position: relative;  width: 400px; z-index: 2;}
    .comparativeAnalysis .detail_map {padding-right: 170px;}
    
    .comparativeAnalysis .small_map_area {width: 220px; height: 200px; }
}

@media (max-width:1400px) {
    .comparativeAnalysis .top_map .map_area {height: 480px;}
    .comparativeAnalysis .detail_map {max-width: 400px; padding-right: 0; margin-left: 10px;}
    
    .comparativeAnalysis .compare_area .box01 .in_box {width: calc(calc(100% - 15px) / 2 ); }
    
    .comparativeAnalysis .legend {top:215px;}
}

@media (max-width:1300px) {
    .comparativeAnalysis .top_map .map_area {height: 450px;}
    .comparativeAnalysis .detail_map {max-width: 360px; padding-right: 0; margin-left: 10px;}

}

@media (max-width:1240px) {
    .comparativeAnalysis .top_map {flex-direction: column; gap:15px; }
    .comparativeAnalysis .top_map .map_area {height: 490px;}
    .comparativeAnalysis .detail_map { width: 100%; max-width: inherit; padding-right: 200px;; padding-bottom: 20px; }
    .comparativeAnalysis .detail_map .map_area01 {position: relative;}
}

@media (max-width:1200px) {
	.comparativeAnalysis .compare_area {width: 100%;}
    .comparativeAnalysis .compare_area > * {margin-bottom: 15px; }
    .comparativeAnalysis .compare_area>.titlebox {display: flex;}
    .comparativeAnalysis .compare {flex-direction: column;}
}
@media (max-width:1024px) {
    .comparativeAnalysis .top_alarm p {padding-right: 0;}
}
@media (max-width:670px) {
    #wrap.comparativeAnalysis {padding: 30px 15px;}
    
    .comparativeAnalysis .top_map .map_area .hd {width: 100%; border-radius: initial;}
    .comparativeAnalysis .top_map .map_area .hd span {font-size: 18px;}
    .comparativeAnalysis .detail_map {margin-top: 200px;}
    .comparativeAnalysis .small_map_area {left: 10px; top: 60px;}
    .comparativeAnalysis .detail_map {padding-right: 0;}
    .comparativeAnalysis .standard {right: 10px; bottom: inherit; top: 60px; z-index: 1;}
    
    .comparativeAnalysis .titlebox {font-size: 16px;}
    
    .comparativeAnalysis .legend {top:100px;}
}



@media (max-width:500px) {
    .comparativeAnalysis .compare_area .ty01 .innerbox {flex-direction: column; gap:5px;}
    .comparativeAnalysis .compare_area .ty02 .innerbox:nth-child(n+0) {width: 100%;}
    .comparativeAnalysis .compare_area .ty03  {flex-direction: column;}
    .comparativeAnalysis .compare_area .ty03 .innerbox {width: 100%;}
    .comparativeAnalysis .compare_area .ty04  {flex-direction: column;}
    .comparativeAnalysis .compare_area .ty04 .ty05 {width: 100%;}
    .comparativeAnalysis .compare_area .innerbox .titname p {font-size: 16px;}   
}

@media (max-width:440px) {
	.comparativeAnalysis .legend {position:relative; top: 0; right: inherit; margin-bottom: 10px; left: 10px;}
	
}

@media (max-width:380px) {
	.comparativeAnalysis .top_map .map_area .hd {flex-direction: column; padding: 5px 20px 8px;}
	.comparativeAnalysis .top_map .map_area .hd .select {margin-top: 5px;}
	.comparativeAnalysis .small_map_area {top:75px;}
	.comparativeAnalysis .standard {top:75px;}
}


/* 팝업 */
.popup_bg {position: fixed; display: none; align-items: center; justify-content: center;width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); z-index: 10;}
.popup_area {width: calc(100% - 40px); max-width: 800px; min-height: 380px; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}

.popup_area .popup_hd { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 15px;; width: 100%; height: 40px; background: #6B769A; font-size: 18px; color: #fff;}
.popup_area .popup_hd .close {width: 30px; height: 30px; background: url(../images/closed_w.png) no-repeat center; opacity: 1;}
.popup_area .popup_hd .select_area {display: flex; gap:10px;} 


.popup_body {height: calc(100% - 40px); padding: 15px 15px 15px;}
.popup_body > * {margin-bottom: 10px; font-family: 'Pretendard GOV';}
.popup_body > *:last-child {margin-bottom: 0px; }
.popup_body .titlebox {display: flex; align-items: center; justify-content: center;background: #0055A2; font-size: 20px; color: #fff; width: 100%; height: 40px; border-radius: 10px;}
.popup_body .titlebox strong {color: #FFC934;}

.popup_body .innerbox {border: 2px solid #D4D4D4; border-radius: 10px;  overflow: hidden;}
.popup_body .innerbox .titname {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 15px; background: #F3F4FD; border-bottom: 2px solid #D4D4D4;}
.popup_body .innerbox .titname p {font-size: 18px; line-height: 1.3; color: #3D5D7A;}
.popup_body .innerbox.graph {border: none;}
.popub_body .innerbox .graph {min-height: 230px;}


/* 로딩바 */
.loding_bar {position: fixed; top:0; display: flex; align-content: center; align-items: center; width: 100%; height: 100%; z-index: 100; background: rgba(255, 255, 255, 0.5);}
.loding_bar img {width:100%; max-width: 400px; background: rgba(255, 255, 255, 0.5); filter: drop-shadow(2px 2px 0px rgba(255, 255, 255, 1));}
           







/* 분석 시스템 -------------------------------------------------------------------------------------------------------------- */
#wrap.analysisSystem {position: relative; height: auto; min-height: calc(100vh - 80px); display: flex;  background: #F3FDFF; font-family:  'Pretendard GOV'; overflow: hidden;}
#wrap.analysisSystem .map_area{ width: 100%; height: calc(100vh - 80px); overflow: hidden; }


.search_box {position: absolute; left: -488px; top: 30px;  background:url(../images/cw_bg.png) #0055A2 no-repeat; border-radius: 15px; transition: 0.4s; z-index: 10;}
.search_box.active {left: 30px;}
.search_viwe_btn {position: absolute; right: -66px; top: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #0055A2; border-radius: 15px; cursor: pointer;}
.search_viwe_btn:hover {background: #00407b;}
.search_viwe_btn span {width: 16px; height: 29px; background: url(../images/aroow_lr.png);}
.search_viwe_btn.active span {transform: rotateY(180deg);}

.search_box .box_hd {;padding: 10px 10px 5px; color: #fff; font-size: 24px; text-align: center;}
.search_box .box_hd strong {color: #FFF39A;}

.search_box .box_body {background: #fff;  margin: 5px; padding: 20px; border-radius: 15px 15px 12px 12px;}
.search_box .box_body > div {margin-bottom: 20px;}
.search_box .box_body > div:last-child {margin-bottom: 0px;}
.search_box .box_body h3 {margin-bottom: 10px; padding-left: 35px;  background: url(../images/marker01.png) no-repeat; font-size:19px;}
.search_box .box_body h5 {font-size:14px;}
.docs-datepicker .docs-date {width: 210px; height: 40px; font-size: 17px;}

.search_box .search_con {display: flex;}
.search_box .select_area {flex: 1; display: flex; flex-direction: column; gap:10px; margin-right: 10px;}
.search_box .select_area > div {display: flex; align-items: center; }
.search_box .select_area > div label {margin-right: 10px; color: #5f5f5f; font-size: 17px;}
.search_box .select_area > div select {flex: 1; height: 40px; font-size: 17px;}
.search_box .select_area > div input[type=text] {flex: 1; height: 34px; font-size: 17px;}
.search_box .search_con button {background: url(../images/search_big.png) #6085A7 no-repeat center; width: 70px; margin: 3px 0; border: 2px solid #3D6488; border-radius: 7px;}
.search_box .search_con button:hover {background: url(../images/search_big.png) #4b7093 no-repeat center;}
.search_box .btn_area {display: flex; justify-content: space-between; }
.search_box .btn_area button {width: calc(50% - 5px); height: 40px; border-radius: 7px; text-align: center; font-weight: 600; font-size: 17px; box-sizing: border-box; border : 2px solid #0055A2; color:}

.search_box .btn_area button.polygon {background: #0055A2; color: #fff;}
.search_box .btn_area button.polygon.active,.search_box .btn_area button.polygon.active:hover {background: #119f54; border: 2px solid #1bf12e;} 
.search_box .btn_area button.polygon img {filter: brightness(100);}
.search_box .btn_area button.polygon:hover {background: #023f76; color: #fff;}
.search_box .btn_area button.cancel {border : 2px solid #0055A2; color: #0055A2; }
.search_box .btn_area button.cancel:hover {background: #e7f1fa;}
.search_box button.analyze {width: 100%; height: 50px; background: #0055A2; border-radius: 10px; color: #fff; text-align: center; font-size: 20px; font-weight: 600;}
.search_box button.analyze:hover {background: #00407b;}
.search_box button.analyze.active,.search_box button.analyze.active:hover {background: #119f54; border: 2px solid #1bf12e;}
.search_box button.analyze.inactive {background: #d1d1d1; cursor: inherit;}
.search_box button.analyze.inactive:hover {background: #d1d1d1;}


.analysis_report {position: absolute; right: 50px; top: 30px; width: 760px; background: #fff;  transition: 0.5s; border-radius: 15px; height: calc(100vh - 150px); box-shadow: 0px 0px 10px rgba(107, 107, 107, 0.5); z-index: 10; }
.analysis_report.hide {right: -760px; }

.report_viwe_btn {position: absolute; left: -66px; top: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #0055A2; border-radius: 15px; cursor: pointer;}
.report_viwe_btn:hover {background: #00407b;}
.report_viwe_btn span {width: 26px; height: 26px; background: url(/roda/images/Fold.png);}
.report_viwe_btn.active span {transform: rotateY(180deg);}

.analysis_report .box_hd {padding: 8px 10px 8px; background: #0055A2; border:2px solid #00417C; color: #fff; font-size: 24px; text-align: center; border-radius: 15px 15px 0 0;}
.analysis_report .box_body {padding: 20px 0; height: calc(100% - 55px); }

.analysis_report ul.hd_tabs {display: flex;  margin-bottom: 15px; padding: 0 20px;}
.analysis_report ul.hd_tabs li {display: flex;align-items: center; justify-content: center; flex: 1; height: 50px; padding: 10px; border: 2px solid #CACACA; border-right: none; font-size: 18px; color: #404040;  cursor: pointer;}
.analysis_report ul.hd_tabs li:last-child {border-right: 2px solid #CACACA;}
.analysis_report ul.hd_tabs li.current{border: none; border: 2px solid #0055A2; background: #E7F3FF; color: #0055a2; font-size: 20px; font-weight: 600;}
.analysis_report ul.hd_tabs li.current + li {border-left: none; }
.analysis_report ul.hd_tabs li:hover {color: #0055a2; font-size: 20px; font-weight: 600;}

.analysis_report .tab-content01{ display: none; padding: 0px 11px 0px 20px; width: 100%; height: calc(100% - 60px); overflow: auto;}
.analysis_report .tab-content01.current{display: inherit;}

.analysis_report .report_area {height: 1000px;}
.analysis_report .report_area > * {margin-bottom: 15px;}
.analysis_report .report_area > *:last-child {margin-bottom: 0px;}


.report_area .condition {margin-bottom: 20px; padding: 10px 15px; border: 1px solid #E7E7E7; background: #F4F5F7; border-radius: 8px;}
.report_area .condition .gro {display: block; margin-right: 25px; font-size: 18px; letter-spacing: -1px; margin-bottom: 5px;}
.report_area .condition .gro:last-child {margin-right: 0; margin-bottom: 0px;}
.report_area .condition .gro span {display: inline-block;}
.report_area .condition .gro .tx01 {margin-right: 5px; padding:5px 12px; min-width: 100px; background: #D9D9D9; border-radius: 20px; color: #404040; text-align: center;}
.report_area .condition .gro .tx02 { color: #BF0606;}


.report_area .line_tit {display: flex; justify-content: space-between; padding-left: 35px; padding-bottom: 10px; margin-top: 20px; border-bottom: 1px solid #b1b1b1; font-size: 20px; font-weight: bold; line-height: 25px;}
.report_area .line_tit.ty01 {background: url(../images/icon/tx_marker01.png) no-repeat ;} 
.report_area .line_tit.ty02 {background: url(../images/icon/tx_marker02.png) no-repeat ;} 
.report_area .line_tit.ty03 {background: url(../images/icon/tx_marker03.png) no-repeat ;} 
.report_area .line_tit.ty04 {background: url(../images/icon/tx_marker04.png) no-repeat ;} 
.report_area .line_tit.ty05 {background: url(../images/icon/tx_marker05.png) no-repeat ;} 
.report_area .line_tit.ty06 {background: url(../images/icon/tx_marker06.png) no-repeat ;} 
.report_area .line_tit.ty07 {background: url(../images/icon/tx_marker07.png) no-repeat ;} 
.report_area .line_tit.ty08 {background: url(../images/icon/tx_marker08.png) no-repeat ;} 
.report_area .line_tit .smtxt {font-size: 13px; color: #0055A2;font-weight: 500;}


.report_area .line_tit01 {display: flex; justify-content: space-between; padding-left: 20px; background: url(../images/icon/tx_marker10.png) no-repeat ; font-size: 15px; font-weight: bold; line-height: 20px;}
.report_area .line_tit01 .options span {margin-right: 3px; font-size: 12px; color: #797979;display: inline-block;}
.report_area .line_tit01 .options button { padding: 4px 30px 2px 10px; background: url(../images/btn_down.png) no-repeat; background-position: right 10px center; border: 1px solid #004686; border-radius: 5px; font-size: 13px; color: #0055A2;  font-weight: 500;}
.report_area .line_tit01 .options button:hover {background: url(../images/btn_down.png)#ddeaf5 no-repeat; background-position: right 10px center;}


.report_area .ana_box01 {display: flex; gap:10px;} 
.report_area .ana_box01 .inbox {flex: 1;} 
.report_area .ana_box01 .inbox .inbox_hd {margin-bottom: 5px; padding: 10px; background: #E7F3FF; border: 2px solid #0055A2; border-bottom: none; text-align: center; color: #0055A2; font-size: 18px; font-weight: bold;} 
.report_area .ana_box01 .inbox .inbox_body {padding: 18px; border: 2px solid #EDEDED; text-align: center;}
.report_area .ana_box01 .inbox .inbox_body p {font-size: 36px; color: #FF2A0E; font-family:'Montserrat'; line-height: 1; font-weight:600;}
.report_area .ana_box01 .inbox .inbox_body p span {display: inline-block;margin-left: 5px; padding-bottom: 2px; font-size: 17px; color: #595959; font-weight: 600; vertical-align: bottom; font-family:  'Pretendard GOV'}


.report_area .ana_box02 {display: flex; gap:10px;} 
.report_area .ana_box02 .inbox {flex: 1; border: 2px solid #CECECE; border-radius: 7px;} 
.report_area .ana_box02 .inbox .inbox_hd {margin: 0 10px; padding: 10px; background: #CECECE; border-radius: 0 0 7px 7px;  text-align: center; color: #0055A2; font-size: 15px; font-weight: 600; color: #404040;} 
.report_area .ana_box02 .inbox .inbox_body {padding: 10px;  text-align: center; }
.report_area .ana_box02 .inbox .inbox_body .tx01 {font-size: 18px; color: #0055A2; font-weight:600; line-height: 1.2;}
.report_area .ana_box02 .inbox .inbox_body .tx02 {font-size: 15px; color: #595959; font-weight:600;line-height: 1.2;}


.report_area .summary_box {padding: 15px; border: 1px solid #D6D6D6; background: #F5F5F5; border-radius: 10px;}
.report_area .summary_box li {margin-bottom: 8px; padding-left: 15px; background: url(../images/icon/tx_marker11.png) no-repeat; background-position: top 1px left 0px; line-height: 1.2; font-size: 14px; }
.report_area .summary_box li:last-child {margin-bottom: 0;}
.report_area .summary_box li .col01 {color: #0055A2;}
.report_area .summary_box li .col02 {color: #FF2A0E;}

.report_area .graph {width: 100%; height: auto; }
.report_area .graph img {}

.popup_area.search_popup .popup_hd {background: #EBEBEB; color: #555; }
.popup_area.search_popup .popup_hd .close { background: url(../images/closed.png) no-repeat center;}

.popup_area.search_popup .popup_body {font-family: 'Pretendard GOV'; }

.popup_area.search_popup ul.industry01 {display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.popup_area.search_popup ul.industry01 li {position: relative; display: flex; flex-direction: column; align-items: center; padding: 15px 10px 10px; width: 20%; /*outline: 2px solid #CACACA;*/ cursor: pointer;}
.popup_area.search_popup ul.industry01 li:before  {content: "";position: absolute; top: 2px; left: 0px; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #CACACA; z-index: 1;}
.popup_area.search_popup ul.industry01 li img {margin-bottom: 10px; filter: grayscale(1) brightness(2);}
.popup_area.search_popup ul.industry01 li span {font-size: 14px;}

.popup_area.search_popup ul.industry01 li:hover:before,.popup_area.search_popup ul.industry01 li.active:before  {
    content: "";position: absolute; top: 2px; left: 0px; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #0055A2; z-index: 2;}
.popup_area.search_popup ul.industry01 li.active {background: #E7F3FF;}
.popup_area.search_popup ul.industry01 li.active img {filter: none;}
.popup_area.search_popup ul.industry01 li.active span {color: #0055A2; font-weight: bold;}

.popup_area.search_popup ul.industry02 {display: flex; align-items: flex-start; flex-wrap: wrap; gap:10px; min-height:90px;  margin-bottom: 10px;}
.popup_area.search_popup ul.industry02 li {width: calc(calc(100% - 30px) / 4); padding: 10px 10px; border: 1px solid #DBDBDB; border-radius: 8px; font-size:14px; background: #F4F5F7; text-align: center; cursor: pointer;}
.popup_area.search_popup ul.industry02 li.active,.popup_area.search_popup ul.industry02 li:hover {border: 1px solid #3D6488; background: #E8EFFF; font-weight: bold; color: #3D6488;}

.popup_area.search_popup .btn_area { display: flex; justify-content: center;}
.popup_area.search_popup .btn_area button { height: 50px; width: 200px; background: #023A8C; text-align: center; border-radius: 5px; color: #fff; font-size: 20px; font-weight: 600;}
.popup_area.search_popup .btn_area button:hover {background: #01255a;}


.testmap {width: 100%; height: 100%; background: url(../images/map_bg.png);}
.testmap.active {background: url(../images/map_bg02.png);}






/*창원 포탈 ---------------------------------------------------------------------------------------------------------------*/
#wrap.potal {height: auto; min-height: calc(100vh - 80px); width: 100%; display: flex;  background: #F3FDFF; }

#wrap.potal .map_area_top h2 {position: relative; color: #595686; font-size: 44px; padding: 0px 0px 20px 10px;}
#wrap.potal .map_area_top h2 span {font-size: 38px; font-weight: 600;}
#wrap.potal .map_area_top h2 strong {font-size: 42px; color: #0055A2;}

@media (max-width:1024px) {
    #wrap.dataVisualization { margin-top: 50px;}
}

/* 좌측영역 */
#wrap.potal .left_map {position: relative;  width: 750px; min-width: 750px; height: 100%; min-height: calc(100vh - 80px); padding: 30px 0 10px 30px; overflow: hidden;}


.potal .left_map .map_area_top {position: relative; display: flex; align-items: flex-start; flex-direction: column;}
.potal .left_map .map_area_top .small_map_area {position: relative; width: 250px; height: 230px; padding: 5px; background: #E4EDF2; border-radius: 10px; z-index: 1;}
.potal .left_map .map_area_top .small_map_area .small_map {position: relative; display: flex; align-items: center; justify-content: center;width: 100%; height: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);}

.potal .left_map .map_area_top .small_map_area .small_map button.all_map {position: absolute; top: 5px; left: 5px; padding: 5px; background: #0055A2; border-radius: 5px; color: #fff; font-size: 16px; font-family:'Pretendard GOV'; }
.potal .left_map .map_area_top .small_map_area .small_map button.all_map:hover {background: #003c72;}



.potal .top_btn_area {position: absolute; display: flex; top:65px; right: 30px; gap:20px;}
.potal .top_btn_area>button {position: relative; height: 46px; padding: 12px 25px 12px 50px; border-radius: 8px; background: #C5C5C5; color: #595959; font-size: 18px; color: #595959; font-weight: 600; text-align: center; font-family: 'Pretendard GOV'; box-sizing: border-box;}
.potal .top_btn_area button.btn01:after {content: url(../images/btn_icon01_1.png); position: absolute; left: 10px;top:5px}
.potal .top_btn_area button.btn01.active,.potal .top_btn_area button.btn01:hover {background: #D43450; color: #fff;}
.potal .top_btn_area button.btn01.active:after,.potal .top_btn_area button.btn01:hover:after {content: url(../images/btn_icon01.png);}

.potal .top_btn_area button.btn02:after {content: url(../images/btn_icon02_1.png); position: absolute; left: 10px;top:5px}
.potal .top_btn_area button.btn02.active,.potal .top_btn_area button.btn02:hover {background: #1843ca; color: #fff;}
.potal .top_btn_area button.btn02.active:after,.potal .top_btn_area button.btn02:hover:after {content: url(../images/btn_icon02.png);}

.potal .top_btn_area .year_select {position: absolute; right: 0; top:56px; display: flex; align-items: center; width: 410px; padding: 5px 0; gap:10px;}
.potal .top_btn_area .year_select label {font-size: 18px; margin-right: 5px;}
.potal .top_btn_area .year_select select.year {width: 90px; padding-top: 0px; font-size: 18px; }
.potal .top_btn_area .year_select select.month { min-width: 75px; padding-top: 0px; font-size: 18px; }
.potal .top_btn_area .year_select button {padding: 9px 17px;background: #81beca;  border-radius: 5px; color: #405258; font-size: 16px;}
.potal .top_btn_area .year_select button:hover {background: #427f8b; color: #fff;}



.potal .legend {position: absolute; top: 205px; right: 10px; padding: 10px; background: #fff; border: 1px solid #E1E1E1; border-radius: 5px; font-family: 'Pretendard GOV'; }
.potal .legend p.tit {font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 5px; pointer-events: none; display: none;}
.potal .legend ul {pointer-events: none; display: none}
.potal .legend ul li {display: flex; font-size: 10px; font-weight: 400; color: #797979; margin-bottom: 5px; letter-spacing: -0.5px}
.potal .legend ul li:last-child {margin-bottom: 0;}
.potal .legend .box {display: block; width: 22px; height: 11px; border: 1px solid #3D3D3D; margin-right: 5px;}

.potal .legend p.tit.active {display: block;}
.potal .legend ul.active {display: block;}








#wrap.potal .detail_map {position: relative; width: 100%; display: flex; justify-content: center; height: calc(100% - 250px); padding-right: 50px; margin-top: -50px;}

/*지도크기 변경*/
#wrap.potal .detail_map .tab-content.map00 {max-width: 620px; margin-top: -50px; margin-right: -20px;} 
#wrap.potal .detail_map .tab-content.map00 .map_area01{max-width: 620px;} 
#wrap.potal .detail_map .tab-content.map01 {max-width: 580px; margin-top: -30px; margin-right: 70px;} 
#wrap.potal .detail_map .tab-content.map01 .map_area01{max-width: 580px;} 
#wrap.potal .detail_map .tab-content.map02 {max-width: 620px; margin-top: -20px; margin-right: -30px;} 
#wrap.potal .detail_map .tab-content.map02 .map_area01{max-width: 620px;} 
#wrap.potal .detail_map .tab-content.map03 {max-width: 620px; margin-top: -20px; } 
#wrap.potal .detail_map .tab-content.map03 .map_area01{max-width: 620px;} 
#wrap.potal .detail_map .tab-content.map04 {max-width: 520px; margin-top: 50px; margin-right: -40px} 
#wrap.potal .detail_map .tab-content.map04 .map_area01{max-width: 520px;} 
#wrap.potal .detail_map .tab-content.map05 {max-width: 680px; margin-top: -10px; margin-right: -20px} 
#wrap.potal .detail_map .tab-content.map05 .map_area01{max-width: 680px;} 

/*창원 전체(행정구)*/
#wrap.potal .point_name.changwon > * {width: 60px;}
#wrap.potal .point_name.changwon .no01 {top:70%; left: 22%;}
#wrap.potal .point_name.changwon .no02 {top:44%; left: 34%;}
#wrap.potal .point_name.changwon .no03 {top:53%; left: 59%;}
#wrap.potal .point_name.changwon .no04 {top:27%; left: 54%;}
#wrap.potal .point_name.changwon .no05 {top:71%; left: 74%;}


/*창원 전체(행정동)*/
#wrap.potal .point_name.all_changwon > * {width: 60px; display: none; }
#wrap.potal .point_name.all_changwon .point.active {display: block; z-index: 20; font-size: 14px;} 
#wrap.potal .point_name.all_changwon .point.current {display: block;} 

#wrap.potal .point_name.all_changwon .no01 {top:70%; left: 2%;}
#wrap.potal .point_name.all_changwon .no02 {top:66%; left: 16%;}
#wrap.potal .point_name.all_changwon .no03 {top:68%; left: 26%;}
#wrap.potal .point_name.all_changwon .no04 {top:75%; left: 38%;}
#wrap.potal .point_name.all_changwon .no05 {top:65%; left: 34%;}
#wrap.potal .point_name.all_changwon .no06 {top:63%; left: 38%;}
#wrap.potal .point_name.all_changwon .no07 {top:59%; left: 35%;}
#wrap.potal .point_name.all_changwon .no08 {top:57%; left: 34%;}
#wrap.potal .point_name.all_changwon .no09 {top:54%; left: 33%;}
#wrap.potal .point_name.all_changwon .no10 {top:54%; left: 36%;}
#wrap.potal .point_name.all_changwon .no11 {top:52%; left: 35%;}
#wrap.potal .point_name.all_changwon .no12 {top:51%; left: 34%;}
#wrap.potal .point_name.all_changwon .no13 {top:53%; left: 37%;}
#wrap.potal .point_name.all_changwon .no14 {top:51%; left: 38%;}
#wrap.potal .point_name.all_changwon .no15 {top:49%; left: 38%;}

#wrap.potal .y2019 .point_name.all_changwon .no16 {top:49%; left: 37%;}
#wrap.potal .y2018 .point_name.all_changwon .no16 {top:49%; left: 37%;}


#wrap.potal .point_name.all_changwon .no21 {top:47%; left: 24%;}
#wrap.potal .point_name.all_changwon .no22 {top:45%; left: 32%;}
#wrap.potal .point_name.all_changwon .no23 {top:49%; left: 34%;}
#wrap.potal .point_name.all_changwon .no24 {top:46%; left: 37%;}
#wrap.potal .point_name.all_changwon .no25 {top:49%; left: 37%;}
#wrap.potal .point_name.all_changwon .no26 {top:47%; left: 39%;}
#wrap.potal .point_name.all_changwon .no27 {top:45%; left: 40%;}
#wrap.potal .point_name.all_changwon .no28 {top:41%; left: 37%;}
#wrap.potal .point_name.all_changwon .no29 {top:39%; left: 39%;}
#wrap.potal .point_name.all_changwon .no30 {top:41%; left: 42%;}
#wrap.potal .point_name.all_changwon .no31 {top:44%; left: 41%;}
#wrap.potal .point_name.all_changwon .no32 {top:47%; left: 43%;}


#wrap.potal .point_name.all_changwon .no41 {top:55%; left: 49%;}
#wrap.potal .point_name.all_changwon .no42 {top:47%; left: 54%;}
#wrap.potal .point_name.all_changwon .no43 {top:57%; left: 66%;}
#wrap.potal .point_name.all_changwon .no44 {top:44%; left: 55%;}
#wrap.potal .point_name.all_changwon .no45 {top:45%; left: 59%;}
#wrap.potal .point_name.all_changwon .no46 {top:51%; left: 61%;}
#wrap.potal .point_name.all_changwon .no47 {top:49%; left: 60%;}
#wrap.potal .point_name.all_changwon .no48 {top:47%; left: 64%;}
#wrap.potal .y2018 .point_name.all_changwon .no42 {top:47%; left: 56%;}

#wrap.potal .point_name.all_changwon .no51 {top:44%; left: 47%;}
#wrap.potal .point_name.all_changwon .no52 {top:37%; left: 44%;}
#wrap.potal .point_name.all_changwon .no53 {top:40%; left: 52%;}
#wrap.potal .point_name.all_changwon .no54 {top:41%; left: 60%;}
#wrap.potal .point_name.all_changwon .no55 {top:24%; left: 44%;}
#wrap.potal .point_name.all_changwon .no56 {top:29%; left: 55%;}
#wrap.potal .point_name.all_changwon .no57 {top:19%; left: 65%;}

#wrap.potal .y2020 .point_name.all_changwon .no58 {top:45%; left: 60%;}
#wrap.potal .y2019 .point_name.all_changwon .no58 {top:45%; left: 60%;}
#wrap.potal .y2018 .point_name.all_changwon .no51 {top:45%; left: 49%;}
#wrap.potal .y2018 .point_name.all_changwon .no58 {top:45%; left: 60%;}

#wrap.potal .point_name.all_changwon .no61 {top:66%; left: 50%;}
#wrap.potal .point_name.all_changwon .no62 {top:62%; left: 56%;}
#wrap.potal .point_name.all_changwon .no63 {top:65%; left: 58%;}
#wrap.potal .point_name.all_changwon .no64 {top:63%; left: 60%;}
#wrap.potal .point_name.all_changwon .no65 {top:64%; left: 62%;}
#wrap.potal .point_name.all_changwon .no66 {top:63%; left: 64%;}
#wrap.potal .point_name.all_changwon .no67 {top:65%; left: 68%;}
#wrap.potal .point_name.all_changwon .no68 {top:66%; left: 64%;}
#wrap.potal .point_name.all_changwon .no69 {top:68%; left: 65%;}
#wrap.potal .point_name.all_changwon .no70 {top:72%; left: 65%;}
#wrap.potal .point_name.all_changwon .no71 {top:76%; left: 73%;}
#wrap.potal .point_name.all_changwon .no72 {top:68%; left: 79%;}

#wrap.potal .point_name.all_changwon .no73 {top:76%; left: 88%;}
#wrap.potal .y2019 .point_name.all_changwon .no61 {top:66%; left: 57%;}
#wrap.potal .y2019 .point_name.all_changwon .no74 {top:69%; left: 57%;}
#wrap.potal .y2019 .point_name.all_changwon .no75 {top:65%; left: 51%;}
#wrap.potal .y2018 .point_name.all_changwon .no61 {top:66%; left: 57%;}
#wrap.potal .y2018 .point_name.all_changwon .no74 {top:69%; left: 57%;}
#wrap.potal .y2018 .point_name.all_changwon .no75 {top:65%; left: 51%;}



/*마산합포구 */
#wrap.potal .point_name.masan_happo-gu .no01 {top:64%; left: 11%;}
#wrap.potal .point_name.masan_happo-gu .no02 {top:60%; left: 32%;}
#wrap.potal .point_name.masan_happo-gu .no03 {top:58%; left: 52%;}
#wrap.potal .point_name.masan_happo-gu .no04 {top:74%; left: 72%;}
#wrap.potal .point_name.masan_happo-gu .no05 {top:58%; left: 65%;}
#wrap.potal .point_name.masan_happo-gu .no06 {top:51%; left: 71%;}
#wrap.potal .point_name.masan_happo-gu .no07 {top:43%; left: 65%;}
#wrap.potal .point_name.masan_happo-gu .no08 {top:33%; left: 61%;}
#wrap.potal .point_name.masan_happo-gu .no09 {top:24%; left: 59%;}
#wrap.potal .point_name.masan_happo-gu .no10 {top:27%; left: 69%;}
#wrap.potal .point_name.masan_happo-gu .no11 {top:17%; left: 67%;}
#wrap.potal .point_name.masan_happo-gu .no12 {top:12%; left: 65%;}
#wrap.potal .point_name.masan_happo-gu .no13 {top:18%; left: 77%;}
#wrap.potal .point_name.masan_happo-gu .no14 {top:11%; left: 81.5%;}
#wrap.potal .point_name.masan_happo-gu .no15 {top:6%; left: 83.5%;}
#wrap.potal .y2019 .point_name.masan_happo-gu .no16 {top:9%; left: 73.5%;}
#wrap.potal .y2018 .point_name.masan_happo-gu .no16 {top:9%; left: 73.5%;}
/*마산회원구*/
#wrap.potal .point_name.masanhoewon-gu .no01 {top:43%; left: 19%;}
#wrap.potal .point_name.masanhoewon-gu .no02 {top:41%; left: 46%;}
#wrap.potal .point_name.masanhoewon-gu .no03 {top:54%; left: 49.5%;}
#wrap.potal .point_name.masanhoewon-gu .no04 {top:54%; left: 60%;}
#wrap.potal .point_name.masanhoewon-gu .no05 {top:45%; left: 59.5%;}
#wrap.potal .point_name.masanhoewon-gu .no06 {top:50%; left: 68%;}
#wrap.potal .point_name.masanhoewon-gu .no07 {top:44%; left: 70%;}
#wrap.potal .point_name.masanhoewon-gu .no08 {top:30%; left: 60%;}
#wrap.potal .point_name.masanhoewon-gu .no09 {top:39%; left: 73%;}
#wrap.potal .point_name.masanhoewon-gu .no10 {top:26%; left: 72%;}
#wrap.potal .point_name.masanhoewon-gu .no11 {top:30%; left: 75%;}
#wrap.potal .point_name.masanhoewon-gu .no12 {top:48%; left: 81%;}
/*성산*/
#wrap.potal .point_name.seongsan .no01 {top:50%; left: 29%;}
#wrap.potal .point_name.seongsan .no02 {top:56%; left: 70%;}
#wrap.potal .point_name.seongsan .no03 {top:40%; left: 59%;}
#wrap.potal .point_name.seongsan .no04 {top:33.5%; left: 55%;}
#wrap.potal .point_name.seongsan .no05 {top:29%; left: 38%;}
#wrap.potal .point_name.seongsan .no06 {top:30%; left: 68%;}
#wrap.potal .point_name.seongsan .no07 {top:23%; left: 52%;}
#wrap.potal .point_name.seongsan .no08 {top:17%; left: 41%;}
#wrap.potal .y2020 .point_name.seongsan .no05 {top:31%; left: 42%;}
#wrap.potal .y2020 .point_name.seongsan .no08 {top:17%; left: 39%;}
#wrap.potal .y2019 .point_name.seongsan .no05 {top:31%; left: 42%;}
#wrap.potal .y2019 .point_name.seongsan .no08 {top:17%; left: 39%;}
#wrap.potal .y2018 .point_name.seongsan .no05 {top:31%; left: 42%;}
#wrap.potal .y2018 .point_name.seongsan .no08 {top:17%; left: 39%;}
/*의창구*/
#wrap.potal .point_name.uichang-gu .no01 {top:37%; left: 22%;}
#wrap.potal .point_name.uichang-gu .no02 {top:46%; left: 47%;}
#wrap.potal .point_name.uichang-gu .no03 {top:29%; left: 69%;}
#wrap.potal .point_name.uichang-gu .no04 {top:86%; left: 29%;}
#wrap.potal .point_name.uichang-gu .no05 {top:70%; left: 23%;}
#wrap.potal .point_name.uichang-gu .no06 {top:76%; left: 39%;}
#wrap.potal .point_name.uichang-gu .no07 {top:79%; left: 58%;}
#wrap.potal .y2020 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
#wrap.potal .y2020 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
#wrap.potal .y2019 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
#wrap.potal .y2019 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
#wrap.potal .y2018 .point_name.uichang-gu .no04 {top:88%; left: 32%;}
#wrap.potal .y2018 .point_name.uichang-gu .no08 {top:89%; left: 58%;}
/* 진해 */
#wrap.potal .point_name.jinhae .no01 {top:30%; left: 8%;}
#wrap.potal .point_name.jinhae .no02 {top:23%; left: 17%;}
#wrap.potal .point_name.jinhae .no03 {top:31%; left: 22%;}
#wrap.potal .point_name.jinhae .no04 {top:25%; left: 25%;}
#wrap.potal .point_name.jinhae .no05 {top:28%; left: 30%;}
#wrap.potal .point_name.jinhae .no06 {top:27%; left: 36%;}
#wrap.potal .point_name.jinhae .no07 {top:31%; left: 45%;}
#wrap.potal .point_name.jinhae .no08 {top:33.5%; left: 33%;}
#wrap.potal .point_name.jinhae .no09 {top:37%; left: 36%;}
#wrap.potal .point_name.jinhae .no10 {top:43%; left: 39%;}
#wrap.potal .point_name.jinhae .no11 {top:47%; left: 51%;}
#wrap.potal .point_name.jinhae .no12 {top:37%; left: 67%;}
#wrap.potal .point_name.jinhae .no13 {top:52%; left: 83%;}
#wrap.potal .y2019 .point_name.jinhae .no01 {top:35%; left: 18%;}
#wrap.potal .y2019 .point_name.jinhae .no14 {top:42%; left: 19%;}
#wrap.potal .y2019 .point_name.jinhae .no15 {top:30%; left: 8%;}
#wrap.potal .y2018 .point_name.jinhae .no01 {top:35%; left: 18%;}
#wrap.potal .y2018 .point_name.jinhae .no14 {top:42%; left: 19%;}
#wrap.potal .y2018 .point_name.jinhae .no15 {top:30%; left: 8%;}



/* 우측영역 */
.potal_right_section {display: flex; flex: auto;  background: #fff; border-left: 2px solid #A9C2CB; border-top: 2px solid #A9C2CB; padding: 20px 25px 10px; border-radius: 20px 0 0 0; gap: 20px; font-family: 'Pretendard GOV', 'EliceDXNeolli'; overflow: auto;}

.potal_right_section >[class*="group"] {display: flex; flex: 1; flex-direction: column; min-width: 500px;}
.potal_right_section >[class*="group"]>* {margin-bottom: 15px;}
.potal_right_section >[class*="group"]>*:last-child {margin-bottom: 0px;}
.potal_right_section .flexbox {display: flex; width: 100%;}
.potal_right_section .flexbox.gap30 {gap:30px; }
.potal_right_section .flexbox.gap15 {gap:10px;}
.potal_right_section .flexbox.gap10 {gap:10px 10px;}
.potal_right_section .fl_col {flex-direction: column;}
.potal_right_section .innerbox {border: 2px solid #D4D4D4; border-radius: 10px;  overflow: hidden;}
.potal_right_section .innerbox.graph {border: none; border-radius: 0px;}
.potal_right_section .tablebox {border: 0px solid #D4D4D4; border-radius: 0px;  overflow: hidden;}


.potal_right_section  .titlebox {position:relative; display: flex; align-items: center; justify-content: center;background: #0055A2; font-size: 20px; color: #fff; width: 100%; height: 40px; border-radius: 10px; font-family: 'EliceDXNeolli';}
.potal_right_section  .year {position: absolute; right: 15px; font-size: 20px; font-family: 'Pretendard GOV'; color: #d3d3d3; letter-spacing: -1px;}
.potal_right_section  .colye {color: #FFF39A;}
.potal_right_section  .colbu {color: #023A8C;}
.potal_right_section  .colred {color: #D7132E;}
.potal_right_section  .graph { height: 100%;}

.potal_right_section .flexbox .titbox {background: #111; flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 15px; font-size: 24px; font-family:'EliceDXNeolli'; font-weight: 700; box-sizing: border-box;  line-height: 1.2;}
.potal_right_section .flexbox.ty01 .titbox.ty01 {background: #0D1F57; color: #fff; text-align: center;}
.potal_right_section .flexbox.ty01 .titbox.ty02 {background: url(../images/man.png)#E1EFFC no-repeat;  background-position: top 40px right 0px  ;border:3px solid #C7D5E1; color: #0D4070;}
.potal_right_section .flexbox.ty01 .titbox.ty03 {background: url(../images/female.png)#FCE1E1 no-repeat;  background-position: top 40px right 0px  ;border:3px solid #F8C6C6; color: #C00000;}

.potal_right_section .flexbox.ty01 .box01 {flex: 3;}
.potal_right_section .flexbox.ty01 .box02 {display: flex; border: 3px solid #DCDCDC; border-radius: 10px; height: 52px;}
.potal_right_section .flexbox.ty01 .box02.ty01 {border: 3px solid #6B769A;}
.potal_right_section .flexbox.ty01 .box02>* {display: flex; align-items: center; justify-content: center;}
.potal_right_section .flexbox.ty01 .box02 .box_tit {flex: 1; text-align: center; padding: 5px 5px 2px; background: #DCDCDC; line-height: 1.1; font-size: 18px; font-weight: 600; letter-spacing: -1px; color: #343434;}
.potal_right_section .flexbox.ty01 .box02.ty01 .box_tit { background: #6B769A; color: #fff;}
.potal_right_section .flexbox.ty01 .box02 .box_cont {flex: 2; text-align: center; padding: 5px;}

.potal_right_section .flexbox.ty01 .box02 .box_cont strong {font-family: 'Montserrat';font-size: 32px; font-weight: 600; letter-spacing: -1px}
.potal_right_section .flexbox.ty01 .box02 .box_cont small {vertical-align: bottom; margin-top: 1rem; font-size: 17px; margin-left: 5px;}

.potal_right_section .flexbox.ty01 .arrow_up {display: inline-block;width: 18px; height: 12px; margin: 0 5px 0px; background: url(../images/arrow_up01.png);}
.potal_right_section .flexbox.ty01 .arrow_down {display: inline-block;width: 18px; height: 12px; margin: 0 5px 0px; background: url(../images/arrow_down02.png);}
.potal_right_section .flexbox.ty01 .arrow_none {display: inline-block;width: 10px; height: 13px; margin: 0 5px 1px; background: url(../images/arrow_none.png);}

.potal_right_section .tablebox .arrow_up {display: inline-block;width: 11px; height: 7px; margin: 0 5px 2px; background: url(../images/arrow_up.png);}
.potal_right_section .tablebox .arrow_down {display: inline-block;width: 11px; height: 7px; margin: 0 5px 2px; background: url(../images/arrow_down.png);}
.potal_right_section .tablebox .arrow_none {display: inline-block;width: 10px; height: 13px; margin: 0 5px -1px; background: url(../images/arrow_none.png);}


.potal_right_section .flexbox.ty02 {height: calc(100% - 427px); min-height: 200px;}
.potal_right_section .flexbox.ty02 .phrase { margin-bottom: -5px; color: #999; font-size: 14px;}
.potal_right_section .flexbox.ty02 .tablebox {height: calc(100% - 75px);}
.potal_right_section .flexbox.ty02 .tablebox th {height: 50px; font-size: 14px; padding: 2px 5px;}
.potal_right_section .flexbox.ty02 .tablebox td {font-size: 18px; height: auto;}




.potal_right_section .group02 >.flexbox {height: 100%;}
.potal_right_section .flexbox.ty03 {height: calc(100% - 55px);}
.potal_right_section .flexbox.ty03 > .flexbox {flex: 1;}

.potal_right_section .flexbox.ty03 h4 {position: relative; color: #0055A2; padding: 5px 25px; font-size: 20px;}
.potal_right_section .flexbox.ty03 h4.mk01 {background: url(../images/h4_marker01.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4.mk02 {background: url(../images/h4_marker02.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4.mk03 {background: url(../images/h4_marker03.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4.mk04 {background: url(../images/h4_marker04.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4.mk05 {background: url(../images/h4_marker05.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4.mk06 {background: url(../images/h4_marker06.png) no-repeat left center;}
.potal_right_section .flexbox.ty03 h4 span {position: absolute; bottom: 0px; right: 0;color: #595959;font-size: 12px; font-weight: 400;}


.potal_right_section .flexbox.ty03 .graph {border-radius: 0px; background: #fff;}
.potal_right_section .flexbox.ty03 .graph img {width: 100%; height: 190px; padding: 10px;}

.potal_right_section .flexbox.ty03 .flexbox.tablebox{height: 100%;}
.potal_right_section .flexbox.ty03 table th,
.potal_right_section .flexbox.ty03 table td {height: 22px; font-size: 12px; line-height: 1;}



.none_data {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%;  border-radius: 10px;}
.graph>.none_data {border: 2px solid #D4D4D4; }
.none_data .ere_img {width: 108px; height: 51px; margin-bottom: 10px; background: url(../images/none_data.png) no-repeat center; background-size: 80px;}
.none_data p {font-size: 16px;}


.dock_inner {border-radius: 10px;}
.ic-bottom>.dock_inner {bottom: 0px;}
.ic-right>.dock_inner {right: 0px;}
.ic-top>.dock_inner {top: 0px;}
.ic-left>.dock_inner {left: 0px;}


/* ----------------------이지애 추가-------------------------- */
.popup_bg02 { position: fixed; align-items: center; justify-content: center; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); }
.popup_bg03 { position: fixed; align-items: center; justify-content: center; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); }

.popup_area.tablepop-area { width: calc(100% - 40px); max-width: 960px; height: calc(100% - 60px); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

.d-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.popup_hd h2 { font-size: 20px; font-weight: 500; color: #023A8C; }
.details-pop { padding: 5px 10px; border: 1px solid #004686; border-radius: 5px; font-size: 13px; color: #0055A2; }
.details-pop:hover {background: #e7f1fa;} 

.table-titleBox { display: flex; justify-content: space-between; align-items: center; padding: 10px; }
.table-notice { font-family: 'Pretendard GOV'; font-weight: 600; font-size: 15px; color: #BF0606; }
.tb-down { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #004686; border-radius: 5px; font-size: 13px; color: #0055A2; }
.tb-down:hover {background: #e7f1fa;}
.tb-down::after { content: ""; display: block; width: 14px; height: 13px; background: url(../images/login-bracket.png) no-repeat center; margin-bottom: 4px; }

.tableBox { height: calc(100% - 90px); overflow-y: auto; padding: 0 10px; }
.tableBox table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tableBox table tr th.sticky-hd01 { position: sticky; top: 0; background-color: #023A8C; border-right: 1px solid #5D779D; border-bottom: 1px solid #5D779D; }
.tableBox table tr th.sticky-hd02 { position: sticky; top: 40px; background-color: #023A8C; border-right: 1px solid #5D779D; border-bottom: 1px solid #5D779D; }
.tableBox table tr th.sticky-hd03 { position: sticky; top: 80px; background-color: #F0F1F2; color: #023A8C; border-right: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; }
.tableBox table th.sticky-hd01:last-child, .tableBox table td:last-child { border-right: none; }
.tableBox table th.sticky-hd02:last-child, .tableBox table td:last-child { border-right: none; }
.tableBox table th.sticky-hd03:last-child, .tableBox table td:last-child { border-right: none; }
.tableBox table td { color: #797979; border-right: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; }

.txtalign-r { text-align: right; }