body {
    height: 100%;
    background: #020f3c;
    font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
}

html {
    height: 100%;
}

@font-face {
    font-family: UnidreamLED;
    src: url('../images/DS-DIGIT.TTF');
}

* {
    margin: 0;
    padding: 0;
}

* {
    touch-action: pan-y;
}

ul li {
    list-style: none;
}

i, em {
    font-style: normal
}

a, a:hover, a:active, a:link, a:focus, a:visited {
    text-decoration: none;
    outline: 0;
}

p {
    margin: 0;
}

textarea {
    resize: none
}

.slimScrollDiv {
    height: auto !important;
    overflow: initial !important;
}

.light-allGray {
    -webkit-filter: grayscale(80%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=0.8);
}

.allGray {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

.visihide {
    visibility: hidden;
}

.dis-hide {
    display: none;
}

.headPosition {
    line-height: 98px;
    height: 98px;
    text-align: center;

}

@media screen and (max-width: 769px) {
    .headPosition > div {
        font-size: 1.8rem;

    }

    .loginLeftBg {
        display: none
    }

    .sign-in-wrapper {
        top: 20% !important;
        width: 300px;
        left: 50%;
        right: initial !important;
        transform: translateX(-50%);
        border: 1px solid #2287de;
    }

    .sign-in-wrapper .sign-in-inner {
        width: 280px !important;
        border: 0
    }

    .customerLogo {
        font-size: 12px !important;
        padding: 0 3px !important;
    }

    .main_headertip {
        display: none
    }

    .top-nav .top-nav-inner {
        border: 0;
        padding: 0 10px;
    }

    .maintitletipsBg {
        background: 0 !important;
    }

    .maintitletipsBg h3 {
        top: 10px !important;
        font-size: 24px !important;
    }

    .top-nav .navbar-toggle {
        margin-right: 10px;
    }

    .sidebar-menu li a span {
        font-size: 14px !important;
    }


}


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

.loginBg {
    position: fixed;
    width: 100%;
    background: url(../images/login.gif) no-repeat top center;
    height: 100%;
    background-size: cover;
}

.pythonloginBg {
    position: fixed;
    width: 100%;
    background: url(../images/pythonlogin.jpg) no-repeat top center;
    height: 100%;
    background-size: cover;
}

.bg {
    width: 100%;
    background: url(../images/win95.png) no-repeat;
    height: 100%;
    background-size: 100% 100%;
    position: fixed;
}

.overviewMapBg {
    width: 100%;
    background: url(../images/map.png) no-repeat center top;
    height: 100%;
    background-size: cover;
}

.mainBg {
    width: 100%;
    background: #020f3c;
    height: 100%;
    background-size: cover;

}

.maintitleBg {
    width: 100%;
    background: url(../images/maintitleBg.png) no-repeat;
    height: 42px;
    background-size: 100% 100%;
    position: fixed;
}

.detailBg {
    background: #2d2e3e;
    height: 100%;
    width: 100%;
    background-size: cover;
    overflow-y: auto;

}

.detailtitleBg {
    width: 100%;
    background: #53546e;
    height: 50px;
    background-size: 100% 100%;
    position: fixed;
    line-height: 50px;
    padding: 0 15px;
}

.detailtitletipsBg {
    width: 300px;
    background: url(../images/detailtitletipsBg.png) no-repeat;
    height: 78px;
    background-size: 100% 100%;
    position: fixed;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.maintitletipsBg {
    width: 320px;
    background: url(../images/maintitletipsBg.png) no-repeat;
    height: 50px;
    background-size: 100% 100%;
    position: fixed;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
}

.maintitletipsBg h3 {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
}

.detailtitletipsBg h3 {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    background: linear-gradient(to bottom, #fff, #07e0ff);
    color: transparent;
    -webkit-background-clip: text;
}

.python-sign-in-wrapper {
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -190px;
    background: #fff;
}
.python-sign-in-wrapper .sign-in-inner {
    width: 380px;
    height: 350px;
}
.python-sign-in-wrapper .form-control {
    padding: 10px 30px;
}
.python-sign-in-wrapper span {
    position: absolute;
    left: 8px;
    top: 11px;
}
.python-sign-in-wrapper input {
    border: 1px solid #2287de;
    box-shadow: none;
    background: #0b215d;
    color: #fff;
    caret-color: #333;
}
.python-sign-in-wrapper input::-webkit-input-placeholder {
    color: #999;
}
.python-sign-in-wrapper input::-moz-placeholder {
    color: #999;
}
.python-sign-in-wrapper input::-ms-input-placeholder {
    color: #999;
}
.python-sign-in-wrapper input:-internal-autofill-previewed, .python-sign-in-wrapper input:-internal-autofill-selected {
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}



.cloud-sign-in-wrapper {
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -210px;
    background: rgb(18 62 99 / 80%);
}
.cloud-sign-in-wrapper .sign-in-inner {
    width:420px;
    height: 350px;
}
.cloud-sign-in-wrapper .form-control {
    padding: 10px 30px;
}
.cloud-sign-in-wrapper span {
    position: absolute;
    left: 8px;
    top: 11px;
}
.cloud-sign-in-wrapper input {
    border: 1px solid #2287de;
    box-shadow: none;
    background: #0b215d;
    color: #fff;
    caret-color: #333;
}
.cloud-sign-in-wrapper input::-webkit-input-placeholder {
    color: #999;
}

.cloud-sign-in-wrapper input::-moz-placeholder {
    color: #999;
}
.cloud-sign-in-wrapper input::-ms-input-placeholder {
    color: #999;
}
.cloud-sign-in-wrapper input:-internal-autofill-previewed, .cloud-sign-in-wrapper input:-internal-autofill-selected {
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}



.sign-in-wrapper {
    position: fixed;
    top: 28%;
    right: 10%;
    background: #0e5277 url("../images/loginBox.png") no-repeat;
    background-size: 100% 100%;
}
.sign-in-wrapper .sign-in-inner {
    width: 380px;
    height: 350px;
}

.sign-in-wrapper .form-control {
    padding: 10px 30px;
}
.sign-in-wrapper span {
    position: absolute;
    left: 8px;
    top: 11px;
}
.sign-in-wrapper input {
    border: 1px solid #2287de;
    box-shadow: none;
    background: #0b215d;
    color: #fff;
    caret-color: #fff;
}
.sign-in-wrapper input::-webkit-input-placeholder {
    color: #999;
}
.sign-in-wrapper input::-moz-placeholder {
    color: #999;
}
.sign-in-wrapper input::-ms-input-placeholder {
    color: #999;
}
.sign-in-wrapper input:-internal-autofill-previewed, .sign-in-wrapper input:-internal-autofill-selected {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

#login {
    background: #01a0e6;
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.cloudLogin{
    background: #1cc2ff !important;
}
.cloudLogin:hover{
    background: #1ed8ff !important;

}

.custom-checkbox input[type=checkbox]:checked + label {
    border: 1px solid #00d0ff;
    background: none;
}

.custom-checkbox label:after {
    border-color: #00d0ff;
}

.custom-checkbox label {
    border: 1px solid #00d0ff;
    background: none;
    border-radius: 0;
}

.bg.redtheme {
    background-image: url(../images/red_win95.png)
}


label {
    color: #fff;
}

.header {
    height: 80px;
}

.cloud_header {
    background: linear-gradient(to right, #011c4c, #07a6bf ,#011c4c);
    position: relative;
    padding:5px 20px

}
.cloud_header_tip_bg{
    background: url(../images/cloud_header.png) no-repeat;
    height: 16px;
    width: 360px;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -180px;
    top: 22px;

}
.cloud_header_tip{
    position: absolute;
    left: 50%;
    margin-left: -180px;
    top: -10px;
    width: 100%;
    text-align: center;
}

.logo {
    width: 200px;
    margin: 20px;
}

.customerLogo {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff;
    color: #183883;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    padding: 3px 8px;
}

.dateTips {
    margin: 20px;
    color: #fff;
    display: inline-block;
}

.layout-left {
    position: relative;
    left: 10px;
    top: 50px;
    width: 150px;
    float: left;
}

.layout-left ul li {
    width: 80px;
    padding: 15px 5px;
}

.layout-left ul li:hover {
    background: rgba(239, 255, 236, 0.25);
}

.layout-right {
    margin-left: 300px;
    margin-top: 10px;
}

.col-white {
    color: #fff !important;
}

.col-lgray {
    color: #666 !important;
}

.col-red {
    color: #da4040;
}

.col-lred {
    color: #c3acac;
}

.col-dblue {
    color: #0014ff !important;
}

.col-blue {
    color: #07e0ff !important;
}

.col-lblue {
    color: #00d0ff !important;
}

.col-shineBlue {
    color: #fff;
    text-shadow: 0 0 10px #57b3f3;
}

.col-gradientsBlue {
    background: linear-gradient(to bottom, #fff, #00def6);
    -webkit-background-clip: text;
    color: transparent;
}

.col-green {
    color: #00f7a1;
}

.col-gray {
    color: #333 !important;
}

.col-yellow {
    color: #f8ea04;
}

.detailBtn {
    cursor: pointer;
    position: absolute;
    right: 10px;
    display: inline-block;
    z-index: 100;
}

.detailBtn i {
    font-size: 24px;
}

.detailBtn i:hover {
    color: #00def6;
}

.sm-tip {
    width: 20px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 2px;
    display: inline-block;
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 28px;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-36 {
    font-size: 36px !important;
}


.fs-45 {
    font-size: 45px !important;
}

.width-60 {
    width: 60px;
}

.width-80 {
    width: 80px;
}

.width-100 {
    width: 100px;
}

.sm-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #fff;
    display: inline-block
}

.sm-emptycircle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #666;
    display: inline-block
}

.red-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #da4040;
    display: inline-block
}

.green-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #00f7a1;
    display: inline-block
}

.yellow-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #fdd901;
    display: inline-block
}

.gray-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #999;
    display: inline-block
}

.purple-circle {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #703d8f;
    display: inline-block
}


.white-circle {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: #fff;
    display: inline-block;
    color: #333;
    font-size: 14px;
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -13px;
    text-align: center;
    line-height: 26px;
    font-weight: bold;

}

.timeLineContent {
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height: 350px;
}

.timeLineContent ul li {
    width: 4.16%;
    float: left;
    height: 2px;
    position: relative;
}

.timeLineContent .time {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #999;
    top: 350px;
}

.timeLineContent .sm-circle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #666;
    top: 100px;
    z-index: 10
}

.timeLineContent .line {
    position: absolute;
    left: -18px;
    height: 2px;
    width: 100%;
    background: #666;
    top: 104px;
}

.timeLineContent ul li .scale {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #666;
    top: 324px;
    height: 5px;
    width: 2px;
}

.timeLineContent ul li.active .time {
    color: #fff
}

.timeLineContent ul li.active .scale {
    background: #fff
}

.timeLineContent ul li.active .line {
    background: #fff
}

.timeLineContent ul li.active .sm-circle {
    background: #fff
}


.layout-right ul li {
    float: left;
    width: 200px;
    padding: 10px;
    margin-bottom: 50px;
}

.layout-right ul li:hover {
    background: rgba(239, 255, 236, 0.25);
}

.layout-right ul li:nth-of-type(1) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#084bc3, #5dc6f4);
    border-radius: 10px;

}

.layout-left ul li div span, .layout-right ul li div span {
    display: inline-block
}

.layout-left ul li p, .layout-right ul li p {
    margin-top: 3px;
}

.layout-right ul li:nth-of-type(2) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#c10000, #ff4c4c);
    border-radius: 10px;
}

.layout-right ul li:nth-of-type(3) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#5b16ab, #9a63da);
    border-radius: 10px;
}

.layout-right ul li:nth-of-type(4) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#0ec5d7, #7ef2e4);
    border-radius: 10px;
}

.layout-right ul li:nth-of-type(5) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#3768c1, #66dcff);
    border-radius: 10px;
}

.layout-right ul li:nth-of-type(6) div span {
    width: 60px;
    height: 60px;
    background:linear-gradient(#da8e04, #f5de3e);
    border-radius: 10px;
}


.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

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

.mt-30 {
    margin-top: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

/*.mt-60 {*/
/*    margin-top: 60px;*/
/*}*/

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-50 {
    margin-right: 50px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.pl-15 {
    padding-left: 15px;
}

.pdr-5 {
    padding: 0 5px 0 0;
}

.pdtb-5 {
    padding: 5px 0;
}

.pdtb-10 {
    padding: 10px 0;
}

.pdtb-15 {
    padding: 15px 0;
}

.pdt-60 {
    padding-top: 60px;
}

.pdtb-80 {
    padding-top: 80px;
}

.pdtb-100 {
    padding-top: 100px;
}

.pt-20 {
    padding-top: 20px;
}

.lh-50 {
    line-height: 50px;
}

.lh-40 {
    line-height: 40px;
}

.pd-none {
    padding: 0;
}

.mg-none {
    margin: 0;
}

.pd-20 {
    padding: 20px;
}

.pd-5 {
    padding: 5px;
}

.pd-8 {
    padding: 8px;
}

.pd-10 {
    padding: 10px;
}

.pd-15 {
    padding: 15px;
}

.pd-30 {
    padding: 30px;
}

.pdl-5 {
    padding-left: 5px;
}

.pdlr-5 {
    padding: 0 5px;
}

.pdlr-20 {
    padding: 0 20px;
}

.pd-2 {
    padding: 2px;
}

.commonBgtips {
    background: linear-gradient(to right, #2f8eab, #0a1e4c, #0a1e4c);
    color: #fff;
    font-size: 16px;
    padding: 10px;
    width: 400px;
}

.bg-card {
    background: #0a355a;

}

.listBg {
    border: 1px solid #00b3fd;
    position: relative;
    /*background: rgb(2 28 147 / 0.3);*/
    box-shadow: 0 0 5px #1be2f7 inset;
}

.line_listBg {
    border: 1px solid #00b3fd;
    position: relative;
    background: url("../images/bg_line.png");
    box-shadow: 0 0 5px #1be2f7 inset;
    background-size: 100% auto;
}

.bg-small-tip {
    background: linear-gradient(#085465, #0e1c43);
    border: 1px solid #58dbff;
}

.small-bg-card {
    background: #162c46;
}

.bg-lpurple {
    background: #343552;

}

.bg-lgray {
    background: #efefef;
}

.bg-lcard {
    background: #3d3d3d;
    border: 1px solid rgba(47, 47, 47, 0.5);
    border-radius: 2px;
}

.bg-orange {
    background: #f8a104;
    color: #fff;
}

.bg-blue {
    background: #1E9FFF;
    color: #fff !important;
}


.bg-dblue {
    background: #346d9e;
    color: #fff !important;
}

.bg-lblue {
    background: #3ed7fe;
    color: #fff;
}

.bg-yellow {
    background: #FFB800;
    color: #fff;
}

.bg-red {
    background: #da4040;
    color: #fff;
}

.bg-lred {
    background: #ff4500;
    color: #fff;
}


.bg-green {
    background: #5cb85c;
    color: #fff !important;
}

.bg-green:hover {
    background: #56cc56;
}

.bg-white {
    background: #fff;
}

.bg-gray {
    background: #171616
}

.bg-bluegray {
    background: #131e2b
}

.tipsBg {
    background: url("../images/tabBg.png") no-repeat;
    height: 40px;
    width: 100%;
    background-size: 100% 100%;
}

.layui-bg-yellow {
    background-color: #fdd901 !important;
}

.layui-bg-red {
    background-color: #fa2316 !important;
}

.btn-lblue {
    background: #07b1f3;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;

}

.btn-lblue:hover {
    background: #23c1e2;
}

.btn-blue {
    background: #34acff;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;

}

.btn-green {
    background: #5cb85c;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;
}

.btn-green:hover {
    background: #56cc56;
}

.btn-purple {
    background: #474977;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;
}

.btn-purple:hover {
    color: #fff;
}


.big-btn-purple {
    background: #7958c7;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;
}

.btn-purple:hover {
    color: #fff;
}

.btn-orange {
    background: #eca607;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    height: 34px;
    display: inline-block;
}

.btn-orange:hover {
    background: #eeb314;
}

.btn-blue:focus, .btn-blue:hover {
    background: #30c6f3;
    color: #fff;
}

.bd-b {
    border-bottom: 1px solid #666;
}

.bd-red {
    border: 1px solid #ff123e;
}


.bd-green {
    border: 1px solid #5effca;
}

.bg-lgreen{
    background: #5effca;
}
.btn-cyan {
    border: 1px solid #35ddff;
    background: #0c4554;
    color: #fff
}

.bd-white {
    border: 1px solid #fff;
}

.bd-r {
    border-right: 4px solid #555;
}

.bd-t {
    border-top: 1px solid #666;
}

.vertal-m {
    vertical-align: middle;
}

.relative {
    position: relative;
}

.bd-none {
    border: 0;
}

.bg-none {
    background: 0 !important;
}


.big-bdradius {
    border-radius: 100%;
}

.bdradius-none {
    border-radius: 0;
}

.bdradius-5 {
    border-radius: 5px;
}

.bdradius-3 {
    border-radius: 3px;
}

.bdl-3 {
    border-left: 4px solid #009688;
}

.box-shadow {
    box-shadow: 0 0 5px #ddd;
}

.font-weight {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}

.linkBtn {
    cursor: pointer;
}

.linkTip {
    border: 1px solid #00def6;
    padding: 0 3px;
    background: #045a42;
    font-weight: bold;

}

.lineTips {
    position: absolute;
    top: 50%;
    left: 0;
    background: #171616;
    transform: translateY(-50%);
    padding-right: 10px;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}


.dataTitle {
    padding: 10px;
    background: linear-gradient(to right, #9a9def, #4a4b71, #2d2e3e);
    width: 250px;
    font-weight: bold
}

.header-title {
    padding: 15px 20px;
    border-bottom: 5px solid #333;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/*.layui-form input{padding-right: 30px;}*/

.form-control-static {
    color: #fff;
    font-size: 14px;
}

.contentList a {
    cursor: pointer;
    color: inherit;
    font-size: 16px;
}

.form-horizontal a:hover {
    color: #fff;
}

.form-control-btn {
    padding: 4px 15px;
}

.form-control-tip {
    padding: 7px 5px;
}

.form-input {
    margin-bottom: 10px;
}

.form-input input {
    width: 200px;
}

.form-input span {
    width: 150px;
    color: #333;
    float: left;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
}

.form-input i {
    font-size: 14px;
    color: #333;
}

.form-input label {
    width: 150px;
    color: #333;
    float: left;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
    padding: 5px 0;
}

.web-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    height: 40px;
    border-top: 1px solid #000;
}

.web-footer > div {
    border-top: 1px solid #fff;
}

.web-footer a:hover {
    color: #ff0000;
}

.companyLogo {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.has-error .control-label {
    color: #fff !important;
}

.control-label {
    color: #fff;
}

option:hover {
    background-color: #ff0000;
}

#map {
    position: fixed;
    width: 90%;
    height: 90%;
    background-size: 100% 100%;
    border: 3px solid grey;
    background-image: url(../images/map.jpg);
    left: 50%;
    transform: translateX(-50%);
    top: 60px;
}

.cardContent {
    width: 80%;
    border: 1px solid #ddd;
    margin: 30px auto;
    background: #3a3939;
}

.cardContent .cardTitle {
    background: #5f5f5f;
}



.popoverWindow.moveTop {
    opacity: 0.8;
    animation: moveTop 0.5s forwards;
    transform: translateY(5000px) scale(0.5);

}

@keyframes moveTop {
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;

    }
}

.popoverTitle {
    position: relative;
    background: #666;
    padding: 10px;
    cursor: move;
}

.popContent ul li {
    float: left;
    width: 20%;
    text-align: center
}

.popContent ul li:nth-of-type(1) div span {
    width: 60px;
    height: 60px;
    background: #4f94d0;
    border-radius: 10px;
}

.popContent ul li:nth-of-type(2) div span {
    width: 60px;
    height: 60px;
    background: #4CAF50;
    border-radius: 10px;
}

.popContent ul li:nth-of-type(3) div span {
    width: 60px;
    height: 60px;
    background: linear-gradient(#1f756d, #84e4d7);
    border-radius: 10px;
}

.popContent .title div {
    float: left;
    line-height: 20px;
    margin-right: 10px;
}

.popContent .title div span {
    font-size: 24px !important;
}

.popContent .title p {
    float: left;
    line-height: 20px;
}

.closeBtn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: #fff;
    font-size: 26px !important;
    cursor: pointer;
}

.chartBg {
    background: url(../images/circle_bg.png) 50% 50% / auto 75% no-repeat;
}

.equipContent {
    position: relative;
    height: 20%;
    background: #232323;
}

.equipContent .num {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 100%;
    text-align: center;
    width: 22px;
    height: 22px;
    line-height: 22px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    z-index: 100
}

.equipContent .equipImg {
    background: url(../images/equip.png) no-repeat;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    width: 50px;
    height: 50px;
}

.equipContent .dataContent {
    position: absolute;
    top: 80px;
    left: 20%;
    width: 100%;
}

.contentList ul .sensorLi {
    float: left;
    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px;
}

.contentList ul li span {
    width: 150px;
    color: #333;
    float: left;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
}

/*.contentList .list em {*/
/*    font-size: 14px;*/
/*}*/

.contentList .list .status i.run {
    background: #00ff08;
}

.contentList .list .status i.stop {
    background: #f53434;
}

.contentList .list .status i.await {
    background: #ffd400;
}

@keyframes mymove {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.2);
    }

}

.contentList .list {
    position: relative;
}

.contentList .list h3 {
    color: #fff;
    font-size: 18px;
    padding: 10px;
    background: linear-gradient(to right, #2f8eab, #0e1c42, #020f3c);
    width: 400px;
}

.contentList ul li i {
    font-size: 14px;
    color: #333;
}

.contentList ul li span label {
    font-size: 14px;
    padding: 5px 0;
}

.contentList ul li i {
    float: left;
}

.contentList ul .sensorLi ul {
    border: 1px solid #eee;
    box-shadow: 0 0 10px #eee;
}

.contentList ul .sensorLi ul li {
    margin-bottom: 8px;
}

.contentList .form-group {
    margin-bottom: 0;
}

.contentList .control-label {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
}

@media screen and (max-width: 769px) {
    .contentList ul .sensorLi {
        width: 100%;
    }
}

/*树形折叠start*/
.treeView {
    background: #1a1a1a;
    color: #fff;
    height: 100%;
    position: fixed;
    left: 0;
    width: 150px;
    top: 50px;
}

.treeView a {
    color: #ddd;
    display: block;
    padding: 5px;
}

.treeView a:hover {
    color: #1E9FFF;
}

.treeView .outsideUl {
    display: none;
    padding: 0 20px;
}

.treeView .outside > a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.treeView .outsideUl li.active a {
    color: #1E9FFF;
}

.treeView .outside > a.active {
    background: rgba(255, 255, 255, 0.2);
}

/*树形折叠end*/

/*替换插件自带样式*/
.layui-layer .layui-layer-title {
    background: #183973;
    color: #fff;
    font-size: 18px;
}

.modal-footer .btn-danger {
    background: #da4040;
}

.modal-footer .btn-danger:hover {
    opacity: 0.9;
    filter: opacity(90%);
    background: #da4040;
    border: 1px solid #da4040;
}

.form-group.has-feedback {
    padding: 5px;
}

.layui-layer-btn .layui-layer-btn0 {
    background-color: #2262d2 !important;
    color: #fff;
    border-color: #2262d2 !important;
    font-size: 18px;
}

.layui-layer-page .layui-layer-setwin {
    padding: 3px;
    background: #00b3fd;
}

.layui-layer-setwin:hover {
    background: #14cbfd;
}

.layui-layer-setwin .layui-layer-close1 {
    background: url(../images/close.png) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 100%;
    background-position: inherit !important;
}

.layui-layer-setwin .layui-layer-close1:hover {
    opacity: inherit !important;
}

.main_headertip {
    height: 32px;
    line-height: 32px;
    background: linear-gradient(to right, #0031a1, #020f3c, #0031a1);
    width: 100%;
    /*box-shadow: 0px 10px 0px 0px #eede15;*/
}


.sidebar-menu {
    border: 1px solid #00b3fd;
    background: rgb(22 138 193 / 0.1);
    padding: 5px 3px;
    height: initial;
    box-shadow: 0 0 5px #1be2f7 inset;
}

.sidebar-menu li {
    padding: 0;
    background: #020f3c;
}

.sidebar-menu li a {
    border-bottom: 1px solid #0363a7;
    color: #fff !important;
}

.sidebar-menu li:last-child a {
    border-bottom: none;
}

.sidebar-menu li a span {
    font-size: 16px;
    font-weight: 600;
}

.sidebar-menu li.active a {
    color: #fff !important;
    border-bottom: 1px transparent solid;
    border: 0;
    background: #00b3fd !important;

}

.sidebar-menu li.active a span {
    font-weight: bold;
}

.sidebar-menu li.active a:focus, .sidebar-menu li.active a:hover {
    color: #fff !important;
}

.sidebar-menu li.active a:focus, .sidebar-menu li.active a:hover {
    color: #fff !important;
}

.layui-side.offside {
    animation: left 0.5s forwards;
    -webkit-animation: left 0.5s forwards; /*Safari and Chrome*/
}

.layui-side.openside {
    animation: right 0.5s forwards;
    -webkit-animation: right 0.5s forwards; /*Safari and Chrome*/
}

@keyframes left {
    from {
        left: 5px;
    }
    to {
        left: -135px;
    }
}

@-webkit-keyframes left /*Safari and Chrome*/
{
    from {
        left: 5px;
    }
    to {
        left: -135px;
    }
}

@keyframes right {
    from {
        left: -135px;
    }
    to {
        left: 5px;
    }
}

@-webkit-keyframes right /*Safari and Chrome*/
{
    from {
        left: -135px;
    }
    to {
        left: 5px;
    }
}


.bdLine {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/line.png) no-repeat;
    height: 2px;

}


.sidebar-menu ul li a:focus, .sidebar-menu ul li a:hover {
    color: #00def6 !important;
}

.form-control[disabled] {
    color: #fff;
    background-color: #999;
}


.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
    border-radius: 0 !important;
}

a.text-info:focus, a.text-info:hover {
    color: #03a3d4
}

.noborder.table > tbody > tr > td, .noborder.table > thead > tr > th, .noborder.table > tbody > tr > th, .noborder.table > tfoot > tr > td, .noborder.table > tfoot > tr > th, .noborder.table > thead > tr > td, .noborder.table > tbody > tr > td, .noborder.table > tbody > tr > th, .noborder.table > tfoot > tr > td, .noborder.table > tfoot > tr > th, .noborder.table > thead > tr > td, .noborder.tablethead > tr > th {
    border: 0;
    text-align: center;
    color: #fff;
    padding: 3px;
}

> thead > tr > th {
    border: 0;
}

table {
    word-wrap: break-word;
    word-break: break-all;
    table-layout: fixed;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 5px;
}

.table tbody tr:nth-child(even) {
    background: #373848;

}

.table th, .table td {
    vertical-align: middle !important;
    text-align: center;
    border: 1px solid #404c56 !important;

}

.table th {
    color: #13c8ff !important;
    font-size: 16px;
    background: #3c3e5ffc;
}

.table td {
    font-size: 14px;
}

.table-bd-none th, .table-bd-none td {
    border-top: 0 !important;
    color: #fff;
}

table a {
    display: block;
    cursor: pointer;
}

.enterinfoInput {
    width: 100%;
    background: 0 !important;
    border: 1px solid #719ca2 !important;
    height: inherit;
}

.sidebar-menu .main-menu ul {
    padding: 5px 2px;
}

.sidebar-menu .main-menu ul li a {
    padding: 8px 0;

}

.sidebar-menu .main-menu ul li a span {
    font-weight: bold;
    font-size: 16px;
}

.sidebar-menu .main-menu ul li a .submenu-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.main-container {
    margin-bottom: 20px;
}

.top-nav .nav-header .brand {
    text-align: left;
}

.top-nav .nav-container {
    margin-left: 0;
}

.navbar-toggle {
    display: inline-block !important;
}

.top-nav .nav-container {
    display: inline-block !important;
}

.sidebar-menu .main-menu ul li.open > a {
    vertical-align: middle;
    color: #01f7fe;
}

.sidebar-menu .main-menu ul li.bg-palette1:before {
    background-color: #6a9cde;
}

.sidebar-menu .main-menu ul li.bg-palette2:before {
    background-color: #bd82e2;
}

.sidebar-menu .main-menu ul li.bg-palette3:before {
    background-color: #009688;
}

.statistic-box .statistic-title {
    text-transform: initial;
}

.panel {
    border: 0;
    margin: 0;
    background: 0;
}

.panel .panel-heading {
    background: 0;
    border: 0;
    font-size: 16px;
}

.panel .panel-heading p {
    color: #fff;
}

.form-horizontal .form-group {
    margin: 0;
}

/*tab栏*/
.tabUl li {
    padding: 0 10px;
    float: left;
    text-align: center;

}

.tabUl li a {
    width: 100%;
    border-bottom: 2px solid #232323;
    float: left;
    color: #eee;
    padding: 10px;
    font-size: 14px;
    color: #fff;
}

.tabUl li.active a {
    border-bottom: 2px solid #da4040;
    color: #da4040;
    font-weight: bold;
}

/*时间日期切换*/

/*.inputList input{*/
/*background: url(../images/date.png) no-repeat 6px center;*/
/*padding: 10px 10px 10px 30px;*/
/*background-size: 20px 20px;*/
/*}*/
.layui-laydate {
    /*right: 40px;*/
    /*left: initial !important;*/
}

.dateUL ul {
    height: 34px;
    line-height: 32px;
    width: 200px;
    border: 1px solid #2291e3;
}

.dateUL li {
    float: left;
    width: 25%;
}


.dateUL li a {
    float: left;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    border-right: 1px solid #2291e3;
}


.dateUL li.active a {
    background: #2291e3;
    border: 0;
}

.dateUL li:last-child a {
    border: 0;

}

.dateUL li.active a {
    background: #2291e3;
    border: 0;

}


.smdateUL ul {
    height: 34px;
    line-height: 32px;
    width: 150px;
    border: 1px solid #2291e3;
}

.smdateUL li a {
    float: left;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    border-right: 1px solid #2291e3;

}

.smdateUL li:last-child a {
    border: 0;

}

.smdateUL li.active a {
    background: #2291e3;
    border: 0;

}


.smdateUL li {
    float: left;
    width: 33.3%;
}

.smdateUL.twoList li {
    float: left;
    width: 50%;
}


.title-tips {
    width: 4px;
    background: #dd524d;
    border-radius: 4px;
    vertical-align: middle;
    display: inline-block;
    height: 20px;
}

.workContent .bgImg {
    background: url(../images/circle_bg.png) 50% 50% / auto 115% no-repeat;
}

.workContent .workNum {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 50%;
    margin: 10px auto;
    background-image: linear-gradient(#1094ef, #8af0ff);

}

.workContent span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: #232323;
    line-height: 70px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.workContent .workTime {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 50%;
    margin: 10px auto;
    background-image: linear-gradient(#10c355, #8ed393);
}

.videopop {
    background: url(../images/video.png) no-repeat center center;
    position: relative;
    height: 120px;
    background-size: 100% 100%;
    display: block;
}

.video_playbtn {
    position: absolute;
    left: 50%;
    top: 24%;
    transform: translateX(-50%)
}

.video-layout {
    position: relative;
    height: 130px;
}

.video-bgimg {
    background-size: cover;
    height: 130px;
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.videoTitle {
    padding: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.layui-form input {
}

.dataChoose input {
    padding-left: 24px;
    background: #fff url(../images/date.png) no-repeat 0px center;
    cursor: pointer;
    color: #000;
    padding-right: 0px !important;
}

.monthdataChoose input {
    padding-left: 24px;
    background:  url(../images/date.png) no-repeat 0px center;
    cursor: pointer;
    color: #000;
    padding-right: 0px !important;
    height: 34px;
    line-height: 34px;
}
.inputList input {
    padding-left: 30px;
    width: 150px;
    background: url(../images/date.png) no-repeat 5px center;
    cursor: pointer;
    color: #000;
    font: 16px/54px "Microsoft YaHei";

}

.layoutlist li {
    line-height: 30px;

}

.layoutlist li h3 {
    padding: 5px;
    font-weight: 700;
    font-size: 15px;

}

.layoutlist li span {
    font-weight: normal;

}

.layoutlist li .tips {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 2px;
}

.layoutlist .per {
    width: 70px;
    display: inline-block;
    text-align: left;
}


.iframeContent .layui-tree li i {
    color: #dd524d
}

.iframeContent .layui-tree li a i {
    color: #fff;
}

.iframeContent .layui-tree li a {
    color: #fff;
}

.iframeContent .layui-form-label {
    width: auto !important;
    padding: 9px 4px;
}

.iframeContent .layui-input, .layui-select, .layui-textarea {
    height: 34px;
}

.iframeContent .layui-form-item .layui-input-inline {
    width: initial;
}

.iframeContent .layui-form-item .layui-form-select {
    width: 90px;
}

.iframeContent .layui-form-item .big-select .layui-form-select {
    width: inherit;
}

.iframeContent .layui-form-item {
    margin: 0;
}

.iframeContent .layui-btn-danger {
    background: #a72929;
}

.iframeContent .layui-btn-danger:hover {
    background: #dd524d;
    opacity: 1;
}

.iframeContent .layui-table-cell {
    /*overflow: initial;*/
    /*height: initial;*/
}

.iframeContent .layui-table-sort[lay-sort=asc] .layui-table-sort-asc {
    border-bottom-color: #01e2ff;
}

.iframeContent .layui-table-sort[lay-sort=desc] .layui-table-sort-desc {
    border-top-color: #01e2ff;
}

.iframeContent .layui-table tr, .iframeContent .layui-table th {
    text-align: center;
}

.iframeContent .layui-tab-card {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.iframeContent .layui-tab-card .layui-tab-bar {
    background: #000;
    border: 0;
    color: #fff;
}

.iframeContent .layui-tab-card > .layui-tab-title {
    background: 0;
    border: 0;
}

.iframeContent .layui-tab-card > .layui-tab-title .layui-this {
    background: 0;
    margin: 0;
    border-bottom: 2px solid #da4040;
}

.iframeContent .layui-tab-card > .layui-tab-title li {
    border-bottom: 2px solid transparent;
    line-height: 38px;
}

.iframeContent .layui-tab-title .layui-this:after {
    border: 0;
}

.iframeContent .layui-tab-title li a {
    color: #fff;
}

.iframeContent .layui-tab-card > .layui-tab-title .layui-this a {
    color: #da4040;
    font-weight: bold;
    width: 100%;
}

.iframeContent .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #2262d2;
}

.iframeContent .layui-laypage a, .layui-laypage span {
    color: #fff;
}

.iframeContent .layui-laypage a:hover {
    color: #01e0ff;
}

.iframeContent .layui-table-page .layui-laypage .layui-input {
    color: #333;
}

.iframeContent .layui-table-page .layui-laypage .layui-laypage-count, .iframeContent .layui-table-page .layui-laypage .layui-laypage-skip {
    color: #fff;
}

.iframeContent .layui-laypage button.layui-laypage-btn {
    background-color: #2262d2;
    color: #fff;
    border: 0;
}

.iframeContent .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
    background: none !important;
    /*border: 1px solid #333 !important;*/
}

.iframeContent .layui-table tr td {
    background: #373848;
    border: 1px solid #404c56 !important;
    color: #fff
}

.iframeContent .layui-table tr:nth-child(odd) td {
    background: 0;
}

.iframeContent .layui-table-header {
    border-color: #333;
    background: #3e4061;
}

.iframeContent .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    /*border-color:#ccc !important;*/
}

.iframeContent .layui-table-view .layui-table th {
    background-color: #3c3e5ffc !important;
    border: 1px solid #404c56 !important;
    color: #5de9ff;
    font-size: 16px;
    font-weight: bold;
}

.iframeContent .layui-table-tool .layui-inline[lay-event] {
    border: 0;
}

.iframeContent .layui-table-tool .layui-inline[lay-event]:hover {
    border: 0;

}

.iframeContent .layui-table-page {
    background: #1c233c;
}

.iframeContent .layui-table-body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    background: #9da4ab;
}

.iframeContent .layui-table-body::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 0;
    background: #000;
}

.layui-laydate-header i:hover, .layui-laydate-header span:hover {
    color: #2291e3 !important;
}

.iframeContent .layui-input, .layui-select, .layui-textarea {
    /*border-radius: 4px;*/
}

.layui-table-tool-panel {
    display: none;
}

/*弹性布局 */
.flex {
    display: -webkit-flex;
    -webkit-flex-direction: row;

    display: flex;
    flex-direction: row;
}

.item1 {
    -webkit-flex: 1;
    flex: 1;
}

.item2 {
    -webkit-flex: 1;
    flex: 2;
}

/*定位居中*/
.middle {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.rightPosition {
    position: absolute;
    right: 12px;
    top: 12px;
}


.leftPosition {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

}

.centerPosition {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1;

}

.small_leftPosition {
    position: absolute;
    left: 150px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

}

.bottomPosition {
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#loading {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 15%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.form-input label.upImgBtn {
    text-align: center;
    color: #fff;
    float: initial;
    width: initial;
    padding: 6px 12px;
}

/*iframe内页*/
.iframeContent {
    /*height: 100%;*/
    /*padding: 0 5px;*/
}

.footerContainer {
    border-top: 3px solid #333;
    padding: 10px 15px;
    color: #fff;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, .05);
    transition: left .5s ease;
    -webkit-transition: left .5s ease;
    -moz-transition: left .5s ease;
    -ms-transition: left .5s ease;
    -o-transition: left .5s ease;

}

#waitDialog {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}

#waitDialog img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 250px;
}

.font-m {
    font-size: medium;
    font-weight: normal;
}

.fontStyle {
    color: #fff;
    font-size: medium;
    padding: 8px;
    line-height: 1.4;
}

.p-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
}

.border-none {
    border: none;
}

.layui-form-select .layui-input {
    font-size: 14px;
    color: #fff;
    border: 1px solid #0491e6;
    background: 0;
}

.layui-form .layui-form-checkbox[lay-skin=primary] span {
    height: auto;
    color: #fff;
}

.selectBox {
    width: 180px;
    padding: 0 12px;
    color: #fff;
    /*background: #242638;*/
    height: 34px;
    line-height: 34px;
    border: 1px solid #2291e3;
    cursor: pointer;
    position: relative;
}

.selectBox i {
    position: absolute;
    right: 10px;
    margin-top: -1px;
    color: #00f3ff;
    font-size: 16px;
    transition: all 0.3s
}

.selectBox i.selectRotate {
    transform: rotate(180deg);
    top: 1px;
}

.selectList li {
    padding: 12px 10px;
    color: #000;
    width: 180px;
    cursor: pointer;
    font-size: 16px;

}

.selectBox span {
    font-size: 16px;

}

.selectList li.active {
    background: #0f98d4;
    color: #fff;
}

select[multiple] + .layui-form-select > .layui-select-title > input.layui-input {
    border-bottom: 0
}

select[multiple] + .layui-form-select dd {
    padding: 0;
}

select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] {
    margin: 0 !important;
    display: block;
    line-height: 36px !important;
    position: relative;
    padding-left: 26px;
}

select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] span {
    line-height: 36px !important;
    padding-left: 10px;
    float: none;
}

select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] i {
    position: absolute;
    left: 10px;
    top: 0;
    margin-top: 9px;
}

.multiSelect {
    height: 34px;
    padding: 4px 10px;
    overflow: hidden;
    margin-top: -34px;
    left: 0;
    z-index: 99;
    position: relative;
    background: none;
    border: 0 !important;
}

.multiSelect a {
    padding: 2px 5px;
    background: #908e8e;
    border-radius: 2px;
    color: #fff;
    display: block;
    margin: 2px 5px 2px 0;
    float: left;
}

.multiSelect a:hover {
    color: #fff;
}

.multiSelect a span {
    float: left;
}

.multiSelect a i {
    float: left;
    display: block;
    margin: 2px 0 0 2px;
    border-radius: 2px;
    width: 16px;
    height: 16px;
    padding: 4px;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s
}

.multiSelect a i:before, .multiSelect a i:after {
    position: absolute;
    left: 8px;
    top: 2px;
    content: '';
    height: 12px;
    width: 1px;
    background-color: #fff
}

.multiSelect a i:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.multiSelect a i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.multiSelect a i:hover {
    background-color: #545556;
}

.multiOption {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer;
    color: #666;
}

.multiOption:hover {
    color: #dd524d
}

.loadingBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    background: #020f3c;
}

.loadingImg {
    background: url(../images/blue_loading.gif) no-repeat;
    width: 500px;
    background-size: 100% auto;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loadingText {
    color: #fff;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*.ddd{*/
/*    width: 100px;*/

/*    height: 100px;*/

/*    border:2px solid #ddd;*/

/*    border-image: linear-gradient(#2d5f7f, #41f5ff) 2 2;*/


/*}*/


/* 下面是页面内样式，无需引用 */
.layui-block {
    margin-bottom: 10px;
}

.layui-form-label {
    width: 180px;
}

.unshow > #result {
    display: none;
}

pre {
    padding: 5px;
    margin: 5px;
}

/*流动边框模板1*/
.runbdContent, .runLine {
    position: relative;
    overflow: hidden;
}

.runbdContent:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    z-index: 3;
    /*background: #1b756d url(../images/runbd_top.png);*/
    background: linear-gradient(to right, #06112f, #01f7fe);
    animation: out-right linear 6s infinite;
    background-repeat: no-repeat;

    /*background-size: contain;*/
}

.runbdContent:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    z-index: 3;
    /*background: #1b756d url(../images/runbd_bottom.png);*/
    background: linear-gradient(to left, #06112f, #01f7fe);
    animation: out-left linear 6s infinite;


    /*background-size: contain;*/
}

@-webkit-keyframes out-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes out-left {
    from {
        transform: translateX(100%);
    }
    to {

        transform: translateX(0);
    }
}

.runLine:before {
    content: "";
    position: absolute;
    height: 200%;
    width: 1px;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    z-index: 3;
    /*background:#1b756d url(../images/runbd_right.png);*/
    background: linear-gradient(to bottom, #06112f, #01f7fe);
    animation: out-down linear 12s infinite;


}

.runLine:after {
    content: "";
    position: absolute;
    height: 200%;
    width: 1px;
    left: 0;
    top: 0;
    z-index: 3;
    transform: translateY(-50%);
    /*background:#1b756d url(../images/runbd_left.png);*/
    background: linear-gradient(to top, #06112f, #01f7fe);


    animation: out-up linear 12s infinite;

}

@-webkit-keyframes out-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes out-up {
    from {
        transform: translateY(50%);
    }
    to {
        transform: translateY(-50%);
    }
}


/*流动边框模板2*/
/*.runbdContent,.runLine {*/
/*    position:relative;*/
/*    overflow:hidden;*/
/*}*/
/*.runbdContent:before {*/
/*    content:"";*/
/*    position:absolute;*/
/*    width:200%;*/
/*    height:6px;*/
/*    top:0;*/
/*    transform:translateX(-100%);*/
/*    z-index:3;*/
/*    background: #1b756d url(../images/runbd_top.png);*/
/*    animation:out-right linear 0.01s infinite;*/
/*    background-size: contain;*/
/*}*/
/*.runbdContent:after {*/
/*    content:"";*/
/*    position:absolute;*/
/*    width:200%;*/
/*    height:6px;*/
/*    bottom:0;*/
/*    z-index:3;*/
/*    background: #1b756d url(../images/runbd_bottom.png);*/
/*    animation:out-left linear 0.01s infinite;*/
/*    background-size: contain;*/
/*}*/
/*@-webkit-keyframes out-right {*/
/*    from {*/
/*        transform:translateX(0);*/
/*    }*/
/*    to {*/
/*        transform:translateX(-50%);*/
/*    }*/
/*}*/
/*@-webkit-keyframes out-left {*/
/*    from {*/
/*        transform:translateX(-50%);*/
/*    }*/
/*    to {*/
/*        transform:translateX(0);*/
/*    }*/
/*}*/
/*.runLine:before {*/
/*    content:"";*/
/*    position:absolute;*/
/*    height:200%;*/
/*    width:6px;*/
/*    right:0;*/
/*    top:0;*/
/*    transform:translateY(-50%);*/
/*    z-index:3;*/
/*    background:#1b756d url(../images/runbd_right.png);*/
/*    animation:out-down linear 0.01s infinite;*/
/*    background-size: contain;*/
/*}*/
/*.runLine:after {*/
/*    content:"";*/
/*    position:absolute;*/
/*    height:200%;*/
/*    width:6px;*/
/*    left:0;*/
/*    top:0;*/
/*    z-index:3;*/
/*    background:#1b756d url(../images/runbd_left.png);*/
/*    animation:out-up linear 0.01s infinite;*/
/*    background-size: contain;*/
/*}*/
/*@-webkit-keyframes out-down {*/
/*    from {*/
/*        transform:translateY(0);*/
/*    }*/
/*    to {*/
/*        transform:translateY(-50%);*/
/*    }*/
/*}@-webkit-keyframes out-up {*/
/*     from {*/
/*         transform:translateY(-50%);*/
/*     }*/
/*     to {*/
/*         transform:translateY(0);*/
/*     }*/
/* }*/


/*边框滚动3*/
.around {
    position: relative;
    width: 100%;
    z-index: 0;
}

.around::before, .around::after {
    content: '';
    position: absolute;
    border-style: solid;
    animation: move 1s linear infinite;
    opacity: 1;
}

.around::after {
    animation-delay: -2.5s;
}

@keyframes move {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-width: 2px 0 0 0;
        /*border-color: #42f6ff #2d5f7f;*/
        border-color: #fa2316;
    }
    25% {
        top: 0;
        left: 100%;
        width: 0;
        height: 100%;
        border-width: 0 2px 0 0;
        border-color: #fa2316;

    }
    50% {
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        border-width: 0 0 2px 0;
        border-color: #fa2316;
    }
    75% {
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-width: 0 0 0 2px;
        border-color: #fa2316;

    }
    100% {

        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        border-width: 2px 0 0 0;
        border-color: #fa2316;


    }
}

/*@keyframes move{*/
/*    0%{*/
/*        top:0;*/
/*        left:0;*/
/*        width: 100%;*/
/*        height:0;*/
/*        border-width:2px 0 0 0;*/
/*        border-color: #fa2316;*/
/*    }*/
/*    25%{*/
/*        bottom:0;*/
/*        right:0;*/
/*        width:0;*/
/*        height:100%;*/
/*        border-width:0 2px 0 0;*/
/*        border-color: rgba(66, 249, 255, 0.9);*/
/*    }*/
/*    50%{*/
/*        bottom:0;*/
/*        left:0;*/
/*        width: 100%;*/
/*        height:0;*/
/*        border-width:0 0 2px 0;*/
/*        border-color: rgb(250, 87, 14);*/
/*    }*/
/*    75%{*/
/*        top:0;*/
/*        left:0;*/
/*        width: 0;*/
/*        height: 100%;*/
/*        border-width:0 0 0 2px;*/
/*        border-color: rgb(66, 246, 255);*/
/*    }*/
/*    100%{*/
/*        top:0;*/
/*        left:0;*/
/*        width: 100%;*/
/*        height:0;*/
/*        border-width:2px 0 0 0;*/
/*        border-color: rgb(255, 244, 33);*/
/*    }*/
/*}*/

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.01% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.01% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.01% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    50.01% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* 定义blink类*/
.blink {
    animation: blink .75s linear infinite;
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    color: #fff;
}


#canvasBar {
    position: fixed;
    top: 40%;
    width: 60%;
    height: 3px;
    z-index: 9999;
    transform: translateX(-50%);
    left: 50%;
}

.count-particles {
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.js-count-particles {
    font-size: 1.1em;
}

#stats,
.count-particles {
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}


.loginLeftBg {
    background: url(../images/loginLeftBg.png) no-repeat;
    width: 650px;
    height: 500px;
    position: absolute;
    background-size: 100% auto;
    right: 45%;
    top: 25%;
    /*-webkit-animation-name: scaleDraw; !*关键帧名称*!*/
    /*-webkit-animation-timing-function: ease-in-out; !*动画的速度曲线*!*/
    /*-webkit-animation-iteration-count: infinite;  !*动画播放的次数*!*/
    /*-webkit-animation-duration: 10s; !*动画所花费的时间*!*/
}


/*@keyframes scaleDraw {*/
/*      0%{*/
/*          transform: scale(0.9);  !*开始为原始大小*!*/
/*      }*/
/*      50%{*/
/*          transform: scale(1.1);*/
/*      }*/
/*      100%{*/
/*          transform: scale(1);*/
/*      }*/
/*  }*/


.tabContent ul li {
    float: left;
    padding: 0 5px;
    position: relative;
}

.tabContent ul li a {
    color: #fff;
    width: 100px;
    line-height: 40px;
    float: left;
    text-align: center;
    height: 40px;

}

.tabContent ul li a.active {
    background: url(../images/tabBg.png) no-repeat;


}

.tabContent ul li i {
    position: absolute;
    right: -10px;
    top: 10px;
    color: #00def6;
    font-size: 20px;
}

.tabBodyLi .sm_li {
    width: 10%;
    float: left;
}

.tabBodyLi .sm_li .productList {
    height: 16%;
}

.smtabBodyContent .sm_li {
    width: 20%;
}

@media (max-width: 992px) {
    .tabBodyLi .sm_li {
        width: 16.6%;
    }

    .smtabBodyContent .sm_li {
        width: 20%;
    }
}

@media (max-width: 1199px) {
    .tabBodyLi .sm_li {
        width: 14.28%;
    }

    .smtabBodyContent .sm_li {
        width: 25%;
    }
}

/*.smallTip {*/
/*    height: 18px;*/
/*    width: 5px;*/
/*    background: #00ffe7;*/
/*    display: inline-block;*/
/*    margin-right: 5px;*/
/*    vertical-align: middle;*/
/*}*/
.smallTip {
    height: 40px;
    width: 130px;
    background: url(../images/smTitle.png) no-repeat;
    background-size: 100% 100%;
}


.smallTip span {
    line-height: 41px;
    color: #fff;
    padding-left: 20px;
    font-size: 16px;
}

.titleTip {
    height: 36px;
    width: 200px;
    background: url(../images/title.png) no-repeat;
    background-size: 100% 100%;
}


.titleTip span {
    line-height: 36px;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
    font-size: 16px;
}


.leftTop {
    border-top: 2px solid #23f2ff;
    border-left: 2px solid #23f2ff;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -1px;
    top: -1px;
}

.rightTop {
    border-top: 2px solid #23f2ff;
    border-right: 2px solid #23f2ff;
    height: 20px;
    width: 20px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.rightBottom {
    border-bottom: 2px solid #23f2ff;
    border-right: 2px solid #23f2ff;
    height: 20px;
    width: 20px;
    position: absolute;
    right: -1px;
    bottom: -1px;
}

.leftBottom {
    border-bottom: 2px solid #23f2ff;
    border-left: 2px solid #23f2ff;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -1px;
    bottom: -1px;
}

.smallTitle {
    position: absolute;
    top: 50%;
    left: 5px;
    background: #0e1c42;
    margin-top: -8px;
    color: #fff;
    font-size: 16px;
    padding: 0 10px 0 0;
}

@media (max-width: 992px) {
    .indexContent .layout-left {
        width: 100%;
        position: fixed;
        bottom: 0;
        top: inherit;
        left: 0;
    }

    .indexContent .layout-left ul li {
        width: 25%;
        float: left;
    }

    .indexContent .layout-right {
        margin-left: 0px;
    }

    .layout-right ul li {
        width: 33.3%;
        margin-bottom: 20px;
    }

    .web-footer {
        display: none;
    }
}

.line_circle_bg .num {
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 50%;
    margin: 10px auto;
    background: #ffe634;

}

.line_circle_bg span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: #333;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 40px;
}

.smallTipEnergy ul li {
    display: inline-block;
    margin-right: 10px;
    font-size: 16px;
}

.smallTipEnergy em {
    width: 25px;
    height: 15px;
    border-radius: 3px;
    display: inline-block
}

.smallTipEnergy em.bg-red {
    background: #f44646;
}

.smallTipEnergy em.bg-orange {
    background: #f2ab1d;
}

.smallTipEnergy em.bg-blue {
    background: #88c2f3;
}


.smallTipEnergy table th {
    padding: 0.2rem 0.2rem;
    font-size: 15px;
}

.smallTipEnergy table tr td {
    padding: 8px 0 0 0;
}

.smallTipEnergy table tr:last-child td {
    padding-bottom: 10px;
}

.smallTipEnergy table td font {
    font-size: 17px;
    font-weight: bold;

}

.smallTipEnergy table tbody {
    padding: 0.5rem
}

.smallTipEnergy table tbody tr {
    background: rgb(255 255 255 / 0.1);
}

.amateLine {
    background: url("../images/head.gif") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 10px;
}

.runBox {
    height: 150px;
}

.layui-layer-shade {
    display: none;
}

.layui-layer-shade:nth-of-type(1) {
    display: block;
}

.dianhanji {
    background: url("../images/dianhanji.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 55%;
}

.suidaolu {
    background: url("../images/suidaolu.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 50%;
}

.mobianji {
    background: url("../images/mobianji.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 45%;
}

.xpmobianji {
    background: url("../images/xpmobianji.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 60%;
}

.zuankongji {
    background: url("../images/zuankongji.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 40%;
}

.sdzuankongji {
    background: url("../images/sdzuankongji.png") no-repeat;
    background-size: 100% 100%;
    height: 50%;
    width: 60%;
}

.icon {
    width: 5rem;
    height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;

}


@media screen and (max-width: 980px) {
    .runtimeNum {font-size: 14px;}
    .popoverWindow {
        position: fixed;
        left: 50%;
        background: #171616;
        width: 90%;
        height: 70%;
        transform: translateY(5000px);
        top: 120px;
        margin-left: -45%;
    }
    .exitLogin{display: block}

}
@media screen and (min-width: 981px) {
    .runtimeNum {font-size: 16px;}
    .popoverWindow {
        position: fixed;
        left: 50%;
        background: #171616;
        width: 60%;
        height: 70%;
        transform: translateY(5000px);
        top: 120px;
        margin-left: -30%;
    }
    .exitLogin{display: none}

}