body {
    background: url(../img/BackgroundImage.png) no-repeat;
    overflow: hidden !important;
}

html {
    overflow: hidden !important;
}

.alarm {
    display: flex;
    margin-top: 20px;
}

.alarm>img {
    position: absolute;
    margin-left: 20px;

}

.memory {
    color: #FFA500;
    font-weight: bold;
    width: 470px;
    font-size: 17px;
    text-align: center;
    position: absolute;
    bottom: 100px;
}


.alarm>div {
    margin-top: 93px;
}

.alarm>div:nth-child(3) {
    margin-top: 6px;
}

.alarm>div:nth-child(4) {
    margin-left: 3px;
}

.alarm>div>span {
    display: inline-block;
    text-align: center;
    width: 93px;
    font-weight: bold;
    font-size: 15px;
    padding: 0.31em 2.0em;
    color: #20dbfd;
    position: relative;
    overflow: hidden;
    line-height: 33px;
}

.alarm>div>div {
    margin-left: 10px;
    text-align: center;
    font-size: 15px;
    color: rgb(216, 216, 216);
    letter-spacing: 0.06em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;



}

video {
    object-fit: fill;
    width: 100%;
    height: 250px;
}

video:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

#FengMeiGui>div {
    width: 480px;
    height: 230px;
}

.container-center1 {
    display: flex;
    margin-left: -130px;
    margin-top: 35px;
}

.container-center1>div {
    margin-left: 160px;
}

.ProjectInformation {
    width: 60px;
    height: 60px;
    background: url(../img/global.png) no-repeat;
    background-size: 60px 60px;
    position: relative;
    display: flex;
}

.ProjectInformation>div {
    margin-left: 70px;
}

ul,
li {
    list-style: none;
}

#area {
    width: 550px;
    height: 82px;
    overflow: hidden;
    margin-left: -10px;
    font-size: 15px;
    color: rgb(247, 134, 4);
    line-height: 30px;
}

ul {
    width: 350px;
    margin-left: -18px;
}

#slide {
    position: absolute;
    width: 200px;
    top: 0px;
    color: #00ffc6;
    overflow: hidden;
    font-size: 13px;
    height: 105px;
    margin-top: 50px;
}

#slide1>div>.sli>div,
#slide2>div>.sli>div {
    overflow: hidden;
    width: 154px;
    text-align: center;
}

#slide1>div,
#slide2>div {
    height: 40px;
}

.sli {
    display: flex;
}

#ScrollContainer {
    position: absolute;
    width: 200px;
    height: 170px;
    right: 280px;
    bottom: 30px;
    background: url(../img/title/scroll.png) no-repeat;
    background-size: 200px 170px;
}

#ScrollParameters {
    display: flex;
}

#ScrollParameters>div {
    width: 100px;
    text-align: center;
    margin-left: -1px;
    line-height: 48px;
    color: rgb(7, 136, 241);
    font-size: 18px;
    font-weight: bold;
}

@font-face {
    font-family: "阿里妈妈方圆体 VF Regular";
    src: url("//at.alicdn.com/wf/webfont/1BrwPDwfJfSU/0gLYUepzpaFD.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/1BrwPDwfJfSU/WNVv0mZfKlJO.woff") format("woff");
}

@font-face {
    font-family: 'yjsz';
    src: url('../font/yjsz.TTF') format('truetype');
}

.ProjectInformation>div>div {
    color: #20dbfd;
    text-shadow: 0 0 25px #00d8ff;
    font-family: 'yjsz';
    margin-top: 4px;
    font-size: 35px;
}

.ProjectInformation>div>span {
    display: inline-block;
    width: 140px;
    color: aliceblue;
    font-weight: bold;
    font-family: "阿里妈妈方圆体 VF Regular";
    font-size: 16px;
}

.ProjectInformation>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parameter {
    width: 44%;
    height: 150px;
    position: absolute;
    margin-left: 60px;
    bottom: 20px;
    background-color: rgba(16, 54, 87, 0.1);
    border: 1px solid #345f92;
}

.TableHeader {
    border-bottom: 1px solid #345f92;
    background-color: rgba(16, 54, 87, 0.6);
}

.TableHeader span {
    display: inline-block;
    width: 19%;
    line-height: 48px;
    color: aliceblue;
    text-align: center;
}

.TableHeader1 {
    border: 0;
    font-weight: 400;
    background-color: transparent !important;
}

.TableHeader1 {
    border: 1px solid #345f92;
}

/* 折线图大小 */
#lineContainer>.swiper-slide>div {
    width: 100%;
    height: 300px;
}

.TableHeader1>span,
.TableHeader>span {
    border-right: 1px solid #345f92;
    font-size: 13px;
}

.Horn {
    width: 20px;
    height: 20px;
    bottom: -8px;
    position: absolute;
    border-bottom: 2px solid beige;
}

.HornLeft {
    border-left: 2px solid beige;
    left: -8px;
}

.HornRight {
    border-right: 2px solid beige;
    right: -8px;
}

.container-top {
    width: 100vw;
    height: 100px;
}

.container-top>h1 {
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 102px;
}

.container-top>img {
    width: 100vw;
    height: 17vh;
    position: absolute;
    top: -20px !important;
}

.container-botton {
    display: flex;
}

.container-botton>div {
    width: 25%;
    /* border: 1px solid blanchedalmond; */
    margin-left: 10px;
    height: 87vh;
    margin-top: -20px;
}

.container-botton>div:nth-child(2) {
    width: 50%;
}


.WeatherElements {
    display: flex;
}

.wv-lt-refresh,
.wv-lt-location>a {
    display: none !important;
}

.wind>div {
    display: flex;
}

.wind {
    width: 70%;
    margin-left: -10px;
    margin-top: 20px;
}

.weather #he-plugin-standard {
    width: 100% !important;
}

.left {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.05);
}

#time {
    position: absolute;
    top: 50px;
    right: 50px;
    display: flex;
    color: #00d1fd;
}



#time>div {
    height: 40px;
    font-size: 24px;
    margin-top: 3px;
}

#time>img {
    width: 32px;
    height: 32px;
    margin-top: 2px;
    margin-right: 5px;
}

#time>.timeLayout {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-family: initial;
    margin-top: 3px;
    margin-left: 10px;
}




/* .alarm>div>span,
.alarm>div>h3 {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #eee;
    font-size: 13px;
    margin-top: 20px;
} */

.alarm>div>h3 {
    color: rgb(33, 231, 231);
    font-size: 19px;
}

.title {
    margin-bottom: 20px;
    text-indent: 50px;
    font-size: 20px;
    font-weight: 600;
    font-weight: -10px;
    color: #eee;

}

#myVideoBig {
    width: 900px;
    height: 500px;
    z-index: 2;
    left: 510px;
    top: 230px;
    position: absolute;
    display: nonE;
}

#main8 {
    width: 1770px;
    height: 1000px;
    position: absolute;
    top: -70px;
    left: 30px;
}

.title1>img {
    width: 667px;
    margin-left: -10px;
}

.title1>span {
    position: absolute;
    color: #eee;
    text-indent: 1em;
    font-size: 19px;
    line-height: 30px;
}


#Footprint>div {
    width: 500px !important;
}

.title2 {
    width: 100%;
    text-align: center;
    position: relative;

}

.title2>img {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.title2>span {
    position: absolute;
    display: inline-block;
    width: 100%;
    color: #eee;
    left: 50%;
    margin-left: -50%;
    line-height: 30px;
}

#Footprint {
    width: 100%;
}

iframe {
    border: 0;
}

.flip-in-hor-top {
    -webkit-animation: flip-in-hor-top .1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: flip-in-hor-top 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}

@-webkit-keyframes flip-in-hor-top {
    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes flip-in-hor-top {
    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

/* 加载旋转动画 */
#load {
    width: 100%;
    height: 100%;
    position: absolute;
    background: no-repeat #061537;
    z-index: 200023;
    top: 0;
    left: 0;

}

#load .load_img {
    width: 300px;
    height: 300px;
    position: absolute;
    left: calc(50% - 182px);
    top: calc(50% - 182px);

    animation: rotate 4s linear infinite;
    /* 无限旋转动画 */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#chart {
    width: 230px;
    height: 210px;
}

.indicators>div,
.indicatorsa>div {
    width: 27%;
    height: 70px;
}

#Line,
#Line1 {
    width: 100%;
    height: 260px;
}

iframe {
    width: 100% !important;
    height: 252px;

}

.anchorBL>a>img {
    display: none;
}

.ContainerBox {
    width: 96%;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 5px;

}

.titleStyle {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #F0F8FF;
    font-weight: bold;
    font-size: 19px;
}

.titleStyle:nth-child(3) {
    margin-top: 10px;
}

.titleStyle:nth-child(5) {
    margin-top: 20px;
}

.ChartHeader span {
    position: absolute;
    line-height: 29px;
    text-indent: 20px;
    font-size: 19px;
    color: #F0F8FF;
}



@media (max-width: 1700px) {
    .container-center1>div {
        margin-left: 130px;
    }
}

#mysubway svg:not(:root) {
    width: 100px !important;
    overflow: visible !important;
    /* 覆盖 overflow: hidden */
    margin-left: -300px;
    margin-top: 248px;
    zoom: 1.0;
}


#mysubway {
    zoom: 1;
    fill: white !important;
    overflow: hidden;

}

#mysubway svg {
    fill: white !important;
}

.amap-subway-api #subway-svg text {
    font-size: 18px !important;
}

.box {
    width: 900px;
    height: 600px;
    position: absolute;
    top: 16%;
    left: 25%;
    background-color: rgba(89, 89, 89, 0.25);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 0.909091px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(14, 14, 14, 0.19) 0px 6px 15px 0px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    color: rgb(128, 128, 128);
    z-index: 111171;
    display: none;

}

.box>img {
    width: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* 蒙版样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 13;
}

.line {
    display: flex;
    margin-left: 50px;
    margin-top: 10px;
}

#main1,
#main2 {
    width: 400px;
    height: 300px;
}

.text {
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: wheat;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
}

.path-reversed {
    stroke-dasharray: 1 64;
    animation: dash-reversed 20s linear infinite;
}

@keyframes dash-reversed {
    100% {
        stroke-dashoffset: -150%;
    }
}

.path {
    stroke-dasharray: 1 108;
    animation: dash 10s linear infinite;
}

@keyframes dash {
    100% {
        stroke-dashoffset: 150%;
    }
}

.processus {
    display: flex;
    margin-left: 350px;
    margin-top: 200px;
    position: relative;
}

.processus-left {
    width: 1180px;
    height: 900px;
    position: absolute;
    left: 510px;
    margin-top: 178px;

    background-size: 100% 100%;
}

.tttt {
    width: 1180px;
    height: 900px;
    position: absolute;
    left: 94px;
    top: -200px;
    background: url(../img/1.svg);
    background-size: 100% 100%;
}

.processus-left>svg {
    margin-top: -110px;
    margin-left: -94px;
}

.acquisition>div>div {
    width: 64px;
    height: 64px;
    background-color: #f7f9fc;
    box-shadow: 0 0 8px 2px rgba(95, 126, 155, .28);
    border-radius: 8px;
    position: relative;

}

.acquisition>div {
    margin-bottom: 20px;
}

.acquisition>div>div>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.acquisition>div>span {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    color: #9ba2b2;
    text-align: center;
}

#g-line-select>path {
    stroke: none !important;
}

.warning {
    background-color: rgba(220, 17, 1, 0.16);
    border: 1px solid rgba(241, 6, 6, 0.81);
    border-radius: 6px;
    box-sizing: border-box;
    color: rgb(255, 3, 3);
    font-size: 13px;
    font-weight: bold;
    height: 41px;
    line-height: 18px;
    margin: 16px 0 0 0;
    padding: 10px 16px;
    position: relative;
    text-align: start;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    letter-spacing: 2px;
    z-index: 222;
    cursor: pointer !important;
    display: flex;
}

.warning::after {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 44px);
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 20px;
}

.warning>img {
    width: 18px;
    height: 18px;
    margin-top: -1px;
    animation: pulse 1s infinite;
    /* 应用动画 */
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        /* 初始和结束时的大小 */
    }

    50% {
        transform: scale(1.2);
        /* 放大的大小 */
    }
}

.warning>div {
    margin-left: 7px;
}

.warning1 {
    color: rgb(153, 116, 4);
    background-color: rgb(255, 243, 205);
    border-bottom-color: rgb(255, 243, 205);
    border-left-color: rgb(255, 243, 205);
    border-left-style: solid border-left-width 1px;
    border-right-color: rgb(255, 243, 205);
    border-top-color: rgb(255, 243, 205);
}

.warning-container {
    position: fixed;
    right: 270px;
    top: 200px;
    z-index: 100000;
}

@-webkit-keyframes pulse {
    0% {
        background: rgba(0, 255, 0, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(144, 238, 144, 0.9),
            /* 内侧阴影的绿色 */
            0px 0px 40px 2px rgba(0, 255, 0, 1);
        /* 外侧阴影的绿色 */
    }

    100% {
        background: rgba(0, 255, 0, 0.5);
        box-shadow: inset 0px 0px 10px 2px rgba(144, 238, 144, 0.5),
            /* 内侧阴影的绿色 */
            0px 0px 30px 2px rgba(0, 255, 0, 0.6);
        /* 外侧阴影的绿色 */
    }
}

@-webkit-keyframes pulse1 {
    0% {
        background: rgba(165, 42, 42, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(255, 20, 147, 0.5), 0px 0px 40px 2px rgba(220, 20, 60, 1);
    }

    50% {
        background: rgba(165, 42, 42, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(255, 20, 147, 1), 0px 0px 60px 10px rgba(220, 20, 60, 0.7);
    }

    100% {
        background: rgba(165, 42, 42, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(255, 20, 147, 0.5), 0px 0px 40px 2px rgba(220, 20, 60, 0.3);
    }
}

/* 电池特效 */
.green1,
.green2,
.green3,
.green4,
.green5,
.green6 {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    margin-top: 12px;
    -webkit-animation: pulse1 1.5s alternate infinite;
    -moz-animation: pulse 1.5s alternate infinite;
    transform: rotate(-5deg);
}

.map1-0,
.map1-1,
.map1-2,
.map1-3,
.map1-4,
.map1-5,
.map1-6,
.map1-7,
.map1-8,
.map1-9,
.map1-10 {
    border-radius: 50px;
    display: block;
    width: 15px;
    height: 48px;
    margin-top: 12px;
    position: absolute;
    -webkit-animation: pulse 1.5s alternate infinite;
    -moz-animation: pulse 1.5s alternate infinite;
    z-index: 2;
}

.battery-container {
    width: 870px;
    height: 410px;
    position: absolute;
    top: 250px;
    left: 480px;
}

.battery-container>div {
    width: 100%;
    height: 100%;
    position: relative;
}

.green1,
.green2 {
    left: 708px;
    bottom: 4px;
    z-index: 112;
}

.green3,
.green4 {
    left: 843px;
    bottom: 4px;
    z-index: 112;
}

.green5,
.green6 {
    left: 1055px;
    bottom: 4px;
    z-index: 112;
}

#name-900000055077034 {
    fill: rgb(51, 133, 255) !important;
    color: #00d1fd !important;
}

use::before {
    width: 10px;
    height: 10px;
    display: inline-block;
    fill: red !important;
    /* 确保 fill 属性生效 */
}

.alarm-container {
    position: absolute;
    left: 600px;
    top: 210px;
    width: 700px;
    height: 240px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.15);
    /* 上面颜色深，下面颜色浅 */
    padding: 10px;
    /* 父元素内边距 */
}

.alarm-container>div {
    display: flex;
}

.alarm-container>h3 {
    width: 100%;
    text-align: center;
    color: #eee;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.alarm-container>div>div {
    width: 150px;
    height: 200px;
    border-radius: 10px;
    padding: 10px;
    margin-left: 30px;
}

.alarm-container>div>div>img {
    width: 140px;
}

.alarm-container>div>div>span {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-left: 0px;
    color: white;
}

.control {
    margin-top: -20px;
}

.control>div {
    width: 170px;
    height: 107px;
    margin-top: 5px;
    color: white;

}

.control>div>span {
    color: #F0F8FF;
    position: relative;
    padding-left: 15px;
    font-weight: bold;
}

.control>div>span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    border-radius: 10px;
    /* 长条的宽度 */
    height: 100%;
    /* 长条的高度 */
    background-color: #F0F8FF;

}

.rainfall>div:nth-child(2) {
    margin-top: 6px;
}

.tag {
    width: 55px;
    padding: 2px;
    border-radius: 5px;
    background-color: rgba(220, 17, 1, 0.16);
    border: 1px solid rgba(241, 6, 6, 0.81);
    color: rgb(255, 3, 3) !important;
    font-size: 12px;
    text-align: center;
}

.tag1 {
    width: 55px;
    padding: 2px;
    border-radius: 5px;
    background-color: rgba(17, 255, 1, 0.16);
    border: 1px solid rgba(6, 241, 6, 0.81);
    color: rgb(13, 215, 13) !important;
    font-size: 12px;
    text-align: center;
}

.rainfall>div {
    display: flex;
}

.rainfall>div>span {
    display: inline-block;
    width: 90px;
    font-size: 14px;
    color: #20dbfd;
}

.rainfall>div>div {
    color: #F0F8FF;
}

.highest {
    font-size: 14px;
}

.highest>div {
    width: 100%;
    text-align: center;
    margin-left: 0px;
    color: #ffe400;
}

.station_obj:hover,
.station-name:hover {
    cursor: pointer;
}

.form-container {
    margin-top: 40px !important;
}

.form {
    width: 670px;
    height: 90px;
    margin-left: 100px;
    z-index: 1;
}

.form>.form-1,
.form>.form-2 {
    height: 30px;
    color: white;
    display: flex;
}

.form-0 {
    color: #FF5733;
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    z-index: 2;
}

.form-0:nth-child(1) {
    margin-top: 10px;
    margin-left: 30px;
}


.form-1 {
    top: 20px;
    margin-left: 88px;
    /* 根据需要调整位置 */
}

.form-2 {
    top: 50px;
    margin-left: 88px;
    /* 根据需要调整位置 */
}

.form-1>span,
.form-2>span {
    display: inline-block;
    width: 92px;
    text-align: center;
    line-height: 30px;
    border-right: 1px solid rgb(90, 89, 89);
    box-sizing: border-box;
    z-index: 2;
}

.form-1>span {
    color: #FF8D1A;
    border-bottom: 1px solid rgb(90, 89, 89);
}

.form-2>span {
    font-size: 12px;
    color: #20dbfd;
}


.form-1>span:last-child,
.form-2>span:last-child {
    border-right: none;
}

.w {
    width: 871px !important;
    position: absolute;
    bottom: 140px;
    left: 450px;
    color: white !important;
}

#ww_0908baaaf0a07 .ww_additional .wi_add_ic {
    fill: white !important;
}

.ww_source {
    display: none !important;
}

@media (min-width: 1820px) and (height: 1080px) {

    .tttt {
        left: 94px;
        top: -200px;
    }

    .processus-left {
        left: 510px;
        margin-top: 248px;

    }

    .warning-container {
        top: 250px;
    }

    .alarm-container {
        top: 260px;
    }

    .container-center1 {
        margin-top: 80px;
    }

    .container-top>h1 {
        line-height: 132px;
    }

}

@media (min-width: 1780px) {
    .warning-container {
        right: 240px;
    }


    .container-center1 {
        margin-top: 80px;
    }

    .warning-container {
        top: 250px;
    }

    .alarm-container {
        top: 260px;
    }


}