.city {
 float: left;
 width: 100%;
 padding: 40px 0 29px 0;
 font-weight: 500;
 font-size: 17px;
 line-height: 1.2;
 color: #484848;
 text-align: center;
}

#view_box {
 float: left;
 width: 100%;
 padding: 0 40px 30px 40px;
 background-color: #fff;
 box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
}

#location_top {
 float: left;
 width: 100%;
 padding: 15px 0 13px 0;
 border-top: 1px solid #e0e0e0;
}


/* gallery start */

.gallery {
 position: relative;
 float: left;
 width: 100%;
 height: 565px;
 background-color: #f6f6f6;
}

.gallery .swiper-container {
 height: 100%;
}

.gallery .swiper-slide {
 background-size: cover;
 background-position: center;
}

.gallery .gallery-top {
 height: 100%;
 width: 100%;
}

.gallery .thumbs_bg {
 position: relative;
 padding: 0 26%;
 background-color: rgba(0, 0, 0, 0.7);
 z-index: 1;
}

.gallery .gallery-thumbs {
 height: 82px;
 padding: 13px 0;
 margin: -82px 0 0 0;
 box-sizing: border-box;
}

.gallery .gallery-thumbs .swiper-slide {
 height: 100%;
 opacity: 1;
}

.gallery .gallery-thumbs .swiper-slide-thumb-active {
 opacity: 1;
 border: 3px solid #fff;
}

.gallery .swiper-button-prev {
 left: 22px;
 margin: 0;
 width: 53px;
 height: 53px;
 background: url('../img/internal/gallery-123-arrow-left.png') center center no-repeat;
 background-size: 53px 53px;
 opacity: 1;
}

.gallery .swiper-button-next {
 right: 22px;
 margin: 0;
 width: 53px;
 height: 53px;
 background: url('../img/internal/gallery-123-arrow-right.png') center center no-repeat;
 background-size: 53px 53px;
 opacity: 1;
}


/* gallery end */

.gallery .marker {
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 width: 300px;
 padding: 10px 20px 7px 20px;
 z-index: 2;
 background: url('../img/internal/marker-bg.png') center no-repeat;
}

.gallery .marker .icon {
 min-width: 20px;
}

.gallery .marker .icon img {
 width: 10px;
 height: 15px;
 margin: 3px 0 0 0;
}

.gallery .marker .title {
 height: 17px;
 font-size: 14px;
 line-height: 1.2;
 color: #fff;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

#map_canvas {
 width:100%;
 height:500px;
}

@media screen and (max-width:1200px) {}

@media screen and (max-width:1100px) {
 .gallery {
  height: 500px;
 }
 .gallery .thumbs_bg {
  padding: 0 20%;
 }
}

@media screen and (max-width:800px) {
 .city {
  padding: 30px 0 25px 0;
  font-size: 16px;
 }
 #view_box {
  padding: 0 25px 15px 25px;
 }
 .gallery {
  height: 400px;
 }
 .gallery .thumbs_bg {
  padding: 0 15px;
 }
  #map_canvas {
  height:400px;
 }
}

@media screen and (max-width:650px) {
 .gallery {
  height: 350px;
 }
 .gallery .marker {
  background-size: 200px 38px;
 }
 .gallery .swiper-button-prev {
  width: 26px;
  height: 26px;
  background-size: 26px 26px;
 }

 .gallery .swiper-button-next {
  width: 26px;
  height: 26px;
  background-size: 26px 26px;
 }
 .gallery .gallery-thumbs {
  height: 77px;
  margin: -77px 0 0 0;
 }

}

@media screen and (max-width:550px) {
 .gallery {
  height: 280px;
 }
 .gallery .gallery-thumbs {
  height: 70px;
  margin: -70px 0 0 0;
 }
 #map_canvas {
  height: 300px;
 }
}