#main {
	display : grid;
	grid-template-columns : 40% 1fr;
	grid-gap : 40px;
}
#main #mainImg {
	max-width : 550px;
	margin-bottom : 30px;
	padding : 0;
}
#main #mainImg img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#main #subImg {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	grid-gap : 12px;
}
#main #subImg > li {
	border : 2px solid #dddddd;
}

#main #subImg > li {
	border : 2px solid #dddddd;
}
#main #subImg > li img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}

#description {
	margin-bottom : 32px;
}

#orderList li {
	display : grid;
	grid-template-columns : auto 14em 14em;
	grid-gap : 16px;
	padding : 16px;
	border-bottom : 1px dotted #000000;
	background-color : #f7f7f7;
}
#orderList li:first-child {
	border-top : 1px dotted #000000;
}
#orderList li > div {
	display : flex;
	flex-direction : column;
	justify-content : center;
}
#orderList li .itemName {
	font-weight : bold;
	margin-bottom : 0.25em !important;
}
#orderList li .description {
	font-size : 0.75em;
	margin-bottom : 0.25em;
	color : #777777;
}
#orderList li .deliveryInfo {
	font-size : 0.75em;
	color : #777777;
}
#orderList li .price {
	margin-bottom : 0.25em !important;
}
#orderList li .deriveryFee {
	font-size : 0.75em;
	color : #777777;
}
#orderList li .button a {
	display : block;
	font-size : 1.125em;
	line-height : 1.45;
	padding : 1em 0.5em;
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	border : none;
	border-radius : 5px;
	background-color : #468daf;
}
#orderList li .button input {
	display : inline;
	font-size : 1.125em;
	line-height : 1.45;
	padding : 0.5em;
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	border : none;
	border-radius : 5px;
	background-color : #468daf;
}



@media screen and (max-width: 767px) {
	#main {
		grid-template-columns : 1fr;
		grid-gap : 20px;

	}
	#main #mainImg {
		max-width : 100%;
		margin-bottom : 20px;
	}
	#orderList li {
		grid-template-columns : 1fr;
		grid-gap : 8px;
	}
}