@charset "utf-8";
/*************************************************
 * 프로젝트명 : 2022 대선
 * commnet :
 * site-home-web : PC 국문 홈페이지
 * site-home-mob : Mobile 국문
*************************************************/

@import url('c3.css'); /* c3 */

canvas{font-weight:400;font-family:'Spoqa Han Sans Neo','Malgun Gothic','맑은 고딕',Gulim,'굴림',AppleSDGothicNeo-Regular,sans-serif;letter-spacing:-0.5px;}

/* =============== ######콘텐츠 Content ======================== */
/* ---------------- ####탭 ---------------- */
[class*='tab-unit'] .tab{overflow:hidden;display:inline-block;position:relative;z-index:0;box-sizing:border-box;border:none;background-color:transparent;color:inherit;font:inherit;line-height:normal;vertical-align:top;white-space:nowrap;cursor:pointer;letter-spacing:-0.3px;}
.tab-unit001{font-size:0;text-align:center;}
.tab-unit001 .tab{min-width:127px;height:46px;border:1px solid #e5e5e5;background-color:#fff;font-size:14px;color:#666;}
.tab-unit001 .tab.active{z-index:1;background-color:#193dd3;color:#fff;}

.tab-unit002{font-size:0;text-align:center;}
.tab-unit002 .tab{margin:0 12px;padding:5px;font-size:15px;line-height:20px;}
.tab-unit002 .tab.active{color:#193dd3;}


/* ---------------- ####여론조사 ---------------- */

/* ---- ##여론조사 그래프 ---- */
.poll-chart{}
.poll-chart .txt-mes{font-size:12px;color:#666;}
.poll-chart .txt-desc01{width:900px;margin:0 auto;}
.poll-chart .txt-desc01 .txt01{/* margin-left:26px; */font-size:13px;text-align:center;}
.poll-chart .txt-desc01 .txt01 span{margin-right:20px;}

.legend-wrap{margin-top:30px;font-size:0;text-align:center;}
.legend-wrap:after{content:"";visibility:hidden;display:block;clear:both;height:0;font-size:0;line-height:0;}
.legend-wrap [class*='legend-']{opacity:0;min-height:112px;vertical-align:top;
-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}
.legend-wrap [class*='legend-'].show{opacity:1;}

/* 범례 - 리서치 기관 */
.legend-wrap .legend-date{display:inline-block;width:165px;text-align:center;font-size:0;}
.legend-wrap .legend-date>div{margin-bottom:4px;font-size:0;line-height:0;color:#666;text-align:center;}
.legend-wrap .legend-date span,
.legend-wrap .legend-date strong,
.legend-wrap .legend-date button{overflow:hidden;display:inline-block;position:relative;z-index:0;box-sizing:border-box;padding:2px;border:none;background-color:transparent;font-size:13px;line-height:18px;letter-spacing:-1px;}
.legend-wrap .legend-date .day{display:block;margin-top:27px;font-weight:500;font-size:20px;line-height:30px;letter-spacing:0;color:#000;}
.legend-wrap .legend-date .res{display:none;padding-right:12px;}
.legend-wrap .legend-date .res:after{content:'/';display:block;clear:both;position:absolute;top:2px;right:4px;}
/* 버튼 - 이전날/다음날 (모바일 사용) */
.legend-wrap .poll-btn{overflow:hidden;display:none;box-sizing:border-box;width:60px;height:60px;margin:0;padding:0;border:0;background-color:transparent;}
.legend-wrap .poll-btn.active{display:block;}
.legend-wrap .poll-btn span{content:'';display:block;position:absolute;top:50%;left:50%;width:28px;height:28px;border:1px solid #000;border-right:0 !important;border-bottom:0 !important;background-image:none;}
.legend-wrap .poll-btn.prev span{margin-left:9px;
-webkit-transform:translate(-50%,-50%) rotate(-45deg);
transform:translate(-50%,-50%) rotate(-45deg);}
.legend-wrap .poll-btn.next span{margin-left:-9px;
-webkit-transform:translate(-50%,-50%) rotate(-225deg);
transform:translate(-50%,-50%) rotate(-225deg);}
/* 버튼 - 조사방법 */
.legend-wrap .legend-date .tooltip-cell{}
.legend-wrap .legend-date .btn-tool{color:#193dd3;text-decoration:underline;}

/* 범례 - 후보자 */
.legend-wrap .legend-list{display:inline-block;width:400px;margin:0 120px 0 0;text-align:center;}
.legend-wrap .legend-list>li{display:inline-block;width:87px;margin:0 5px;cursor:pointer;text-align:center;}
.legend-wrap .img-con{width:50px;height:50px;margin:0 auto;text-align:center;}
.legend-wrap .img-con img{width:100%;}
.legend-wrap .party-con{margin-top:6px;font-weight:300;font-size:12px;line-height:16px;}
.legend-wrap .candidate-A .party-con{color:#1face6;}
.legend-wrap .candidate-B .party-con{color:#e83b53;}
.legend-wrap .candidate-C .party-con{color:#ffca2c;}
.legend-wrap .candidate-D .party-con{color:#ea5504;}
.legend-wrap .info-con{font-weight:normal;font-size:15px;line-height:14px;}
.legend-wrap .data-con{margin-top:5px;font-weight:700;font-size:26px;line-height:100%;color:#000;}
.legend-wrap .data-con .unit{margin-left:1px;font-weight:300;font-size:15px;vertical-align:baseline;}
.legend-wrap .bar-graph{display:none;}
.legend-wrap .bar-graph .bar{background:#000;}
.legend-wrap .candidate-E,
.legend-wrap .candidate-F,
.legend-wrap .candidate-G{display:none !important;} /* 후보자 숨김 */

.legend-wrap .candidate-A .bar{background:#3792ec;}
.legend-wrap .candidate-B .bar{background:#e83b53;}
.legend-wrap .candidate-C .bar{background:#ffca2c;}
.legend-wrap .candidate-D .bar{background:#ea5504;}

.legend-wrap .candidate-A .pct{color:#3792ec;}
.legend-wrap .candidate-B .pct{color:#e83b53;}
.legend-wrap .candidate-C .pct{color:#ffca2c;}
.legend-wrap .candidate-D .pct{color:#ea5504;}

#chart{width:900px;height:400px !important;max-height:auto !important;margin:20px 0 0 106px;}
.c3-xgrid-focus{display:none !important;visibility:hidden !important;}
.c3-tooltip-container{display:none !important;transform:translate(20px,-50px);}
.c3-tooltip-container .value{display:block;font-size:14px;}
.c3-tooltip-container .value em{display:inline-block;margin-left:10px;}

.c3-axis text{fill:#000;font-weight:500;font-size:13px;}
.c3-axis .tick path,
.c3-axis .tick line{stroke:#333;stroke-opacity:0.3;}

.c3-axis .domain{stroke:#333;stroke-opacity:0.3;/* stroke-dasharray:2,2; */}
.c3-axis-y .domain{}
.c3-axis-x .domain{stroke:#333;stroke-opacity:0.3;}

.c3-axis-y text{font-weight:300;font-size:12px;color:#fff;}
.c3-ygrids line:first-child{stroke-opacity:0;}

/* 가이드 라인 가로 간격 사이에 굵게 포인트되는 라인 css 조절 */
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path{/* shape-rendering: inherit; */shape-rendering:crispEdges;}

.c3-legend-item{visibility:hidden !important;opacity:0 !important;} /* 범례 숨김 */
.c3-xgrid-lines{}
.c3-chart-line path{stroke-width:3px;stroke-linecap:round;}
.c3-event-rects{}
.c3-event-rects rect{}
.c3-chart-text{}
.c3-chart-text text{display:none;}

.c3-target-huboE,
.c3-target-huboF,
.c3-target-huboG{visibility:hidden !important;opacity:0 !important;} /* 후보자 가리기 */

.poll-chart .background1{fill:#000;opacity:0;}
.poll-chart .line-copy{stroke-opacity:0.1;/* stroke-dasharray:3,3; */}

.poll-chart .g-label{transform:translate(5px,-5px);fill:#ccc;font-size:14px;}
.poll-chart .g-label tspan{display:block;}
.poll-chart .g-label .name{}
.poll-chart .g-label .val{}
.poll-chart .label-A{fill:#3792ec;}
.poll-chart .label-B{fill:#e83b53;}
.poll-chart .label-C{fill:#ffca2c;}
.poll-chart .label-D{fill:#ea5504;}
.poll-chart .label-E{fill:#000;}
.poll-chart .label-F{fill:#000;}
.poll-chart .label-G{fill:#000;}

.poll-chart .y-line{fill:#000;opacity:1;}
.poll-chart .y-flag,
.poll-chart .y-flag1,
.poll-chart .y-flag2{fill:#ff8a00;/* opacity:0.3; */}

.poll-chart .g-point{}
.poll-chart .point-A{fill:#3792ec;}

.poll-table{margin-top:40px;}
.tbl-poll{width:960px;margin:0 auto;border-top:1px solid #a8a8a8;}
.tbl-poll th,
.tbl-poll td{padding:8px 0;border-bottom:1px solid #e5e5e5;color:#000;text-align:center;font-weight:400;font-size:14px;}
.tbl-poll th{font-weight:normal;}
.tbl-poll thead th,
.tbl-poll thead td{padding:10px 0;border-bottom:1px solid #a8a8a8;}

.tbl-poll .tit-cell{text-align:left;}
.tbl-poll span{font-weight:400;font-size:14px;color:#000;letter-spacing:-1px;}
.tbl-poll .dd{width:100px;padding-left:40px;font-weight:400;font-size:14px;color:#000;}
.tbl-poll .res{display:none;width:170px;}
.tbl-poll .co{padding-left:35px;}

.tbl-poll th .dd{width:80px;text-align:center;} /* 제목 thead */
.tbl-poll th .res{display:none;margin-left:34px;color:#000;}
.tbl-poll th .co{width:90px;padding-left:70px;text-align:center;}
.tbl-poll .point01{background:#3792EC;color:#fff;} /* a 이 */
.tbl-poll .point02{background:#E83B53;color:#fff;} /* b 윤 */
.tbl-poll .point03{background:#FFCA2C;color:#fff;} /* c 심 */
.tbl-poll .point04{background:#EA5504;color:#fff;} /* d 안 */
/* .tbl-poll .point05{background:#00b1ea;color:#fff;} */ /* e 김 */

.tooltip-cell{padding:0 !important;}
.tbl-poll .btn-tool{width:100%;height:40px;line-height:40px;margin:0;padding:0;border:0;background:none;font-weight:400;font-size:12px;color:#193dd3;cursor:pointer;text-decoration:underline;}

.tbl-poll .ww01{width:350px;}
.tbl-poll .ww02,
.tbl-poll .ww03,
.tbl-poll .ww04,
.tbl-poll .ww05,
.tbl-poll .ww06,
.tbl-poll .ww07,
.tbl-poll .ww08{width:120px;}
.tbl-poll .ww-last{width:70px;}

.tooltip-poll{position:absolute;bottom:-500px;width:300px;padding:22px;border:1px solid #a8a8a8;background:#fff;box-shadow:0 2px 0 #e5e5e5;z-index:100;
visibility:hidden;opacity:0;
-webkit-transition:0.1s all cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition:0.1s all cubic-bezier(0.6, 0.04, 0.98, 0.335);}
.tooltip-poll.active{visibility:visible;opacity:1;bottom:inherit;
-webkit-transition:0.35s all cubic-bezier(0.075, 0.82, 0.165, 1);
transition:0.35s all cubic-bezier(0.075, 0.82, 0.165, 1);}
.tooltip-poll .close-tooltip{display:none;}

.tooltip-poll p{font-size:12px;text-align:left;color:#666;}
.tooltip-poll .tit{margin-right:10px;font-weight:bold;font-size:12px;}
.tooltip-poll .mes{margin-top:10px;font-size:12px;line-height:140%;letter-spacing:-1px;}

/* 그래프 주의사항 설명글 */
[class*='txt-poll-guide']{box-sizing:border-box;}
[class*='txt-poll-guide'] p{font-size:12px;color:#666;}
/* 메인 : 그래프 하단 */
.txt-poll-guide01{width:845px;margin:-20px auto 0;}
/* 여론조사 페이지 : 테이블 하단 */
.txt-poll-guide02{width:900px;margin:30px auto 0;text-align:right;}


/* ---------------- ####역대 투표율 ---------------- */
#barChartDiv{width:100%;height:400px;}


/* ---------------- ####시도별 선거인수 ---------------- */
#treeMapDiv{width:100%;height:400px;}


/* =============== ####모바일모드 ======================== */
@media only screen and (max-width:768px){

	#barChartDiv{width:100%;height:300px;}
	#treeMapDiv{width:100%;height:300px;}

	/* ---------------- ####탭 ---------------- */
	.tab-unit002{overflow-x:auto;height:40px;margin:0 18px;white-space:nowrap;}
	.tab-unit002 .tab{margin:0 8px;letter-spacing:-0.3px;}
	/* .tab-unit002::-webkit-scrollbar{background:transparent;-webkit-appearance:none;} */

	/* ---------------- ####여론조사 ---------------- */
	/* ---- ##여론조사 그래프 ---- */
	.poll-chart{}
	.poll-chart .txt-desc01{display:none;width:auto;}

	.legend-wrap{position:relative;box-sizing:border-box;margin-top:12px;padding:0 18px;}
	.legend-wrap [class*='legend-']{width:100% !important;height:auto;min-height:auto;margin:0;}

	/* 범례 - 리서치 기관 */
	.legend-wrap .legend-date{margin-bottom:18px;}
	.legend-wrap .legend-date>div{margin:0;}
	.legend-wrap .legend-date span,
	.legend-wrap .legend-date strong,
	.legend-wrap .legend-date button{font-size:13px;line-height:16px;}
	.legend-wrap .legend-date .day{display:block;margin-top:0;font-weight:400;font-size:24px;line-height:20px;}

	/* 범례 - 후보자 */
	.legend-wrap .legend-list>li{display:block;width:100%;height:44px;margin:0 0 10px;text-align:left;}
	.legend-wrap .legend-list>li:after{content:"";visibility:hidden;display:block;clear:both;height:0;font-size:0;line-height:0;}
	.legend-wrap .legend-list>li>div{float:left;line-height:44px;}
	.legend-wrap .legend-list>li.none{visibility:hidden;}
	.legend-wrap .img-con{width:44px;margin:0;text-align:center;}
	.legend-wrap .img-con img{width:100%;}
	.legend-wrap .party-con{display:none;}
	.legend-wrap .info-con{margin:0;width:60px;height:44px;font-size:15px;line-height:14px;text-align:center;}
	.legend-wrap .data-con{margin:0;width:75px;height:44px;font-weight:700;font-size:22px;text-align:left;}
	.legend-wrap .data-con .unit{font-size:10px;}
	.legend-wrap .bar-graph{display:inline-block;height:30px;margin-top:6px;background:#f5f5f5;
	width:-webkit-calc(100% - 44px - 60px - 80px);
	width:calc(100% - 44px - 60px - 80px);}
	.legend-wrap .bar-graph .bar{width:0;height:100%;
	-webkit-transition:all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s;
	transition:all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s;}
	.legend-wrap .bar-graph em{display:none;}

	/* 버튼 - 이전날/다음날 (모바일 사용) */
	.legend-wrap .poll-btn{position:absolute;top:-12px;}
	.legend-wrap .poll-btn.prev{left:10px;}
	.legend-wrap .poll-btn.next{right:10px;}

	#chart{display:none;width:100%;height:300px;margin:20px 0 0 0;}
	.poll-table{box-sizing:border-box;margin-top:30px;padding:0 18px;}
	.tbl-poll{width:100%;}
	.tbl-poll tr{height:40px !important;}
	.tbl-poll th,
	.tbl-poll td{height:40px !important;padding:0;font-size:13px;}
	.tbl-poll th{}
	.tbl-poll thead th,
	.tbl-poll thead td{font-weight:normal;padding:0 0;text-align:center;}
	.tbl-poll .con{margin:0;text-align:center;}

	.tbl-poll .tit-cell{}
	.tbl-poll .tit-cell .con{position:relative;top:6px;left:0px;text-align:left;}
	.tbl-poll span{padding:0 5px;font-size:12px;line-height:120%;}

	.tbl-poll .dd{display:block;width:auto;padding:0 5px;font-size:12px;line-height:120%;}
	.tbl-poll .co{display:none;}

	.tbl-poll th .dd{display:inline-block;margin-left:10px;line-height:inherit;text-align:left;}
	.tbl-poll th .res{display:none;margin-left:10px;}
	.tbl-poll th .co{}
	.tbl-poll .ww01,
	.tbl-poll .ww02,
	.tbl-poll .ww03,
	.tbl-poll .ww04,
	.tbl-poll .ww05,
	.tbl-poll .ww06,
	.tbl-poll .ww07,
	.tbl-poll .ww08{width:60px;}
	.tbl-poll .ww-last{width:60px;}

	/* .tbl-poll tbody>tr>td:nth-child(2),
	.tbl-poll tbody>tr>td:nth-child(3),
	.tbl-poll tbody>tr>td:nth-child(4),
	.tbl-poll tbody>tr>td:nth-child(5),
	.tbl-poll tbody>tr>td:nth-child(6){display:none;} */

	.responsive-table{border-right:none !important;}
	.responsive-table .pinned{overflow-x:hidden;width:25%;border-left:none !important;}
	.responsive-table .pinned .tbl-poll{}
	.responsive-table .pinned .tbl-poll thead .tit-cell .con{top:2px;}
	.responsive-table .scrollable{margin-left:25%;}
	.responsive-table .scrollable .tbl-poll{width:420px;}
	.responsive-table .scrollable .tbl-poll tbody td{letter-spacing:1px;}

	.tooltip-poll{visibility:visible;opacity:1;position:fixed;left:0;bottom:-400px;border:1px solid #e2e2e2;
	width:calc(100% - 44px);width:-webkit-calc(100% - 44px);width:-moz-calc(100% - 44px);width:-o-calc(100% - 44px);}
	.tooltip-poll.active{bottom:0;}

	.tooltip-poll .close-tooltip{display:block;position:absolute;right:5px;top:5px;width:40px;height:40px;padding:6px;background:none;border:0;z-index:1;}
	.tooltip-poll .close-tooltip:before,
	.tooltip-poll .close-tooltip:after{content:'';display:block;clear:both;position:absolute;top:20px;left:10px;width:20px;height:1px;background-color:#000;}
	.tooltip-poll .close-tooltip:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
	.tooltip-poll .close-tooltip:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}

	.tooltip-poll .tit,
	.tooltip-poll p{font-size:13px;}

	/* 메인 : 그래프 하단 */
	.txt-poll-guide01{width:auto;margin-top:20px;padding:0 12px;}
	/* 여론조사 페이지 : 테이블 하단 */
	.txt-poll-guide02{width:auto;margin-top:20px;padding:0 12px;text-align:right;}

} /* Media Queri End (768px) */


/* =============== ####컨트롤 ======================== */
/* 여론조사 페이지에서 숨김 요소 */
.page-poll .legend-wrap .legend-date .tooltip-cell,
.page-poll .txt-poll-guide01{display:none;}
/* 여론조사 테스트 페이지에서는 노출 */
.page-poll.page-test01 .legend-wrap .legend-date .tooltip-cell{display:block;}

.poll-content{margin:40px auto 50px;}
.poll-content .tab-unit001{margin-bottom:20px;}
.poll-content .poll-chart{margin-top:80px;}

@media only screen and (max-width:768px){
	.poll-content{margin:20px auto 30px;}
	.poll-content .poll-chart{margin-top:40px;}
}