
 .representationList {
	 background: #FFFFFF;
	 border-radius: 24px;
	 padding: 24px;
	 height: 750px;
	 overflow: hidden;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList {
		 position: relative;
		 padding: 85px 16px 16px;
		 height: 100%;
		 border-radius: 16px;
	}
}
 .representationList.hide {
	 display: none;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .representationList_cities {
		 padding-top: 24px;
	}
}
 .representationList .representationList_cities.hide {
	 display: none;
}
 .representationList .representationList_cities .listContainer-cities .image-loading {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 25px;
}
 .representationList .representationList_cities .listContainer-cities .image-loading.hide {
	 display: none;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .representationList_items {
		 margin-top: 24px;
	}
}
 .representationList .representationList_items.hide {
	 display: none;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .row {
		 flex-direction: column-reverse;
	}
}
 .representationList .representation-search {
	 position: relative;
	 flex-grow: 1;
}
 .representationList .representation-search .vp-form {
	 background: #fff;
	 border: 1px solid #E6E6E6;
	 position: relative;
	 border-radius: 16px;
	 height: 50px;
	 overflow: hidden;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .representation-search .vp-form {
		 border-radius: 8px;
		 height: 44px;
	}
}
 .representationList .representation-search .vp-form input[type="search"] {
	 padding: 0 50px 0 20px;
	 background: transparent;
	 line-height: 50px;
	 position: relative;
	 z-index: 2;
	 font-family: yekanbakhen, Tahoma, serif;
	 display: block;
	 width: 100%;
	 border: 0;
	 transition: all 0.3s ease-in-out;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .representation-search .vp-form input[type="search"] {
		 line-height: 44px;
	}
}
 .representationList .representation-search .vp-form button[type="submit"] {
	 right: 0;
	 left: unset;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 50px;
	 height: 50px;
	 line-height: 50px;
	 text-align: center;
	 position: absolute;
	 top: 0;
	 font-size: 25px;
	 background: transparent;
	 color: #8c8c8c;
	 border: 0;
	 z-index: 3;
	 cursor: pointer;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .representation-search .vp-form button[type="submit"] {
		 width: 40px;
		 height: 40px;
	}
}
 .representationList .representation-search .vp-search-box-loading {
	 position: absolute;
	 left: 50px;
	 top: 0;
	 height: 100%;
	 width: 50px;
	 display: none;
}
 .representationList .representation-search .vp-search-box-clean {
	 position: absolute;
	 left: 8px;
	 width: 50px;
	 top: 0;
	 display: none;
	 height: 100%;
	 line-height: 50px;
	 text-align: center;
	 font-size: 20px;
	 cursor: pointer;
	 z-index: 3;
}
 .representationList .listContainer {
	 overflow-y: auto;
	 max-height: 600px;
	 position: relative;
	 padding: 0 16px 40px 16px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .listContainer {
		 padding: 0 0 0 16px;
	}
}
 .representationList .listContainer .cityListItem {
	 border: 1px solid #E0E0E0;
	 border-radius: 16px;
	 padding: 16px;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 margin-bottom: 16px;
	 transition: all 0.2s ease-in-out;
	 cursor: pointer;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .listContainer .cityListItem {
		 border-radius: 8px;
	}
}
 .representationList .listContainer .cityListItem.hide {
	 display: none;
}
 .representationList .listContainer .cityListItem .title .cityItem {
	 font-weight: 700;
	 color: #5E5E5E;
	 margin-left: 8px;
}
 .representationList .listContainer .cityListItem .title .count-rep {
	 color: #B9B9B9;
	 font-weight: 400;
}
 .representationList .listContainer .cityListItem .title span {
	 font-size: 18px;
}
 .representationList .listContainer .cityListItem i {
	 font-size: 18px;
	 color: #5E5E5E;
}
 .representationList .listContainer .representationItem {
	 display: flex;
	 border: 1px solid #E0E0E0;
	 border-radius: 16px;
	 padding: 8px;
	 margin-bottom: 16px;
	 transition: all .2s ease-in-out;
	 cursor: pointer;
}
@media only screen and (min-width: 0px) and (max-width: 959px) {
	.representationList .listContainer .representationItem {
		padding: 8px;
		flex-direction: column;
		border-radius: 8px;
	}
}
 .representationList .listContainer .representationItem.active {
	 border-color: ;
	 box-shadow: 0 0 0 3px rgba(235,58,58,0.16);
}
 .representationList .listContainer .representationItem.show {
	 display: block;
}
 .representationList .listContainer .representationItem .galleryPhoto {
	 margin-left: 24px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .listContainer .representationItem .galleryPhoto {
		 margin-left: 0;
		 margin-bottom: 24px;
	}
}
 .representationList .listContainer .representationItem .galleryPhoto .item {
	 width: 235px;
	 height: 235px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .listContainer .representationItem .galleryPhoto .item {
		 width: 100%;
		 height: 180px;
	}
}
 .representationList .listContainer .representationItem .galleryPhoto .item .itemIn {
	 height: 235px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationList .listContainer .representationItem .galleryPhoto .item .itemIn {
		 height: 180px;
	}
}
 .representationContainer .title {
	 font-size: 24px;
	 color: #5e5e5e;
	 font-weight: 700;
	 margin-bottom: 16px;
}
 .representationContainer .title span {
	 color: ;
}
 .representationContainer .representationItem {
	 display: flex;
	 background: #fff;
	 border-radius: 16px;
	 padding: 16px;
	 margin-bottom: 24px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationContainer .representationItem {
		 padding: 8px;
		 flex-direction: column;
	}
}
 .representationContainer .representationItem:last-of-type {
	 margin-bottom: 0;
}
 .representationContainer .km-pagination ul li {
	 margin-left: 12px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationContainer .km-pagination ul li {
		 margin-left: 10px;
	}
}
 .representationContainer .km-pagination ul li:last-of-type {
	 margin-left: 0;
}
 .representationContainer .km-pagination ul li.active a, .representationContainer .km-pagination ul li.active span {
	 background: !important;
	 border-color: !important;
}
 .representationItem .galleryPhoto {
	 margin-left: 24px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .galleryPhoto {
		 margin-left: 0;
		 margin-bottom: 24px;
	}
}
 .representationItem .galleryPhoto .item {
	 width: 240px;
	 height: 240px;
	 border-radius: 16px;
	 overflow: hidden;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .galleryPhoto .item {
		 width: 100%;
		 height: 180px;
	}
}
 .representationItem .galleryPhoto .item .itemIn {
	 height: 240px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .galleryPhoto .item .itemIn {
		 height: 180px;
	}
}
 .representationItem .galleryPhoto .item .itemIn img {
	 height: 100%;
}
 .representationItem .galleryPhoto .item.owl-theme .owl-dots {
	 position: absolute;
	 bottom: 16px;
	 right: 0;
	 left: 0;
	 margin: 0 auto;
}
 .representationItem .galleryPhoto .item.owl-theme .owl-dots .owl-dot span {
	 width: 12px;
	 height: 12px;
	 background: #e2e2e2;
	 margin: 0 0 0 8px;
}
 .representationItem .galleryPhoto .item.owl-theme .owl-dots .owl-dot.active span {
	 width: 16px;
	 height: 16px;
	 background: ;
}
 .representationItem .leftItems {
	 display: flex;
	 justify-content: space-between;
	 width: 100%;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .leftItems {
		 flex-direction: column;
	}
}
 .representationItem .leftItems .contact .item {
	 display: flex;
	 align-items: flex-start;
	 margin-bottom: 16px;
}
 .representationItem .leftItems .contact .item .icon {
	 height: 24px;
	 margin-left: 16px;
}
 .representationItem .leftItems .contact .item .icon svg {
	 height: 100%;
}
 .representationItem .leftItems .contact .item .icon svg path {
	 fill: ;
}
 .representationItem .leftItems .contact .item .address {
	 max-width: 390px;
}
 .representationItem .leftItems .contact .item .phones {
	 display: flex;
	 align-items: center;
}
 .representationItem .leftItems .contact .item .phones div {
	 margin-right: 8px;
}
 .representationItem .leftItems .map {
	 display: flex;
	 height: 240px;
	 border-radius: 16px;
	 overflow: hidden;
	 position: relative;
	 background: url(../img/shopMap.png) no-repeat;
	 background-size: cover;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .leftItems .map {
		 width: 420px;
	}
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representationItem .leftItems .map {
		 height: 116px;
	}
}
 .representationItem .leftItems .map img {
	 height: 100%;
	 object-fit: cover;
}
 .representationItem .leftItems .map .mapBtn {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 position: absolute;
	 bottom: 16px;
	 right: 0;
	 left: 0;
	 margin: 0 auto;
	 width: calc(68%);
	 padding: 8px;
	 background: #fff;
	 box-shadow: 0 4px 7px rgba(0,0,0,0.25);
	 border-radius: 16px;
}
 .representationItem .leftItems .map .mapBtn .img {
	 width: 42px;
	 height: 42px;
	 margin-left: 8px;
}
 .back-representation {
	 padding: 8px 16px;
	 border: 1px solid #E6E6E6;
	 border-radius: 16px;
	 margin-left: 16px;
	 display: flex;
	 align-items: center;
	 white-space: nowrap;
	 cursor: pointer;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .back-representation {
		 padding: 8px;
		 border-radius: 8px;
	}
}
 .back-representation i {
	 font-size: 20px;
	 font-weight: 700;
}
 .back-representation span {
	 font-size: 18px;
	 padding-right: 8px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .back-representation span {
		 font-size: 14px;
	}
}
 .mapContainer {
	 position: relative;
}
 #mapEle {
	 position: relative;
	 width: 100%;
	 height: 700px;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 top: 0;
	 border-radius: 16px;
	 z-index: 0;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 #mapEle {
		 height: 240px;
	}
}
 .hide {
	 display: none !important;
}
 .representation-search-container {
	 display: flex;
	 align-items: center;
	 margin-bottom: 24px;
}
 @media only screen and (min-width: 0px) and (max-width: 959px) {
	 .representation-search-container {
		 position: absolute;
		 top: 0;
		 left: 0;
		 right: 0;
		 padding: 16px;
	}
}
 