body { color: #333; height: auto;  background-color: #d6e4f0 !important; 
	background: url("/graphic/logo/logo1.png");
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: 115% -10vw;
}

.top { overflow: hidden; clear: both; z-index: 1;  padding-left: 6vw; margin-bottom: 3vw; }
.logo { overflow: hidden; float: left; margin-right: 5vw; margin-left: 5vw;   }
.logoImg { width: 20vw; margin-top: 1.5vw; display: none;  }
.logoBrand { font-size: 8vw; font-weight: 800; margin-top: 6vw; margin-bottom: 2vw; color: #000; overflow: hidden; width: 54%; }
.logoText { color: #333; font-size: 4.4vw; overflow: hidden; }

.gCategory { padding: 5vw; overflow: hidden; position: absolute; z-index: 10; }
.gCategoryList { padding: 3.5vw; clear: both; overflow: hidden; background-color: #FFF;
	margin-bottom: 4.5vw; cursor: pointer;}
.gCategoryIcon { width: 49%; overflow: hidden; float: left; margin-right: 7vw;  }
.gCategoryText { overflow: hidden; font-size: 6.4vw; font-weight: 800; color: #0e447d; line-height: 1.2;  }
.gCategoryHelp { margin-top: 6vw; color: #333; font-size: 4.5vw; line-height: 1.2; }

.gCategoryBack { padding:3vw 3vw 2.5vw 5vw; overflow: hidden; background-color: #000; clear: both; color: #FFF;
	margin-bottom: 5vw; font-size: 7vw; font-weight: 500; cursor: pointer; }
.gCategoryBack:hover { background-color: #6699CC; color: #000; font-weight: 500; }
.gCategoryBack svg { width: 10vw; height: 10vw; margin-right: 2vw; vertical-align: -3vw; margin-left: -1.5vw; }

/* section select */
.gSelectArea { overflow: hidden; clear: both; text-align: left; padding: 3vw 7vw 3vw 8vw;  }
.gSelect { overflow: hidden; margin-bottom: 2.5vw; padding: 2.5vw 0 2.5vw 0; border-bottom: 1vw dotted #FFF; cursor: pointer;}
.gSelect:hover { background-color: #FFF; color: #000; border-bottom: 0.9vw dotted #FFF; padding: 2.8vw 0 2.5vw 3vw; }
.gSelectIcon { width: 18vw; overflow: hidden; float: left; margin-right: 8vw; }
.gSelectTitle { font-size: 5.2vw; font-weight: 400; color: #000; margin-top: 1.1vw; }
.gSelectPrice { margin-top: 1vw; font-size: 4.5vw; color: #333; }
.gSelectNow { background-color:  #6699CC; color: #000; border-bottom: 0.9vw dotted #6699CC; padding: 2.8vw 0 2.5vw 3vw; }

/* 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:4vw 4vw 4vw 4vw; 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:11vw; height:11vw; }
.contactArea i { font-size: 8vw; }
.contactText {  }
.ctbt1 { background-color:#b0d7ff; color:#000; } .ctbt1:hover { background-color:#FFF; color:#3372b3; }
.ctbt2 { background-color:#FFF; color:#000; } .ctbt2:hover { background-color:#FFF; color:#3372b3; }
.ctbt3 { background-color:#b0d7ff; color:#000; } .ctbt3:hover { background-color:#FFF; color:#3372b3; }
.contactOrder { padding: 0 20px 0 20px; display: none;  }

.sorry { border:0.9vw dotted #3372b3; padding: 6vw; font-size: 6vw; margin-bottom: 30px; font-weight: 400; }
.sorry b { font-size: 9vw; }


/* ความกว้าง ไม่ต่ำกว่า */ /* มือถือรุ่นเก่า จอสั้นๆ */
@media screen and ( min-device-aspect-ratio:1/2 ) and ( max-width: 500px )
{ 
	.gCategoryIcon { width: 30%; margin-right: 4vw;  }
	.gCategoryText { font-size: 5.5vw; }
	.gCategoryHelp { font-size: 4vw; }
}

/* ============= มือถือจอ Flip จัตุรัส ============= */
@media screen and ( min-aspect-ratio:1/1 )
{

	body { background-size: 30%; background-position: -10% -10%; }
	
.logo { }
.logoImg { }
.logoBrand { font-size: 5vw; margin-top: 4.5vw; margin-bottom: 1.5vw; margin-left: 10vw; width: 32%;  }
.logoText { font-size: 2.5vw; margin-left: 10vw; margin-top: -1vw; }

	.gCategory { padding: 4vw 4vw 4vw 4vw; margin-top: 5vw; text-align: center;  }
	.gCategoryList { width: 26%; height: 42vw; padding: 2vw; float:none; clear: none; }
	.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:1vw 4vw 1vw 2vw; clear: none; position: fixed; right: 4vw; top: 3vw; z-index: 50; font-size: 3vw; }
	.gCategoryBack svg { width: 5vw; height: 5vw; margin-right: 1vw; margin-left: -0.8vw; vertical-align: -1.5vw; }

	.gSelectArea { padding: 0vw; margin-left: 5.5vw;  display: flex; justify-content:flex-start; flex-wrap: wrap;  }
	
	.gSelect { width: 42.1%; margin: 0vw 2vw 2vw 0vw; border: 0.3vw dotted #FFF; padding: 1.2vw 1.5vw 1.2vw 1.5vw; }
	.gSelect:hover { border: 0.3vw dotted #FFF; padding: 1.2vw 1.5vw 1.2vw 1.5vw; }
	.gSelectNow { border: 0.3vw dotted #6699CC; }
	
	.gSelectTitle { margin-top: 0.7vw; font-size: 2.5vw;  }
	.gSelectIcon { width: 8vw; margin-right: 2.5vw; }
	.gSelectPrice { margin-top: 0.8vw; font-size: 2.2vw; }
	
/* list */
.lightPhotoGalleryArea { }
.lightPhotoGallery { text-align:center; display: flex;
    justify-content: left; flex-wrap: wrap; padding-bottom: 1vw; margin-left: 3.5vw; }
.gList { margin: 2vw; width: 28%; overflow: hidden; cursor: pointer; }
	
	body { position: relative; }
	.ctbt3 {  }
	.serviceContact { width: 50%; margin-left: 0.1vw; margin-top: 0; padding: 4vw 4vw 6vw 4vw; }
	.sorry { margin-bottom: 0px; margin-right: 0; margin-top: 0;  font-size: 2.8vw; padding: 4vw;  }
	.contactData { }
	.contactArea { padding: 2vw; margin-bottom: 2vw; }
	.contactArea i { font-size: 4vw; }
	.contactText { font-size: 2.5vw; }
	.contactOrder { width: 49%; overflow: hidden; margin-left: auto; bottom: 0px; right: 0%; position: absolute; }
	
.sorry { border:0.4vw dotted #3372b3; padding: 3.5vw; font-size: 3vw; }
.sorry b { font-size: 4.2vw; }
	
}


/* ============= Tablet แนวนอน และจอ 4:3 ============= */
@media screen and ( min-aspect-ratio:1024/768 )
{
	
	body { background-size: 25%; background-position: -8% -12%; }
	
.logo { }
.logoImg { }
.logoBrand { font-size: 3vw; margin-bottom: 1.6vw; margin-top: 4vw; width: 25%; }
.logoText { font-size: 2vw; }

	.gCategory { margin-top: 1vw; }
	.gCategoryList { height: 53vh;  }
	.gLeft { }
	.gCenter { }
	.gRight { }
	
	.gCategoryIcon { }
	.gCategoryText { font-size: 2.6vw;  }
	.gCategoryHelp { font-size: 2vw; }
	
	.gCategoryBack { font-size: 2.5vw; }

	.gSelectArea { margin-top: 2vw; }
	
	.gSelect { width: 26.3%; border: 0.3vw dotted #FFF; padding: 1vw 1.4vw 1vw 1.4vw; }
	.gSelect:hover { border: 0.3vw dotted #FFF; padding: 1vw 1.4vw 1vw 1.4vw;   }
	.gSelectNow { border: 0.3vw dotted #6699CC; }
	
	.gSelectTitle { margin-top: 0vw; font-size: 2.2vw;  }
	.gSelectIcon { width: 8vw; margin-right: 2.4vw; }
	.gSelectPrice { margin-top: 0.4vw; font-size: 1.5vw; }
	
	/* list */
	.lightPhotoGalleryArea { }
	.lightPhotoGallery { }
	.gList { }
	
	.serviceContact { width: 50%; margin: 5vw 0 0 5vw; padding: 0 0 4vw 0; }
	.sorry { font-size: 2.3vw; padding: 3vw; border:0.3vw dotted #6699CC;  }
	.contactData { }
	.contactArea { padding: 1.2vw; margin-bottom: 1.5vw; }
	.contactText { font-size: 2.2vw; }
	.contactOrder { width: 40%; right: 1vw; left: auto; }
	.ctbt6 { margin-bottom: 2vw !important; }
	
	.sorry { font-size: 2vw; }
	.sorry b { font-size: 3vw; }
	
}


/* ============= Notebook ============= */
@media screen and ( min-aspect-ratio:2/1)
{
	body { background-size: 20%; background-position: -6% -14%; }
	
.logo { }
.logoImg { }
.logoBrand { font-size: 3vw; margin-bottom: 1vw; margin-top: 2vw; margin-left: 6vw; width: 24%;  }
.logoText { font-size: 1.5vw; margin-left: 6vw; margin-top: -0.4vw; }

	.gCategory { margin-top: -3vw; padding: 1.7vw 10vw 0vw 10vw; }
	.gCategoryList { width: 26%; height: 60vh;  }
	.gLeft { }
	.gCenter { }
	.gRight { }
	
	.gCategoryIcon { width: 100%; margin-bottom: 1.5vw; }
	.gCategoryText { font-size: 2vw; margin-top: 1vw; }
	.gCategoryHelp { font-size: 1.4vw; margin-top: 0.5vw;   }
	
	.gCategoryBack { font-size: 2vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; }
	.gCategoryBack svg { width: 3vw; height: 3vw; vertical-align: -0.8vw; margin-right: 0.5vw; }

	.gSelectArea { margin-top: 1vw; }
	
	.gSelect { width: 20.5%; border: 0.22vw dotted #FFF; padding: 0.6vw .08vw 0.6vw 0.8vw; margin-bottom: 1vw; }
	.gSelect:hover { border: 0.22vw dotted #FFF; padding: 0.6vw .08vw 0.6vw 0.8vw; }
	.gSelectNow { border: 0.22vw dotted #6699CC;  }
	
	.gSelectTitle { margin-top: 0.5vw; font-size: 1.4vw; line-height: 1;  }
	.gSelectIcon { width: 4.5vw; margin-right: 1.5vw; }
	.gSelectPrice { margin-top: 0.4vw; font-size: 1.2vw; }
	
	/* list */
	.lightPhotoGalleryArea { }
	.lightPhotoGallery {  margin-left: 3.5vw; }
	.gList { width: 15.1%; }
	
	.serviceContact { width: 45%; margin: 2vw 0 0 5.6vw; }
	.sorry { font-size: 1.7vw; padding: 2.2vw; }
	.sorry b { font-size: 2.8vw; }
	.contactData { }
	.contactTitle { margin-bottom:3vw; }
	.contactArea { padding: 1vw; margin-bottom: 1vw; width: 100%; }
	.contactArea i { font-size: 2.5vw; vertical-align: -0.4vw; }
	.contactText { font-size: 1.8vw; }
	.contactOrder { width: 35%; right:10vw; left:auto; }
}


/* ============= Full HD ============= */
@media screen and ( min-aspect-ratio:2/1 ) and (min-width: 1600px)
{
	body { background-size: 18%; background-position: -3.5% -10%; }
	.logoBrand { font-size: 3vw; margin-bottom: 1vw; margin-top: 3vw; margin-left: 6vw; width: 20%;  }
	.logoText { font-size: 1.2vw; margin-left: 6vw; margin-top: -0.4vw; }

	.gCategory {  padding: 1.7vw 10vw 0vw 10vw; }
	.gCategoryList { width: 26%; height: 57vh; padding: 1.6vw;  }
	.gCategoryHelp { font-size: 1.2vw; }
	
	.gCategoryBack { font-size: 1.7vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; }
	.gCategoryBack svg { width: 2.5vw; height: 2.5vw; vertical-align: -0.7vw; margin-right: 0.5vw; }
	
	.serviceContact { width: 35%; margin: 2vw 0 0 20vw; }
	.sorry { font-size: 1.2vw; padding: 1.7vw;  }
	.sorry b { font-size: 2vw; }
	.contactData { }
	.contactTitle { margin-bottom:3vw; }
	.contactArea { padding: 0.6vw; margin-bottom: 1vw; width: 100%; }
	.contactArea i { font-size: 2vw; vertical-align: -0.4vw; }
	.contactText { font-size: 1.2vw; }
	.contactOrder { width: 547px; height: 623px; right:14vw; left:auto; }
}