.slider-container {
  width: 300px;
  max-width: 100%;
  position: relative;
  height: 600px;
  display: inline-flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.slider-container .back-icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE0LjksNi43Yy0wLjQtMC40LTEtMC40LTEuNCwwbC00LjYsNC42Yy0wLjQsMC40LTAuNCwxLDAsMS40bDQuNiw0LjZjMC40LDAuNCwxLDAuNCwxLjQsMGMwLjQtMC40LDAuNC0xLDAtMS40TDExLDEybDMuOS0zLjlDMTUuMyw3LjcsMTUuMyw3LjEsMTQuOSw2Ljd6Ii8+PC9zdmc+);
}

.slider-container .next-icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkuMyw2LjdjLTAuNCwwLjQtMC40LDEsMCwxLjRsMy45LDMuOWwtMy45LDMuOWMtMC40LDAuNC0wLjQsMSwwLDEuNGMwLjQsMC40LDEsMC40LDEuNCwwbDQuNi00LjZjMC40LTAuNCwwLjQtMSwwLTEuNGwtNC42LTQuNkMxMC4zLDYuMyw5LjcsNi4zLDkuMyw2Ljd6Ii8+PC9zdmc+);
}

.slider-container .slider-preview-container {
  flex: 1;
  position: relative;
}

.slider-container .slider-preview-container .slider-preview-overflow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.slider-container .slider-preview-container .slider-preview-swipe {
  height: 100%;
  transition: transform 500ms cubic-bezier(0, 0, 0.1, 1) 0ms;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
}

.slider-container .slider-preview-container .slider-preview-swipe .slider-preview-panel {
  width: 100%;
  height: 100%;
  transform: translate(-100%, 0);
  transition: transform 500ms cubic-bezier(0, 0, 0.1, 1) 0ms;
}

.slider-container .slider-preview-container .slider-preview-swipe .slider-preview-images {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.slider-container .slider-preview-container .slider-preview-swipe .slider-preview-images > .image {
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.slider-container .slider-preview-container .slider-preview-swipe .slider-preview-images > .image > img {
  max-width: 100%;
  display: block;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

.slider-container .slider-preview-container .slider-swipe-panel {
  position: absolute;
  bottom: -39px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 5;
}



.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-next {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  opacity: 0.5;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  top: 50%;
  right: 8px;
  margin-top: -18px;
}

.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-back {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  opacity: 0.5;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  top: 50%;
  left: 8px;
  margin-top: -18px;
}
.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-next:hover, .slider-container .slider-preview-container .slider-swipe-panel .slider-preview-next:focus,
.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-back:hover, .slider-container .slider-preview-container .slider-swipe-panel .slider-preview-back:focus {
	opacity: 1;
	cursor: pointer;
	background-color: #537d1f;
}

.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-nav .nav {
  width: 36px;
  height: 36px;
}

.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-nav .nav::before {
  content: " ";
  background: rgba(255, 255, 255, 0.7);
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
  margin: 13px;
}

.slider-container .slider-preview-container .slider-swipe-panel .slider-preview-nav .nav.active::before {
  background: #222;
  border-color: #222;
}

.slider-container .slider-preview-container .slider-zoom-container {
  /*! background-color: #fff; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.slider-container .slider-preview-container .slider-zoom-container .slider-zoom-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: zoomShow 800ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.slider-container .slider-preview-container .slider-zoom-container .slider-zoom-panel.hide {
  opacity: 0;
  animation: zoomHide 800ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.slider-container .slider-preview-container .slider-zoom-container .zoom-warpper {
  width: 100%;
  height: 100%;
  align-items: center;
}

.slider-container .slider-preview-container .slider-zoom-image {
  max-width: 100%;
  max-height: 100%;
}

.zoom-popup {
	width: 85%!important;
	height: 85%!important;
}

.slider-container .slider-thumbnail-container {
  padding-top: 10px;
  position: relative;
  height: 64px;
  overflow: hidden;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel {
  background-color: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  text-align: center;
width: 100%;
  transition: transform 500ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel > .thumb {
  display: inline-flex;
  height: 64px;
  box-shadow: 0 0 0 1px #ccc inset;
  background-color: #fff;
  padding: 4px;
  margin-right: 4px;
  cursor: pointer;
  box-sizing: border-box;
  opacity: 0.5;
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1) 0ms, box-shadow 500ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  position: relative;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel > .thumb::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel > .thumb:hover {
  opacity: 1;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel > .thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 1px #f00 inset;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-panel > .thumb > img {
  height: 100%;
  width: auto;
  display: block;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-btn {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150%;
  position: absolute;
  opacity: 0.6;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  margin-top: -18px;
  top: 50%;
  cursor: pointer;
  display: none;
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  z-index: 2;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-btn:hover {
  opacity: 0.8;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-next {
  right: 0;
}

.slider-container .slider-thumbnail-container .slider-thumbnail-back {
  left: 0;
}

.slider-container .slider-thumbnail-container.slider-thumbnail-has-scroll.slider-thumbnail-has-next:hover .slider-thumbnail-next {
  display: block;
}

.slider-container .slider-thumbnail-container.slider-thumbnail-has-scroll.slider-thumbnail-has-back:hover .slider-thumbnail-back {
  display: block;
}

@media(max-width:768px) {
/*.slider-container .slider-preview-container .slider-swipe-panel {
  top: 0; height: 100%; bottom: auto;}*/
.slider-container {
	width:100%;

}


@media (max-width: 480px), (max-height: 480px) {
  /*.slider-container .slider-zoom-container,
  .slider-container .slider-thumbnail-container {
    display: none;
  }*/
  
}

@keyframes zoomShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.slider-preview-images #thumb_3d,.slider-preview-images #thumb_video{width:0}