/**
  * #modalReceipt
  */
#modalReceipt {
	position: relative;
	width: 400px;
	max-width: 400px;
	background-color: #F4F4F2;
}

#modalReceipt .title {
	padding-top: 20px;
	padding-left: 20px;
}

#modalReceipt .btns {
	position: absolute;
	top: 20px;
	right: 20px;
}

#modalReceipt .wrap-receipt {
	position: relative;
	background-color: #fff;
	margin: 20px;
	padding: 40px;
}

/**
 * .area-bg
 */
#modalReceipt .wrap-receipt .area-bg {
	position: absolute;
	top: 400px;
	left: 90px;
}

#modalReceipt .wrap-receipt .area-bg .logo {
	position: relative;
	font-size: 26px;
	font-weight: bold;
	font-family: 'Verdana' !important;
	color: rgba(0, 0, 0, .1);
}

#modalReceipt .wrap-receipt .area-bg .logo .fa-trademark {
	position: absolute;
	font-size: 12px;
	top: 0px;
	right: -20px;
}

/**
 * .area-title
 */
#modalReceipt .wrap-receipt .area-title {
	padding-bottom: 20px;
	text-align: center;
}

#modalReceipt .wrap-receipt .area-title .logo {
	position: relative;
	font-size: 26px;
	font-weight: bold;
	font-family: 'Verdana' !important;
}

#modalReceipt .wrap-receipt .area-title .logo .fa-trademark {
	position: absolute;
	font-size: 12px;
	margin-left: 5px;
}

#modalReceipt .wrap-receipt .area-title .type {
	font-size: 20px;
	font-weight: bold;
	padding-top: 5px;
}

/**
 * .area-tenant
 */
#modalReceipt .wrap-receipt .area-tenant {
	position: relative;
	font-size: 11px;
	line-height: 140%;
}

#modalReceipt .wrap-receipt .area-tenant .left {
}

#modalReceipt .wrap-receipt .area-tenant .right {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

/**
 * .area-goods
 */
#modalReceipt .wrap-receipt .area-goods {
	font-size: 13px;
}

#modalReceipt .wrap-receipt .area-goods .line1 li {
	padding-right: 10px;
}

#modalReceipt .wrap-receipt .area-goods .line2 {
	text-align: right;
}

#modalReceipt .wrap-receipt .area-goods .line2 li {
	width: 50px;
	text-align: center;
}

/**
 * .area-subtotal
 */
#modalReceipt .wrap-receipt .area-subtotal {
	position: relative;
	font-size: 13px;	
}

#modalReceipt .wrap-receipt .area-subtotal .left div {
	display: inline-block;
}

#modalReceipt .wrap-receipt .area-subtotal div.name {
	width: 130px;
}

#modalReceipt .wrap-receipt .area-subtotal div.op {
	width: 20px;
}

#modalReceipt .wrap-receipt .area-subtotal div.arrow {
	width: 20px;
	text-align: right;
}

#modalReceipt .wrap-receipt .area-subtotal .right {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

/**
 * .area-total
 */
#modalReceipt .wrap-receipt .area-total {
	position: relative;
	line-height: 140%;	
}

#modalReceipt .wrap-receipt .area-total .name-total,
#modalReceipt .wrap-receipt .area-total .price-total {
	font-size: 20px;
	font-weight: bold;
}

#modalReceipt .wrap-receipt .area-total .name-vat,
#modalReceipt .wrap-receipt .area-total .price-vat {
	font-size: 13px;
}

#modalReceipt .wrap-receipt .area-total .left {
}

#modalReceipt .wrap-receipt .area-total .right {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

/**
 * .area-pay-info
 */
#modalReceipt .wrap-receipt .area-pay-info {
	position: relative;
	font-size: 13px;
	line-height: 140%;
}

#modalReceipt .wrap-receipt .area-pay-info .left {
}


#modalReceipt .wrap-receipt .area-pay-info .right {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

/**
 * .area-partner
 */
#modalReceipt .wrap-receipt .area-partner {
	position: relative;
	font-size: 13px;
	line-height: 140%;
}

#modalReceipt .wrap-receipt .area-partner .left {
}


#modalReceipt .wrap-receipt .area-partner .right {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

/**
 * .area-comment
 */
#modalReceipt .wrap-receipt .area-comment {
	font-size: 15px;
	letter-spacing: -1px;
	padding: 20px;
	line-height: 150%;
}

/**
 * .area-barcode
 */
#modalReceipt .wrap-receipt .area-barcode {
	position: relative;
	text-align: center;
	font-size: 13px;
	padding-top: 20px;
}

#modalReceipt .wrap-receipt .area-barcode img {
	width: 100%;
}

#modalReceipt .wrap-receipt .area-barcode .site-url {
	position: absolute;
	width: 100%;
	color: #666670;
}

#modalReceipt .wrap-receipt .area-barcode .code-num {
	position: absolute;
	width: 100%;
	margin-top: -30px;
}

/**
 * dotted-line
 */
#modalReceipt .wrap-receipt .dotted-line {
	height: 2px;
	border-bottom: 2px dashed #808080;
	margin-top: 10px;
	margin-bottom: 10px;
	z-index: 2;
}

#modalReceipt .wrap-receipt .dotted-line-x2 {
	height: 1px;
	border-top: 2px dashed #808080;
	border-bottom: 2px dashed #808080;
	margin-top: 10px;
	margin-bottom: 10px;
	z-index: 2;
}

#modalReceipt .DM-close {
	position: absolute;
	top: 5px;
	right: -50px;
	color: #fff;
	font-size: 44px;
	cursor: pointer;
}

/**
 * 취소 시 취소선 표시
 */
#modalReceipt [data-pay-status=cancelled] li.total-price,
#modalReceipt [data-pay-status=cancelled] div.price span,
#modalReceipt [data-pay-status=cancelled] div.price-total span,
#modalReceipt [data-pay-status=cancelled] div.price-vat span {
	text-decoration: line-through;
}

#modalReceipt li.total-price.commission,
#modalReceipt div.price span.commission,
#modalReceipt div.price-total span.commission,
#modalReceipt div.price-vat span.commission {
	display: none;
}

#modalReceipt [data-pay-status=cancelled] li.total-price.commission,
#modalReceipt [data-pay-status=cancelled] div.price span.commission,
#modalReceipt [data-pay-status=cancelled] div.price-total span.commission,
#modalReceipt [data-pay-status=cancelled] div.price-vat span.commission {
	text-decoration: none;
	display: inline-block;
}

/**
 * (responsive)
 */
 @media (max-width: 991px) { /* (mobile & tablet) */
	#modalReceipt .btn-print-receipt {
		display: none;
	}

	#modalReceipt .DM-close {
		position: absolute;
		top: 5px;
		right: 10px;
		color: #000;
		font-size: 44px;
		cursor: pointer;
	} 	
 }

@media (max-width: 767px) { /* (mobile) */
	#modalReceipt {
		width: 100%;
	}

	#modalReceipt .wrap-receipt {
		margin: 10px;
		padding: 20px;
	}

}

@media (max-width: 320px) {
	#modalReceipt .wrap-receipt .area-title .logo .fa-trademark {
		display: none;
	}

	#modalReceipt .wrap-receipt .area-bg {
		display: none;
	}
}

@media print {
	body * {
		visibility: hidden;
	}

	#modalReceipt .wrap-receipt * {
		visibility: visible;
	}

	#modalReceipt, #modalReceipt .wrap-receipt {
		position: absolute;
		left: 0;
		top: 0;
	}
}