.cropping .operate{width:450px;margin-left:20px;padding:20px}.cropping .operate .li{align-items:center;margin-bottom:25px}.cropping .operate .li:last-child{margin-bottom:0}.cropping .operate .li .name{width:65px}.cropping .operate .li .numb{margin-left:5px}.cropping .operate .li .unit{position:absolute;top:0;right:0;font-size:14px}.cropping .operate .li .layui-input-inline{margin-right:0}.cropping .operate .li em{margin:0 10px}.cropping .operate .li input{padding-right:30px;font-size:14px}.cropping .operate .li .layui-form-radio{width:72px;margin-top:0}.cropping .operate .prorata .name{position:relative;top:4px}.cropping .operate .item{margin-bottom:25px}.cropping .operate .item .li{margin-bottom:0;width:calc(50% - 20px)}.cropping .operate .item .li:first-child{margin-right:40px}.cropping .operate .btn{border:1px #eee solid;padding:5px 10px;border-radius:5px;margin-right:10px;cursor:pointer}.cropping .operate .btn span{color:#646464;font-size:14px;margin-right:4px}.cropping .operate .btn i{color:#646464;font-size:14px}.cropping .operate .btn:hover{border-color:var(--main)}.cropping .operate .btn:hover i,.cropping .operate .btn:hover span{color:var(--main)}.cropping .operate .lock .layui-form-checkbox{margin-top:0;margin-left:10px}.cropping .bysize{display:none}.cropping .bysize .layui-input-inline{width:95px}.cropping .operate .cc{width:99px;margin-bottom:10px;text-align:center}.cropping .operate .cc:nth-child(3n){margin-right:0}.cropping .operate .li .down{background-image:linear-gradient(to right,var(--main),var(--second));color:#fff!important;border:none;outline:none;padding:12px 24px;border-radius:5px;font-size:14px;margin-left:10px}.cropping .operate .li .down:hover{background-image:linear-gradient(to right,var(--main-hover),var(--second-hover))}.cropping .operate .li .downall{background:linear-gradient(to right,#18b8d8,#66e0f8);color:#fff!important;border:none;outline:none;padding:12px 24px;border-radius:5px;font-size:14px}.cropping .operate .li .downall:hover{background:linear-gradient(to right,#1ccef1,#71e3fa)}.cropping .drag{width:100%!important;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0!important}.cropping cropper-canvas{width:100%;height:100%}.cropping .cropper-container{height:100%!important}.cropping .coordinate{position:absolute;left:0;top:-20px;color:#fff;font-size:12px}.cropping .width{width:100%;height:24px;line-height:24px;position:absolute;top:-24px;left:0;color:#fff;font-size:12px;display:flex;justify-content:space-between}.cropping .width .line:first-child{width:1px;height:24px;background:var(--main)}.cropping .width .line:last-child{width:1px;height:24px;background:var(--main)}.cropping .height{width:24px;height:100%;position:relative;left:-24px;top:0;display:flex;justify-content:center;align-items:center}.cropping .height span{transform:rotate(-90deg);transform-origin:center center;font-size:12px;color:#fff}.cropping .height .line:first-child{width:24px;height:1px;background:var(--main);position:absolute;left:0;bottom:0}.cropping .height .line:last-child{width:24px;height:1px;background:var(--main);position:absolute;left:0;top:0}@media screen and (max-width:1300px){.cropping{flex-direction:column!important}.cropping .drag{height:500px}.cropping .operate{margin-left:0;width:100%}.cropping .operate .cc{width:70px}.cropping .operate .cc:nth-child(3n){margin-right:10px}.cropping .operate .li{margin-bottom:20px}}@media screen and (max-width:750px){.cropping .drag{height:350px}.cropping .operate{width:100%;padding:10px 0}.cropping .operate .li{margin-bottom:10px}.cropping .operate .li .btn{text-align:center}.cropping .operate .li:nth-child(4) .btn{width:calc(50% - 28px)}.cropping .operate .li:nth-child(4) .btn:last-child{margin-right:0}.cropping .operate .li:nth-child(5) .btn{width:calc(50% - 28px)}.cropping .operate .li:nth-child(5) .btn:last-child{margin-right:0}.cropping .operate .li:nth-child(6) .btn{width:calc(25% - 30px)}.cropping .operate .li:nth-child(6) .btn:last-child{margin-right:0}.cropping .operate .li:nth-child(7) .btn{width:calc(50% - 28px)}.cropping .operate .li:nth-child(7) .btn:last-child{margin-right:0}.cropping .operate .li:nth-child(8) .cc{width:calc(33.33% - 29px)}.cropping .operate .li:nth-child(8) .cc:nth-child(3n){margin-right:0}.cropping .operate .li .name{width:45px;font-size:12px}.cropping .operate .btn span,.cropping .operate .cc{font-size:12px}.cropping .operate .li .down{padding:10px 20px;font-size:12px}.cropping .operate .li .down .icon{margin-right:2px}}
