@charset "UTF-8";
.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 { right: 30px; background: url(../../../images/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(../../../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{display: none;}
.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;}

@media screen and (max-width: 639px){
    .viewBtnWrap{height:40px;right: auto;padding-left: 15px;right: 10px;}
    .viewBtnWrap .viewBtn{margin-right: 15px;height:30px;}
    .viewBtnWrap .viewBtn i{width:20px; background-size:20px auto!important;}
    .viewBtnWrap .viewSplit{height: 20px;}
    .viewBtnWrap #viewClose{margin-right:15px}
    .viewBtnWrap #viewPrev,.viewBtnWrap #viewNext{width:30px;height:30px; background-size:30px auto!important;}
}