@charset "UTF-8";
/*BASE--------------------*/


p.text{
	margin:0 auto 10px;
	font-size:12px;
	line-height:18px;
	text-align: left;
}


main{
	padding:20px;
}

#bgImg4info{
	position: fixed;
	top: 0;left: 0;z-index: 12;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,.6);
}

#clPrv{
	padding: 0px;
	width: 10px;
	height: 10px;
	overflow: auto;
	overflow: hidden;
	transition: all .8s ease-out;
	background:rgba(255,255,255,0);
	opacity: 0;
}

#clPrv.on{
	opacity: 1;
}

#clPrv.ready{
	/* padding: 8px; */
	/* width: 160px; */
	/* height: 160px; */
	padding: 20px;
	width: 400px;
	height: 480px;
	background:rgba(255,255,255,1);
}

#clPrv.display{
}

#clPrv #dsForm{
	transition: all 0.3s ease-out;
}

#dsForm header{
	padding:6px 20px;
	height: 32px;
	line-height: 32px;
	background: #333;
	color: #fff;
}

#clPrv #close{
	top: -4px;right: -4px;
	display: block;
	color: #fff;
	background: rgba(000,000,000,0);
}

#clPrv.display #close{
	background: rgba(000,000,000,0.4);
	
}

#dsForm div#formTop p{
	font-size:12px;
	color:#666;
	text-align:center;
	height:30px;
	line-height:30px;
	background:#d9d9d9;
}

#dsForm div#formTop{
	margin:0 auto;
	padding:10px 0;
	font-size:12px;
	color:#666;
	background:#fff;
	border:#a6a6a6 solid;
	border-width: 1px 0;
}

#dsForm div.input{
	float:left;
	margin:0 auto;
	padding:4px 0;
	width:200px;
	font-size:12px;
	color:#666;
	height:30px;
	line-height:30px;
	text-align:left;
	background:#fff;
	border:#a6a6a6 solid;
	border-width:0 0 1px;
}

div#info{
	clear:both;
	margin:0 0 16px;
	padding:4px 0;
}

#totalPrice{
	font-size:14px;
	font-weight:bold;
}

#dsForm #close{
display: table !important;
text-align: center;
}

#dsForm #close i{
	display: table-cell;
	vertical-align: middle;
}

#dsForm #order{
	display:none;
}
div#formHeader{
	margin:0 auto 8px;
	padding:0;
	height:30px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border-bottom: #e5e5e5 solid 1px;
}


div#infoBox{
	margin:0 0 10px;
	/* height:100px; */
}


#infoBox img{
	display:block;
	/* float:left; */
	margin:0 0 8px 0;
	width:auto;
	height:100px;
}

#infoBox p{

/* width:310px; */
	line-height:20px;
	text-align:left;
	font-size:11px;
}

.clearFix:after,
#infoBox:after
{
	content:" ";
	width:100%;
	clear:both;
	height:0px;
	display:block;
}

#closeWindow{
	display: flex !important;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	position: fixed;
	top: 4px;
	right: 4px;	
	width: 44px;
	height: 44px;
	background: rgba(229,229,229,0);
	border-radius: 50%;
	border: #4f4d4d solid 4px;
	transition: all .8s ease-out;
	cursor: pointer;
}


#closeWindow i{
	font-size: 24px;
}

.display #closeWindow{
	
	background: rgba(229,229,229,1);
}

@media only screen and (max-width: 680px){


	#clPrv{
		top: 0px;
	}


}

@media only screen and (max-width: 480px){
		
	#clPrv.ready{
		margin-left: -50% !important;
	}

}