.kk-upload-mage { width: 100%; font-size: 12px; }
.kk-upload-mage .button-list { border-bottom: 1px solid #ddd; display: flow-root; margin-bottom: 10px; }
.kk-upload-mage .p-r { float: right; }

.kk-upload-mage .upload-list .upload-item { background: #fff; border: 1px dashed #dddee1; border-radius: 4px; text-align: center; cursor: pointer; position: relative; transition: border-color .2s ease; }

.kk-upload-mage .button { background-color: #4CAF50; border: none; border-radius: 4px; color: white; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }
.kk-upload-mage .button:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }
.kk-upload-mage .upload-list { position: relative; }
.kk-upload-mage .upload-list .upload-item { background: #fff; border: 1px dashed #dddee1; border-radius: 4px; text-align: center; cursor: pointer; position: relative; transition: border-color .2s ease; }
.kk-upload-mage .upload-list .upload-item { float: left; margin-right: 10px; margin-bottom: 10px; overflow: hidden; display: list-item; }
.kk-upload-mage .upload-list .upload-item img { max-width: 100%; max-height: 100%; }
.kk-upload-mage .upload-list .upload-item .upload-icon { width: 30%; margin-top: 35%; }

.kk-upload-mage .upload-list .upload-item .upload-list-text { position: absolute; right: 0; top: 0; background: rgba(0,0,0,.75); padding: 1px 2px; color: #fff; line-height: 20px; }
.kk-upload-mage .upload-list .upload-item .upload-list-cover { width: 100%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.5); }
.kk-upload-mage .upload-list .upload-item .upload-list-cover .do-icon { width: 15%; text-align: center; margin: 3%; }

.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.75); }
.kk-upload-mage .upload-list .upload-item.up-preview.ready .upload-uploading { background: rgba(0,0,0,0); }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .do-icon { margin-top: 25%; }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .box{ height: 64px; width: 64px; margin: 5px auto; position: relative; }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .box::before{ content: ''; height: 8px; width: 64px; background: #000; opacity: .2; border-radius: 50%; position: absolute; top: 77px; left: 0; animation: shadow .5s linear infinite; }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .box::after{ border-radius: 5px; background-image: url('../images/action/uploading.png'); animation: rotate .5s linear infinite; content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 64px; }

.kk-upload-mage .upload-list .upload-item.up-preview.ready .upload-list-cover { display: block; }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .kk-progress-bar { background-color: rgba(0, 161, 254, 0.28); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent); background-size: 40px 40px; box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); display: block; float: left; font-size: 12px; height: 20px; line-height: 20px; text-align: center; transition-delay: 0s; transition-duration: 1.6s; transition-property: width; transition-timing-function: ease; }
.kk-upload-mage .upload-list .upload-item.up-preview .upload-uploading .kk-progress-bar { height: 100%; position: absolute; top: 0; }
.kk-upload-mage .upload-list .upload-item.up-preview.error .upload-uploading .kk-progress-bar { background-color: rgba(254, 0, 0, 0.28); }
.kk-upload-mage .upload-list .upload-item.up-preview.error .upload-list-cover { display: block; }

.kk-upload-mage .upload-ico { position: relative; }
.kk-upload-mage .upload-ico .upload-table { width: 100%; border-collapse:separate; border-collapse:collapse; }
.kk-upload-mage .upload-ico .upload-item { position: relative; }
.kk-upload-mage .upload-ico .upload-item td { padding: 7px 5px; border-bottom: 1px dashed #ddd; overflow: hidden; }
.kk-upload-mage .upload-ico .upload-item img { width: 32px; height: 32px; }
.kk-upload-mage .upload-ico .upload-item span { line-height: 32px; }
.kk-upload-mage .upload-ico .upload-item .delete-icon { background: #3988ff; width: 20px; height: 20px; float: right; padding: 2px; border-radius: 2px; cursor: pointer; }


@keyframes shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.2); } }
@keyframes rotate { 0% { transform: translateY(0) ; } 25% { transform: translateY(10px); } 50% { transform: translateY(20px) scale(1.1, 0.9); } 75% { ransform: translateY(10px) ; } 100% { transform: translateY(0) ; } }