html,body{
    width: 100%;
    margin: 0;
    padding: 0;
    /* min-height: 900px; */
    /*background: #0a112d;*/
    background-size: cover;
    background: url("../../../statics/img/bigdata/total-bg.png") center top;
    overflow: hidden;
}
html{
    font-size: 95px;
    background: #F2F2F2;
}
ul,h1,h2,h3,h4,h5,h6,p{
    /*list-style: 0;*/
    padding: 0;
    margin: 0;
}
.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 16px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}
.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #aaa;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
    z-index:999999999;
}

.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}
.BMap_cpyCtrl {
    display:none;
}
/** 头部 **/
.head {
    height: 9.5%;
    background: url(../../../statics/img/bigdata/bgTop.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
    margin-bottom: 0.5%;
}
.head h1 {
    text-align: center;
    font-size: 1.8vw;
    line-height: 1.05rem;
    font-weight: bold;
}
.head h1{
    color: #fff;
}
.toIndex{
    position: absolute;
    right: 50px;
    top: 750px;
}
.toIndex a{
    color: #399bff;
    font-size: 20px;
}
.toIndex a:hover{
    color: #fff;
}
header{
    height: 9%;
    position: relative;
}
.rightDate{
    position: absolute;
    right: 50px;
    top: 50%;
    color: #cdf6f6;
    font-size: 16px;
    font-style: italic;
}
.ydLog{
    position: fixed;
    right: 50px;
    top: 1%;
    color: #cdf6f6;
    font-size: 16px;
    font-style: italic;
    z-index: 9999999;
}
.ydLog img{
    width: 30px;
}
.head > #topImg{
    width: 110px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    left: 20px;
    z-index: 9999999;
}
#off{
    margin-left: 95px;
    margin-top: 130px;
    cursor: pointer;
}
.header_right{
    position: fixed;
    margin: 15px 30px;
    top: 0px;
    left: -318px;
    height: 110%;
    width: 318px;
    background-image: url("../../img/bigdata/leftBg.png");
    z-index: 9999998;
    transition: 1s;
}
#gif{
    width: 100px;
}
.right_text{
    position: absolute;
    right: 40px;
    top: 25%;
    width: 180px;
}
.right_text li{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid rgba(0,0,0,.3);
}
.right_text li a{
    color: #5c93d9 ;
    font-size: 18px;
    width: 100%;
    height: 100%;
    display: block;
}
.right_text li:hover{
    box-shadow: 0px 3px 5px 0 #000;
}
.right_text li:hover a{
    color: #fff !important;
    font-size: 20px;
}
.right_text li:nth-child(2){
    font-size: 20px;
    box-shadow: 0px 3px 5px 0 #000;
}
.right_text li:nth-child(2) a{
    color: #fff !important;
}

.clearfix{
    clear: both;
}

a{
    text-decoration: none;
}
.header_btn{
  display: flex;
}
.header_btn a{
    flex-grow: 1;
    margin-left: 3%;
}

/*正文*/
.t_container{
    width: 100%;
    height:90%;
    min-width: 1360px;
    padding: 0 20px;
}
.t_header{
    width: 100%;
    height: 130px;
    background: url('../../img/bigdata/linx.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 27px;
}
.t_header h1{
    color: #fff;
    font-size:40px;
    position: absolute;
    top: 50%;
    margin-top: -0.24rem;
    left: 7%;
    font-weight: bold;
    margin-left: -1.5%;
}
.t_main-left{
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.t_left_box{
    position: relative;
    width: 100%;
    height: 33%;
    text-align: center;
    background: #13204c;
    overflow: hidden;
    margin-bottom: 10px;
}
.t_left_box:nth-child(1){
    height: 15%;
}
.t_left_box:nth-child(2){
    height: 44%;
}
.t_left_box:nth-child(3){
    height: 26%;
}
.t_left_box:nth-child(4){
    height: 29%;
}
.eqList{
    position: absolute;
    top: -30px;
    left: 5%;
    z-index: 101;
    display: none;
}
.eqList > text{
    color: white;
    font-size: 16px;
    position: absolute;
    top: 35px;
    left: -65px;
    font-weight: bold;
}
.eqList > div{
    color: #0c9bff;
    border: 1px solid #0c9bff;
    border-radius: 3px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    background: #ffffff30;
    float: left;
    margin-right: 5px;
    padding: 3px 5px;
}
/*.eqList > div:nth-child(1){*/
/*    color: #fff;*/
/*    background: #0c9bff;*/
/*}*/
.thisEq{
    color: #fff!important;
    background: #0c9bff!important;
}
.eqList > div:hover{
    color: #fff;
    background: #0c9bff;
}
.page2{
    display: none;
}
.equipment_list{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.equipment_list>div{
    width: 28%;
    border: 1px solid #677f87;
    height: 80%;
    color: #fff;
    font-size: .8vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 2px;
    box-sizing: border-box;
    position: relative;
}
.equipment_list>div:after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #C9C5C5;
    border-top: 2px solid #C9C5C5;
    position:absolute;
    top: -1px;
    left: -1px;
}
.equipment_list>div:before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #C9C5C5;
    border-bottom: 2px solid #C9C5C5;
    position:absolute;
    bottom: -1px;
    right: -1px;
}
.equipment_list>div>p{
    font-size: 1.5vw;
    color: #f5f91c;
    font-weight: bold;
}
.weather_echarts{
    display: none;
}
.midde-right-box{
    width: 50%;
    height: 100%;
}
.midde-right-content{
    width: 100%;
    height: 76%;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
}
#all{
    position: absolute;
    right: 50px;
    top: 50px;
    width: 25px;
    height: 20px;
    cursor: pointer;
}
.town_name{
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
    -moz-user-select: none; /*Foxfire */
    -ms-user-select: none; /*Internet Explorer/ Edge*/
    -o-user-select: none; /*Opear老版本*/
    -khtml-user-select: none; /* Konqueror */
    -webkit-touch-callout: none; /* iOS Safari */
    user-select: none;
}
.town_name > div{
    position: absolute;
    color: #fff;
    cursor:pointer;
}
.town_name div > img{
    height: 25px;
    width: 25px;
}
.town_name > div >span:hover{
    color: #e5cd0f;
}
.town_name > div:nth-child(1){
    top: 46%;
    left: 43%;
}
.town_name >div:nth-child(2){
    top: 32%;
    left: 63%;
}
.town_name >div:nth-child(3){
    top: 45%;
    left: 13%;
}
.town_name >div:nth-child(4){
    top: 38%;
    left: 18%;
}
.town_name >div:nth-child(5){
    top: 48%;
    left: 24%;
}
.town_name >div:nth-child(6){
    top: 58%;
    left: 26%;
}

.town_name >div:nth-child(7){
    top: 75%;
    left: 40%;
}
.town_name >div:nth-child(8){
     top: 78%;
     left: 30%;
}
.town_name >div:nth-child(9){
      top: 86%;
      left: 30%;
}
.town_name >div:nth-child(10){
    top: 38%;
    left: 36%;
}
.town_name >div:nth-child(11){
    top: 48%;
    left: 53%
}
.town_name >div:nth-child(12) {
    top: 42%;
    left: 58%
}
.town_name >div:nth-child(13) {
    top: 30%;
    left: 50%;
}
.town_name >div:nth-child(14) {
    top: 21%;
    left: 61%;
}
.town_name >div:nth-child(15) {
    top: 17%;
    left: 70%;
}
.town_name >div:nth-child(16) {
    top: 8%;
    left: 65%;
}
.midde-right-content>img{
    width: 100%;
    height: 100%;
}
.t-right-box{
    width: 24%;
}
.t-background{
    width: 100%;
    height: 100%;
    background-size: 100%;
    position: relative;
}
.map-box{
    width: 100%;
    height: 7.1rem;
    /*background: #101e4b;*/
}

.t_main-right{
    width:100%;
    height: 100%;
}
.t_main-right > div{
    height: 27%;
}
.t_main-right > div:nth-child(1){
    height: 35%;
}
.t_main-right > div:nth-child(2){
    height: 36.5%;
}
.ec-box-right{
    position: relative;
    width: 100%;
    height: 51%;
    display: inline-block;
    text-align: center;
    background: #13204c;
}
.layui-carousel{
    width: 75% !important;
    height: 75% !important;
    margin: 0 auto;
}
.bottom-box{
    margin-top: 1%;
    width: 100%;
    height: 23%;
    padding: 0 10px;
    box-sizing: border-box;
}
.t_l_line{
    position: absolute;
    top: 0;
    left: 0;
}
.t_r_line{
    position: absolute;
    bottom: 0;
    right: 0;
}
.t_center_box{
    /* width: 6.82rem; */
    display: inline-block;
    min-width: 490px;
}
.t_top_box{
    width: 100%;
    height: 1.13rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.2rem;
}
.t_bottom_box{
    width: 100%;
    height: 3.17rem;
    overflow: hidden;
    position: relative;
}
.t_right_box{
    display: inline-block;
    /* width: 7.8rem; */
    height: 3.6rem;
    position: relative;
}
.b_left_box{
    display: inline-block;
    width: 5.9rem;
    height: 3.6rem;
    position: relative;
    min-width: 425px;

}
.b_center_box{
    display: inline-block;
    width: 6rem;
    height: 3.6rem;
    position: relative;
    min-width: 432px;
}
.b_right_box{
    display: inline-block;
    width: 100%;
    height:100%;
    position: relative;
    overflow: hidden;
}

.ref{
    position: absolute;
    z-index: 5;
    cursor: pointer;
    color: #0ce1f6 ;
    font-size: .9vw;
    top: 1%;
    padding: 5px;
    left: 15%;
}
.t_nav{
    width: 100%;
    height: 100%;
}
.t_nav li{
    display: inline-block;
    width: 30%;
    height: 100%;
    text-align: center;
    position: relative;
}
.t_nav li span{
    font-size: 0.16rem;
    color: #1AA1FD;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 25%;
}
.t_nav li h1{
    font-size: 0.30rem;
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
}
.t_nav li i{
    width: 1px;
    height: 100%;
    position: absolute;
    right: -0.2rem;
    background-size: 100% 100%;
}
.t_table{
    font-size: 0.16rem;
    color: #6697fd;
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    background: #122345;
    overflow: hidden;
}
.t_table_b{
    font-size: 0.16rem;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
.tt_box{
    height: 75%;
    overflow: hidden
}
.t_table_b tr th{
    background: #0d48c0;
    height: 40px;
}
/*设备详情*/
.thead{
    overflow: hidden;
}
.thead tr {
   height: 0.44rem;
}
.thead tr th{
    width: 20%;
    font-size: .8vw;
}

.deviceDate{
    font-size: .8vw;
}
.deviceDate tr td{
    width: 25%;
    /*height: 5vh;*/
}
.fertigation{
    width: 100%;
    font-size: .8vw;
    color: white;
    max-height: 60vh;
    overflow: auto;
    overflow-y: auto;
}
.layui-layer-dialog .layui-layer-content{
    height: calc(100% - 40px) !important;
}
.fertigation tr th{
    background: #053A98;
    font-weight: bold;
    height: 40px;
}
.fertigation tr td{
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #053A98;
}
.pointer{
    cursor: pointer;
}
.pointer:hover{
    color: #0c9bff;
}

.t_table tr{
    margin: 0;
    padding: 0;
    height: 0.41rem;
    font-size: 14px;
}
.t_table thead tr{
    background: #053A98;
}
.t_table tbody tr td:first-child{
    border-left: 1px solid #053A98;
}
.t_table td{
    border-bottom: 1px solid #053A98;
    border-right: 1px solid #053A98;
}
.t_title{
    position: absolute;
    font-size: 0.18rem;
    font-weight: bold;
    color: #fff;
    left: 3%;
    /*top: 2%;*/
}
.t_b_h,t_b_m{
    position: absolute;
    font-size: 0.16rem;
    left: 54%;
    width: 50%;
    height: 4.6rem;
}
.t_b_h span{
    position: absolute;
    color: #fff;
    top: 10%;
}
.t_b_h img{
    position: absolute;
    width: 0.53rem;
    height: 0.53rem;
    top: 6%;
    left: 24%
}
.t_b_h h3{
    font-size: 0.36rem;
    color: #F0FF00;
    position: absolute;
    left: 55%;
    top: 8%;
    width: 1rem;
}
.t_b_h h3 span{
    font-size: 0.2rem;
    position: absolute;
    left: 50%;
    top: 28%;
    color: #0072FF;
}
.t_b_m img{
    position: absolute;
    left: 52%;
    top: 22%;
    border-top: 1px dotted #F0FF00;
    padding: 0 0.18rem;
    padding-top: 20px;
    width: 3.19rem;
    height: 1.67rem;
}
.t_b_box,.t_b_box1,.t_b_box2,.t_b_box3{
    width: 1.3rem;
    height: 0.56rem;
    border: 1px dotted #F0FF00;
    border-radius: 5px;
    position: absolute;
}
.t_b_box{
    top: 68%;
    left: 56%;
}
.t_b_box span,.t_b_box1 span,.t_b_box2 span,.t_b_box3 span{
    font-size: 0.14rem;
    color: #fff;
    position: absolute;
    left: 10%;
}
.t_b_box i,.t_b_box1 i,.t_b_box2 i,.t_b_box3 i{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15%
}
.t_b_box i{
    /*background: url('../img/t.png') no-repeat;*/
    background-size: 100% 100%;
}
.t_b_box1 i{
    /*background: url('../img/s.png') no-repeat;*/
    background-size: 100% 100%;
}
.t_b_box2 i{
    /*background: url('../img/j.png') no-repeat;*/
    background-size: 100% 100%;
}
.t_b_box3 i{
    /*background: url('../img/g.png') no-repeat;*/
    background-size: 100% 100%;
}
.t_b_box h2,.t_b_box1 h2,.t_b_box2 h2,.t_b_box3 h2{
    font-size: 0.18rem;
    color: #fff;
    position: absolute;
    top: 30%;
    left: 40%;
}
.t_b_box1{
    top: 68%;
    left: 78%;
}
.t_b_box2{
    top: 84%;
    left: 56%;
}
.t_b_box3{
    top: 84%;
    left: 78%;
}
.table1{
    height: 40px;
    position: relative;
}
.echart{
    width: 100%;
    height: 85%;
}
.guidance{
    height: 20% !important;
}
/*谷滚动条样式*/
.warn_hide::-webkit-scrollbar{
    display: none;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute;
}

::-webkit-scrollbar-thumb {
    background-color: #5bc0de
}

::-webkit-scrollbar-track {
    background-color: #ddd
}

.t-content-title-box{
    text-align: center;
    color: #fff;
    font-size: 0.9vw;
    width: 100%;
    box-shadow: inset 0px 11px 63px -53px #fff;
    display: flex;
    align-items: center;
    height: 15%;
}
.t-content-title-box select{
    background: #0f3360;
    color: #ffffff;.map-right-kuang-changecolor
    height: 10%;
    width: 40%;
    height: 30px;
    font-size: 0.8vw;
}
.t-content-title {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(to right,transparent 0%,#103a76 25%,#124890 50%,#11346c 75%,transparent);
    font-weight: bold;
}
.farmerVal{
  margin-right: 10px;
}
.t-content-title_b{
    display: inline-block;
    line-height: .5rem;
    width: 40%;
    /*margin: 0 auto;*/
    background: linear-gradient(to right,transparent 0%,#103a76 25%,#124890 50%,#11346c 75%,transparent);

}
.opinion::after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #C9C5C5;
    border-bottom: 2px solid #C9C5C5;
    position: absolute;
    bottom: -1px;
    right: -1px;
}
.opinion::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-left: 2px solid #C9C5C5;
    border-top: 2px solid #C9C5C5;
    position: absolute;
    top: -1px;
    left: -1px;
}
.opinion{
    color: white;
    width: 100%;
    border: 1px solid #2f5288;
    height: 75%;
    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
}
.opinion p{
    padding: 5px;
    color: #d4c215;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
}
.opinion p span{
    color: white;
    width: 100%;
    font-size: 18px;
}
#plant{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.plantText{
    font-size: 18px;
    width: 80%;
    background: #000000ad;
    position: absolute;
    z-index: 0;
    bottom: 70px;
    left: 80px;
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #0c9bff9e;
    display: none;
}
.plantText::after{
    content: '';
    display: block;
    position: absolute;
    border: 15px solid;
    border-color: #0c9bff9e transparent transparent transparent;
    bottom: -30px;
    left: 30px;
}
.opinion li:nth-child(3):hover .plantText{
    display: block;
}
.map-left{
    background: #051c62;
    position: absolute;
    overflow: hidden;
    width: 20%;
    height: 39%;
    top: 56%;
    margin-left:1% ;
   padding: 10px 20px;

}
.map-content-title {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 5px;
}
.map-left-box{
    padding-bottom:10px ;
    height: 20%;
}
.map-left-content{
    display: flex;
    justify-content: space-between;
}
.map-left-content text{
    color: #ffffff;
    font-size: 14px;
}
.map-left-value{
    display: flex;
    justify-content: space-between;
}
.map-left-value{
    color: #f7c747;
    font-size: 16px;
}

.map-right{
    background: rgba(7,34,111,.5);
    position: absolute;
    top: 60%;
    left: 64%;
    /*width: 3.2rem;*/
    /*height: 2.3rem;*/
    width: 32%;
    height: 35%;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}
.map-right-content{
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px;
}
.map-right::before{
    content: '';
    width:2px;
    height: 85%;
    top: 13%;
    background: #3471dc;
    left: 20%;
    position: absolute;
    z-index: 1;
}
.map-right-kuang{
    position: relative;
    border: 3px solid #d0364e;
    background: #d0364e;
    color: #ffffff;
    width: 15%;
    border-radius: 3px;
    height: 22px;
    text-align: center;
}
.map-right-kuang::after{
    content: '';
    width: 0;
    height: 0;
    border: 8px solid;
    left: 100%;
    top: 1px;
    border-color: #d0364e transparent transparent;
    position: absolute;
    transform: rotate(270deg);
}
.map-right-kuang-changecolor{
    background: #1b64cd;
    position: relative;
    border: 3px solid #1b64cd;
    color: #ffffff;
    width: 15%;
    border-radius: 3px;
    height: 18px;
    text-align: center;
}
.map-right-kuang-changecolor::after{
    content: '';
    width: 0;
    height: 0;
    border: 8px solid;
    left: 100%;
    top: 1px;
    border-color: #1b64cd transparent transparent;
    position: absolute;
    transform: rotate(270deg);
}

.map-right-box{
    overflow: hidden;
    width:79%;
}
.box3{
    /*height: 2.4rem;*/
    overflow: hidden;
}
.map-content-right-box{
    height: 2.6rem;
}
.map-right-content-box{

}
.map-right-content-right text{
    color: #c1cdf3;
    font-size: 14px;
}
.map-right-content-value{
    color:#9eabcd;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.area-seleter{
    /*height: 30px;*/
}

/*气象*/
.weather_text_left{
    border: 1px dashed #055a99;
    padding: 5px;
    position: relative;
    width: 39%;
}
.weatherImg {
    display: flex;
    justify-content: center;
    align-items: center;
}
.weather_text > div::before {
    content: '';
    display: block;
    position: absolute;
    height: 10px;
    width: 10px;
    border-bottom: 1px solid #45acc2;
    border-right: 1px solid #45acc2;
    bottom: -1px;
    right: -1px;
}
.weather_text > div > div {
    width: 100%;
    height: 100%;
    background: rgba(16,47,95,.5);
    display: flex;
}
.weatherText {
    width: 60%;
    margin: auto;
    text-align: center;
    border-left: 1px dashed #055a99;
}
.weather_text {
    display: flex;
    justify-content: space-around;
}
.weather_text_left > div::after {
    content: '';
    display: block;
    position: absolute;
    height: 15px;
    width: 15px;
    border-top: 1px solid #398598;
    border-left: 1px solid #398598;
    top: 5px;
    left: 5px;
}
.weatherText text {
    color: #C9C5C5;
    font-size: 24px;
}
.weather > div {
    height: 26%;
    width: 100%;
}
.weather_text > div {
    border: 1px dashed #055a99;
    padding: 5px;
    position: relative;
}

.weather_text_right {
    width: 59%;
    display: flex;
}
.weather_text_right > div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2fb8d6;
    font-size: 16px;
    position: relative;
}
#weather_charts{
    height: 58%;
}

/*tooltip样式*/
#mapStoreClass{
    /*bottom: 0;*/
    position: absolute;
    z-index: 9999;

}
.tooltipbox{
    width:100%;

    /*padding: 0 10px;*/
}
.title-name{
    width: 100%;
    padding: 5px 0;
    color: #1f9af9;
}
.tooltipbox>div:nth-child(2){
    width: 100%;
    height: 2px;
    padding:0 0.5% 0 1%;
    background: #0d48c0;
}
.tip-box{
    padding: 0 10px;
}
.tip{
    padding: 0 5px;
}
.tip-text{
    color: #7792a0;

    font-weight: bold;
}
.tip-value{
    color: #bad8e4;
    /*background: red;*/
}
.tip-top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    /*-webkit-justify-content: space-between;*/
    align-items: center;
}
.tip-top>div{
    /*padding: 0 5px 0 10px;*/
    /*flex: 1;*/
    /*text-align: right;*/
}
.tip-top>div:nth-child(2){
    /*padding-right:90px ;*/
}
#iframeBox{
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    background: #ffffffa1;
    box-shadow: 0px 1px 10px 1px #3a3939;
    display: none;
}
#imgBox{
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    background: #00000057;
    top: 0;
    left: 0;
    z-index: 9999;
    user-select: none;
}
#imgBox > img{
    /*height: 100%;*/
    display: block;
    margin: 10% auto;
}
.camera_list{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera{
    /*width: 75px;*/
    height: 25px;
    border: 1px solid #0c9bff;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    background: #ffffff;
    margin-right: 5px;
    color: #0c9bff;
    cursor:pointer;
    padding:1px 5px;
    /*box-sizing: border-box;*/
}
.camera:hover{
    background: #0c9bff;
    color: white;
    border: 1px solid #0c9bff;
}
.camera_bg{
    background: #0c9bff;
    color: white;
    border: 1px solid #0c9bff;
}
.close,#close{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    right: -10px;
    top: -10px;
    text-align: center;
    line-height: 25px;
    background: #cccccc;
    cursor: pointer;
}
#close{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    right: 10%;
    top: 10%;
    background: #fff;
}
.button{
    width: 100%;
    height: 50px;
    position: absolute;
    top: 81%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.button > .triangle{
    /*position: absolute;*/
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-width:13px;
    margin-right: 5px;
    cursor: pointer;
}
/*三角按钮*/
#button1{
    /*left: 60px;*/
    margin-top: 5px;
    border-color: transparent transparent #FF9600 transparent ;
    border-style: dashed dashed solid dashed ;
}
#button2{
    /*left: 100px;*/
    margin-top: 10px;
    border-color: transparent transparent transparent #FF9600;
    border-style: dashed dashed dashed solid;
}
#button3{
    /*left: 60px;*/
    margin-top: 10px;
    border-color: transparent #FF9600 transparent transparent ;
    border-style: dashed solid dashed dashed;
}
#button4{
    /*left: 35px;*/
    margin-top: 17px;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
.focus{
    /*margin-left: 135px;*/
    margin-top: 10px;
}
#speed{
    margin-left: 5px;
    height: 24px;
    margin-top: 10px;
}
.layui-layer-title {
    background: linear-gradient(to right,#092caf,#000127);
    color: #ffffff !important;
    border-bottom:none !important;
    border-radius:15px 15px 0 0 !important;
}
.layui-layer{
    border-radius: 15px !important;
    background-color:#000127 !important;
    box-shadow: inset 0px -10px 20px -2px #055c9b !important;
    padding: 5px !important;
}
.openText{
    color: #fff;
    font-size: 16px;
    text-align: center;
}

.ec_right_box{
    margin-top: 1%;
}


.bottom_c_right_box{
    color: orange;
    font-size: 14px;
    padding: 1% 0 1% 0;
    background: #3052b154;
}
.soil_shi{
    width: 50%;
    display: flex;
    align-items: center;
}
.soil_shi>div{
    /*width: 28%;*/
    text-align: right;
}
.soil_shi text{
    color: #ffffff;
    font-weight: bold;
    /*width: 80%;*/
}
.soil_text{
    color: #ffffff;
    font-weight: bold;
    width: 80%;
}

.soil_wen{
    width: 100%;
    display: flex;
    align-items: center;
}
.soil_wen>div{
    width: 20%;
    text-align: right;
}
#noCamera{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255,1);
    font-size: 24px;
    font-weight: bold;
}
#noCamera>img{
    width: 40%;
    height: 40%;
}
/*标准化种植*/
.planting_step{
    height: 86%;
    width: 95%;
    margin: 0 auto;
    overflow: auto;
}
/*滚动条样式*/
.planting_step::-webkit-scrollbar {
    height: 4px;
}
.planting_step::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #38b8ff;

}
.planting_step::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #fff;
}
.time-horizontal {
    height: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.time-horizontal > div {
    position: relative;
    width: 78px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
    padding-left: 20px;
}
.time-horizontal > div > img{
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 999;
}
.time-horizontal > div > p{
    cursor: pointer;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: .8vw;
    position: absolute;
    left: 0px;
    top: 13px;
}
.time-horizontal > div > b {
    position: absolute;
    width: 90px;
    height: 3px;
    background: #fff;
    z-index: 2;
    left: 25px;
    top: 0px;
}
.layui-layer-content{
    color: white;
}
#imgList{
    color:black;
    display: flex;
    justify-content: center;
    align-items: center;
}
#echart_4{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    color: white;
    font-size: .8vw;
    height: 48%;
    width: 100%;
}
#echart_5{
    padding-left: 25px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    color: white;
    font-size: .8vw;
    height: 100%;
    width: 45%;
}
#echart_6{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    color: white;
    font-size: .8vw;
    height: 100%;
    width: 25%;
}
#echart_7{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    color: white;
    font-size: .8vw;
    height: 100%;
    width: 25%;
}
#echart_4  p{
    width: 45%;
}
#echart_4 p span{
    color: greenyellow;
}
#echart_5  p{
    width: 45%;
}
#echart_5 p span{
    color: greenyellow;
}
#echart_6  p{
    width: 45%;
}
#echart_6 p span{
    color: greenyellow;
}

#echart_7  p{
    width: 45%;
}
#echart_7 p span{
    color: greenyellow;
}
input[type='checkbox'].switch{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    transition: border-color .3s, background-color .3s;
}

input[type='checkbox'].switch::after {
    content: '';
    display: inline-block;
    width: 1vw;
    height:1vw;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 2px #999;
    transition:.4s;
    top: 2px;
    position: absolute;
    left: 2px;
}

input[type='checkbox'].switch:checked {
    background: rgb(19, 206, 102);
}
input[type='checkbox'].switch:checked::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 2px;
}