@import url(https://font.imbc.com/noto/noto.css);

body{width:100%}
ol, ul, dl {list-style:none;padding:0;margin:0;}
polygon, path, polyline {stroke:#fefefe;stroke-width:1px;fill:#adadad;}
.map-all svg polygon, .map-all svg path, .map-all svg polyline{stroke-width:2px;}
.map-seoul svg polygon, .map-seoul svg path, .map-seoul svg polyline{stroke-width:0.3px;}
.map-sudo svg polygon, .map-sudo svg path, .map-sudo svg polyline{stroke-width:0.8px;}
.party1 {fill:#6696e2;} /* 더불어민주당 */ 
.party2 {fill:#f45d5d;} /* 국민의힘 */ 
.party5 {fill:#7bae59;} /* 녹색정의당 */ 
.party6 {fill:#51aea4;} /* 새로운미래 */ 
.party7 {fill:#f97a53;} /* 개혁신당 */ 
/* .party10 {fill:#2655a2;} 조국혁신당 */ 
.competition {fill:#6556cc !important} /* 경합 */ 
.party8, .party9 {fill:#808080;} /*기타 무소속*/ 
.party99 {fill:#808080;} /*기타 무소속*/ 

/* Tooltip box styles */
.tooltip-box {
    width: 300px;
    height: 120px;
    box-sizing: border-box;
    position: absolute;
    background-color: #fff;
    display: none;
    padding: 20px 15px 20px 15px;
    z-index: 1000;
    background: url(//image.imnews.imbc.com/issue/vote2024/map/box-tooltip-v2.png) no-repeat;
    box-shadow: 10px 10px 10px rgba(0,0,0,.2);
    border-radius: 15px;
    overflow: hidden;
}
.tooltip-box .district {
    margin-bottom: 6px;
    font-family: 'notokr-bold';
    font-size: 18px;
    text-align: center
}
.tooltip-box span{display:inline-block;font-size: 15px;letter-spacing: -.056rem;font-family: 'notokr-regular';}
.tooltip-trigger:hover + #tooltip {
    display: block;
}

#additional-content ul li {
    display: flex;
    font-size: 15px;
    line-height: 24px;
    align-items: flex-start;
    justify-content: center;
}

.cl-circle {
    padding-left: 19px;
    position: relative;
    line-height: 20px;
}

/* Circle dot */
.tooltip-box .cl-circle:before ,.map-noti .cl-circle:before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
}

/* Circle text */
/* .tooltip-box .cl-circle:after, .map-noti .cl-circle:after {
  width: 92px;
  content: '';
  position: absolute;
  left: 20px;
  top: 2px;
  font-family: 'notokr-regular';
} */
.map-noti .cl-circle{padding-left: 120px;}
.map-noti .cl-circle:after{width:100px;color:#fff;font-size: 13px;margin-left: 5px;}
.cl-circle.party1:before { background-color: #6696e2; }
.cl-circle.party2:before { background-color: #f45d5d; }
.cl-circle.party3:before { background-color: #7bae59; }
.cl-circle.party4:before { background-color: #f97a53; }
.cl-circle.party5:before { background-color: #2655a2; }
.cl-circle.party6:before { background-color: #51aea4; }
.cl-circle.party7:before { background-color: #f97a53; }
.cl-circle.competition:before { background-color: #6556cc; }
.cl-circle.party8:before { background-color: #808080; }
.cl-circle.party9:before { background-color: #808080; }
.cl-circle.party99:before { background-color: #808080; }


.tooltip-box .jdname{margin-right: 5px;display: inline-block;width: 90px;min-width: 90px;text-align: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: auto-phrase;}
.tooltip-box .num{display: inline-block;margin-right: 9px;}
.tooltip-box #hubo_name1, .tooltip-box #hubo_name2{margin-right: 5px;min-width: 40px;}
.tooltip-box #hubo_rate1, .tooltip-box #hubo_rate2{min-width: 40px;text-align: right;}
.tooltip-box #tooltip-ready{margin-top: 15px;text-align: center;font-family: 'notokr-regular';}


.map-noti {position: absolute;right:0;bottom: 18px;}
.map-noti li{margin-bottom: 6px;}
/* mobile */
@media screen and (max-width: 720px) {
    body{width: 128%;height: 100%;margin-left: -3%;}
    /* 모바일 마우스오버 효과 off  */
    .tooltip-trigger {
        pointer-events: none;
    }
}