.viewer-container,
 .viewer-navbar{background-color:#000;overflow:hidden}
 .viewer-canvas,
 .viewer-container,
 .viewer-footer,
 .viewer-player{right:0;bottom:0;left:0}
 .viewer-button,
 .viewer-canvas,
 .viewer-container,
 .viewer-footer,
 .viewer-list,
 .viewer-navbar,
 .viewer-open,
 .viewer-title,
 .viewer-toolbar,
 .viewer-toolbar>li{overflow:hidden}
 .viewer-close:before,
 .viewer-flip-horizontal:before,
 .viewer-flip-vertical:before,
 .viewer-fullscreen-exit:before,
 .viewer-fullscreen:before,
 .viewer-next:before,
 .viewer-one-to-one:before,
 .viewer-play:before,
 .viewer-prev:before,
 .viewer-reset:before,
 .viewer-rotate-left:before,
 .viewer-rotate-right:before,
 .viewer-zoom-in:before,
 .viewer-zoom-out:before{
    font-size:0;
    line-height:0;
    display:block;
    width:100%;
    height:100%;
    color:transparent;
    
}
.viewer-zoom-in:before{
    content:'Zoom In';
    background-position:0 0
}
.viewer-zoom-out:before{
    content:'Zoom Out';
    background-position:-20px 0
}
.viewer-one-to-one:before{
    content:'One to One';
    background: url(/static/image/oneToOne.png) no-repeat center center;
    background-size: auto 18px;
}
.headBox{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.2);
}
.viewer-reset.viewer-hide,
.viewer-rotate-left.viewer-hide,
.viewer-rotate-right.viewer-hide,
.viewer-prev.viewer-hide,
.viewer-next.viewer-hide,
.viewer-one-to-one.viewer-hide{
    display: block;
}
.viewer-prev.viewer-hide{
    width: 40px;
    height: 40px;
    position: fixed;
    left: 10px;
    top: 50%;
    margin-top: -20px;
    background-color: rgba(0,0,0,0.2);
}
.viewer-next.viewer-hide{
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    top: 50%;
    margin-top: -20px;
    background-color: rgba(0,0,0,0.2);
}
.viewer-reset:before{
    content:'Reset';
    background: url(/static/image/reset.png) no-repeat center center;
    background-size: auto 18px;
}
.viewer-prev:before{
    content:'Previous';
    background: url(/static/image/prev.png) no-repeat center center;
    background-size: auto 18px;
}
.viewer-play:before{
    content:'Play';
    background-position:-100px 0;
}
.viewer-next:before{
    content:'Next';
    background: url(/static/image/next.png) no-repeat center center;
    background-size: auto 18px;
}
.viewer-rotate-left:before{
    content:'Rotate Left';
    background: url(/static/image/rotateLeft.png) no-repeat center center;
    background-size: auto 24px;
}
.viewer-rotate-right:before{
    content:'Rotate Right';
    background: url(/static/image/rotateRight.png) no-repeat center center;
    background-size: auto 24px;
}
.viewer-flip-horizontal:before{
    content:'Flip Horizontal';
    background-position:-180px 0;
}
.viewer-flip-vertical:before{
    content:'Flip Vertical';
    background-position:-200px 0;
}
.viewer-fullscreen:before{
    content:'Enter Full Screen';
    background-position:-220px 0;
}
.viewer-fullscreen-exit:before{
    content:'Exit Full Screen';
    background-position:-240px 0;
}
.viewer-close:before{
    content:'Close';
    background: url(/static/image/close.png) no-repeat center center;
    background-size: auto 17px;
}
.viewer-container{
    font-size:0;
    line-height:0;
    position:absolute;
    top:0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color:rgba(0,0,0,.9);
    direction:ltr!important;
    -ms-touch-action:none;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
}
.viewer-container ::-moz-selection,
.viewer-container::-moz-selection{background-color:transparent}
.viewer-container ::selection,
.viewer-container::selection{background-color:transparent}
.viewer-container img{
    display:block;
    width:100%;
    min-width:0!important;
    max-width:none!important;
    height:auto;
    min-height:0!important;
    max-height:none!important
}
.viewer-player,
.viewer-tooltip{display:none;position:absolute}
.viewer-canvas{position:absolute;top:0}
.viewer-canvas>img{width:auto;max-width:90%!important;height:auto;margin:15px auto}
.viewer-footer{position:absolute;text-align:center}
.viewer-number{
    display: inline-block;
    overflow: hidden;
    line-height: 30px;
    font-size: 14px;
    color:#fff;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.4);
    padding: 0px 10px;
    border-radius: 30px;
}
.viewer-number span,
.viewer-number i{
    padding: 0px 5px;
}
.viewer-navbar{
    background-color:rgba(0,0,0,.5);
}
.viewer-navbar-div{
    width: ;
    overflow: hidden;
    position: relative;
    margin: 0px auto;
}
.viewer-list{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:50px;
    margin:0;
    padding:10px 0;
}
.viewer-list>li{
    font-size:0;
    line-height:0;
    float:left;
    overflow:hidden;
    width:50px;
    height:50px;
    cursor:pointer;
    opacity:.5;
    color:transparent;
    filter:alpha(opacity=50);
    position: relative;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2px;
}
.viewer-list>li.viewer-active{
    border: 1px solid rgba(255,255,255,0.5);
}

.viewer-list>li img{
    display:block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0px !important;
}
.viewer-list>li{
    margin:0px 3px;
}
.viewer-list>.viewer-active{opacity:1;filter:alpha(opacity=100)}
.viewer-player{top:0;cursor:none;background-color:#000}
.viewer-player>img{position:absolute;top:0;left:0}
.viewer-toolbar{
    overflow: hidden;
    float: right;
}
.viewer-toolbar>li{
    float:left;
    width:30px;
    height:30px;
    cursor:pointer;
    border-radius:50%;
    
    margin: 0px 5px;
}
.viewer-toolbar>li:hover{}
.viewer-toolbar>li:before{margin:0px}
.viewer-toolbar>li+li{}
.viewer-toolbar>.viewer-play{width:30px;height:30px;margin-top:-3px;margin-bottom:-3px}
.viewer-toolbar>.viewer-play:before{margin:5px}
.viewer-tooltip{font-size:12px;line-height:20px;top:50%;left:50%;width:50px;height:20px;margin-top:-10px;margin-left:-25px;text-align:center;color:#fff;border-radius:10px;background-color:#000;background-color:rgba(0,0,0,.8)}
.viewer-title{
    float: left;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
    text-overflow:ellipsis;
    opacity:.8;
    color:#fff;
    filter:alpha(opacity=80);
    overflow: hidden;
    line-height: 30px;
}
.viewer-title:hover{opacity:1;filter:alpha(opacity=100)}
.viewer-button{
    float: right;
    
    width:30px;
    height:30px;
    cursor:pointer;
    border-radius:50%;
    
    margin: 0px 5px;
    position: relative;
}
.viewer-button:before{
    position:absolute;
    bottom:0px;
    left:0px;
}
.viewer-fixed{position:fixed}
.viewer-show{display:block}
.viewer-hide{display:none}
.viewer-invisible{visibility:hidden}
.viewer-move{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}
.viewer-fade{opacity:0;filter:alpha(opacity=0)}
.viewer-in{opacity:1;filter:alpha(opacity=100)}
.viewer-transition{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}
@media (max-width:767px){
    .viewer-hide-xs-down{display:none}
}
@media (max-width:991px){
    .viewer-hide-sm-down{display:none}
}
@media (max-width:1199px){
    .viewer-hide-md-down{display:none}
}