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

.layout {
    display: flex;
    align-items: center;
    justify-content: start;
    box-sizing: border-box;
}

#content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

.main-box {
    height: 100%;
    padding: 1% 0.5% 0 0.45%;
    box-sizing: border-box;
}

/* 左侧样式 start */
#left-box {
    width: 27%;

}

#echarts-map {
    width: 100%;
    height: 96vh;
}

#check-risk {
    width: 150PX;
    height: 200px;
    position: absolute;
    top: 3%;
    flex-direction: column;
    justify-content: space-between;
    z-index: 9999;
}

.check-risk {
    width: 100%;
    height: 50px;
    justify-content: flex-end;
    cursor: pointer;
    font-size: 14px;
}



.check-risk img {
    width: 18px;
    height: 18px;
}

.check-risk p {
    width: calc(90% - 25px);
    margin-left: 10px;
}

.map-p {
    color: #fff;
    font-weight: normal;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: 'Alibaba PuHuiTi R';
}

/* 左侧样式 end */
/* 中部样式 start */
#center-box {
    width: 44%;
    flex-direction: column;
}

.module-title {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    background: url("../../img/cityHome/module_title.png") no-repeat 0 0 / 100% 100%;
}

.other-title {
    width: 49%;
}

.module-title p {
    font-size: 18px;
    margin: -5px 0 0 6px;
}

/* 工程统计 start */
#center-top {
    width: 100%;
    height: 38%;
    justify-content: space-between;
}

#pro-box,
#ticket-box {
    width: 49%;
    height: 100%;
}

#pro-info {
    width: 100%;
    height: calc(100% - 50px);
    flex-direction: column;
    justify-content: space-evenly;
}

.pro-div {
    width: 100%;
    height: 40%;
}

#pro-info .pro-div:nth-child(1) {
    justify-content: center;
}

#pro-info .pro-div:nth-child(2) {
    justify-content: space-between;
    height: 47%;
}

.pro-common {
    width: 31%;
    height: 100%;
    background-size: unset !important;
    background-position: center center !important;
    flex-direction: column;
    justify-content: center;
}

.pro-common p:nth-child(1) {
    font-size: 30px;
    font-family: 'zcoolqingkehuangyouti';
}

#zj {
    width: 51%;
    background: url("../../img/cityHome/zj.png") no-repeat 0 0 / 100% 100%;
}

#zs {
    background: url("../../img/cityHome/zs.png") no-repeat 0 0 / 100% 100%;
}

#tg {
    background: url("../../img/cityHome/tg.png") no-repeat 0 0 / 100% 100%;
}


#wg {
    background: url("../../img/cityHome/wg.png") no-repeat 0 0 / 100% 100%;
}

/* 工程统计 end */
/* 作业票 start */
#ticket-info {
    width: 100%;
    height: calc(100% - 50px);
    flex-direction: column;
    justify-content: space-evenly;
}

.ticket-div {
    width: 100%;
    height: 40%;
    background: url("../../img/cityHome/ticket.png") no-repeat 0 0 / 100% 100%;
    background-size: unset !important;
    background-position: center center !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ticket-div p:nth-child(2) {
    font-size: 30px;
    font-family: 'zcoolqingkehuangyouti';
}

/* 作业票 end */
/* 风险情况 start */
#center-center {
    width: 100%;
    height: 20%;
}

#risk-info {
    width: 100%;
    height: calc(100% - 50px);
    justify-content: space-evenly;
}

.risk-div {
    width: 24%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.number-box {
    width: 100%;
    height: 60%;
    justify-content: space-evenly;
}

.content-item {
    width: 49px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    font-size: 40px;
    font-family: 'zcoolqingkehuangyouti';
    background-size: unset !important;
    background-position: center center !important;
}

#rollNumberList2 .content-item {
    background: url("../../img/cityHome/two_new.png") no-repeat 0 0 / 100% 100%;
}

#rollNumberList3 .content-item {
    background: url("../../img/cityHome/three.png") no-repeat 0 0 / 100% 100%;
}

#rollNumberList4 .content-item {
    background: url("../../img/cityHome/four.png") no-repeat 0 0 / 100% 100%;
}

#rollNumberList5 .content-item {
    background: url("../../img/cityHome/five.png") no-repeat 0 0 / 100% 100%;
}

.content-item+.content-item {
    margin-left: 4px;
}

/* 风险情况 end */

/* 其他 start */
#center-bottom {
    width: 100%;
    height: 42%;
}

#other-info {
    width: 100%;
    height: calc(100% - 50px);
    justify-content: space-evenly;
}

#other-module {
    width: 15%;
    height: 100%;
}

#other-echarts {
    width: 83%;
    height: 100%;
}

#other-module ul {
    width: 100%;
    height: 99%;
    flex-direction: column;
    justify-content: center;
}

#other-module ul li {
    width: 100%;
    height: 50px;
    justify-content: center;
    cursor: pointer;
    background: url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%;
    background-size: unset !important;
    background-position: center center !important;
}

#other-module ul li:nth-child(1) {
    background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
}

#other-module ul li:hover {
    background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
}

.other-div {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#person-num,
#team-num {
    width: 100%;
    height: 50px;
    justify-content: space-between;
}

#person-num p span， #team-num p span {
    font-size: 22px;
}

#person-echarts,
#team-echarts {
    width: 100%;
    height: calc(100% - 50px);
}

#ticket-echarts,
#risk-echarts {
    width: 100%;
    height: calc(100%);
}

/* 其他 end */

/* 中部样式 end */
/* 右侧样式 start */
#right-box {
    width: 28%;
}

/* 许可及销号 start */
#right-top {
    width: 100%;
    height: 20%;
    justify-content: space-between;
}

#xk-info {
    width: 100%;
    height: calc(100% - 50px);
    justify-content: space-evenly;
}

.xk-div {
    width: 24%;
    height: 92%;
    background-size: unset !important;
    background-position: center center !important;
    flex-direction: column;
    justify-content: space-between;
}

.xk-div p:nth-child(1) {
    font-size: 20px;
}

#yxk {
    background: url("../../img/cityHome/yxk.png") no-repeat 0 0 / 100% 100%;
    color: #0BDC8C;
}

#bxk {
    background: url("../../img/cityHome/bxk.png") no-repeat 0 0 / 100% 100%;
    color: #66FFFF;
}

#yxh {
    background: url("../../img/cityHome/yxh.png") no-repeat 0 0 / 100% 100%;
    color: #4AC4FE;
}

#wxh {
    background: url("../../img/cityHome/wxh.png") no-repeat 0 0 / 100% 100%;
    color: #C65CFF;
}

/* 许可及销号 end */
/* 周计划 start */
#right-center {
    width: 100%;
    height: 35%;
    justify-content: space-between;
    position: relative;
}

#weekPlan-echarts {
    width: 100%;
    height: calc(100% - 50px);
}

#weekPlan-div {
    width: 140px;
    height: 68px;
    position: absolute;
    top: 15%;
    left: 73%;
    flex-direction: column;
    justify-content: center;
    background: url("../../img/cityHome/light.png") no-repeat 0 0 / 100% 100%;
    background-size: unset !important;
    background-position: center center !important;
}

#weekPlan-div p:nth-child(1) {
    font-size: 30px;
    font-family: 'zcoolqingkehuangyouti';
}

/* 周计划 end */

/* 预警信息 start */
#right-bottom {
    width: 100%;
    height: 45%;
    justify-content: space-between;
}

#early-info {
    width: 100%;
    height: calc(100% - 50px);
    justify-content: space-between;
}

#early-module {
    width: 24%;
    height: 100%;
}

#early-table {
    width: 75%;
    height: 100%;
}

#early-module ul {
    width: 100%;
    height: 99%;
    flex-direction: column;
    justify-content: center;
}

#early-module ul li {
    width: 100%;
    height: 50px;
    justify-content: center;
    cursor: pointer;
    background: url("../../img/cityHome/label_no_checked.png") no-repeat 0 0 / 100% 100%;
    background-size: unset !important;
    background-position: center center !important;
}

#early-module ul li:nth-child(1) {
    background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
}

#early-module ul li:hover {
    background: url("../../img/cityHome/label_checked.png") no-repeat 0 0 / 100% 100%;
}

#early-ul {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#early-ul li {
    width: calc(100% - 5px);
    height: 40px;
    margin-bottom: 5px;
    background-size: unset !important;
    background-position: center center !important;
    background: url("../../img/cityHome/early_back.png") no-repeat 0 0 / 100% 100%;
}

.li-child {
    width: 50%;
    height: 100%;
    justify-content: center;
}
.li-child:nth-child(1) {
    width: 65%;
}
.li-child:nth-child(2) {
    width: 35%;
}
.li-child p {
    width: 80%;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

li:nth-child(1) p {
    font-size: 16px;
}

.early-module {
    position: relative;
    /* display: inline-block; */
}

.early-module::after {
    content: attr(data-notification);
    /* 使用伪元素的content属性获取通知数量 */
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #FF5D5D;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    opacity: 0.7;
}

/* 预警信息 end */
/* 右侧样式 end */

/*滚动条样式start*/

/* ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #e7e7f1 !important;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: rgba(94, 96, 97, 0.43) !important;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 96, 97, 0.43) !important;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:active {
    background: rgba(94, 96, 97, 0.43) !important;
    border-radius: 0px;
} */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #dadee8;
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    border-radius: 14px;
    border-style: dashed;
    border-color: transparent;
    border-width: 1px;
    background-color: #dadee8;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}
/*滚动条样式end*/