@font-face {
    font-family: title-font;
    src: url("./庞门正道标题体.TTF");
}

body {
    background-color: rgb(92, 92, 92);
}

.content {
    width: 350px;
    height: 1000px;
    /* background-color: rgba(0,16,52,.3); */
    background: url(./sc/背景框1.png) no-repeat;
    background-size: 100%;

}

.box {
    color: white;
}

.box .hr {
    height: 1px;
    background-color: rgba(255, 255, 255, .2);
    margin: 0 15px;
}

.content-left {
    position: absolute;
    top: 110px;
    left: 50px;
    /* padding-top: 10px; */
}

.content-right {
    position: absolute;
    top: 110px;
    right: 50px;
}

.nobg-data-list {
    display: flex;
    height: 60px;
    padding: 15px 0px 15px 20px;
}

.nobg-data-list .item-left {
    width: 200px;
}

.nobg-data-list .item-left .name {
    height: 25px;
    line-height: 25px;
    font-size: 19px;
}

.nobg-data-list .item-left .data {
    height: 35px;
    line-height: 35px;
    font-size: 35px;
    margin-top: 2px;
    color: rgb(53, 153, 255);
    /* font-weight: 800; */
    font-family: title-font;
}

.nobg-data-list .unit {
    padding-top: 40px;
    width: 50px;
}

.nobg-data-list .item-right {
    width: 140px;
    text-align: center;
    padding-top: 20px;
}

.nobg-data-list .item-right .data {
    color: rgb(53, 153, 255);
}

/* 最新项目盒子 */
/* 左侧中间 */
.box-title {
    font-family: title-font;
    background: url(./sc/小标题框.png) no-repeat;
    height: 40px;
    line-height: 35px;
    padding-left: 20px;
    font-size: 20px;
    /* font-weight: 800; */
}

#new-item-box {
    height: 330px;
    overflow: hidden;
    position: relative;
    bottom: 0px;
}

.new-item-list {
    display: flex;
    height: 50px;
    padding: 5px 0px 5px 20px;
    background-color: rgba(5, 105, 249, .1);
    margin: 5px 0;
    position: relative;
}

.new-item-list .icon {
    width: 5%;
    padding-top: 10px;
}

.new-item-list .item-left {
    width: 50%;
}

.new-item-list .item-left .name {
    height: 25px;
    line-height: 25px;
}

.new-item-list .unit {
    padding-top: 20px;
    width: 50px;
}

.new-item-list .item-right {
    width: 49px;
    height: 45px;
    position: absolute;
    right: 15px;
    /* text-align: center; */
    /* padding-top: 20px; */
    background: url(./sc/进行标签.png) no-repeat;
}

.new-item-list .yunwei {
    background: url(./sc/运维阶段.png) no-repeat;
}

.new-item-list .icon {
    height: 20px;
    width: 20px;
    margin-top: 15px;
    margin-right: 5px;
    background: url(./sc/项目列表点.png) no-repeat;
}

/* 左下角图表 */
#echarts1 {
    position: relative;
    top: -45px;
    left: 10px;
}

.echarts2 {
    height: 230px;
    overflow: hidden;
}

#echarts2 {
    position: relative;
    top: -20px;
}

#echarts3 {
    position: relative;
    top: 0px;
}

.right-top-box {
    padding: 10px 0 0 20px;
}

.content-right .right-top-item {
    display: flex;
    margin: 10px 0;
}

.content-right .right-top-item .icon {
    margin-right: 10px;
}

.content-right .right-top-item .item-left {
    display: flex;
    width: 60%;
}

.content-right .right-top-item .data {
    width: 20%;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}

.color-yellow {
    color: rgba(255, 207, 22, 1);
}

.content-right .right-top-item .unit {
    width: 10%;
}

.right-top-item1 .icon {
    width: 20px;
    height: 20px;
    background: url(./sc/设备.png);
}

.right-top-item3 .icon {
    width: 20px;
    height: 20px;
    background: url(./sc/企业.png);
}

.right-top-item4 .icon {
    width: 20px;
    height: 20px;
    background: url(./sc/预警.png);
}

.right-top-item2 {
    display: flex;
    padding-left: 10px;
}

.right-top-item2 .top-box {
    background: url(./sc/文字框.png) no-repeat;
    text-align: center;
    line-height: 49px;
    font-weight: 800;
    font-size: 20px;
    height: 49px;
    width: 39px;
    margin: 10px 2px;
}

.right-top-item2 .unit {
    padding: 35px 0 0 5px;
}

.roll-box,
.roll-box-top {
    position: absolute;
    top: 150px;
    left: 380px;
    text-align: center;
    width: 270px;
    height: 250px;
    overflow: hidden;
}

.roll-box .roll-item {
    margin: 10px auto;
    width: 210px;
    height: 40px;
    line-height: 40px;
    color: white;
    background: url(./sc/非选择框.png);
}

.roll-box-top .roll-item-top {
    margin: 10px auto;
    width: 210px;
    height: 40px;
    line-height: 40px;
}

.roll-box .roll-box-select {
    /* float:left; */
    position: absolute;
    top: 108px;
    width: 269px;
    height: 45px;
    line-height: 45px;
    color: rgb(249, 190, 88);
    background: url(./sc/选中框中空.png);
}

.roll-box .roll-box-move {
    position: relative;
    top: 0px;
}

/* 浮动盒子 */
.flat-box {
    position: absolute;
    bottom: 150px;
    left: 480px;
    color: white;
    width: 1100px;
    height: 180px;
    background: url(./sc/弹窗框.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

/* 切换按钮 */
.flat-box #next-button {
    width: 150px;
    height: 20px;
    /* background-color: #fff; */
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 999;
}

/* 前后两个盒子 */

#flat-box-front {
    position: absolute;
    /* bottom: 170px; */
    left: 0;
}

#flat-box-back {
    position: absolute;
    left: 1300px;
    /* bottom: -170px; */
}

/* 盒子内容 */
.flat-box .flat-box-title {
    font-family: title-font;
    height: 30px;
    line-height: 35px;
    padding-left: 100px;
}

.flat-box .flat-box-data {
    display: flex;
}

.flat-box .flat-box-data .data-firm-img {
    width: 170px;
    height: 120px;
    background: url(./sc/企业图片.png) no-repeat;
    background-size: 100% 100%;
    margin: 5px 10px 0 40px;
    position: relative;
}

.flat-box .flat-box-data .data-firm-data {
    width: 850px;
    font-size: 14px;
    height: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    position: relative;
    bottom: 3px;
}

/* 项目进度盒子 */
.city-plan {
    position: absolute;
    bottom: 108px;
    right: 500px;
    width: 350px;
    height: 359px;
    background: url(./sc/背景框2.png) no-repeat;
    color: white;
    overflow: auto;
}

.city-plan .plan-item {
    height: 46px;
    overflow: hidden;
    background-color: rgba(0, 28, 88, .9);
    margin: 5px 10px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.city-plan::-webkit-scrollbar {
    width: 5px;
    background-color: rgba(147, 145, 255, 0.5);
}

/*定义滑块 内阴影+圆角*/
.city-plan::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.8);
}

/*定义滚动条轨道 内阴影+圆角*/
.city-plan::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #555;
}

.city-plan .plan-item .name {
    position: relative;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    height: 46px;
    line-height: 46px;
}

.city-plan .plan-item .name .city-icon {
    position: relative;
    left: 0px;
    top: 8px;
    width: 60px;
    height: 30px;
    margin: 0 0px 0px 10px;
}

.city-plan .plan-item .name .city-icon0 {
    background: url(./sc/logo天信.png) no-repeat;
    background-size: 50%;
}

.city-plan .plan-item .name .city-icon1 {
    background: url(./sc/logo八环.png) no-repeat;
    background-size: 50%;
}

.city-plan .plan-item .name .city-icon2 {
    background: url(./sc/logo中豪.png) no-repeat;
    background-size: 80%;
    background-position-y: center;

}

.city-plan .plan-item .name .city-icon3 {
    background: url(./sc/logo五峰.png) no-repeat;
    background-size: 70%;
    background-position-y: center;
}

.city-plan .plan-item .name .city-icon4 {
    background: url(./sc/logo杰克.png) no-repeat;
    background-size: 80%;
    background-position-y: center;
}

.city-plan .plan-item .name .city-icon5 {
    background: url(./sc/logo永球.png) no-repeat;
    background-size: 80%;
    background-position-y: center;
}

.city-plan .plan-item .name .position-icon {
    position: absolute;
    right: 20px;
    top: 15px;
    float: right;
    width: 12px;
    height: 16px;
    /* background: url(./sc/坐标-fill.png) no-repeat; */
}

.city-plan .plan-item #plan-list {
    padding: 0px;
    /* background-color: rgb(249,190,88); */
    margin-left: 40px;
    border-left: 2px solid #fff;
}

.city-plan .plan-item #plan-list>li {
    list-style-type: none;
    display: flex;
    height: 23px;
    line-height: 23px;
    font-size: 14px;
}

.city-plan .plan-item #plan-list>li .year {
    width: 14%;
}

.city-plan .plan-item #plan-list>li .time {
    width: 18%;
}

.city-plan .plan-item #plan-list>li .icon {
    text-align: center;
    width: 30px;
}

/* 里层样式 */
/* 企业介绍 */
.content-left .firm-introduce {
    display: flex;
}

.content-left .firm-introduce .data-firm-img {
    width: 160px;
    height: 110px;
    background: url(./sc/企业图片.png) no-repeat;
    background-size: 100% 100%;
    margin: 10px;
}

.content-left .firm-introduce .data-firm-text {
    margin: 10px 10px 0px 5px;
    width: 45%;
    font-size: 13px;
    height: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    word-break: break-all;
    /* break-all(允许在单词内换行。) */
    display: -webkit-box;
    /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 7;
    /* 显示的行数 */
    max-height: 120px;
    /* 设置最大高度，根据行高，要几行乘以几倍 */
}

.content-left .firm-name {
    font-size: 15px;
    color: rgb(26, 153, 226);
    margin: -10px 0 15px 10px;
}

/* 项目介绍 */
.item-introduce .item-img {
    width: 100%;
    height: 130px;
    background: url(./sc/占位图.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
}

.item-introduce .introduce-item .title {
    display: flex;
    color: rgb(24, 171, 244);
}

.item-introduce .introduce-item .title .icon {
    height: 20px;
    width: 20px;
    margin: 0 10px;
    background: url(./sc/项目列表点.png) no-repeat;
}

.item-introduce .introduce-item .data {
    /* width: 100%; */
    padding: 0 20px 0 40px;
    font-size: 14px;
}

/* 现场效果 */
.scene-result .box-title {
    margin: 10px 0;
}

.scene-result .img-matrix {
    width: 90%;
    /* background-color: #fff; */
    height: 220px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.scene-result .img-matrix .scene-img-box,
.scene-img-box-one,
.scene-img-box-two {
    width: 48%;
    height: 100px;
    background: url(./sc/照片框.png) no-repeat;
    background-size: 100% 100%;
}

.scene-img-box-one {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    bottom: 7px;
}

.scene-img-box-two {
    /* width: 80%; */
    /* height: 100%; */

    margin: 0 auto;
}

.scene-result .scene-img-box-two .scene-img.scene-img01 {
    /* margin: 8px 0 0 8px; */
    background: url(./sc/八环现场1.png) no-repeat;
    background-size: 100% 100%;
}

.scene-result .scene-img-box-two .scene-img.scene-img02 {
    /* margin: 8px 0 0 8px; */
    background: url(./sc/八环现场2.jpg) no-repeat;
    background-size: 100% 100%;
}

.scene-result .scene-img-box-one .scene-img.scene-img0 {
    margin: 8px 0 0 8px;
    background: url(./sc/占位照片1.png) no-repeat;
    background-size: 100% 100%;
}

.scene-result .img-matrix .scene-img {
    width: 95%;
    height: 92%;
    margin: 4px auto;
    background: url(./sc/占位照片1.png) no-repeat;
    background-size: 100% 100%;
}

.scene-result .img-matrix .scene-img.scene-img2 {
    background: url(./sc/占位照片2.png) no-repeat;
    background-size: 100% 100%;
}

.scene-result .img-matrix .scene-img.scene-img3 {
    background: url(./sc/占位照片3.png) no-repeat;
    background-size: 100% 100%;
}

.scene-result .img-matrix .scene-img.scene-img4 {
    background: url(./sc/占位照片4.png) no-repeat;
    background-size: 100% 100%;
}


/* 项目成效 */
.item-effect {
    display: flex;
    font-size: 17px;
    height: 70px;
    line-height: 70px;
    padding-left: 15px;
}

.item-effect .name {
    width: 45%;
}

.item-effect .hint {
    width: 12%;
    color: rgb(54, 154, 255);
}

.item-effect .data {
    width: 25%;
    color: rgb(54, 154, 255);
    font-weight: 800;
    font-size: 25px;
}

.item-effect .unit {
    font-size: 15px;
}

.appoint-data-board .appointBox {
    display: flex;
}

.appoint-data-board .appointBox .appoint-img {
    width: 185px;
    height: 92px;
    background: url(./sc/八环看板2.png) no-repeat;
    background-size: 100% 100%;
    margin: 10px 10px 15px 15px;
}

.appoint-data-board .appointBox .appoint-data {
    position: relative;
    /* top: 20px; */
    width: 130px;
    font-size: 14px;
    padding-top: 10px;
    /* text-align: center; */
    font-size: 14px;
    height: 115px;

}

.appoint-data-board .appointBox .appoint-data .title {
    color: rgb(0, 188, 255);
    font-weight: 800;
    text-align: center;
}

.appoint-data-board .appointBox .appoint-data .text {
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    word-break: break-all;
    /* break-all(允许在单词内换行。) */
    display: -webkit-box;
    /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 3;
    /* 显示的行数 */
    max-height: 95px;
    /* 设置最大高度，根据行高，要几行乘以几倍 */
}

.appoint-data-board .appoint-point {
    position: relative;
    top: -10px;
    right: 10px;
    display: flex;
    justify-content: right;
    /* padding-right: 50px; */
    margin-bottom: 15px;
    width: 185px;
}

.appoint-data-board .appoint-point .point {
    width: 20px;
    height: 4px;
    margin: 3px;
    background-color: rgba(0, 160, 233, 0.4);
}

.appoint-data-board .appoint-point .point.select {
    background-color: rgba(0, 160, 233, 1);
}

/* 右上角日期时间 */
.top-right-timeBox {
    display: flex;
    width: 350px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-right: 50px;
    margin-top: 40px;
    color: #fff;
    /* background-color: #fff; */
}

.top-right-timeBox .time {
    width: 45%;
    font-size: 30px;
    line-height: 50px;
    font-family: title-font;
}

.top-right-timeBox .dateBox .month {
    color: rgb(0, 188, 255);
}

.top-right-timeBox .long-string {
    background-color: #fff;
    width: 2px;
    height: 80%;
    margin-top: 10px;
    margin: 10px 20px 0 20px;
}

.top-right-timeBox .img {
    width: 42px;
    height: 46px;
    margin: 5px auto;
    background: url(./sc/云.png);
}

/* 内层项目实施进度 */
.item-implement-plan {}

.item-implement-plan-box {
    padding: 0 15px;
}

.item-implement-plan .plan-top {
    display: flex;
    justify-content: space-between;
}

.item-implement-plan .plan-top .title {
    font-family: title-font;
    font-size: 18px;
    line-height: 25px;
}

.item-implement-plan .plan-top .title-unit {
    display: flex;
    border: 1px solid rgb(83, 173, 215);
    font-size: 13px;
    padding: 3px 6px;
}

.item-implement-plan .plan-top .title-unit .left,
.progress-bar .left {
    color: rgb(83, 173, 215);
}

.item-implement-plan .line {
    height: 2px;
    margin: 15px 0px;
    background-color: rgba(0, 161, 234, .4);
}

.item-implement-plan .line .select {
    position: relative;
    bottom: 1px;
    height: 4px;
    width: 15%;
    background-color: rgba(0, 161, 234, 1);
}

.item-implement-plan .progress-bar {
    display: flex;
}

.item-implement-plan .progress-bar .bar-left {
    display: flex;
    line-height: 24px;
}

.item-implement-plan .progress-bar .bar-left .left {
    font-size: 18px;
    margin: 0 7px;
}

.item-implement-plan .progress-bar .bar-right {
    display: flex;
    margin: 5px 0 0 10px;
}

.item-implement-plan .progress-bar .bar-right .dot {
    height: 15px;
    width: 3px;
    margin: 0 1px;
    background-color: rgba(81, 190, 243, 0.1);
}

.item-implement-plan .progress-bar .bar-right .dot.select {
    background-color: rgba(81, 190, 243, 1);
}

.item-implement-plan .progress-data-list {
    margin: 10px 0;
    /* html内容禁止选中 */
    user-select: none;
}

.item-implement-plan .progress-data-list .item {
    display: flex;
    height: 35px;
    line-height: 35px;
    transition-property: background-color;
    transition-duration: 0.2s;
}

.item-implement-plan .progress-data-list .item:hover {
    background-color: rgba(255, 255, 255, .1);
}

.item-implement-plan .progress-data-list .item .year {
    margin-left: 10px;
    width: 15%;
}

.item-implement-plan .progress-data-list .item .date {
    width: 17%;
}

/* 左上角企业logo */
.top-left-firm-logo {
    position: absolute;
    top: 30px;
    left: 90px;
    width: 421px;
    height: 52px;
    /* background: url(./sc/LOGO.png); */
    font-size: 50px;
    color: white;
    font-family: title-font;
    letter-spacing: 15px;
    user-select: none;
}

/* 底部数据统计 */
.bottom-data-count {
    position: absolute;
    bottom: 30px;
    left: 400px;
    width: 1090px;
    height: 217px;
    background: url(./sc/中间背景框.png) no-repeat;
    color: #fff;
    display: flex;
    padding: 0 20px;
}

.bottom-data-count .count-left,
.bottom-data-count .count-right {
    margin: 15px 30px;
    width: 25%;
}

.bottom-data-count .count-left .title,
.bottom-data-count .count-right .title {
    font-size: 20px;
    /* font-weight: ; */
    font-family: title-font;
}

.bottom-data-count .count-left #trend {
    height: 250px;
    width: 320px;
    position: relative;
    bottom: 40px;
}

.bottom-data-count .count-right #electricityTrend {
    height: 250px;
    width: 320px;
    position: relative;
    bottom: 40px;
    left: -20px;
}

.bottom-data-count .count-right .title {
    text-align: right;
}

/* 中间左侧 */
.bottom-data-count .count-center-left {
    width: 9%;
    /* text-align: center; */
    padding-top: 50px;
    font-size: 18px;
    position: relative;
    left: 30px;
}

.bottom-data-count .count-center-left .top-data {
    margin: 20px 0;
}

.bottom-data-count .count-center-left .top-data .top {
    display: flex;
    color: rgb(134, 140, 149);
}

.bottom-data-count .count-center-left .top-data .top .icon {
    height: 10px;
    width: 10px;
    background-color: rgb(0, 128, 255);
    margin: 6px 5px 0 0;
}

.bottom-data-count .count-center-left .top-data .top .icon.orange {
    background-color: rgb(235, 87, 7);
}

.bottom-data-count .count-center-left .top-data .top .icon.gray {
    background-color: rgb(170, 170, 170);
}

.bottom-data-count .count-center-left .top-data .top .icon.yellow {
    background-color: rgb(247, 205, 112);
}

.bottom-data-count .count-center-left .top-data .data {
    margin-left: 15px;
}

/* 中间数据统计 */
.bottom-data-count .count-center {
    width: 20%;
    margin-left: 5px;
    position: relative;
}

.bottom-data-count .count-center .center-top {
    width: 190px;
    height: 12px;
    margin: 5px auto;
    text-align: center;
    line-height: 12px;
    font-family: title-font;
    font-size: 20px;
    background: url(./sc/小标题花纹.png);
}

.bottom-data-count .count-center .center-center {
    width: 195px;
    height: 172px;
    background: url(./sc/圆环背景图.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 5px;
    left: 10px;
    text-align: center;
}

.bottom-data-count .count-center .center-center .name {
    margin-top: 60px;
}

.bottom-data-count .count-center .center-center .data {
    font-size: 25px;
    font-family: title-font;
}

.bottom-data-count .count-center #count-circle {
    width: 320px;
    height: 220px;
    position: absolute;
    bottom: -19px;
    left: -51px;
    /* background-color: #fff; */
}

.count-center-left.right {
    position: relative;
    left: 20px;
}