@font-face {
	font-family: "TH SarabunPSK";
	src: url(../Fonts/THSARABUN.TTF) format("truetype");
	src: url(../Fonts/THSARABUN%20BOLD.TTF) format("truetype");
}
a:link {
	text-decoration: none;
	color: #09F;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #00F;
}
a:active {
	text-decoration: none;
}
.a {
	font-family: "TH SarabunPSK";
	font-size: 4vw;
	padding-left: 18%;
	padding-top: ;
	z-index: ;
	position: absolute;
	text-shadow: .15vw .15vw white;
}
.b {
	font-family: "TH SarabunPSK";
	font-size: 3vw;
}
.c {
	font-family: "TH SarabunPSK";
	font-size: 8vw;
	font-weight: bolder;
}
.d {
	font-family: "TH SarabunPSK";
	font-size: 2vw;
	color: #0C3;
}
.d2 {
	font-family: "TH SarabunPSK";
	font-size: 2vw;
}
.e {
	font-family: "TH SarabunPSK";
	font-size: 1vw;
}
.f {
	font-family: "TH SarabunPSK";
	font-size: 3vw;
}
.g {
	font-family: "TH SarabunPSK";
	font-size: 2.2vw;
	color: #500;
}
.h {
	font-family: "TH SarabunPSK";
	font-size: 1.7vw;
}
.i {
	font-family: "TH SarabunPSK";
	font-size: 1.8vw;
}
.j {
	font-family: "TH SarabunPSK";
	font-size: 2.4vw;
}
.layer0 {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: ;
	background-image: url(../Images/sky_1.jpg);
	background-size: 100% 100%; /*AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
	top: 0;
	left: 0;
}
.layer00 { /*homepage*/
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 0;
	background-color: #fff;
	top: 0%;
	left: 10%;
}
.layer1 { /*for all Cp*/
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: #fff;
	top: %;
	left: %;
}
.layer1b { /*instruction*/
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 5;
	background-color: #fff;
	top: 0%;
	left: 10%;
}
.layer1c { /*creator*/
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 0;
	background-color: #fff;
	top: 0%;
	left: 10%;
}.layer1d { /*reference*/
	position: absolute;
	width: 80%;
	height: 100%;
	z-index: 0;
	background-color: #fff;
	top: 0%;
	left: 10%;
}
.layer2 {
	position: absolute;
	width: 100%;
	height: 35%;
	z-index: 0;
	background-color: ;
	background-image: ;
	background-repeat: no-repeat;
	background-size: ;
	opacity: ;
}
	.layer2 .logo img{
		position: absolute;
		margin-top: 2%;
		margin-left: 1.5%;
		z-index: 1;
	}
	.layer2 .bg img{
		position: absolute;
		opacity: 1;
		z-index: 2;
	}
	.layer2 .bg1 img{
		position: absolute;
		opacity: 1;
		z-index: 3;
	}
	.layer2 .bg2 img{
		position: absolute;
		opacity: 1;
		z-index: 3;
	}
	.layer2 .bg3 img{
		position: absolute;
		opacity: 1;
		z-index: 4;
	}
.layer2b {
	position: absolute;
	width: 100%;
	height: 30%;
	z-index: 1;
	background-color: ;
	background-image: ;
	background-repeat: no-repeat;
	background-size: ;
}
	.layer2b .bg img{
		position: absolute;
		opacity: .6;
		z-index: 0;
	}
.layer3 {
	position: absolute; /*layer1b < layer3d&e so bg transparent*/
	top: 35%;
	left: 20%;
	width: 80%;
	height: 100%; /*62%*/
	z-index: 0;
	text-align: center;
	padding-top: 0%;
	opacity: 1;
	background-color: ;
	background-position: ;
}
	.layer3-instruction-head{
		position: absolute;
		text-align: center;
		top: 3%;
		margin-top: vw;
		background-image: url(../Images/Instruction-Head2.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		left: 5%;
		width: 90%;
		height: 20%;
		z-index: 3;
	}
	.layer3-creator-head{
		position: absolute;
		text-align: center;
		top: 3%;
		margin-top: vw;
		background-image: url(../Images/Creator-Head2.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		left: 5%;
		width: 90%;
		height: 20%;
		z-index: 3;
	}
	.layer3-reference-head{
		position: absolute;
		text-align: center;
		top: 3%;
		margin-top: vw;
		background-image: url(../Images/Reference-Head2.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		left: 5%;
		width: 90%;
		height: 20%;
		z-index: 3;
	}
	.layer3-exercise-head{
		position: absolute;
		text-align: center;
		top: 3%;
		margin-top: vw;
		background-image: url(../Images/Exercise-Head.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		left: 5%;
		width: 90%;
		height: 20%;
		z-index: 3;
	}
	.layer3-profile1{	/*1324*/
		position: absolute;
		text-align: center;
		top: 30%;
		margin-top: vw;
		background-image: url(../Images/june-2.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		left: 16%;
		width: 31.78%;
		height: 40%;
		z-index: 3;
	}
		.layer3-profile1 .name1{	/*1324*/
			position: absolute;
			text-align: center;
			top: 102%;
			margin-top: vw;
			background-color: ;
			left: -26%; /*7.6*/
			width: 120%;
			height: 33%;
			z-index: 3;
		}
	.layer3-profile2{	/*1338*/
		position: absolute;
		text-align: center;
		top: 30%;
		margin-top: vw;
		background-image: url(../Images/first.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #;
		left: 63%;
		width: 31.78%;
		height: 40%;
		z-index: 3;
	}
		.layer3-profile2 .name2{	/*1338*/
			position: absolute;
			text-align: center;
			top: 102%;
			margin-top: vw;
			background-color: ;
			left: -26%;
			width: 120%;
			height: 33%;
			z-index: 3;
		}
	.layer3-profile3{	/*1344*/
		position: absolute;
		text-align: center;
		top: 90%;
		margin-top: vw;
		background-image: url(../Images/cream.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		left: 16%;
		width: 31.78%;
		height: 40%;
		z-index: 3;
	}
		.layer3-profile3 .name3{	/*1344*/
			position: absolute;
			text-align: center;
			top: 102%;
			margin-top: vw;
			background-color: ;
			left: -26%;
			width: 120%;
			height: 48%;
			z-index: 3;
		}
	.layer3-profile4{	/*1426*/
		position: absolute;
		text-align: center;
		top: 90%;
		margin-top: vw;
		background-image: url(../Images/poppy.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #;
		left: 63%;
		width: 31.78%;
		height: 40%;
		z-index: 3;
	}
		.layer3-profile4 .name4{	/*1426*/
			position: absolute;
			text-align: center;
			top: 102%;
			margin-top: vw;
			background-color: ;
			left: -26%;
			width: 120%;
			height: 33%;
			z-index: 3;
		}
	/*88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
	.layer3 .ins-head img{
		position: center;
		opacity: 1;
		z-index: 4;
	}
	.layer3 .crea-head img{
		position: center;
		opacity: 1;
		background-color: ;
		z-index: 4;
	}
	/*88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
.layer3b {	/*ยินดีต้อนรับ*/
	position: absolute;
	text-align: left;
	top: 25%; /*36.5*/
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 52.5%;
	background-color: #;
	z-index: 3;
}
.layer3b2 {	/*ผู้จัดทำ*/
	position: absolute;
	text-align: center;
	top: 2%; /*37.5*/
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 55%;
	z-index: 3;
}
.layer3c {	/*instruction*/
	position: absolute;
	text-align: left;
	top: 26%;
	margin-top: vw;
	left: %;
	margin-left: %;
	background-color: #fff;
	width: 100%;
	height: 45%;
	z-index: 1;
}
.layer3d {	/*background for homepage*/
	position: absolute;
	top: 0%;
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 100%;
	background-image: url(../Images/.jpg); /*post_plano_marketing_anual-1170x550.jpg*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 1;
	z-index: 2;
}
	.layer3d .aa img{
		position: center;
		opacity: 1;
		background-color: ;
		z-index: 4;
	}
	.layer3d .bb img{
		position: center;
		opacity: 1;
		background-color: ;
		z-index: 4;
	}
.layer3e {	/*background for instruction*/
	position: absolute;
	top: 0%;
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 100%; /**********************************************************************************************************/
	/*background-image: url(../Images/post_plano_marketing_anual-1170x550.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 1;
	z-index: 2;
}
.layer3e2 {	/*background for creator*/
	position: absolute;
	top: 0%;
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 151%; /**********************************************************************************************************/
	/*background-image: url(../Images/post_plano_marketing_anual-1170x550.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #fff;
	background-position: center;
	opacity: 1;
	z-index: 1;
}
.layer3e3 {	/*background for reference*/
	position: absolute;
	top: 0%;
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 175%; /**********************************************************************************************************/
	/*background-image: url(../Images/post_plano_marketing_anual-1170x550.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #fff;
	background-position: center;
	opacity: 1;
	z-index: 1;
}
.layer3e4 {	/*background for exercise*/
	position: absolute;
	top: 28%;
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 115%; /**********************************************************************************************************/
	/*background-image: url(../Images/post_plano_marketing_anual-1170x550.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #fff;
	background-position: center;
	text-align: left;
	opacity: 1;
	z-index: 1;
}
	.layer3e4 .aaa img{
		left: ;
		position: ;
		opacity: 1;
		background-color: ;
		background-position: left;
		z-index: 0;
	}
	.layer3e4 .bbb img{
		position: ;
		opacity: 1;
		background-color: ;
		z-index: 4;
	}
.layer3f {	/*learning order picture*/
	position: absolute;
	top: 70%; /*63*/
	margin-top: vw;
	left: 0%;
	width: 100%;
	height: 213%;
	background-color: #fff;
	background-image: url(../Images/flowchart_learning2.png);
	background-repeat: no-repeat;
	background-size: 65%;
	background-position: center;
	z-index: 99;
}
.layer4a {	/*เมนูซ้าย homepage*/
	position: absolute;
	top: 35%;
	width: 20%;
	height: 100%;
	z-index: 1;
	background-color: rgb(153,255,51);;
	background-image: url(../Images/iR4rgE9.);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 0%;
}
.layer4b {	/*เมนูซ้าย instruction*/
	position: absolute;
	top: 35%;
	width: 20%;
	height: 283%; /*254.1 189.75*/
	z-index: 1;
	background-color: rgb(153,255,51);
	background-image: url(../Images/iR4rgE9.);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 0%;
}.layer4c {	/*เมนูซ้าย creator*/
	position: absolute;
	top: 35%;
	width: 20%;
	height: 151%;
	z-index: 1;
	background-color: rgb(153,255,51);;
	background-image: url(../Images/iR4rgE9.);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 0%;
}.layer4d {	/*เมนูซ้าย reference*/
	position: absolute;
	top: 35%;
	width: 20%;
	height: 175%;
	z-index: 1;
	background-color: rgb(153,255,51);;
	background-image: url(../Images/iR4rgE9.);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 0%;
}
.layer4e {	/*เมนูซ้าย exercise*/
	position: absolute;
	top: 35%;
	width: 20%;
	height: 143%;
	z-index: 1;
	background-color: rgb(153,255,51);;
	background-image: url(../Images/iR4rgE9.);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 0%;
}
.layer5 {
	position: absolute;
	margin-left: 0%;
	padding-top: %;
	padding-left: %;
	background-color: #;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.layer6 {
	position: absolute;
	margin-top: 13.75%;
	width: 100%;
	height: 10%;
	z-index: 1;
	background-color: #;
}
.layer7 {
	position: absolute;
	width: 100%;
	height: 100%;
}
.layer8 {
	position: ;
	width: %;
	height: %;
	padding-bottom: 0;
}
.layer9 {
	position: absolute;
	width: 57.3%;
	height: 69.9%;	
}
.layer9 iframe{
	position: absolute;
	width: 100%;
	height: 100%;
}
.layer9b {
	position: absolute;
	width: 50%;
	height: 60.9%;	
}
.layer9b iframe{
	position: absolute;
	width: 100%;
	height: 100%;
}
.layer10 {
	position: absolute;
	width: 0%;
	height: 0%;
	top: ;
	left: ;
	margin-top: ;
}
.layer11 {
	position: absolute;
	top: 35%;
	left: 0%;
	height: 9.2%;
	width: 20%;
	background-color: #;
	z-index: 1;
}
.layer12 {
	position: absolute;
	top: 35%;
	left: 20%;
	height: 9.2%;
	width: 20%;
	z-index: 1;
	background-color: #;
}
.layer13 {
	position: absolute;
	top: 35%;
	left: 40%;
	height: 9.2%;
	width: 20%;
	z-index: 1;
	background-color: #;
}
.layer14 {
	position: absolute;
	top: 35%;
	left: 60%;
	height: 9.2%;
	width: 20%;
	z-index: 1;
	background-color: #;
}
.layer15 {
	position: absolute;
	top: 35%;
	left: 80%;
	height: 9.2%;
	width: 20%;
	z-index: 1;
	background-color: #;
}