@charset "utf-8";
/* @import url("//news.chosun.com/dhtm/css/css_reset_2018.css");
@import url("//news.chosun.com/election2022/css/font.css"); */


* {
  box-sizing: border-box;
}

/* 
body {
  color: #222;
  font-family: 'ChosunGothic', 'ChosunMGothicBold', AppleSDGothicNeo-Regular, '맑은 고딕', 'Malgun Gothic';
  font-size: 16px;
  font-weight: normal;
} */

html,
body {
  height: 100%;
  overflow: inherit;
  overflow-y: hidden;
  /* background-color: transparent !important; */
  background: #f7f7f7 !important;
}

html {
  -webkit-text-size-adjust: none;
}

body {
  /* min-width: 320px; */
  word-break: keep-all;
  word-wrap: break-word;
  white-space: inherit;
  color: #222;
}

body,
input,
button,
textarea {
  font: 16px/1.3 'ChosunGothic', AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic", 나눔고딕, 돋움, Dotum, 굴림, Gulim, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0;
}

button {
  border: none;
}

a,
a:visited {
  color: #222;
  text-decoration: none;
}







/* common */
/* 1.컬러 수정 더불어민주당 #3C68C8 자유한국당 #C54848 국민의당 #DA8A39 바른정당 #38B0DA 정의당 #F8C807 / 텍스트 색상 #e9bc08*/
:root {
  /* 배경컬러 */
  --bg-color: "#ebeef4";
  /* 정당컬러 */
  /* 더불어민주당 */
  --party1: '#3c68c8';
  /* 자유한국당 */
  --party2: '#c54848';
  /* 국민의당 */
  --party3: '#da8a39';
  /* 바른정당 */
  --party4: '#38b0da';
  /* 정의당 */
  --party5: '#f8c807';
  --graph-color1: 'aaa';
  --graph-color2: 'aaa';
  --border-radius: 4px;
}


#election2022 {
  max-width: 940px;
  margin: 0 auto;
}

/* .election-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.election-title b {
  font-family: 'ChosunMGothicBold', sans-serif;
  font-size: 26px;
  font-weight: bold;
  color: #46505d;
}

.election-title span {
  margin-right: 7px;
} */


.election-tabs {
  display: flex;
  height: 62px;
  justify-content: center;
  align-items: center;
  background-color: #3d4d61;
  /* padding: 18px 0 12px 0; */
}

.election-tab {
  position: relative;
  background: none;
  color: #bccbda;
  border: none;
  cursor: pointer;
  transition: 0.1s ease;
  height: 100%;
  font-size: 20px;
  line-height: 1.6;
  font-weight: bold;
  font-family: 'ChosunMGothicBold', sans-serif;
}

.election-tab.active::after {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 0;
  width: 190px;
  height: 4px;
  background-color: #fff;
}




.election-tab:nth-of-type(1) {
  margin-right: 99px;
}

.election-tab.active,
.election-tab:focus {
  color: #ffffff;
}


.election-container {
  padding: 12px 16px 16px 16px;
  background-color: #ebeef4;
  border: solid 1px #eaeaea;
  min-height: 800px;

}

.election-item {
  display: none;
}

.election-item.active {
  display: block;
}




/* 지도 영역 */
.map-container {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}


.map-content {
  position: relative;
  width: 100%;
}


.map-box {
  width: 100%;
  height: 100%;
  padding: 30px 30px 72px 10px;
  max-height: 740px;
  /* padding: 50px 0; */
  /* margin: 0;
  padding: 0; */
  /* padding: 74px 32px 72px 37px; */
  position: relative;
  z-index: 999;
}


.map-box::after {
  content: "";
  display: block;
  width: 46px;
  height: 43px;
  position: absolute;
  right: 34px;
  top: 224px;
  background: url('//news.chosun.com/election2022/img/ulleungdo_bg.svg') no-repeat;
  z-index: -1;
  background-size: cover;
}



.map-box.drilldown::after {
  display: none;
}


.map-box::before {
  content: "";
  display: block;
  width: 116px;
  height: 63px;
  position: absolute;
  left: 26px;
  bottom: 65px;
  background: url('//news.chosun.com/election2022/img/jejudo_bg.svg') no-repeat;
  z-index: -1;
  background-size: cover;
}

.map-box.drilldown::before {
  display: none;
}




.map-datalabel {
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  font-size: min(12px,12px);
}


#color-info-container {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-size: 0;
}

#color-info-container:hover .color-info {
  visibility: visible;
}

.color-info {
  text-align: left;
  width: 152px;
  position: absolute;
  top: -100px;
  right: 50%;
  margin-right: -10px;
  visibility: hidden;
  padding: 12px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  background-color: #5a6574;
  color: #ffffff;
  font-family: 'ChosunGothic';
}

.color-info b {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'ChosunGothic';
  line-height: 1.43;
}

.color-info ul {
  font-size: 0;
}

.color-info li {
  display: flex;
  padding-top: 4px;
  font-size: 12px;
}

.color-info li:first-child {
  padding-top: 0;
}


.color-info li span {
  margin-right: 1px;
  width: 42px;
  height: 12px;
}

.color-info li:last-child span {
  height: auto;
  font-size: 12px;
  font-family: 'ChosunGothic';
  line-height: 1.33;
}


.color-info li span:last-child {
  margin: 0;
}

.bg-type1.color1 {
  background-color: #99b9e2;
}

.bg-type1.color2 {
  background-color: #6296d8;
}

.bg-type1.color3 {
  background-color: #3c68c8;
}

.bg-type2.color1 {
  background-color: #e3a3a3;
}

.bg-type2.color2 {
  background-color: #db7f7f;
}

.bg-type2.color3 {
  background-color: #c54848;
}






.election-result {
  /* width: 45%; */
  width: 100%;
  max-width: 416px;
}



.election-info {
  margin-bottom: 12px;
  padding: 16px 20px 20px;
  background-color: #ffffff;
  border-radius: var(--border-radius);
}

.election-info h2 {
  margin-bottom: 14px;
  font-family: 'ChosunMGothicBold', sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.election-info ul {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}

.election-info li:nth-of-type(1),
.election-info li:nth-of-type(2) {
  margin-bottom: 16px;
}

.election-info li:nth-of-type(odd) {
  flex-basis: 55%;
}


.election-info li span {
  font-family: 'ChosunGothic', sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #707070;
}

.election-info li b {
  margin-left: 6px;
  font-family: 'ChosunMGothicBold';
  font-size: 18px;
  font-weight: bold;

}

.election-info li em {
  font-family: 'ChosunGothic';
  font-size: 12px;
  font-weight: normal;
}



.election-tooltip {
  color: #fff;
  width: 231px;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  border: solid 1px #5a6574;
  background-color: #5a6574;
  box-sizing: border-box;
}


.election-tooltip h2 {
  background-color: #49525f;
  padding: 8px 0 5px 12px;
  font-family: 'ChosunMGothicBold';
  font-size: 15px;
  font-weight: bold;
  line-height: 1.73;
}



.election-tooltip ul {
  /* padding-top: 5px; */
}

.election-tooltip li {

  /* padding: 10px; */
  background-color: #5a6574;
}


.election-tooltip li div {
  padding: 4px 12px 8px 12px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  border-bottom: 0.5px solid rgba(34, 34, 34, .2);
}

.election-tooltip li:first-child div {
  padding: 10px 12px 8px 12px;
}


.election-tooltip li:last-child div {
  border-bottom: none;
}




.election-tooltip li b {
  margin-right: auto;
  text-align: left;
  font-family: 'ChosunMGothicBold';
  font-size: 14px;
  font-weight: bold;
  line-height: 1.43;
}

.election-tooltip li strong {
  display: block;
  font-family: 'ChosunGothic';
  font-size: 10px;
  color: #bccbda;
  line-height: normal;
}



.election-tooltip li em {
  font-family: 'ChosunGothic';
  font-size: 12px;
  font-weight: normal;
  color: #bccbda;
  line-height: normal;
}

.election-tooltip li p {
  font-family: 'ChosunMGothicBold';
  font-size: 20px;
  font-weight: bold;
  margin-left: 6px;
  line-height: 1.3;
}

.election-tooltip li p small {
  font-size: 12px;
}


/* .election-tooltip li:nth-of-type(1) p {
  color: #9dbde6;
}

.election-tooltip li:nth-of-type(2) p {
  color: #eababa;
}

.election-tooltip li:nth-of-type(3) p {
  color: #e1b29a;
} */



/* 투표율 데이터 (정적 데이터) */
.turnout-container {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d7dce1;
  padding-top: 20px;
}

.static-data {
  padding: 16px 20px 20px;
  /* width: 52%; */
  height: 267px;
  /* width: calc(100% / 2); */
  background-color: #ffffff;
  border-radius: var(--border-radius);
}

.static-data h3 {
  margin-bottom: 20px;
  font-family: 'ChosunMGothicBold', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #222222
}

.turnout-chart {
  width: 100%;
  height: 185px;
  overflow: visible !important;
}

.turnout-chart .highcharts-container {
  overflow: visible !important;
}




/* 19대 대선 주요 도시 성별 투표율 */

.gender.static-data {
  width: 100%;
  max-width: 480px;
}


.gender-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.gender-label {
  display: flex;
}

.gender-label li {
  position: relative;
  padding-left: 14px;
  margin-left: 8px;
  font-size: 12px;
  font-family: 'ChosunGothic', sans-serif;
  font-weight: normal;
  color: #999999;
}

.gender-label li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #3d4d61;
  border-radius: 100%;
}

.gender-label li:nth-child(1)::before {
  background-color: #8a9eb6;
}


.gender-box {
  display: flex;
}

.gender-graphic {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

.gender-graphic dt {
  font-size: 12px;
  font-weight: bold;
  font-family: 'ChosunMGothicBold', sans-serif;
  color: #222;
  margin-bottom: 12px;
}

.gender-graphic dd.m {
  display: none;
}


.gender-graphic img {
  width: 60px;
  height: 152px;
  object-fit: contain;
}



.gender-tooltip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 58px;
  border-radius: 1px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  background-color: #5a6574;
  color: #fff;
  font-family: 'ChosunGothic';
  font-size: 15px;
  font-weight: normal;
}


.gender-tooltip b {
  display: flex;
  align-items: center;
}

.gender-tooltip i {
  display: inline-block;
  margin-right: 5px;
  font-size: 0;
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.gender-tooltip .male {
  background-color: #3d4d61;
}

.gender-tooltip .female {
  background-color: #8a9eb6;
}

.gender-tooltip em {
  font-size: 12px;
}








/* 19대 대선 연령대별 투표율 */

.age.static-data {
  width: 100%;
  max-width: 416px;
}

.percent {
  font-size: 12px;
}

/* .agegroup-panel {
  padding: 16px 20px;
  width: 45%;
}

.agegroup-panel h3 {
  margin-bottom: 20px;
}


*/



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

  /* 투표율 데이터 (정적 데이터) */
  .static-data {
    padding: 16px 8px 20px;
  }

  .gender.static-data {
    max-width: 49.5%;
  }

  .age.static-data {
    max-width: 49.5%;
  }



  /* .map-box {
    overflow: visible !important;
  }

  .highcharts-container {
    overflow: visible !important;
  } */



}



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


@media all and (max-width: 860px) {
  .election-result {
    max-width: 350px;
  }
}







/* @media all and (max-width: 680px) { */

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



  .election-container {
    padding: 27px 8px 12px;
  }



  .map-container {
    padding-bottom: 12px;
    flex-direction: column;
  }

  .map-box {
    margin: 0 auto;
    width: 405px;
    height: 600px;
    padding: 0 0 30px;
  }



  .map-box::after {
    right: 0;
    top: 170px;
  }






  .map-box::before {
    left: 16px;
    bottom: 24px;
    width: 100px;
    height: 56px;
  }






  .election-result {
    max-width: none;
  }

  /* 투표율 데이터 (정적 데이터) */

  .turnout-container {
    flex-direction: column;
    padding-top: 12px;
  }

  .static-data {
    height: auto;
    padding: 16px 12px 20px;
  }

  .static-data h3 {
    margin-bottom: 12px;
  }

  .gender.static-data {
    max-width: 100%;
    margin-bottom: 12px;
  }

  .gender-title {
    flex-direction: column;
  }

  .gender-label {
    margin-bottom: 12px;
  }

  .gender-label li:first-child {
    margin-left: 0;
  }

  .gender-box {
    flex-direction: column;
  }

  .gender-graphic {
    width: 100%;
    flex-direction: row;
    margin: 0;
  }

  .gender-graphic dt {
    margin-right: 7px;
    margin-bottom: 0;
  }

  .gender-graphic dd.m {
    display: block;
  }

  .gender-graphic dd.pc {
    display: none;
  }


  .gender-graphic img {
    width: 147px;
    height: auto;
  }


  .age.static-data {
    max-width: 100%;
  }


  /* election-tooltip */

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

  /* .election-tooltip-box::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: burlywood;
  } */


  .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;
  }



  .election-tooltip {}

  .election-tooltip h2 {
    padding: 8px 0 7px 15px;
    font-size: 16px;
  }



  .popup-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }


  /* 
.map-box:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  touch-action: none;
} */

  /* 
  .map-box.pointer {
    pointer-events: none;
  }

  .map-box.pointer::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
  } */







}


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



@media all and (max-width: 480px) {
  .election-tabs {
    height: 50px;
    /* padding: 10px 0 14px; */
  }

  .election-tab {
    font-size: 18px;
    width: 50%;
    height: 100%;
    line-height: 1.44;
  }

  .election-tab:nth-of-type(1) {
    margin-right: 0;
  }

  .election-tab span {
    display: none;
    font-size: 0;
  }


  .election-tab.active::after {
    width: 100%;
    left: 0;
    bottom: 0;
  }



  .election-info {
    padding: 16px 12px;
  }

  .election-info h2 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .election-info li:nth-of-type(odd),
  .election-info li:nth-of-type(even) {
    flex-basis: 100%;
  }

  .election-info li:nth-of-type(1),
  .election-info li:nth-of-type(2),
  .election-info li:nth-of-type(3) {
    margin-bottom: 6px;
  }

  .election-info li span {
    font-size: 16px;
  }



  .map-box {
    width: 320px;
    overflow: visible !important;
  }



  .map-box::after {
    width: 36px;
    height: 28px;
    right: -8px;
    top: 192px;
  }






  .map-box::before {
    width: 86px;
    height: 44px;
    left: 0px;
    bottom: 66px;
  }





  /* 19대 대선 연령대별 투표율 */
  .percent {
    font-size: 10px;
  }

}