/*main CSS*/
#pictureViewer{
  width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,1);
}
#pictureViewer > .content{
   display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
}
#pictureViewer .menu-bar{
    width: 100%;
}
#pictureViewer .menu-bar .handel{
    width: 40px;
    height: 40px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}
/* #pictureViewer .menu-bar .handel:hover{
    background-color: #2b7de1;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
} */
#pictureViewer .menu-bar .handel.maximization{
    background-image: url(../img/maximization_black.png);
    background-size: 14px;
}
#pictureViewer .menu-bar .handel.maximization:hover{
    background-image: url(../img/maximization_white.png);
}
#pictureViewer .menu-bar .handel.miniaturization{
    background-size: 16px;
    background-image: url(../img/miniaturization_black.png);
}
#pictureViewer .menu-bar .handel.miniaturization:hover{
    background-image: url(../img/miniaturization_white.png);
}
/* #pictureViewer .menu-bar .handel.close-view{
    background-image: url(../img/close_black.png);
    background-size: 15px;
}
#pictureViewer .menu-bar .handel.close-view:hover{
    background-image: url(../img/close_white.png);
} */
#pictureViewer .handel-prev,
#pictureViewer .handel-next,
#pictureViewer .close-view{
  position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    border-radius: 32px;
    background-color: #666;
    opacity: .5;
    color: #fff;
    transition: all .3s;
	 z-index: 20;
}

#pictureViewer .handel-prev{
    left: 10px;
      top: 48%;
}
#pictureViewer .handel-next{
    right: 10px;
      top: 48%;
}
#pictureViewer .close-view{
    right: 10px;
      top: 10px;
}
#pictureViewer .handel-prev:hover,
#pictureViewer .handel-next:hover,
#pictureViewer .close-view:hover{
     opacity:1;
     transform:scale(1.4)
}
#pictureViewer .picture-content{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#pictureViewer .picture-content .cover{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#pictureViewer .counter{
   position: absolute;
     bottom: 0;
     left: 0;
     height: 50px;
     color: #fff;
     text-align: center;
     width: 100%;
     line-height: 50px;
}
#pictureViewer .hide{
    display: none;
}
#pictureViewer .left{
    float: left;
}
#pictureViewer .right{
    float: right;
}
#pictureViewer .clear-flex{
    clear: both;
}
#pictureViewer img{
   max-width: 100%;
     max-height: 88%;
     min-width: 100%;
     min-height: 88%;
     object-fit: contain;
}



/**/
.p_gridbox e_comp { overflow: hidden;}
.demo-body { padding-right: 44; }
.abPicZoom-preview { width:480px; position: relative; }

/* 预览图 */
.abPicZoom-preview .bigImg { width:100%; height:400px; overflow:hidden; border: 1px solid #ddd;}
.abPicZoom-preview .bigImg li { width:100%; height:400px; overflow:hidden; }
.abPicZoom-preview .preview{ left:100% !important; top:0 !important; width: 100% !important; height:400px !important;}
.abPicZoom-preview .preview{ z-index: 10; object-fit: contain; }
.abPicZoom-preview .preview img{ transform: translate(30%,20%);}
.abPicZoom-preview .bigImg li{ position: relative;}
.abPicZoom-preview .bigImg li::after{ content:''; width:30px; height:30px; background:url(../abPicZoom/_zoom-in.svg) center no-repeat #ccc; background-size:60% 60% !important; display: block; position: absolute; right: 0; bottom: 0; z-index: 6; }
.abPicZoom-preview .bigImg li img { z-index: 10; object-fit: contain; }

/*选择器*/
.abPicZoom-preview .selector {background-color: rgba(204,204,204,.5);cursor: pointer;width:100px; height:100px;opacity: 1 !important;}

/* 缩略图 */
.abPicZoom-preview .smallImg { position:relative; width:100%; overflow:hidden; }
.abPicZoom-preview .smallImg .smallList { width:90%; margin:0 auto; overflow:hidden; }
.abPicZoom-preview .smallImg li { float:left; width:82px; padding:15px 5px ; }
.abPicZoom-preview .smallImg li img { width:100%; cursor:pointer; }
.abPicZoom-preview .smallImg li a {border:1px solid #fff; width:100%; display:block; overflow: hidden; }
.abPicZoom-preview .smallImg li.on a { border:1px solid red;}
.abPicZoom-preview .smallImg li a:hover, .abPicZoom-preview .smallImg li.on a:hover { border:1px solid red; }

/*上下按钮*/
.abPicZoom-preview .sPrev, .abPicZoom-preview .sNext { z-index:2; position: absolute; top:20px; width:20px; height:60px; font-size:24px; line-height:48px; color:#333; text-align:center; display:block; }
.abPicZoom-preview .sPrev { left:0; } .abPicZoom-preview .sNext { right:0; }
.abPicZoom-preview .sPrev:hover, .abPicZoom-preview .sNext:hover { color:#2888d4;  }



@media screen and (max-width:1024px) {
.abPicZoom-preview .preview{ display: none !important;}

}

@media screen and (max-width:767px) {
.abPicZoom-preview { width:100%; position: relative; }
.abPicZoom-preview .bigImg li{ width: 100% !important;}
.abPicZoom-preview .bigImg li img{ width: 100%;}
}