@charset "UTF-8";
/* CSS Document  메인 적용시 그래프 css */


/*Donut_chart*/
.Donut_chart { display:block; float:left;  width:100%;  border:#e5e5e5 solid 1px; padding:30px 0}
.Donut_chart span { display:block; text-align:center;}
.Donut_chart .Donut_circle { width:240px; height:240px;  background-color:#999; border-radius:120px; color:#fff; font-size:18px; line-height:240px; -ms-line-height:250px; text-align:center; margin:0 auto}

.Donut_chart .blue  { background-color:#19a0c9 }
.Donut_chart .red   { background-color:#d2587c }
.Donut_chart .gray  { background-color:#333333 }
.Donut_chart .green { background-color:#749119 }

.Donut_chart .blue2  { color:#19a0c9 }
.Donut_chart .red2  { color:#d2587c }
.Donut_chart .gray2  { color:#333333 }
.Donut_chart .green2 { color:#749119 }




#chartData { position:relative; 
  width: 150px; 
  margin: 0;
  float: left;
  border-collapse: collapse;/*
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  background-position: 0 -100px;*/
}

#chartData th, 
#chartData td {
  padding: 0.5em 0;  border-top:#fff solid 1px;  font-family:Helvetica, Arial, Tahoma
}

#chartData th {
  text-transform: uppercase;
  color:#333333; font-size:32px; font-weight:normal; font-family:Myriad Pro, Arial, Helvetica, sans-serif
}

#chartData tr:first-child th { color:#d2587c }

#chartData td { line-height:12px; width:150px;
  cursor: pointer; font-size:11px; color:#333333; font-weight:bold;
  text-align: left; padding-left:10px;
}

#chartData td span { color:#808080;  text-align: left; }

#chartData td.highlight {
  background: #e8e8e8;
}

#chartData td:hover {
 border-top:#CCC solid 1px
}
/* 
.highcharts-title { display:none; height:0; } 도넛 타이틀 히든 */


.highcharts-series-group {}
.highcharts-series {}
.highcharts-tracker {}/*
.highcharts-tracker rect { width:30px;  }  그래프 가로 사이즈 수정 15.07.09 DT */
.highcharts-background { padding:0; margin:0; vertical-align:top; fill:none;}

.highcharts-button { display:none } /* 데이터 출력 버튼*/


#container .highcharts-container { position:absolute; float:right; margin-left:150px;margin-top:-80px; }
#container3 .highcharts-container { position:absolute; float:right; margin-left:0; margin-top:-10px;  }
#container4 .highcharts-container { position:absolute; float:right; margin-left:0; margin-top:-10px; fill:none }
/*position:"relative",overflow:"hidden",width:c+"px",height:d+"px",textAlign:"left",lineHeight:"normal",zIndex:0,"-webkit-tap-highlight-color":"rgba(0,0,0,0)"*/

.browser { display:block; float:left; position:relative; width:570px; height:100px; border-top:#19a0c9 solid 2px; padding:0; margin:0; text-align:left; 
margin-top:270px; 
-webkit-margin-before:50px; 
margin-left:-150px; 
-webkit-margin-start:0; 
z-index:1 }

.browser span { display:block }
.browser .round_box { border-radius:25px; width:50px; height:50px; background-color:#5b9bb3; color:#fff; line-height:50px; font-size:18px } 
.browser .op_8 { opacity:0.8; }
.browser .op_6 { opacity:0.6; } 
.browser .op_4 { opacity:0.4; } 
.browser .op_3 { opacity:0.3; } 
.browser .op_2 { opacity:0.2; }  
.browser .browser_tit { font-size:11px; color:#000;  font-weight:bold; font-family:Helvetica, Arial, Tahoma }
.browser li { display:inline-block; margin:24px 12px; }