/*贴子图片查看器*/

.imgViewerBox {
    margin-bottom: 22px;
    display: table;
}
    .imgViewerBox > .previewPictureBox {
        
    }
        .imgViewerBox > .previewPictureBox > li {
            float: left;
            margin-right: 8px;
            margin-bottom: 8px;
            width: 164px;
            height: 164px;
            border-radius: 12px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover; 
            overflow: hidden;
        }
        /*.imgViewerBox > .previewPictureBox > li .imgThumbnail{
            width: 100%;
            height: 100%;
            
        }*/
        .imgViewerBox > .previewPictureBox > li  .el-image{
            width: 100%;
        }
        .imgViewerBox > .previewPictureBox > li:nth-child(4n) {
            margin-right: 0 !important;
        }
    .imgViewerBox > .completePictureBox {
        text-align: center;
        
    }
        .imgViewerBox > .completePictureBox .bigImgBox {
            position: relative;
            margin-bottom: 20px;
            text-align: center;
        }
            .imgViewerBox > .completePictureBox .bigImgBox .leftBox {
                position: absolute;
                top: 50%;
                left: 6px;
                width: 26px;
                height: 58px;
                cursor: pointer;
                transform: translate(0, -50%);
                background: url(../../Content/Images/AppWebClient/index/leftArrow.png) no-repeat center #000;
                background-color: rgba(0,0,0,0.5);
            }
            .imgViewerBox > .completePictureBox .bigImgBox .rightBox {
                position: absolute;
                top: 50%;
                right: 6px;
                width: 26px;
                height: 58px;
                cursor: pointer;
                transform: translate(0, -50%);
                background: url(../../Content/Images/AppWebClient/index/rightArrow.png) no-repeat center #000;
                background-color: rgba(0,0,0,0.5);
            }
            .imgViewerBox > .completePictureBox .bigImgBox .rightBoxContent, .imgViewerBox > .completePictureBox .bigImgBox .leftBoxContent {
                width: 20%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
            }
                .imgViewerBox > .completePictureBox .bigImgBox .leftBoxContent {
                    left: 0;
                }
                .imgViewerBox > .completePictureBox .bigImgBox .el-image__error {
                    width: 500px;
                    height: 500px;
                }
            .imgViewerBox > .completePictureBox .bigImgBox .el-image__inner{
                height: auto;
            }
        .imgViewerBox > .completePictureBox .thumbnailsBox {

        }
            .imgViewerBox > .completePictureBox .thumbnailsBox > li {
                float: left;
                margin-right: 6px;
                margin-bottom: 6px;
                box-sizing: border-box;
                width: 70px;
                height: 70px;
                border-radius: 12px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                cursor: pointer;
                overflow: hidden;
            }
            .imgViewerBox > .completePictureBox .thumbnailsBox > li:nth-child(9n) {
                margin-right: 0;
            }
            .imgViewerBox > .completePictureBox .thumbnailsBox > li.active {
                border: 1px solid #ff609d;
                overflow: hidden;
            }
           .imgViewerBox > .completePictureBox .thumbnailsBox .el-image{
               width: 100%;
           }