@charset "utf-8";
/* 垂直居中 */
.small-img{
	display: flex;
	align-items:center;
	justify-content: center;
}
.clearfix:before,
.clearfix:after{
  display: table;
  line-height: 0;
  content: "";
}
.magnifier{
	width: 500px;
	position: relative;
}
.images-container,
.video-container {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
	/* border: 1px solid #ddd; */
}
.move-view{
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: rgba(255,255,255,0.5);
}
.images-cover {
	height: 100%;
	width: 100%;
	position: relative;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.images-cover img{
	position: absolute;
}

.video-container .play-btn {
    width: 79px;
    height: 79px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    cursor: pointer;
    transition: all 0.2s;
}
.magnifier .swiper-container .play-btn  {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px !important;
    height: 40px !important;
    transition: all 0.2s;
}
.bg-cover {
    position: absolute;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: 2px;
    top: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: rgba(0,0,0,.4);
}
.video-container .video-cover {
	height: 100%;
	width: 100%;
}
.magnifier .swiper-container {
    width: 100%;
    height: 65px;
    padding: 0 27px;
    box-sizing: border-box;
    margin-top: 10px;
}
.magnifier .swiper-container .swiper-slide {
    width: 65px;
    height: 65px;
}
.magnifier .swiper-container .swiper-slide::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid transparent;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    left: 0;
}
.magnifier .swiper-container .swiper-slide.active::before {
    border-color: #FF414D;
}
.magnifier .swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.magnifier .swiper-button-next,
.magnifier .swiper-button-prev {
    width: 27px;
    height: 65px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background: #fff;
}
.magnifier .swiper-button-next {
    left: auto;
    right: 0;
}
.magnifier .swiper-button-next:after,
.magnifier .swiper-button-prev:after {
    content: '';
    display: block;
    border: transparent 5px solid;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -5px;
    margin-left: -5px;
}
.magnifier .swiper-button-prev:after {
    border-right-color: #79797F;
}
.magnifier .swiper-button-next:after {
    border-left-color: #79797F;
}
.magnifier .swiper-button-next.swiper-button-disabled, .magnifier .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
}
.magnifier .swiper-button-next.swiper-button-disabled::after,.magnifier .swiper-button-prev.swiper-button-disabled::after {
    opacity: 0.35;
}

.magnifier-view{
	width: 100%;
	height: 100%;
	position: absolute;
	right: -105%;
	top: 0;
	z-index: 9999;
	background-color: #fff;
	display: none;
	overflow: hidden;
}
.magnifier-view img{
	display: block;
}
