/*静态资源访问改造后，需通过 http://px-static.chaoxing.com/px/xxxxx 去请求，例如：http://px-static.chaoxing.com/px/preview/imgs/viewPrev.png */
/*所以需要在下面的图片url之前拼上 /px/ 同时为了本地访问也正常，图片需改为 static/px/preview/imgs 目录下为准 dousl 2023-08-31 15:36:48 pm: 345795 */
.viewer-button { display: none; }
.viewBtnWrap {display: none;position: fixed;z-index: 2020;height: 50px;right: 40px;bottom: 40px;opacity: 0.8;background: #585F6B;border-radius: 26px;padding: 5px 0 5px 30px;box-sizing: border-box;}
.viewBtnWrap #viewPrev, .viewBtnWrap #viewNext { position: fixed; width: 52px; height: 52px; top: 50%; margin-top: -28px; }
.viewBtnWrap #viewPrev { left: 30px; background: url('/px/preview/imgs/viewPrev.png'); }
.viewBtnWrap #viewNext { right: 30px; background: url('/px/preview/imgs/viewNext.png'); }
.viewBtnWrap #viewPrev.unactive { background: url(/px/preview/imgs/viewPrevNone.png); }
.viewBtnWrap #viewNext.unactive { right: 30px; background: url(/px/preview/imgs/viewNextNone.png); }
.viewBtnWrap .viewBtn {position: relative; float: left;width: 28px;height: 40px;margin-right: 30px;cursor: pointer;}
.viewBtnWrap .viewBtn i{display: block; width: 28px; height: 100%;}
.viewBtnWrap .viewBtn:hover i, .viewBtnWrap #viewNext:hover, .viewBtnWrap #viewPrev:hover{ opacity: 0.7; }
.viewBtnWrap #viewNext.unactive:hover, .viewBtnWrap #viewPrev.unactive:hover { opacity: 1; }
.viewBtnWrap .viewSplit { float: left; height: 28px; width: 1px; margin-top: 6px; opacity: 0.5; background: rgba(255, 255, 255, 0.34); }
.viewBtnWrap #viewZoomIn i{background: url(/px/preview/imgs/view_zoomIn.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewZoomOut i{background: url(/px/preview/imgs/view_zoomOut.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewFlip i{background: url(/px/preview/imgs/view_flip.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewDownload i{background: url(/px/preview/imgs/view_download.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewClose i{  background: url(/px/preview/imgs/view_close.png) center center / 28px auto no-repeat; }
.viewBtnWrap #viewReport i{background: url(/px/preview/imgs/view_report.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewClose{margin-left: 20px;margin-right: 30px;}
.viewBtnWrap .bubble { position: absolute; display: none; top: -50px; left: -14px; width: 56px; padding: 12px 0; text-align: center;  background: rgba(24, 30, 51, 0.8);  border-radius: 4px;  box-sizing: border-box;  font-size: 12px;  color: #FFF;  letter-spacing: 0;}
.viewBtnWrap .bubble:after {  position: absolute;  content: "";  border-color: rgba(24, 30, 51, 0.8) transparent transparent transparent;  border-style: solid;  border-width: 5px 5px 0 5px;  height: 0;  left: 27px;  bottom: -5px;  margin-left: -4px;  margin-top: -2px;  width: 0;}

.viewBtnWrap .viewBtn:hover .bubble {
    display: block;
    opacity: 1;
}