.wapper{background-color:#f7f7f7;overflow: hidden;}
.wapper .content{width:1200px;margin:30px auto 60px;min-height:600px;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);border-radius:20px;display: flex;background-color:#fff;}

.wapper .content .left-content{width:208px;background-color: var(--main-color);border-top-left-radius:20px;border-bottom-left-radius:20px;padding:20px 0px 20px}
.wapper .content .left-content .parent-group{line-height:48px;user-select: none;}

.wapper .content .left-content .parent-name{text-indent:30px;color:#fff;opacity:0.5;}
.wapper .content .left-content .parent-group li{width:180px;border-radius:30px;text-indent:50px;color:#fff;margin:5px auto 5px;cursor: pointer;}
.wapper .content .left-content .parent-group li.selected,.wapper .content .left-content .parent-group li:hover{color:#262626;background-color: #fff;}


.wapper .content .right-content{width:910px;margin-left:40px;position: relative;}
.wapper .content .right-content .convert-title{width:100%;height:30px;margin-top:40px;}
.wapper .content .right-content .convert-title .use-title{font-size:32px;margin-right:30px;}
.wapper .content .right-content .convert-title .use-desc{color:#5d5d5d;}

.wapper .content .right-content .convert-step{color:#afafaf;margin-top:40px;}
.wapper .content .right-content .convert-upload{user-select: none;width:906px;min-height:380px;margin-top:33px;background-color: #f6f9fe;border-radius: 30px;display: flex;align-items: center;border:1px solid #dadce8;}
.wapper .content .right-content .convert-upload .el-upload-dragger{border-radius: 30px;background-color: #f7f7f7;border: none;}
.wapper .content .right-content .convert-upload .upload-icon{width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;font-size:76px;color: var(--main-color);margin:50px auto 0px;}
.wapper .content .right-content .convert-upload .upload-btn{display:block;width:310px;height:62px;line-height:62px;color:#fff;border-radius: 50px;margin:20px auto 0px;}
.wapper .content .right-content .convert-upload .upload-desc{width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;color:#7d7d7d;margin:20px auto 0px}

.wapper .content .right-content .convert-upload .el-upload-1 .el-upload{width:100%;height:380px;}

/**
图片列表样式
*/
#file-list-ul{padding:24px 4px 24px;justify-content: left;display: flex;flex-wrap: wrap;overflow-y:auto;max-height: 600px;}
#file-list-ul .item{width:180px;margin:14px;padding-bottom: 14px;position:relative;}
#file-list-ul .item .delete-item{position: absolute;right:-15px;top:-15px;z-index:3;font-size: 24px;color:#999;cursor: pointer;}
#file-list-ul .item .delete-item:hover{color:red}
#file-list-ul .item .item-content{overflow: hidden;width:100%;height: 100%;}
#file-list-ul .item .item-content .image{width:100%;aspect-ratio: 1/1;position: relative;overflow: hidden;border-radius: 20px;border:1px solid #ccc;}
#file-list-ul .item .item-content .image .loadding{width:100%;height:100%;border-radius: 20px;background-color: #d5e2fa;display: flex;justify-content: center;align-items: center;}
#file-list-ul .item .item-content .image .image-inner{width:100%;height:100%;position:relative;top:0;left:0;}
#file-list-ul .item .item-content .image .preview-image{width:100%;height:100%;background-color: #c2c2c2;display: flex;justify-content: center;align-items: center;}
#file-list-ul .item .item-content .image .preview-image .iconfont-heic{font-size:100px;}
#file-list-ul .item .item-content .image img{width:100%;height:100%;display: block;object-fit:contain;object-position: center;}
#file-list-ul .item .item-content .image .info{width:100%;height:36%;position: absolute;bottom:0;z-index:1;background:rgba(0,0,0,0.8);display: flex;justify-content:center;align-items:center;color:#fff;font-size: 14px;}
#file-list-ul .item .item-content .image .info .info-item{margin:4px auto 4px;}
#file-list-ul .item .item-content .image .info .doing{display: flex;flex-direction: column;align-items: center;justify-content:space-between;}
#file-list-ul .item .item-content .image .info .doing .step-text{margin:-4px auto 4px;}
#file-list-ul .item .item-content .filename{padding:0 2px 0;margin:10px auto 10px;text-align: center;}
#file-list-ul .item .item-content .operate-button{width:100%;display: flex;justify-content: space-around;height:34px;}
#file-list-ul .item .item-content .operate-button .operate-button-item{width:45%;border:1px solid #ccc;border-radius:50px;padding:6px 4px 6px;text-align: center;font-size: 14px;cursor: pointer;}
#file-list-ul .item .item-content .operate-button .fail-button{width:80%;border:1px solid #ccc;border-radius:50px;padding:6px 4px 6px;text-align: center;font-size: 14px;cursor: pointer;border-color:red;color:red}

#file-list-ul .item .el-upload .el-upload-dragger{width:180px;height:180px;display: flex;justify-content: center;align-items: center;}
#file-list-ul .item .el-upload .el-upload-dragger .upload-plus-button{width:180px;min-height:180px;border-radius: 20px;margin:10px;cursor:pointer;font-size:50px;color:#ccc;}
#file-list-ul .item .el-upload .el-upload-dragger .upload-plus-button svg{width:50px;height:50px;color:#ccc;}

#file-list-ul .item .progress-box{width:86px;height:10px;position: relative;}
#file-list-ul .item .el-upload-dragger{border: 1px solid #ccc;}
/* 进度条的样式 */
#file-list-ul .item .progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #5873fe  0%, #ba68c8  50%, #5873fe  100%);
    background-size: 200% 100%;
    animation: flow 2s linear infinite;
    border-radius: 50px;
}

/* 进度文本的样式 */
#file-list-ul .item .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* 动画效果：进度条流动 */
@keyframes flow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.action-button{position:absolute;width:132px;height:48px;right:20px;top:50%;margin-top:-24px;color:#fff;background: linear-gradient(to right, #584fff 0,#8a6cff 100%);border-radius: 50px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.action-button.disabled{background: #ccc;cursor: not-allowed;pointer-events: none;}

.root-button{border-radius: 50px;background: linear-gradient(to right, #584fff 0,#8a6cff 100%);display: flex;align-items: center;justify-content: center;padding:6px 20px 6px;color:#fff;cursor: pointer;font-size:14px;border-color:var(--main-color);}
.root-button.disabled{cursor:not-allowed;background:#ddd;color:#868686;box-shadow:none;pointer-events: none;}

.base-button{
    border-radius: 50px;
    background-color: #fff;
    cursor: pointer;display: flex;align-items: center;justify-content: center;
    border:1px solid #eee;
    font-size:14px;
}
.base-button[size="small"]{
  padding:4px 16px 4px;
}

.base-button[size="medium"]{
  padding:10px 30px 10px;
}

.result-buttons{display: flex;margin:40px 0 40px;justify-content: center;}
.result-buttons .button{margin:0 20px 0;width:132px;height:48px;font-size: 16px;}

/*形态2：上传文件后的形态*/
.wapper .content .right-content .convert-upload .convert-upload-shape-1{width:100%;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2{width:100%;display:flex;flex-direction:column;justify-content: center;padding:10px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display{background-color: #fff;min-height:500px;border: 1px solid #dadce8;width:100%;border-top-left-radius: 30px;border-top-right-radius: 30px;}


/*压缩选项 和 压缩按钮*/
.compress-options-and-button{width:100%;display: flex;height:80px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;background-color: #fff;border: 1px solid #dadce8;border-top:none;align-items: center;position:relative;padding:0 10px 0 10px;}
.compress-options-and-button .compress-options .el-input__inner{text-align: center;}
.compress-options-and-button .compress-options .el-radio__label{display: flex;justify-content: center;align-items: center;}
.compress-options-and-button .compress-options .custom-clear-input{width:60px;}
.compress-options-and-button .compress-options .custom-size-input{width:70px;}
.compress-options-and-button .compress-button{width:132px;height:48px;color:#fff;background-color: var(--main-color);border-radius:50px;display: flex;justify-content: center;align-items: center;cursor: pointer;position: absolute;right:10px;}

/*勾选协议*/
.wapper .content .right-content .convert-agreement{width:100%;margin:20px 0px 20px 0px;color:#6c6c6c;text-align:right;position:relative;}
.wapper .content .right-content .convert-agreement .sort-tutorial-tip{display:none;width:300px;height:40px !important;left:auto;right:54px;top:-58px;text-align: center;line-height: 40px;position: absolute;background-color:#fff;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);border-radius:10px;}
.wapper .content .right-content .convert-agreement .sort-tutorial-tip .sort-tutorial-tip-jiao{top:35px;left:90px;width:10px;height:10px;position: absolute;bottom: -20px;background-color:#fff;transform:rotate(45deg);}
.wapper .content .right-content .convert-agreement .el-checkbox__label {font-size: 12px;color:#6c6c6c;}
.wapper .content .right-content .convert-agreement .el-checkbox__label a{color:#6c6c6c;text-decoration: underline;}
/*优势展示*/
.wapper .content .right-content .convert-advantage{position: relative;left: -20px;user-select: none;width:990px;margin-top:20px;}
.wapper .content .right-content .convert-advantage ul{display:flex;flex-direction:row;flex-wrap:wrap}
.wapper .content .right-content .convert-advantage li{flex-shrink: 0;width:254px;margin:32px;}
.wapper .content .right-content .convert-advantage li .title{color:#262626;}
.wapper .content .right-content .convert-advantage li .title .ky-font{color:#6c6c6c;font-size:24px;}
.wapper .content .right-content .convert-advantage li .desc{margin-top:20px;line-height: 26px;color:#6c6c6c;}



/**
图片压缩对比预览Dialog
*/
.image-compare-preview-dialog .dialog-body{
    width:100%;
    height:550px;
    display: flex;
  }
  
.image-compare-preview-dialog .dialog-body .left{
    width:50%;
    height:100%;
    border-right:1px solid #F0F0F0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
 .image-compare-preview-dialog .dialog-body .right{
    width:50%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
.image-compare-preview-dialog .dialog-body img{
    max-width: 430px;
    max-height: 530px;
  }
  
.image-compare-preview-dialog .dialog-body .size-tip{
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
  }
  
.image-compare-preview-dialog .image-mask{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
    pointer-events: auto;
  }

/**
下载受限弹窗
*/

#downloadlimit-dialog{
    width:500px !important;
    border-radius:8px;position: relative;user-select: none;padding-bottom:30px;min-height:200px;
}
#downloadlimit-dialog .content{width:90%;margin:30px auto 0;display: flex;flex-direction:column;}
#downloadlimit-dialog .content .text{color:#2d2d2d;font-size:14px;}
#downloadlimit-dialog .content .actions{display: flex;align-items: center;margin-top: 20px;justify-content:center;}
#downloadlimit-dialog .content .actions button{margin:0px 20px 0px;}
#downloadlimit-dialog .content .tips{display: flex;justify-content: center;align-items: center;margin-top: 30px;}

#downloadlimit-dialog .syjl{text-decoration: underline;color:var(--main-color);}