body { color: #333; height: auto;  background-color: #FFF !important; }

.top { overflow: hidden; clear: both; z-index: 1;  }
.logo { overflow: hidden; text-align: left; margin-left: 5vw; }
.logoImg { width: 70%; margin-top: 1.7vw;  }
.logoBrand { font-size: 8vw; font-weight: 800; margin-left: 23vw; margin-top: -1.5vw; margin-bottom: 0vw; color: #0e447d; }
.logoText { color: #333; font-size: 5vw; overflow: hidden; margin-left: 23vw; margin-right: 4vw; }

.gCategory { padding: 5vw; overflow: hidden; position: absolute; z-index: 10; }
.gCategoryList { padding: 3.5vw; clear: both; overflow: hidden; border: 1vw dotted #f0acc1; background-color: #fcd1dd;
	margin-bottom: 4.5vw; cursor: pointer;}
.gCategoryIcon { width: 38%; overflow: hidden; float: left; margin-right: 7vw;  }
.gCategoryText { overflow: hidden; font-size: 6.4vw; font-weight: 400; color: #ff0066;  }
.gCategoryHelp { margin-top: 4vw; color: #333; font-size: 4.3vw; }

.gCategoryBack { padding:3vw 3vw 2.5vw 5vw; overflow: hidden; background-color: #FFF; clear: both; display: none;
	margin-bottom: 5vw; font-size: 6vw; cursor: pointer; }
.gCategoryBack:hover { background-color: #f6b6c9; color: #000; font-weight: 400; }

/* section select */
.gSelectArea { overflow: hidden; clear: both; text-align: left; padding: 5vw 6vw 3vw 6vw;  }
.gSelect { overflow: hidden; margin-bottom: 3.5vw; padding: 1.5vw 1vw 1vw 1vw; border: 0.6vw dashed #b0d7ff; cursor: pointer;}
.gSelect:hover { background-color: #6699CC; color: #FFF; border: 0.6vw dashed  #6699CC; }
.gSelectIcon { }
.gSelectTitle { font-size: 6vw; font-weight: 400; margin-top: 1.7vw; }
.gSelectPrice { margin-top: 1vw; font-size: 4.5vw; color: #333; }
.gSelectNow { background-color:  #b0d7ff; color: #000; border: 0.6vw dashed  #b0d7ff; }
.gSelect i { overflow: hidden; float: left; margin-right: 4vw; margin-left: 15.6vw; font-size: 8vw; }
.gSelectHelp { font-size: 4.2vw; display: none; }

/* list */
.lightPhotoGalleryArea { }
.lightPhotoGallery { text-align:center; display: flex;
    justify-content: center; flex-wrap: wrap; padding-bottom: 5vw; }
.gList { margin: 2.2vw; width: 40%; overflow: hidden; cursor: pointer; }


/* contact */
.serviceContact { overflow:hidden; padding:7vw; padding-bottom:5vw; display: none;  }
.contactTitle { font-size:5vw; margin-bottom:5vw; color:#000; text-align:center; font-weight: 400; }
.contactArea { overflow:hidden; padding:5vw 5vw 5vw 5vw; font-size:5vw; font-weight: 400; line-height:1.2; text-align:center; 
	margin-bottom:3.5vw; cursor: pointer; }
.contactArea img { overflow:hidden; float:left; width:10vw; height:10vw; }
.contactText {  }
.ctbt1 { background-color:#f2c1cf; color:#000; } .ctbt1:hover { background-color:#FFF; color:#dd5079; }
.ctbt2 { background-color:#f2c1cf; color:#000; } .ctbt2:hover { background-color:#FFF; color:#dd5079; }
.ctbt3 { background-color:#f2c1cf; color:#000; } .ctbt3:hover { background-color:#FFF; color:#dd5079; }
.contactOrder { padding: 0 20px 0 20px; display: none;  }

.sorry { border:0.6vw dashed #d87592; padding: 5vw; font-size: 6vw; margin-bottom: 30px; font-weight: 400; }


/* ความกว้าง ไม่ต่ำกว่า */ /* มือถือรุ่นเก่า จอสั้นๆ */
@media screen and ( min-device-aspect-ratio:1/2 ) and ( max-width: 500px )
{ 
	
}

/* ============= มือถือจอ Flip จัตุรัส ============= */
@media screen and ( min-aspect-ratio:1/1 )
{
	
.logo { overflow: hidden; float: left; margin-right: 5vw; margin-bottom: 5vw; }
.logoImg { width: 40vw; margin-right: auto; margin-left: -1vw; padding-left: 0;  }
.logoBrand { font-size: 4vw; margin-top: 4.5vw; margin-bottom: 0; }
.logoText { font-size: 2.5vw; margin-top: -1vw; }

	.gCategory { padding: 4vw 4vw 4vw 4vw; margin-top: 5vw; text-align: center;  }
	.gCategoryList { width: 25%; padding: 2vw; float:none; clear: none; border: 0.7vw dotted #f0acc1;  }
	.gLeft { float: left; }
	.gCenter { display: inline-block; margin:0 auto; }
	.gRight { float:right; }
	
	.gCategoryIcon { width: 100%; margin-right: 0px; margin-bottom: 4vw; float: none;  }
	.gCategoryText { font-size: 3.2vw; margin-top: 3vw; text-align: left; }
	.gCategoryHelp { font-size: 2vw; width: auto; margin:1vw auto 0 auto; text-align: left; }
	
	.gCategoryBack { padding:2vw 4vw 2vw 2vw; clear: none; position: fixed; right: 4vw; top: 3vw; z-index: 50; font-size: 3vw; }

	.gSelectArea { padding: 0vw; margin-left: 5.5vw;  display: flex; justify-content:flex-start; flex-wrap: wrap;  }
	
	.gSelect { width: 29%; margin: 0vw 2.1vw 2vw 0vw; padding: 0.3vw 0.15vw 0vw 0.2vw; border: 0.3vw dashed #b0d7ff; }
	.gSelect:hover { border: 0.3vw dashed #6699CC; }
	.gSelectNow { border: 0.3vw dashed #b0d7ff; }
	.gSelect i { margin-right: 2vw; margin-left: auto; font-size: 2vw;  }
	
	.gSelectTitle { margin-top: 1.4vw; font-size: 2vw;  }
	.gSelectIcon { width: 8vw; margin-right: 1.5vw; }
	.gSelectPrice { margin-top: 0.8vw; font-size: 2.2vw; }
	.gSelectHelp { font-size: 2vw; display: block; }
	.gSelect i { margin-right: 1.5vw; font-size: 4.2vw; margin-left: 2vw;  }
	
/* list */
.lightPhotoGalleryArea { }
.lightPhotoGallery { text-align:center; display: flex;
    justify-content: left; flex-wrap: wrap; padding-bottom: 25vw; margin-left: 3.5vw; }
.gList { margin: 2vw; width: 28%; overflow: hidden; cursor: pointer; }
	
	body { position: relative; }
	.ctbt3 { margin-bottom: 30px; }
	.serviceContact { width: 50%; margin-left: 0.1vw; margin-top: 0; padding: 4vw; }
	.sorry { margin-bottom: 0px; margin-right: 0; margin-top: 0;  font-size: 2.8vw; padding: 4vw;  }
	.contactData { }
	.contactArea { padding: 2vw; margin-bottom: 2vw; }
	.contactText { font-size: 3vw; }
	.contactOrder { width: 30%; overflow: hidden; margin-left: auto; bottom: 0px; right: 10%; left: auto; position: absolute;}
	
}


/* ============= Tablet แนวนอน และจอ 4:3 ============= */
@media screen and ( min-aspect-ratio:1024/768 )
{

	
}


/* ============= Notebook ============= */
@media screen and ( min-aspect-ratio:2/1)
{
.logo { width: 26%; margin-right: 0vw; margin-bottom: 1.5vw;  }
.logoImg { width: 100%; }
.logoBrand { font-size: 3vw; margin-bottom: 0; margin-top: 3.9vw; overflow: hidden; float: left; margin-left: 0; margin-right: 2vw; }
.logoText { font-size: 1.8vw; overflow: hidden; float: left; margin-left: 0; margin-top: 5vw; }

	.gCategory { }
	.gCategoryList  { }
	.gLeft { }
	.gCenter { }
	.gRight { }
	
	.gCategoryIcon { }
	.gCategoryText { }
	.gCategoryHelp { }
	
	.gCategoryBack {  }

	.gSelectArea { }
	
	.gSelect { width: auto; overflow: hidden; float: left; padding: 0.2vw 2vw 0vw 0.5vw; border: 0.15vw dashed #b0d7ff;  }
	.gSelect:hover { border: 0.15vw dashed #6699CC; }
	.gSelectNow { border: 0.15vw dashed #b0d7ff; }
	
	.gSelectTitle { font-size: 1.5vw; width: auto; overflow: hidden; float: left; margin-top: 0.90vw; }
	.gSelectHelp { }
	.gSelect i { font-size: 2.8vw; margin-right: 1.2vw;  }
	
	/* list */
	.lightPhotoGalleryArea { }
	.lightPhotoGallery {  margin-left: 3.5vw; padding-bottom: 18vw;  }
	.gList { width: 15.1%; }
	
	.ctbt3 { }
	.serviceContact { }
	.sorry { }
	.contactData { }
	.contactTitle { }
	.contactArea { }
	.contactText { }
	.contactOrder { width: 23%; }
}


/* ============= Full HD ============= */
@media screen and ( min-aspect-ratio:2/1 ) and (min-width: 1600px)
{
 .logo { width: 20%; margin-bottom: 1vw;  }
.logoImg {  }
.logoBrand { font-size: 2.5vw; margin-top: 3.3vw; margin-right: 1.5vw; }
.logoText { font-size: 1.2vw; margin-top: 4.5vw; }
	
	.gSelect {  padding: 0.15vw 2.5vw 0.5vw 2.5vw; border: 0.15vw dashed #b0d7ff; width: auto; }
	.gSelect:hover { border: 0.15vw dashed #6699CC; }
	.gSelectNow { border: 0.15vw dashed #b0d7ff; }
	.gSelectArea { }
	
	.gSelectTitle { font-size: 1.7vw; margin-top: 0.76vw;   }
	.gSelectHelp { }
	.gSelect i { font-size: 2.2vw; margin-right: 1.2vw; margin-top: 0.5vw; margin-left: auto; }
	
	/* list */
	.lightPhotoGalleryArea { padding-bottom: 0vw !important; }
	.lightPhotoGallery {  margin-left: 3.5vw; }
	.gList { width: 20%; }
	
	.ctbt3 { }
	.serviceContact { }
	.sorry { }
	.contactData { }
	.contactTitle { }
	.contactArea { }
	.contactText { }
	.contactOrder { width: 22%; }
}