@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@200;400;600&family=Sarabun:wght@200;400;600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,400;0,700;1,400;1,700&display=swap');
 /*


font-family: 'Noto Sans Thai Looped', sans-serif;
font-family: 'Sarabun', sans-serif;


*/
 html {
   margin: 0px;
   padding: 0px;
   border: 0;
   outline: 0;
   scroll-behavior: smooth;
   height: 100vh;
   width: 100%;
   max-width: 100%;
   overflow-x: hidden; 

 }
 body {
   font-family: 'Krub', 'Sarabun', sans-serif;
   background: rgb(143, 209, 118);
   background: linear-gradient(180deg, rgba(143, 209, 118, 1) 0%, rgba(255, 255, 255, 1) 100%);
   background-color: #FFFFFF;
   background-image: url("../images/bg.png");
   background-repeat: repeat;
   margin: 0px;
   padding: 0px;
	    font-size: 18px;
   line-height: 24px;
   color: #484848;
   overflow-x: hidden;
   font-weight: 400;
 }
 ::-webkit-selection {
   color: #FFFFFF;
   background: #A4871C;
 }
 ::-moz-selection {
   color: #FFFFFF;
   background: #A4871C;
 }
 ::selection {
   color: #FFFFFF;
   background: #A4871C;
 }
 a {
   color: #A4871C;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
   text-decoration: none;
 }
 a:hover, a:active, a:focus {
   color: #c1aa54;
   outline: none;
   text-decoration: none;
 }
 .mobile {
   display: none;
 }
 .desktop {
   display: block;
 }
 .th {
   font-size: 12px;
   line-height: 14px;
   font-family: 'Krub', 'Sarabun', sans-serif;
   font-weight: 400;
   color: #727272;
 }
 .plain {
   font-size: 16px;
   line-height: 20px;
 }
 .logo {
   height: 110px;
 }
 .topspace {
   padding-top: 90px;
   margin-bottom: 90px;
 }
 .swiper-container {
   width: 100%;
   height: 100%;
   background-color: transparent;
 }
 .swiper-slide {
   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: top;
   -ms-flex-pack: top;
   -webkit-justify-content: top;
   justify-content: top;
   -webkit-box-align: top;
   -ms-flex-align: top;
   -webkit-align-items: top;
   align-items: top;
 }

.sap
{
	width: 30px;
	margin-bottom: 10px;
	margin-top: 20px;
}
 
.sap2
{
 background-image: url(../images/sap2.png);
	width: 150px;
	height: 20px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px
}
 

 @media (max-width:1024px) {
   /*   .scrollphoto {
     height: 100%;
     width: auto;
     z-index: 1;
   }*/
 }
 @media (max-width:768px) {
   .logo {
     height: 70px;
     margin-left: -50px;
   }
   .mobile {
     display: block;
   }
   .desktop {
     display: none;
   }
   .bg-image {
     padding-top: 30px;
     height: auto;
     min-height: inherit;
   }
 }
 @media (max-width:512px) {
   .logo {
     height: 80px;
   }
   .topspace {
     padding-top: 80px;
   }
 }
 @media (max-width:375px) {
   .logo {
     height: 50px;
   }
 }
 @media (max-width:214px) {
   .logo {
     height: 40px;
   }
 }

 /**************************** color ****************************/
 .white {
   color: #FFFFFF;
 }
 .grey {
   color: #6e6e6e;
 }
 .black {
   color: #000000;
 }
 .gold {
   color: #A4871C;
 }
 .orange {
   color: #447d0a;
 }
 .lightbrown {
   background-color: #d8cdca;
 }
 .brown {
   color: #7b5c24;
 }
 .green {
   color: #8fc47b;
 }
 .bgwhite {
   background-color: #FFFFFF;
 }
 .bg-dark {
   background-image: linear-gradient(to top, #9b7c14, #ad9231, #bea94b, #d0c065, #e2d77f);
 }
 .bggredegg {
   background: rgb(255, 255, 255);
   background: -moz-linear-gradient(4deg, rgba(255, 255, 255, 1) 28%, rgba(248, 239, 224, 1) 65%);
   background: -webkit-linear-gradient(4deg, rgba(255, 255, 255, 1) 28%, rgba(248, 239, 224, 1) 65%);
   background: linear-gradient(4deg, rgba(255, 255, 255, 1) 28%, rgba(248, 239, 224, 1) 65%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#f8efe0", GradientType=1);
   align-self: flex-end;
 }
 .bggredegg2 {
   background: rgb(255, 255, 255);
   background: -moz-linear-gradient(0deg, rgba(248, 239, 224, 1) 31%, rgba(255, 255, 255, 1) 68%);
   background: -webkit-linear-gradient(0deg, rgba(248, 239, 224, 1) 31%, rgba(255, 255, 255, 1) 68%);
   background: linear-gradient(0deg, rgba(248, 239, 224, 1) 31%, rgba(255, 255, 255, 1) 68%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8efe0", endColorstr="#ffffff", GradientType=1);
   align-self: flex-start;
 }
 .bggold2 {
   background-image: linear-gradient(to top, #9b7c14, #ad9231, #bea94b, #d0c065, #e2d77f);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   color: #000000;
   border: 0px solid #efe9b2;
   align-self: flex-end;
 }
 .bggold3 {
   background-image: linear-gradient(to top, #9b7c14, #ad9231, #bea94b, #d0c065, #e2d77f);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   color: #ffffff;
   border: 1px solid #efe9b2;
   padding: 20px;
   border-radius: 12px;
 }
 .bggold4 {
   background-color: rgba(255, 255, 255, 0.25);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   color: #000000;
   border: 1px solid #efe9b2;
   padding: 20px;
   border-radius: 12px;
   margin-bottom: 20px;
 }
 .bgtab {
   background-color: #A4871C;
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   padding: 10px;
   margin-bottom: 20px;
   margin-top: 50px;
   text-align: center;
   color: #FFFFFF;
 }
 .bggold {
   background-image: linear-gradient(to top, #9b7c14, #ad9231, #bea94b, #d0c065, #e2d77f);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   color: #000000;
   border-radius: 12px;
   border: 1px solid #efe9b2;
   padding: 20px;
   padding-top: 40px;
   padding-bottom: 20px;
   height: 100%;
   width: 100%;
   min-height: 240px;
   align-self: flex-end;
   font-size: 14px;
   line-height: 18px;
   text-align: left;
   margin-top: 0px;
 }
 .bgplain {
   background-color: #ffffff;
   border: 1px solid #efe9b2;
   padding: 10px;
   margin-bottom: 20px;
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
 }
 .goldcss-selector {
   background: linear-gradient(177deg, #7b5c24, #c5bd51, #7dca52);
   background-size: 600% 600%;
   -webkit-animation: AnimationName 5s ease infinite;
   -moz-animation: AnimationName 5s ease infinite;
   animation: AnimationName 5s ease infinite;
   color: #000000;
   border-radius: 12px;
   border: 1px solid #efe9b2;
   padding: 20px;
   padding-top: 40px;
   padding-bottom: 20px;
   height: 100%;
   width: 100%;
   min-height: 240px;
   align-self: flex-end;
   font-size: 14px;
   line-height: 18px;
   text-align: left;
   margin-top: 0px;
 }
 @-webkit-keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 @-moz-keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 @keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 .modal-backdrop {
   background: linear-gradient(177deg, #7b5c24, #c5bd51, #7dca52);
   background-size: 600% 600%;
   -webkit-animation: AnimationName 5s ease infinite;
   -moz-animation: AnimationName 5s ease infinite;
   animation: AnimationName 5s ease infinite;
   z-index: 999999;
 }
 @-webkit-keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 @-moz-keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 @keyframes AnimationName {
   0% {
     background-position: 49% 0%
   }
   50% {
     background-position: 52% 100%
   }
   100% {
     background-position: 49% 0%
   }
 }
 .list li {
   padding-top: 10px;
 }
 /**************************** font ****************************/
 .footer {
   text-transform: none;
   font-size: 11px;
   line-height: 14px;
   margin-bottom: 60px;
 }
 .footertext a {
   color: #c8c8c8;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
   text-decoration: none;
   padding: 5px;
 }
 .footertext a:hover, .footertext a:active, .footertext a:focus {
   color: #c8c8c8;
   outline: none;
   text-decoration: none;
 }
 .title {
   position: relative;
   display: block;
   text-align: center;
   padding-top: 30px;
   margin: 3px auto;
   font-family: 'Marcellus', 'Noto Sans Thai Looped', sans-serif;
   font-size: 50px;
   line-height: 72px;
 }
 .title:before {}
 /*.title:after {
    border-left: 1px solid black;
    content: "";
    display: block;
    height: 67px;
    left: 32px;
    position: absolute;
    top: 123px;
    width: 1px;
    z-index: 0;
}*/
 .header {
   font-family: 'Krub', sans-serif;
   font-size: 34px;
   line-height: 38px;
   text-transform: uppercase;
   font-weight: 400;
 }
 .subheader {
   font-family: 'Krub', sans-serif;
   font-size: 20px;
   line-height: 26px;
   font-weight: 400; 
 }
 
 .textwrap {
   font-family: 'Krub', 'Sarabun', sans-serif;
   letter-spacing:.1em;
   font-weight: 700;
   margin-left: auto;
   margin-right: auto;
   /*  margin-top: 50px; */
   color: #FFFFFF;
 }
 .textwrap .title {
   font-size: 48px;
   line-height: 60px;
   margin-top: -5px;
 }
 .textwrap .text {
   color: rgba(255, 255, 255, 0.1);
   font-size: 34px;
   line-height: 40px;
   text-transform: uppercase;
   letter-spacing: .04em;
   background-size: cover;
   background-image: url(../images/front3.png);
   -webkit-background-clip: text;
   background-position: right top; 
   text-shadow: 1px 1px 5px rgba(91, 63, 13, 0.2);
 }
 
 .small {
   font-size: 11px;
   line-height: 16px;
 }
 
 .copy {
   font-size: 11px;
   line-height: 14px;
   letter-spacing: .03em;
 }
 
 .shadowbox {
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
 }
 .shadowtop {
   -webkit-box-shadow: inset 0 10px 10px -10px rgba(99, 99, 99, 0.5);
   -moz-box-shadow: inset 0 10px 10px -10px rgba(99, 99, 99, 99.5);
   box-shadow: inset 0 10px 10px -10px rgba(99, 99, 99, 0.5);
 }
 .rounded-circle {
   border: 2px solid #ffffff;
   width: 120px;
   height: 120px;
   object-fit: cover;
   border-radius: 50%;
   margin-bottom: 0px;
   margin-left: 10px;
   margin-right: auto;
 }
 

 .swiper-pagination {
   position: absolute;
   margin-top: 70px;
 }
 .swiper-pagination-bullet {
   margin-top: 40px;
   width: 12px;
   height: 12px;
   display: inline-block;
   border-radius: 100%;
   background: #bda72c;
   opacity: 0.4;
 }
 .swiper-pagination-bullet-active {
   opacity: 1;
   background: #d5d5d5;
 }
 .borderschedulebreak {
   padding: 10px;
   padding-top: 20px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   /*	border: 1px solid rgba(0, 0, 0, 0.1); */
   background-image: linear-gradient(to top, #9b7c14, #ad9231, #bea94b, #d0c065, #e2d77f);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   text-decoration: none;
   margin-left: auto;
   margin-right: auto;
   border-radius: 12px;
   text-align: left;
   margin-bottom: 10px;
   color: #000000;
 }
 .description {
   width: 100%;
 }
 .lineleft {
   border-left: 2px #baaba6 dotted;
   padding-left: 0px;
   height: 70%;
 }
 .lineleft2 {
   border-bottom: 0px #F7941D dotted;
   padding-left: 10px;
 }
 .lineleft3 {
   border-left: 1px #7a5c3e solid;
   padding-left: 10px;
 }
 .lineleft4 {
   border-left: 1px #7a5c3e solid;
   padding-left: 10px;
 }
 .flag {
   height: 20px;
   margin-top: 10px;
 }
 .bw {
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
 }
 /**************************** tablet font ****************************/
 @media (max-width:1680px) {
 
 }
 @media (max-width:1024px) {
   .bggold {
     min-height: 350px;
   }
 
 }
 /**************************** tablet font ****************************/
 @media (max-width:768px) {

 
   .lineleft2 {
     border-left: 2px #bcb0ae dotted;
     background-color: #f6eee0;
     color: #f6eee0;
     padding-left: 10px;
   }
 }
 /**************************** mobile font ****************************/
 @media (max-width:512px) {
	    body {
     font-size: 16px;
     line-height: 20px;
   }
   .container-fluid {
     font-size: 16px;
     line-height: 20px;
   }
   .header {
     font-size: 22px;
     line-height: 26px;
   }
   .subheader {
     font-size: 16px;
     line-height: 20px;
   }
 
   .lineleft {
     border-left: 1px solid rgba(0, 0, 0, .2);
   }
   .swiper-pagination-bullet {
     width: 15px;
     height: 15px;
   }
   .lineleft4 {
     border-left: 0px #7a5c3e solid;
     padding-left: 0px;
   }
   .textwrap {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     margin-bottom: 10px; 
   }
 
   .textwrap .text {
     font-size: 24px;
     line-height: 26px;
     font-weight: 900;
     background-position: right top;
	     -webkit-background-clip: text;
/*   background-image: url(../images/gold.jpg);*/
   background-image: url(../images/front3.png);
   background-size: cover;
   }
 }
 /**************************** small mobile font ****************************/
 @media (max-width:214px) {
   body {
     font-size: 12px;
     line-height: 16px;
   }
   .title {
     font-size: 20px;
     line-height: 22px;
   }
   .header {
     font-size: 16px;
     line-height: 18px;
   }
   .subheader {
     font-size: 14px;
     line-height: 18px;
   }
   .small {
     font-size: 11px;
     line-height: 12px;
   }
   .rounded-circle {
     margin-top: 20px;
     width: 60px;
     height: 60px;
     margin-bottom: 10px;
   }
 }
 /**************************** element ****************************/
 .prevent-select {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
 .img-fluid {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
 img {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
 .datetext {
   width: 250px;
   margin-top: 20px;
   margin-bottom: 10px;
 }
 hr.line {
   width: 80%;
   border-bottom: 4px #F7941D dotted;
   background-color: #f6eee0;
   color: #f6eee0;
   margin-left: auto;
   margin-right: auto;
 }
 hr.grey {
   width: 100%;
   background-color: #d9d9d9;
   height: 2px;
   margin: 0px;
 }
 .thumbnails {
   overflow: hidden;
   display: block;
 }
 .box {
   font-family: 'Krub', 'Sarabun', sans-serif;
   border: 1px solid rgba(255, 255, 255, .2);
   padding: 10px;
   margin-bottom: 30px; 
   background-color: rgba(255, 255, 255, .4);
  border-radius: 22px; border-bottom-right-radius: 0px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;	    
	 font-size:16px;  
background: linear-gradient(178deg,rgba(255, 255, 255, .9) 0%, rgba(242, 228, 206, .4) 100%); 
 }
 .box2 {
   font-family: 'Krub', 'Sarabun', sans-serif;
   border: 1px solid rgba(255, 255, 255, .2);
   padding: 10px;
   margin-bottom: 30px; 
   background-color: rgba(255, 255, 255, .4);
   border-radius: 22px; border-bottom-right-radius: 0px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;	    
	 font-size:16px; 
 }
 .boxspeaker {
   font-family: 'Krub', 'Sarabun', sans-serif;
   border: 1px solid rgba(255, 255, 255, 1);
   padding: 10px;
   margin-bottom: 30px; 
   background-color: rgba(255, 255, 255, .8);
   border-radius: 22px; border-bottom-right-radius: 0px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;	    
	 font-size:16px; 
	 width: 100%;
 }

 .namefront {
   width: 600px;
   margin-top: 20px;
 }
 /**************************** mobile element ****************************/
 @media (max-width:768px) {
   .namefront {
     width: 600px;
   }
 }
 @media (max-width:512px) {
   .namefront {
     width: 90%;
   }
 .box {     
	 font-size:14px; 
 }
	 
 }
 /**************************** small mobile element ****************************/
 @media (max-width:214px) {
   .namefront {
     width: 200px;
   }
   .datetext {
     width: 120px;
   }
 }
 /**************************** button ****************************/
 .enter {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   width: 60px;
   font-weight: 200;
   padding: 3px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 12px;
   line-height: 16px;
   text-align: center;
   border: 1px solid #621D12;
   border-radius: 6px;
   background-color: rgba(255, 255, 255, .2);
   color: #621D12;
   text-decoration: none; 
 }
 .enter:hover {
   color: #ffffff;
   text-decoration: none;
   background-color: rgba(0, 0, 0, .6);
 }
 .enter:active {
   color: #ffffff;
   text-decoration: none;
   background-color: rgba(0, 0, 0, .6);
 }
 .more {
   text-transform: uppercase;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-weight: 200;
   padding: 5px;
   font-size: 11px;
   line-height: 14px;
   text-align: center;
   border: 1px solid #363f82;
   background-color: #363f82;
   color: #ffffff;
   text-decoration: none;
   margin-bottom: 20px;
   border-radius: 0px;
   width: 120px;
   margin-right: auto;
   margin-left: auto;
 }
 .more:hover {
   color: #ffffff;
   text-decoration: none;
   background-color: #cb8c2a;
   border: 1px solid rgba(255, 255, 255, 1);
 }
 .more:active {
   color: #ffffff;
   text-decoration: none;
   background-color: #cb8c2a;
   border: 1px solid rgba(255, 255, 255, 1);
 }
 .moreoutline {
   text-transform: uppercase;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-weight: 400;
   padding: 3px;
   font-size: 10px;
   line-height: 12px;
   text-align: center;
   border: 1px solid #e4d5a4;
   background-color: #ffffff;
   color: #9b7c14;
   text-decoration: none;
   margin-top: 20px;
   border-radius: 0px;
   width: 70px;
 }
 .moreoutline:hover {
   color: #000000;
   text-decoration: none;
   background-color: #9b7c14;
   border: 1px solid #e4d5a4;
 }
 .moreoutline:active {
   color: #000000;
   text-decoration: none;
   border: 1px solid #e4d5a4;
 }
 @media (max-width:390px) {
   .enter3 {
     font-size: 12px;
     line-height: 14px;
   }
 }
 /**************************** others ****************************/
 .centered {
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 .list li {
   padding-bottom: 5px;
   margin-left: -15px;
 }
 .pagination {
   display: inline-block;
   margin-bottom: 20px;
 }
 .pagination a {
   color: black;
   float: center;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color .3s;
   border: 1px solid rgba(0, 0, 0, .4);
   margin: 0 4px;
 }
 .pagination a.active {
   background-color: rgba(0, 0, 0, .4);
   color: white;
   border: 1px solid rgba(0, 0, 0, .4);
 }
 .pagination a:hover:not(.active) {
   background-color: rgba(0, 0, 0, 1);
   color: white;
 }
 .tooltip-inner {
   background-color: #363f82;
 }
 .tooltip.bs-tooltip-right .tooltip-arrow::before {
   border-right-color: #363f82 !important;
 }
 .tooltip.bs-tooltip-left .tooltip-arrow::before {
   border-left-color: #363f82 !important;
 }
 .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
   border-bottom-color: #363f82 !important;
 }
 .tooltip.bs-tooltip-top .tooltip-arrow::before {
   border-top-color: #363f82 !important;
 }
 .zoom {
   transform: scale(1, 1);
   transition: transform .2s; /* Animation */
 }
 .zoom:hover {
   transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
   moz-transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -o-transform: scale(1.05);
   -ms-transform: scale(1.05);
   transform: scale(1.05);
 }
 .fadeIn {
   transition: transform .4s; /* Animation */
 }
 .fadeOut {
   transition: transform .4s; /* Animation */
 }
 .form-group input {
   border: none;
   border-bottom: 1px solid #d7d7d7;
   border-radius: 0px;
   background-color: rgba(255, 255, 255, .4);
   padding: 10px;
   margin-right: 10px;
   margin-top: 20px;
   border-radius: 3px;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   color: #000000;
   width: 100%;
   font-size: .9rem;
 }
 ::placeholder {
   color: #898a8b;
   opacity: 1; /* Firefox */
 }
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: 12px;
   color: #898a8b;
 }
 ::-ms-input-placeholder { /* Microsoft Edge */
   font-size: 12px;
   color: #898a8b;
 }
 .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   font-size: 12px;
   color: #898a8b;
   opacity: 1; /* Firefox */
 }
 .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: 12px;
   color: #898a8b;
 }
 .form-control::-ms-input-placeholder { /* Microsoft Edge */
   color: #898a8b;
 }
 /******************* VDO ***********************/
 video {
   height: auto;
   width: 100%;
 }
 .video-container {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   height: 0;
 }
 .video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 .video-background {
   margin: 0px;
   padding: 0px;
 }
 .soundcon {
   top: 50%;
   z-index: 9;
   position: absolute;
   margin-left: 10px;
 }
 #unmuteButton {
   width: 60px;
   display: none;
 }
 #muteButton {
   width: 60px;
 }
 @media (max-width:512px) {
   .soundcon {
     top: 25%;
   }
   #unmuteButton {
     width: 40px;
   }
   #muteButton {
     width: 40px;
   }
 }
 .textmarquee {
   font-family: 'Noto Sans Thai Looped', sans-serif;
   font-size: 24px;
   padding: 10px;
   color: #FFFFFF;
 }
 @media (max-width:512px) {
   .textmarquee {
     font-size: 11px;
     padding: 5px;
   }
 }
 .textani {
   background: linear-gradient(to right, #685410 20%, #ad9231 30%, #bea94b 70%, #e2d77f 80%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
   background-size: 500% auto;
   animation: textShine 5s ease-in-out infinite alternate;
 }
 @keyframes textShine {
   0% {
     background-position: 0% 50%;
   }
   100% {
     background-position: 100% 50%;
   }
 }
 .people {
   width: 150px;
   margin-top: 20px;
 }
 
 .peoplename {
   font-size: 14px;
   line-height: 18px;
   margin-top: 5px;
   margin-bottom: 5px;
   font-weight: 600; 
 }
.bio
{
	width: 70px;
	margin-bottom: 10px;
	margin-top: 10px;
}
 @media (max-width:1024px) {
   .swiper-button-white {
     height: 90px;
     margin-top: 10px;
   }
 }
 @media (max-width:768px) {
   .swiper-button-white {
     margin-top: -60px;
     height: 90px;
   }
 }
 @media (max-width:512px) {
   .swiper-button-white {
     margin-top: -120px;
     height: 90px;
   }
	    .people {
     width: 100px;
   }
 
   .peoplename {
     margin-top: 0px;
   }
	 
 }
 @media (max-width:360px) {
   .swiper-button-white {
     display: none;
   }
 }


.f400
{
	font-weight: 400;
}

.f600
{
	font-weight: 600;
}