.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;border-radius: 30px;background-color: #f7f7f7;border:2px dotted #e6e6e6;margin-top:33px;}
.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:90px 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}


/*形态2：上传文件后的形态*/

.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display{width:100%;height:auto;margin:0px auto 40px;text-align:left;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display ul{width:95%;margin:0px auto 0px}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li{width:100%;height:60px;line-height:60px;border-bottom: 1px solid #e6e6e6;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .info-item{display:inline-block;height:60px;vertical-align: top;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .handle{width:3%;text-align: center;position:relative;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .handle .drag-icon{font-size:18px;cursor: pointer;display:none;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .no{width:4%;text-align:center;color: #262622;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .name{width:34%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .name .name-inner{width:95%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #262622;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .process{width:43%;height:100%;position: relative;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .process .process-bar{width:100%;height:10px;position:absolute;top:50%;margin-top:-5px;border-radius: 50px;background-color: #cecece;overflow: hidden;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .process .process-bar .blood-bar{width:0px;height:100%;background-color:var(--main-color);border-radius: 50px;}

.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status{width:13%;text-align: center;position: relative;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-status{width:100%;height:100%;position:relative;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-status.fail{color:red;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-progress-bar{position:relative;width:92px;height:10px;left:0px;top:50%;margin-top:-5px;border-radius:20px;background-color:#E5E5E5;display: inline-block;vertical-align: top;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .upload-progress-bar .progress{width:0px;height:100%;position:absolute;top:0px;left:0px;border-radius:20px;background-color:var(--main-color)}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .fail-icon{color:#e5404f;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .gradient-loader{top:6px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .status .gradient-loader .gradient-loader-inner{background-color: #fff;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item{width:100%;height:100%;position:relative;cursor:pointer;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete .delete-icon{position: relative;top:2px}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete:hover{color:var(--main-color);}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.delete:hover .delete-icon{color:var(--main-color);}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.get_converted_file{width:108px;height:40px;position: relative;top:50%;margin-top: -20px;border-radius: 50px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.f-download{color:#fff;background-color:var(--main-color);line-height:40px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.f-download:hover{background-color:var(--main-hover-color);}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.re-download{border: 2px solid var(--main-color);background-color: #fff;color:var(--main-color);line-height:36px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display li .operate-item.re-download:hover{background-color:var(--main-color);color:#fff;}

.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display .add-file{width:100%;height:60px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display .add-file-btn{width:100px;height:60px;line-height:60px;cursor: pointer;display: none;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-file-display .add-file-btn:hover{color:var(--main-color);}

.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area{margin:60px 0 60px;width:100%;min-height:118px;position:relative;padding-bottom: 60px;text-align: center;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr{margin:0px auto 40px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr.proportion .convert-attr-name{width:40%;text-align:right;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-out-attr.proportion .convert-attr-items{width:60%;text-align:left;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area .out-radio label{margin: 0px 40px 0px 10px;}

.wapper .content .right-content .convert-upload .convert-upload-shape-2 .convert-operate-area .convert-follow-operate{position:absolute;left:0px;bottom:0px;width:100%}
/**
 * 获取文件的加载环样式
*/
.status .large-file-tip{position: absolute;
    top: 0px;
    left: -110px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    padding: 4px 10px 4px;
    height: 58px;
    line-height: 16px;
    border-radius: 8px;
    width:120px;
}
.status .large-file-tip .sanjiao{width:10px;height:10px;background-color: #fff;transform: rotate(45deg);position: absolute;bottom: 24px;left:115px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .gradient-loader{position:relative;display:inline-block;top:5px;}

/*压缩完成后的效果展示*/
.wapper .content .right-content .convert-upload .convert-upload-shape-2 .compress-result-show{width:64px;height:28px;line-height:28px;border-radius:50px;background-color:#f7aa47;position: relative;top: 50%;margin-top: -14px;font-size: 12px;overflow: hidden;display: inline-block;vertical-align: top;color:#fff;}


/*形态4：转换完成的独立页面*/
.wapper .content .right-content .convert-upload .convert-upload-shape-4 .success-icon-box{width:100%;height:68px;line-height:68px;text-align: center;font-size: 68px;margin-top:84px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-4 .success-tips{margin-top:20px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-4 .file-name{margin:24px auto 0px;width: 500px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-4 .btns{width:100%;height:56px;margin-top:32px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-4 .btns .btn-x{margin:0 25px 0px;}


/**
 *其他样式
*/
/*加密密码输入框*/
.please-input-password{font-size:16px;margin-bottom:20px;}
.password-box input{width:220px;height:40px;margin-bottom:20px;border:1px solid #DBDBDB;border-radius: 5px;text-indent:10px;outline: none;}

/**
 * 加载圆环
*/
.process .large-file-tip{position:absolute;top:-20px;left:-40px;background-color: #fff;box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);     font-size: 12px;padding: 0px 10px 0px;height: 30px;line-height: 30px;border-radius: 8px;}
.process .large-file-tip .sanjiao{width:10px;height:10px;background-color: #fff;transform: rotate(45deg);position: absolute;bottom: -5px;left:126px;}
.gradient-loader {width: 20px;height: 20px !important;border-radius: 50%;background-image: conic-gradient(rgba(255,103,104,0.1), rgba(157,157,157,1));position: relative;animation: turn-around 0.4s linear infinite;display: inline-block;}
.gradient-loader-inner{width:16px;height:16px !important;border-radius: 50%;background:#f7f7f7;position: absolute;top: 2px;left: 2px;}

@keyframes turn-around {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*排序教程提示框*/
.sort-tutorial-tip{width:200px;height:90px !important;position:absolute;box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.38);background:#fff;left: -7px;top: 50px;z-index: 10;border-radius:5px;color:#2d2d2d;font-size:13px;line-height:60px;}
.sort-tutorial-tip .sort-tutorial-tip-jiao{width:10px;height:10px !important;background:#fff;position:absolute;transform:rotate(45deg);top:-5px;left: 14px;}
.sort-tutorial-tip .ikown{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position:absolute;right:18px;bottom:-5px;text-decoration:underline;}

/*ocr说明样式*/
.ocr-exmaple{display:none;width:324px;height:166px;box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);position:absolute;top:-180px;left:203px;}
.ocr-exmaple .ocr-exmaple-content{width:100%;height:100%;background:#fff;position:relative;z-index:2;overflow: hidden;}
.ocr-exmaple .ocr-exmaple-content .ocr-exmaple-text-content{width:264px;margin:14px auto 0px;line-height:20px;}
.ocr-exmaple .ocr-exmaple-content .ocr-exmaple-image-content{width:269px;margin:16px auto 0px;height:79px;background:url('../assets/ocr-exmaple.png') no-repeat center center;}
.ocr-exmaple .ocr-exmaple-sanjiao{width:20px;height:20px;border:1px solid #eee;position:absolute;bottom:-6px;left:162px;transform:rotate(45deg);z-index:1;background:#fff}

@media screen and (min-width: 1px){
    .ocr-exmaple .ocr-exmaple-content .ocr-exmaple-image-content{background-image:url('../assets/ocr-exmaple@2x.png');background-size:269px 79px;}
}

/**
 * 形态3中的处理进度环
*/
.wapper .content .right-content .convert-upload .convert-upload-shape-3 .process-circle-box{position: relative;width:100%;height:100px;line-height:100px;margin-top:90px;}
.wapper .content .right-content .convert-upload .convert-upload-shape-3 .process-num{width:100%;height:100%;position:absolute;text-align:center;z-index:10;font-weight: bold;}
.wapper .content .right-content .convert-upload .convert-upload-shape-3 .gradient-loader{width:100px;height:100px !important;}
.wapper .content .right-content .convert-upload .convert-upload-shape-3 .gradient-loader .gradient-loader-inner{width:80px;height:80px !important;top: 10px;left: 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-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;}

/**
 * SlicePdf定制样式
*/
/*拆分选项样式*/
body.SlicePdf #SlicePdfBox{position: relative;z-index:5;height:1px;}
body.SlicePdf #SlicePdfBox .select-slice-type-title{width: 40%;text-align: right;position: absolute;left: 0px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios{width: 60%;text-align: left;position: absolute;right: 0px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios ul li{margin-bottom:20px;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios .slice-type-1-input{width:50px;height:26px;border-radius:5px;border: 1px solid #2d2d2d;text-align: center;}
body.SlicePdf #SlicePdfBox .select-slice-type-radios .slice-type-2-input{width:300px;height:32px;border-radius:5px;border: 1px solid #2d2d2d;text-indent:8px;}

/**
 * DeletePdfPage定制样式
*/
body.DeletePdfPage #DeletePdfPageBox{position: relative;width:100%;padding-bottom:100px;}
body.DeletePdfPage #DeletePdfPageBox .delete-pdf-page-container{width:840px;height: 100%;position: relative;left:50%;margin-left:-420px;}
body.DeletePdfPage #DeletePdfPageBox .use-title-tip{color:var(--main-color);margin:30px 0px 30px;text-align:left;}
body.DeletePdfPage #DeletePdfPageBox .delete-pdf-filename{color:var(--text1-color);margin:12px 0px 36px;text-align:left;}

/*页码样式区*/
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges{text-align:left;margin-bottom: 15px;position:relative;}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-ranges-mask{background:#f7f7f7;width:100%;height:100%;position: absolute;top:0px;left:0px;opacity:0.8;z-index:3;display:none;cursor: not-allowed !important;}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-range-item{text-align:center;display: inline-block;min-width: 80px;border: 1px solid #5873fe;border-radius: 5px;line-height:24px;color: #5873fe;cursor: pointer;margin:5px 2px 5px}
body.DeletePdfPage #DeletePdfPageBox .pdf-pages-ranges .pdf-pages-range-item.selected{background-color:#5873fe;color:#fff;}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-loadding{display:none;position:relative;top:200px;font-size:20px;width:100%;height:50px;line-height:50px;text-align:center;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list{width:100%;min-height:400px;max-height:1150px;overflow-y:overlay;position: relative;left:50%;margin-left: -420px;text-align: left;
    &::-webkit-scrollbar {
        width: 6px;
        height: 4px;
    }
     
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background-color: #99a9bf;
    }
     
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        background-color: #d3dce6;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        cursor: pointer;
    }
}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item{display:inline-block;width:200px;margin:0px 4px 8px;position: relative;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .select-bg{width:100%;padding:6px;display: inline-block;border-radius: 5px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item.selected .select-bg{background-color:#abb7f6;}

body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container{width:186px;position: relative;;border:1px solid #ccc;cursor: pointer;box-sizing:unset;-webkit-box-sizing: unset;background-color: #fff;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);overflow: hidden;border-radius: 5px;}
/*删除按钮(整块)*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action--delete{display:none;width:100%;height:100%;position:absolute;left:0px;top:0px;background-color: rgba(0, 0, 0, 0.7);;z-index:1;font-size:40px;color:#fff;}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container:hover .action--delete{display:flex;align-items: center;justify-content: center;}
/*删除按钮(右上角)*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action-button{width:60px;height:28px;line-height: 28px;position: absolute;top:0px;right:0px;background-color:#5873fe;color:#fff;z-index:3}
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item.selected .pdf-view-container .action-button{background-color:#e5404f}
/*放大按钮*/
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-view-container .action-zoom{width:60px;height:28px;line-height: 28px;position: absolute;top:0px;left:0px;background-color:#666771;color:#fff;z-index:3}


body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-page-view{width:186px;height:238px;position: relative;left:50%;top:50%;margin-left:-100px;margin-top:-141px;border:1px solid greenyellow; }
body.DeletePdfPage #DeletePdfPageBox .pdf-views-list .pdf-page-item .pdf-page-number{width:188px;height:28px;line-height:28px;}

/*操作区域*/
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area{display:none;width:902px;height:80px;background-color:#666771;color:#fff;z-index:5;color:#fff;box-shadow:#666771 0 -4px 10px -4px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-detele-page-reload-button{position:absolute;top:50%;left:40px;margin-top:-30px;letter-spacing:2px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-delete-text{height:80px;line-height:80px;display: inline-block;position: absolute;top:0px;right:220px;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-delete-text .pdf-selected-pages{font-weight:bold;}
body.DeletePdfPage #DeletePdfPageBox .pdf-do-area .pdf-detele-page-do-button{position:absolute;top:50%;right:40px;margin-top:-30px;letter-spacing:2px;}