@import url(https://fonts.googleapis.com/css?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
@import url(https://fonts.googleapis.com/css?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

body {
    font-family: 'Sarabun', sans-serif;
}
.stock_text_white{
    text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
}




 .letter {
	 display: inline-block;
	 font-size: 10vw;
     font-family: 'Kanit', sans-serif;
     font-weight: 900;
	 color: #282828;
	 -webkit-text-stroke: 0.5vw #282828;
	 position: relative;
	 z-index: 1;
	 -webkit-transform: translate3d(0, 130px, 0);
	 -moz-transform: translate3d(0, 130px, 0);
	 -ms-transform: translate3d(0, 130px, 0);
	 transform: translate3d(0, 130px, 0);
}
 .a:after {
	 content: "เจริญ";
	 font-size: 10vw;
}
 .b:after {
	 content: "มั่น";
	 font-size: 10vw;
}
 .c:after {
	 content: "คอน";
	 font-size: 10vw;
}
 .d:after {
	 content: "กรีต";
	 font-size: 10vw;
}
 .a:after, .b:after, .c:after, .d:after {
	 position: absolute;
	 left: 0;
	 -webkit-transition: all 1s;
	 -moz-transition: all 1s;
	 -ms-transition: all 1s;
	 transition: all 1s;

	 -webkit-text-stroke: 0.5vw #ffffff;
	 opacity: 1;
	 z-index: 100;
}
.a:after, .b:after{
    color: rgb(255, 95, 95);
}
.c:after, .d:after {
    color: rgb(90, 90, 90);
}
 .letter:nth-child(1) {
	 animation-delay: 1.1s;
	 -webkit-animation-delay: 1.1s;
}
 .letter:nth-child(1):after {
	 animation-delay: 2.7s;
	 -webkit-animation-delay: 2.7s;
}
 .letter:nth-child(2) {
	 animation-delay: 1.2s;
	 -webkit-animation-delay: 1.2s;
}
 .letter:nth-child(2):after {
	 animation-delay: 2.9s;
	 -webkit-animation-delay: 2.9s;
}
 .letter:nth-child(3) {
	 animation-delay: 1.3s;
	 -webkit-animation-delay: 1.3s;
}
 .letter:nth-child(3):after {
	 animation-delay: 3.1s;
	 -webkit-animation-delay: 3.1s;
}
 .letter:nth-child(4) {
	 animation-delay: 1.4s;
	 -webkit-animation-delay: 1.4s;
}
 .letter:nth-child(4):after {
	 animation-delay: 3.3s;
	 -webkit-animation-delay: 3.3s;
}
 .letter {
	 -webkit-animation: show 0.3s 4s 1 ease-out forwards;
	 -moz-animation: show 0.3s 4s 1 ease-out forwards;
	 -o-animation: show 0.3s 4s 1 ease-out forwards;
	 animation: show 0.3s 4s 1 ease-out forwards;
}
 .letter:after {
	 -webkit-animation: up 1s 1 ease-out forwards;
	 -moz-animation: up 1s 1 ease-out forwards;
	 -o-animation: up 1s 1 ease-out forwards;
	 animation: up 1s 1 ease-out forwards;
}
 @keyframes show {
	 100% {
		 -webkit-transform: translate3d(0, 0px, 0);
		 -moz-transform: translate3d(0, 0px, 0);
		 -ms-transform: translate3d(0, 0px, 0);
		 transform: translate3d(0, 0px, 0);
	}
}
 @keyframes up {
	 30% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
	 60% {
		 -webkit-transform: translate3d(0, -4px, 0);
		 -moz-transform: translate3d(0, -4px, 0);
		 -ms-transform: translate3d(0, -4px, 0);
		 transform: translate3d(0, -4px, 0);
	}
	 80% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
	 90% {
		 -webkit-transform: translate3d(0, -5px, 0);
		 -moz-transform: translate3d(0, -5px, 0);
		 -ms-transform: translate3d(0, -5px, 0);
		 transform: translate3d(0, -5px, 0);
	}
	 100% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
}
 @-webkit-keyframes show {
	 100% {
		 -webkit-transform: translate3d(0, 0px, 0);
		 -moz-transform: translate3d(0, 0px, 0);
		 -ms-transform: translate3d(0, 0px, 0);
		 transform: translate3d(0, 0px, 0);
	}
}
 @-webkit-keyframes up {
	 30% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
	 60% {
		 -webkit-transform: translate3d(0, -4px, 0);
		 -moz-transform: translate3d(0, -4px, 0);
		 -ms-transform: translate3d(0, -4px, 0);
		 transform: translate3d(0, -4px, 0);
	}
	 80% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
	 90% {
		 -webkit-transform: translate3d(0, -5px, 0);
		 -moz-transform: translate3d(0, -5px, 0);
		 -ms-transform: translate3d(0, -5px, 0);
		 transform: translate3d(0, -5px, 0);
	}
	 100% {
		 -webkit-transform: translate3d(0, -7px, 0);
		 -moz-transform: translate3d(0, -7px, 0);
		 -ms-transform: translate3d(0, -7px, 0);
		 transform: translate3d(0, -7px, 0);
	}
}