@charset "UTF-8";

body{overflow-x: hidden; } 
/* stateMain  */
#middle-chart{width: 100%; height: 380px; display : flex; flex : 1 1 auto;
	    padding-left: 70px; padding-bottom : 20px;margin-left: 30px;}
    
#PieFirstDiv {width: 40%; height: 380px; display : flex; 
		padding-right: 12px; padding-bottom : 20px;}
	
#StackFirstDiv{width: 60%;	height: 380px; display : flex;
   	    margin-right: 24px; padding-bottom : 20px;  padding-right: 10px;}
    
    
#bottom-chart{width: 100%; height: 380px; display : flex; flex : 1 1 auto;
    	padding-left: 70px; padding-right: 24px; margin-left: 30px;}
#PieSecDiv {width: 40%; height: 380px; border : 1px; display : flex; padding-right: 12px;}

#StackSecDiv {width: 60%; height: 380px; display : flex; padding-right: 10px;}

/* stateIqc */

#iqcTopGround{width : 100%; display: flex; height: 380px; padding-bottom: 20px; 
				padding-left: 90px;  }
				
#barAndLineFirst{width : 35%; padding-right: 20px; }
#barAndLineSec{width : 65%; flex:1; }

#iqcBottomGround{display: flex; width: 100%; height:380px; 
				padding-left:90px; padding-right: 10px;}
			
#iqcPieFirst{flex: 1; padding-right: 20px;}
#iqcPieSec{flex: 1; padding-right: 20px;}
#iqcPieThird{flex: 1;}


/* stateIqcQmg */
#iqcQmgMain {width: 100%; height:800px; display: flex; padding-left: 90px;}
#qmgLeftChart {width: 30%; height:800px; padding-right: 20px;}
#pieAndBarChart {width: 70%; height:800px; display: flex; flex-direction : column;}
#pieGround{width:100%; height:400px; display: flex; padding-bottom: 20px;}
#qmgFirstPie{flex: 1; padding-right:10px;}
#qmgSecPie{ flex: 1; padding-right:10px;}
#qmgThirdPie{flex: 1; padding-right:10px;}
#qmgBottomChart{ height:400px;}

/* statePqcIns */

#pqcTopGround{display: flex;  width : 100%; height: 380px;
			  padding-bottom: 20px; padding-left: 90px; padding-right: 24px;}
#pqcStackFirChart{width : 40%;   padding-right: 20px;}
#pqcStackSecChart{width : 60%;  }
#pqcBottomGround{display: flex; width: 100%; height: 380px; 
			 padding-left:90px; padding-right: 24px;}
#pqcBarChart{width : 25%; padding-right: 20px; }
#pqcPieFirChart{flex: 1; }
#pqcPieSecChart{flex: 1; padding-right: 10px; }
#pqcPieThiChart{flex: 1; }




/* stateOqcIns */
#oqcInsMain{display: flex; width: 100%; height: 800px; padding-left: 90px;}

#leftGround{width:35%; height:800px; display: flex; flex-direction: column; 
	       	background-color: ; padding-right: 20px;}

#leftUpChart{height: 45%; padding-bottom: 20px;}
#leftDownChart{height: 55%; }

#rightGround{width:65%; height:800px; display: flex; flex-direction: column;
	       	background-color: ; padding-right: 20px;}
	       	
#oQcRightTitle {font-size:20px;  font-family: sans-serif; font-weight: bolder;
	       		padding-bottom: 5px; }	       	
#rightUpGround{display:flex; height: 45%;}
#oQcBarFirChart{flex: 1; padding-right: 10px; padding-bottom: 20px;}
#oQcBarSecChart{flex: 1; padding-bottom: 20px;}

#rightDownGround{display:flex; height: 55%; padding-right: 10px;}
#oQcPieFirChart{flex: 1; padding-right: 10px;}
#oQcPieSecChart{flex: 1; padding-right: 10px;}
#oQcPieThiChart{flex: 1;}


/*stateFa*/
#faTopGround{display: flex;  width : 100%; height: 380px;
			 padding-bottom: 20px; padding-left: 90px; padding-right: 24px;}
#barAndLineFirst{width : 30%; padding-right: 20px;}
#faPieFirChart{flex: 1;}
#faPieSecChart{flex: 1; padding-right: 10px;}
#faPieThiChart{flex: 1;}

#faBottomGround{display: flex; width: 100%; height: 380px; 
			padding-left:90px; padding-right: 24px;}
#stackFirChart{width : 30%; padding-right: 20px;}
#stackSecChart{width : 70%;padding-right: 20px;}