.drop-mask {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 999999;
     background-color: rgba(0, 0, 0, .7);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     visibility: hidden;
 }

 .drop-mask-content {
     width: 88%;
     height: 85%;
     border: 1px dashed #fff;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .drop-mask-tip {
     position: absolute;
     top: 54px;
     text-align: center;
     color: #ffffff;
     font-family: "Microsoft YaHei UI";
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     width: 100%;
 }

 .drop-mask-tip-esc {
     border: 1px solid rgba(255, 255, 255, .5);
     padding: 4px 10px;
     color: #ffffff;
     font-family: "Microsoft YaHei UI";
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     border-radius: 6px;
     margin: 0 8px;
 }

 .drop-mask-bottom {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
 }

 .drop-mask-icon {
     background: url("/images/searchPic/drag-icon.png") center no-repeat;
     background-size: 70.72px 56.24px;
     width: 70.72px;
     height: 56.24px;
     margin-bottom: 30px;
 }

 .drop-mask-text {
     width: 100%;
     text-align: center;
     color: #ffffff;
     font-family: "Microsoft YaHei UI";
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 16px;
 }

 .sotu-title {
     margin-top: 60px;
    font-size: 36px;
    font-weight: bold;
 }

 .box {
     margin-top: 30px;
     display: flex;
     align-items: flex-start;
 }

 .box-left {
     flex-shrink: 0;
     width: 500px;
 }

 .box-right {
     margin-left: 115px;
     flex: 1;
 }

 #leftInput {
     display: none;
 }

 .left-input {
     width: 500px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #EFEFF0;
     color: #3F3F3F;
     opacity: 0.6;
     font-size: 12px;
     font-weight: bold;
     border-radius: 10px;
     border: 1px dashed #A7A7A7;
     cursor: pointer;
     text-decoration: none;
     user-select: none;
 }

 .left-input .iconfont {
     font-size: 12px;
     font-weight: bold;
     margin-right: 5px;

 }

 .row-1-total {
    margin-left: 5px;
    font-size: 12px;
    color: #DDDDDD;

}

 /* ------------ */

 .image-editor-container {
     margin-top: 25px;
 }

 /* 图片容器样式  */
 #imageContainer {
     position: relative;
     width: 500px;
     height: 460px;
     overflow: hidden;
     background: url(/images/searchPic/bg.png) repeat;
     border-radius: 10px;
 }

 /* 图片样式 */
 .editable-image {
     position: absolute;
     cursor: move;
     user-select: none;
     max-width: none;
     -webkit-user-drag: none;
     z-index: 1;

 }

 /* 蒙版层 */
 .mask-overlay {
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .7);
     z-index: 2;
     pointer-events: none;
 }

 /* 裁剪框外层容器 */
 .crop-container {
     position: relative;
     background: transparent;
     z-index: 3;
     display: none;
 }

 /* 裁剪框样式 */
 #cropSelection {
     position: absolute;
     border: 1px solid #eee;
     box-sizing: border-box;
     background: transparent;
     border-radius: 5px;
     pointer-events: auto;
     z-index: 3;
 }

 #cropSelection img {
     width: 100%;
     height: 100%;
 }

 .crop-image {
     position: absolute;
     cursor: move;
     user-select: none;
     max-width: none;
     -webkit-user-drag: none;
 }

 .crop-handle {
     position: absolute;
     width: 24px;
     height: 24px;
     background-size: 24px;
     background-image: url(https://static.3d66.com/www/images/search/crop-icon2.png);
     opacity: 1;
     cursor: nesw-resize;
     pointer-events: auto;
     z-index: 102;
     /* 最高 */
 }

 .handle-nw {
     top: -3px;
     left: -3px;
 }

 .handle-ne {
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
     top: -3px;
     right: -3px;
 }

 .handle-sw {
     -webkit-transform: rotate(270deg);
     transform: rotate(270deg);

     bottom: -3px;
     left: -3px;
 }

 .handle-se {
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
     bottom: -3px;
     right: -3px;
 }

 .crop-reset {
     margin-top: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .crop-reset button {
     padding: 12px 35px;
     font-size: 16px;
     background: rgba(167, 167, 167, 1);
     color: #434343;
     border: none;
     opacity: 0.5;
     border-radius: 100px;
     cursor: pointer;
 }

 .crop-tips {
     margin-top: 60px;
     padding: 20px 10px 30px 10px;
     background: rgba(245, 245, 245, 1);
     border-radius: 10px;
 }

 .crop-tips-title {
     margin-bottom: 20px;
     font-size: 16px;
     color: #3F3F3F;
     font-weight: bold;
 }

 .crop-tips-item {
     color: #3F3F3F;
     font-size: 14px;
 }

 /* hover样式 */
 .crop-reset button:hover {
     opacity: 1;
     background: #303133;
     color: #fff;
 }

 /* 预览容器样式 */
 #previewContainer {
     z-index: 10;
 }


 .preview-container {
     margin-top: 20px;
     padding: 20px;
     background: #f8f9fa;
     border-radius: 6px;
     display: none;
 }

 .preview-title {
     margin-bottom: 15px;
     font-weight: 500;
     color: #333;
 }

 .preview-image {
     width: 510px;
     height: 410px;
     border: 1px solid #ddd;
     border-radius: 4px;
     display: block;
     margin: 0 auto 15px;
     object-fit: contain;
     background: #fff;
 }

 .hidden {
     display: none !important;
 }