.order { padding: 20px 20px 0px 20px; font-size: 1.6em; line-height: 1.1; font-family: tahoma; }

.orderLeft { margin-bottom: 20px; }
.orderRight { }

.od1 { }
.od2 { text-align: center; line-height: 1.2; }
.od3 { padding-top: 20px; text-align: center; z-index: 5; }
.od4 { margin-top: 5px; margin-bottom: 30px; text-align: center;  }

.lineQR { margin: 40px; }
.lineQR img { border: 1px solid #CCC; width: 80%; }
.msgNow { margin: 40px; z-index: 10; }

.orderBG { width: 100%; height: 200px;
background: url("/service/graphic/2/orderBG.jpg") no-repeat bottom center; 
 background-size: 246px;
}

/* .basicModal {
background: url("/service/graphic/2/orderBG.jpg") no-repeat bottom center; 
 background-size: 246px;
} */

/* ความกว้าง ไม่ต่ำกว่า */ /* มือถือรุ่นใหม่ จอยาวๆ */
@media screen and (min-width: 360px) and (min-height: 800px)
{ 
	.order { padding: 25px 25px 0px 25px; }
}

/* ความกว้าง ไม่ต่ำกว่า */ /* Tablet แนวตั้ง */
@media screen and (min-width: 700px)
{
	.order { padding: 20px 40px 0px 40px; }
	.lineQR img { width: 50%; }
	.od3 { }
	.od4 { }
}

/* ความกว้าง ไม่ต่ำกว่า */ /* Tablet แนวนอน  */
@media screen and (min-width: 1000px)
{
	.order { padding: 20px 40px 0px 20px; }
	.orderLeft { width:42%; overflow: hidden; float: left; padding-bottom: 5px; }
	.orderRight { width: 58%; overflow: hidden; float: right; padding: 0px 20px 0px 80px; }
	.od1 { margin: 20px 40px 40px 0px; overflow: hidden; float: left; width: 100%;  }
	.lineQR { margin: -10px 30px 60px 0px; overflow: hidden; float: left; }
	.lineQR img { width: 180px; overflow: hidden; float: left; }
	.od2 { text-align: left; margin: 0px 0px 50px 100px; overflow: hidden; float: left; width: 50%; }
	.msgNow { margin: -150px 30px 60px -60px;  overflow: hidden; float: left; width: 200px; height: 200px;  }
	.msgNow img { width: 100px; margin: 20px; }
	.od3 { text-align: left; position: absolute; bottom: 70px; }
	.od4 { text-align: left; position: absolute; bottom: 0px; }
	.orderBG { width: 300px; height: 250px; position: absolute; 
		bottom: 0; left: 0px; background-size: 70%; z-index: 1;  }
}

/* ความกว้าง ไม่ต่ำกว่า */ /* Notebook */
@media screen and (min-width: 1100px)
{
	.order { padding: 20px 40px 0px 20px; }
	.orderLeft { width: 38%; overflow: hidden; float: left; padding-bottom: 5px; }
	.orderRight { width: 62%; overflow: hidden; float: right; padding: 0px 20px 0px 60px; }
	.od1 { margin: 20px 40px 40px 210px; overflow: hidden; float: left;  }
	.lineQR { margin: -120px 30px 60px 0px; overflow: hidden; float: left; }
	.lineQR img { width: 180px; overflow: hidden; float: left; }
	.od2 { text-align: left; margin: 40px 0px 50px 210px; overflow: hidden; float: left; width: 80%; }
	.msgNow { margin: -150px 30px 60px 0px;  overflow: hidden; float: left; width: 180px; height: 180px;  }
	.msgNow img { width: 130px; margin: 20px; }
	.od3 { text-align: left; position: absolute; bottom: 70px; }
	.od4 { text-align: left; position: absolute; bottom: 0px; }
	.orderBG { width: 250px; height: 200px; position: absolute; 
		bottom: 0; right: 0px; left:auto; background-size: 70%; z-index: 1;  }
}


/* ความกว้าง ไม่ต่ำกว่า */ /* แก้ Tablet บางรุ่น */
@media screen and (min-width: 1200px) and (min-height: 800px)
{
	.order { padding: 40px 60px 20px 40px; }
	.orderLeft { width:46%; overflow: hidden; float: left; padding-bottom: 60px; }
	.orderRight { width: 54%; overflow: hidden; float: right; padding: 0px 20px 0px 80px; }
	.od1 { margin: 0px 40px 40px 0px; overflow: hidden; float: left; width: 100%;  }
	.lineQR { margin: -10px 30px 60px 0px; overflow: hidden; float: left; }
	.lineQR img { width: 150px; overflow: hidden; float: left; }
	.od2 { text-align: left; margin: 0px 0px 50px 150px; overflow: hidden; float: left; width: 50%; }
	.msgNow { margin: -150px 30px 60px -40px;  overflow: hidden; float: left; width: 200px; height: 200px;  }
	.msgNow img { width: 100px; margin: 20px; }
	.od3 { text-align: left; position: absolute; bottom: 70px; }
	.od4 { text-align: left; position: absolute; bottom: 0px; }
	.orderBG { width: 300px; height: 250px; position: absolute; 
		bottom: 0; right: -58px; left: auto; background-size: 50%; z-index: 1;  }
}


/* ความกว้าง ไม่ต่ำกว่า */ /* Full HD */
@media screen and (min-width: 1900px)
{
	.order { padding: 40px 40px 0px 40px; }
	.orderLeft { width: 45%; padding-bottom: 20px; }
	.orderRight { width: 55%; padding: 0px 40px 0px 90px; }
	.od1 { float: none; width: 100%; margin: 0; }
	.lineQR { float: none; width: 100%; margin: 40px 0 60px 0; }
	.lineQR img { width: 200px; float: none; }
	.od2 { float: none; width: 100%; margin: 0; text-align: center; }
	.msgNow { float: none; width: 100%; margin: 10px 0 30px 0; }
	.msgNow img { width: 140px; }
	.od3 { bottom: 80px; width: 25%;  }
	.od4 { bottom: 10px; width: 25%;  }
	.orderBG { background-size: 75%; right: 0px;  }
}

/* ความกว้าง ไม่ต่ำกว่า */ /* แก้บางรุ่น */
@media screen and (min-width: 2000px)
{
	.basicModal { width: 80% !important; left: 10% !important; }
	.order { padding: 40px 60px 20px 40px; font-size: 2.5em; }
	.orderLeft { width:50%; overflow: hidden; float: left; padding-bottom: 80px; }
	.orderRight { width: 50%; overflow: hidden; float: right; padding: 0px 20px 0px 120px; }
	.od1 { margin: 20px 40px 40px 0px; overflow: hidden; float: left; width: 100%;  }
	.lineQR { margin: -10px 30px 60px 0px; overflow: hidden; float: left; }
	.lineQR img { width: 400px; overflow: hidden; float: left; }
	.od2 { text-align: left; margin: 100px 0px 50px 280px; overflow: hidden; float: left; width: 50%; }
	.msgNow { margin: -280px 30px 60px -40px;  overflow: hidden; float: left; width: 300px; height: 300px;  }
	.msgNow img { width: 250px; margin: 20px; }
	.od3 { text-align: left; position: absolute; bottom: 120px; }
	.od4 { text-align: left; position: absolute; bottom: 30px; }
	.orderBG { width: 300px; height: 250px; position: absolute; 
		bottom: 0; right: 20px; left: auto; background-size: 90%; z-index: 1;  }
}

/* ความกว้าง ไม่ต่ำกว่า */ /* แก้บางรุ่น */
@media screen and (min-width: 2500px)
{
	.basicModal { width: 70% !important; left: 15% !important; }
	.order { padding: 40px 60px 20px 40px; font-size: 2.5em; }
	.orderLeft { width:40%; overflow: hidden; float: left; padding-bottom: 60px; }
	.orderRight { width: 60%; overflow: hidden; float: right; padding: 0px 20px 0px 120px; }
	.od1 { margin: 20px 40px 40px 0px; overflow: hidden; float: left; width: 100%;  }
	.lineQR { margin: -10px 30px 60px 0px; overflow: hidden; float: left; }
	.lineQR img { width: 350px; overflow: hidden; float: left; }
	.od2 { text-align: left; margin: 120px 0px 50px 280px; overflow: hidden; float: left; width: 50%; }
	.msgNow { margin: -220px 30px 60px -40px;  overflow: hidden; float: left; width: 300px; height: 300px;  }
	.msgNow img { width: 200px; margin: 20px; }
	.od3 { text-align: left; position: absolute; bottom: 120px; }
	.od4 { text-align: left; position: absolute; bottom: 30px; }
	.orderBG { width: 300px; height: 250px; position: absolute; 
		bottom: 0; right: 150px; left: auto; background-size: 100%; z-index: 1;  }
}