* {
    margin: 0;
    padding: 0;
}

.entirety {
    width: 100vw;
    height: 56.25vw;
    background: url("../images/background.jpg") no-repeat;
    background-size: cover;
}

.main {
    position: absolute;
    width: 96vw;
    height: 54vw;
    margin: 1.125vw 2vw;
    color: #0efcff;
    text-align: center;
}

.title {
    height: 3.025vw;
    font-size: 0.8vw;
    /*    background: yellow;*/
}

.title_bg {
    position: absolute;
    left: 18vw;
    top: -0.72vw;
    width: 60vw;
    height: 3.6vw;
}

.firstPiece {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.monitor {
    width: 23vw;
    height: 13.6vw;
    margin: 0 1vw;
    background: url("../images/monitor.png");
    background-size: 23vw 13.6vw;
}

iframe {
    width: 17.8vw;
    height: 10vw;
}

.monitor > h2 {
    font-size: 0.94vw;
    padding-top: 0.12vw;
}

.monitor > div {
    width: 18vw;
    height: 10.125vw;
    margin: 1vw auto 0;
    /*border: #ffffff outset 0.12vw;*/
}

.firstCenter {
    display: flex;
    flex-wrap: wrap;
    width: 44vw;
    height: 14.6vw;
}

.monthOutput {
    display: flex;
    align-items: center;
    width: 28vw;
    height: 4.2vw;
    font-size: 1.1vw;
    text-shadow: #035990 1px 0 0, #035990 0 1px 0, #035990 -1px 0 0, #035990 0 -1px 0;
    line-height: 4.2vw;
}

.monthOutput .num {
    font-size: 2vw;
    /*    color: #ffdc60;*/
    width: 2vw;
    text-align: center;
    text-shadow: #035990 1px 0 0, #035990 0 1px 0, #035990 -1px 0 0, #035990 0 -1px 0;
    background: url("../images/center_num.png");
    background-size: 2vw 4.2vw;
}

.monthTrend {
    width: 2.5vw;
    height: 2.25vw;
}

.showTime {
    width: 16vw;
    height: 4.2vw;
}

#showTime {
    font-size: 1vw;
    padding-top: 2.25vw;
}

.pie {
    width: 22vw;
    height: 10.4vw;
    background: url("../images/pie.png");
    background-size: 22vw 10.4vw;
}

.pie > h2 {
    font-size: 0.9vw;
    padding-top: 1vw;
}

.monthPie,
.yunxiuPie {
    /*    background: pink;*/
    width: 15vw;
    height: 8vw;
    margin: 0 auto 0;
}

.secondPiece {
    display: flex;
    flex-wrap: wrap;
    height: 36.375vw;
}

.secondCenter {
    display: flex;
    width: 44vw;
    height: 4.25vw;
    font-size: 1vw;
    line-height: 4.25vw;
    background: url("../images/secondCenter.png");
    background-size: 44vw 4.25vw;
}

.secondCenter > div {
    display: flex;
    align-items: center;
    width: 22vw;
}

.todayOutput h2,
.yunxiuOutput h2 {
    width: 14.5vw;
    text-align: right;
    font-size: 1.4vw;
}

.todayOutput div,
.yunxiuOutput div {
    text-align: left;
    font-size: 1.6vw;
}

.trend {
    width: 1.5vw;
    height: 2vw;
}

.secondSides {
    width: 26vw;
    height: 4.25vw;
}

.secondSides h2 {
    position: absolute;
    top: 19.8vw;
    z-index: 2;
    font-size: 1vw;
}

.variety h2 {
    left: 7.4vw;
}

.workload h2 {
    right: 7.4vw;
}

.line {
    width: 48vw;
    height: 14.5vw;
}

.line_bg {
    position: absolute;
    top: 17.6vw;
    left: 0;
    width: 48vw;
    height: 18.75vw;
    z-index: 1;
}

.lineChart {
    position: absolute;
    /*    background: pink;*/
    width: 46vw;
    height: 13vw;
    margin: 1.15vw 1vw 0 1vw;
    z-index: 2;
}

.lineLeft {
    left: 0;
}

.lineRight {
    left: 48vw;
}

.workloadChart {
    right: 0.625vw;
}

.varietyChart {
    left: 0.625vw;
}

.bottom {
    width: 48vw;
    height: 17.625vw;
}

.lengthHistogram {
    background: url("../images/lengthHistogram.png");
    background-size: 48vw 17.625vw;
}

.sortTable {
    background: url("../images/sortTable.png");
    background-size: 48vw 17.625vw;
}

.bottom h2 {
    font-size: 1vw;
    height: 2.2vw;
    line-height: 2.2vw;
}

.histogram {
    width: 46vw;
    height: 12.5vw;
    margin: 1.5vw auto;
}

.tableArea {
    width: 45vw;
    height: 12.5vw;
    margin: 1.5vw auto;
}

.table {
    font-family: 黑体;
    border-collapse: collapse;
}

.table th {
    font-size: 1.25vw;
    font-weight: bold;
    background-color: #3e66b9;
    color: #ffffff;
    height: 3.4vw;

}

.col1 {
    width: 6vw;
}

.col2 {
    width: 13vw;
}

.table td {
    height: 3vw;
    background-color: rgba(42, 65, 180, 0.3);
}

.alt td {
    color: #ffffff;
    background-color: #5675af;
}

.scroll-box {
    position: absolute;
    left: 46vw;
    top: 40vw;
    width: 45vw;
    height: 9vw;
    margin: 3.5vw;
    overflow: hidden;
}

.tab-scroll {
    position: absolute;
    top: 0;
    font-family: 黑体;
    width: 100%;
    border-collapse: collapse;
}

.tab-scroll td {
    font-size: 1vw;
    height: 3vw;
    color: white;
}