.m4-image-preview{z-index:100;white-space:nowrap;text-align:center;position:fixed;top:0;bottom:0;left:0;right:0}.m4-image-preview:after{content:"";vertical-align:middle;width:0;height:100%;display:inline-block}.m4-image-preview .mask{background-color:rgba(0,0,0,.8);position:absolute;top:0;bottom:0;left:0;right:0}.m4-image-preview .vertical-center-cls{text-align:left;vertical-align:middle;white-space:normal}.m4-image-preview .pc-view{gap:16px;width:100%;max-width:1400px;height:80vh;padding:0 16px;display:inline-flex;position:relative}@media (max-width:640px){.m4-image-preview .pc-view{display:none}}.m4-image-preview .pc-view .preview-ctrl{cursor:pointer;flex-shrink:0;align-items:center;width:40px;display:flex;position:relative}.m4-image-preview .pc-view .preview-ctrl .preview-close{position:absolute;top:0}.m4-image-preview .pc-view .preview-content{color:#fff;border-radius:8px;flex-grow:1;justify-content:center;height:100%;display:flex;overflow:hidden}.m4-image-preview .pc-view .preview-content.with-thumb-view{color:#333;background-color:#fff}.m4-image-preview .pc-view .preview-content.with-thumb-view .right-list{height:100%;display:block}.m4-image-preview .pc-view .preview-content .left-preview{flex-direction:column;flex-grow:1;justify-content:center;height:100%;padding:16px;display:flex}.m4-image-preview .pc-view .preview-content .left-preview .preview-image-container{justify-content:center;align-items:center;max-height:80%;display:flex}.m4-image-preview .pc-view .preview-content .left-preview .preview-image-container .preview-image{object-fit:contain;object-position:bottom;max-width:100%;max-height:100%}.m4-image-preview .pc-view .preview-content .left-preview .preview-title{margin-top:16px;font-size:16px;line-height:24px}.m4-image-preview .pc-view .preview-content .right-list{background:#f9f9f9;flex-shrink:0;width:200px;height:400px;padding:8px;display:none;overflow:auto}.m4-image-preview .pc-view .preview-content .right-list .thumb-item{cursor:pointer;border-radius:4px;margin-bottom:8px;padding:8px}.m4-image-preview .pc-view .preview-content .right-list .thumb-item.active{background-color:#fff}.m4-image-preview .pc-view .preview-content .right-list .thumb-item .thumb-title{-webkit-line-clamp:3;text-overflow:ellipsis;-webkit-box-orient:vertical;margin-top:8px;display:-webkit-box;overflow:hidden}.m4-image-preview .mobile-view{flex-direction:column;width:100%;height:90%;padding:0 16px;display:none;position:relative}@media (max-width:640px){.m4-image-preview .mobile-view{display:inline-flex}}.m4-image-preview .mobile-view .content-wrapper{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;height:0;display:flex}.m4-image-preview .mobile-view .content-wrapper .preview-image{width:auto;max-height:70%}.m4-image-preview .mobile-view .content-wrapper .preview-title{color:#fff;margin-top:16px;font-size:16px;line-height:24px;overflow:auto}.m4-image-preview .mobile-view .mobile-ctrl{color:#fff;justify-content:space-around;margin-top:auto;padding-top:24px;display:flex}.m4-image-preview .mobile-view .mobile-ctrl .bottom-ctrl{flex-direction:column;align-items:center;display:flex}.m4-image-preview .mobile-view .mobile-ctrl .bottom-ctrl img{margin-bottom:4px}.m4-image-preview .mobile-view .mobile-preview-close{display:none;position:fixed;top:16px;right:16px}@media (max-width:640px){.m4-image-preview .mobile-view .mobile-preview-close{display:initial}}