/*=============================================================================+
| dupload
+-----------------------------------------------------------------------------*/
.duploadWrap button { outline:none; padding:0; margin:0; }

.duploadWrap { display:flex; flex-wrap: wrap; /* justify-content: space-between; */ }
.duploadWrap.duploadWrap25 .duploadBox { width:25.0000%; }
.duploadWrap.duploadWrap33 .duploadBox { width:33.3333%; }
.duploadWrap.duploadWrap50 .duploadBox { width:50.0000%; }

.duploadWrap .duploadBox {
	width:200px; height:150px; padding:2px; /* border:1px solid silver; */ border-radius:5px; overflow:hidden;
	position:relative; background-color:transparent;
	display:flex; flex-direction: column; align-items:center; justify-content: center; box-sizing: border-box;
}
.duploadWrap .duploadBox.onMove { border:2px dashed rgba(0,0,0,0.2); }

.duploadWrap .duploadBox .duploadBtn { height:30px; /* line-height:30px */; position:absolute; z-index:10; right:5px; bottom:0; /* display:none; */ opacity:0.2; }
.duploadWrap .duploadBox .duploadBtn button { width:20px; height:20px; /* line-height:20px; */ text-align:center; border:0; font-size:12px; margin:1px; background-color:white; border-radius:100%; font-weight:bold; }
.duploadWrap .duploadBox .duploadBtn button.btnSave { color:#FFF; background-color:#66F; }
.duploadWrap .duploadBox .duploadBtn button.btnDel { color:#FFF; background-color:#F66; }
.duploadWrap .duploadBox .duploadBtn button.btnMoveStart { color:#FFF; background-color:#0B0; }
.duploadWrap:hover .duploadBox .duploadBtn { display:block; opacity:1; }

.duploadWrap .duploadBox .duploadBody {
	width:100%; height:100%; border:1px solid silver; border-bottom:0; border-radius:5px 5px 0 0; overflow:hidden;
	position:relative;
	display:flex; align-items: center; justify-content: center;
	background-position:center; background-repeat: no-repeat;
}
.duploadWrap .duploadBox .duploadBody .duploadInfo { width:100%; height:100%; color:white; text-align:center; font-size:10px; font-weight:bold; letter-spacing:-0.5px; background-position: center; background-size: cover; background-repeat:no-repeat; text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000; }

.duploadWrap .duploadBox .duploadBody button {
	width: 100%; height: 100%; padding:5px; line-height:20px; border:0; display:none;
	position:absolute; word-break: keep-all;
	font-size: 20px; font-weight:bold; background: #EEE; color: #999;
}
.duploadWrap .duploadBox .duploadBody button.btnUpload { border-radius: 0; }
.duploadWrap .duploadBox .duploadBody button.btnMoveEnd { border-radius:0; background:rgba(255,255,255,0.2); }

.duploadWrap .duploadBox .duploadBottom { width:100%; height:30px; flex-shrink:0; background-color:#FFF; /* line-height:30px */; border:1px solid silver; border-top:0; border-radius:0 0 5px 5px; overflow:hidden; display:flex; flex-direction: row; align-items: center; justify-content: center; }
.duploadWrap .duploadBox .duploadBottom .duploadTitle { width:100%; height:100%; text-align:center; }

.duploadWrap .duploadBox input[type="text"] { /* width:0; height:0; */ position:absolute; opacity:0; }
.duploadWrap .duploadBox input[type="file"] { width:100%; height:100%; position:absolute; z-index:5; opacity:0; }
.duploadWrap .duploadBox form { width:0px; height:0px; opacity:0; }

/*=============================================================================+
| dupload File
+-----------------------------------------------------------------------------*/
.duploadWrap .duploadBox.duploadBoxFile { width:100%; height:30px; line-height:30px; border:1 solid #BBB; box-sizing:border-box; justify-content: flex-end; flex-direction: row-reverse; }
.duploadWrap .duploadBox.duploadBoxFile .duploadBtn { height:26px; line-height:26px; }

.duploadWrap .duploadBox.duploadBoxFile .duploadBody { height:26px; flex:2; line-height:26px; border:1px solid silver; border-left:0; border-radius:0 5px 5px 0; }
.duploadWrap .duploadBox.duploadBoxFile .duploadBody button { font-size:14px; line-height:14px; padding:0; }
.duploadWrap .duploadBox.duploadBoxFile .duploadBottom { height:26px; flex:1; line-height:26px; border:1px solid silver; border-right:0; border-radius:5px 0 0 5px; }
.duploadWrap .duploadBox.duploadBoxFile .duploadInfo { width:100%; line-height:30px; padding-left:25px; text-indent: 0; text-align:left; background-position:left; background-size: 20px 20px; }

/*=============================================================================+
| dupload skin
+-----------------------------------------------------------------------------*/
.duploadWrap.duploadWrap-sm .duploadBox { width:100px; height:100px; }
.duploadWrap.duploadWrap-sm .duploadBox .duploadBody button { font-size:12px; line-height:12px; }

/*=============================================================================+
| MEDIA
+-----------------------------------------------------------------------------*/
@media only screen and (max-width: 750px){
	.duploadWrap .duploadBox { width:100px; height:100px; }
	.duploadWrap .duploadBox .duploadBody button { font-size:12px; line-height:12px; }
}