/*main CSS*/
#pictureViewer {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 1000000000;}
#pictureViewer > .content {background-color: #fff;position: absolute;width: 590px;height: 590px;margin: auto;top: 0;right: 0;bottom: 0;left: 0;}
#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: #006fc4;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#pictureViewer .menu-bar .handel.maximization {background-image: url(../img/maximization_black.jpg);background-size: 14px;}
#pictureViewer .menu-bar .handel.maximization:hover {background-image: url(../img/maximization_white.jpg);}
#pictureViewer .menu-bar .handel.miniaturization {background-size: 16px;background-image: url(../img/miniaturization_black.jpg);}
#pictureViewer .menu-bar .handel.miniaturization:hover {background-image: url(../img/miniaturization_white.jpg);}
#pictureViewer .menu-bar .handel.close-view {background-image: url(../img/close_black.jpg);background-size: 15px;}
#pictureViewer .menu-bar .handel.close-view:hover {background-image: url(../img/close_white.jpg);}
#pictureViewer .handel-prev,#pictureViewer .handel-next {display: inline-block;width: 50px;height: 70px;position: relative;top: calc(50% - 80px);background-repeat: no-repeat;background-size: 25px;background-position: 50%;cursor: pointer;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#pictureViewer .handel-prev {background-image: url(../img/prev_blank.jpg);}
#pictureViewer .handel-next {background-image: url(../img/next_blank.jpg);}
#pictureViewer .handel-prev:hover,#pictureViewer .handel-next:hover {background-color: #006fc4;}
#pictureViewer .handel-prev:hover {background-image: url(../img/prev_white.jpg);}
#pictureViewer .handel-next:hover {background-image: url(../img/next_white.jpg);}
#pictureViewer .picture-content {display: inline-block;width: 80%;height: calc(100% - 80px);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;height: 40px;line-height: 40px;width: 100%;text-align: center;color: #808080;font-size: 13px;}
#pictureViewer .hide {display: none;}
#pictureViewer .left {float: left;}
#pictureViewer .right {float: right;}
#pictureViewer .clear-flex {clear: both;}
#pictureViewer img {max-width: 100%;max-height: 100%;object-fit: contain;}

@media only screen and (max-width: 414px){
  #pictureViewer > .content{width: 100%;}
  #pictureViewer .handel-prev, #pictureViewer .handel-next {    width: 10%;}
}