@charset "UTF-8";
/*第一版图片查看按钮样式*/
.cxplugin-imgviewer .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(images/viewPrev.png); }
.viewBtnWrap #viewNext { right: 30px; background: url(images/viewNext.png); }
.viewBtnWrap #viewPrev.unactive { background: url(images/viewPrevNone.png); }
.viewBtnWrap #viewNext.unactive { background: url(images/viewNextNone.png); }
.viewBtnWrap#imgtoolWrap .viewBtn {position: relative; float: left;width: 28px;height: 40px;margin-right: 30px;cursor: pointer;background: none;}
.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(images/view_zoomIn.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewZoomOut i{background: url(images/view_zoomOut.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewFlip i{background: url(images/view_flip.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewDownload i{background: url(images/view_download.png) center center / 28px auto no-repeat;}
.viewBtnWrap #viewClose i{  background: url(images/view_close.png) center center / 28px auto no-repeat; }
.viewBtnWrap #viewReport i{background: url(images/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;}
.cxplugin-imgviewer.viewer-container .viewer-title{display: none;}

@media screen and (max-width: 639px){
	.viewBtnWrap{width: 0;height: 0; padding: 0}
	.viewBtnWrap .viewBtn{display: none;}
	.viewBtnWrap .viewBtn i{width:20px; background-size:20px auto!important;}
	.viewBtnWrap .viewSplit{ display: none; height: 20px;}
	.viewBtnWrap #viewClose{margin-right:15px}
	.viewBtnWrap #viewPrev,.viewBtnWrap #viewNext{width:20px;height:20px; background-size:20px auto!important;}
	.viewBtnWrap #viewPrev{left: 10px}
	.viewBtnWrap #viewNext{right: 10px}
	.cxplugin-imgviewer .viewer-button.viewer-close{display: block}
}