#contentBox1{ padding-top: 60px; padding-bottom: 80px;}
#contentBox1 .nums{ position: relative; width: 630px; margin: 0 auto;}
#contentBox1 .numBox{ width: 50%; text-align: center;}
#contentBox1 .boxBar{ position: absolute; width: 1px; height: 120px; left: 50%; top: 23px; background: #d8dfe6;}
#contentBox1 .numBox-num{ font-size: 80px; line-height: 1; color: #00afd7; margin-bottom: 20px; margin-top: 18px; font-family: KlinicSlabBold;}
#contentBox1 .numBox-txt{ font-size: 16px; line-height: 1; color: #707780; margin-bottom: 23px;}
#contentBox1 .mapContainer{ position: relative; height: 500px; background: #ccc; overflow: hidden;}
#myMap{ height: 100%;}
.markerInfoContainer{ 
  position: absolute;
  width: 450px;
  height: 100%;
  right: -450px;
  top: 0px;
  padding-left: 50px;
  background: url("../images/mapInfoBg.png");
}
.markerName {
  font-size: 30px;padding-left: 10px;
  color: #000;
  border-bottom: solid 1px #46c5e1;
  padding-top: 60px;
  padding-bottom: 32px;
}
.markerInfoBox {
  font-size: 14px;padding-left: 10px;
  color: #000;
  margin-top: 30px;
  padding-right: 30px;
}
.markerInfoBox-title {
  margin-bottom: 10px;
}
.markerInfoClose {
  position: absolute;
  left: 0;
  top: 0;
  width: 49px;
  padding: 20px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .markerInfoContainer{ width: 100%; padding-left: 15px; padding-right: 15px; }
  .markerInfoBox-title{ margin-bottom: 5px; }
  .markerName{ font-size: 24px; padding-top: 50px; padding-bottom: 10px;}
  .markerInfoBox{ margin-top: 20px;}
}

.mapCity{ position: absolute; left: 20px; bottom: 20px; height: 40px; line-height: 40px; background: #00afd7; padding-left: 20px; padding-right: 20px; color: #fff; border-radius: 6px 12px 6px 6px;}
.search-cityContainer{ text-align: center; margin-top: 18px;}
.city-title{ font-size: 16px; color: #707780; margin-bottom: 16px;}
.city-inputCon{ position: relative; width: 570px; height: 40px; margin: 0 auto; margin-bottom: 20px;}
.city-input{ width: 100%; height: 100%; font-size: 14px; color: #3e434a; border: 0; background: #f3f6f8; border-radius: 40px; text-align: center;}
.city-input-seachIcon{ position: absolute; top: 3px; right: 3px; width: 34px; padding: 10px; cursor: pointer;}
.openMoreCity{ margin-top: 20px; cursor: pointer;}
.citys, .hot_citys{ width: 800px; margin: 0 auto; overflow: hidden;}
.city, .hot_city{ width: 76px; height: 30px; line-height: 30px; border: solid 1px #dae1e5; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; cursor: pointer;
 display: inline-block;}
.citys{ display: none;}
.hot_citys{ width: auto; }
.hot_citys_title{ line-height: 30px;}
.citys_title{ line-height: 30px; margin-left: 30px;}
.moreCity{ width: 100px; height: 30px; line-height: 30px; background: none; border: solid 1px #dae1e5; border-radius: 5px;}
.selectCity{ display: inline-block;}
.moreCityCon, .hotCityCon{ width: auto;}
@media (max-width: 991px) {
  #contentBox1{ padding-bottom: 40px;}
  #contentBox1 .mapContainer{ height: 380px;}
}
@media (max-width: 767px) {
  .citys, .hot_citys{ width: 100%; text-align: center;}
  #contentBox1 { padding-top: 50px; padding-bottom: 45px;}
  #contentBox1 .nums{ width: 100%;}
  #contentBox1 .numBox-num{ font-size: 70px; margin-bottom: 15px;}
  #contentBox1 .numBox-txt{ font-size: 15px;}
  #contentBox1 .boxBar{ height: 100px;}
  #contentBox1 .mapContainer{ height: 340px;}
  .city-inputCon{ width: 100%;}
  .hot_citys{ text-align: left; width: 100%;}
  .hot_city{ text-align: center; width: 20%; margin-left: 0px; margin-right: 5%;}
  .hot_citys_title{ width: 100%; text-align: left; }
  .moreCityCon, .hotCityCon{ width: 100%;}
  .citys_title{ width: 100%; margin-left: 0px; text-align: left;}
  .moreCity{ width: 100%; text-align: center;}
}

#contentBox2{ padding-top: 60px; padding-bottom: 55px; text-align: center;}
#contentBox2 .pic{ width: 100%; margin-top: 50px;}
@media (max-width: 767px) {
  #contentBox2{ padding-top: 50px; padding-bottom: 62px; background: #fff;}
  #contentBox2 .pic{ width: 100%; margin-top: 15px; padding-left: 20px; padding-right: 20px;}
}