@charset "utf-8";

@import url("//news.chosun.com/dhtm/css/css_reset_2018.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
*{box-sizing: border-box;}
html, body{height:100%; overflow:inherit; background-color: #f7f7f7;}
html{-webkit-text-size-adjust:none;}
body{min-width:300px;word-break:keep-all;word-wrap:break-word;white-space:inherit;color:#000;}
body, input, button, textarea{font:16px/1.56 'Noto Sans KR', AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic", 나눔고딕, 돋움, Dotum, 굴림, Gulim, "Apple SD Gothic Neo", sans-serif; letter-spacing:-0.5px; font-weight: 400;}
button{border:none;}
a, a:visited{color:#000; text-decoration:none;}

.desktop{display: block !important;}
.mobile{display: none !important;}
@media all and (max-width: 767px) {
  .desktop{display: none !important;}
  .mobile{display: block !important;}
}

/* 기본 레이아웃 */
#election2024{max-width: 940px; margin: 0 auto;}
#election2024 .election_container{padding: 20px 16px; background: #f2f4f9; border: 1px solid #eceef4;}
#election2024 .map_box{max-width: 452px; height: 740px; width: 100%; padding: 0 20px 0 0; /*padding: 30px 20px 65px 10px;*/ position: relative; box-sizing: border-box; z-index: 20;}
#election2024 .map_container{display: flex; justify-content: space-between; width: 100%;}
#election2024 .map_container .left{width: 100%; position: relative; position: relative;}
#election2024 .map_container .right{width: 100%; position: relative; overflow: hidden;}
#election2024 .map_container .map_info_txt{font-size: 14px; color: #707070; position: absolute; z-index: 10;}
#election2024 .map_container .map_info_txt.info_txt_top{padding-bottom: 16px; left: 0; top: 0;}
#election2024 .map_container .map_info_txt.info_txt_bot{display: flex; left: 0; bottom: 0; font-size: 12px;}
#election2024 .map_container .map_info_txt.info_txt_bot .intime_target{display: flex; align-items: center;}
#election2024 .map_container .map_info_txt.info_txt_bot .intime_target:after{width: 1px; height: 10px; margin: 0 8px; background: #999; content: '';}
#election2024 .refresh_btn{position: absolute; z-index: 30; right: 20px; top: 0; width: 37px; height: 36px; background: url('data:image/svg+xml,<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="0.5" width="35" height="35" rx="3.5" fill="%23F2F4F9"/><rect x="1" y="0.5" width="35" height="35" rx="3.5" stroke="%23988CB9"/><path d="M23.2535 13.8465L23.2536 11.9661H24.2536V15.7036H20.5161V14.7036L22.6714 14.7031C20.7437 12.3599 17.1749 12.0019 14.7669 14.1655C13.212 15.5628 12.6063 17.8246 13.2555 19.8117C14.3595 23.1919 18.1968 24.6363 21.1951 22.9048C22.3788 22.221 23.2599 21.1205 23.6691 19.8235L23.7364 19.5927L24.7024 19.8512C24.2599 21.5045 23.1782 22.914 21.6953 23.7707C18.1491 25.8187 13.607 24.109 12.3049 20.1222C11.5328 17.7587 12.2492 15.0835 14.0985 13.4217C16.8621 10.9386 20.9349 11.2736 23.2535 13.8465Z" fill="%2369617E"/></svg>') 0 0 no-repeat;}

#color-info-container {position: absolute; right: 24px; bottom: 0; z-index: 9999; font-size: 0; visibility: visible;}
#color-info-container:hover .color-info {visibility: visible;}
#color-info-container:hover .color-info2 {visibility: visible;}
#color-info-container .color-info {text-align: left; position: absolute; top: -100px; right: 50%; margin-right: -10px; visibility: hidden; padding: 12px; background-color: #fff; color: #222;}
#color-info-container .color-info b {display: block; margin-bottom: 8px; font-size: 14px; font-weight: normal; line-height: 1.43;}
#color-info-container .color-info ul {font-size: 0;}
#color-info-container .color-info li {display: flex; padding-top: 4px; font-size: 12px;}
#color-info-container .color-info li:first-child {padding-top: 0;}
#color-info-container .color-info li span {margin-right: 1px; width: 42px; height: 12px;}
#color-info-container .color-info li:last-child span {height: auto; font-size: 12px; line-height: 1.33; color: #707070;}
#color-info-container .color-info li span:last-child {margin: 0;}

.color-info2{width: 286px; padding: 12px 16px; background: #fff; position: absolute; top: -180px; right: 10%; visibility: hidden;}
.color-info2 li{display: flex; align-items: center;}
.color-info2 li .color_wrap{display: flex; gap: 1px; width: 176px; margin-right: 12px;}
.color-info2 li .color_wrap span{flex-basis: 33.33%; height: 12px;}
.color-info2 li .jd_name{font-size: 12px; color: #707070;}
.color-info2 .gray_box{margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; font-size: 10px; color: #707070; background: #eaeaea;}
.color-info2 .gray_box .gb_right span{display: block; text-align: center; padding: 0 8px;}
.color-info2 .gray_box .gb_right span:first-child{padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid #999;}


/* 국민의힘 */
.color-info2 li:nth-child(1) .color1{background: #eba3a7;}
.color-info2 li:nth-child(1) .color2{background: #e88486;}
.color-info2 li:nth-child(1) .color3{background: #cc2c36;}
/* 더불어민주당 */
.color-info2 li:nth-child(2) .color1{background: #9fb4dd;}
.color-info2 li:nth-child(2) .color2{background: #768ece;}
.color-info2 li:nth-child(2) .color3{background: #3e54af;}
/* 녹색정의당 */
.color-info2 li:nth-child(3) .color1{background: #d0e2d6;}
.color-info2 li:nth-child(3) .color2{background: #73a885;}
.color-info2 li:nth-child(3) .color3{background: #166e34;}
/* 무소속 */
.color-info2 li:nth-child(4) .color1{background: #e8e8e8;}
.color-info2 li:nth-child(4) .color2{background: #bfc0c0;}
.color-info2 li:nth-child(4) .color3{background: #8e8e8e;}
/* 경합 */
.color-info2 li:nth-child(5) .color1{background: #56379b; width: 100%; flex-basis: inherit;}




/* 후보자 섹션 */
#election2024 .candidate_cover{position: absolute; left: 0; top: 0; z-index: 99; width: 100%; height: 730px; display: flex; align-items: center; border-radius: 10px; background: linear-gradient(158deg, #FFF -2.49%, rgba(255, 255, 255) 100%); backdrop-filter: blur(35px);}
#election2024 .candidate_cover .inner{padding: 0 42px;}
#election2024 .candidate_cover h1{margin-bottom: 12px; font-size: 24px; font-weight: 700; color: #493390; text-align: center;}
#election2024 .candidate_cover h2{font-size: 20px; font-weight: 400; color: #222; text-align: center;}
#election2024 .candidate_cover span{display: flex; width: 100%; justify-content: center; margin-top: 90px; margin-bottom: 45px; text-align: center;}
#election2024 .candidate_cover p{display: flex; align-items: center; justify-content: center; font-size: 18px; color: #707070; text-align: center;}
#election2024 .candidate_cover p::before{width: 24px; height: 24px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M16.125 7.48105L14.7107 6.06696L8.43374 12.345L14.7107 18.623L16.125 17.209L11.2626 12.3451L16.125 7.48105Z" fill="%23707070"/></svg>') 0 0 no-repeat; content: '';}
#election2024 .candidate_cover p.mobile_p{display: none;}
#election2024 .candidate_cover.off{visibility: hidden;}
.candidate_list_wrap{border-radius: 10px; overflow: hidden;}
.candidate_list_wrap .city_name{height: 36px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; color: #222; background: #d7dce8;}
.candidate_list_wrap .sgg_names{display: flex; justify-content: space-evenly; padding: 0 16px; min-height: 40px; background: #ecedf1;}
.candidate_list_wrap .sgg_names a{font-size: 14px; flex-basis: 25%; text-align: center; color: #222; position: relative;}
.candidate_list_wrap .sgg_names a em{display: inline-block; padding: 8px 0;}
.candidate_list_wrap .sgg_names a.active{font-weight: 500;}
.candidate_list_wrap .sgg_names a.active em{border-bottom: 2px solid #222;}
.candidate_list_wrap .sgg_names a.active em:after{ height: 2px; background: #222; position: absolute; left: 0; bottom: 0; content: "";}
.candidate_list_wrap .sgg_names button{font-size: 14px; flex-basis: 25%; text-align: center; color: #222; position: relative;}
.candidate_list_wrap .sgg_names button em{display: inline-block; padding: 8px 0; position: relative;}
.candidate_list_wrap .sgg_names button.active{font-weight: 500;}
.candidate_list_wrap .sgg_names button.active em:after{width: 100%; height: 2px; background: #222; position: absolute; left: 0; bottom: 0; content: "";}
.candidate_list_wrap .sgg_names button:hover em:after{width: 100%; height: 2px; background: #999; position: absolute; left: 0; bottom: 0; content: "";}
.candidate_list_wrap .list_container{height: 658px; overflow-y: scroll; padding: 8px 0px 8px 12px; background: #fff;}
.candidate_list_wrap .candidate_list{display: none;}
.candidate_list_wrap .candidate_list.active{display: block;}
.candidate_list_wrap .candidate_list .item{display: flex; padding: 10px 12px; border-top: 1px solid #eaeaea; flex-wrap: wrap;}
.candidate_list_wrap .candidate_list .item:first-child{border-top: none;}
.candidate_list_wrap .candidate_list .item .thumb_wrap{display: flex; flex-wrap: wrap; align-items: center; width: 31%;}
.candidate_list_wrap .candidate_list .item .thumb{flex-shrink: 0; width: 48px; height: 64px; margin-right: 8px; overflow: hidden;}
.candidate_list_wrap .candidate_list .item .thumb img{width: 100%;}
.candidate_list_wrap .candidate_list .item .name{max-width: 66px;}
.candidate_list_wrap .candidate_list .item .hubo_name{font-size: 14px; font-weight: 500; color: #222;}
.candidate_list_wrap .candidate_list .item .jd_name{font-size: 12px; font-weight: 400; color: #247ac4;}
.candidate_list_wrap .candidate_list .item .info{font-size: 12px; color: #222; width: 69%; box-sizing: border-box; padding-left: 16px;}

.custom_scroll::-webkit-scrollbar {
  position: absolute;
  width: 12px;
}

.custom_scroll::-webkit-scrollbar-thumb {
  height: 75%;
  background: #d7d7d7;
  background-clip: padding-box;
  border: 4px solid #fff;
  border-radius: 50px;
}

.custom_scroll::-webkit-scrollbar-track {
  background: #fff;
}

.list_container::-webkit-scrollbar {
  position: absolute;
  width: 12px; /* 스크롤바의 너비 */
}

.list_container::-webkit-scrollbar-thumb {
  height: 75%;
  background: #d7d7d7;
  background-clip: padding-box;
  border: 4px solid #fff;
  border-radius: 50px;
}

.list_container::-webkit-scrollbar-track {
  position: absolute;
  background: #fff; /*스크롤바 뒷 배경 색상*/
}


/* Desktop (1024px~)
Tablet (740px~1023px)
Mobile.w (320px~739px) */

/* tablet 668 ~ 696 */
/* mobile 288 ~ 707 */

/* 투표율 섹션 */
.w_box{width: 100%; padding: 20px 20px 16px 20px; margin-top: 12px; background: #fff; border-radius: 10px; border: 1px solid #eaeaea;}
.w_box:first-child{margin-top: 0;}
.w_box .title{font-size: 16px; color: #222; font-weight: 500;}

.turnout_top_info.w_box{padding: 0;}
.turnout_top_info .top{padding: 20px 20px 16px;}
.turnout_top_info .top h1{margin-bottom: 10px; font-size: 20px; font-weight: 500; color: #222;}
.turnout_top_info .top .dl_wrap{display: flex;}
.turnout_top_info .top dl{display: flex; font-size: 16px; font-weight: 400; color: #707070;}
.turnout_top_info .top dl:first-child{margin-right: 30px;}
.turnout_top_info .top dd{margin-left: 8px; color: #222;}
.turnout_top_info .bot{padding: 12px 20px; background: #f9f7fc;}
.turnout_top_info .bot .info_icon{display: flex; align-items: center;}
.turnout_top_info .bot .sty1{display: flex; align-items: center; padding-right: 10px; font-size: 16px; color: #222;}
.turnout_top_info .bot .sty1::before {width: 24px; height: 25px; margin-right: 6px; background: url('https://news.chosun.com/election2024/img//turnout_icon.png') 0 0 no-repeat; background-size: 100%; content: "";}
.turnout_top_info .bot .sty2{font-size: 20px; font-weight: 500; color: #56379B;}
.turnout_top_info .bot .sty2 .per{font-size: 18px; font-weight: 400;}

.line_tooltip{width: 150px; padding: 8px 12px; background: #fff; border: 1px solid #d7d7d7; box-sizing: border-box; z-index: 9999;}
.line_tooltip .tt{font-size: 14px; margin-bottom: 4px; padding: 0;}
.line_tooltip li{font-size: 14px; margin-top: 2px; color: #222; display: flex; align-items: center;}
.line_tooltip li:first-child{margin-top: 0;}
.line_tooltip li::before{display: block; width: 10px; height: 10px; margin-right: 4px; border-radius: 100%; content: '';}
.line_tooltip li span{margin-right: 4px;}
.line_tooltip li.bg1::before{background-color: #c2a8db;}/* 8대지선 */
.line_tooltip li.bg1 span{color: #c2a8db;}
.line_tooltip li.bg2::before{background-color: #99a6e1;}/* 20대대선 */
.line_tooltip li.bg2 span{color: #99a6e1;}
.line_tooltip li.bg3::before{background-color: #8ebfbf;}/* 21대총선 */
.line_tooltip li.bg3 span{color: #8ebfbf;}
.line_tooltip li.bg4::before{background-color: #5840a5;}/* 22대총선 */
.line_tooltip li.bg4 span{color: #5840a5;}

.realtime_wrap{height: 316px;}
.realtime_wrap .realtime_ele{height: 195px;}
.realtime_wrap .title{display: flex; margin-bottom: 8px;}
.realtime_wrap .title .location_turnout{display: flex; display: none; height: 24px; padding: 0 8px; margin-left: 8px; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-weight: 500; background: #5840a5; border-radius: 4px;}
.realtime_wrap .title .location_turnout em{font-size: 12px; font-weight: 400;}
.realtime_wrap .label{display: flex;}
.realtime_wrap .label li{display: flex; align-items: center; margin-left: 10px; font-size: 14px; color: #707070;}
.realtime_wrap .label li:first-child{margin-left: 0;}
.realtime_wrap .label li::before{width: 10px; height: 10px; margin-right: 4px; border-radius: 100%; background: #999; content: "";}
.realtime_wrap .label li:nth-child(1)::before{background-color: #56379b;} /* 제22대 총선 */
.realtime_wrap .label li:nth-child(2)::before{background-color: #8fbfbf;} /* 제21대 총선 */
.realtime_wrap .label li:nth-child(3)::before{background-color: #99a6e2;} /* 제20대 총선 */
.realtime_wrap .label li:nth-child(4)::before{background-color: #c2a8db;} /* 제8회 지선 */
.realtime_wrap .stt{margin-top: 4px; display: block; text-align: right; font-size: 12px; font-weight: 400; color: #56379B;}

.bar_wrap .bar_ele{height: 195px;}
.bar_wrap .title{margin-bottom: 16px;}

.turnout_module .intime_render{position: absolute; left:0; bottom: 0; z-index: 9999; font-size:14px; color: #707070;}
.turnout_module .bg-type1.color1 {background-color: #b1a2d8;}
.turnout_module .bg-type1.color2 {background-color: #846bc3;}
.turnout_module .bg-type1.color3 {background-color: #56379b;}

.turnout_map_tooltip{width: 210px; position: relative; z-index: 999999;}
.turnout_map_tooltip .top{height: 39px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #bccbda; background: #2f2065;}
.turnout_map_tooltip .top .dis_name{color: #fff; font-size: 16px;}
.turnout_map_tooltip .bot{height: 39px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: #222; background: #fff;}
.turnout_map_tooltip .bot .turnout{font-size: 20px; color: #222;}
.turnout_map_tooltip .bot .turnout span{font-size: 12px;}

.election_tooltip.v1 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: all;}

.election-tooltip-box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: all;}
.election-tooltip-box .close_btn{position: absolute; right: 0; top: -30px; display: block; width: 24px; height: 24px; background: url('//news.chosun.com/election2022/img//close_btn.png') no-repeat; background-size: contain; cursor: pointer;}
.popup-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent;}
@media all and (max-width: 870px) {
  .turnout_top_info .top h1{font-size: 16px;}
  .turnout_top_info .top .dl_wrap{flex-direction: column;}
  .turnout_top_info .top dl{font-size: 14px;}
  .turnout_top_info .top dl:first-child{margin-bottom: 6px;}
}

@media all and (max-width: 790px) {
  .turnout_top_info .top h1{font-size: 16px;}
  .turnout_top_info .top .dl_wrap{flex-direction: column;}
  .turnout_top_info .top dl{font-size: 14px;}
  .turnout_top_info .top dl:first-child{margin-bottom: 6px;}

  .bar_wrap .title{margin-bottom: 12px;}

  .realtime_wrap{height: auto;}
  .realtime_wrap .label_wrap{margin-bottom: 10px;}
  .realtime_wrap .label{flex-wrap: wrap; max-width: 65%;}
  .realtime_wrap .label li{flex-basis: 50%; margin-left: 0; font-size: 12px;}
}



/* 개표중 섹션 */
.party_chart_box{border-radius: 10px; overflow: hidden; border: 1px solid #eaeaea;}
.party_chart_box .top{display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; background: #D7DCE8;}

/* 당일 수정 */
.party_chart_box .top .seat_num{display: none !important;}

.party_chart_box .bot{padding: 12px 20px; background: #fff;}
.party_chart_box .title{font-size: 16px; font-weight: 500; color: #222;}
.party_chart_box.election_info .count_votes{display: flex; align-items: center; font-size: 16px; color: #222;}
.party_chart_box.election_info .count_votes span{margin-left: 6px; font-size: 20px; font-weight: 500;}
.party_chart_box.election_info .count_votes span em{font-size: 16px;}
.party_chart_box.election_info ul{display: flex; flex-wrap: wrap;}
.party_chart_box.election_info ul li{display: flex; width: 50%; margin-bottom: 5px; font-size: 14px; color: #222;}
.party_chart_box.election_info ul li span:first-child{margin-right: 8px; width: 52px; font-weight: 500; color: #56379B;}
.party_chart_box.party_chart{margin-top: 12px;}
.party_chart_box.party_chart .bot{padding: 20px; padding-right: 8px; height: 558px; overflow-y: scroll; overflow-x: hidden;}

.counting_module .bg-type1.color1 {background-color: #9fb4dd;}
.counting_module .bg-type1.color2 {background-color: #768ece;}
.counting_module .bg-type1.color3 {background-color: #3e54af;}
.counting_module .bg-type2.color1 {background-color: #eba3a7;}
.counting_module .bg-type2.color2 {background-color: #e88486;}
.counting_module .bg-type2.color3 {background-color: #cc2c36;}

.party_bar{width: 100%; position: relative;}
.party_bar_inner{border-radius: 12px; overflow: hidden;}
.party_bar::after{content: ''; clear: both; display: block;}
.party_bar .item{display: flex; align-items: center; flex-direction: column; float: left;}
.party_bar .item .bar{width: 100%; height: 25px;}
.party_bar .item:hover p{display: block; visibility: visible;}

.party_bar .item p{display: none; visibility: hidden; position: absolute; bottom: -40px; z-index: 99; padding: 6px 8px; border: 1px solid #eaeaea; border-radius: 4px; font-size: 12px; font-weight: 500; background: #fff;}
.party_bar .item p:after{position: absolute; top: 0; left: 50%; margin: -9px 0 0 -7px; width: 14px; height: 10px; background: url('data:image/svg+xml,<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Polygon 1" filter="url(%23filter0_ii_5969_56541)"><path d="M8.31923 1.17033C7.92113 0.601616 7.07887 0.601614 6.68077 1.17033L0.5 10L14.5 10L8.31923 1.17033Z" fill="white"/></g><defs><filter id="filter0_ii_5969_56541" x="0.5" y="0.744141" width="14" height="9.25586" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.917647 0 0 0 0 0.917647 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_5969_56541"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.917647 0 0 0 0 0.917647 0 0 0 1 0"/><feBlend mode="normal" in2="effect1_innerShadow_5969_56541" result="effect2_innerShadow_5969_56541"/></filter></defs></svg>') 0 0 no-repeat; background-size: 100%; content: '';}


.party_list{margin-top: 16px; border-top: 1px solid #eaeaea;}
.party_list .list_item{padding: 16px 0; border-top: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.party_list .list_item:first-child{border-top: none;}
.party_list .list_item .flex{display: flex; align-items: center;}
.party_list .list_item .party_icon{width: 48px; height: 48px;}
.party_list .list_item .party_icon .etc{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 100%; background: #9292BB; color: #fff;}
.party_list .list_item .party_icon img{width: 100%;}
.party_list .list_item .party_name{margin-left: 12px; font-size: 18px; font-weight: 500;}
.party_list .list_item .party_count{font-size: 20px; font-weight: 400;}
.party_list .list_item .party_count strong{font-size: 24px; font-weight: 700;}

.party_chart2 .top{background: #6b7488; }
.party_chart2 .top .title{color: #fff; font-weight: 400;}
.party_chart2 .top .title .location_ele{font-weight: 500;}
.party_chart2 .top .count_num{color: #fff; font-size: 16px; font-weight: 400;}
.party_chart2 .top .count_num span{font-size: 20px; font-weight: 500;}
.party_chart2 .top .count_num span em{font-size: 18px; font-weight: 400;}

.party_chart2 .bot{padding: 0;}
.party_chart2 .counting_hubo .sgg_names{display: flex; justify-content: space-evenly; padding: 0 16px; min-height: 40px; background: #d7dce8;}
.party_chart2 .counting_hubo .sgg_names button{font-size: 14px; flex-basis: 25%; text-align: center; color: #222; position: relative;}
.party_chart2 .counting_hubo .sgg_names button em{display: inline-block; padding: 8px 0; position: relative;}
.party_chart2 .counting_hubo .sgg_names button.active{font-weight: 500;}
.party_chart2 .counting_hubo .sgg_names button.active em:after{width: 100%; height: 2px; background: #222; position: absolute; left: 0; bottom: 0; content: "";}
.party_chart2 .counting_hubo .sgg_names button:hover em:after{width: 100%; height: 2px; background: #999; position: absolute; left: 0; bottom: 0; content: "";}
.party_chart2 .list_container{width: 100%; height: 650px; background: #fff; overflow-y: scroll;}
.party_chart2 .list_container .candidate_list{padding: 20px 8px 20px 20px; display: none;}
.party_chart2 .list_container .candidate_list.active{display: block;}

.party_chart2 .vs_wrap{position: relative;}
.party_chart2 .vs_wrap .candidate_vs:first-child{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #d7d7d7; margin-top: 0;}
.party_chart2 .candidate_vs{margin-bottom: 12px;}
.party_chart2 .candidate_vs .flex{display: flex; justify-content: space-between; align-items: center;}
.party_chart2 .candidate_vs .thumb_wrap{display: flex; align-items: center;}
.party_chart2 .candidate_vs .thumb{width: 48px; height: 64px; background-color: #d7d7d7; overflow: hidden; position: relative; margin-right: 8px;}
.party_chart2 .candidate_vs .thumb img{position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
/* .party_chart2 .candidate_vs .thumb{width: 48px; height: 64px; margin-right: 8px; background: #d7d7d7; overflow: hidden;}
.party_chart2 .candidate_vs .thumb img{width: 106%;} */
.party_chart2 .candidate_vs .name{font-size: 14px; font-weight: 500;}
.party_chart2 .candidate_vs .jd_name{font-size: 12px; font-weight: 400; color: #707070;}
.party_chart2 .candidate_vs .num_wrap{text-align: right;}
.party_chart2 .vs_wrap .candidate_vs .rate{font-size: 24px; font-weight: 500; color: #707070;}
.party_chart2 .vs_wrap .candidate_vs .rate em{font-size: 16px; font-weight: 400;}
.party_chart2 .candidate_vs .rate{font-size: 20px; font-weight: 500;}
.party_chart2 .candidate_vs .rate em{font-size: 16px; font-weight: 400;}
.party_chart2 .candidate_vs .dugsu{font-size: 12px; color: #707070;}
.party_chart2 .candidate_vs .bar{width: 100%; height: 8px; margin-top: 8px; background: #f1f1f1; position: relative;}
.party_chart2 .candidate_vs .bar_graph{height: 8px; position: absolute; left: 0; bottom: 0; transform-origin: 0 0; animation: right-animate 1.5s ease alternate;}

.party_chart2 .vs_wrap .add_info{width: 100%; margin: 0 auto; text-align: center; font-size: 12px; color: #222; position: absolute; left:0; top: 95px;}
.party_chart2 .vs_wrap .add_info .inner{margin: 0 auto; padding: 3px 10px; display: inline-block; box-sizing: border-box; border: 1px solid #eaeaea; border-radius: 50px; background: #f7f7f7;}
.party_chart2 .vs_wrap .add_info .inner>div{display:inline-block;}
.party_chart2 .vs_wrap .add_info .inner .num2{margin-left: 10px; padding-left: 10px; position: relative;}
.party_chart2 .vs_wrap .add_info .inner .num2:after{position: absolute; left:0; top:0; width: 1px; height: 100%; background: rgba(34, 34, 34, .2); content: "";}

.election_tooltip {width: 231px; position: relative; z-index: 999999999999999999999; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); background-color: #fff; box-sizing: border-box; font-family: 'Noto Sans KR' !important;}

/* 당일 수정 */
.election_tooltip{display: none !important;}
.drilldown .election_tooltip{display: block !important;}

.election_tooltip .top{display: flex; padding: 8px 12px; justify-content: space-between; align-items: center; background: #2f2065; color: #fff;}
.election_tooltip .top .city_name{font-size: 16px;}
.election_tooltip .top .count_num{font-size: 12px; opacity: 0.7;}
.election_tooltip .sgg_item{position: relative;}
.election_tooltip .sgg_item .sgg_name{padding: 6px 4px; text-align: center; font-size: 12px; color: #222; font-weight: 500; background: #e7eafa; display: flex; justify-content: space-between;}
.election_tooltip .hubo_list{padding: 8px 10px; position: relative;}
.election_tooltip .hubo_list li{display: flex; align-items: center; justify-content: space-between;}
.election_tooltip .hubo_list li:first-child{padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid #eaeaea;}
.election_tooltip .hubo_list .hubo_name{font-size: 14px; color: #222; font-weight: 500;}
.election_tooltip .hubo_list .jd{font-size: 10px; font-weight: 400;}
.election_tooltip .hubo_list .count{font-size: 12px; color: #999;}
.election_tooltip .hubo_list .hl_right{display: flex; align-items: center;}
.election_tooltip .hubo_list .rate{margin-left: 4px; font-size: 18px; font-weight: 500;}
.election_tooltip .hubo_list .rate em{font-size: 12px;}

.election_tooltip .add_info{width: 100%; margin: 0 auto; text-align: center; font-size: 12px; color: #222; position: absolute; left:0; top: 72px;}
.election_tooltip .add_info .inner{margin: 0 auto; padding: 3px 10px; display: inline-block; box-sizing: border-box; border: 1px solid #eaeaea; border-radius: 11px; background: #f7f7f7;}
.election_tooltip .add_info .inner>div{display:inline-block;}
.election_tooltip .add_info .inner .num2{margin-left: 10px; padding-left: 10px; position: relative;}
.election_tooltip .add_info .inner .num2:after{position: absolute; left:0; top:0; width: 1px; height: 100%; background: rgba(34, 34, 34, .2); content: "";}

.counting_module .elec2021{padding-top: 12px; margin-top: 24px; border-top: 1px solid #94a1c0; min-height: 171px;}
.counting_module .elec2021 .top_info{margin-bottom: 10px; display: flex; align-items: center; font-size: 16px; color: #222;}
.counting_module .elec2021 .top_info div:first-child{position: relative; display: flex; align-items: center;;}
.counting_module .elec2021 .top_info div:first-child:after{width: 1px; height: 14px; margin: 0 8px; background: #707070; content: '';}
.counting_module .elec2021 .top_info .location_ele{font-weight: 700;}
.counting_module .elec2021 .seat_count_list{display: flex; gap: 12px; justify-content: center;}
.counting_module .elec2021 .seat_count_list .item{display: flex; flex-basis: 25%; height: 124px; flex-grow: 1;}
.counting_module .elec2021 .seat_count_list .item .inner{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; background: #fff; font-weight: 500;}
/* .elec2021 .seat_count_list .item:nth-child(1){animation: fadeInRight 1s ease-in-out alternate;}
.elec2021 .seat_count_list .item:nth-child(2){animation: fadeInRight 1s 200ms ease-in-out alternate;}
.elec2021 .seat_count_list .item:nth-child(3){animation: fadeInRight 1s 400ms ease-in-out alternate;}
.elec2021 .seat_count_list .item:nth-child(4){animation: fadeInRight 1s 600ms ease-in-out alternate;} */
.counting_module .elec2021 .seat_count_list .item .num{margin-bottom: 2px; font-size: 24px;}
.counting_module .elec2021 .seat_count_list .item .jd_name{font-size: 14px;}
.counting_module .elec2021 .sgg_slide{display: flex; justify-content: center; gap: 12px;}
.counting_module .elec2021 .sgg_slide .item{flex-basis: 25%; flex-grow: 1;}
.counting_module .elec2021 .sgg_slide .item .inner{padding: 0 20px; background:#fff; border-radius: 6px;}
.counting_module .elec2021 .sgg_slide .sgg_name{padding: 9px; font-size: 14px; font-weight: 500; color: #222; text-align: center; border-bottom: 1px solid #eaeaea;}
.counting_module .elec2021 .sgg_slide .vs_bar_wrap{padding: 12px 0;}
.counting_module .elec2021 .sgg_slide .vs_bar{position: relative; height: 8px; width: 100%; background: #f1f1f1; margin: 4px 0;}
.counting_module .elec2021 .sgg_slide .vs_bar:after{position: absolute; left:50%; bottom: 0; width: 1px; height: 100%; background: #d7d7d7; content: '';}
.counting_module .elec2021 .sgg_slide .vs_bar .bar1{position: absolute; left: 0; bottom: 0; height: 100%; background: red; transform-origin:0 0; animation: right-animate 1.5s ease alternate;}
.counting_module .elec2021 .sgg_slide .vs_bar .bar2{position: absolute; right: 0; bottom: 0; height: 100%; background-color: blue; transform-origin:100% 100%; animation: right-animate 1.5s ease alternate;}
.counting_module .elec2021 .sgg_slide .candidate_info{display: flex; font-size: 14px; color: #222; justify-content: space-between;}
.counting_module .elec2021 .sgg_slide .num_wrap{display: flex; justify-content: space-between;}
.counting_module .elec2021 .sgg_slide .num_wrap div{font-size: 16px; font-weight: 500;}
.counting_module .elec2021 .sgg_slide .num_wrap div em{font-size: 14px; font-weight: 400;}
.counting_module .elec2021 .data_null{width: 100%; height: 125px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; text-align: center;}
#depth2{display: none;}


.counting_module .elec2021 .sgg_slide2{overflow: hidden; display: none;}
.counting_module .elec2021 .sgg_slide2 .item{width: 100%;}
.counting_module .elec2021 .sgg_slide2 .item .inner{padding: 0 20px; background:#fff; border-radius: 6px;}
.counting_module .elec2021 .sgg_slide2 .sgg_name{padding: 9px; font-size: 14px; font-weight: 500; color: #222; text-align: center; border-bottom: 1px solid #eaeaea;}
.counting_module .elec2021 .sgg_slide2 .vs_bar_wrap{padding: 12px 0;}
.counting_module .elec2021 .sgg_slide2 .vs_bar{position: relative; height: 8px; width: 100%; background: #f1f1f1;}
.counting_module .elec2021 .sgg_slide2 .vs_bar:after{position: absolute; left:50%; bottom: 0; width: 1px; height: 100%; background: #d7d7d7; content: '';}
.counting_module .elec2021 .sgg_slide2 .vs_bar .bar1{position: absolute; left: 0; bottom: 0; height: 100%; background: red; transform-origin:0 0; animation: right-animate 1.5s ease alternate;}
.counting_module .elec2021 .sgg_slide2 .vs_bar .bar2{position: absolute; right: 0; bottom: 0; height: 100%; background-color: blue; transform-origin:100% 100%; animation: right-animate 1.5s ease alternate;}
.counting_module .elec2021 .sgg_slide2 .candidate_info{display: flex; font-size: 14px; color: #222; justify-content: space-between;}
.counting_module .elec2021 .sgg_slide2 .num_wrap{display: flex; justify-content: space-between;}
.counting_module .elec2021 .sgg_slide2 .num_wrap div{font-size: 16px; font-weight: 500;}
.counting_module .elec2021 .sgg_slide2 .num_wrap div em{font-size: 14px; font-weight: 400;}
.counting_module .elec2021 .sgg_slide2 .navi{display: flex; align-items: center; justify-content: center; margin-top: 8px;}
.counting_module .elec2021 .sgg_slide2 .navi.hide{display: none;}
.counting_module .elec2021 .sgg_slide2 .navi .fraction{display: flex; justify-content: center; width: auto; margin: 0 12px;}
.counting_module .elec2021 .sgg_slide2 .navi .btn{display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #eaeaea; border-radius: 100%; background-color: #fff;}
.counting_module .elec2021 .sgg_slide2 .navi .btn span{width: 7px; height: 12px; background: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path id="Stroke 1" d="M6.93555 1.81851L5.75693 0.64011L0.526166 5.87181L5.75693 11.1035L6.93555 9.92511L2.88357 5.8719L6.93555 1.81851Z" fill="%23222222" /></svg>') 0 0 no-repeat;}
.counting_module .elec2021 .sgg_slide2 .navi .next_btn span{transform: rotateZ(-180deg);}


@media all and (max-width: 870px) {
  /* .party_chart_box.election_info ul{flex-direction: column;} */
  .party_chart_box.election_info ul li{width: 100%;}
}

@media all and (max-width: 790px) {
  .party_chart_box .top{padding: 8px 16px;}
  .party_chart_box.party_chart .bot{height: 350px;}
  .party_list .list_item .party_icon{width: 32px; height: 32px;}
  .party_list .list_item .party_name{margin-left: 8px; font-size: 16px;}
  .party_list .list_item .party_count{font-size: 14px;}
  .party_list .list_item .party_count strong{font-size: 16px;}
  .party_chart_box .title{font-size: 14px;}

  .party_chart2 .top .count_num{font-size: 14px;}
  .party_chart2 .top .count_num span{font-size: 14px;}
  .party_chart2 .top .count_num span em{font-size: 12px;}

  .counting_module .elec2021 .top_info{font-size: 14px;}

  .counting_module .elec2021 .seat_count_list{flex-wrap: wrap; gap: 0; margin-left: -6px;}
  .counting_module .elec2021 .seat_count_list .item{height: 85px; flex-basis: 50%; padding-left: 6px; padding-bottom: 6px; box-sizing: border-box;}
  .counting_module .elec2021 .seat_count_list .item:last-child{flex-grow: 1;}
  .counting_module .elec2021 .seat_count_list .item .num{font-size: 16px; margin-bottom: 0;}
  .counting_module .elec2021 .seat_count_list .item .jd_name{font-size: 12px;}

  .party_chart2 .list_container{height: 480px;}

  .counting_module .elec2021 .sgg_slide{display: none !important;}
  .counting_module .elec2021 .sgg_slide2{display: block;}

  .counting_module .elec2021 .data_null{padding: 0 16px; font-size: 16px; text-align: center;}
}

@media all and (max-width: 490px) {
  .party_chart2 .list_container{height: 350px;}
}

/* .counting_module .election_tooltip{display: none;}
.counting_module .drilldown .election_tooltip{display: inherit;} */








@media all and (max-width: 899px) {
  .candidate_list_wrap .candidate_list .item{padding: 10px 0;}
  .candidate_list_wrap .candidate_list .item .thumb_wrap{width: 25%;}
  .candidate_list_wrap .candidate_list .item .thumb{width: 100%; height: inherit; margin-right: 0;}
  .candidate_list_wrap .candidate_list .item .info{width: 75%;}
  .candidate_list_wrap .candidate_list .item .name{text-align: center; max-width: inherit; width: 100%;}
}

@media all and (max-width: 790px) {
  /* 기본 레이아웃 */
  #election2024 .map_container{gap: 20px;}
  #election2024 .map_container .left{width: 50%; padding-right: 0;}
  #election2024 .map_container .right{width: 50%; max-width: inherit;}
  #election2024 .map_box{padding: 0; height: 100%;}
  #election2024 .refresh_btn{right: 0; top: 0;}
  #color-info-container{right: 0px;}


  /* 후보자 섹션 */
  #election2024 .candidate_cover .inner{padding: 0 16px;}
  #election2024 .candidate_cover h1{font-size: 20px; margin-bottom: 8px;}
  #election2024 .candidate_cover h2{font-size: 16px;}
  #election2024 .candidate_cover span{margin-top: 38px; margin-bottom: 0;}
  #election2024 .candidate_cover span img{width: 222px;}
  .candidate_list_wrap .candidate_list .item{padding: 10px 0;}
  .candidate_list_wrap .candidate_list .item .thumb_wrap{width: 25%;}
  .candidate_list_wrap .candidate_list .item .thumb{width: 100%; height: inherit; margin-right: 0;}
  .candidate_list_wrap .candidate_list .item .info{width: 75%;}
  .candidate_list_wrap .candidate_list .item .name{text-align: center; max-width: inherit; width: 100%;}
  #election2024 .map_container .map_info_txt.info_txt_top{font-size: 12px; padding: 0 0 0 0; top: 15px;}
  #election2024 .map_container .map_info_txt.info_txt_bot{display: block; padding: 0 0 0 0; bottom: 0;}
  #election2024 .map_container .map_info_txt.info_txt_bot .intime_target:after{display: none;}
}

#election2024.counting_main{max-width: 623px;}

@media all and (max-width: 720px) {
  #election2024.counting_main .map_container .left{width: 100%; padding-right: 0;}
  #election2024.counting_main .map_box{margin: 0 auto; max-width: 100%;}
}

@media all and (max-width: 640px) {
  /* 기본 레이아웃 */
  #election2024 .election_container{padding:0 12px 15px 12px}
  #election2024 .map_container{flex-direction: column;}
  #election2024 .map_box{height: 600px; margin: 0 auto; padding: 50px 0;}
  #election2024 .map_container .left{width: 100%;}
  #election2024 .map_container .right{width: 100%;}
  #election2024 .refresh_btn{right: 0; top: 12px;}

  /* 후보자 섹션 */
  .candidate_list_wrap{height: 465px;}
  #election2024 .candidate_cover{height: 100%; flex-direction: column; justify-content: flex-start;}
  #election2024 .candidate_cover .inner{padding-top: 15px;}
  #election2024 .candidate_cover p.mobile_p{display: flex; margin-bottom: 31px; flex-direction: column;}
  #election2024 .candidate_cover p::before{width: 20px; height: 20px; background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Up"><path id="Stroke-1" d="M7.41415 15.9912L6.00006 14.5769L12.2781 8.29995L18.5562 14.5769L17.1421 15.9912L12.2782 11.1288L7.41415 15.9912Z" fill="%23707070"/></g></svg>') 0 0 no-repeat; content: '';}
  #election2024 .candidate_cover p.desktop_p{display: none;}
  #election2024 .candidate_cover h1{font-size: 20px; margin-bottom: 8px;}
  #election2024 .candidate_cover h2{font-size: 16px;}
  #election2024 .candidate_cover span{margin-top: 38px; margin-bottom: 0;}
  #election2024 .candidate_cover span img{width: 222px;}
  .candidate_list_wrap .list_container{height: 389px;}
  .candidate_list_wrap .sgg_names.column .tab_button{word-break: break-all; flex-basis: 40%; text-align: center;}
  #election2024 .refresh_btn{right: 0; top: 51px;}

  /* #election2024 .map_box{width: 320px; overflow: visible !important;} */
}

@keyframes right-animate {
  0% {
    opacity:0;
    transform: scaleX(0);
  }
  100% {
    opacity:1;
    transform: scaleX(100%);
  }
}





.turnout_banner{max-width: 950px; margin: 0 auto; background: #fff;}
.turnout_banner .refresh{width: 20px; height: 20px;}
.turnout_banner .top{padding: 0 12px; display: flex; align-items: center; justify-content: space-between; height: 48px; background: linear-gradient(90deg, #230E3D 0.05%, #31236D 58.34%, #A97979 117.8%);}
.turnout_banner .top .title1{font-size: 18px; font-weight: 500; color: #fff;}
.turnout_banner .top .intime_wrap{display: flex; align-items: center;}
.turnout_banner .top .intime{font-size: 12px; color: #bdb3cb;}
.turnout_banner .bot {display: flex; align-items: center; padding: 16px 0; border: 1px solid #eaeaea;}
.turnout_banner .bot .item{flex-basis: 50%; text-align: center;}
.turnout_banner .bot .item:last-child{display: flex; justify-content: center;}
.turnout_banner .bot .item:first-child{position: relative;}
.turnout_banner .bot .item:first-child:after{position: absolute; right: 0; top: 0; width: 1px; height: 68px; background: #eaeaea; content: '';}
.turnout_banner .bot .item .tt{font-size: 16px;}
.turnout_banner .bot .item .num{font-size: 30px; font-weight: 700;}
.turnout_banner .bot .item .num .per{font-size: 18px; font-weight: 500;}
.turnout_banner .bot .item .val{font-size: 24px; font-weight: 700;}
.turnout_banner .bot .item .val .per{font-size: 18px; font-weight: 500;}

.turnout_banner .slider_wrap{position: relative;}
.turnout_banner .slider{width: 150px;}
.turnout_banner .btns{width: 127px; position: absolute; top:25px; left:50%; transform: translateX(-50%); height: 24px; z-index: 9999;}
.turnout_banner .btns button{width: 24px; height: 24px;}
.turnout_banner .btns button img{width: 100%;}
.turnout_banner .btns .prev{position: absolute; left:0;}
.turnout_banner .btns .next{position: absolute; right:0;}
.turnout_banner .btns .next img{transform: rotateY(180deg);}

.realtime_wrap_banner{max-width: 950px; padding: 14px 16px; margin: 0 auto; background: #fff; border: 1px solid #eaeaea; border-top: none; border-radius: 0%; box-sizing: border-box;}
.realtime_wrap_banner .label{width: 70%; flex-wrap: wrap;}
.realtime_wrap_banner .label li{font-size: 12px; flex-basis: 50%; margin-left: 0;}

.counting_module .highcharts-label.map-datalabel span{text-shadow: 0 0 1px #000;}
.counting_module.counting_main .highcharts-label.map-datalabel span {
  text-shadow: 0 0 2px #000;
}

#mapArea .highcharts-root{overflow: visible;}
#mapArea>div{overflow: visible !important;}



@media all and (max-width: 790px) {

}