*{margin: 0;padding: 0;box-sizing: border-box}
ul,ol{list-style: none}
table{
    width: 100%;
    font-size: 1.7rem;
    text-align: center;
}
table thead{font-size:1.7rem;line-height: 4.5rem;background: #f2f2f2;}
table tbody{background: #fff;line-height: 4rem;}
table tbody tr{border-bottom: 1px solid #e2e2e2; }
td{text-align: center;}
tr :nth-of-type(1){
    /*width:18.5%;*/
}
tr :nth-of-type(2){
    width:24.5%;
}
tr :nth-of-type(3){
    /*width: 8rem;*/
}
tr td:last-child{
    /* width: 29%; */
}
td span{display: inline-block;width: 100%;width: 7.1rem;height: 2.6rem;line-height: 2.6rem;border-radius: 0.25rem;}
td.m-pink-bg span{background: #dc3159;color: #fff;}
td.m-blue-bg span{background: #4288f2;color: #fff;}
td.m-yll-bg span{background: #ff9c00;color: #FFE700;}

.m-county-page .m-city-only{
    display: none !important;
}
/*头部菜单*/
.g-page>header{
    padding-right: 4%;
    width: 100%;
    height: 4.4rem;
    line-height: 4.4rem;
    background-color: #4288f2;
    vertical-align: middle;
    overflow-x: scroll;
}
.g-page>header ul{width: 220%;height: 100%;}
.g-page>header.m-forecast-header ul{width: 100%;}
.g-page>header.m-forecast-header ul li{width: 25%;}
.g-page>header li{
    float:left;
    width: 11.1%;
    height: 100%;
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
}
.g-page>header li span{
    display: inline-block;
    height:2.5rem;
    line-height: 2.5rem;
}
.g-page>header li.select span{
    border-bottom: 0.25rem solid #eef103;
}


.g-page>main>div{
    display: none;
    width: 100%;
    /*position: relative;*/
}
.g-page>main>div.m-map{position: absolute;z-index: -1;}
.i-head{
    width: 100%;
    height: 5.5rem;
    line-height: 5.5rem;
    background: #f2f2f2;
    text-align: center;
}
.i-head-white{
    height: 5.5rem;
    line-height: 5.5rem;
    background: #ffffff;
}
.i-head-height{
    height: 4.5rem;
    line-height: 4.5rem;
}
.i-title{
    /* padding: 0 1rem 0 1rem; */
    text-align: center;
    line-height: 5.5rem;
    font-size: 1.7rem;
    border: none !important;
}
.i-head>div{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 2.9rem;
    line-height: 2.9rem;
    border: 0.05rem solid #4288f2;
    vertical-align: middle;
    border-radius: 1.45rem;
}
.i-head>div>div{display:none;position: absolute;right:0;top: 3.5rem;width: 50%;background: #fff;box-shadow: 0 0 1.5rem rgba(0,0,0,.5);border-radius: 0.5rem;padding: .5rem;z-index: 99;}
.i-head span>i{margin-left: .4rem;}
.i-head>div>div span{width: 100% !important;height: 3.4rem;line-height: 3.4rem;font-size:2rem;}
.i-head>div>div span.select{border-radius: 3px;}
.i-head>div[data-count="1"]{display: none;}
.i-head>div[data-count="2"]{width: 90%;}
.i-head>div[data-count="2"] span{width:50%;}
.i-head>div[data-count="4"] span{width:25%;}
.i-head>div span{
    float: left;
    width: 33.33%;
    font-size: 1.5rem;
    height: 2.8rem;
    line-height: 2.8rem;
    text-align: center;
}
.i-head>div .select{
    color: #ffffff;
    background: #4288f2;
    border-radius: 1.4rem;
}
.m-county-list-forImg{position: absolute;right: .8rem;top:11.3rem;}
.m-county-list-forImg>div{padding-left: .2rem;font-size: 1.4rem;white-space:nowrap;height: 2.8rem;line-height: 2.8rem;border: 1px solid #aaa;}
.m-county-list-forImg>div>i{float:right;margin:.6rem .6rem .6rem .4rem;}
.m-county-list-forImg .m-county-list{right: 0em;}
.m-county-list{display:none;position: absolute;margin-left:0.5rem;background: #fff;box-shadow: 0 0 1.5rem rgba(0,0,0,.5);border-radius: 0.5rem;padding: .5rem;margin-bottom: 1rem;z-index: 999;}
.m-county-list li{padding:0 1.5rem;height: 3.4rem;line-height: 3.4rem;white-space:nowrap;font-size:2rem;border-radius: .5rem;}
.m-county-list li.select{background: #4288f2;color: #fff;}
.i-maincontain{
    width: 100%;
    background-color: #ffffff;
}
.i-maincontain img{width: 100%;vertical-align: middle;}
.i-maincontain .m-paging .m-paging-footer .m-play {
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
    background: #4288f2;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.i-maincontain .m-paging .m-paging-footer .m-play::before{
    content:"";
    height: 0;
    width:0;
    border-left: 1.2rem solid #fff;
    border-top:0.9rem solid transparent;
    border-bottom:0.9rem solid transparent;
    box-sizing: content-box;
}
.i-maincontain .m-paging .m-paging-footer .m-play.stop::before{
    content:"";
    width:1.6rem;
    height:1.6rem;
    border:none;
    background:linear-gradient(to right,#fff 0%,#fff,33.3%,transparent 33.3%,transparent 66.6%,#fff 66.6%) center center no-repeat;
}
.i-maincontain .m-paging .m-paging-footer{
    position: fixed;
    bottom: 1rem;
    display: flex;
    flex-direction: row;
    line-height: 4rem;
    justify-items: center;
    justify-content: center;
    width: 100%;
    align-items: center;
}
.i-maincontain .m-paging .m-cur-index{
    bottom:1rem;
    font-size: 1.2rem;
    flex: 0;
}
.i-maincontain .m-paging .m-cur-index span:nth-child(1){
    color:#4c98f5;
}
.i-maincontain .m-paging .m-pre,.i-maincontain .m-paging .m-next{
    position:absolute;
    width:2.2rem;
    height:4.4rem;
    background: rgba(156,206,255,0.35);
    z-index:999;
    margin: auto 0;
    top: 0;
    bottom: 0;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 0 2.2rem 2.2rem 0;
    outline:none;
}
.i-maincontain .m-paging .m-pre::before,.i-maincontain .m-paging .m-next::before{
    content:"";
    width:1rem;
    height:1rem;
    border-left:0.3rem solid #fff;
    border-top:0.3rem solid #fff;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    transform:rotate(-45deg);

}
.i-maincontain .m-paging .m-pre{
    left:0;

}
.i-maincontain .m-paging .m-next{
    right:0;
    transform:rotate(-180deg);
}
.i-select{
    z-index: 9;
    font-size: 1.6rem;
    position: absolute;
    right: 2rem;
    border: 1px solid #cecece;
    top: 12rem;
}

.i-segmentation{
    width: 100%;
    height: 1.5rem;
    background: #f2f2f2;
}
.table-title{
    width: 100%;
    height: 4rem;
    font-size: 1.6rem;
}
.table-contain{
    width: 100%;
    height: 4.5rem;
    font-size: 1.4rem;
}
.table-contain td{
    height: 4rem;
    line-height: 4rem;
    border-bottom: 0.05rem solid #e2e2e2;
}
.table-contain td.hightemp span{
    background: #dc3159;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
/*风场流图*/

.i-head-wind{
    width: 100%;
    height: 8rem;
    padding: 0 1.5rem 0 1.5rem;
    text-align: center;
    background: #f2f2f2;
}
.i-head-wind .i-head>div{
    display: inline-block;
    margin-top: 1.5rem;
    width: 80%;
    height: 3rem;
    line-height: 3rem;
    border: 0.05rem solid #9abdf2;
    vertical-align: middle;
    border-radius: 1.5rem;
}

.i-head-wind .i-head>div span{
    display: inline-block;
    width: 50%;
    font-size: 1.5rem;
    height: 2.9rem;
    line-height: 2.9rem;
    text-align: center;
}
.i-windtitle{
    width: 100%;
    text-align: center;
    padding: 0 1.5rem 0 1.5rem;
    background: #fff;
    font-size: 1.8rem;
    line-height: 3.5rem;
}
.i-windcontain{
    width: 100%;
    height: 39rem;
    padding: 0 1rem 0 1rem;
    background-color: #ffffff;
}

/*风场图例*/
.i-windlegend{
    display: inline-block;
    text-align: center;
}
.i-windlegend ul{
    display: inline-block;
}
.i-windlegend ul li{
    position: relative;
    float: left;
    width: 2.7rem;
    height: 1.8rem;
    border: 0.05rem solid #000;
    border-right: none;
}
.i-windlegend ul li:last-child{
    border-right: 0.01rem solid #000;
}
.i-windlegend ul li span{
    position: absolute;
    height: 0.9rem;
    font-size: 1.2rem;
    top: -0.25rem;
    left: 0;
    text-shadow: rgb(255, 255, 255) 0.05rem 0 0, rgb(255, 255, 255) -0.05rem 0 0, rgb(255, 255, 255) 0 0.05rem 0, rgb(255, 255, 255) 0 -0.05rem 0;
}
.i-windlegend .i-windlegend-title {
    float: right;
    width: 2.35rem;
    margin-top:1rem;
    margin-left:-0.75rem;
    font-size: 1.2rem;
    text-align: right;
    text-shadow: rgb(255, 255, 255) 0.05rem 0 0, rgb(255, 255, 255) -0.05rem 0 0, rgb(255, 255, 255) 0 0.05rem 0, rgb(255, 255, 255) 0 -0.05rem 0;
}
.u-text-shadow{
    font-size: 1.2rem;
    text-shadow:#fff 0.05rem 0 0,#fff 0 0.05rem 0,#fff -0.05rem 0 0,#fff 0 -0.05rem 0;
    -webkit-text-shadow:#fff 0.05rem 0 0,#fff 0 0.05rem 0,#fff -0.05rem 0 0,#fff 0 -0.05rem 0;
    -moz-text-shadow:#fff 0.05rem 0 0,#fff 0 0.05rem 0,#fff -0.05rem 0 0,#fff 0 -0.05rem 0;
}

/*雷达云图*/
.title{/* margin-top:.3rem; */width:100%;height: 2.7rem;line-height: 2.74rem;text-align: center;font-size: 1.8rem;font-weight:bold;color: #323232;clear: left;}
.sub-title{width:100%;height: 2.3rem;line-height: 2.3rem;text-align: center;font-size: 1.4rem;color: #323232;}
.show-img{/* margin-top: .75rem; */width: 100%;}
.play-box{background: #fff;padding: 1.5rem 1.5rem 0 1.5rem;}
.bar-bg{position:relative;width: 100%;height: 1rem;background: #dae3ec;border-radius: .75rem;}
.bar-bg .icon-index{position:absolute;top: -.45rem;width: 2.1rem;height: 2.1rem;}
.bar-bg .icon-index>i{margin-left:50%;display:block;width: 100%;height: 100%;border-radius: 2.1rem;border: .45rem solid #a0c3f8;background: #fff;}
.time-box{margin-top: .75rem;width: 100%;height: 1.9rem;line-height: 1.9rem;clear: both;color: #323232;font-size: 1.6rem;}
.tick-box{margin-top: .2rem;width: 100%;height: .4rem;line-height: .4rem;clear: both;}
.time-box li, .tick-box li{float: left;margin-left:0;width: 10%;text-align: center;}
.tick-box li i{display: inline-block;width: .2rem;height: .4rem;background: #4288f2;border-radius: .1rem;}
/*.time-box li:nth-child(even){color: #fff;}*/
.btn-box{width: 100%;height: 5rem;line-height: 5rem;clear: both;color: #4288f2;}
.btn-box li{float:left;margin-left:0;width: 33.3%;text-align: center;font-size: 2.25rem;}
.btn-box>i{}
.m-option-list{padding: 0 .5rem;height: 5.5rem;line-height: 5.5rem;}
/*雨温动态*/
.m-stamp-option{height:4.3rem;padding: .7rem;}
.m-stamp-option select{height: 2.9rem;line-height: 2.9rem;padding:0 3px;font-size: 1.5rem;}
.m-stamp-option select:first-child{float: left;}
.m-stamp-option select:last-child{float: right;}
.m-stamp-img-all img{float: left;width: 50%;border-bottom: 1px solid #fff;}
.m-stamp-img-all img:nth-child(odd){border-right: 1px solid #fff;}
.m-stamp-img-single img{width: 100%;}
/*运行监控*/
.m-monitor-box{position: relative;}
.mnt-map{position: absolute;top:0;left: 0;right: 0;bottom: 0;}
.mnt-ttl{position: absolute;top:1.6rem;left: 1.5rem;font-size: 1.7rem;color: #fff;text-shadow: 0 0 1px #323232;z-index: 999;}
.mnt-refresh{position: absolute;top: 1.4rem;right: 1.5rem;width: 4.4rem;height: 4.4rem;line-height: 4.4rem;text-align: center;color: #fff;font-size:1.7rem;background: rgba(0,0,0,.4);z-index: 999;border-radius: .4rem;}
.mnt-banner{position: absolute;bottom: 0;left: 0;width: 100%;height: 4.9rem;line-height: 4.9rem;color: #fff;font-size: 1.7rem;font-weight:100;border-radius:.4rem;background: rgba(0,0,0,.4);z-index: 1001;}
.mnt-banner>li{float: left;width: 33.3%;text-align: center;}
.mnt-banner>li i{margin-right: .6rem;color: #e4ff00;}
.mnt-banner>li i.icon-green{color: #1af744;}
.mnt-banner>li i.icon-org{color: #ff7901;}
.mnt-table{position: absolute;top:0;left: 0;width: 100%;background: #fff;z-index: 1000;overflow: scroll;}

.m-warning-tip{height: 4.5rem;line-height: 4.5rem;font-size: 1.5rem;font-weight: bold;background: #f1f1f1;}
.m-warning-tip span{float: left;text-align: center;}
.m-warning-tip span:first-child{width: 70%;}
.m-warning-tip span:last-child{width: 30%;}
.m-warning-list{font-size: 1.4rem;}
.m-warning-list li{height: 4rem;line-height:4rem;border-bottom: 1px solid #e2e2e2;}
.m-warning-list li>span{display: inline-block;}
.m-warning-list li>span:first-child{padding-left:.5rem;width: 70%;color: #ff5400;}
.m-warning-list li>span:last-child{width: 30%;text-align: center;}
.m-no-warning{display:none;width: 100%;text-align: center;line-height: 8rem;font-size: 2.5rem;color: #878787;}
.m-no-warning span{display: inline-block; height: 2.5rem;line-height: 2.5rem;}
.m-no-warning img{float:left;width: 2.5rem;margin-right: .5rem;vertical-align: middle;}
.tr-county{color:#2319DC;}