.swiper-box {width: 100%; margin-top: 1em !important;}
.pic_page {position: absolute;z-index: 100;right: 20px;bottom: 10px;font-size: 15px;color: #009ae1;font-weight: bold}
.view {position: relative}.view .swiper-container {width: 100%;height: 439px;border: 1px solid #edeef5; box-sizing: border-box;}
.view .arrow-left {position: absolute;left: 0;top: 50%;margin-top: -25px;width: 28px;height: 50px;background: url('../images/arrow_l.png') no-repeat center;background-size: 100%;z-index: 10;opacity: 0;transition: all 0.2s ease;}
.view:hover .arrow-left{margin-left: 10px; opacity: 1; background: url('../images/arrow_l2.png') no-repeat center;}
.view .arrow-right {position: absolute;right: 0;top: 50%;margin-top: -25px;width: 28px;height: 50px;background: url('../images/arrow_r.png') no-repeat center;z-index: 10;opacity: 0;transition: all 0.2s ease;}
.view:hover .arrow-right{margin-right: 10px; opacity: 1; background: url('../images/arrow_r2.png') no-repeat center;}
.view .swiper-slide div {width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover}
.preview {width: 100%;margin-top: 10px;position: relative;}
.preview .swiper-container {margin-left: 45px;margin-right: 45px;height: 90px;}
.preview .swiper-slide {width: 158px;height: 90px;cursor: pointer;overflow: hidden}
.preview .swiper-slide img {width: 145px;height: 86px;margin: 0 auto;border: 2px solid #edeef5;object-fit: contain;}
.swiper-slide > img{width: 100%; height: 100%; object-fit: contain;}
.preview .arrow-left {background-size: 100% 100%;position: absolute;left: 0px;top: 10px;margin-top: -10px;width: 44px;height: 90px;background: #edeef5;text-align: center;z-index: 10}
.preview .arrow-left span {display: inline-block;width: 12px;height: 18px;background: url('../images/arrow_l@1x.png') no-repeat center;background-size: 100% 100%;margin-top: 34px}
.preview .arrow-left:hover span{background: url('../images/arrow_l@2x.png') no-repeat center;}
.preview .arrow-right {position: absolute;right: 0px;top: 10px;margin-top: -10px;width: 44px;height: 90px;background: #edeef5;text-align: center;z-index: 10}
.preview .arrow-right span {display: inline-block;width: 12px;height: 18px;background: url('../images/arrow_r@1x.png') no-repeat center;background-size: 100% 100%;margin-top: 34px}
.preview .arrow-right:hover span{background: url('../images/arrow_r@2x.png') no-repeat center;}
.preview .active-nav img {padding: 0;border-color: #009ae1;}
@media screen and (max-width:1024px) {
	.swiper-box{width: 96.8%; margin: 0 auto;}
}

@media screen and (max-width:768px) {
	.view .swiper-container{height: 285px;}
}

@media screen and (max-width:640px) {
	.view .swiper-container{height: 237px;}
}

@media screen and (max-width:420px) {
	.view .swiper-container{border: 0; height: 228px;}
}

@media screen and (max-width:360px) {
	.view .swiper-container{height: 168px;}
}