/*!
 * dropFile
 * Copyright 2019 hwkim
 */
.df * {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.df .dropBox {
	/*display:flex; 자동줄바꿈 때문에 float으로 했습니다!*/
	width:100%;
	height:162px;
	border:1px dotted #ccc;
	border-radius:8px;
	padding:20px;
	margin:4px 0 0;
	background:#fffaf5;
	overflow:auto;	
}

.df .dropBox:after {
	clear:both;
	content:'';
	display:block;
	overflow:hidden;
}

.df .fileItem {
	position:relative;
	float:left;
	display:block;
	justify-content:start; 
	align-items:center;
	width:20%;
	height:130px;
	background:url(../img/dropFile/ico_file.png) no-repeat top center;
	background-size:50px;
	border-radius:8px;
	max-width: 130px;
	/*padding:0 10px;
	margin:10px 0; */
}

#dropFileImage .fileItem {
	background:none;
	background-size:50px;
	border-radius:8px; 
	padding-top:5px;
}

.df .fileItem .mainThum{
	position: absolute;
	bottom: 10px;
}

.df .fileItem .filename {
    position:absolute;
    left:50%;
    transform:translate(-50%);
    top:65px;    
    width:120px;
    font-size:12px;
    color:#81786f;
    text-align:center;
    line-height:16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.df .fileItem .fileIcon{
	position:absolute;
	left:50%;
	transform:translate(-50%);
	top:20px;
    font-size:10px;
    color:#fff;
}
.df .fileItem .filesize {
	position:absolute;
    left:50%;
    transform:translate(-50%);
    bottom:0;
    width:120px;
    font-size:12px;
    color:#81786f;
    text-align:center;
    line-height:16px;
}

.df .fileItem .checkboxDelete {
	position: absolute;
    top: -4px;
    left: 0;
    cursor: pointer;
    justify-self: start;
    align-self: start;
    width: 110px;
}

.df .fileItem .checkboxDelete:after{
	content:'삭제';
}

.df .inputFile {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0
}
.df .inputFileLabel {
	display:inline-block;
	margin:0;
	width:120px;
	height:32px;
	line-height:32px; 
	letter-spacing:5px;
	text-align:center;
	border:1px solid #81786f;
	border-radius:5px;
	vertical-align:top;
	cursor:pointer;
}
.df .inputFileLabel .text {
	display:block;
	font-size:14px;
	color:#81786f;
	font-weight:400;
	letter-spacing:1px;
	cursor:pointer;
}

.df .btn.ico_upload{
	float:left;
}

.df .filesize{
	position:absolute;
	left:50%;
	transform:translate(-50%);
	bottom:-35px;
	font-size:12px;
	color:#81786f;
}

.df .btnCancle{
	position:absolute;
	left:70%;
	transform:translate(-50%);
	top:0;
	display:block;
    width:15px;
    height:15px;
	background:url(../img/dropFile/btn_remove.png)no-repeat center center;
	background-size:100%;	
	font-size:0;
    line-height:0;
    cursor:pointer;
}
.df .btnDelete{
	position:absolute;
	left:70%;
	transform:translate(-50%);
	top:0;
	display:block;
    width:15px;
    height:15px;
	background:url(../img/dropFile/btn_delete.png)no-repeat center center;
	background-color:#999;
	background-size:100%;
	border-radius:50%;
	font-size:0;
    line-height:0;
    cursor:pointer;
}
.df .checkboxDelete {
	position:absolute;
	top:0;
	left:70%;
/* 	border:1px solid #ccc;
	background:#eee;
	border-radius:8px;
	padding:8px 16px; */
	cursor:pointer;
	justify-self:start; align-self: start;
}

.df .thumb {
	width:80px;
	height:80px;
	border:1px dotted #ccc;
	border-radius:4px;
	margin:10px auto;
	background:#fffaf5;
	overflow:auto;
}

.df .photoBox {
	width:150px;
	height:192px;
	border:1px dotted #ccc;
	border-radius:8px;
	padding:8px;
	margin:10px auto;
	background:#fffaf5;
	overflow:auto;
}
.df .photoBox:after {
	clear:both;
	content:'';
	display:block;
	overflow:hidden;
}

.df .inputPhotoLabel {
	display:inline-block;
	margin:0;
	width:100px;
	height:30px;
	line-height:24px; 
	letter-spacing:5px;
	text-align:center;
	border:1px solid #81786f;
	border-radius:5px;
	vertical-align:top;
	cursor:pointer;
}
.df .inputPhotoLabel .text {
	display:block;
	font-size:11px;
	color:#81786f;
	font-weight:400;
	letter-spacing:1px;
}

.df .photoItem {
	position:relative;
	float:left;
	display:block;
	justify-content:start; 
	align-items:center;
	width:100%;
	height:100%;
	overflow:hidden;
}
.df .photoItem .photo {
	width:100%;
	height:auto;
	border-radius:8px;
}
.df .photoItem .btnCancle {
    left: inherit;
    right: 0;
    width: 24px;
    height: 24px;
    transform: inherit;
}