@charset "utf-8";

@font-face {
    font-family: 'LINE Seed Sans TH';
    src: url(LINESeedSansTH_Rg.woff);
}

@font-face {
    font-family: 'LINE Seed Sans TH BD';
    src: url(LINESeedSansTH_Bd.woff);
}

body{
	font-family: LINE Seed Sans TH;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h2{
	margin-top: -20px;
}

h3{
	color: #476A31;
	font-size: 28px;
	padding: 0 5px;
	font-family: LINE Seed Sans TH BD;
}

h4{
	color: #74A64C;
	font-size: 21px;
	margin-top: -25px;
	padding: 0 5px;
}

.benefit{
	font-size: 18px;
}

.product-home{
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 500px;
	z-index: 2;
}

.veg{
	position: absolute;
  	left: 50%;
  	transform: translate(-50%, 0);
	z-index: 1;
}

.logo{
	position: absolute;
	left: 10%;
	z-index: 2;
	float: left;
}

.reveal4{
  position: relative;
  transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: 1;
  transition: 8s all ease;
}

.reveal4.active{
  transform: matrix(0.5, 0, 0, 0.5, 0, 300);
  opacity: 0;
}

.reveal1{
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal1.active{
  transform: translateX(0);
  opacity: 1;
}

.reveal2{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal2.active{
  transform: translateY(0);
  opacity: 1;
}

.reveal2product{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 2.5s all ease;
}

.reveal2product.active{
  transform: translateY(0);
  opacity: 1;
}

.reveal3{
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal3.active{
  transform: translateX(0);
  opacity: 1;
}

.reveal-veg{
  position: relative;
  transform: translateY(0);
  opacity: 1;
  transition: 2s all ease;
}

.reveal-veg.active{
  transform: translateY(-150px);
  opacity: 0;
}

.shop a{
	background-color: white;
	padding: 10px 40px;
	color: #374D24;
	margin-top: 10px;
	border-radius: 20px;
	box-shadow: 5px 5px black;
	display: inline-block;
	text-decoration: none;
}

.shop a:hover{
	background-color: #0D2D28;
	color: #C5DD78;
}

.shop_m a{
	background-color: white;
	padding: 10px 20px;
	color: #374D24;
	margin-top: 10px;
	border-radius: 20px;
	box-shadow: 5px 5px black;
	display: inline-block;
	text-decoration: none;
}

.shop_m a:hover{
	background-color: #0D2D28;
	color: #C5DD78;
}

.benefit-box{
	margin-top: 25px;
	background-color: white;
	padding: 20px 0 10px 0;
	box-shadow: 3px 3px 3px #273B05;
}

.circle {
	font-family: LINE Seed Sans TH BD;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
}

.circle_m {
	font-family: LINE Seed Sans TH BD;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 13px;
}

.c1{
	font-size: 48px;
	line-height: 48px;
	background: #092B29;
	margin-left: -10px;
}

.c2{
	font-size: 34px;
	line-height: 36px;
	color: #F6EFE3;
	background: #73A44B;
	margin-left: 70px;
}

.c3{
	font-size: 31px;
	line-height: 36px;
	color: #FFFFFF;
	background: #2A5027;
	margin-left: 40px;
}

.c1m{
	font-size: 21px;
	line-height: 21px;
	background: #092B29;
}

.c2m{
	font-size: 17px;
	line-height: 17px;
	color: #F6EFE3;
	background: #73A44B;
	margin-left: 40px;
}

.c3m{
	font-size: 15px;
	line-height: 15px;
	color: #FFFFFF;
	background: #2A5027;
	margin-left: 20px;
}

.sale1{
	background-color: #092B29;
	color: #C9E286;
	display: inline-block;
	padding: 0 15px;
	border-radius: 15px;
	box-shadow: 5px 5px white;
	font-size: 40px;
	font-family: LINE Seed Sans TH BD;
}

.sale2{
	background-color: #092B29;
	color: white;
	display: inline-block;
	padding: 5px 25px;
	border-radius: 15px;
	box-shadow: 5px 5px white;
	font-size: 32px;
	font-family: LINE Seed Sans TH BD;
}

.sale3{
	background-color: white;
	color: #364D24;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 15px;
	box-shadow: 5px 5px #64835A;
	font-size: 28px;
}

@keyframes homeimg_a{
    from {bottom: -200px; opacity: 0;} 
    to{bottom:0px; opacity: 1;} 
}
@-moz-keyframes homeimg_a{
    from {bottom: -200px; opacity: 0;} 
    to{bottom:0px; opacity: 1;} 
}
@-webkit-keyframes homeimg_a{
    from {bottom: -200px; opacity: 0;} 
    to{bottom:0px; opacity: 1;} 
}

.homeimg1{
	position:relative;
    animation:homeimg_a 2s;
    -moz-animation:homeimg_a 2s; /* Firefox */
    -webkit-animation:homeimg_a 2s; /* Safari and Chrome */               
}

.homeimg2{
	position:relative;
    animation:homeimg_a 3s;
    -moz-animation:homeimg_a 3s; /* Firefox */
    -webkit-animation:homeimg_a 3s; /* Safari and Chrome */               
}

.qr a{
	background-color: #092B29;
	color: #AAC865;
	font-size: 17px;
	border-radius: 15px;
	margin-top: 10px;
	box-shadow: 3px 3px black;
	display:inline-block; padding: 5px 20px;
	text-decoration: none;
}

.qr a:hover{
	background-color: #FFF;
	color: #092B29;
}

.qr_m a{
	background-color: #092B29;
	color: #AAC865;
	font-size: 12px;
	border-radius: 15px;
	margin-top: 10px;
	display:inline-block; padding: 5px 10px;
	text-decoration: none;
}

.nu-box{
	margin-top: 23px;
}

.nu-equa{
	position: relative;
    left: 80px;
    top: -65px;
	color: #5D7044;
	font-size: 31px;
	font-family: LINE Seed Sans TH BD;
}

.nu-equa::after {
	content: "=";
}

.nu-title{
	background-color: #64835B;
	font-size: 16px;
	padding: 15px 10px 10px 10px;
    border-radius: 10px;
    color: #F8F2EB;
    box-shadow: 2px 2px black;
    width: 105px;
    margin: auto;
    line-height: 14px;
	font-family: LINE Seed Sans TH BD;
}

.nu-title-mini{
	font-size: 11px;
}

.nu-net{
	padding: 3px 6px;
	background-color: #97BC84;
	display: inline-flex;
	color: white;
	font-size: 11px;
	border-radius: 0 0 5px 5px;
}

.nu-sign{
	color: #5D7044;
	font-size: 31px;
	padding-top: 20px;
}

.nu-pic{
	color: #5D7044;
	font-size: 14px;
	line-height: 16px;
}

.col-nu{
	height: 110px;
	background-color: #F8F2EB;
	margin-bottom: 15px;
}

.img-trasition{
	transition: 0.2s;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sale-header1{
	font-size: 31px;
}

.sale-header2{
	font-size: 26px;
	color: white;
}

@media only screen and (min-width: 1201px) {
	.mobile{
		display: none;
	}
}

@media only screen and (max-width: 1200px) {
	.desktop{
		display: none;
	}
	
.reveal1{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal1.active{
  transform: translateY(0);
  opacity: 1;
}
	
.reveal3{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal3.active{
  transform: translateY(0);
  opacity: 1;
}
	
.sale-header1{
	font-size: 28px;
}

.sale-header2{
	font-size: 22px;
	color: white;
}
}