@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
main .content{margin: 60px auto; width: 1200px;}
main .content .content_inner{position: relative; width: 100%;}

/* 기준년도 선 안보이게 */
.c3-xgrid-line.grid line, .c3-xgrid-line.grid text{display: none !important;}

.db_tab_wrap{display: inline-block; margin-bottom: 10px;}
.db_tab_wrap a{padding: 0 14px;font-size: 16px;color: #777;font-weight: 400;transition: all .3s;margin-bottom: 10px;display: block;float: left;position: relative;}
.db_tab_wrap a.on,
.db_tab_wrap a:hover{color: #222; font-weight: 600;}
.db_tab_wrap a::after{content: '';position: absolute;width: 1px;height: 10px;background: #777;right: 0;top: 50%;transform: translateY(-50%);}
.db_tab_wrap a:last-child::after{display: none;}


.depth2_info,
.dataDownBtn{display:none;}

.graph_list {position:relative;width: 100%;height:auto;margin:0 auto;}
.graph_list ul.graph_category {display:inline-block; width:100%; height:auto; margin-bottom:30px;}
.graph_list ul.graph_category li {display:inline-block; width:auto; height:auto; padding:2px 10px; margin-bottom:5px;}
.graph_list ul.graph_category li p {font-size:15px; font-weight:400; color:#c1cddc; transition:.3s;}
.graph_list ul.graph_category li p::before {content:''; display:inline-block; width:15px; height:8px; background:url('/../resources/images/dongjakMain/category_off.png') 100% 100% no-repeat; background-size:cover; margin:1px 0px; margin-right:4px;}
.graph_list ul.graph_category li.on p,
.graph_list ul.graph_category li:hover p {font-weight:600; color:#2f3334; cursor : pointer;}
.graph_list ul.graph_category li.on p::before,
.graph_list ul.graph_category li:hover p::before {background:url('/../resources/images/dongjakMain/category_on.png') 100% 100% no-repeat; background-size:cover;}

.graphWrap {position:relative; width:100%; height:auto; text-align:left;}


.graphWrap .bay1 {display:inline-block;width: calc(100% - 32px);margin: 0px 15px 30px 15px;height:auto;border:1px solid #d3d9ed;border-radius:10px;overflow:hidden;}
.graphWrap .bay1 svg {min-width:750px !important;}
.graphWrap .bay1 #chart2 > div {min-width:750px !important;}
.graphWrap .bay2 {display:inline-block;width: calc(100%/2 - 34px);margin: 0px 15px 30px 15px;height:auto;border:1px solid #d3d9ed;border-radius:10px;overflow:hidden;}
.graphWrap .bay2 svg {min-width:520px !important;}
.graphWrap .bay2 #chart2 > div {min-width:520px !important;}
.graphWrap .graph_title {display:flex; align-items:center; justify-content: space-between; width:calc(100% - 40px); padding:20px; height:22px; border-bottom:1px solid #d3d9ed;}
.graphWrap .graph_title h3 {display:flex; align-items:center; height:22px; font-size:20px; font-weight:600; color:#1d2027; line-height:1em; text-align:left;}
.graphWrap .graph_title h3::before {content:''; display:inline-block; width:22px; height:22px; background:url('/bigdata/resources/images/dongjakMain/graph_title_icon.png') 100% 100% no-repeat; background-size:cover; margin-right:6px;}
.graphWrap .graph_title span {display:inline-block; height:22px; font-size:16px; font-weight:400; color:#2f3334; line-height:1.3em; text-align:right;}
.graphWrap .chart_wrap {display:inline-block; width:calc(100% - 40px); height:auto; margin:20px;}
.graphWrap .chart_wrap .chart_info{display: flex;align-items: center;justify-content: center;width: 320px;height: 100%;margin-right: 20px;float: left;flex-direction: column;}
.graphWrap .chart_wrap .chart_info .icon{width: 150px;height: 150px;display: inline-block;margin-bottom: 30px;}
.graphWrap .chart_wrap .chart_info .text{width: 100%;display: flex;align-items: center;justify-content: center;}
.graphWrap .chart_wrap .chart_info .text > div{display: flex;flex-direction: column;align-items: center;}
.graphWrap .chart_wrap .chart_info .text .arrow{margin: 0 30px;}
.graphWrap .chart_wrap .chart_info .text .prev > span{color: #777; border-color: #777;}
.graphWrap .chart_wrap .chart_info .text .next > span{color: #4079c8; border-color: #4079c8;}
.graphWrap .chart_wrap .chart_info .text .year{font-size: 14px;padding: 5px 10px;border: 1px solid;border-radius: 5px;margin-bottom: 15px;}
.graphWrap .chart_wrap .chart_info .text .data{font-size: 20px;font-weight: 500;}
.graphWrap .bay_cont > #chart2 {display:inline-block;width: calc(100% - 340px);height:320px;margin-bottom:-3px;float: right}

.graphWrap .graph_func_info{margin-bottom: 15px;}
.graphWrap .graph_func_info > p{text-align: right;font-size: 14px;color: #93969f;}

.graphWrap .bay_cont.change_h {height:600px;}
.graphWrap .bay_cont.change_h #chart2 > div {max-height:600px !important; height:600px !important;}
#chart2 > div {max-height:320px !important; height:320px !important;}


/* 공유하기 팝업 */
a.btn-share::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 15px;
    height: 15px;
    background: url(/bigdata/resources/images/share/ic-share.png);
}
a.btn-share {
	position:relative;
	padding-left: 25px;
    float: right;
    margin: 0 50px 30px 0;
	z-index:9;
}


.share_popup{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 200;}
.share_popup .white_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 480px; background: #fff; border-radius: 30px;}
.share_popup .white_box .popup_title{position: relative; height: 70px; line-height: 70px; font-size: 20px; font-weight: 600; text-align: center; border-bottom: 1px solid #dedede; color:#000;}
.share_popup .white_box .popup_title .popup_close{position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
.share_popup .white_box .popup_title .popup_close img{vertical-align: baseline !important; transition: all .3s;}
.share_popup .white_box .popup_title .popup_close:hover img{transform: rotate(180deg);}
.share_popup .white_box .share_sns{padding: 40px 0; text-align: center; margin: 0 auto; font-size: 0;}
.share_popup .white_box .share_sns > span{width: 70px; height: 70px; display: inline-block; margin: 0 15px; cursor: pointer; font-size: 14px; text-align: center;}
.share_popup .white_box .share_sns > span > a{display: inline-block;}
.share_popup .white_box .share_sns > span > a img{width: 100%; height: 100%; display: block; padding-bottom: 5px;}
.share_popup .white_box .share_sns > span > a img:hover{opacity: .9;}


/***************************** 미디어 쿼리 *****************************/
@media screen and (max-width:1445px) {
	
}

/* 미디어쿼리 1239 */
@media (max-width: 1239px){

    main .content{width: calc(100% - 40px);}

	.graph_list ul.graph_category {overflow-x:scroll; overflow-y:hidden; white-space:nowrap;}
	.graphWrap {text-align:center;}
	.graphWrap .bay1,
	.graphWrap .bay2 {width:calc(100%/1); margin:0px 0px 30px 0px;}

	.graphWrap .graph_title {display:inline-block; height:auto;}
	.graphWrap .graph_title h3,
	.graphWrap .graph_title span {width:100%;}
	.graphWrap .graph_title span {margin-top:10px;}
	.graphWrap .chart_wrap {overflow:scroll;}
	.graphWrap .bay_cont > div > img {width:auto !important;}

}

/* 미디어쿼리 599 */
@media (max-width: 599px){

    main .content{margin: 40px auto;}
}