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

html, body{height:100%; overflow:inherit; background: #f3f5f6;}
html{-webkit-text-size-adjust:none;}
body{min-width:320px;word-break:keep-all;word-wrap:break-word;white-space:inherit;color:#000;}
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:#000; text-decoration:none;}

.tab {display: flex; margin-bottom: 30px;}
.tab button{margin:0 20px; width: 100px; height: 50px; text-align: center; border: 1px solid #000;}

.button_wrap{
  max-width: 524px;
}

.button_wrap button{
  padding: 5px;
  margin: 3px;
  border: 1px solid black;
  border-radius: 30%;
  min-width: 50px;
}

.bar_chart_wrap {
  max-width: 416px;
  height: 322px;
  padding: 16px 20px 20px 20px;
  box-sizing: border-box;
  position: relative;
}


.bar_chart .add_icon {
  /* margin-left: 8px; */
  width: 52px;
  height: 34px;
  background: url("http://news.chosun.com/election2022/chart/img//copy-2.png");
  background-size: 100% 100%;
  text-indent: -9999;
}

.bar_chart_top {
  position: relative;
  text-align: center;
  background:#3d4d61;
  color: #fff;
  padding: 25px 0;
}

.bar_chart_top .closeBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: block;
  width: 24px;
  height: 24px;
}

.bar_chart_top .closeBtn img {
  width: 100%;
}

.bar_chart_top h1 {
  font-family: 'ChosunMGothicBold';
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

.bar_chart_top h2 {
  font-size: 15px;
  color: #bccbda;
  text-align: center
}

.bar_chart_wrap .more_btn {
  font-size: 14px;
  color: #707070;
  position: absolute;
  right: 16px;
  top: 16px;
  padding-right: 16px;
}

.bar_chart_wrap .more_btn:after {
  position: absolute;
  right: 0;
  top: 0;
  content: '';
  width: 16px;
  height: 16px;
  background: url("//news.chosun.com/election2022/chart/img//arrow_icon.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

.bar_chart_wrap .chart_title {
  margin-bottom: 20px;
}

.bar_item {
  margin-top: 24px;
}

.bar_item:first-child {
  margin-top: 0;
}

.bar_item .item_in {
  display: flex;
  justify-content: flex-end;
}

.bar_item .hubo_info {
  display: flex;
  margin-right: auto;
  align-items: center;
}

.bar_item .hubo_info .hubo_pic {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 100%;
}

.bar_item .hubo_info .hubo_pic img {
  width: 100%;
  height: 100%;
}

.bar_item .hubo_info .hubo_name {
  margin-left: 8px;
}

.bar_item .hubo_info .hubo_name .name {
  font-size: 16px;
  color: #222;
  font-family: 'ChosunMGothicBold';
}

.bar_item .hubo_info .hubo_name .jd_name {
  font-size: 12px;
  color: #707070;
}

.bar_item .vote_num {
  text-align: center;
}

.bar_item .vote_num .num1 {
  font-size: 23px;
  font-family: 'ChosunMGothicBold';
}

.bar_item .vote_num .num2 {
  font-size: 12px;
  color: #999;
}

.bar_item .vote_num .per{
  font-size: 15px;
}

.bar_wrap {
  width: 100%;
  height: 12px;
  background: #f7f7f7;
  margin-top: 4px;
  position: relative;
}

.bar_wrap .bar {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  animation: right-animate 1.5s ease alternate;
}

.column_chart_wrap {
  max-width: 416px;
  height: 271px;
  border-radius: 5px;
  /* background: #707070; */
  box-sizing: border-box;
  padding: 20px;
}

.column_chart_wrap .chart_title {margin-bottom: 12px;}

.chart_wrap {
  background: #fff;
}

.chart_title {
  font-size: 18px;
  color: #222;
  font-family: 'ChosunMGothicBold';
}

.hubo_label {
  display: flex;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.hubo_label div {
  position: relative;
  padding-left: 14px;
  margin-left: 8px;
}

.hubo_label div:after{position: absolute; left:0; top:1.5px; display: block; width:10px; height:10px; border-radius:100%; background: grey; content:'';}
.hubo_label div:first-child{margin-left: 0;}
.hubo_label div:after {background-color: var(--party-color);}
/* .hubo_label div:nth-child(1):after{background: #004EA2;}
.hubo_label div:nth-child(2):after{background: #C9151E;}
.hubo_label div:nth-child(3):after{background: #EA5504;} */

#columnChart {
  width:100%;
}

.data_label {
  font-family: 'ChosunGothic';
  font-size: 15px;
  color: #222;
}

.data_label .per {
  font-size: 12px;
}

.data_label.bold {
  font-family: 'ChosunMGothicBold';
  font-size: 18px;
}

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

  100% {
    opacity: 1;
    transform: scaleX(100%);
  }
}

@media (max-width: 1366px) {
  .chart_wrap {
    max-width :100%;
  }
}

@media all and (max-width: 780px) {
  .bar_chart_wrap {
    padding: 16px 12px 20px 12px;
  }

  .column_chart_wrap {
    padding: 16px 12px 20px 12px;
  }

  .bar_item .vote_num .num1 {
    font-size: 24px;
  }

  .bar_item .vote_num .per {
    font-size: 14px;
  }
}

@media all and (max-width: 540px) {
  .data_label {
    font-size: 14px;
  }
  .data_label .per {
    font-size: 10px;
  }
  .data_label.bold {
    font-size: 16px;
  }
}