/* image div */
.product-display-image-outter{
	padding: 12px;
	border-radius: 0.6rem;
}

.product-display-image-outter-selected {
	background-color: maroon !important;
}

.product-display-image{
	width:100%;
	padding-top: 100%;
	cursor: pointer;
}

.product-display-image-outter:hover {
	background-color: lightgray;
}

.product-display-image img{
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	height: 100%;
	border-radius: 0.6rem;
}


/* intro title bar */
/* .intro-title-bar{
	margin: 20px 0;
	height: 20px;
	width: 100%;
}
.intro-title{
	float: left;
	height: 20px;
	margin: 0;
}
.intro-title-line{
	background-color: #865519;
}
.intro-title-line-left{
	width: 15%;
}
.intro-title-line-right{
	width: 65%;
}
.intro-title-text{
	padding: 0 16px ;
	width: 20%;
}
.intro-title-text img{
	width: 100%;
	top: -20px;
} */

/* product display info */
.product-display-Info{
	background-color: rgb(220,220,220);
	margin: 20px 0;
}
.product-display-Info h2{
	display: inline-block;
	margin: 10px;
}
.product-display-Info-name{
	background-color: #c80013;
	color:#fff;
}
.product-display-Info-price{
	background-color: rgba(255,255,255,8);
}
.price-h2{
	float: right;
}


/* send list table */
.send-listTableDiv{
	padding: 10px;
}
.send-listTable{
	border-collapse: collapse;
	text-align: center;
	width:100%;
}
#before-start-mask{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width:100%;
	z-index: 2;
	background-color: rgba(255,255,255,0.5);

}
.send-name{
	width:10%;
}
.send-ad{
	width:35%;
}
.send-ph{
	width:20%;
}
.sned-qu{
	width: 10%;
}
.send-time{
	width:15%;
}
.send-new{
	width: 10%;
}
.send-listTable td{
	padding: 2px;
}
#nextBtn,#submitBtn{
	background-color: #c80013;
	color:#fff;
	cursor: pointer;
}
.lock-input{
	background-color: transparent!important;
	border: none;
	cursor: default;
	text-align: center;
}
.lock-input:focus{
	pointer-events: none;
	background-color: transparent;
}


/* submit form */
.price-sum{
	color: #c80013;
	font-size: 24px;
}
#billing-form span{
	margin: 4px 0;
	font-size: 20px;
}

/* before div */
.beforeDiv{
	position: fixed;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5); 
	border-radius: 5px;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255,255,255,0.95);
	text-align: center;
	z-index: 4;
	/* - */
	width:60%;
	height: 150px;
	padding: 20px;
}
.beforeDiv .btn-row{
	position:absolute;
	width:100%;
	left: 0;
	/* -- */
	bottom: 30px;
}
.beforeDiv .btn-row a,.beforeDiv .btn-row div{
	color:#fff;
	/* -- */
	width:40%;
}

/* alert field */
.alert-field{
	position: fixed;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 300px;
	min-height: 40px;
	background-color: rgba(255,255,255,0.9);
	color: red;
	border-radius: 5px;
	line-height: 40px;
	text-align: center;
	font-size: 24px;
}

/* 1366 ~ 992 */
@media (max-width: 1366px) {}


/* under 992 */
@media (max-width: 992px) {
	.intro-title-line-left{
		width: 10%;
	}
	.intro-title-line-right{
		width: 60%;
	}
	.intro-title-text{
		padding: 0 16px ;
		width: 30%;
	}
	.beforeDiv{
		/* - */
		width:100%;
		height: 200px;
		padding:16px 8px;
	}
	.beforeDiv .btn-row{
		/* -- */
		bottom: 16px;
	}
	.beforeDiv .btn-row a,.beforeDiv .btn-row div{
		/* -- */
		width:45%;
	}
}


/* under 450 mobile device */
@media(max-width: 450px){
	.product-display-image-outter{
		padding: 2px;
	}
	.intro-title-line-left{
		width: 10%;
	}
	.intro-title-line-right{
		width: 45%;
	}
	.intro-title-text{
		padding: 0 16px ;
		width: 45%;
	}
	.product-displayDiv h3{
		font-size: 18px;
	}
	.ghost{
		display: none;
	}
	.product-display-Info-name h2{
		font-size: 20px;
	}
	.product-display-Info-price h2{
		font-size: 18px;
	}
	.container{
		padding: 0 2px;
	}
	.send-listTableDiv{
		padding: 2px;
	}
	.send-listTable td{
		padding:0;
		font-size: 12px;
	}
	.send-listTable .form-control{
		padding:.5rem 1px;
		font-size: 12px;
	}
	#billing-form span{
		margin: 4px 0;
		font-size: 16px;
	}
	
}