.editImgBox {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 12px;
  position: relative;
  background: rgba(255, 255, 255, 1);
  padding-right: 248px;
  box-sizing: border-box;
  /* box-shadow: 0px 0px 20px  rgba(51, 51, 51, 0.14); */
}
.edleft {
  float: left;
  /* position: absolute;
  left: 0;
  top: 0; */
  width: 248px;
  height: auto;
  border-right: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.edleft.minHeih{
  min-height: calc(100vh - 272px);
}
.edleft .edtit {
  font-size: 32px;
  font-weight: 600;
  color: #2979FE;
  text-align: left;
  padding-left: 50px;
  line-height: 108px;
  box-sizing: border-box;
}
.edleft .edtit span{
  display: inline-block;
  color: #000000;
}
.edleft ul.edtypes {
  width: 100%;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
}
.edleft ul li {
  width: 100%;
  line-height: 60px;
}
.edleft ul li a {
  display: flex;
  align-items: center;
  line-height: inherit;
  color: #333333;
  padding-left: 50px;
  position: relative;
  box-sizing: border-box;
}
.edleft ul li .aimg,
.edleft ul li .img {
  width: 24px;
  height: 24px;
}
.edleft ul li.active a .aimg {
  display: block;
}
.edleft ul li a .aimg,
.edleft ul li.active a .img {
  display: none;
}
.edleft ul li .dian{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333333;
}
.edleft ul li a span {
  margin-left: 20px;
}
.edleft ul li a:hover,
.edleft ul li.active a {
  background: #E8F2FF;
}
.edleft ul li a:hover .dian,
.edleft ul li.active a .dian{
  background: #2979FE;
}

/* ed右侧 */
.edright {
  flex: 1;
  width: 100%;
  max-width: 942px;
  padding: 40px 20px 20px 20px;
  margin: 0 auto;
  box-sizing: border-box;
}
.edright .edtool {
  width: 100%;
  font-weight: 400;
  text-align: center;
}
.edright .edtool h1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  color: #333333;
}
.edright .edtool p {
  width: 100%;
  font-size: 16px;
  line-height: 22px;
  color: #666666;
  margin-top: 12px;
}
.edright .uploadBox {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 366px;
  border-radius: 12px;
  border: 1px dashed #E5E5E5;
  margin-top: 30px;
  padding: 20px 0;
  box-sizing: border-box;
}
.uploadBox .upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.uploadBox .upload .upicon {
  width: 64px;
  height: 64px;
  color: #777;
  margin-bottom: 24px;
}
.uploadBox .upload .upload-btn {
  width: 270px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  cursor: pointer;
  margin-bottom: 18px;
  border-radius: 24px;
  background: linear-gradient(134.98deg, #03BBD8 0%, #588EEC 100%);
}
.desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #666;
}
.edright .pickimgBox {
  display: none;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px dashed #E5E5E5;
  margin-top: 30px;
  padding: 20px 0;
  box-sizing: border-box;
}
.pickimgBox .edimgBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pickimgBox.show,
.uploadBox.show {
  display: flex;
}
.pickimgBox .edimgBox .edimg {
  max-width: 500px;
  max-height: 350px;
  display: block;
  object-fit: contain;
}
.pickimgBox .edimgBox .desc {
  margin-top: 20px;
}
.optionBox {
  display: none;
  width: 100%;
  border-radius: 19px;
  padding: 30px 0;
  margin-top: 30px;
  background: rgba(252, 254, 255, 1);
  box-sizing: border-box;
}
.optionBox.show {
  display: block;
}
.resultBox {
  display: none;
  width: 100%;
  border-radius: 19px;
  margin-top: 30px;
  justify-content: center;
  box-sizing: border-box;
}
.resultBox .btnCol{
  width: auto;
  padding: 0 60px;
  margin: 0px 20px 0 20px;
}
.resultBox .btnCol.Cancle{
  background: #fff;
  color: #588EEC;
  border: 1px solid #588EEC;
  box-sizing: border-box;
}
.resultBox.show {
  display: flex;
}

/* 大小 */
.optionBox .sizeTypes {
  display: flex;
  justify-content: space-around;
  margin-bottom: 19px;
}

.optionBox .sizeTypes .size {
  width: 190px;
  height: 52px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}

.optionBox .sizeTypes .size.active {
  border-color: #4E93EA;
}
.optionBox .sizeTypes .size img {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 10px;
}
.optionBox .customSize {
  display: none;
  justify-content: space-around;
  margin-bottom: 19px;
}
.customSize.show {
  display: flex;
}
.customSize .cust {
  width: 190px;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  color: #333333;
  box-sizing: border-box;
}
.customSize .cust label {
  width: 100%;
  min-height: 24px;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  user-select: none;
  margin-bottom: 16px;
}
.customSize .cust input {
  width: 100%;
  height: 52px;
  font-size: 16px;
  border-radius: 8px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.customSize .custSure {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  padding: 0 30px;
  color: #FFFFFF;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0 16px 0 auto;
  background: linear-gradient(108.86deg, #03BBD8 0%, #588EEC 100%);
  box-sizing: border-box;
}
.btnCol,
#sureBtn {
  width: 270px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
  border-radius: 24px;
  user-select: none;
  margin: 30px auto 0 auto;
  background: linear-gradient(134.98deg, #03BBD8 0%, #588EEC 100%);
  box-sizing: border-box;
}

/* 裁剪 */
.optionBox .cropType {
  display: flex;
  justify-content: space-around;
  margin-bottom: 19px;
}
.optionBox .cropType .item {
  width: 190px;
  height: 52px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.optionBox .cropType .layui-btn {
  width: 190px;
  height: 52px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.optionBox .cropType .item.active {
  border-color: #4E93EA;
}
.optionBox .cropType .item .icon {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 10px;
}
.customCrop {
  display: none;
  justify-content: space-around;
  margin-bottom: 19px;
  margin-top: 32px;
}
.customCrop.show {
  display: flex;
}
.customCrop .cust {
  width: 190px;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  color: #333333;
  box-sizing: border-box;
}
.customCrop .cust label {
  width: 100%;
  min-height: 24px;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  user-select: none;
  margin-bottom: 16px;
}
.customCrop .cust input {
  width: 100%;
  height: 52px;
  font-size: 16px;
  border-radius: 8px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.customCrop .custSure {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  padding: 0 30px;
  color: #FFFFFF;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0 16px 0 auto;
  background: linear-gradient(108.86deg, #03BBD8 0%, #588EEC 100%);
  box-sizing: border-box;
}
.pickimgBox .edimgBox #cropperImg {
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; 
}
.pickimgBox .edimgBox #cropperImg .edimg {
  max-width: 600px;
  max-height: 400px;
}

/* 分辨率 */
.optionBox .setdpi {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
}
.optionBox .setdpi label {
  height: 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #333333;
  text-align: left;
  margin-right: 30px;
}
.optionBox .setdpi .layui-btn {
  width: 190px;
  height: 52px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}

/* 水印 */
.waterInfo {
  display: none;
  margin-top: 30px;
}
.waterInfo.show {
  display: block;
}
.waterSet {
  width: 100%;
  min-height: 490px;
  border-radius: 16px;
  display: flex;
  padding: 30px;
  border: 1px dashed #E5E5E5;
  box-sizing: border-box;
}
.waterSet .waterL {
  width: 433px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waterSet .waterL #edImgCa {
  display: block;
  position: relative;
}
.waterSet .waterL .edimg {
  max-width: 100%;
  /* max-height: 490px; */
  max-height: 540px;
  display: block;
  user-select: none;
}
.waterSet .waterL #imageCanvas {
  width: 100%;
  height: 100%;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.waterSet .waterR {
  flex: 1;
  width: 100%;
  margin-left: 30px;
}
.waterSet .waterR .tynote {
  height: 22px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #333333;
  text-align: left;
  margin-bottom: 10px;
}
.waterSet .waterR .wyings {
  margin-bottom: 16px;
}
.waterSet .waterR .wyings .type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.waterSet .waterR .wyings .type .wzinfo {
  display: flex;
}
.waterSet .waterR .wyings .type .wzinfo dl {
  display: block;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  margin-left: 10px;
  box-sizing: border-box;
}
.waterSet .waterR .wyings .type .wzinfo .cu {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  width: 28px;
}
.waterSet .waterR .wyings .type .wzinfo .cu img {
  width: 16px;
  height: 16px;
}
.waterSet .waterR .wyings .type .wzinfo .cu.qx img {
  width: 20px;
  height: 20px;
}
.waterSet .waterR .wyings .type .wzinfo .cu.active {
  border-color: #4E93EA;
}
.waterSet .waterR .wyings .type .wzinfo .font {
  width: 64px;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  user-select: none;
  text-align: center;
}
.waterSet .waterR .wyings .layui-input {
  height: 36px;
  font-size: 12px;
  border-radius: 6px;
  padding: 0 18px;
  color: #333333;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.waterSet .waterR .wyings .layui-input::placeholder {
  color: #999999;
}
.waterSet .waterR .wyings .inputImg {
  height: 36px;
  line-height: 34px;
  font-size: 12px;
  border-radius: 6px;
  padding: 0 8px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999999;
  cursor: pointer;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.waterSet .waterR .wyings .inputImg img {
  height: 20px;
  width: 20px;
  user-select: none;
  display: block;
}
.waterSet .waterR .huabis {
  margin-bottom: 19px;
}
.waterSet .waterR .huabis .item {
  display: flex;
  align-items: center;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
  text-align: left;
  margin-top: 13px;
}
.waterSet .waterR .huabis .item:first-child {
  margin-top: 0;
}
.waterSet .waterR .huabis .item label {
  width: 45px;
  margin-right: 19px;
}
.waterSet .waterR .huabis .item .slider {
  flex: 1;
  width: 100%;
}
.waterSet .waterR .huabis .item .slider .layui-slider {
  height: 8px;
  border-radius: 6px;
}
.waterSet .waterR .huabis .item .slider .layui-slider-bar {
  border-radius: 6px;
}
.waterSet .waterR .huabis .item .slider .layui-slider-wrap {
  top: -14px;
}
.waterSet .waterR .huabis .item .slider .layui-slider-wrap-btn {
  width: 10px;
  height: 10px;
  background: #588EEC;
  border-color: #588EEC !important;
}
.waterSet .waterR .weizhi .layui-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 30%;
}
.waterSet .waterR .layui-form .layui-form-radio>i {
  margin-right: 3px;
  font-size: 12px;
}
.waterSet .waterR .layui-form .layui-icon-radio:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #4598E7;
  box-sizing: border-box;
}
.waterSet .waterR .weizhi .layui-form .jgg {
  display: flex;
}
.waterSet .waterR .weizhi .juigongge {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 8px);
}
.waterSet .waterR .weizhi .juigongge dl {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #E5E5E5;
  display: block;
}
.waterSet .waterR .weizhi .juigongge dl.active {
  background: linear-gradient(90deg, #03BBD8 0%, #588EEC 100%), #E5E5E5;
}
.waterBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.waterBtn .btnCol {
  margin: 0;
}
.waterBtn .btnCol.cancle {
  background: #FFFFFF;
  color: #4598E7;
  margin-right: 50px;
  border: 1px solid #4A95E9;
}


/* 压缩图片 */
.setCompress{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
}
.setCompress label {
  height: 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #333333;
  text-align: left;
  white-space: nowrap;
  margin-right: 30px;
}
.setCompress .layui-form {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  user-select: none;
  box-sizing: border-box;
}
.setCompress .layui-form .layui-form-radio:hover>*,.setCompress .layui-form .layui-form-radioed,.setCompress .layui-form .layui-form-radioed>i {
  color: #26c6da;
}
.setCompress .layui-form .layui-form-radio,.setCompress .layui-form .layui-form-radioed{
  margin: 2px 15px 0 0;
}
.setCompress .layui-form .layui-form-radio{
  margin-right: 30px;
}
.setCompress .layui-form .layui-form-radio>div{
  font-size: 16px;
}


/* 转换图片 */
.setConvert{
  display: flex;
  align-items: flex-start;
  margin-bottom: 19px;
  padding-left: 15px;
}
.setConvert.daochuGif,
.setConvert.chichun{
  display: none;
}
.setConvert.daochuGif.show,
.setConvert.chichun.show{
  display: flex;
}
.setConvert label {
  height: 24px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #333333;
  text-align: left;
  white-space: nowrap;
  margin-right: 20px;
}
.setConvert .layui-form {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  user-select: none;
  box-sizing: border-box;
}
.setConvert .layui-form-radio:hover>*,.setConvert .layui-form-radioed,.setConvert .layui-form-radioed>i,
.setConvert .layui-form .layui-form-radio:hover>*,.setConvert .layui-form .layui-form-radioed,.setCompress .layui-form .layui-form-radioed>i {
  color: #26c6da;
}
.setConvert .layui-form .layui-form-radio,.setConvert .layui-form .layui-form-radioed{
  margin: 2px 15px 0 0;
}
.setConvert .layui-btn {
  width: 190px;
  height: 52px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
  background: #FFFFFF;
  user-select: none;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}
.setConvert.imgtype .layui-form .layui-form-radio{
  margin-right: 30px;
}
.setConvert.daochuGif .dtgif{
  display: flex;
  align-items: center;
  margin-left: 10px;
  position: relative;
}
.setConvert.daochuGif .dtgif .layui-input-wrap{
  width: 130px;
  line-height: 30px;
  margin: 0 40px 0 32px;
}
.setConvert.daochuGif .dtgif .layui-input-wrap .layui-input{
  height: 30px;
}
.setConvert.daochuGif .dtgif .gifbg{
  display: block;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.setConvert.daochuGif .dtgif.show .gifbg{
  display: none;
}
.setConvert.chichun label {
  margin-right: 20px;
}
.setConvert.chichun .layui-form .layui-form-radio{
  margin-right: 4px;
}
.setConvert .layui-form .layui-form-checkbox>div,
.setConvert .layui-form .layui-form-radio>div{
  font-size: 16px;
}
.setConvert .layui-form .layui-form-checked[lay-skin=primary]>i{
  border-color: #26c6da !important;
  background-color: #26c6da !important;
}

/* 多图 */
.edimglist{
  display: flex;
  gap: 25px 30px;
  flex-wrap: wrap;
  padding: 0 65px;
  box-sizing: border-box;
}
.edimglist .eitem{
  width: 130px;
  display: flex;
  flex-direction: column;
}
.edimglist .eitem .imbox{
  width: 100%;
  height: 130px;
  position: relative;
  display: block;
}
.edimglist .eitem .imbox .simg{
  width: 100%;
  height: 100%;
  border: 1px solid #ededed;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  display: block;
  box-sizing: border-box;
}
.edimglist .eitem .imbox .imremove{
  width: 18px;
  height: 18px;
  position: absolute;
  right: -8px;
  top: -8px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.edimglist .eitem .imbox .imremove img{
  width: 100%;
  height: 100%;
  display: block;
}
.edimglist .eitem .imfo{
  display: flex;
  line-height: 20px;
  padding: 5px 2px 0;
}
.edimglist .eitem .imfo .span1{
  font-size: 12px;
  width: 70px;
  font-weight: 400;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 2px;
}
.edimglist .eitem .imfo .span2{
  font-size: 12px;
  font-weight: 400;
  color: #999;
}
#addMoreImg{
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c5c3c6;
  cursor: pointer;
  font-size: 60px;
  color: #e0d9e2;
  border-radius: 4px;
  box-sizing: border-box;
}
#addMoreImg:hover{
  border-color: #26c6da;
  color: #26c6da;
}

/* 图片转pdf */
.layui-img-pdf .layui-tab-content{
  padding: 15px 10px;
  box-sizing: border-box;
}
.layui-img-pdf .layui-mk-line{
  width: 100%;
  display: flex;
  gap: 10px;
  line-height: 40px;
  margin: 8px 0;
  box-sizing: border-box;
}
.layui-img-pdf .layui-mk:last-child .layui-mk-line{
  margin-bottom: 0;
}
.layui-img-pdf .layui-mk-line .ltab{
  width: 60px;
  height: 30px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 2px;
}
.layui-img-pdf .layui-mk-line .ltab:hover,
.layui-img-pdf .layui-mk-line .ltab.active{
  color: #26c6da;
  /* background: rgba(241,74,74,.1); */
  box-shadow: none;
  border: 1px solid #26c6da;
}

/* Word转长图 */
.edimglist.lngimg .eitem .imbox img{
  width: 100%;
  height: 100%;
  border: none;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  display: block;
  box-sizing: border-box;
}
.edimglist.lngimg .eitem .imfo .span1{
  width: 82px;
}
.setConvert.lngNum .layui-form{
  padding-left: 100px;
}
.setConvert.lngNum .layui-form input{
  width: 520px;
}
.setConvert.lngNum .layui-form input::placeholder{
  color: #999;
}
.optionBox.lngbox .setConvert{
  padding-left: 136px;
}

.optionBox.nobg{
  background: none;
  padding-top: 0;
}
/* Ai绘画 */
.edtextBox{
  width: 100%;
  margin-top: 30px;
}
.edtextBox textarea{
  font-size: 16px;
  color: #333333;
  line-height: 24px;
  margin-top: 30px;
  padding: 10px 15px;
  box-sizing: border-box;
}
.edtextBox textarea::placeholder{
  color: #999;
}
.edtextBox .edtext{
  font-size: 14px;
  color: #333;
  display: flex;
  margin-top: 10px;
}
.edtextBox .edtext label{
  color: #999;
}
.edtextBox .example{
  display: flex;
  align-items: center;
  justify-content: left;
}
.edtextBox .example span{
  margin: 0 10px 0 5px;
  cursor: pointer;
}
.edtextBox .example span:hover{
  color: #26c6da;
}

/* 抠图换背景 */
.koutuBox {
  display: none;
  min-height: 240px;
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  margin-top: 30px;
  padding: 20px;
  box-sizing: border-box;
}
.koutuBox.show{
  display: flex;
}
.koutuBox .ktlef{
  width: 100%;
  flex: 1;
  margin-right: 20px;
  position: relative;
}
.koutuBox .ktrig{
  width: 220px;
  min-width: 220px;
}
.koutuBox .ktrig .ktr_nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.koutuBox .ktrig .settingsItem{
  font-size: 16px;
  width: 88px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.koutuBox .ktrig .settingsItem .stick{
  width: 30px;
  height: 4px;
  background: transparent;
  position: absolute;
  border-radius: 4px;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%);
}
.koutuBox .ktrig .settingsItem.active {
  color: #f14a4a;
  font-weight: 700;
}
.koutuBox .ktrig .settingsItem.active .stick{
  background: #f14a4a;
}
.koutuBox .ktrig .ktrmks .ktr_mk{
  display: none;
}
.koutuBox .ktrig .ktrmks .ktr_mk.show{
  display: block;
}
/* 擦图 */
.koutuBox .ktrig .ktrmks .ktr_mk .caitu .ctnote{
  font-size: 14px;
  color: #333;
  font-weight: 700;
  margin-bottom: 20px;
}
.koutuBox .ktrig .ktrmks .ktr_mk .caitu .brushSel{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.koutuBox .ktrig .ktrmks .ktr_mk .caitu .brushSel .brit{
  width: 100px;
  height: 30px;
  background: #f2f6fb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.koutuBox .ktrig .ktrmks .ktr_mk .caitu .brushSel .brit.active{
  border-color: #f14a4a;
  color: #f14a4a;
  background: rgba(241,74,74,.1);
}
.koutuBox .ktrig .ktrmks .ktr_mk .caitu .brush .item{
  width: 100%;
  color: #333;
  align-items: center;
  margin-bottom: 20px;
}
.koutuBox .brush .item .desc{
  font-size: 12px;
  text-align: left;
}
.koutuBox .brush .item .slider {
  width: 100%;
  margin-top: 10px;
}
.koutuBox .brush .item .slider .layui-slider {
  height: 8px;
  border-radius: 6px;
}
.koutuBox .brush .item .slider .layui-slider-bar {
  border-radius: 6px;
}
.koutuBox .brush .item .slider .layui-slider-wrap {
  top: -14px;
}
.koutuBox .brush .item .slider .layui-slider-wrap-btn {
  width: 10px;
  height: 10px;
  background: #f14a4a;
  border-color: #f14a4a;
  /* background: #588EEC; */
  /* border-color: #588EEC !important; */
}

/* 背景 */
.koutuBox .ktrig .ktrmks .ktr_mk .selectSi,
.koutuBox .ktrig .ktrmks .ktr_mk .selectIt{
  width: 100%;
  color: #555c78;
  display: flex;
  justify-content: space-between;
}
.koutuBox .ktrig .ktrmks .ktr_mk .selectSi .sit,
.koutuBox .ktrig .ktrmks .ktr_mk .selectIt .sit {
  font-size: 14px;
  background: #f5f6ff;
  border: 1px solid transparent;
  width: 64px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  height: 34px;
  line-height: 34px;
  border-radius: 4px;
  color: #8991af;
}
.koutuBox .ktrig .ktrmks .ktr_mk .selectSi .sit.active,
.koutuBox .ktrig .ktrmks .ktr_mk .selectIt .sit.active {
  border: 1px solid #f14a4a;
  background: rgba(241,74,74,.1);
  color: #f14a4a;
}
.koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs{
  width: 100%;
  margin-top: 10px;
}
.koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs .setmk{
  margin-top: 10px;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
}
.koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs .setmk.show{
  display: flex;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .colbg{
  width: 40px;
  height: 40px;
  border: 1px solid #eef0f4;
  border-radius: 4px;
  display: flex;
  cursor: pointer;
  user-select: none;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .colbg:nth-child(4n) {
  margin-right: 0;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .colbg .color {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .chimg{
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
}
.colorPicker .layui-colorpicker{
  width: 40px;
  height: 40px;
  border: none;
  padding: 0px;
  line-height: 36px;
}
.koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs .setmk.bgtemp{
  justify-content: flex-start;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}
.koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs .setmk.bgtemp::-webkit-scrollbar{
  display: none;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox{
  margin-bottom: 14px;
  margin-right: 14px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox .timg{
  width: 64px;
  height: 64px;
  display: block;
  border-radius: 4px;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox:nth-child(3n) {
  margin-right: 0;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox.show .chimg,
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .colbg.show .chimg{
  display: block;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox{
  display: flex;
  width: 100%;
  position: relative;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .addbox{
  width: 100px;
  height: 100px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border: 1px dashed #cdcdcd;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .addbox.show{
  display: flex;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .addbox img{
  width: 20px;
  height: 20px;
  object-fit: cover;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .showBgbox{
  width: 100px;
  height: 100px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .showBgbox.show{
  display: flex;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .showBgbox .bgimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .customBgBox .showBgbox .text{
  position: absolute;
  top: calc(50% - 16px);
  left: calc(50% - 32px);
  width: 64px;
  height: 32px;
  border-radius: 4px;
  color: #333;
  background: rgba(56,46,46,.4);
  color: #fff;
  text-align: center;
  line-height: 32px;
}
/* 尺寸 */
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .siziBox{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .siziBox .whsize{
  margin: 0 0px 18px 0;
  border: 1px solid #dfe4eb;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  background: #fff;
  text-align: center;
  line-height: 30px;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  color: #282a43;
  box-sizing: border-box;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .siziBox .whsize.active {
  border-color: #f14a4a;
  color: #f14a4a;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox{
  width: 100%;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert{
  width: 100%;
  height: 58px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe4eb;
  margin-bottom: 6px;
  position: relative;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert p{
  font-size: 12px;
  color: #333;
  text-align: center;
  user-select: none;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert .p1 {
  line-height: 18px;
  height: auto!important;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert .p2 {
  color: #999;
}
.koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert.active {
  border-color: #f14a4a;
  color: #f14a4a;
}
.koutuBox .ktlef .ktl_top{
  display: flex;
  justify-content: center;
  background: #f2f2f6;
  border-radius: 50px;
  align-self: end;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
.koutuBox .ktlef .ktl_top .ktnav{
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #c4c9d9;
  border-radius: 50px;
  /* cursor: pointer; */
  user-select: none;
  background: #f2f2f6;
}
.koutuBox .ktlef .ktl_top .ktnav.active {
  background: #f14a4a;
  color: #fff;
}
.koutuBox .ktlef .ktImgBox{
  margin-top: 42px;
  max-width: 100%;
  height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f6ff;
  touch-action: none;
}
.ktImgBox .originalBox,
.ktImgBox .resBox{
  display: none;
}
.ktImgBox .originalBox.show{
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
}
.ktImgBox .originalBox #caituimg{
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  user-select: none;
}
.ktImgBox .originalBox #caituimg.show{
  display: block;
}
.ktImgBox .resBox.show{
  display: flex;
  justify-content: center;
}
.ktImgBox .resBox .cropBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.ktImgBox .resBox .cropBox #mycropimg{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.ktImgBox .resBox .cropBox .cropper-container.cropper-bg{
  position: absolute;
}
.payOrderBox{
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}
.payOrderBox.show{
  display: flex;
}
.payOrderBox .onte{
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #555c78;
}
.payOrderBox .onte .zixun{
  display: flex;
  justify-content: space-around;
  margin-left: 20px;
  color: #6a7bff;
}
.payOrderBox .onte .zixun a{
  color: #6a7bff;
  margin:0 8px;
  box-sizing: border-box;
}
.payOrderBox .paybtns{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.payOrderBox .paybtns .payb{
  width: 140px;
  height: 40px;
  background: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #ececfa;
  font-size: 16px;
  color: #666;
  margin: 0 20px;
  display: flex;
  justify-content: center;
}

.ktBtnBox {
  display: none;
  width: 100%;
  border-radius: 19px;
  margin-top: 30px;
  justify-content: center;
  box-sizing: border-box;
}
.ktBtnBox .btnCol{
  width: auto;
  padding: 0 60px;
  margin: 0px 20px 0 20px;
}
.ktBtnBox .btnCol.Cancle{
  background: #fff;
  color: #588EEC;
  border: 1px solid #588EEC;
  box-sizing: border-box;
}
.ktBtnBox.show {
  display: flex;
}


@media screen and (max-width: 1450px){
  .editImgBox {
    padding-right: 0px;
  }
  .edright{
    margin: 0;
  }
}
@media screen and (max-width: 1200px){
  .edleft{
      width: 200px;
  }
  .edleft .edtit,
  .edleft ul li a{
    padding-left: 20px;
  }
  .edleft .edtit{
    font-size: 24px;
  }
  .koutuBox{
    padding: 20px 10px;
  }
  .koutuBox .ktlef{
    margin-right: 10px;
  }
}
@media screen and (max-width: 1100px){
  .edleft{
    width: 150px;
  }
  .edleft ul.edtypes {
    font-size: 16px;
  }
  .edleft .edtit {
    line-height: 70px;
    font-size: 24px;
    text-align: center;
    padding: 0;
    margin-top: 10px;
  }
  .edleft ul li {
    line-height: 50px;
  }
  .edleft ul li a{
    padding-left: 12px;
  }
  .edleft ul li .aimg,
  .edleft ul li .img {
    width: 20px;
    height: 20px;
  }
  .edleft ul li a span {
    margin-left: 12px;
  }
  .edright {
    padding: 30px 10px 20px 10px;
  }
}
@media screen and (max-width: 1050px){
  .koutuBox{
    flex-direction: column;
    padding: 20px 30px;
  }
  .koutuBox .ktrig{
    width: 100%;
    margin-top: 15px;
  }
  .koutuBox .ktrig .ktr_nav {
    justify-content: left;
  }
  .koutuBox .ktrig .ktrmks .ktr_mk .ktr_mbs .setmk {
    justify-content: left !important;
    gap: 15px;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox,
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .colbg{
    margin: 0;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .siziBox{
    justify-content: left;
    gap: 15px;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox{
    display: flex;
    justify-content: left;
    gap: 15px;
    flex-wrap: wrap;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .siziBox .whsize{
    margin: 0;
  }
  .koutuBox .ktrig .ktrmks .ktr_mk .selectSi, .koutuBox .ktrig .ktrmks .ktr_mk .selectIt {
    gap: 15px;
    justify-content: left !important;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .certBox .cert{
    max-width: 150px;    
    margin: 0;
    width: 47%;
    min-width: 138px;
    height: auto;
    padding: 10px;
  }
}
@media screen and (max-width: 1000px){
  .optionBox .cropType{
    justify-content: left;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0;
  }
  .optionBox .cropType .layui-btn,
  .optionBox .cropType .item{
    width: 24%;
    height: 46px;
    line-height: 44px;
    margin: 0;
  }
  .customCrop .cust input{
    height: 46px;
    line-height: 44px;
  }
  .customCrop .custSure{
    height: 46px;
    line-height: 46px;
  }
  .customCrop {
    margin-bottom: 10px;
    margin-top: 10px;
  }
}

@media screen and (max-width: 950px) {
  .waterSet{
    padding: 15px 10px;
  }
  .waterSet .waterR{
    margin-left: 10px;
  }
}
@media screen and (max-width: 900px) {
  .waterSet{
    flex-direction: column;
  }
  .waterSet .waterL{
    margin: 0 auto 15px auto;
  }
  .waterSet .waterR{
    margin: 0 20px;
    width: auto;
  }
}

/* Mobile */
@media screen and (max-width: 850px) {}
@media screen and (max-width: 800px) {
  .editImgBox{
    flex-direction: column;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
  }
  .edleft.minHeih{
    min-height: unset;
  }
  .edleft {
    float: none;
    width: 100%;
    display: flex;
    overflow-x: auto;
    border: none;
  }
  .edleft .edtit{
    display: none;
  }
  .edleft ul li a{
    min-width: 112px;
    padding: 0 12px;
    justify-content: center;
  }
  .edleft ul li .aimg, .edleft ul li .img,
  .edleft ul li.active a .aimg, .edleft ul li.active a .img{
    display: none;
  }
  .edleft ul li .dian{
    display: none;
    width: 50%;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
  }
  .edleft ul li.active .dian{
    display: block;
  }
  .edleft ul li a span {
    margin: 0;
    white-space: nowrap;
  }
  .edleft ul.edtypes{
    display: flex;
  }
  .edright {
    padding: 30px 0px 20px 0px;
  }
  .edright .uploadBox{
    min-height: unset;
  }
  .pickimgBox .edimgBox {
    width: 100%;
    overflow: hidden;
  }
  .pickimgBox .edimgBox .edimg {
    width: 100%;
    max-width: 500px;
    max-height: 350px;
    display: block;
  }
  .optionBox{
    padding: 15px 0;
  }
  .optionBox .sizeTypes .size{
    width: auto;
    height: 44px;
    line-height: 42px;
    padding: 0 20px;
  }
  .customCrop .cust,
  .customSize .cust{
    width: 30%;
  }
  .customSize .cust input{
    height: 42px;
  }
  .customCrop .cust label,
  .customSize .cust label{
    font-size: 16px;
  }
  .customSize .custSure{
    height: 42px;
    line-height: 42px;
    padding: 0 4vw;
  }
  .optionBox .setdpi .layui-btn{
    width: 150px;
    height: 42px;
    line-height: 40px;
  }
  .optionBox .cropType .layui-btn,
  .optionBox .cropType .item{
    font-size: 14px;
  }
  .optionBox .cropType .layui-btn,
  .optionBox .cropType .item{
    height: 42px;
    line-height: 40px;
  }
  .customCrop .cust input{
    height: 42px;
    line-height: 40px;
  }
  .customCrop .custSure{
    height: 42px;
    line-height: 42px;
    padding: 0 4vw;
  }
}
@media screen and (max-width: 700px) {
  .waterInfo .btnCol{
    width: 180px;
  }
}
@media screen and (max-width: 650px) {
  .pickimgBox.show, .uploadBox.show{
    padding: 10px;
  }
  .edimglist{
    width: 100%;
    padding: 0;
    gap: 20px;
  }
  .optionBox{
    padding: 12px 10px;
    margin-top: 20px;
  }
  .setCompress{
    margin-bottom: 15px;
  }
  .setCompress label{
    margin-right: 5px;
    font-size: 16px;
  }
  .setConvert.imgtype .layui-form .layui-form-radio,
  .setCompress .layui-form .layui-form-radio {
    margin-right: 5px;
  }
  .setCompress .layui-form .layui-form-radio>div,
  .setConvert label,
  .setConvert .layui-form .layui-form-checkbox>div, 
  .setConvert .layui-form .layui-form-radio>div,
  .setConvert .layui-form,
  .layui-form-radio>i {
    font-size: 14px;
  }
  .setConvert .layui-form-radio:hover>*,
  .setConvert .layui-form-radioed, 
  .setConvert .layui-form-radioed>i, 
  .setConvert .layui-form .layui-form-radio:hover>*, 
  .setConvert .layui-form .layui-form-radioed, 
  .setCompress .layui-form .layui-form-radioed>i {
    font-size: 16px;
  }
}
@media screen and (max-width: 550px) {
  .pickimgBox .edimgBox #cropperImg{
    height: 350px;
  }
  .edright .edtool h1{
    font-size: 26px;
  }
  .resultBox .btnCol{
    padding: 0 5vw;
    font-size: 16px;
    height: 40px;
    margin: 0 4vw;
    white-space: nowrap;
    line-height: 40px;
  }
  .setConvert {
    flex-direction: column;
    margin-bottom: 10px;
    padding-left: 0;
  }
  .setConvert label{
    font-size: 16px;
  }
  .setConvert.daochuGif .dtgif{
    margin-left: 0;
    white-space: nowrap;
  }
  .setConvert.daochuGif .dtgif .layui-input-wrap{
    margin: 0 4vw;
  }
  .btnCol, #sureBtn{
    width: 100%;
    max-width: 270px;
  }
  .koutuBox {
    padding: 20px 11px;
  }
  .koutuBox .ktrig .ktrmks .ktr_mbs .setmk .tempbox .timg {
    width: 19vw;
    height: 19vw;
    max-width: 71px;
    max-height: 71px;
  }
  .ktBtnBox .btnCol{
    padding: 0 5vw;
    margin: 0 4vw;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
  }
}
@media screen and (max-width: 500px) {
  .optionBox .cropType .layui-btn,
  .optionBox .cropType .item{
    width: auto;
    padding: 0 10px;
    white-space: nowrap;
  } 
  .waterSet .waterL{
    width: 100%;
  }
  .waterSet .waterR{
    margin: 0;
  }
  .waterBtn{
    gap: 6vw;
  }
  .waterInfo .btnCol {
    width: 40%;
    height: 42px;
    font-size: 16px;
    line-height: 42px;
  }
  .waterBtn .btnCol.cancle{
    margin: 0;
  }
}
@media screen and (max-width: 450px) {
  .edright .edtool h1{
    font-size: 24px;
  }
  .edright .edtool p,
  .desc {
    font-size: 14px;
  }
}
@media screen and (max-width: 400px)  {
  .pickimgBox .edimgBox #cropperImg{
    height: 300px;
  }
  .optionBox .customSize,
  .optionBox .sizeTypes{
    justify-content: space-between;
  }
  .optionBox .sizeTypes .size{
    padding: 0 12px;
    font-size: 14px;
  }
}