server/WebRoot/charts/visualizedcharts/css/visualizedCharts.css

.contains{background:#000a2d;height:100%;width:100%;padding:0;margin:0;}
.header{height:80px;background-size: cover;background:#09143c url('../images/headerbg.png');background-repeat:repeat-y;background-position:center;}
.header .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:0.6rem;align-items: center;height: 100%;}
.title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:0.5rem;align-items: center;}
.time{margin-right: 10px;font-size: 0.3rem;margin-top: -0.8rem;color: #fff;float: right;}
.time .label{font-weight:300}
.container{height:calc(100vh - 80px);width:100%;}
.item_left,.item_center,.item_right{height:100%; padding-right: 10px;padding-left: 10px;display: flex;}
.item_left_content,.item_center_content,.item_right_content{display: flex;flex-direction: column;align-content: stretch;justify-content: stretch;width: 100%;}
.industryChartDiv,.changeChartDiv,.ageChartDiv,.powerChartDiv,.playChatDiv,.areaChartDiv{flex:1;margin: 10px 0px;}
.totalInfoDiv{margin: 10px 0px;background: #0a1446;padding: 10px;}
.moveMapDiv1{position: absolute;font-size: 56.6px;width: 8.03rem; z-index: 2;animation: myfirst2 15s infinite linear;overflow:hidden;}
.moveMapDiv{flex:4;margin: 10px 0px;display: flex;justify-content: center;justify-content: center;align-items: center;}
.industryChartDiv,.powerChartDiv,.changeChartDiv,.ageChartDiv,.playChatDiv,.areaChartDiv{background:#08113e url('../images/partbg1.png');background-repeat: repeat;
    background-position: center;}
.border{border: 2px solid #02a6b5;width: 100%;height: 100%;position: relative;margin: auto;}
#industryBar,#changeLine,#agePie,#skillAcquisitionBar,#playCounts,#roseChart,#moveMapChart{height:100%;width:100%;}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}