@media (min-width:769px) {
.preview-container{width:45%;position:relative}
.preview-container .thumbnail-show{position:relative;display:flex;justify-content:center}
.preview-container .small-box{width:100%;aspect-ratio:4/3;background:#FFFFFF;position:relative;box-shadow:0 10px 40px 0 rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview-container .small-box:hover{cursor:crosshair}
.preview-container .small-box img{width:100%;height:100%;object-fit:contain}
.preview-container .big-box{display:none;border:1px solid #dfdfdf;border-left:none;width:100%;height:100%;position:absolute;left:100%;top:0;overflow:hidden;z-index:999;background:#FFFFFF}
.preview-container .big-box img{display:block;max-width:none;max-height:none;width:150%}
.preview-container .big-box.act{display:none!important}
.small-box .hover{position:absolute;width:180px;height:180px;background-color:rgba(204,204,204,.6);border:1px solid #EEEEEE;display:none;cursor:move;z-index:9}
.preview-container #media{background:#EEEEEE;width:100%;aspect-ratio:4/3;object-fit:contain;z-index:9}
.preview-container .thumbnail-box{position:relative;width:100%;padding:0 30px;margin-top:15px}
.preview-container .thumbnail-box .item{overflow:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .1s linear;position:relative;border:1px solid #EEEEEE}
.preview-container .thumbnail-box .item.item-cur{border-color:var(--color)}
.preview-container .thumbnail-box .item img{width:100%;height:100%;object-fit:contain;aspect-ratio: 1;}
.thumbnail-box .prodetails-button-next,.thumbnail-box .prodetails-button-prev{position:absolute;top:0;left:0;width:20px;height:100%;background:var(--color);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .1s linear;z-index:9;border-radius:4px}
.thumbnail-box .prodetails-button-next em,.thumbnail-box .prodetails-button-prev em{font-size:var(--fontsize22)}
.thumbnail-box .prodetails-button-next.not,.thumbnail-box .prodetails-button-prev.not{background:#EEEEEE;color:#999}
.thumbnail-box .prodetails-button-next:hover,.thumbnail-box .prodetails-button-prev:hover{opacity:.9}
.thumbnail-box .prodetails-button-next{left:auto;right:0}
.banner-page{display:none}
.singglepic{width:45%;height:400px;text-align:center;overflow:hidden;margin:0 auto;display:flex;align-items:center;justify-content:center}
.singglepic img{width:100%;height:100%;object-fit:contain}
.mediaplay{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border:2px solid #FFFFFF;border-radius:50%;color:#FFFFFF;text-align:center;position:relative;transition:.5s;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;z-index:99}
.mediaplay em{font-size:36px;position:static;border:none;background:0 0;transform:none;width:auto;height:auto}
.mediaplay::after{content:"";display:block;position:absolute;left:-2px;right:-2px;bottom:-2px;top:-2px;border-radius:50%;border:3px solid;opacity:.8;border-color:transparent;border-right-color:var(--color);animation:runDot 2s infinite ease-in-out}
.mediaplay:hover{color:var(--color);background:rgba(255,255,255,.7)}
@keyframes runDot{0%{transform:rotate(0)}
100%{transform:rotate(359deg)}}
}

@media (max-width:1366px) and (min-width:769px){.preview-container{height:400px}}
@media (max-width:1025px) and (min-width:769px){.small-box{height: 450px;}
.small-box img{width: 100%;}
.prodetails-info{padding-left: 10px;}
.preview-container .banner-page{display: none;}
}
.imgalt{display: none;}
@media (max-width:768px) {
.thumbnail-show{display: none;}
#gallery .swiper-wrapper{align-items: center;}
.prodetails-button-prev,.prodetails-button-next{display: none;}
}