* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    list-style: none;
}

html,
body {
    height: 100%;
    min-height: 768px;

}

html {
    font-size: 85px;
    outline: none;
}

body {
    /*overflow: hidden;*/
    -o-user-select: none;
    -moz-user-select: none;
    /*火狐 firefox*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10+*/
    -khtml-user-select: none;
    /*早期的浏览器*/
    user-select: none;
    background-image: url(../img/bg.png);
    background-size: 100% 100%;
    color: #fff;
    font-size: 0.14rem;
}

img[src=""],
img:not([src]) {
    opacity: 0;
}
a {
    text-decoration: none; /* 去除下划线 */
    color: inherit; /* 继承父元素的颜色 */
    cursor: pointer; /* 修改鼠标指针样式 */
}
.clicktip{
    cursor: pointer;
}
.text{
    z-index: 3;
    font-size: 20px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;;
    padding: 30px;
    background-color:rgba(95, 184, 120, .5);
}

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('../font/YouSheBiaoTiHei-2.ttf') format('truetype'),
}

#wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

#wrap:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url(../img/fov.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    pointer-events: none;
}

#wrap.noBefore:before {
    content: none;
}

#container {
    min-width: 1366px;
    height: 100%;
    position: relative;
}

#container:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url(../img/boxBg.png);
    background-size: 100% 9.9rem;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 2;
    pointer-events: none;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    background-image: url(../img/headBg.png);
    background-size: 100% 100%;
    height: 1.17rem;
    z-index: 2;
}

#login {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.22rem;
    height: 4.87rem;
    transform: translate(-50%, -50%);
    background-image: url(../img/box-login.png);
    background-size: 100% 100%;
    padding: 0 0.5rem;
    z-index: 4;
}

.login-title {
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    margin-bottom: 0.7rem;
}

.login-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #344A77;
    display: flex;
    height: 0.6rem;
    margin-bottom: 0.3rem;
    position: relative;
}

.login-item-label {
    width: 0.7rem;
    background-image: url(../img/user.png);
    background-size: 0.24rem 0.26rem;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

}

.login-item-label:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 0.4rem;
    transform: translateY(-50%);
    background-color: #344A77;
}

.login-item-label.label-password {
    background-image: url(../img/password.png);
    background-size: 0.23rem 0.24rem;
}

.login-item-input {
    flex: 1;
    background-color: transparent;
    border: none;
    color: #fff;
    text-indent: 0.2rem;
    font-size: 0.18rem;
}

.checkbox {
    display: flex;
    margin-bottom: 0.5rem;
}

.checkbox input {
    width: 0.2rem;
    margin-right: 0.05rem;
}

.checkbox span {
    font-size: 0.16rem;
}

.submit {
    display: block;
    width: 100%;
    height: 0.6rem;
    border-radius: 0;
    border: none;
    font-size: 0.22rem;
    color: #fff;
    background: linear-gradient(0deg, #344A77 0%, #577AC2 100%);
    cursor: pointer;
}

#return,
#prev {
    position: absolute;
    top: 1.17rem;
    right: 4.8rem;
    width: 1.3rem;
    height: 0.37rem;
    line-height: 0.4rem;
    padding-left: 0.3rem;
    outline: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    background-color: transparent;
    background-image: url(../img/return.png);
    background-size: 100% 100%;
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    z-index: 3;
}

#return.bottom {
    top: auto;
    bottom: 0.5rem;
}

#return.midden {
    bottom: 5rem;
}

#return.top {
    right: 0.3rem;
}

#filter {
    position: absolute;
    top: 1.17rem;
    left: 1.5rem;
    color: #A1CEFF;
    z-index: 2;
    font-size: 0.16rem;
}

#filter input {
    width: 0.8rem;
    height: 0.4rem;
    background: rgba(10, 13, 28, 0.3);
    border: 1px solid #81A5CC;
    box-shadow: 0 0 0.06rem 1px #81A5CC inset;
    outline: none;
    color: #fff;
    text-indent: 5px;
}

#filter label {
    margin-left: 0.2rem;
}

#filter button {
    width: 0.9rem;
    height: 0.4rem;
    background: linear-gradient(159deg, #7494B7 0%, #131733 50%, #7494B7 100%);
    border: 1px solid #7494B7;
    color: #fff;
    vertical-align: top;
    margin-left: 0.15rem;
    font-size: 0.18rem;
    cursor: pointer;
    position: relative;
}

.search {
    padding-left: 0.2rem;
}

.search:after {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 0.18rem;
    height: 0.18rem;
    background-image: url(../img/search.png);
    background-size: 100% 100%;
}

h1 {
    position: relative;
    margin-top: 0.03rem;
}

.left,
.right {
    flex: 1;
    font-size: 0.2rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CFD7F3;
}

.left {
    margin-top: -0.37rem;
    margin-left: 0.2rem;
    display: flex;
    align-items: center;
}

.right {
    margin-top: 0.12rem;
    margin-right: 0.2rem;
    text-align: right;
    position: relative;
}

.weather-img {
    width: 0.79rem;
    height: 0.6rem;
    margin-right: 0.1rem;
}

.weather2,
.user {
    display: inline-block;
    vertical-align: middle;
}

.weather2 {
    position: absolute;
    top: 0.15rem;
    right: 1.5rem;
}

.user {
    position: relative;
    margin-left: 0.2rem;
    text-align: center;
}

.user:after {
    content: "";
    position: absolute;
    top: 0.1rem;
    right: -0.13rem;
    width: 1px;
    height: 0.33rem;
    background-color: #fff;
}

.user span {
    display: block;
    font-size: 0.16rem;
}

.user strong {
    color: #31CCD0;
    font-size: 0.14rem;
}

.user-wrap {
    display: none;
}

.login {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.14rem;
    color: #31ccd0;
    width: 0.8rem;
    height: 0.31rem;
    line-height: 0.31rem;
    text-decoration: none;
    background-image: url(../img/loginBg.png);
    background-size: 100% 100%;
    text-align: center;
    margin-top: 0.12rem;
    display: none;
}

.login.active {
    display: inline-block;
}

.menu {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1rem;
    width: 0.46rem;
    height: 0.26rem;
    background-image: url(../img/menu.png);
    background-size: 0.26rem 0.06rem;
    background-repeat: no-repeat;
    background-position: center;
}

.signOut {
    position: absolute;
    top: 0.55rem;
    right: 0.07rem;
    width: 0.99rem;
    height: 0.56rem;
    line-height: 0.56rem;
    background-image: url(../img/quit.png);
    background-size: 100% 100%;
    font-size: 0.14rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
    z-index: 2;
    display: none;
}

.signOut.active {
    display: block;
}

.title {
    padding: 0 0.1rem;
    font-family: 'YouSheBiaoTiHei';
    font-weight: 500;
    font-size: 0.52rem;
    font-style: italic;
    background-image: linear-gradient(to bottom, #f2fafd 30%, #84bce4, #f2fafd 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title .name {
    font-style: italic;
}

.light {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.light:after,
.light:before {
    content: "";
    position: absolute;
    background-size: cover;
}

.light-horizontal:before {
    position: absolute;
    width: 1.54rem;
    height: 0.56rem;
    top: -2px;
    left: 0%;
    opacity: 0;
    background-image: url(../img/light.png);
    background-size: 100% 100%;
    animation: lightLeft 3s linear infinite;
}

.light-horizontal:after {
    position: absolute;
    width: 1.54rem;
    height: 0.56rem;
    top: 0.35rem;
    left: 100%;
    transform: translateX(-100%);
    opacity: 0;
    background-image: url(../img/light.png);
    background-size: 100% 100%;
    animation: lightRight 3s linear infinite;
}

#left,
#right {
    position: absolute;
    left: 0.35rem;
    top: 1.17rem;
    width: 4rem;
    z-index: 1;
}

#right {
    left: auto;
    right: 0.35rem;
}

.item-title {
    height: 0.4rem;
    line-height: 0.35rem;
    background-image: url(../img/item-title.png);
    background-size: 100% 100%;
    padding-left: 0.4rem;
    margin-bottom: 0.15rem;
    position: relative;
}

.site .item-title,
.power .item-title,
.warn2 .item-title {
    margin-bottom: 0.1rem;
}

.item-title span {
    font-size: 0.18rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-style: italic;
    line-height: 0.24rem;
    letter-spacing: 2px;
    background: linear-gradient(0deg, #FFFFFF 0%, #98DEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.item-body {
    margin-bottom: 0.16rem;
}

#battery .item-body {
    position: relative;
    padding-top: 0.2rem;
}

#footer .item-body {
    margin-bottom: 0;
}

.item-body-title {
    display: block;
    font-size: 0.16rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.7;
    margin-bottom: 0.1rem;
}

.item-body-area {
    margin-bottom: 0.1rem;
    padding-top: 0.2rem !important;
}

.my-pagination {
    border: 1px solid #375466;
    height: 0.08rem !important;
    border-radius: 4px;
}

.my-pagination span {
    background: linear-gradient(90deg, #35729D, #BDC1C4) !important;
    height: 80% !important;
    border-radius: 10px !important;
}

.item-body-area a {
    width: 1.04rem !important;
    height: 0.5rem;
    line-height: 0.45rem;
    border: 2px solid #1E2224;
    color: #527F98;
    font-size: 0.16rem;
    text-decoration: none;
    text-align: center;
    background-color: #030406;
}

.item-body-area a.active {
    color: #fff;
    border-color: transparent;
    background-image: url(../img/area-active.png);
    background-size: 1.3rem 0.76rem;
    background-position: center;
}

.item-body-count {
    width: 2.05rem;
    height: 0.81rem;
    background-image: url(../img/countBg.png);
    background-size: 100% 100%;
    padding-top: 0.1rem;
}

.item-body-count span {
    display: block;
    font-size: 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    padding-left: 0.3rem;
    padding-top: 0.05rem;
}

.item-body-count span strong {
    font-size: 0.18rem;
    padding-right: 0.05rem;
}

.statistics .item-body {
    display: flex;
    justify-content: space-around;
}

.item-body-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.statistics-block {
    width: 1.89rem;
    height: 0.85rem;
    background-image: url(../img/box-left.png);
    background-size: 100% 100%;
    padding-top: 0.12rem;
    padding-left: 0.2rem;
    position: relative;
}

.item-body-left .statistics-block {
    /* margin-bottom: 22px;*/
}

.item-body-right .statistics-block {
    height: 1.92rem;
    background-image: url(../img/box-right.png);
}

.statistics-block p {
    font-size: 0.16rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 0.25rem;
}

.statistics-block span {
    font-size: 0.12rem;
    color: rgba(255, 255, 255, 0.7);
}

.statistics-block strong {
    font-size: 0.24rem;
    font-weight: 700;
}

.item-body-right .statistics-block strong {
    font-size: 0.32rem;
}

.statistics-block .icon {
    position: absolute;
    right: 0.1rem;
    bottom: 0.2rem;
    background-size: 100% 100%;
}

.icon-1 {
    width: 0.66rem;
    height: 0.41rem;
    background-image: url(../img/icon-1.png);
}

.icon-2 {
    width: 0.54rem;
    height: 0.54rem;
    background-image: url(../img/icon-2.png);
}

.icon-3 {
    width: 0.86rem;
    height: 0.62rem;
    background-image: url(../img/icon-3.png);
}

.item-body-list li {
    display: flex;
    align-items: center;
}

.predict .item-body {
    height: 2rem;
}

.warn .item-body {
    height: 3.35rem;
}

.warn2 .item-body {
    height: 2.7rem;
}

.predict .item-body-list li {
    height: 0.4rem;
    line-height: 1;
    font-size: 0.14rem;
    letter-spacing: 1px;
}

.predict .item-body-list li:nth-child(odd) {
    background: rgba(21, 59, 117, 0.3);
}

.item-body-list li strong {
    display: block;
    font-size: 0.12rem;
    width: 0.4rem;
    height: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    margin-left: 0.1rem;
}

.high strong {
    background: #9D3937;
}

.medium strong {
    background: #C3994A;
}

.low strong {
    background: #39639D;
}

.item-body-list li p {
    margin-left: 0.07rem;
    margin-right: 0.15rem;
}

.warn .item-body-list li {
    height: 0.6rem;
}

.warn .item-body-list li strong {
    width: 0.2rem;
    height: 0.2rem;
}

.warn .item-body-list li {
    border-width: 1px;
    border-style: solid;
}

.warn .item-body-list li.high {
    border-color: #9D3937;
    background: rgba(157, 57, 55, 0.15);
}

.warn .item-body-list li.medium {
    border-color: #C3994A;
    background: rgba(195, 153, 74, 0.15);
}

.warn .item-body-list li.low {
    border-color: #39639D;
    background: rgba(57, 99, 157, 0.15);
}

.total .item-title {
    background-image: url(../img/item-title2.png);
    padding-left: 0.1rem;
}

.total-block {
    padding-top: 0.1rem;
}

.total .swiper {
    width: 4rem;
}

.media {
    display: flex;
    margin-bottom: 0.1rem;
    position: relative;
}

.media-img {
    width: 1.11rem;
    margin-top: -0.35rem;
    margin-left: -0.12rem;
    margin-right: 0.05rem;
}

.media-body span {
    font-size: 0.18rem;
    font-weight: 500;
    line-height: 1.1;
}

.media:nth-child(1) span {
    color: #FF7E4B;
}

.media:nth-child(2) span {
    color: #FFE8AE;
}

.media-body span strong {
    font-size: 0.34rem;
    font-weight: 500;
}

.media-body p {
    font-size: 0.18rem;
    font-weight: 500;
    color: #FFFFFF;
}

.echarts {
    overflow: hidden;
}

.echarts-nav {
    display: flex;
}

.echarts-nav a {
    display: block;
    width: 0.8rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background-image: url(../img/navBg.png);
    background-size: 100% 100%;
    padding-left: 0.2rem;
    position: relative;
}

.echarts-nav a.active {
    background-image: url(../img/navBg-active.png);
}

.echarts-nav a:after,
.echarts-nav a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.echarts-nav a:after {
    top: 50%;
    left: 8px;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
}

.echarts-nav a:before {
    top: 50%;
    left: 5px;
    width: 8px;
    height: 8px;
    opacity: 0;
    transform: translateY(-50%);
    border-width: 2px;
    border-style: solid;
    animation: spread 2s ease-out infinite;
}

.echarts-nav a:nth-child(1):after {
    background-color: #AAC7E6;
}

.echarts-nav a:nth-child(1):before {
    border-color: #AAC7E6;
}

.echarts-nav a:nth-child(2):after {
    background-color: #85FFFF;
}

.echarts-nav a:nth-child(2):before {
    border-color: #85FFFF;
}

.echarts-nav a:nth-child(3):after {
    background-color: #45FFB2;
}

.echarts-nav a:nth-child(3):before {
    border-color: #45FFB2;
}

.echarts-nav a:nth-child(4):after {
    background-color: #FFCE7D;
}

.echarts-nav a:nth-child(4):before {
    border-color: #FFCE7D;
}

.item-title-menu {
    position: absolute;
    right: 0;
    bottom: 0.03rem;
    display: flex;
}

.item-title-menu button {
    width: 0.95rem;
    height: 0.27rem;
    outline: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    margin-left: -0.16rem;
    background-color: transparent;
    background-image: url(../img/menuBg.png);
    background-size: 100% 100%;
    font-size: 0.14rem;
}

.item-title-menu button.active {
    background-image: url(../img/menuBg-active.png);
}

#pie1,
#pie2 {
    position: absolute;
    right: 0.05rem;
    top: -0.05rem;
    width: 0.8rem;
    height: 0.8rem;
}

#bar1,
#bar2,
#line1,
#line2,
#line3,
#line4,
#pie3d {
    width: 4rem;
    height: 1.93rem;
}

#line2 {
    height: 2.8rem;
}

#pie3d {
    height: 1.3rem;
}

#soc {
    display: inline-block;
    vertical-align: middle;
    width: 0.8rem;
    height: 0.8rem;
}

#soh {
    display: inline-block;
    vertical-align: middle;
    width: 2.6rem;
    height: 0.8rem;
    background: rgba(31, 33, 70, 0.2);
    border: 3px solid #3C5278;
    border-radius: 0.2rem;
    padding: 0.06rem;
    position: relative;
}

#soh img {
    width: 0%;
    height: 0.6rem;
}

#soh span {
    font-size: 0.2rem;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#soh img {
    display: inline-block;
    vertical-align: middle;
}

.soc,
.soh {
    display: inline-block;
    vertical-align: top;
    margin-left: 0.1rem;
    margin-top: 0.3rem;
    position: relative;
}

.soc {
    width: 0.96rem;
    height: 0.96rem;
    background-image: url(../img/socBg.png);
    background-size: 100% 100%;
    padding-top: 0.08rem;
    padding-left: 0.08rem;
}

.soh {
    margin-left: 0.25rem;
    padding-top: 0.1rem;
}

.soc-title,
.soh-title {
    position: absolute;
    top: -0.3rem;
    left: 0.3rem;
    font-size: 0.16rem;
}

.soh-title {
    left: 0.1rem;
}

.plan .item-body-list {
    position: relative;
}

.plan .item-body {
    height: 1.46rem;
}

.plan .item-body-list:after {
    content: "";
    position: absolute;
    left: 0.14rem;
    top: 0.10rem;
    width: 0.18rem;
    height: 1.61rem;
    background-image: url(../img/line.png);
    background-size: 100% 100%;
}

.plan .item-body-list li {
    overflow: hidden;
    margin-left: 0.4rem;
    padding-left: 0.1rem;
    height: 0.34rem;
    margin-bottom: 0.2rem;
    position: relative;
}

.plan .item-body-list li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    height: 100%;
    background: linear-gradient(to right, #7A98B5, transparent 70%);
    animation: stretch 2s linear infinite;
}

.plan .item-body-list li a {
    position: absolute;
    left: 0;
    top: 0;
    height: 0.34rem;
    line-height: 0.34rem;
    z-index: 2;
    text-decoration: none;
    color: #fff;
}

.dynamic .swiper {
    height: 1.75rem;
}

.dynamic-block {
    position: relative;
    padding: 0 0.12rem;
    font-size: 0.14rem;
    margin-bottom: 0.4rem;
}

.dynamic-block:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 0.8rem;
    background-image: url(../img/blockBg.png);
    background-size: 100% 100%;
}

.dynamic-block-top,
.dynamic-block-bottom {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.dynamic-block-top {
    justify-content: space-between;
}

.dynamic-block-top strong {
    width: 0.73rem;
    height: 0.24rem;
    line-height: 0.24rem;

    text-align: center;

}

.dynamic-block-top strong.pending {
    background: rgba(0, 210, 255, 0.15);
    border: 1px solid rgba(0, 210, 255, 0.35);
    color: #00D2FF;
}

.dynamic-block-top strong.processing {
    background: rgba(69, 255, 178, 0.15);
    border: 1px solid rgba(69, 255, 178, 0.35);
    color: #45FFB2;
}

.dynamic-block-top {
    padding-top: 0.1rem;
    margin-bottom: 0.1rem;
}

.dynamic-block-top span {
    font-family: Arial;
    font-weight: 400;
    color: #AFC0D0;
    margin-right: 0.05rem;
}

.dynamic-block-bottom p {
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    margin-right: 0.55rem;
}

.dynamic-block-bottom span {
    border-left: 2px solid #8AB8EC;
    line-height: 1.8;
    padding-left: 0.2rem;
}

#warn {
    position: absolute;
    top: 0.87rem;
    left: 4.5rem;
    z-index: 3;
}

#warn.warn-left {
    left: 0.3rem;
}

.warn-img {
    width: 0.96rem;
    height: 0.96rem;
    background-image: url(../img/warn1.png);
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}

.warn-img:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.26rem;
    height: 0.3rem;
    margin-top: -0.15rem;
    margin-left: -0.13rem;
    background-image: url(../img/warn2.png);
    background-size: 100% 100%;
    animation: wiggle 2s linear infinite;
}

.warn-body {
    position: absolute;
    top: 0.2rem;
    left: 1rem;
    width: 2.66rem;
    height: 2.3rem;
    background-image: url(../img/warnBg.png);
    background-size: 100% 100%;
    padding: 0.15rem 0.2rem;
    display: none;
    z-index: 999;
}

.warn-body.active {
    display: block;
}

.warn-body h6 {
    font-size: 0.18rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #81A5CC;
    margin-bottom: 0.1rem;
}

.warn-item-title {
    margin-bottom: 0.06rem;
    font-size: 0.14rem;
    position: relative;
}

.warn-item-title strong {
    display: inline-block;
    vertical-align: top;
    width: 0.3rem;
    height: 0.2rem;
    font-size: 0.12rem;
    text-align: center;
    margin-right: 0.05rem;
}

.high .warn-item-title span {
    color: #9D3937;
}

.medium .warn-item-title span {
    color: #C3994A;
}

.low .warn-item-title span {
    color: #39639D;
}

.warn-item-title button {
    background-color: transparent;
    outline: none;
    border: none;
    color: #00D2FF;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

.warn-item-body {
    margin-bottom: 0.12rem;
}

#modal {
    width: 8.11rem;
    height: 3.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-image: url(../img/modalBg.png);
    background-size: 100% 100%;
    padding: 0.48rem 0.52rem;
    display: none;
    z-index: 4;
}

#photovol {
    width: 8.91rem;
    height: 4.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/modalBg2.png);
    background-size: 100% 100%;
    padding: 0.5rem 0.3rem;
    z-index: 4;
}

.photovol-block {
    margin-bottom: 0.3rem;
}

.photovol-block-title {
    display: flex;
    border-bottom: 2px solid rgba(52, 74, 119, 0.67);
    padding-bottom: 0.15rem;
}

.block-title-item {
    width: 50%;
    font-size: 0.24rem;
    font-weight: bold;
}

.block-title-item span {
    color: #2CFFF1;

}

#bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3;
    display: none;
}

#bg.active {
    display: block;
}


#modal h2 {
    margin-bottom: 0.2rem;
    font-size: 0.24rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: linear-gradient(0deg, #FFFFFF 0%, #98DEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#modal p {
    font-size: 0.16rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 0.28rem;
}

.data-top {

    height: 3.6rem;
    background-image: url(../img/dataBg.png);
    background-size: 100% 100%;
    color: #A1CEFF;
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
}

.condition {
    display: flex;
    padding-top: 0.2rem;
    position: relative;
    height: 0.7rem;
}

.condition .label {
    margin: 0.08rem 0.15rem 0;
}

.switch {
    width: 0.8rem;
    height: 0.4rem;
    border: 1px solid #81A5CC;
    background: rgba(10, 13, 28, 0.3);
    display: flex;
    box-shadow: 0 0 0.06rem 1px #81A5CC inset;
}

.data-top button {
    width: 0.4rem;
    height: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #A1CEFF;
    opacity: 0.5;
    font-style: italic;
}

.data-top button.active {
    background-image: url(../img/switchBg.png);
    background-size: 100% 100%;
    opacity: 1;
    font-weight: bold;
}

.input-wrap {
    width: 2rem;
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
}

.input-wrap input {
    outline: none;
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid #81A5CC;
    width: 2rem;
    padding: 0px 0.1rem;
    height: 0.4rem;
    box-shadow: 0 0 0.06rem 1px #81A5CC inset;
    transition: box-shadow 0.2s;
    color: #fff;
}

.input-wrap input:focus {
    box-shadow: 0 0 0.05rem #81A5CC;
}

.icon-date {
    position: absolute;
    right: 0.15rem;
    top: 50%;
    margin-top: -0.1rem;
    width: 0.22rem;
    height: 0.2rem;
    background-image: url(../img/date.png);
    background-size: 100% 100%;
}

.data-bottom {

    display: flex;
    margin-left: -0.1rem;
}

.data-bottom a {
    text-decoration: none;
    position: relative;
    text-align: center;
    margin-right: 0.2rem;
}

.data-bottom a img {
    width: 1.11rem;
    display: block;
}

.data-bottom a span {
    margin-left: 0.21rem;
    font-size: 0.18rem;
    color: #fff;
}

.data-bottom a strong {
    width: 0.2rem;
    position: absolute;
    right: -0.05rem;
    top: 0.05rem;
    font-size: 0.34rem;
    color: #00D2FF;
}

.data-bottom .wait-task strong {
    color: #FF7E4B;
}

.data-bottom .total-task strong {
    color: #45FFB2;
}

.select {
    position: absolute;
    top: 1.17rem;
    right: 4.8rem;
    width: 1.24rem;
    height: 0.67rem;
    line-height: 0.4rem;
    background-image: url(../img/btnBg.png);
    background-size: 100% 100%;
    text-align: center;
    font-size: 0.18rem;
    z-index: 3;
}

#select-battery {
    top: 0;
    right: auto;
}

.select.select-right {
    right: 2rem;
}

#select-site {
    right: 6.3rem;
}

#select-site.select-right {
    right: 3.5rem;
}

.select>a {
    padding: 0 0.1rem;
    width: 1rem;
    height: 0.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    color: #CEDCF4;
    font-weight: bold;
    background: linear-gradient(0deg, #7C8FFF 0%, #A0AEFF 18%, #FFFFFF 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select>a:after {
    content: "";
    position: absolute;
    right: 0.05rem;
    top: 0.03rem;
    width: 0.28rem;
    height: 0.32rem;
    background-image: url(../img/arrow.png);
    background-size: 100% 100%;
}

.select.active .subMenu {
    display: block;
}

.select.active>a:after {
    transform: rotate(180deg);
}

.subMenu {
    position: relative;
    margin-top: 0.1rem;
    display: none;
}

.subMenu:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(28, 31, 66, 0.75) 0%, #7494B7 100%);
    box-shadow: 0px 0px 32px 4px rgba(7, 14, 29, 0.3), 0px 0px 20px 0px rgba(0, 133, 255, 0.15);
    opacity: 0.2;
    pointer-events: none;
}


.subMenu a {
    display: block;
    text-decoration: none;
    color: #9BBEFF;
    font-size: 0.16rem;
    height: 0.52rem;
    line-height: 0.52rem;
}

.subMenu a.active {
    width: 1.24rem;
    height: 0.52rem;
    line-height: 0.52rem;
    background-image: url(../img/btn-active.png);
    background-size: 100% 100%;
    color: #fff;
    font-weight: bold;
}

#task {
    position: absolute;
    bottom: 1.2rem;
    right: 4.8rem;
    width: 5.46rem;
    height: 1.9rem;
    background-image: url(../img/taskBg.png);
    background-size: 100% 100%;
    padding: 0 0.2rem;
    z-index: 999;
}

#task.task-left {
    bottom: 1rem;
    left: 4.5rem;
    right: auto;
}

.task-title {
    font-size: 0.2rem;
    color: #81A5CC;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
}

#task table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

#task table th {
    font-size: 0.14rem;
    color: #8AD2FF;
    padding-bottom: 0.2rem;
}

#task table td {
    font-size: 0.12rem;
    height: 0.2rem;
    background-color: #161D2B;
    padding: 0.1rem 0;
}

#task table td img {
    width: 0.44rem;
    height: 0.44rem;
    display: inline-block;
    vertical-align: middle;
}

.info-body {
    background-image: url(../img/dataBg.png);
    background-size: cover;
}

.info-body-block:first-child {
    padding: 0.3rem 0;
}

.info-body-block:last-child {
    padding-bottom: 0.12rem;
}

.info-body-block h2,
.info-body-block h3 {
    padding: 0 0.15rem;
    font-weight: normal;
}

.info-body-block h2 {
    font-size: 0.2rem;
    margin-bottom: 0.1rem;
}

.info-body-block h3 {
    font-size: 0.16rem;
}

.info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.1rem 0.15rem;
}

.info-list li {
    width: 50%;
    height: 0.35rem;
    line-height: 0.35rem;
    font-size: 0.16rem;
    display: flex;
}
.inverter .info-list li,
.dydl .info-list li{
    display: none;
}

.photovol-block .info-list {
    border: 2px solid #364256;
    background-color: rgba(35, 42, 57, 0.5);
}

.photovol-block .info-list li {
    width: 20%;
}

.photovol-block:last-child .info-list li {
    width: 33.33%;
}

.info-list li.full {
    width: 100%;
}

.info-list li label {
    min-width: 0.8rem;
}

.info-body-block li label {
    width: auto;
}

.info-list li.full label {
    width: auto;
}

.item-btn{
    position: absolute; 
    top: -0.15rem;
    right: 0;
}

.item-btn a{
    display: inline-block;
    width: 0.8rem;
    height: 0.25rem;
    line-height: 0.25rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(0deg, #344A77 0%, #577AC2 100%);
    cursor: pointer;
    text-decoration: none;
}
.item-btn a.on{
    background: linear-gradient(0deg, #1eb1a7 0%, #2CFFF1 100%);
}
.info-list li span {
    color: #00D2FF;
}

.info-list li span.red {
    font-style: normal;
    color: #FF4B4B;
}

#box1,
#box2 {
    position: absolute;
    bottom: 0.25rem;
    width: 4.7rem;
    z-index: 2;
}

#box1 {
    right: 4.75rem;
}

#box2 {
    left: 4.75rem;
}

#box2 #line2 {
    width: 4.7rem;
}

.info-module {
    display: flex;
    padding: 0.13rem;
}

.info-module.no-flex {
    display: block;
}

.info-module a {
    display: block;
    width: 1rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-decoration: none;
    color: rgba(192, 198, 220, 0.7);
    text-align: center;
    background-image: url(../img/navBg.png);
    background-size: 100% 100%;
}

.info-module a.active {
    background-image: url(../img/navBg-active.png);
    color: #91BAE6;
}

.info-module-area {
    display: flex;
}

.info-module-area a {
    margin: 0 0.1rem;
}

.info-module-item {
    padding: 0.2rem 0 0.1rem;
}

.info-module-item a {
    margin-right: 0.1rem;
}

.inverter .info-list {
    display: none;
}

.inverter .info-list.active {
    display: flex !important;
}

.inverter .info-list li {
    height: 0.37rem;
    line-height: 0.37rem;
}

#battery {
    position: absolute;
    top: 50%;
    left: 0.2rem;
    margin-top: -3.6rem;
    width: 12rem;
    height: 7.2rem;
    background-image: url(../img/battery-bg.png);
    background-size: 100% 100%;
    padding: 0.25rem;
    z-index: 3;
}

#battery.center {
    left: 50%;
    margin-left: -6rem;
}

.battery-body {
    display: flex;
}

#battery h6 {
    padding: 0 0 0.15rem;
    font-size: 0.24rem;
    position: relative;
    margin-bottom: 0.15rem;
}

#battery h6:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(52, 74, 119, 1) 0%, rgba(52, 74, 119, 0) 40%);
}

#battery h6 strong {
    color: #2CFFF1;
    margin: 0 0.15rem;
}

.battery-list {
    display: flex;
    margin: 0 -0.07rem 0.2rem;
}

.battery-list-item {
    width: 1.84rem;
    height: 0.9rem;
    text-align: center;
    background-image: url(../img/box.png);
    background-size: 100% 100%;
    padding-top: 0.12rem;
    font-size: 0.18rem;
}

.battery-list-item span {
    display: block;
    padding-top: 0.1rem;
    font-size: 0.24rem;
}

#battery #line3,
#battery #line4 {
    width: 5.4rem;
    height: 2.4rem;
}

.battery-right {
    width: 5.5rem;
    height: 5.3rem;
    background: #151A25;
    border: 1px solid #093958;
    margin-left: 0.3rem;
}

#group {
    position: absolute;
    top: 2rem;
    left: 0;
    padding: 0 0.3rem;
    height: 8.6rem;
}

.group-wrap {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    overflow: auto;
    padding-left: 1.2rem;
}

.group-item {
    width: 2.9rem;
    height: 3.9rem;
    background-image: url(../img/box-group.png);
    background-size: 100% 100%;
    padding: 0.15rem;
    margin: 0.1rem;
}

.group-item-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.group-item-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.group-item-body a {
    display: block;
    width: 1.2rem;
    height: 0.32rem;
    line-height: 0.32rem;
    background-image: url(../img/batteryBg1.png);
    background-size: 100% 100%;
    text-align: center;
    color: #42B92A;
    text-decoration: none;
    margin-bottom: 0.1rem;
}

.group-item-body a.medium {
    color: #FFCE7D;
    background-image: url(../img/batteryBg2.png);
}

.group-item-body a.high {
    color: #FF7E4B;
    background-image: url(../img/batteryBg3.png);
}

.province {
    color: #ffffff;
    background: url(../img/1.png);
    background-size: 100% 100%;
    line-height: 0.2rem;
    padding: 12px;
    font-size: 0.2rem;
}

#warn-list {
    position: absolute;
    top: 1.8rem;
    left: 0;
    right: 0;
    height: 8.6rem;
    margin: 0 0.3rem;
    padding: 0.2rem 0.1rem 0.2rem 0;
    border: 1px solid #3d5065;
    background-color: #0a0e1c;
}

#warn-list ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    overflow: auto;
    padding-bottom: 0.1rem;
    padding-right: 0.1rem;
}

#warn-list li {
    width: 14.28%;
    padding: 0 0.1rem;
}

#warn-list li a {
    display: block;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #A1CEFF;
    text-decoration: none;
    background-image: url(../img/warnBg1.png);
    background-size: 100% 100%;
    text-align: center;
}

#warn-list li a.medium {
    color: #FFCE7D;
    background-image: url(../img/warnBg2.png);
}

#warn-list li a.high {
    color: #FF7E4B;
    background-image: url(../img/warnBg3.png);
}

.hide {
    display: none;
}

#battery.hide {
    display: block;
    visibility: hidden;
}

.active {
    display: block !important;
}

#battery.active {
    visibility: visible;
}

.null {
    width: 100%;
    height: 100%;
    background-image: url(../img/null.png);
    background-position: -30px center;
    background-repeat: no-repeat;
}

.name {
    font-style: normal;
}

.error {
    position: absolute;
    top: 0.6rem;
    font-size: 0.18rem;
    color: #f15533;
}

#tooltip {
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #103c3b;
    color: rgba(63, 236, 251, .875);
    display: none;
    position: absolute;
    z-index: 999;
    white-space: nowrap;
}

/* 设置滚动条的样式 */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* 滚动槽 */

::-webkit-scrollbar-track {
    border: 1px solid #37556b;
    border-radius: 10px;
    background-color: #0b1e2e;
}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(123, 155, 179, 1);

}


@keyframes lightLeft {
    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: 100%;
        transform: translateX(-100%);
    }
}

@keyframes lightRight {
    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: 0;
        transform: translateX(0);
    }
}

@keyframes wiggle {
    10% {
        transform: rotate(30deg);
    }

    20% {
        transform: rotate(-20deg);
    }

    30% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

@keyframes stretch {
    80% {
        width: 100%;
    }

    ,
    100% {
        width: 50%;
    }
}

@keyframes spread {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(0.6);
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 0;
        transform: translateY(-50%) scale(1.4);
    }
}



#loading,
#loading2 {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
    margin-top: -100px;
    background-color: transparent;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.load8 .loader,
.load8 .loader:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
    left: 50%;
    margin-left: -4em;
}

.load8 .loader {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1em solid rgba(066, 176, 235, 0.2);
    border-right: 1em solid rgba(66, 176, 235, 0.2);
    border-bottom: 1em solid rgba(66, 176, 2350, 0.2);
    border-left: 1em solid #42b0eb;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;

}

.load8 span {
    display: block;
    padding-top: 10px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}