@font-face {
  font-family: 'Microsoft YaHei';
}

div,
p,
span,
ul,
li,
dt,
dd,
button {
  font-family: 'Microsoft YaHei';
}

select,
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
  border-color: transparent;
  margin: 0;
  padding: 0;
}

button {
  outline: none;
}

.conteners {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/*#container{position: relative; z-index: 999;}*/
.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.typhoonTrack {
  width: 5.1rem;
  font-size: 0.37333rem;
}

.tyTrackPo {
  position: relative;
  right: 0.5rem;
}

.typhoonTrack .typhoonTrack_left {
  width: 2rem;
  height: 3.7rem;
  background-color: #58cdc6;
  color: #f2f3f8;
  float: left;
  display: table;
  border-radius: 0.08rem 0 0 0.08rem;
}

.typhoonTrack .typhoonTrack_left ul {
  background: linear-gradient(left, #4bcfab, #5bc1da);
  background: -webkit-linear-gradient(left, #4bcfab, #5bc1da);
  background: -o-linear-gradient(left, #4bcfab, #5bc1da);
  background: -moz-linear-gradient(left, #4bcfab, #5bc1da);
  background: -ms-linear-gradient(left, #4bcfab, #5bc1da);
}

.typhoonTrack .typhoonTrack_left ul,
.typhoonTrack .typhoonTrack_right ul {
  display: table-cell;
  vertical-align: middle;
}

.typhoonTrack .typhoonTrack_left ul li,
.typhoonTrack .typhoonTrack_right ul li {
  padding-left: 0.3rem;
  white-space: nowrap;
}

.typhoonTrack .typhoonTrack_left ul li:nth-last-child(1),
.typhoonTrack .typhoonTrack_right ul li:nth-last-child(1) {
  margin-bottom: 0;
}

.typhoonTrack .typhoonTrack_right {
  width: 2.3rem;
  height: 3.7rem;
  background-color: #fff;
  color: #1c1c1c;
  float: left;
  display: table;
  position: relative;
  border-radius: 0 0.08rem 0.08rem 0;
  white-space: nowrap;
}

.triangleDown {
  width: 0;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.26667rem solid #fff;
  position: absolute;
  top: 4.46667rem;
  left: 0.46667rem;
}

.leaflet-popup-tip2 {
  width: 0.25rem;
  height: 0.25rem;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: white;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  display: none;
}

.leaflet-popup-tip-containers {
  margin: 0 auto;
  width: 0.54rem;
  height: 0.27rem;
  position: relative;
  overflow: hidden;
  right: 0.5rem;
}

.tyswNav {
  width: 100%;
  height: 1.1rem;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}

.tyswNav ul {
  height: 1.2rem;
}

.tyswNav ul li {
  float: left;
  position: relative;
  width: calc(25% - 0.4rem);
  padding: 0 0.2rem;
  text-align: center;
  line-height: 1.1rem;
  font-size: 0.346667rem;
  color: #6d6d6c;
  cursor: pointer;
}

.tyswNav ul li:nth-child(1) span:nth-child(1) {
  width: 1rem;
}

.tyswNav ul li .preImg {
  display: inline-block;
  width: 0.24rem;
  height: 0.18rem;
  margin-left: 0.106667rem;
}

/*.tyswNav .tyList span:nth-child(2),.tyswNav .rdList span:nth-child(2), .tyswNav .tsList span:nth-child(2){background:url(../assets/typhoon_dropdown.png)no-repeat center center;}*/
.preImg {
  background: url(../assets/typhoon_dropdown.png) no-repeat center center;
  background-size: 0.24rem;
}

/*.tyswNav .tyList span:nth-child(2).af,.tyswNav .rdList span:nth-child(2).af,.tyswNav .tsList span:nth-child(2).af{background:url(../assets/typhoon_dropdown_pre.png)no-repeat center center;background-size:0.24rem;}
    .tyswNav .tyList.on,.tyswNav .rdList.on,.tyswNav .swList.on,.tyswNav .tsList.on{color:#58cdc7;}*/

.simityList {
  border-radius: 0.08rem;
  background: white;
}

.cloudMap {
  bottom: 0.666667rem;
  background: white;
  border-radius: 0.08rem;
  margin-top: 0.2703rem;
}

.tySimilar {
  margin-bottom: 0.2rem;
}

.typhoonList ul li img,
.ranging ul li img,
.mainCityRanging ul li img,
.typhoonPublish ul li img,
.tySimilar ul li img,
.cloudMap ul li img,
.typhoonList ul li img,
.historyTyphone ul li img {
  width: 0.7333rem;
  height: 0.73333rem;
  cursor: pointer;
  max-width: 28px;
  max-height: 28px;
}

@media screen and (min-width: 400px) {

  .typhoonList ul li img,
  .ranging ul li img,
  .mainCityRanging ul li img,
  .typhoonPublish ul li img,
  .tySimilar ul li img,
  .cloudMap ul li img,
  .typhoonList ul li img,
  .historyTyphone ul li img {
    cursor: pointer;
  }
}

.similarTy_one.on,
.similarTy_two.on,
.similarTy_parameter.on {
  color: #58cdc7;
}

.cloudMap li .menusName,
.ranging .menusName,
.typhoonList .menusName,
.typhoonPublish .menusName,
.tySimilar .menusName,
.historyTyphone .menusName,
.mainCityRanging .menusName {
  font-size: 0.28rem;
  color: rgba(51, 51, 51, 1);
}

.mainCityRanging .menusName,
.tySimilar .menusName {
  line-height: 0.4rem;
}

.tyCl_list ul li {
  padding: 0.1351rem;
  text-align: center;
}

.typhoonPublish ul li {
  position: relative;
}

.typhoonPublish .publishList {
  position: absolute;
  right: 2.1rem;
  top: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  display: none;
}

.typhoonPublish .publishList span {
  display: flex;
  align-items: center;
  line-height: 0.5rem;
  white-space: nowrap;
  font-size: 0.3rem;
  color: rgba(124, 124, 124, 1);
  cursor: pointer;
  margin-bottom: 0.1351rem;
}

/* .typhoonPublish .publishList span.publish_selected,
    .typhoonPublish .publishList span:hover {
        color: rgba(71, 200, 192, 1);
    } */
.typhoonPublish .publishList span::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-right: 5px;
  display: inline-block;
  border: 1px solid rgba(165, 165, 165, 1);
  border-radius: 2px;
  transition: all 0.3s linear;
}

.typhoonPublish .publishList span.publish_selected::before {
  background-color: rgba(71, 200, 192, 1);
  border-color: rgba(71, 200, 192, 1);
  background-image: url(../assets/gou@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% 90%;
}

#zmap {
  position: absolute !important;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}

.address_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.typhoonPublish .publishList span.publish_selected_bj::before {
  background-color: rgba(71, 200, 192, 1);
  border-color: rgba(71, 200, 192, 1);
  background-image: url(../assets/gou@3x.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% 90%;
}

.typhoonDetail_list {
  height: 5.33333rem;
  width: 1.06667rem;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
  border-radius: 0.08rem;
  position: relative;
  left: 8.4rem;
  top: 1.70667rem;
}

.typhoonDetail_list ul li {
  float: left;
}

.typhoonDetail_list ul li img {
  width: 0.93333rem;
  height: 0.93333rem;
  margin: 0.06667rem auto 0 0.06667rem;
}

.cloudMapIn {
  font-size: 0.346667rem !important;
}

.tyCl_list {
  position: absolute;
  z-index: 9999;
  right: -2rem;
  border-radius: 0.08rem;
  margin-top: 0.2703rem;
  top: 0rem;
  transition: all 0.5s;
}

.rainstormImg:before,
.cloudImg:before,
.actualImg:before {
  content: '';
  position: absolute;
  left: calc(50% - 0.08rem);
  bottom: -0.1rem;
  border-top: 0.12rem solid #fff;
  border-left: 0.08rem solid transparent;
  border-right: 0.08rem solid transparent;
}

.typhoonImg:before {
  content: '';
  position: absolute;
  left: calc(30% - 0.08rem);
  bottom: -0.1rem;
  border-top: 0.12rem solid #fff;
  border-left: 0.08rem solid transparent;
  border-right: 0.08rem solid transparent;
}

/* .rainstormImg{width: 150%!important;left: -28%!important;padding:0.1rem 0;} */
.typhoonImg ul li,
.cloudImg ul li,
.rainstormImg ul li,
.actualImg ul li {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
  transition: all 1s;
}

.radarImg {
  left: 5.3rem;
}

.radarImg ul li {
  width: 2rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.37333rem;
  color: #a3a3a3;
}

.typhoonImg ul .typhoonImg_one.on,
.typhoonImg ul .typhoonImg_two.on,
.typhoonImg ul .typhoonImg_three.on {
  color: #58cdc6;
}

/* .rainProgressbar{position:fixed;z-index:1000;bottom:0rem;width:100%;height:2.67rem;background-color: #fff;} */
.rainProgressbar,
.radarProgressbar {
  position: fixed;
  z-index: 1000;
  top: -2.67rem;
  left: 3.5%;
  width: 90.5%;
  height: 1.7rem;
  background-color: #fff;
  margin: 0.2703rem;
  border-radius: 0.1622rem;
}

.rainfall_title,
.radar_title {
  height: 0.8rem;
  width: calc(90% - 0.53rem);
  line-height: 0.8rem;
  padding: 0 0.23rem;
  font-size: 0.34rem;
  border-bottom: 1px solid #eee;
}

.progressFrame {
  position: relative;
  width: 80%;
  height: 0.12rem;
  background-color: #d9e3ea;
  top: 0.2rem;
  left: 0.1rem;
}

.progressFrame .progressBar {
  background-color: #58cdc7;
  height: 0.15rem;
  width: 100%;
  position: relative;
  overflow: visible !important;
  border-radius: 0.1622rem;
}

.progressBar p {
  position: absolute;
  z-index: 99;
  width: 0.22rem;
  height: 0.22rem;
  background-color: #58cdc7;
  border: 0.09rem solid #fff;
  box-shadow: 1px 2px 8px #ccc;
  border-radius: 0.4rem;
  right: -0.4rem;
  top: -0.14rem;
}

.progressFrame .grayPoint {
  position: absolute;
  top: 0.3rem;
  z-index: 11;
  background-color: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.2703rem;
  color: rgba(140, 140, 140, 1);
}

.grayPoint.on {
  top: -0.24rem;
  width: 0.45rem;
  height: 0.45rem;
  background-color: #58cdc7;
  border: 0.12rem solid #fff;
  box-shadow: 1px 2px 8px #ccc;
}

/* .grayPoint.in{width: .2rem;height: .2rem;background-color: #58cdc7;border: .12rem solid #58cdc7;} */
.gpOne {
  left: 25%;
}

.gpOne.on {
  left: 25%;
}

.gpTwo {
  left: 50%;
}

.gpTwo.on {
  left: 50%;
}

.gpThree {
  left: 75%;
}

.gpThree.on {
  left: 75%;
}

.gpFour {
  left: 97%;
}

.gpFour.on {
  left: 100%;
}

.gpFive {
  left: 50%;
}

.gpFive.on {
  left: 50%;
}

.gpSix {
  left: 60%;
}

.gpSix.on {
  left: 60%;
}

.gpSeven {
  left: 70%;
}

.gpSeven.on {
  left: 70%;
}

.gpEight {
  left: 80%;
}

.gpEight.on {
  left: 80%;
}

.gpNight {
  left: 90%;
}

.gpNight.on {
  left: 90%;
}

.gpTen {
  left: 100%;
}

.gpTen.on {
  left: 100%;
}

.progressTime {
  position: absolute;
  top: 0.5rem;
  font-size: 0.24rem;
}

.progressTime.on {
  color: #58cdc7;
}

.ptZer {
  left: 6.4%;
}

.ptTen {
  left: 20.7%;
}

.ptTwe {
  left: 36.2%;
}

.ptThi {
  left: 51.6%;
}

.ptFor {
  left: 67%;
}

.ptFif {
  left: 82.2%;
}

.ptZers {
  left: 98.4%;
}

.buttonPlay {
  position: absolute;
  bottom: 0rem;
  right: 0;
  width: 1.3rem;
  height: 1.7rem;
  cursor: pointer;
  border-radius: 0px 0.1622rem 0.1622rem 0px;
  background: #58cdc7;
}

.buttonPlay img {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rainstormImg_inner {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.08rem;
  font-size: 0.37333rem;
  color: #a3a3a3;
  padding: 0 0.1rem;
}

.rainstormImg_inner span {
  width: 50%;
  height: 0.7rem;
  line-height: 0.7rem;
  display: inline-block;
  float: left;
  text-align: center;
}

.mapImg {
  bottom: 0;
  display: none;
  height: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 9;
  border-radius: 0.08rem;
  right: 1.5rem;
  text-align: center;
  padding: 0 0.2rem;
  white-space: nowrap;
  font-size: 0;
}

.cloudImg span,
.mapImg span {
  display: inline-block;
  width: 0.8rem;
  height: 0.56rem;
  margin-right: 0.16rem;
  margin-top: 0.25333rem;
  cursor: pointer;
}

.cloudImg .cloudImg_one.on,
.cloudImg .cloudImg_two.on,
.cloudImg .cloudImg_three.on {
  color: #58cdc6;
}

.mapImg .mapImg_tdt {
  background: url('../assets/typhone_map3@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
}

.mapImg .mapImg_tdt.layer-selected {
  background-image: url('../assets/typhone_map3_pre@3x.png');
}

.mapImg .mapImg_one {
  background: url('../assets/typhone_map1@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
  /* cursor: pointer; */
}

.mapImg .mapImg_one.layer-selected {
  background: url('../assets/typhone_map1_pre@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
}

.mapImg .mapImg_two {
  background: url('../assets/typhoon_infrared@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
}

.mapImg .mapImg_two.layer-selected {
  background: url('../assets/typhoon_infrared_pre@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
}

.mapImg .mapImg_three {
  background: url('../assets/typhone_map3@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
  margin-right: 0px;
}

.mapImg .mapImg_three.layer-selected {
  background: url('../assets/typhone_map3_pre@3x.png') no-repeat 0 0;
  background-size: 0.8rem 0.56rem;
  margin-right: 0px;
}

.similarTy {
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.346667rem;
  color: #a3a3a3;
  position: absolute;
  border-radius: 0.08rem;
  bottom: 0.666667rem;
  left: 1.7rem;
  display: none;
}

.similarTy ul li {
  width: 1.2rem;
  /*padding:0 .2rem;*/
  height: 0.99rem;
  line-height: 0.99rem;
  text-align: center;
  float: left;
}

.similarTy ul li a {
  cursor: pointer;
}

.simiMatch {
  width: 100%;
  position: relative;
  z-index: 99999;
  /* transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -moz-transform: translateY(-100%); */
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.simiMatch .simiMatchHead {
  height: 1.2rem;
  background: #fff;
  padding-top: 0.1rem;
  position: relative;
}

.closeSimi {
  cursor: pointer;
  position: absolute;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  right: 0.5333rem;
  top: 0.4rem;
  background: url(../assets/seas_colse@3x.png) no-repeat 0 0;
  background-size: 0.5rem 0.5rem;
}

.simiMatch .simiMatchHead span:nth-child(1) {
  display: block;
  width: 1.2rem;
  height: 0.2rem;
  background-color: #d6dde3;
  border-radius: 0.08rem;
  cursor: pointer;
  margin: 0 auto;
}

.historyup img {
  display: inline-block;
  width: 0.4865rem;
  height: 0.4865rem;
  /* background: url(../assets/lishijiantou.png)no-repeat 0 0;
        background-size: 0.4865rem 0.4865rem; */
  position: relative;
  top: 0rem;
  left: 0rem;
}

.his_toogle_down {
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.2rem solid #ccc;
}

.his_toogle_up {
  border-bottom: 0.2rem solid #ccc;
  border-top: 0.2rem solid transparent;
  margin-top: -0.2rem;
}

.historyup.down img {
  transform: rotate(180deg);
}

.historyTitle {
  position: relative;
  color: #a6a6a6;
}

.historyup {
  position: absolute;
  left: 50%;
  top: 0.2rem;
  transform: translateX(-50%);
}

.typhoonlist li {
  cursor: pointer;
  font-size: 0.3043rem;
  font-family: PingFang SC;
  font-weight: 500;
}

.onlist li {
  cursor: pointer;
}

/* .historyup{
        position: relative;
        top: -0.3rem;
        left: 2rem;
        border-left: 90px solid transparent;
        border-bottom: 33px solid #58cdc7;
        border-right: 100px solid transparent;
        } */
.simiMatch .simiMatchHead p {
  color: #1c1c1c;
  font-size: 0.42rem;
  line-height: 1rem;
  margin-left: 0.533333rem;
}

.simiMatch .simiMatchCon {
  background-color: white;
  padding: 0 0.5rem 0.5rem 0.5rem;
  vertical-align: middle;
}

.simiMatch .simiMatchCon ul {
  max-height: 3rem;
  overflow-y: auto;
  position: relative;
  display: block;
}

.simiMatch .simiMatchCon ul li {
  float: left;
  height: 0.8rem;
  width: 2.65rem;
  margin: 0 0.15rem 0.2rem 0.15rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.08rem;
  background-color: rgba(242, 242, 242, 1);
  color: #68686a;
  font-size: 0.4rem;
  cursor: pointer;
  border-radius: 0.4rem;
}

.simiMatch .simiMatchCon ul li:nth-last-child(1) {
  margin-right: 0 !important;
}

.simiMatch .simiMatchCon ul li.simSelected {
  color: #fff;
  background-color: #58cdc7;
}

.tycontent_head,
.seaWave_head,
.live_head {
  height: 1.06667rem;
  line-height: 1.06667rem;
  border-bottom: 1px solid #d9e3ea;
}

.tycontent_head ul,
.seaWave_head ul {
  width: 4rem;
  margin: 0 auto;
  font-size: 0.34667rem;
  color: #a3a3a3;
}

.seaWave_head ul,
.tycontent_head ul {
  position: relative;
}

.typhoonLine {
  height: 0.86667rem;
  width: 0.8rem;
  border-bottom: 0.035rem solid #58cdc6;
  position: absolute;
  left: 0;
}

.swiperLine {
  height: 0.86667rem;
  width: 0.8rem;
  border-bottom: 0.035rem solid #58cdc6;
  position: absolute;
  left: 0.55rem;
  z-index: -1;
}

.seaWave_head ul li {
  float: left;
  margin: 0 0.26667rem;
}

.tycontent_head ul p {
  height: 0.86667rem;
  width: 0.8rem;
  text-align: center;
}

.seaWave_head p {
  height: 0.86667rem;
}

.tycontent_head ul .tycontent_head_active,
.seaWave_head ul .tycontent_head_active {
  color: #000;
  transition: color 1s linear;
  -moz-transition: color 1s linear;
  -webkit-transition: color 1s linear;
  -ms-transition: color 1s linear;
  -o-transition: color 1s linear;
}

.tycontent_head ul li {
  float: left;
}

.tycontent_head ul li:nth-child(2) {
  margin: 0 0.53333rem;
}

.tycontentDetail .typhoonDetailLi,
.swcontentDetail .seawaveDetailLi {
  height: 5.25333rem;
}

.typhoon_pre .typhoon_date,
.seaWaveOcean_pre .seaWaveOcean_date {
  height: 1.06rem;
  font-size: 0.34667rem;
  color: #000;
  position: relative;
}

.typhoon_pre .typhoon_date {
  height: 1.76rem !important;
}

.typhoon_pre .typhoon_date ul,
.seaWaveOcean_pre .seaWaveOcean_date #seaWaveMsg {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
}

.typhoon_pre .typhoon_date ul {
  width: 100%;
}

.typhoon_pre .typhoon_date ul li {
  width: 16.66% !important;
}

.typhoon_pre .typhoon_date ul li,
.seaWaveOcean_pre .seaWaveOcean_date ul li {
  float: left;
  text-align: center;
  width: 1.66667rem;
}

.typeDate_seaWave ul li {
  width: 2rem;
}

.oceanPreUl {
  width: 100%;
}

.oceanPreUl li {
  width: 14.28% !important;
}

.typhooonTrend_chart {
  background: #f2f3f8;
  height: 5.25333rem;
}

.typhoonDate_seaWave p,
.typhoonSeawave_ocean p {
  margin: 0.08rem 0 !important;
}

.typhoonDate_div p:nth-child(1),
.typhoonDate_div1 p:nth-child(1) {
  margin-bottom: 0.4rem;
}

.typhoonDate_div,
.typhoonDate_div1,
.typhoonSeawave_div,
.typhoonSeawave_ocean,
.oceanSeawave_div {
  position: relative;
  width: 0.85rem;
  margin: 0 auto;
  padding: 0.16rem 0;
  border-radius: 0.05333rem;
}

.typhoon_pre .typhoon_date .typhoon_active {
  background-color: #0f9;
}

.tydate_active,
.ocean_active {
  color: #fff;
}

.typhoonDate_div:before,
.typhoonDate_div1:before,
.typhoonDate_seaWave:before,
.oceanSeawave_div:before {
  z-index: -1;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.05333rem;
  opacity: 0;
  background: linear-gradient(left, #4bcfab, #5bc1da);
  background: -webkit-linear-gradient(left, #4bcfab, #5bc1da);
  background: -o-linear-gradient(left, #4bcfab, #5bc1da);
  background: -moz-linear-gradient(left, #4bcfab, #5bc1da);
  background: -ms-linear-gradient(left, #4bcfab, #5bc1da);
}

.tydate_active:before,
.ocean_active:before {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.typhoon_detales,
.typhoon_detales1 {
  height: 3.52rem;
  padding: 0 0.53333rem;
  background-color: #f2f3f8;
  position: relative;
}

.seaWave_chart {
  background-color: #f2f3f8;
  height: 100%;
}

.typhoon_detales ul li,
.typhoon_detales1 ul li {
  float: left;
  width: 3.13333rem;
}

.typhoon_detales ul li:nth-child(2n),
.typhoon_detales1 ul li:nth-child(2n) {
  text-align: right;
  width: 1.33333rem;
}

.typhoon_detales table,
.typhoon_detales1 table {
  width: calc(100% - 1.06666rem);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.typhoon_detales table tr td {
  padding-left: 0.4rem !important;
}

.typhoon_detales table tr:nth-child(2) td,
.typhoon_detales1 table tr:nth-child(2) td {
  padding: 0.4rem 0;
}

.typhoon_detales table tr:nth-child(3) td,
.typhoon_detales1 table tr:nth-child(3) td {
  padding-bottom: 0.4rem;
}

.typhoon_detales table tr td:nth-child(2n + 1),
.typhoon_detales1 table tr td:nth-child(2n + 1) {
  width: 2.8rem;
  font-size: 0.37333rem;
  color: #a3a3a3;
}

.typhoon_detales table tr td:nth-child(2n),
.typhoon_detales1 table tr td:nth-child(2n) {
  width: 1.8rem;
  font-size: 0.37333rem;
  color: #1c1c1c;
}

.tycontener_bottTyphoon,
.tycontener_bottSeawave,
.live_bottom {
  position: fixed;
  bottom: -5.4rem;
  background-color: #fff;
  height: 5.4rem;
  z-index: 999;
  width: 100%;
}

.tycontener_bottTyphoon {
  bottom: -6.32rem;
  height: 6.32rem !important;
}

.tySeawave_detales,
.live_details {
  position: relative;
  height: 3.3rem;
  padding: 0 0.53333rem;
  background-color: #f2f3f8;
  /*width: calc(100% - 1.06666rem);*/
}

.tySeawave_detales table {
  width: calc(100% - 1.06666rem);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  table-layout: fixed;
  word-break: break-all;
}

.tySeawave_detales table tr td:nth-child(2n + 1) {
  /* width: 1.7rem; */
  font-size: 0.37333rem;
  color: #a3a3a3;
}

.typhoon_detales table tr:nth-child(1) td:nth-child(1):before,
.typhoon_detales table tr:nth-child(1) td:nth-child(3):before,
.typhoon_detales table tr:nth-child(2) td:nth-child(1):before,
.typhoon_detales table tr:nth-child(2) td:nth-child(3):before,
.typhoon_detales table tr:nth-child(3) td:nth-child(1):before,
.typhoon_detales table tr:nth-child(3) td:nth-child(3):before,
.typhoon_detales table tr:nth-child(4) td:nth-child(1):before,
.typhoon_detales table tr:nth-child(4) td:nth-child(3):before {
  position: absolute;
  content: '';
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  top: 0;
}

.typhoon_detales table tr:nth-child(1) td:nth-child(1):before {
  background: url(../assets/typhone_number@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(1) td:nth-child(3):before {
  background: url(../assets/typhone_speed@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(2) td:nth-child(1):before {
  top: 0.4rem;
  background: url(../assets/typhone_longitude@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(2) td:nth-child(3):before {
  top: 0.4rem;
  background: url(../assets/typhone_pressure@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(3) td:nth-child(1):before {
  background: url(../assets/typhone_latitude@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(3) td:nth-child(3):before {
  background: url(../assets/typhone_seven@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(4) td:nth-child(1):before {
  background: url(../assets/sea_weather@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.typhoon_detales table tr:nth-child(4) td:nth-child(3):before {
  background: url(../assets/typhone_ten@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pretable tr td:nth-child(1) {
  width: 20% !important;
}

.tySeawave_pretable tr td:nth-child(2) {
  width: 30% !important;
}

.tySeawave_pretable tr td:nth-child(3) {
  width: 20% !important;
}

.tySeawave_pretable tr td:nth-child(4) {
  width: 30% !important;
}

.oceanPre table tr td:nth-child(1) {
  width: 20%;
  padding-left: 0.4rem;
}

.oceanPre table tr td:nth-child(2) {
  width: 30%;
  padding-left: 0.4rem;
}

.oceanPre table tr td:nth-child(3) {
  width: 20%;
  padding-left: 1.5rem;
}

.oceanPre table tr td:nth-child(4) {
  width: 30%;
  padding-left: 1.1rem;
  white-space: nowrap;
}

.oceanPre table tr td,
.tySeawave_pre table tr td,
.typhoon_detales table tr td {
  position: relative;
}

.oceanPre table tr:nth-child(1) td:nth-child(1):before,
.oceanPre table tr:nth-child(1) td:nth-child(3):before,
.oceanPre table tr:nth-child(2) td:nth-child(1):before,
.oceanPre table tr:nth-child(2) td:nth-child(3):before,
.oceanPre table tr:nth-child(3) td:nth-child(1):before,
.tySeawave_pre table tr:nth-child(1) td:nth-child(1):before,
.tySeawave_pre table tr:nth-child(1) td:nth-child(3):before,
.tySeawave_pre table tr:nth-child(2) td:nth-child(1):before,
.tySeawave_pre table tr:nth-child(2) td:nth-child(3):before,
.tySeawave_pre table tr:nth-child(3) td:nth-child(1):before,
.tySeawave_pre table tr:nth-child(3) td:nth-child(3):before {
  position: absolute;
  left: 0;
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  top: 0;
}

.oceanPre table tr:nth-child(1) td:nth-child(1):before {
  background: url(../assets/sea_weather@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.oceanPre table tr:nth-child(1) td:nth-child(3):before {
  background: url(../assets/sea_direction@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.oceanPre table tr:nth-child(2) td:nth-child(1):before {
  top: 0.4rem !important;
  background: url(../assets/sea_power@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.oceanPre table tr:nth-child(2) td:nth-child(3):before {
  top: 0.4rem !important;
  background: url(../assets/typhone_gust@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.oceanPre table tr:nth-child(3) td:nth-child(1):before {
  background: url(../assets/sea_see@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr td:nth-child(3):before {
  left: 0.4rem !important;
}

.oceanPre table tr td:nth-child(3):before {
  left: 1.1rem !important;
}

.tySeawave_pre table tr td:nth-child(3) {
  padding-left: 0.8rem !important;
}

.tySeawave_pre table tr td:nth-child(4) {
  padding-left: 0.8rem !important;
}

.tySeawave_pre table tr td {
  padding-left: 0.4rem;
}

.tySeawave_pre table tr:nth-child(1) td:nth-child(1):before {
  background: url(../assets/sea_-sea-area@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr:nth-child(1) td:nth-child(3):before {
  background: url(../assets/typhoon_score@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr:nth-child(2) td:nth-child(1):before {
  top: 0.4rem !important;
  background: url(../assets/sea_seahight@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr:nth-child(2) td:nth-child(3):before {
  top: 0.4rem !important;
  background: url(../assets/typhone_gust@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr:nth-child(3) td:nth-child(1):before {
  background: url(../assets/sea_wave@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.tySeawave_pre table tr:nth-child(3) td:nth-child(3):before {
  background: url(../assets/sea_direction@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

/* .tySeawave_pre table tr:nth-child(4) td:nth-child(1):before{background:url(../assets/sea_see@3x.png)no-repeat 0 0;background-size:0.3rem} */
.tySeawave_pre table tr:nth-child(4) td:nth-child(1) i {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  background: url(../assets/sea_see@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
  position: absolute;
  top: 0.4rem;
  left: 0;
}

.tySeawave_detales table tr td:nth-child(2n) {
  /* text-align:right; */
  font-size: 0.37333rem;
  color: #1c1c1c;
}

.tySeawave_detales table tr td {
  white-space: nowrap;
}

.tySeawave_detales table tr:nth-child(2) td {
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
}

.tySeawave_detales table tr:nth-child(4) td {
  padding-top: 0.4rem;
}

.cusLonLat_cusWin,
.together_cusWin,
.preWarn_cusWin,
.history_cusWin {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999;
  font-size: 0.37333rem;
}

.together_center {
  padding: 0 0.5333rem;
  margin-bottom: 0.3rem;
  font-size: 0.34rem;
}

.together_center table {
  width: 100%;
  text-align: center;
  font-size: 0.32rem;
}

.together_center table tr:nth-child(1) {
  color: #58cdc6;
  font-size: 0.32rem;
}

.together_center table tr:nth-child(3) span {
  border-top: 1px solid #58cdc7;
  border-bottom: 1px solid #58cdc7;
  padding: 0.1rem 0.1rem;
}

.together_center table tr td {
  padding: 0.2rem 0;
}

.together_center table tr td select {
  font-size: 0.32rem;
  color: #1c1c1c;
}

.together_center table tr td select {
  /* width:100%; */
  background: url(../assets/typhoon_dropdown.png) no-repeat;
  background-size: 0.24rem;
}

.together_center table tr td:nth-child(1) select {
  background-position: 0.9rem center;
  width: 70%;
}

.together_center table tr td:nth-child(2) select,
.together_center table tr td:nth-child(3) select,
.together_center table tr td:nth-child(4) select {
  background-position: 0.5rem center;
  width: 46%;
}

.cusLonLat_cusDetales,
.preWarn_cusDetales,
.together_cusDetales {
  width: 6.89333rem;
  border-radius: 0.13333rem;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.typhoon_cusWin {
  display: none;
}

.typhoon_cusDetales {
  position: absolute;
  background-color: #fff;
  bottom: 1.4rem;
  left: 0%;
  z-index: 999999;
  width: 100%;
  transition: all 0.5s;
  display: none;
}

.chose_typhoon_cusDetales {
  position: absolute;
  background-color: #fff;
  left: 50%;
  border-radius: 10px;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999999;
  width: 65%;
  transition: all 0.5s;
}

.chose_typhoon_cusDetales .clearfix li {
  display: flex;
}

.chose_typhoon_cusDetales .clearfix li p {
  flex: 1;
}

.typhoon_cusDetales .historyup {
  top: 0rem;
}

.cusDetales_top,
.cusDetales_topTy,
.chose_cusDetales_topTy,
.preWarnDetales_top {
  color: #1c1c1c;
  padding: 0 0.5333rem;
  height: 1rem;
  line-height: 1rem;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(236, 236, 236, 1);
  box-sizing: border-box;
}

.cusLonLat_close,
.typhoon_close,
.chose_typhoon_close,
.together_close,
.preWarnDetales_close {
  cursor: pointer;
  width: 0.34667rem;
  height: 0.34667rem;
  background: url('../assets/seas_colse@3x.png') no-repeat 0 0;
  background-size: 0.34667rem 0.34667rem;
  position: absolute;
  right: 0.5333rem;
  top: 0.22667rem;
}

.cusLonLat_cusDetales .cusDetales_center,
.preWarn_cusDetales .preWarnDetales_center {
  padding: 0 0.533rem;
  background: #fff;
}

.cusDetales_center,
.preWarnDetales_center {
  color: #6c6c6c;
  font-size: 0.34rem;
}

.cusDetales_centerTy {
  font-size: 0.266667rem;
  color: #6d6c6c;
}

.cusDetales_centerTy .clearfix {
  position: absolute;
}

.chose_cusDetales_centerTy {
  padding: 0.5rem;
}

.chose_cusDetales_centerTy select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  border: solid 1px #000;
  height: 0.9rem;
  background-color: #eaeef2;
  border: 0;
  border-radius: 0.08rem;
  font-size: 0.32rem;
  width: 2.2rem;
  color: #1c1c1c;
  background: url('../assets/typhoon_dropdown.png') no-repeat 1.8rem center;
  background-size: 0.24rem;
  padding: 0 11% 0 11%;
  margin-left: -0.08rem;
}

.cusDetales_centerTy .cusDetales_list {
  display: flex;
  width: 100%;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  visibility: hidden;
}

.ele_hide {
  display: none;
}

.cusDetales_centerTy .cusDetales_list p {
  height: 0.8rem;
  background-color: rgba(242, 242, 242, 1);
  border-radius: 0.4rem;
  line-height: 0.8rem;
  font-size: 0.38rem;
  cursor: pointer;
  width: 31%;
  box-sizing: border-box;
  margin: 0.1rem 0;
}

.cusDetales_list_show {
  background-color: rgba(81, 194, 190, 1) !important;
  color: white;
}

.cusDetales_centerTy select::-ms-expand {
  display: none;
}

.cusDetales_centerTy ul li p {
  float: left;
}

.cusLonLat_cusDetales .cusDetales_center dl,
preWarn_cusDetales .preWarnDetales_center dl {
  width: 6.8rem;
  white-space: nowrap;
}

.cusDetales_center dl dt,
.preWarnDetales_center dl dt {
  float: left;
  color: #6d6c6c;
  line-height: 0.93333rem;
  margin-right: 0.26667rem;
}

.cusLonLat_cusDetales .cusDetales_center dl dd,
.preWarn_cusDetales .preWarnDetales_center dl dd {
  margin-bottom: 0.35rem;
}

/* .cusDetales_center .radiusIn:last-child{margin-bottom: 0!important;} */

.cusDetales_center dl dd input,
.cusDetales_centerTy ul li input,
.preWarnDetales_center dl dd input {
  height: 0.9rem;
  background-color: #eaeef2;
  border: 0;
  border-radius: 0.08rem;
  font-size: 0.37333rem;
  text-indent: 0.26667rem;
}

.cusDetales_center dl dd input {
  width: 4.5rem;
  max-width: 5.5rem;
}

.cusDetales_center dl .radiusIn input,
.preWarnDetales_center dl .radiusIn input,
.radiusAdd input {
  width: 2.5rem !important;
  max-width: 2.5rem !important;
  margin-right: 0.1rem;
}

.wrapper {
  overflow-y: auto;
}

.wrapper::-webkit-scrollbar {
  width: 8px;
}

.wrapper::-webkit-scrollbar-thumb {
  background: #4bcfab;
  border-radius: 4px;
}

.del,
.add,
.modifyDel,
.modifyAdd {
  margin-top: 0.15rem;
  margin-right: 0.15rem;
  background: url(../assets/typhone_del@3x.png) no-repeat 0 0/0.6rem 0.6rem;
  width: 1rem;
  height: 0.6rem;
  display: inline-block;
  float: right;
  cursor: pointer;
}

.add,
.modifyAdd {
  background: url(../assets/typhone_add@3x.png) no-repeat 0 0/0.6rem 0.6rem;
}

.cusDetales_centerTy ul li input {
  width: 1.6rem;
  font-size: 0.3rem;
}

.cusDetales_centerTy {
  padding: 0.5rem;
  background: #fff;
  max-height: 6rem;
  overflow-y: auto;
}

.cusDetales_centerTy ul li p {
  width: 49%;
}

.cusDetales_centerTy ul li:nth-child(1) span:nth-child(1),
.cusDetales_centerTy ul li p span:nth-child(1) {
  display: inline-block;
  width: 1.4rem;
  /*margin-right: 0.1rem;*/
  vertical-align: middle;
  line-height: 0.4rem;
  font-size: 0.3rem;
}

/* .cusDetales_centerTy ul li p:nth-child(2) {padding-left:2%;} */

.cusDetales_bottom,
.chose_cusDetales_bottomTy,
.preWarnDetales_bottom {
  text-align: center;
  padding-bottom: 0.4rem;
  height: 0.8rem;
  background: #fff;
  border-radius: 0.13333rem;
  padding-top: 0.35rem;
}

.cusDetales_bottom button,
.chose_cusDetales_bottomTy button,
.preWarnDetales_bottom button {
  height: 0.8rem;
  width: 2.13333rem;
  border-radius: 0.08rem;
  font-size: 0.37333rem;
  line-height: 0.77333rem;
}

.cusDetales_bottom button:nth-child(1),
.chose_cusDetales_bottomTy button:nth-child(1),
.warnDel,
.preWarnDetales_bottom button:nth-child(1) {
  cursor: pointer;
  color: #a3a3a3;
  background-color: #fff;
  margin-right: 0.8rem;
  border: 1px solid #a3a3a3;
}

#customGet {
  width: 2.4rem !important;
}

.cusDetales_bottom button:nth-child(2),
.chose_cusDetales_bottomTy button:nth-child(2),
.warnModify,
.preWarnDetales_bottom button:nth-child(2) {
  cursor: pointer;
  color: #fff;
  background: -webkit-linear-gradient(left, #4bcfab, #5bc1da);
  background: -o-linear-gradient(left, #4bcfab, #5bc1da);
  background: -moz-linear-gradient(left, #4bcfab, #5bc1da);
  background: linear-gradient(left, #4bcfab, #5bc1da);
  border: 0;
}

.leaflet-popup-content-wrapper {
  margin: 0 !important;
  background: transparent;
  position: relative;
  box-shadow: none;
}

.seaWave_noData,
.hint_noSimiTy,
.hint_noNull,
.cloudNoData,
.noGetId,
.preWarn_noData,
.buoy_noData {
  display: none;
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2.133333rem;
  height: 0.96rem;
  font-size: 0.266667rem;
  line-height: 0.96rem;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  color: #161616;
  background-color: rgba(255, 255, 255, 0.8);
}

.hint_noNull {
  width: 4rem !important;
  padding: 0 0.2rem;
}

.cloudNoData {
  padding: 0 0.1rem;
  width: 2.8rem !important;
}

.cloudPopup {
  display: none;
  position: absolute;
  max-height: none;
  overflow: hidden;
  z-index: 997;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 0.32rem;
  color: #6d6d6c;
  bottom: 1.9666667rem;
  left: 50%;
  border-radius: 0.08rem;
  transform: translateX(-50%);
}

/* @media screen and (min-width: 600px) {
        .cloudPopup {
            transform: translateX(50%) scale(.9);
            transform-origin: 50% 100%;
        }
    } */

/* @media screen and (min-width:1000px){
        .cloudPopup{
            transform: translateX(71%) scale(.9);
            transform-origin: 50% 100%;
        }
    } */
/* @media screen and (max-width: 300px) {
        .cloudPopup {
            transform: translateX(-48%) scale(.8);
            transform-origin: 50% 100%;
        }
    }
    @media screen and (max-width: 240px) {
        .cloudPopup {
            transform: translateX(-48%) scale(.65);
            transform-origin: 50% 100%;
        }
    } */
.cloudPopup .wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.cloudPopup .wrapper,
.cloudPopup .windetime {
  position: relative;
}

.cloudPopup p,
.windetime p {
  line-height: 0.6027rem;
  padding: 0 0.1351rem;
  white-space: nowrap;
}

ul.radar_colourCode {
  display: none;
  width: 6rem;
  background: rgba(0, 0, 0, 0.2);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.1rem;
  white-space: nowrap;
}

/* @media screen and (max-width: 370px) {
        ul.radar_colourCode {
            width: 6.2rem;
        }
    } */
ul.radar_colourCode>li {
  float: left;
  margin: 0 0.05rem;
}

ul.radar_colourCode li span {
  display: inline-block;
  width: 0.28rem;
  height: 0.18rem;
  margin-right: 0.1rem;
  margin-top: 0.21rem;
}

ul.radar_colourCode li:nth-child(1) span {
  background-color: #004bc8;
}

ul.radar_colourCode li:nth-child(2) span {
  background-color: #1be900;
}

ul.radar_colourCode li:nth-child(3) span {
  background-color: #17b022;
}

ul.radar_colourCode li:nth-child(4) span {
  background-color: #f9a006;
}

ul.radar_colourCode li:nth-child(5) {
  margin-right: 0 !important;
}

ul.radar_colourCode li:nth-child(5) span {
  background-color: #ec0d0e;
}

ul.rain_colourCode,
ul.rainfall_colourCode {
  display: none;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.1rem;
  white-space: nowrap;
}

ul.rain_colourCode>li,
ul.rainfall_colourCode>li {
  float: left;
  margin: 0 0.05rem;
}

ul.rain_colourCode li span,
ul.rainfall_colourCode li span {
  display: inline-block;
  width: 0.28rem;
  height: 0.18rem;
  margin-right: 0.1rem;
  margin-top: 0.21rem;
}

ul.rain_colourCode li:nth-child(1) span {
  background-color: #82d2ff;
}

ul.rain_colourCode li:nth-child(2) span {
  background-color: #96f58c;
}

ul.rain_colourCode li:nth-child(3) span {
  background-color: #ffc03c;
}

ul.rain_colourCode li:nth-child(4) span {
  background-color: #e10000;
}

ul.rainfall_colourCode li:nth-child(1) span {
  background-color: rgb(0, 161, 245);
}

ul.rainfall_colourCode li:nth-child(2) span {
  background-color: rgb(0, 201, 0);
}

ul.rainfall_colourCode li:nth-child(3) span {
  background-color: rgb(231, 193, 0);
}

ul.rainfall_colourCode li:nth-child(4) span {
  background-color: rgb(213, 0, 0);
}

.getLonLat {
  display: none;
  position: absolute;
  width: 3.6rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  color: #1c1c1c;
  z-index: 999;
  bottom: 0.666667rem;
  left: calc(50% - 1.8rem);
}

.noGetId {
  z-index: 99;
}

.distanceIcon {
  top: 0.4rem;
  left: -0.2rem;
  color: #000;
  font-size: 0.3rem;
  background: rgba(255, 255, 255, 0.6);
  border: solid black 1px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  position: absolute;
  border-radius: 3px;
  padding: 0px 0.2rem;
}

.distance-iconOne {
  top: 0.3rem;
}

.distance-iconOne span:nth-child(1) {
  left: 0.2rem;
  top: -0.11rem;
  border-right: transparent !important;
  border-bottom: transparent !important;
}

.distance-iconTwo {
  top: -0.5rem;
  left: 0.7rem;
}

.distance-iconTwo span:nth-child(1) {
  left: -0.12rem !important;
  top: 0.1rem !important;
  border-right: transparent !important;
  border-top: transparent !important;
}

.distance-iconThree {
  top: -1.3rem;
  left: 0rem;
}

.distance-iconThree span:nth-child(1) {
  left: 0.2rem;
  top: 18.5px;
  border-top: transparent !important;
  border-left: transparent !important;
}

.distanceIcon span:nth-child(1) {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  width: 0.15rem;
  height: 0.15rem;
  border: solid 1px black;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

/*.live_bottom{bottom:0;height:3.7223rem!important;}
    .live_head{width:calc(100% - 1.0666rem);padding:0 0.5333rem;}
    .live_head .live_title{float:left;}
    .live_head .live_btn_nd{float:right;}
    .live_head .live_btn_nd .newlyLive{margin-right: 0.266rem!important}
    .live_head .live_btn_nd .newlyDel{margin-right:0!important}
    .newlyLive,.newlyDel{width:1.46rem;height:0.66rem;border-radius: 0.08rem;}
    .live_details{position: relative;width:calc(100% - 1.0667rem);font-size: 0.37333rem;;}
    .live_details table{width: calc(100% - 1.06666rem);position: absolute;top:50%;transform:translateY(-50%);table-layout:fixed;word-break: break-all;}
    .live_details table tr td{position: relative;white-space: nowrap;}
    .live_details table tr td:nth-child(2n+1){color: #a3a3a3;}
    .live_details table tr:nth-child(2) td{padding-bottom: 0.4rem;padding-top: 0.4rem;}
    .live_details table tr td:nth-child(2n){color: #1c1c1c;}
    .live_details table tr:nth-child(1) td:nth-child(1):before,.live_details table tr:nth-child(1) td:nth-child(3):before,.live_details table tr:nth-child(2) td:nth-child(1):before，.live_details table tr:nth-child(2) td:nth-child(3):before,.live_details table tr:nth-child(3) td:nth-child(1):before,.live_details table tr:nth-child(3) td:nth-child(3):before{position: absolute;left: 0;content: '';width: 0.3rem;height: 0.3rem;top: 0;}
    .live_details table tr:nth-child(1) td:nth-child(1):before{background: url(../assets/live_water@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .live_details table tr:nth-child(1) td:nth-child(2):before{background: url(../assets/sea_power@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .live_details table tr:nth-child(2) td:nth-child(1):before{top: 0.4rem!important;background: url(../assets/sea_low@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .live_details table tr:nth-child(1) td:nth-child(2):before{top: 0.4rem!important;background: url(../assets/sea_see@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .live_details table tr:nth-child(3) td:nth-child(1):before{background: url(../assets/sea_direction@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .live_details table tr:nth-child(3) td:nth-child(2):before{background: url(../assets/typhone_pressure@3x.png)no-repeat 0 0;background-size: 0.3rem;}*/

/*强风预警 预警状态*/
/*.strongWind_pre{padding: 0 0.53333rem;background-color: #f2f3f8;height:3.86rem;}
    .strongWind_pre table{width:100%;font-size: 0.37333rem;table-layout: fixed;word-break: break-all}
    .strongWind_pre table td{position: relative;line-height: 1.2rem}
    .strongWind_pre table tr td:nth-child(2n+1),.early_warn .early_details table tr td:nth-child(2n+1){color: #a3a3a3;}
    .strongWind_pre table tr td:nth-child(2n),.early_warn .early_details table tr td:nth-child(2n){color: #a3a3a3;}
    .strongWind_pre table tr td:nth-child(1){padding-left: 0.4rem;}
    .strongWind_pre table tr td:nth-child(3){padding-left: 0.8rem;}
    .strongWind_pre table tr td:nth-child(1):before,.strongWind_pre table tr td:nth-child(3):before{position: absolute;left: 0;content: '';width: 0.3rem;height: 0.3rem;top: 0.45rem;}
    .strongWind_pre table tr td:nth-child(1):before{background: url(../assets/sea_direction@3x.png)no-repeat 0 0;background-size: 0.3rem;}
    .strongWind_pre table tr td:nth-child(3):before{background: url(../assets/sea_power@3x.png)no-repeat 0 0;background-size: 0.3rem;left: 0.4rem;}*/

.early_warn {
  position: fixed;
  bottom: -4.8rem;
  width: 100%;
  z-index: 1000;
}

.early_warn .early_head {
  width: calc(100% - 1.0666rem);
  padding: 0 0.5333rem;
  height: 1.0667rem;
  background-color: #fff;
  line-height: 1.0667rem;
}

.early_head .warn_title {
  float: left;
  color: #1c1c1c;
  font-size: 0.34rem;
}

.early_head .warn_btn_nd {
  float: right;
}

.early_head .warn_btn_nd .warnModify,
.early_head .warn_btn_nd .warnDel {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  width: 1.65rem;
  height: 0.667rem;
  line-height: 0.667rem;
  margin-top: 0.1rem;
}

.early_head .warn_btn_nd .warnModify {
  margin-right: 0.266rem !important;
}

.early_head .warn_btn_nd .warnDel {
  margin-right: 0 !important;
  color: #989898;
  border: 1px solid #989898 !important;
}

.early_warn .early_details {
  position: relative;
  height: 2.667rem;
  background-color: #f2f3f8;
  padding: 0 0.5333rem;
}

.early_warn .early_details table {
  position: absolute;
  width: calc(100% - 1.0667rem);
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  font-size: 0.37333rem;
  table-layout: fixed;
  word-break: break-all;
}

.early_warn .early_details table td {
  position: relative;
  white-space: nowrap;
}

.early_warn .early_details table tr:nth-child(1) td:nth-child(1):before,
.early_warn .early_details table tr:nth-child(1) td:nth-child(3):before,
.early_warn .early_details table tr:nth-child(2) td:nth-child(1):before,
.early_warn .early_details table tr:nth-child(2) td:nth-child(3):before,
.early_warn .early_details table tr:nth-child(3) td:nth-child(1):before,
.early_warn .early_details table tr:nth-child(3) td:nth-child(3):before {
  position: absolute;
  left: 0;
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  top: 0;
}

.early_warn .early_details table tr:nth-child(2) td {
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
}

.early_warn .early_details table tr td:nth-child(1) {
  padding-left: 0.4rem;
}

.early_warn .early_details table tr td:nth-child(3) {
  padding-left: 0.4rem;
}

.early_warn .early_details table tr td:nth-child(4) {
  padding-left: 0.4rem;
}

.early_warn .early_details table tr td:nth-child(2) {
  padding-left: 0.8rem;
}

.early_warn .early_details table tr:nth-child(1) td:nth-child(1):before {
  background: url(../assets/sea_-sea-area@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.early_warn .early_details table tr:nth-child(1) td:nth-child(3):before {
  background: url(../assets/sea_wave@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.early_warn .early_details table tr:nth-child(2) td:nth-child(1):before {
  top: 0.4rem !important;
  background: url(../assets/typhone_-sea-cycle@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.early_warn .early_details table tr:nth-child(2) td:nth-child(3):before {
  top: 0.4rem !important;
  background: url(../assets/sea_power@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.early_warn .early_details table tr:nth-child(3) td:nth-child(1):before {
  background: url(../assets/typhone_storm-surge@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

.early_warn .early_details table tr:nth-child(3) td:nth-child(3):before {
  background: url(../assets/sea_direction@3x.png) no-repeat 0 0;
  background-size: 0.3rem;
}

/*预警状态编辑*/

/*图例*/
.imgEx {
  left: 0.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.08rem;
  position: absolute;
  bottom: 1.966667rem;
  z-index: 990;
}

.imgEx_titleOut {
  padding: 0.2rem 0.2rem 0.2rem 0.08rem;
  position: relative;
}

.imgEx_title {
  width: 1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.32rem;
  color: #6d6d6c;
  background: url(../assets/typhoon_hide@3x.png) no-repeat 0.7rem 0.2rem;
  cursor: pointer;
}

.imgEx.on .imgEx_title {
  color: #58cdc7;
  background: url(../assets/typhoon_display@3x.png) no-repeat 0.7rem 0.2rem;
}

.imgEx_details {
  display: none;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;
  border-radius: 0.08rem;
  position: absolute;
  width: 4.6rem;
  bottom: 0.9rem;
  left: 0;
  color: #a3a3a3;
  font-size: 0.32rem;

}

.imgEx_details.show {
  display: flex;
  padding-top: 0.6rem;
}

.imgEx_details ul li {
  height: 0.6rem;
  line-height: 0.6rem;
  position: relative;
  padding-left: 0.45rem;
  color: #3e3e3e;
}

.imgEx_details .typthoonLevel li:nth-child(1)::before,
.imgEx_details .typthoonLevel li:nth-child(2)::before,
.imgEx_details .typthoonLevel li:nth-child(3)::before,
.imgEx_details .typthoonLevel li:nth-child(4)::before,
.imgEx_details .typthoonLevel li:nth-child(5)::before,
.imgEx_details .typthoonLevel li:nth-child(6)::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 0.4rem;
  left: 0.2rem;
  top: 0.21rem;
}

.imgEx_details .typthoonLevel li:nth-child(1)::before {
  background-color: #efd340;
}

.imgEx_details .typthoonLevel li:nth-child(2)::before {
  background-color: #0000ff;
}

.imgEx_details .typthoonLevel li:nth-child(3)::before {
  background-color: #0f8000;
}

.imgEx_details .typthoonLevel li:nth-child(4)::before {
  background-color: #fe9c45;
}

.imgEx_details .typthoonLevel li:nth-child(5)::before {
  background-color: #fe00fe;
}

.imgEx_details .typthoonLevel li:nth-child(6)::before {
  background-color: #fe0000;
}

.imgEx_details .typthoonLevel {
  float: left;
  margin-right: 5px;
}


.imgEx_details .station {
  flex: 1;
  overflow: hidden;
}

.imgEx_details .station li {
  display: flex;
  align-items: center;
  padding-left: .3rem !important;
  padding-right: .2rem !important;
  line-height: normal !important;
}

/*.warnPonit {
        border: none;
        background: none;
        top: -7px;
        left: -7px;
    }
    .preWarnPonit{-webkit-animation:preWarnPonit 1s infinite linear ;}
    @-webkit-keyframes preWarnPonit{
        0%{
            -webkit-transform: rotate(0deg);
        }
        50%{
            -webkit-transform: rotate(180deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }*/

@-webkit-keyframes csshub-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes csshub-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

/*.warn_point > div{
        background-color: #ed5565;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute;
        left: 4px;
        top: 4px;
        margin: 0;
        width: 5px;
        height: 5px;
    }*/
.warn_point {
  position: absolute;
  top: -7.5px;
  left: -7.5px;
  background: url(../assets/typhoon_decision@3x.png) no-repeat center / 100% 100%;
  width: 25px;
  height: 25px;
}

.warn_point_on {
  position: relative;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
}

.warn_point_on>div:nth-child(2) {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.warn_point_on>div:nth-child(3) {
  -webkit-animation-delay: -0.2s;
  -moz-animation-delay: -0.2s;
  -ms-animation-delay: -0.2s;
  -o-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.warn_point_on>div {
  background-color: #ed5565;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -10px;
  top: 20px;
  opacity: 0;
  margin: 0;
  width: 30px;
  height: 30px;
  -webkit-animation: csshub-scale-multiple 1s 0s linear infinite;
  -moz-animation: csshub-scale-multiple 1s 0s linear infinite;
  -ms-animation: csshub-scale-multiple 1s 0s linear infinite;
  -o-animation: csshub-scale-multiple 1s 0s linear infinite;
  animation: csshub-scale-multiple 1s 0s linear infinite;
}

.ponitLatlon {
  color: #444;
}

.susNav {
  border-top: 1px solid #dfdfdf;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.susNav ul {
  margin-top: 0.1rem;
  padding: 0 0.1rem;
}

.susNav ul li.susNav_liList {
  position: relative;
  float: left;
  width: calc(100% / 5);
  height: 1.2rem;
  color: #989898;
  cursor: pointer;
}

.susNav_liList.newon {
  color: #58cdc6 !important;
}

.susNav_liList.on {
  color: #58cdc6 !important;
}

.susNav ul li .nav_img {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 1rem;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.tyList span {
  background: url(../assets/typhoon_typhoon@3x.png) no-repeat center/0.55rem 0.55rem;
}

.tyList.on span {
  background: url(../assets/typhoon_typhoon_pre@3x.png) no-repeat center/0.55rem 0.55rem;
}

.swList span {
  background: url(../assets/windLayer.png) no-repeat center/0.55rem 0.55rem;
}

.swList.on span {
  background: url(../assets/windLayer1.png) no-repeat center/0.55rem 0.55rem;
}

/* .rdList span{
        background: url(../assets/typhoon_cloud@3x.png)no-repeat center/0.55rem 0.55rem;
    }
    .rdList.on span{
        background:  url(../assets/typhoon_cloud_pre@3x.png)no-repeat center/0.55rem 0.55rem;
    } */
.tsList span {
  background: url(../assets/typhoon_thunderstorm@3x.png) no-repeat center/0.55rem 0.55rem;
}

.tsList.on span {
  background: url(../assets/typhoon_thunderstorm_pre@3x.png) no-repeat center/0.55rem 0.55rem;
}

.windList span {
  background: url(../assets/typhoon_wind@3x.png) no-repeat center/0.55rem 0.55rem;
}

.windList.on span {
  background: url(../assets/typhoon_wind_pre@3x.png) no-repeat center/0.55rem 0.55rem;
}

.buoyList span {
  background: url(../assets/typhoon_buoy@3x.png) no-repeat center/0.55rem 0.55rem;
}

.buoyList.on span {
  background: url(../assets/typhoon_buoy_pre@3x.png) no-repeat center/0.55rem 0.55rem;
}

.warnsList span {
  background: url(../assets/yujing@2x.png) no-repeat center/0.55rem 0.55rem;
}

.warnsList.on span {
  background: url(../assets/yujing-s@2x.png) no-repeat center/0.55rem 0.55rem;
}

.susNav ul li .nav_img.on {
  background-color: #58cdc6;
}

.susNav ul li .nav_img img {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.radarImg,
.cloudImg,
.rainstormImg,
.actualImg {
  display: none;
  position: absolute;
  z-index: 1000;
  bottom: 1.4rem;
  left: 49%;
  transform: translateX(-50%);
  /* left: -20%;
        width: 120%; */
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.08rem;
  padding: 0.1rem;
  border: 0;
}

.typhoonImg {
  display: none;
  position: absolute;
  z-index: 1000;
  bottom: 1.4rem;
  left: 78%;
  transform: translateX(-50%);
  /* left: -20%;
        width: 120%; */
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.08rem;
  padding: 0.1rem;
  border: 0;
}

#tyChangeWraperBg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

/* .actualImg {
        width: 130%;
    } */
/* .cloudImg{
        left: -30%!important;
        width: 160%!important;
    } */
.radarImg ul li,
.typhoonImg ul li,
.cloudImg ul li,
.rainstormImg ul li,
.actualImg ul li {
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.37333rem;
  color: #a3a3a3;
  cursor: pointer;
}

#tyChange .layer-selected,
.radarImg ul .radarImg_one.on,
.radarImg ul .radarImg_two.on,
.radarImg ul .radarImg_three.on,
.radarImg ul .radarImg_four.on,
.radarImg ul .radarImg_five.on,
.rainstormImg_inner span.on,
.rainstormImg ul li.on,
.actualImg ul li.on {
  width: 100%;
  color: #58cdc6;
  transition: color 0.5s linear;
  -webkit-transition: color 0.5s linear;
  -o-transition: color 0.5s linear;
  -moz-transition: color 0.5s linear;
  -ms-transition: color 0.5s linear;
}

#tyChange li a,
.cloudImg ul li a,
.rainstormImg ul li a,
.actualImg ul li a,
.defenceArea a,
.decisionArea a {
  display: inline-block;
  width: calc(100% - 0.2rem);
  border-radius: 1rem;
  white-space: nowrap;
  padding: 0 0.1rem;
}

#tyChange .layer-selected a,
.cloudImg ul li.on a,
.rainstormImg ul li.on a,
.actualImg ul li.on a,
.defenceArea.on a,
.decisionArea.on a {
  /* display: inline-block;
        width: 85%; */
  background: #58cdca;
  color: #fff;
  /* border-radius: 1rem;
        color: #fff; */
}

.buoy_bott {
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: -5.8rem;
  height: 5.8rem;
  width: 100%;
  background-color: #fff;
  color: #989898;
}

.buoy_bottTop {
  height: 1.066667rem;
  width: calc(100% - 0.53rem);
  line-height: 1.066667rem;
  padding: 0 0.53rem;
  font-size: 0.34rem;
}

.buoy_bottBottom {
  position: relative;
  height: 4.333333rem;
  width: calc(100% - 1.06rem);
  padding: 0.2rem 0.53rem;
  background-color: #f2f3f8;
}

.buoy_bottBottom table {
  position: absolute;
  width: calc(100% - 1.06rem);
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  table-layout: fixed;
  word-break: break-all;
  font-size: 0.37rem;
  white-space: nowrap;
}

/* .buoy_bottBottom table tr td{   
        position: relative;
    }
    .buoy_bottBottom table tr td:nth-child(2n+1){
        color: #a3a3a3;
    }
    .buoy_bottBottom table tr td:nth-child(2n){
        color: #1c1c1c;
    }
    .buoy_bottBottom table tr td:before{
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 0.3rem;
        height: 0.3rem;
    }
    .buoy_bottBottom table tr:nth-child(1) td:nth-child(1):before{
        background: url(../assets/buoy_Position@3x.png)no-repeat 0 0;background-size: 0.3rem;
    }
    .buoy_bottBottom table tr:nth-child(1) td:nth-child(3):before{
        background: url(../assets/buoy_OLT@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
    }
    .buoy_bottBottom table tr:nth-child(2) td:nth-child(1):before{
        background: url(../assets/buoy_ALHT@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(2) td:nth-child(3):before{
        background: url(../assets/buoy_OLLT@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(3) td:nth-child(1):before{
        background: url(../assets/buoy_salt@3x.png)no-repeat 0 0;background-size: 0.3rem;
    }
    .buoy_bottBottom table tr:nth-child(3) td:nth-child(3):before{
        background: url(../assets/buoy_AVS@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
    }
    .buoy_bottBottom table tr:nth-child(4) td:nth-child(1):before{
        background: url(../assets/buoy_conductance@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(4) td:nth-child(3):before{
        background: url(../assets/buoy_AVcsalt3@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(5) td:nth-child(1):before{
        background: url(../assets/buoy_cycle@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0.05rem;
    }
    .buoy_bottBottom table tr:nth-child(5) td:nth-child(3):before{
        background: url(../assets/buoy_WAC@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0.05rem;
    }
    .buoy_bottBottom table tr:nth-child(6) td:nth-child(1):before{
        background: url(../assets/buoy_AvW@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0.4rem!important;
    }
    .buoy_bottBottom table tr:nth-child(6) td:nth-child(3):before{
        background: url(../assets/buoy_Avc@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(7) td:nth-child(1):before{
        background: url(../assets/buoy_WaH@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0!important;
    }
    .buoy_bottBottom table tr:nth-child(7) td:nth-child(3):before{
        background: url(../assets/buoy_WaHC@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0!important;
    }
    .buoy_bottBottom table tr:nth-child(8) td:nth-child(1):before{
        background: url(../assets/buoy_ocean@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(8) td:nth-child(3):before{
        background: url(../assets/buoy_OcD@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top: 0.35rem!important;
    }
    .buoy_bottBottom table tr:nth-child(9) td:nth-child(1):before{
        background: url(../assets/buoy_turbidity@3x.png)no-repeat 0 0;background-size: 0.3rem;
        top: 0!important;
    }
    .buoy_bottBottom table tr:nth-child(9) td:nth-child(3):before{
        background: url(../assets/buoy_AvT@3x.png)no-repeat 0.4rem 0;background-size: 0.3rem;
        top:0!important;
    }
    
    
    
    .buoy_bottBottom table tr td:nth-child(2n+1){
        padding-left: 0.4rem;
    }
    
    .buoy_bottBottom table tr td:nth-child(3){
        padding-left: 0.8rem!important;
    }
    .buoy_bottBottom table tr td:nth-child(4){
        padding-left: 0.4rem!important;
    }
    .buoy_bottBottom table tr td:nth-child(3):before{
        width: 1rem!important;
    }
    
    
    .buoy_bottBottom table tr:nth-child(2n) td{
        padding-bottom: 0.35rem;
        padding-top: 0.35rem;
    }
    .buoy_bottBottom table tr:nth-child(6) td{
        padding-bottom: 0!important;
    }
    .buoy_bottBottom table tr:nth-child(6) td{
        padding-top: 0.35rem;
    } */

.tylist_content {
  display: none;
  position: absolute;
  z-index: 100001;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.tylist_header {
  width: 100%;
  height: 2.2rem;
  background: linear-gradient(left, #4bcfab, #5bc1da);
  background: -webkit-linear-gradient(left, #4bcfab, #5bc1da);
  background: -o-linear-gradient(left, #4bcfab, #5bc1da);
  background: -moz-linear-gradient(left, #4bcfab, #5bc1da);
  background: -ms-linear-gradient(left, #4bcfab, #5bc1da);
}

.tylistHeader_top {
  position: relative;
  height: 1rem;
  color: #fff;
  font-size: 0.42rem;
}

.tylistHeader_top span {
  float: right;
  background: url(../assets/colse@3x.png) no-repeat center/0.6rem;
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.3rem;
  margin-right: 0.533333rem;
  cursor: pointer;
}

.tylistHeader_bottom {
  position: relative;
  height: 1.3rem;
}

.tylist_header ul {
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  display: flex;
  justify-content: center;
}

.tylist_header ul li {
  /* float: left; */
  width: 2.5rem;
  line-height: 1rem;
  text-align: center;
  color: #fff;
  font-size: 0.4rem;
}

.tylist_header ul li a {
  cursor: pointer;
}

.tylist_header ul li.on a {
  color: #58cdc6;
  padding: 0.05rem 10%;
  background-color: #fff;
  border-radius: 1rem;
}

.tylist_date {
  position: relative;
  height: 1.6rem;
  width: 100%;
  background-color: #fff;
  text-align: center;
}

.tylist_date ul {
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /*display: flex;
        justify-content: center;*/
  overflow-x: auto;
  overflow-y: hidden;
  height: 1.6rem;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
}

.tylist_date ul li {
  position: relative;
  /* float: left; */
  /* flex: 0 0 1.5rem; */
  width: 1.5rem;
  height: 99%;
  color: #1c1c1c;
  display: inline-block;
}

.tylist_date ul li.on div {
  color: #fff;
  background: linear-gradient(top, #4bcfab, #5bc1da);
  background: -webkit-linear-gradient(top, #4bcfab, #5bc1da);
  background: -o-linear-gradient(top, #4bcfab, #5bc1da);
  background: -ms-linear-gradient(top, #4bcfab, #5bc1da);
}

.tylistDate_div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 55%;
  padding: 0.15rem 0.1rem;
  text-align: center;
  border-radius: 0.08rem;
  cursor: pointer;
}

.tylistDate_div p:nth-child(1) {
  margin-bottom: 0.2667rem;
}

.tylist_details ul li {
  float: left;
  width: calc(33.333% - 1px);
  height: 3.334rem;
  border-bottom: 1px solid #e3eaef;
}

.tylist_details ul li:nth-child(1),
.tylist_details ul li:nth-child(2),
.tylist_details ul li:nth-child(4),
.tylist_details ul li:nth-child(5) {
  border-right: 1px solid #e3eaef;
}

.tylist_details ul li:nth-child(1),
.tylist_details ul li:nth-child(2),
.tylist_details ul li:nth-child(3) {
  border-top: 1px solid #e3eaef;
}

.tylist_details ul li:nth-child(9) {
  border-bottom: none !important;
}

.tylist_details ul li:nth-child(6) {
  border-bottom: 1px solid #e3eaef;
}

.tylist_details ul li:nth-child(7),
.tylist_details ul li:nth-child(8) {
  border-bottom: 1px solid #e3eaef;
  border-right: 1px solid #e3eaef;
}

.tylist_details ul li div {
  width: 60%;
  margin: 0.6rem auto 0;
  text-align: center;
}

.tyDetails_img {
  position: relative;
  width: 100%;
  height: 100%;
}

.tyDetails_img img {
  width: 1rem;
  height: 1rem;
  /* position: absolute; */
  /* width: 50%; */
  /* left: 50%; */
  /*transform: translateY();*/
  /* display: inline-block; */
}

.tyDetails_title {
  font-size: 0.37rem;
  color: #a3a3a3;
  margin: 0.1334rem 0 0.2667rem;
}

.tyDetails_con {
  font-size: 0.37rem;
  color: #1c1c1c;
}

.typhoonList {
  cursor: pointer;
}

.areaBoundary {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  min-width: 1.4rem;
  font-size: 0.22rem;
  color: #fff;
  text-align: center;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: #4bcfab;
  border-radius: 3px;
}

.wrapperDiv,
.wrapperMod {
  height: 0.9rem;
  margin-bottom: 0.35rem;
}

.wind_veltop {
  position: absolute;
  top: 0.2rem;
  color: rgb(68, 68, 68);
  white-space: nowrap;
}

.wind_velbot {
  position: absolute;
  top: -0.2rem;
  color: #444;
  white-space: nowrap;
}

.ty-name-label {
  width: 5rem !important;
  position: absolute;
  left: 0;
  top: -0.1rem;
  color: #222;
  font-size: 0.37rem;
  text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0px 1px 0px,
    rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 0px -1px 0px;
}

.accredit_msg {
  position: absolute;
  /* z-index: 1001; */
  bottom: 1.5rem;
  left: 0.2rem;
  color: #000;
  text-shadow: 1px 0 5px #ffffff;
  font-size: 0.18rem;
  /* display: none; */
}

.hint-content {
  z-index: 9999;
}

.nav_title,
.nav_new {
  text-align: center;
  font-size: 0.36rem;
}

.buoyLabel {
  color: #fff;
  position: absolute;
  top: 0.9rem;
  left: 0rem;
  font-size: 0.32rem;
}

.rainFallTimeSelector {
  position: fixed;
  z-index: 1000;
  top: -1.1rem;
  width: 100%;
  height: 1.1rem;
  background-color: #fff;
  display: flex;
}

.hourItem {
  flex: 1;
  height: 30px;
  font-size: 13px;
  text-align: center;
  line-height: 1.1rem;
  color: #444;
  cursor: pointer;
}

.selHourItem {
  color: #58cdc7 !important;
}

.position_text {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #e64a4a;
  text-shadow: #ffffff 1px 0 0, #ffffff 0 1px 0, #ffffff -1px 0 0,
    #ffffff 0 -1px 0;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 5px;
}

.typhoonNoData {
  width: 100%;
  position: absolute;
  top: 1rem;
  left: 0;
  color: #e64a4a;
  text-shadow: #ffffff 1px 0 0, #ffffff 0 1px 0, #ffffff -1px 0 0,
    #ffffff 0 -1px 0;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
  line-height: 0.65rem;
  text-shadow: #ffffff 1px 0 0, #ffffff 0 1px 0, #ffffff -1px 0 0,
    #ffffff 0 -1px 0;
  z-index: 999;
  display: none;
}

.defense_measure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 10001;
}

.defense_measure .bg_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.defense_measure span {
  width: 80%;
  position: relative;
  display: block;
  top: 50%;
  margin: 0 auto;
  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  line-height: 0.6rem;
  font-size: 14px;
  transform: translateY(-50%);
}

@media screen and (min-width: 500px) {
  .defense_measure span {
    width: 6rem;
  }
}

.typhoon-city-label {
  white-space: nowrap;
  -webkit-text-stroke: 1px red;
  color: white;
  font-weight: bold;
  font-size: 17px;
  display: none;
}

.typhoon_report {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  display: none;
  z-index: 9999;
}

.typhoon_report_title {
  width: 90%;
  position: relative;
  display: block;
  margin: 0.6rem 5% 0 5%;
  line-height: 1rem;
  color: red;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.typhoon_report_cont {
  width: 88%;
  height: calc(100% - 2.8rem);
  position: relative;
  display: block;
  padding: 0 6%;
  margin: 0.4rem 0;
  font-size: 14px;
  line-height: 28px;
  text-align: justify;
  overflow-y: auto;
}

.typhoon_report_cont pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  *word-wrap: break-word;
  *white-space: normal;
}

.typhoon_report_close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: black;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.rain_nowtime {
  margin: 0 auto;
  color: rgba(140, 140, 140, 1);
  font-size: 0.3rem;
}

.rain {
  padding-left: 0.1351rem;
  margin-right: 0.5405rem;
  border-left: 2px solid rgb(81, 194, 190);
}

.historycusDetales {
  width: 100%;
  border-radius: 0.13333rem;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 1.4rem;
  left: 0%;
  padding: 0.2703rem 0 0 0;
  z-index: 9999;
  display: none;
  box-sizing: border-box;
  max-height: 4.7rem;
  overflow: hidden;
}

.history_close {
  cursor: pointer;
  width: 0.34667rem;
  height: 0.34667rem;
  background: url(../assets/seas_colse@3x.png) no-repeat 0 0;
  background-size: 0.34667rem 0.34667rem;
  position: absolute;
  right: 0.2703rem;
  top: 0;
}

.toogle_history .arrows {
  width: 0.34667rem;
  height: 0.34667rem;
  background: url(../assets/arrows.png) no-repeat 0 0;
  background-size: 0.34667rem 0.34667rem;
}

.toogle_history {
  width: 0.34667rem;
  height: 0.34667rem;
  position: absolute;
  right: 50%;
  top: 0;
  transform: translateX(-50%);
}

.historycusDetales .name {
  border-bottom: 0.027rem solid rgba(245, 245, 245, 1);
  padding-bottom: 0.2703rem;
  padding-left: 0.2703rem;
  position: relative;
}

.historylist .listname {
  display: flex;
  justify-content: space-around;
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 6px 0px 0px 0px;
  line-height: 0.6486rem;
  font-size: 0.3243rem;
  color: #404040ff;
}

.historylist {
  padding-bottom: 10px;
}

.typhoonlist {
  max-height: 3.4rem;
  overflow-y: auto;
  padding-top: 10px;
}

.check_img {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.08rem;
  vertical-align: middle;
  pointer-events: none;
}

.his_check {
  display: none !important;
}

.un_check_round {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid rgba(81, 194, 190, 1);
  margin-top: -0.08rem;
  pointer-events: none;
}

.historylistitem {
  display: flex;
  height: 0.6486rem;
  line-height: 0.6486rem;
  background: rgba(255, 255, 255, 1);
  color: #8c8c8cff;
  padding-left: 30px;
}

.typhoonlist .historylistitem:last-child {
  margin-bottom: 0.2rem;
}

.sleYear {
  padding: 0.1rem 0 0 0;
  background: rgba(245, 245, 245, 1);
  display: flex;
  flex-direction: column;
}

.sleYear p {
  font-size: 0.3243rem;
  color: #737373ff;
  height: 0.5rem;
  line-height: 0.45rem;
  text-align: center;
}

.sleYear .yearlist {
  font-size: 0.3243rem;
  color: #737373ff;
  width: 2.5rem;
  flex: 1;
  text-align: center;
  line-height: 0.6108rem;
  overflow: hidden;
}

.yearlist .onlist {
  font-size: 0.3043rem;
  cursor: pointer;
  width: 100%;
  height: 3.1rem;
  overflow: auto;
  text-align: center;
}

.yearlist .onlist li:last-child {
  margin-bottom: 0.2rem;
}

.year_active {
  background-color: white;
  color: #51c2be;
}

.yearlist .arrows {
  width: 0.34667rem;
  height: 0.34667rem;
  background: url(../assets/arrows.png) no-repeat 0 0;
  background-size: 0.34667rem 0.34667rem;
  position: absolute;
  right: 3.4rem;
  top: 1.3rem;
}

.arrowsDown {
  transform: rotate(180deg);
}

.typhoonlist ul li:not(:first-child),
.historylist .listname li:not(:first-child) {
  width: 1.573rem;
  height: 0.6486rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yearlistdown {
  max-height: 3rem !important;
  overflow-y: scroll !important;
}

.maincityrange {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 9999;
}

.currentyphoonlist {
  width: 100%;
  height: 2.1622rem;
  background: url(../assets/rangbg.png) no-repeat 0 0;
  background-size: 100% 750px;
}

.maincityrange .close_range {
  width: 0.9189rem;
  height: 0.9189rem;
  background: url('../assets/dej.png') no-repeat;
  position: absolute;
  right: 0.0649rem;
  top: 0.0203rem;
  background-size: 0.5189rem 0.5189rem;
  background-position: center;
}

.maincityrange .currentyphooname li {
  width: 1.5514rem;
  height: 0.8216rem;
  background: transparent;
  font-size: 0.3243rem;
  color: white;
  border: 1px solid white;
  /* color: #51cabc; */
  text-align: center;
  line-height: 0.8216rem;
  border-radius: 0.0811rem;
}

.maincityrange .currentyphooname .selectLi {
  background: white;
  color: #51cabc;
}

.maincityrange .currentyphooname {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}

.titlename span {
  font-size: 0.4324rem;
  color: #404040;
  border-left: 2px solid #51cabc;
  padding-left: 0.1351rem;
  cursor: pointer;
}

.titlename {
  margin: 0.8108rem 0 0.5405rem 0.4054rem;
}

.infolist ul {
  display: flex;
  justify-content: space-around;
  font-size: 0.3784rem;
  padding: 0.4054rem 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.infolist .infolisttitle {
  color: #404040;
}

.infolist .infolist {
  color: #8c8c8c;
}

.infolist ul li {
  width: 1.3784rem;
  height: 0.3649rem;
}

.citylist {
  max-height: 12.1351rem;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.drawer img {
  width: 1.3514rem;
  height: 1.3514rem;
  position: absolute;
  bottom: 1.966667rem;
  right: 0.133333rem;
  z-index: 996;
  background-size: 1.3514rem 1.3514rem;
  cursor: pointer;
}

.draweron {
  right: 0.133333rem;
  transition: all 0.5s;
}

.waringsingnals {
  position: absolute;
  top: 10%;
  left: 0.4rem;
  width: 1.5rem;
  z-index: 900;
}

.waringsingnals .panner {
  border-color: #58cdc6;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px #58cdc6;
  box-shadow: 0 1px 1px #58cdc6;
}

.waringsingnals .city {
  color: #737373;
  font-size: 0.33rem;
  line-height: 0.5;
  text-align: center;
  margin-bottom: 0.1rem;
  padding: 0.06rem 0;
}

.waringsingnals .singnalevl {
  padding: 0 0.0541rem;
  text-align: center;
}

.singnalevl img {
  width: 1.1rem;
  margin: 0 2px;
  vertical-align: middle;
}

.waringsingnals li {
  margin-bottom: 0.2703rem;
  cursor: pointer;
}

.more img {
  width: 60%;
  margin-top: 0.1351rem;
}

.more .city {
  margin: 0.1rem 0 0.1rem 0;
}

.moreinfo {
  list-style: none;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
}

.leaflet-interactive[stroke='red'] {
  stroke: red;
  stroke-opacity: 1;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: red;
  fill-opacity: 0;
  fill-rule: evenodd;
}

.historyupclass {
  display: none;
  transition: all 0.5s;
}

.top5 {
  bottom: 1.4rem;
}

.match5 {
  display: none;
}

/* 防御圈css */
.defense_circle_text {
  white-space: nowrap;
  left: -12px;
  top: 12px;
  display: block;
  position: relative;
  color: black;
  font-weight: bold;
  font-size: 14px;
  text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0px 1px 0px,
    rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 0px -1px 0px;
}

.top-marker {
  pointer-events: none !important;
}

.moreinfo img {
  width: 60px;
}

.moreinfoItem {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.moreinfo .committime {
  padding-left: 10px;
}

.notyphoon_tip {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.notyphoon_tip .contenu {
  background: white;
  width: 5.4054rem;
  border-radius: 0.1081rem;
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  margin: 0 auto;
}

.contenu .icon {
  margin-top: 0.1351rem;
  text-align: center;
  padding-bottom: 0.01rem;
}

.contenu .icon img {
  display: inline-block;
  width: 2.7027rem;
  height: 2.7027rem;
}

.icon .close {
  width: 80%;
  background: rgba(81, 194, 190, 1);
  border-radius: 22px;
  line-height: 2;
  margin: 0.5405rem auto;
  color: white;
}

.icon .close::after {
  content: '';
  width: 2.7027rem;
  height: 0.5405rem;
}

.imgEx .station li:nth-child(1) span:first-child {
  border-color: #f00808;
}

.imgEx .station li:nth-child(2) span:first-child {
  border-color: rgb(24, 92, 186);
}

.imgEx .station li:nth-child(3) span:first-child {
  border-color: rgb(67, 255, 75);
}

.imgEx .station li:nth-child(4) span:first-child {
  border-color: #ffc107;
}

.imgEx .station li span:first-child {
  font-size: 0.973rem;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  flex-wrap: nowrap;
  border-top: 2px dashed transparent;
}

.imgEx .station li span:last-child {
  vertical-align: top;
  margin-left: .1rem;
}

.imgEx .imgExTitle {
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}