hb_zhgd_screen/css/index/index.css

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Alibaba PuHuiTi R';
}

#main-box {
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
}

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

#left-box {
    width: 49%;
    height: 100%;
    padding-top: 0.85%;
    box-sizing: border-box;
}

#pro-introduct {
    width: 100%;
    height: 100%;
    padding: 5% 2% 2% 2%;
    box-sizing: border-box;
    background: url("../../img/index/pro_brief.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    flex-direction: column;
    justify-content: space-between;
}

#img-carousel img {
    width: 900px;
    height: 360px;
}

#pro-desc {
    width: 100%;
    height: calc(100% - 380px);
    overflow-y: auto;
    position: relative;
    float: left;
}

#pro-desc p {
    /*首行缩进*/
    text-indent: 36px;
    /*字体间距*/
    line-height: 36px;
    font-size: 16px;
    letter-spacing: 1px;
}

#right-box {
    width: 47%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 0.85%;
    box-sizing: border-box;
}

#real-time-monitor {
    width: 100%;
    height: 22.7%;
    background: url("../../img/index/real_time_monitor.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    justify-content: space-between;
}

.monitor-data {
    width: 16%;
    height: 60%;
    margin-top: 3%;
    flex-direction: column;
    justify-content: space-around;
}

.monitor-data p:nth-child(1) span:nth-child(1) {
    font-size: 24px;
    color: #79FFFFFF;
    font-weight: bold;
}

.monitor-data p:nth-child(1) span:nth-child(2) {
    margin-left: 5px;
    color: #79FFFFFF;
}

.monitor-icon {
    width: 100%;
    height: 60%;
}

.monitor-data:nth-child(1) .monitor-icon {
    background: url("../../img/index/wd.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

.monitor-data:nth-child(2) .monitor-icon {
    background: url("../../img/index/sd.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

.monitor-data:nth-child(3) .monitor-icon {
    background: url("../../img/index/zs.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

.monitor-data:nth-child(4) .monitor-icon {
    background: url("../../img/index/gz.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

.monitor-data:nth-child(5) .monitor-icon {
    background: url("../../img/index/pm2.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

.monitor-data:nth-child(6) .monitor-icon {
    background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}
#logo{
    background: url("../../img/index/pm10.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
    background-size: initial;
}

#pro-risk {
    width: 100%;
    height: 29.6%;
    background: url("../../img/index/pro_risk.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
}

#pro-progress {
    width: 100%;
    height: 14.2%;
    background: url("../../img/index/pro_progress.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
}

#pro-start,
#pro-end {
    width: 15%;
    height: 100%;
    flex-direction: column;
    font-size: 16px;
}

#pro-start p:nth-child(1),
#pro-end p:nth-child(1) {
    margin-top: 20px;
}

#pro-start p:nth-child(2),
#pro-end p:nth-child(2) {
    margin-top: 10px;
}

#pro-progress-echarts {
    width: 70%;
    height: 100%;
}

#pro-cost {
    width: 100%;
    height: 28.2%;
    background: url("../../img/index/pro_cost.png") no-repeat 0 0 / 100% 100%;
    background-position: center center !important;
}

img {
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}