@charset "utf-8";

@font-face {
    font-family: "ChosunGothic";
	src: url("font/ChosunGothic.eot");
    src:
      local("ChosunGothic"),
      url("font/ChosunGothic.woff2") format("woff2"),
      url("font/ChosunGothic.woff") format("woff");
	  url("http://www.chosun.com/ChosunGothic.woff2") format("woff2"),
      url("http://www.chosun.com/ChosunGothic.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "ChosunMGothicBold";
    src:
      local("ChosunMGothicBold"),
      url("font/ChosunMGothicBold.woff2") format("woff2"),
      url("font/ChosunMGothicBold.woff") format("woff");
	  url("http://www.chosun.com/ChosunMGothicBold.woff2") format("woff2"),
      url("http://www.chosun.com/ChosunMGothicBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "ChosunMyeongjo";
    src:
      local("ChosunMyeongjo"),
      url("font/ChosunMyeongjo.woff2") format("woff2"),
      url("font/ChosunMyeongjo.woff") format("woff");
	  url("http://www.chosun.com/ChosunMyeongjo.woff2") format("woff2"),
      url("http://www.chosun.com/ChosunMyeongjo.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "ChosunMMyeongjoBold";
    src:
      local("ChosunMMyeongjoBold"),
      url("font/ChosunMMyeongjoBold.woff2") format("woff2"),
      url("font/ChosunMMyeongjoBold.woff") format("woff");
	  url("http://www.chosun.com/ChosunMMyeongjoBold.woff2") format("woff2"),
      url("http://www.chosun.com/ChosunMMyeongjoBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
  }


html, body { font-family: "ChosunGothic";width:100%;height:100%;margin:0;padding:0;background:#fff}
a {text-decoration: none;}
a:hover {text-decoration: none;}
a:link {text-decoration: none;}

.new-appro {width:100%;}

/* 조사기관 바이어스 */
.agency-bias {width: 100%;}
.agency-bias h3 { font-size:23px;line-height:32px}
.agency-bias .ratin-tab {margin:15px 0 0;padding:0;}
.agency-bias .ratin-tab li {padding:12px 20px;min-width:112px;}
.agency-bias .ratin-tab li a {font-size:20px;line-height:28px}

/* 지지율과 지방선거 */
.approval-rating { clear:both; display:block; width: 100%; }
.approval-rating > ul {padding-left:0;}
.ratin-tab, .appro-tab, .apparatus-tab { clear:both;display: block;}
.ratin-tab:after, .appro-tab:after, .apparatus-tab:after {content:''; clear:both;display:block;}
.ratin-tab li, .appro-tab li, .apparatus-tab li {float:left;}
.ratin-tab li:before, .appro-tab li:before, .appro-bottom li:before { display:none;}
.ratin-tab li {padding:13px 10px 15px;background:#eaeaea;width:25%;text-align:center;display:table-cell;box-sizing:border-box;}
.ratin-tab li a { display:inline-block; cursor:pointer; color:#707070; font-size:23px;line-height:32px}
.ratin-tab li.on { background: #fff}
.ratin-tab li.on a {color:#222222}
.ratin-content { display: none; }
.ratin-box { clear:both; display:block; width:100%;}
.appro-graph-cont { width: 100%;}
.appro-tab {margin:10px 0 0;padding:0;}
.appro-tab ul {padding:0 0;text-align:center;}
.appro-tab ul:after {content:'';clear:both;display:block;}
.appro-tab li { position: relative;float:left;line-height:28px;display:inline-block;padding:0 8px;margin:2px 0;}
.appro-tab li:first-child:before {display: none}
.appro-tab li:before {content:'';display:inline-block; position:absolute;top:8px; left:0; width:1px; height:18px; border-left:1px solid #000}
.appro-tab li a {display:inline-block; cursor:pointer;vertical-align:top;font-size:20px;color:#000;}
.appro-tab li a img {width:auto;height:45px;}
.appro-tab li.on span {border-bottom:2px solid #000;}
.appro-tab li a span {display:inline-block;padding-bottom:2px;}
.appro-tab li a:hover span {border-bottom:2px solid #000;}

.appro-graph-cont {clear:both; display:block;margin:15px 0 0}
.graph-area { width:100%; height:auto; background: #bababa; min-height:400px;}

.appro-bottom {clear:both; display:block; width:100%;padding:8px 0 0;}
.apparatus-tab {margin:0;padding:0;}
.apparatus-tab li { position: relative;padding:0 10px 0 10px;line-height:26px}
.apparatus-tab li a {display:inline-block; cursor:pointer; font-size:18px;color:#000;}
.apparatus-tab li a span {display:inline-block;}
.apparatus-tab li:before {content:'';display:inline-block; position:absolute;top:7px; left:0; width:1px; height:16px; border-left:1px solid #000}
.apparatus-tab li:first-child:before {display: none}
.apparatus-tab li.on span {color:#707070}
.apparatus-tab li a span {display:inline-block;}
.apparatus-tab li a:hover { color: #707070}

.colum-group {width:100%;}
.colum-group table {width:100%;table-layout: fixed;box-sizing:border-box; border-collapse:collapse}
.colum-group table thead th {vertical-align:bottom;padding:10px 10px;text-align:center;height:47px;border-bottom:4px solid #000;font-size:9px;cursor:pointer}
.colum-group table thead th.on {background:#000;color:#fff}
.colum-group .center {text-align:center;}
.colum-group .left {text-align:left;}
.colum-group table tbody th {text-align:left;padding:10px 10px;font-size:10px;border-bottom:1px solid #bebebe;}
.colum-group table tbody td {text-align:center;padding:10px 10px;font-size:10px;border-bottom:1px solid #bebebe;}
.ico-o {display:inline-block;font-size:10px;color:#000}
.graph-wrap {width:50%;margin:0 auto;}
.graph-stick {position:relative;height:24px;border-left:1px solid #000;margin:0 auto;text-align:center;width: auto;}
.graph-stick .right {position:absolute;top:4px;left:0;height:15px;background:#ff2700;}
.graph-stick .left {position:absolute;top:5px;height:15px;background:#4eaef1;}
.wind {width:100%;display:inline-block;line-height:12px;}


/*20210322 추가 : s*/
.new-appro {width:100%; margin-top:-16px;}
.ratin-content {padding:0 10px;}
/*20210322 추가 : e*/


@media only screen and (max-width: 767px) {
	
	.agency-bias h3 { font-size:20px;line-height:28px}
	.agency-bias .ratin-tab li {padding:6px 10px;min-width:80px;}
	
	.ratin-tab li {padding:6px 10px 10px;}
	.ratin-tab li a { font-size:18px; line-height:26px}
	.appro-tab li {line-height: 20px;}
	.appro-tab li a { font-size:16px;}
	.appro-tab li:before {top:4px;height:15px;}

	.apparatus-tab li:before {top:5px;height:14px;}
	.apparatus-tab li a { font-size: 14px;}
	.apparatus-tab li { position: relative;padding:0 8px 0 8px;line-height:26px}

	.graph-area {min-height:200px;}
}