.m-up-img{
    position: fixed;
    width: 20px;
    left: 50%;
    margin-left: -10px;
    bottom: 20px;
    animation:toUp 1s 0ms linear infinite both;
}
.g-page{
    overflow: hidden;
}
.m-station-weather{
    width: 100%;
    /*height: 28.1rem;*/
    height: 90vw;
    position: relative;
    color: #fff;
    top: 0;
    overflow: hidden;
}
.m-location{
    color: #ffffff;
    font-size: 4vw;
    left: 3vw;
    top: 1.8vw;
    position: absolute;
    height: 2rem;
    line-height: 2rem;
}
.m-location .i-location-icon{
    display: inline-block;
    background: url(../../images/index/location.png) no-repeat;
    height: 4vw;
    width: 4vw;
    vertical-align: middle;
    background-size: contain;
    cursor: pointer;
    position: relative;
    top: -0.3vw;
}
.m-location .i-refresh-time{
    opacity: 0.8;
    margin-left: 1rem;
}
.m-warn-pic {
    position: absolute;
    top: 3vw;
    right: 2vw;
    overflow: hidden;
}

.m-warn-pic>div{
    text-align:right;
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: flex-end;
    font-size: 3vw;
    line-height: 4vw;
    margin-bottom: 1vw;
}

.m-warn-pic>div ul{
    display:flex;
    flex-direction:row;
    margin-left: 1vw;
    line-height: 0;
    /* margin-bottom: 1vw; */
}
.m-warn-pic>div:nth-child(1) img{
    width:9vw;
}
.m-warn-pic>div:nth-child(2) img{
    width: 8.7vw;
}
.m-warn-pic>div:nth-child(3) img{
    width: 8.0vw;
}
.m-warn-pic img{
    width: 16vw;
    cursor: pointer;
    margin-left: 0.2rem;
}

.m-aqi{
    background: rgba(0,0,0,.1);
    border-radius: 4vw;
    position: absolute;
    right: 4vw;
    width: auto;
    line-height: 7vw;
    top: 6.4vw;
    font-size: 3vw;
    padding: 0 1em;
}
.m-aqi img{
    height: 4vw;
    margin-right: .2rem;
    vertical-align: sub;
}
.m-aqi span{
    display: inline-block;
    font-size: 4vw;
    /* vertical-align: middle; */
    line-height: 8vw;
}
.m-station-zdz{
    color: #ffffff;
    top: 14vw;
    left: 6vw;
    position: absolute;
}

.m-station-zdz .i-zdz-temp span:nth-child(1){
    display: inline-block;
    font-size: 20vw;
    font-weight: 300;
}
.m-station-zdz .i-zdz-temp span:nth-child(2){
    font-size: 6vw;
    margin-left: 1rem;
}
.i-zdz-weathers{
    font-size: 4vw;
}
.i-zdz-wind{
/*
    padding-left: 2em;
    background: url(../../images/index/wind.png) left center no-repeat;
    background-size: 1.5em;
*/
    margin-left: 0.2em;
    margin-right: 1em;
    height: 7vw;
    line-height: 7vw;
}
.i-zdz-rh{
/*
    padding-left: 1.9em;
    background: url(../../images/index/rh.png) left center no-repeat;
    background-size: 1em;
*/
    margin-right: 1em;
    margin-left: 0.2em;
    height: 7vw;
    line-height: 7vw;
}
.i-zdz-rain{
/*
    padding-left: 2em;
    background: url(../../images/index/rain.png) left center no-repeat;
    background-size: 1.3em;
*/
    margin-right: 1em;
    margin-left: 0.1em;
    height: 7vw;
    line-height: 7vw;
}


.m-container{
    background: #f2f2f2;
    width: 100%;
}
.m-container .i-48details,.m-container .i-week{
    width: 100%;
    background: #fbfbfb;
}
.m-container .i-week img{height: 7.5vw;display: block;margin: 1vw auto;}
.i-title{
    width: 100%;
    height: 11.5vw;
    padding: 0 2vw;
    line-height: 12vw;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 4vw;
    font-family: 'PingFang SC Regular';
}
.i-titleline{
    display: inline-block;
    height: 4vw;
    width: 4px;
    border-radius: 2px;
    background: #ffb20c;
    vertical-align: middle;
    font-weight: bold;
    margin: 0.5vw 10px 0.5vw 0;
}
.i-titletext{
    display: inline-block;
    height: 5vw;
    line-height: 5vw;
    vertical-align: middle;
    font-weight: bold;
}
.i-title-refreshtime {
    float: right;
    display: inline-block;
    font-weight: 100;
    vertical-align: middle;
    color: #323232 !important;
}

/*24小时预报*/
.i-highchar{
    position: relative;
    width: 100%;
    height: calc(31vh - 7.5vw);
    overflow-x: scroll;
    background: #fbfbfb;
    min-height: 165px;
    /*color: #ff0084;*/
}

.i-highchar0{
    position: relative;
    height: calc(69vh - 79vw);
    min-height: 167px;
    overflow-x: scroll;
    box-sizing: border-box;
    width: calc(100% - 1.4rem);
    margin: 0 auto;
}
#m-airT{
    width: 380vw;
    height: 100%;
    left: 0.3rem;
}
.m-line{
    width: calc(380vw - 2.4rem);
    height: 1px;
    margin: 0 4vw .2rem 4vw;
    background: #b1b1b1;
}
#m-echart{
    width: 380vw;
    height: 100%;
}
.i-highchar::-webkit-scrollbar {display:none}
#m-airT::-webkit-scrollbar {display:none}
.i-windPack{
    width: 100%;
}
#m-echart::-webkit-scrollbar {display:none}
#m-echart::-webkit-scrollbar {display:none}
.i-segmentation{
    width: 100%;
    height: 2vw;
    background: #f2f2f2;
}
.m-chart-detail{position: absolute;bottom: 7vw;width: 100%;}
.i-windPack{
    width: 380vw;
    display: flex;
    justify-content: space-around;
}
.i-weather0{
    width: 380vw;
    display: flex;
    justify-content: space-around;
    font-size: 4vw;
}
.i-weather, .i-weatherpic {
    width: 41.6%;
    text-align: center;
}
.i-weather,.i-weatherpic{
    width: 41.6%;
    text-align: center;
    display: inline-block;
    bottom: 1em;
}
.i-weatherpic img{

    vertical-align: middle;

    width: 7.5vw;
}

.i-weatherpic0{
    width: 100vw;
    /* display: flex; */
    justify-content: space-around;
    position: absolute;
    white-space: nowrap;
    bottom: 2em;
}
.i-wind{
    display: inline-block;
    width: 41.6%;
    text-align: center;
    font-size: 3vw;
    line-height: 5vw;
    color: #878787;
}
.i-wind img{height: 5vw;vertical-align: middle;}
.i-table{
    width: 100%;
    padding: 0 0.7rem;
    font-size: 4vw;
    box-sizing: border-box;
    line-height: 6vw;
    color: #323232;
}
.i-table table{
    width: 100%;
    text-align: center;
}
.i-table table td{
    width:12%;
}
tr.i-weeks td {
    padding-top: 1.5vw;
}
.i-table .i-tr{
    color: #929292;
    font-size: 3vw;
}
.i-table .i-tr2{
    color: #ababab;
    font-size: 3vw;
}
.i-tr2{
}
.i-airImg > td > span{
    display: inline-block;background-image: url("images/bigrain.png"); height: 2.95rem; width: 2.9rem;background-size: 100% 100%;background-repeat: no-repeat;
}
.i-airImg01 > td > span{
    display: inline-block;background-image: url("images/weather.png");width: 2.9rem;height: 2.9rem;background-size: 100% 100%;background-repeat: no-repeat;
}
#container{
    position: relative;
    height: 100%;
    width: 94%;
    margin: 0 auto;
}
.m-station-forcast{
    text-align: center;
    height: 25.7vw;
    font-size: 0;
    line-height: 8vw;
    background: #fff;
}
.m-station-forcast>div{
    font-size: 2rem;
    display: inline-block;
    margin: 4px 0;
    height: calc(25.7vw - 8px);
    width: calc(50% - 1px);
    text-align: left;
    font-size: 4vw;
}
.m-station-forcast>div:nth-child(1){
    border-right: 1px solid #e0e0e0;
}
.m-station-forcast>div>div{
    margin: 2vw;
}
.m-station-forcast>div>div:nth-child(1) span:nth-child(2){
    font-size: 0.8rem;
    background: #009af8;
    color: #fff;
    display: inline-block;
    border-radius: 4vw;
    padding: 0 0.6em;
    margin-left: 0.2rem;
}
.m-station-forcast>div>div:nth-child(1) span:nth-child(3){
    float: right;
}
.m-station-forcast img {
    width: 8vw;
    vertical-align: middle;
    float: right;
    margin-left: 2px;
}
.m-radar{
    height: 67vh;
    position: relative;
}
#map{
    position: absolute;
    height: 100%;
    width: 100%;
}

.m-radar-axis {
    position: absolute;
    bottom: -1px;
    z-index: 9999;
    background: #fff;
}
.m-imagePlayerAgent {
    font-size: 0;
    height: 10vw
}

.m-imagePlayerAgent-button {
    cursor: pointer;
    width: 15vw;
    display: inline-block;
    text-align: center;
    height: 10vw;
    line-height: 10vw;
    color: #009af8
}

.m-imagePlayerAgent-slider {
    display: inline-block;
    font-size: 3vw;
    width: 85vw;
    text-align: center;
    vertical-align: top;
}
.m-imagePlayerAgent-slider li{
    cursor: pointer;
}
.m-imagePlayerAgent-slider li:active{
    background:#fff;
}
.m-imagePlayerAgent ul {
    width: 85vw;
    margin: 0;
    white-space: nowrap;
    /* overflow: scroll */
    padding-top: 5vw;
    user-select: none;
}

.m-imagePlayerAgent ul li {
    display: inline-block;
    border-left: 1px solid #aaa;
    line-height: 5vw;
    width: 17vw;
    position: relative;
    box-sizing: border-box;
    vertical-align: bottom;
}

.m-imagePlayerAgent ul li.select-0::before {
    content: '';
    width: 25%;
    height: 200%;
    right: -1px;
    bottom: 0;
    position: absolute;
    border-left: #009af8 1px solid;
}
.m-imagePlayerAgent ul li.select-1::before {
    content: '';
    width: 50%;
    height: 200%;
    right: -1px;
    bottom: 0;
    position: absolute;
    border-left: #009af8 1px solid;
}
.m-imagePlayerAgent ul li.select-2::before {
    content: '';
    width: 75%;
    height: 200%;
    right: -1px;
    bottom: 0;
    position: absolute;
    border-left: #009af8 1px solid;
}
.m-imagePlayerAgent ul li.select-3::before {
    content: '';
    width: 87.5%;
    height: 200%;
    right: -1px;
    bottom: 0;
    position: absolute;
    border-left: #009af8 1px solid;
}
.m-imagePlayerAgent ul li:nth-child(3)::after {
    content: '';
    left: 75%;
    width: calc(25% + 1px);
    height: 10vw;
    right: 0;
    bottom: 0;
    background: rgba(0, 154, 248, .2);
    position: absolute;
}
.m-imagePlayerAgent ul li:nth-child(3) ~ li::after {
    content: '';
    width: calc(100% + 1px);
    height: 10vw;
    right: 0;
    bottom: 0;
    background: rgba(0, 154, 248, .2);
    position: absolute;
    left: 0;
}

.m-imagePlayerAgent ul li span {
    position: absolute;
    top: -5vw;
    background: #009af8;
    color: #fff;
    right: 0;
    margin: 0 auto 0 -1.5em;
    display: block;
    width: 3em;
    left: -13%;
    z-index: 999;
}

.m-legend {
    position: absolute;
    padding: 0vw 0vw 4vw 2vw;
    bottom: 14vw;
    right: 1.2rem;
    width: 12.5vw;
    color: #000;
    background: #fff;
    border-radius: .25rem;
    border: 1px solid #eee;
    z-index: 999;
    box-sizing: border-box;
}

.m-legend > div {
    height: 2em;
    line-height: 2em;
    font-size: 3vw;
    width: 3em;
    text-align: center;
}

.m-legend > ul {
    font-size: 2.4vw
}

.m-legend li {
    position: relative;
    margin-bottom: -1px;
    height: 4.5vw;
}

.m-legend li i {
    display: inline-block;
    width: 2.8vw;
    height: 4.5vw;

}
.m-legend li:last-child i{
    border: 1px solid #c8c8c8;
}
.m-legend li span {
    position: absolute;
    left: 4vw;
    top: 2vw;
}
#radTtl{
    position: absolute;
    top: 2vw;
    left: 2vw;
    font-size: 4vw;
    line-height: 1em;
    color: #000;
    text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
    z-index: 998;
}
.i-footer{
    clear: both;
    line-height: 9vw;
    width: 100%;
    text-align: center;
    color: #868686;
    font-size: 3vw;
}
.m-warn-description{
    display: none;
    position: absolute;
    bottom: 0;
    line-height: 2em;
    background: rgba(0,0,0,0.3);
    width: 100%;
    white-space: nowrap;
    font-size: 4vw;
    text-align: justify;
    overflow: hidden;
    color: #fff;
}
.a-scrollLeft {
    display: inline-block;
}
.animate.a-scrollLeft {
    animation: scrollLeft 15s 0s infinite linear;
}
.leaflet-shadow-pane{
    z-index: 400;
}
@keyframes scrollLeft {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}

.i-index{
    background-color: #fbfbfb;
}

.index-box{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
}

.index-item{
    flex: 0 0 33.333%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9rem;
}

.index-item:nth-child(1),.index-item:nth-child(2),.index-item:nth-child(3){
    border-bottom: 1px solid #ddd;
}

.inner-item{
    box-sizing: border-box;
    width: 100%;
    padding: 0 3px;
}

.border{
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}



.m-container .i-48details,.m-container .i-aqi,
.m-container .i-48details,.m-container .i-rain-image,
.m-container .i-48details,.m-container .i-air-image,
.m-container .i-48details,.m-container .i-oceanWind-image,
.m-container .i-48details,.m-container .i-city-text,
.m-container .i-48details,.m-container .i-prov-text,
.m-container .i-48details,.m-container .i-ocean-text{
    width: 100%;
    background: #fbfbfb;
    overflow: hidden;
}

.i-title2{
    display: flex;
    justify-content: center;
    margin: 1rem 1rem 0.5rem;
}
.i-title2 span{
    background: rgba(211, 231, 255, 0.4);
    color:  #4c99f5;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 0.2rem;
    flex-grow:0;
    flex-shrink:0;
    position: relative;
    /* margin: 1rem 0 0.5rem; */
}

.i-title2::before,
.i-title2::after{
    content:"";
    flex-grow:1;
    flex-shrink:1;
    background: linear-gradient(to right,#d5f2fa,#d0e5f8) no-repeat center center;
    background-size: 100% 1px;
    margin: 0 0.3rem;
}
.i-title2 span::before{
    content:"";
    background: url(../images/arr-left.png) no-repeat;
    width: 3.5rem;
    height: 100%;
    position: absolute;
    background-size: 2.5rem;
    background-position: 100% 50%;
    left: -2.8rem;
    margin: 0 -1rem;
}
.i-title2 span::after{
    content:"";
    background:url(../images/arr-right.png) no-repeat center;
    width: 3.5rem;
    height: 100%;
    position: absolute;
    background-size: 2.5rem;
    background-position: 0 50%;
    right: -2.8rem;
    margin: 0  -1rem;
}

.m-image-list{
    position: relative;
    white-space: nowrap;
    overflow: auto;
    height: auto;
    display: flex;
    flex-direction: row;
}
.m-image-list img{
    width: 100%;
    height: auto;
}
.m-aqi-legend{
    padding: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 3.5vw;
    font-weight: bold;
    align-items: center;
}
.m-aqi-legend i{
    display:inline-block;
    width:1.6vw;
    height:1.6vw;
    margin-right: 1.5vw;
    vertical-align: middle;
}
.m-aqi-chart-title{
    padding: 0 2vw;
    font-size: 3.7vw;
    color: #2c9619;
}
.i-aqi-live{
    background-color: rgba(14, 94, 183, 0.2);
    border-radius: 28px;
    line-height: 7.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 3vw;
    width: max-content;
    margin-top: 1vw;
    display: none;

}
.i-aqi-live img{
    height: 3.5vw;
    margin-right: 1vw;
}