body {
  font-size: .24rem;
  line-height: 1.8;
}

.air-1 {
  background: #51b948;
}
.air-2 {
  background: #ebd305;
}
.air-3 {
  background: #ff6501;
}
.air-4 {
  background: #ff0114;
}
.air-5 {
  background: #7f2c7d;
}
.air-6 {
  background: #79131a;
}
.en {
  font-family: Arial, Helvetica, sans-serif;
}
.w50{
  width: 50%;
  line-height: .5625rem;
}
.tr{
  text-align: right;
  padding-right: .3rem;
  box-sizing: border-box;
}
.tl{
  text-align: left;
  padding-left: .3rem;
  box-sizing: border-box;
}
.weather-wrapper {
  color: #fff;
  width: 100%;
  height: 100%;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.weather-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top left;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: -2;
}

.blur-bg {
  opacity: 0;
}

.weather-mask {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
}

.weather-sunny .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  /* background-size: 130% auto; */
  background-image: url(/images/bg-weather-sunny.jpg);
}

.weather-sunny .sun {
  position: fixed;
  top: 8em;
  right: 5em;
  width: 3em;
  z-index: -2;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: sunshine 2s linear infinite alternate;
          animation: sunshine 2s linear infinite alternate;
}

.clou {
  position: fixed;
  top: 4em;
  left: -80vw;
  width: 80vw;
  z-index: -2;
  -webkit-animation: clou 30s linear infinite;
          animation: clou 30s linear infinite;
}

@-webkit-keyframes clou {
  from {
    left: -80vw;
  }
  to {
    left: 180vw;
  }
}

@keyframes clou {
  from {
    left: -80vw;
  }
  to {
    left: 180vw;
  }
}

@-webkit-keyframes sunshine {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@keyframes sunshine {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

.weather-cloudy .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-size: auto 100%;
  background-image: url(/images/bg-weather-cloudy.jpg);
  -webkit-animation: cloud 80s linear infinite alternate;
          animation: cloud 80s linear infinite alternate;
}

@-webkit-keyframes cloud {
  from {
    background-position: left top;
  }
  to {
    background-position: right top;
  }
}

@keyframes cloud {
  from {
    background-position: left top;
  }
  to {
    background-position: right top;
  }
}

.weather-haze .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-haze.jpg);
  -webkit-animation: cloud 50s linear infinite alternate;
          animation: cloud 50s linear infinite alternate;
}

.weather-evening .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-evening.jpg);
}

.weather-evening .cloud {
  position: fixed;
  top: 5em;
  right: 5em;
  z-index: -2;
  width: 10em;
  -webkit-animation: evening 10s linear infinite;
          animation: evening 10s linear infinite;
}

@-webkit-keyframes evening {
  from {
    right: calc(-12em);
  }
  to {
    right: calc(100vw + 12em);
  }
}

@keyframes evening {
  from {
    right: calc(-12em);
  }
  to {
    right: calc(100vw + 12em);
  }
}

.weather-sandstorm .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-sandstorm.jpg);
}

.weather-sandstorm .sand {
  position: fixed;
  top: 0em;
  right: 0em;
  z-index: -2;
  min-width: 400vw;
  -webkit-animation: sandstorm 15s linear infinite;
          animation: sandstorm 15s linear infinite;
}

@-webkit-keyframes sandstorm {
  from {
    right: 0;
  }
  to {
    right: -300vw;
  }
}

@keyframes sandstorm {
  from {
    right: 0;
  }
  to {
    right: -300vw;
  }
}
.weather-bg{
  height: 100vh;
  width: 100vw;
  background-size:100% 100%;
  background-position: top;
}

.weather-snow .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-snow.jpg);
}

.weather-rainy .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-rain.jpg);
}

.weather-thundershower .weather-bg {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(/images/bg-weather-thundershower.jpg);
}

.weather-thundershower .lightning {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -2;
  -webkit-animation-name: goBlur;
          animation-name: goBlur;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.weather-thundershower .lightning::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5;
  -webkit-animation-name: goShake;
          animation-name: goShake;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.weather-thundershower .lightning::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  background-position: left top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: auto 100%;
  -webkit-animation-name: goLightning;
          animation-name: goLightning;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes goBlur {
  0%,
  20%,
  50%,
  80%,
  100% {
    filter: blur(0px);
    -webkit-filter: blur(0px) brightness(80%) contrast(120%) grayscale(15%);
  }
  40% {
    filter: blur(12px);
    -webkit-filter: blur(3px) brightness(110%) contrast(130%) grayscale(10%);
  }
  60% {
    filter: blur(6px);
    -webkit-filter: blur(2px) brightness(60%) contrast(120%) grayscale(16%);
  }
}

@keyframes goBlur {
  0%,
  20%,
  50%,
  80%,
  100% {
    filter: blur(0px);
    -webkit-filter: blur(0px) brightness(80%) contrast(120%) grayscale(15%);
  }
  40% {
    filter: blur(12px);
    -webkit-filter: blur(3px) brightness(110%) contrast(130%) grayscale(10%);
  }
  60% {
    filter: blur(6px);
    -webkit-filter: blur(2px) brightness(60%) contrast(120%) grayscale(16%);
  }
}

@-webkit-keyframes goShake {
  0%,
  20%,
  50%,
  80%,
  100% {
    top: 0;
    left: 0;
  }
  40% {
    top: -1px;
    left: -1px;
  }
  60% {
    top: 1px;
    left: 1px;
  }
}

@keyframes goShake {
  0%,
  20%,
  50%,
  80%,
  100% {
    top: 0;
    left: 0;
  }
  40% {
    top: -1px;
    left: -1px;
  }
  60% {
    top: 1px;
    left: 1px;
  }
}

@-webkit-keyframes goLightning {
  20%,
  70% {
    opacity: .2;
    background-image: url("/images/lightning22.jpg");
  }
  40%,
  80% {
    opacity: 0;
  }
}

@keyframes goLightning {
  20%,
  70% {
    opacity: .2;
    background-image: url("/images/lightning22.jpg");
  }
  40%,
  80% {
    opacity: 0;
  }
}

.weather-dusk .weather-bg {
  background-color: #a98197;
  background-image: url(/images/bg-weather-dusk.jpg);
}

.weather-dusk .blur-bg {
  background-image: url(/images/bg-weather-dusk-blur.jpg);
}

.weather-container {
  padding: .2rem .2rem 0;
  position: relative;
}
.weather-detail{
  /* padding-bottom: 2.5rem; */
  padding-bottom: 1rem;
  margin-top: 2.5rem;
}
.weather-func {
  position: absolute;
  top: 2.8rem;
  right: 1.1rem;
}
.warning_wrap {position: absolute;left:0.2rem;top:1rem;}
.warning_wrap>li {padding:.05rem;background:#6caef8;margin-bottom:.05rem;}
.warning_img {width:1.3rem;}

.weather-container .line_to {position: absolute;height:.45rem;line-height:.45rem;font-size:.2rem;border-top-left-radius: .25rem;border-bottom-left-radius:.25rem;overflow: hidden;color:white;opacity: .7;right:0;padding-right:.1rem;}

.line_to>img {height:0.35rem;margin-top:.05rem;margin-left:.1rem;}

.to_radar {top:.7rem;background:linear-gradient(to bottom,#ffb878,#e57849);}
.to_more_warning {top:1.25rem;background:linear-gradient(to bottom,#ff8e78,#ed422b);}
.to_ocean {top:1.8rem;background:linear-gradient(to bottom,#78f1ff,#49a5e5);}
.to_typhoon {top:2.35rem;background:linear-gradient(to bottom,#78a8ff,#5f49e5);}

.language {
  float: right;
  margin-top: .2em;
  width: .333333rem;
  height: .333333rem;
  background: url("/images/icons/英文.png") no-repeat center/contain;
}
.language.act {
  background: url("/images/icons/中文.png") no-repeat center/contain;
}
.weather-func .voice {
  box-sizing: content-box;
  width: 1.9em;
}

.weather-func .map {
  width: 1.7em;
  margin-left: .791em;
}

.weather-info {
  float: left;
  margin-top: 0.3em;
}

.weather-location {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.weather-search {
  float: left;
}
.search {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: .6em;
}

.weather-info .weather-text {
  line-height: 1;
}
.weather-time .weather-text h2{
  font-weight: normal;
  margin-top: 1em;
  font-size: .20rem;
  color: rgba(255, 255, 255, .6);
}
.weather-text h2 {
  font-weight: 600;
  margin-top: .25em;
  font-size: .216667rem;
  color: #fff;
}

.weather-text h3 {
  display: none;
  font-size: .24rem;
  color: rgba(255, 255, 255, .6);
}

.weather-temp {
  margin-bottom: 1.5em;
  line-height: 1;
  color: #fff;
  text-align: center;
}

.weather-temp .temp-container {
  margin-bottom: 2.3em;
  text-align: center;
  padding-left: 8em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.weather-temp .temp-number {
  font-size: 1.6rem;
}

.weather-temp .temp-text {
  margin-left: .75em;
  padding: 1em 0 .75em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.temp-text .temp-tq {
  font-size: 1em;
}
.weather-sk {
  font-size: .3rem;
  margin-left: .5em;
}
.weather-temp .temp-circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: .23em solid #fff;
  background: transparent;
}

.weather-temp .temp-unit {
  font-size: 2em;
}

.weather-temp .temp-info {
  line-height: 1.4;
  font-size: .22rem;
}

.temp-info li {
  float: left;
}
.temp-info li img{
  height: 0.3rem;
  width: 0.3rem;
  margin-right: 0.2rem;object-fit:contain;
}
.temp-info li span{
  display: inline-block;
  height: .3rem;
  line-height: .3rem;
  text-align: center;
  width: 0.6rem;
  font-size: 0.22rem;
  border-radius: .0625rem;
  margin-right: 0.2rem;
}
.temp-info .temp-body {
  background-image: url(/images/temp-body.png);
  background-size: .6em auto;
}

/* .temp-info .humi {
  background-image: url(../images/humi.png);
  background-size: .6em auto;
}

.temp-info .wind {
  background-image: url(../images/wind.png);
  background-size: .9em auto;
} */

.square-bg {
  border-radius: .2em;
  margin-right: .9em;
  font-size: .18rem;
  line-height: 1.6;
  min-height: 1.6em;
  color: #fff;
  font-weight: normal;
  width: 2.5em;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.square-bg img {
  width: 1em;
}

.weather-predict-item .square-bg {
  margin: 0;
  margin-bottom: 1em;
}

.weather-alarm {
  line-height: 1;
  font-size: .3rem;
}

.weather-alarm li {
  margin-bottom: .75em;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.weather-alarm a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
}

.weather-alarm .square-bg.alarm-yellow {
  background: #fff100;
}

.weather-alarm .square-bg.alarm-blue {
  background: #2d61d7;
}

.weather-alarm .square-bg.alarm-orange {
  background: #f17903;
}

.weather-alarm .square-bg.alarm-red {
  background: #e60012;
}

.weather-alarm .warning-img {
  font-size: .18rem;
  width: 2.5em;
  margin-right: .9em;
}

.weather-air {
  line-height: 1;
}

.weather-air .air-quality {
  font-size: .3rem;
  font-weight: bold;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
}

.square-bg.air-1 {
  background: #0aca3f;
}

.square-bg.air-2 {
  background: #ffc000;
}

.square-bg.air-3 {
  background: #ff8a00;
}

.square-bg.air-4 {
  background: #ed4500;
}

.square-bg.air-5 {
  background: #be19cb;
}

.square-bg.air-6 {
  background: #a70213;
}
.ranking{
  width: 80%;
  margin: 0 auto;
}
.weather-air .air-ranking {
  font-size: .24rem;
  width: 3rem;
  color: rgba(255, 255, 255, 1);
  margin-left: .4rem;
  width: 3.9rem;
  margin-top: 0.2rem;
  padding: .2em .75em;
  padding-right: 2.208em;
  border-radius: .1em;
  background: rgba(0, 0, 0, .25) url(/images/arrow.png) right .75em center no-repeat;
  background-size: 0.75em auto;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.weather-air .air-ranking.active {
  background-image: url(/images/arrow-up.png);
}

.air-ranking .rank {
  font-weight: bold;
  color: #fff;
}

.weather-air .rank-list {
  position: absolute;
  padding: 0 .125rem;
  left: 1.2rem;
  z-index: 444;
  display: none;
  width: 61%;
  line-height: 2;
  text-align: center;
  border-radius: .2em;
}

.rank-list thead {
  background: #4793d7;
  height: .5rem;
  line-height: .5rem;
  border-radius: .083333rem;
}

.rank-list tbody {
  background: rgba(255, 255, 255, 1);
}

.rank-list thead tr {
  color: #fff;
}

.rank-list tr {
  color: rgba(40, 40, 40, .8);
}

/* .rank-list tbody tr:nth-of-type(1),
.rank-list tbody tr:nth-of-type(2),
.rank-list tbody tr:nth-of-type(3) {
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
} */
.rank-list tbody tr:nth-of-type(1){
  color: #4793d7;
}
.rank-list tr.local {
  color: #359eff !important;
}

.rank-list tr:nth-of-type(even) {
  background: rgba(53, 158, 255, .2);
}

.weather-rain {
  background: rgba(10, 11, 37, .4);
  padding-bottom:1em;
  position: relative;
}

.weather-rain h3 {
  color: #fff;
  font-size: .3rem;
  line-height: 3;
  font-weight: bold;
  padding-left: .2rem;
}

.weather-rain h3 span {
  font-size: .2rem;
  line-height: 1.4;
  margin-left: .3em;
}

.weather-rain p {
  text-align: center;
}

.rain-main {
  position: relative;
}

.rain-label {
  width: 100%;
  height: 100%;
  padding: .3em .8em 1.3em 1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: absolute;
  right: 0;
  top: 0;
}

.rain-label span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: .2rem;
  border-top: 1px dashed rgba(255, 255, 255, .5);
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.rain-label span:first-child {
  border: none;
}

.rain-container {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-x: scroll;
}

.yuntu-container {
  position: relative;
  width: 100%;
  height: 70vw;
}

.yuntu-container .border {
  width: 100%;
  height: .3em;
  position: absolute;
  left: 0;
  background: rgba(0, 0, 0, .4);
}

.yuntu-container .border.border-top {
  top: 0;
}

.yuntu-container .border.border-bottom {
  bottom: 0;
}
.page_link {display:flex;align-items: center;justify-content: space-between;padding:2.5em 1em 0;}
  .page_link li a {color:#fff;}
  .page_link li { background:rgba(0, 0, 0, 0.5); height:.5rem; line-height:.5rem; padding:0 .1rem; border-radius:.25rem; -webkit-border-radius:.25rem; -moz-border-radius:.25rem; -ms-border-radius:.25rem; -o-border-radius:.25rem; }
    .page_link li span {display: inline-block;padding: 0 .1rem;}
    .page_link li span:first-child {font-size:.3rem;}
    .link_arrow {display:inline-block;width:.3rem;height:.2rem;line-height:1.8;font-size:.15rem;background: url('/images/arrow.png') center center no-repeat;background-size: .2rem .12rem;}
    .active {background-image: url('/images/arrow-t.png');}
.time_bar {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#time_bar {
  width: calc(100% - 60px);
  height: 40px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  z-index: 999;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#time_bar>ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 20px;
}

#time_bar>ul>li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 10px;
  text-align: center;
  height: 100%;
  background-color: #8fc9ff;
  box-sizing: border-box;
  color: #fff;
}

#time_bar>ul>li.act {
  background-color: #329cff;
}

#time_bar .curTime {
  font-size: .2rem;
  color: #329cff;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

#btn_play {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999
}

#btn_play .bg {
  background: url(/images/bg_play.png) center 1px no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#btn_play .btn {
  width: 100%;
  height: 100%;
  background-image: url(/images/btn_play.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%
}

@-webkit-keyframes circle {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

@keyframes circle {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

#btn_play.pause .bg {
  -webkit-animation-name: circle;
          animation-name: circle;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear
}

#btn_play.pause .btn {
  background-image: url(/images/btn_pause.png)
}

.weather-tt {
  background: rgba(0, 0, 0, .4);
  border-top: .125em solid #ffe000;
  border-bottom: .125em solid rgba(0, 0, 0, 0);
  margin-bottom: .066667rem;
  padding: .2rem 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
}

.weather-tt li {
  font-size: .24rem;
  line-height: 1.6;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.weather-tt li h5 {
  font-size: .24rem;
  font-weight: bold;
}

.weather-tt li h4,
.weather-tt li p {
  color: rgba(255, 255, 255, .6);
  font-weight: normal;
}

.weather-tt li.weather-today {
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.tt-container .tq {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.tt-container .tq img {
  width: 2.5em;
  margin-right: .5em;
}

.weather-forecast {
  width: 100%;
  font-size: .28rem;
  line-height: 2;
  margin: .751em 0 1.4em;
  background: rgba(0, 0, 0, .4);
  border-radius: .2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.weather-forecast li {
  border-radius: .2em;
  color: rgba(255, 255, 255, .6);
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.weather-forecast li.active {
  color: rgba(255, 255, 255, 1);
  background: #359eff;
}

.weather-predict {
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 1em;
}

.accurate-container,.predict-container {
  width: 200%;
}

.weather-predict-list {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.weather-predict-item {
  color: rgba(255, 255, 255, .6);
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.weather-predict-item h4 {
  width: 100%;
  line-height: 2.4;
  padding-bottom: .2em;
  text-align: center;
  font-weight: normal;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
}

.weather-predict .weather-predict-item time {
  margin-top: .2em;
}

.weather-predict-item p {
  line-height: 1.4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.weather-predict-item.active h4::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0em;
  height: .25em;
  background: #fff;
}

.weather-predict-item img {
  width: 1.708em;
}

.weather-predict-item .fx {
  width: 1em;
}

.weather-day {
  margin-bottom: .4em;
}

.weather-day img {
  margin-top: 2em;
}

.weather-night img {
  margin-bottom: 2em;
}

.fx {
  width: .86em;
  margin: 0 .4em;
  -webkit-transform-origin: 50% 40%;
          transform-origin: 50% 40%;
}

.fx.wind-1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.fx.wind-2 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.fx.wind-3 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.fx.wind-4 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.fx.wind-5 {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.fx.wind-6 {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.fx.wind-7 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.fx.wind-8 {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.fx.wind-9 {
  -webkit-animation: spin_2582 2.5s linear infinite;
          animation: spin_2582 2.5s linear infinite;
}

@-webkit-keyframes spin_2582 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  60% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
}

@keyframes spin_2582 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  60% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
}

.w-container {
  width: 100vw;
  overflow-x: hidden;
}

.search-panel {
  width: 0;
  min-height: 100vh;
  -webkit-transition: all .4s;
  transition: all .4s;
  color: #828282;
  background: #f7f6f4;
  box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.6);
  padding: 0;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.search-panel.search-show {
  width: 80.9375vw;
  padding: 0 1.25em;
}

.weather-wrapper.search-show {
  margin-left: 80.9375vw;
}

.search-panel input {
  font: inherit;
  width: 100%;
  padding: .25em 1em;
  background: transparent;
  border: .0833em solid #dcdcdc;
  border-radius: .3em;
  margin-top: 2.0833em;
}

.search-list {
  width: 100%;
  font-size: .28rem;
  margin-top: 2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

.search-list li {
  cursor: pointer;
  padding: .2em .8em .5em;
}

.search-list li a {
  color: #828282;
}

.search-copy {
  line-height: 2;
  margin-top: 2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
/* main element */
.weather {
  overflow: hidden;
}
/* pseudo elements: positioning and setup */
.weather:before, .weather:after {
  content: "";
  position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
  z-index: 1;
  pointer-events: none;
  
  background: transparent repeat;
  opacity: 0.5;
  
  -webkit-transform: rotate(10deg);
  
          transform: rotate(10deg);
  
  -webkit-animation-name: weather;
  
          animation-name: weather;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.weather:after {
  opacity: 0.7;
  -webkit-animation-name: weather2;
          animation-name: weather2;
}
/* rain (fast, rain.png) */
.weather.rain:before, .weather.rain:after {
  background-image: url(/images/rain.png);
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.weather.rain:after {
  -webkit-animation-duration: 4.5s;
          animation-duration: 4.5s;
}
/* snow (slow, snow.png) */
.weather.snow:before, .weather.snow:after {
  background-image: url(/images/snow.png);
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}
.weather.snow:after {
  -webkit-animation-duration: 14s;
          animation-duration: 14s;
}
/* animation keyframes */
@-webkit-keyframes weather {
  from { background-position: 0 0px; }
  to { background-position: 0 1024px; }
}
@keyframes weather {
  from { background-position: 0 0px; }
  to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
  from { background-position: 64px 64px; }
  to { background-position: 64px 1088px; }
}
@keyframes weather2 {
  from { background-position: 64px 64px; }
  to { background-position: 64px 1088px; }
}
/*loading*/
.loading-en {
  display: none;
}
.en .loading-ch {
  display: none;
}
.en .loading-en {
  display: block;
}
.loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index:10000;
  width: 100vw;
  height: 100vh;
  background-color:rgba(208,208,208,0.8);
}
.loading_tip{
  width: 8.0em;
  height: 8.0em;
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-4em;
  margin-top: -4em;
  background-color:rgba(208,208,208,0.3);
  box-sizing:border-box;
  border:1px solid #fff;
  border-radius:50%;
}
.loading_tip>.text{
  background:#000;
  text-align:center;
  width:7.0em;
  height:7.0em;
  position:absolute;
  box-sizing:border-box;
  border:1px solid #fff;
  left:50%;
  top:50%;
  margin-left: -3.5em;
  margin-top:-3.5em;
  line-height:7em;
  color:#fff;
  border-radius:50%;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.loading_tip>.wrapper{
  width: 4em;
  height: 8.0em;
  position: absolute;
  top:0;
  overflow: hidden;
}
.wrapper.right{
  right:0;
}
.wrapper.left{
  left:0;
}
.loading_tip>.wrapper>.circleProgress{
  width: 6em;
  height: 6em;
  border:1em solid transparent;
  border-radius: 50%;
  position: absolute;
  top:0;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-sizing: content-box;
}
.loading_tip>.wrapper>.rightcircle{
  border-top:1em solid #0170fe;
  border-right:1em solid #0170fe;
  right:0;
  -webkit-animation: circleProgressLoad_right 5s linear infinite;
          animation: circleProgressLoad_right 5s linear infinite;
}
.loading_tip>.wrapper>.leftcircle{
  border-bottom:1em solid #0170fe;
  border-left:1em solid #0170fe;
  left:0;
  -webkit-animation: circleProgressLoad_left 5s linear infinite;
          animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
  0%{
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
  }
  50%,100%{
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
  }
}
@keyframes circleProgressLoad_right{
  0%{
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
  }
  50%,100%{
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
  }
}
@-webkit-keyframes circleProgressLoad_left{
  0%,50%{
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
  }
  100%{
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
  }
}
@keyframes circleProgressLoad_left{
  0%,50%{
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
  }
  100%{
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
  }
}

/*================ 文字 ===============*/
@-webkit-keyframes loading_text {
0%, 100% {
  /*-moz-transform: scale(1) rotateZ(0deg);*/
  /*-ms-transform: scale(1) rotateZ(0deg);*/
  /*-webkit-transform: scale(1) rotateZ(0deg);*/
  /*transform: scale(1) rotateZ(0deg);*/
  opacity: 1;
}

26% {
  /*-moz-transform: scale(1.1) rotateZ(12deg);*/
  /*-ms-transform: scale(1.1) rotateZ(12deg);*/
  /*-webkit-transform: scale(1.1) rotateZ(12deg);*/
  /*transform: scale(1.1) rotateZ(12deg);*/
  opacity: 0.2;
}

76% {
  /*-moz-transform: scale(0.8) rotateZ(-8deg);*/
  /*-ms-transform: scale(0.8) rotateZ(-8deg);*/
  /*-webkit-transform: scale(0.8) rotateZ(-8deg);*/
  /*transform: scale(0.8) rotateZ(-8deg);*/
  opacity: 0.6;
}
}
@keyframes loading_text {
0%, 100% {
  /*-moz-transform: scale(1) rotateZ(0deg);*/
  /*-ms-transform: scale(1) rotateZ(0deg);*/
  /*-webkit-transform: scale(1) rotateZ(0deg);*/
  /*transform: scale(1) rotateZ(0deg);*/
  opacity: 1;
}

26% {
  /*-moz-transform: scale(1.1) rotateZ(12deg);*/
  /*-ms-transform: scale(1.1) rotateZ(12deg);*/
  /*-webkit-transform: scale(1.1) rotateZ(12deg);*/
  /*transform: scale(1.1) rotateZ(12deg);*/
  opacity: 0.2;
}

76% {
  /*-moz-transform: scale(0.8) rotateZ(-8deg);*/
  /*-ms-transform: scale(0.8) rotateZ(-8deg);*/
  /*-webkit-transform: scale(0.8) rotateZ(-8deg);*/
  /*transform: scale(0.8) rotateZ(-8deg);*/
  opacity: 0.6;
}
}
.loader_text {
overflow: hidden;
font-size: 0.8em;
}
.loader_text span {
-webkit-animation: loading_text 1s linear infinite -0.8s;
        animation: loading_text 1s linear infinite -0.8s;
float: left;
}
.loader_text .span2 {
-webkit-animation: loading_text 1s linear infinite -0.2s;
        animation: loading_text 1s linear infinite -0.2s;
}
.loader_text .span3 {
-webkit-animation: loading_text 1s linear infinite -0.5s;
        animation: loading_text 1s linear infinite -0.5s;
}
.loader_text .span4 {
-webkit-animation: loading_text 1s linear infinite -1.1s;
        animation: loading_text 1s linear infinite -1.1s;
}
.loader_text .span5 {
-webkit-animation: loading_text 1s linear infinite -0.36s;
        animation: loading_text 1s linear infinite -0.36s;
}
.loader_text .span6 {
-webkit-animation: loading_text 1s linear infinite -0.65s;
        animation: loading_text 1s linear infinite -0.65s;
}
.loader_text .span7 {
-webkit-animation: loading_text 1s linear infinite -0.93s;
        animation: loading_text 1s linear infinite -0.93s;
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
  html {
    font-size: 70px !important;
  }
}

@media only screen and (min-width: 481px) and (max-width: 720px) {
  html {
    font-size: 80px !important;
  }
}

@media only screen and (min-width: 721px) and (max-width: 1440px) {
  html {
    font-size: 160px !important;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  html {
    font-size: 220px !important;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1920px) {
  html {
    font-size: calc(50px + (300 - 50) * ((100vw - 320px)/(1920 - 320))) !important;
  }
}
/*# sourceMappingURL=index.css.map */