@media (min-width:901px){.pro-detail .preview-container{padding:0;display:block;width:550px;}
.pro-detail .preview-container .small-box{width:550px;height:550px;}
.pro-detail .preview-container #media{width:550px;height:550px;}
.pro-detail .preview-container .thumbnail-box{position:relative;height:auto;width:100%;padding:0}
.pro-detail .preview-container .thumbnail-box .list{margin-top:20px;overflow-x: hidden;height:auto;padding:0 30px;}
.pro-detail .preview-container .thumbnail-box .list ul{display:flex;height:auto;}
.pro-detail .preview-container .thumbnail-box .list ul .item{height:auto;margin-bottom:0;}
.pro-detail .preview-container .thumbnail-box .list ul .item img{max-height:84px;}
.pro-detail .preview-container .thumbnail-box .prodetails-button-next, .preview-container .thumbnail-box .prodetails-button-prev{display: block;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);display: inline-flex;align-items: center;justify-content: center;cursor: pointer;width: 20px;height: 100%;transition: all .2s linear;background: var(--color);color:#fff;}
.preview-container .thumbnail-box .prodetails-button-next {left: auto !important;right: 0px;}
.mediaplay{left:50%;}
.pro-detail .preview-container .topbox{position: relative;}
.prodetail-btn>div{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:flex;justify-content: center;align-items: center;width:20px;height:40px;background:rgba(0,0,0,0.6);color:#fff;cursor: pointer;}
.prodetail-btn>div em{color:#fff;display:block}
.prodetail-btn>div.prodetails-button-prev{left:0;}
.prodetail-btn>div.prodetails-button-next{right:0;}}
@media (min-width:901px) and (max-width:1440px){.pro-detail .preview-container{width:450px;}
.pro-detail .preview-container .small-box,.pro-detail .preview-container #media{width:450px;height:450px}
.pro-detail .preview-container .thumbnail-box .list ul .item img{max-height:68px;}}
@media (min-width:901px) and (max-width:1280px){.pro-detail .preview-container{width:400px;}
.pro-detail .preview-container .small-box,.pro-detail .preview-container #media{width:400px;height:400px}
.pro-detail .preview-container .thumbnail-box .list ul .item img{max-height:60px;}}
@media (max-width:900px){.pro-detail .preview-container .prodetails-button-next, .preview-container .prodetails-button-prev {display:none;}
.pro-detail .preview-container .thumbnail-box .prodetail-btn{display:none}}