@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap');


body,html{
    margin: 0px;
    padding: 0px;
   font-family: 'Sarabun', sans-serif;
   font-weight:400;   
   color: #000;

}
*, *::before, *::after {
    box-sizing: border-box;
}

a{
color: #000;
}

p {
    font-size: 28px;
    line-height: 49px;
    font-weight: 400;
    text-align: left;
    color: #000;
}

.section{
  margin-top:135px;
}
.containerc{
  width:88%;
  margin:auto;
  max-width:1920px;
}
.containerd{
  width:80%;
  margin:auto;
  max-width:1920px;
}

#toTop {
    position: fixed;
    right: 15px;
    bottom: 30px;
    margin: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
        width: 35px;
    cursor: pointer;
    background-color: #33a6de;   
    height: 35px;
        border-radius: 35px;
        text-align: center;
}
#toTop i {
    font-size: 18px;
    color: #fff;
     line-height: 32px;
    padding-bottom: 3px;
}
.shows {
    opacity: 1!important;
    visibility: visible!important;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
#svideo {
  width: 100%;
    height: 100%;
  object-fit: cover;
  object-position: 0% 0%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.mhk497 {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0.69) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.69) 100%);
    height: 100vh;
    min-height: 300px;
}
.tqj508 {
    position: absolute;
    bottom: 7%;
    display: inline-block;
    text-align: center;
    left: 0%;
    width: 100%;
    color: #fff;
}
#headerx {
    position: absolute;
    width: 100%;
    z-index: 1;
}
.cftfdmi288{
    max-width: 88%;
    margin: auto;    
    display: flex;
    justify-content: space-between;
    align-items: center;
        margin-top: 35px;
}
.logo{
    max-width: 335px;
}
.tmenu .nav-list{
display: flex;
    list-style: none;
    justify-content: flex-end;
    margin-bottom: 0px;
    padding-left: 0px;
}
.tmenu .nav-link {
    font-size: 24px;
    margin-left: 48px;
    color: #fff;
        position: relative;
        cursor: pointer;
}
.tmenu .nav-link::before {
    bottom: -17%;
    height: 5px;
    width: 0%;
    left: 0%;
    content: '';
    position: absolute;
    background-color: #33a6de;
    transition: 0.3s ease all;
}
.tmenu .nav-link:hover::before {
    width: 40%;
    transition: 0.3s ease all;
}
.menubtn {
    background-color: #33a6de;
    padding: 5px 50px;
    border-radius: 6px;
    transition: all .3s;
}
.menubtn::before{
content: none!important;
}
.menubtn:hover{
background-color: #2e3483;
}
.knb125 {
    font-size: 58px;
    font-weight: 600;
    text-shadow: rgba(0, 0, 0, 0.81) 0px 2px 7px;
}
.knb125 div {
    font-size: 27px;
    font-weight: 400;
    margin-bottom: 28px;
}
.vwf687 {
    padding: 6px 36px;
    border: 2px solid #fff;
    display: inline-block;
    background-color: transparent;
    border-radius: 8px;
    font-size: 24px;
    cursor: pointer;
    transition: all .3s;
}
.vwf687:hover{
    background-color: #33a6de;
    border: 2px solid #33a6de;
}
.masryl285{
     display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.maskas186 {
    background: linear-gradient(to right, #2e3182 0%,#33a5dd 100%);
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.maskas186 img{

}
.maswsu252 {
    padding-left: 5%;
}
h2 {
    position: relative;
    font-size: 56px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 40px;
}
h2::before {
    bottom: -30%;
    height: 5px;
    width: 21%;
    left: 0%;
    content: '';
    position: absolute;
    background-color: #33a6de;
    transition: 0.3s ease all;
}
.mashsi819::before {
    bottom: -30%;
    height: 5px;
    width: 21%;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    position: absolute;
    background-color: #33a6de;
    transition: 0.3s ease all;
}
.fulwidth{
width: 100%;
}
.masmfh554{
 width: 50%;
 margin: auto;
 text-align: center;
 line-height: 35px;
}
.maskrp053{
border: 2px solid #000;
}
.maskrp053:hover{
color: #fff;
}
.masttp801 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.masjnh984 {
    font-size: 25px;
    margin-top: 10px;
    font-weight: 600;
}
.masahl173{
    margin-top: -80px;
}
.masqwe747{
    margin-top: 227px;
}
.massbf349 {
    position: relative;
    width: 48%;
    display: inline-block;
}
.masaxz284 {
    position: absolute;
    top: -12%;
    left: -16%;
    width: 148px;
}
.masjhx757{
margin-top: 13%;
}
.masfeb645 {
    display: flex;
    justify-content: space-between;
        align-items: flex-start;
}
.maskxa479 {
    max-width: 83%;
    margin-top: 37px;
}
.masyoy526 {
    position: absolute;
    bottom: 0px;
    padding: 15px;
    left: 0px;
    color: #fff;
}
.masyoy526 .masttp801{
margin-bottom: 0px;
}
.masyoy526 .masjnh984{
margin-top: 0px;
}
.mastkk856 {
    display: flex;
    align-items: center;
}
.serlists {
    padding: 14px 0 14px 0;
    font-size: 36px;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    text-align: left;
    line-height: 28px;
    margin-left: 20px;
}
.serlists img {
    max-width: 37px;
    margin-right: 17px;
    display: inline-block;
    margin-top: 0px;
}
.serlists div {
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
}
.mascni293 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
        margin-top: 30px;
}
.massoe390 {
    width: 32%;
    margin-bottom: 30px;
}
.massoe390 img{
transition: all .3s;
}
.massoe390 img:hover{
opacity: 0.8;
}
.maslad840{
 display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.masyfr376 {
       width: 48%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 42px;
}
.maswtm314 {
    width: 238px;
}
.masiyw729 {
    width: 70%;
}
.masrrp712{
text-align: center
}
.masckn939 {
    width: 15%;
    display: inline-block;
    padding: 20px;
}
.contactform{
margin-top: 30px;
}
.contactform input, .contactform textarea{
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px 20px;
width: 100%;
border-radius: 40px;
}
.yzs360 {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    margin-top: 45px;
}
.yzs360 strong {
    display: block;
    font-size: 28px;
    margin-bottom: 22px;
}
.mastab594 {
    display: block;
    margin-bottom: 7px;
    font-size: 21px;
    margin-left: 15px;
    cursor: pointer;
    transition: all .3s;
}
.mastab594:hover {
    color: #33a6de;
    cursor: pointer;
}
.dmt888 {
    margin-top: 85px;
    font-size: 26px;
    font-weight: 600;
    width: 50%;
    display: inline-block;
}
.ppg {
    margin-bottom: 18px;
}
.cmr477 {
    max-width: 31px;
    display: inline-block;
    margin-right: 26px;
    filter: grayscale(1) brightness(0);
}
.tzg178{
padding: 30px 0px;
}
.massxv402 {
    padding-left: 5%;
}
.product-carousel{
border-radius: 12px;
overflow: hidden;
}
.product-carousel .owl-theme .owl-dots {
    left: initial;
    right: 5%;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #33a6de;
}
.masroa452{
font-size: 45px!important;
}
.masxds935{
background-size: cover;
}
.masyyd682 {
    position: absolute;
    top: -15%;    
    height: 23%;
    left: 50%;
    transform: translateX(-50%);
}
.masljv753 {
    padding: 30px;
    background: #c0eaff;
    border-radius: 16px;
        width: 28%;
}
.masglv802 {
    padding: 30px;
    background: #e5f6ff;
    border-radius: 16px;
    width: 67%;
}
.masmye792 {
    display: flex;
    justify-content: space-between;
}
.masxyh550{

}
.masnoy373{

}
.masyah392{

}
.masjkz172{

}
.masehd641{

}
.masjiq605{

}
.masjga760{

}
.masawm730{

}
.masqav949{

}
.masoxb962{

}
.masauh579{

}
.mastri618{

}
.masxts787{

}
.masrho991{

}
.masxay480{

}
.masvct338{

}
.masuax571{

}
.masjav928{

}
.maskea613{

}
.masdwy879{

}
.mashpr544{

}
.massqs849{

}
.masefd015{

}
.masgpk818{

}
.masokp264{

}
.mashaz214{

}
.masibc037{

}
.masxku731{

}
.masbhm304{

}
.masmbe376{

}
.masshq472{

}
.masqoc163{

}
.masrno863{

}
.masudv387{

}
.maskki023{

}
.masgti537{

}
.masvjc168{

}
.masahs428{

}
.maszqj054{

}
.masoqq465{

}
.masjcd756{

}
.masqxf576{

}
.masrfn670{

}
.masduw668{

}
.masrht558{

}
.masizn821{

}
.masnzk867{

}
.maslsy842{

}
.masazf710{

}
.maslpa086{

}
.mastbt282{

}
.maszpq070{

}
.maszjz373{

}
.masbgp193{

}
.masojo843{

}
.mascgt878{

}
.masfwn847{

}
.maszew025{

}
.masvax983{

}
.masdav666{

}
.massjw058{

}
.masiah008{

}
.maswsm667{

}
.masnmq105{

}
.masdyq978{

}
.masdpc900{

}
.masxjc778{

}
.masexm732{

}
.masvho391{

}
.masndo373{

}
.mascqh962{

}
.masnfq261{

}
.masavi869{

}

@media (max-width: 1600px) {
.logo {
    max-width: 235px;
}
.masqwe747 {
    margin-top: 175px;
}
.cftfdmi288 {
    margin-top: 20px;
}
.tmenu .nav-link {
    font-size: 17px;
    margin-left: 30px;
}
.menubtn {
    padding: 5px 35px;
}
.knb125 {
    font-size: 40px;
}
.knb125 div {
    font-size: 20px;
    margin-bottom: 26px;
    margin-top: 10px;
}
.vwf687 {
    font-size: 16px;
}
.section {
    margin-top: 90px;
}
h2 {
    font-size: 41px;
}
p {
    font-size: 18px;
    line-height: 31px;
}
.maskas186 img {
    max-width: 190px;
}
.masmfh554 {
    line-height: 22px;
}
.masjnh984 {
    font-size: 17px;
    margin-top: 8px;
}
.masttp801 {
    font-size: 28px;
    margin-bottom: 10px;
}
.masaxz284 {
    width: 95px;
}
.serlists img {
    max-width: 25px;
    margin-right: 10px;
}
.serlists {
    padding: 10px 0 10px 0;
    font-size: 25px;
    line-height: 23px;
    margin-left: 20px;
}
.maswtm314 {
    width: 170px;
}
.yzs360 strong {
    font-size: 23px;
    margin-bottom: 15px;
}
.mastab594 {
    margin-bottom: 7px;
    font-size: 17px;
    margin-left: 15px;
}
.dmt888 {
    margin-top: 40px;
    font-size: 20px;
    width: 100%;
}
.cmr477 {
    max-width: 22px;
    margin-right: 16px;
}
.tzg178 {
    font-size: 14px;
}
.masroa452 {
    font-size: 30px!important;
}
	
}

@media (max-width: 1300px) {
.serlists {
    padding: 8px 0 8px 0;
    font-size: 23px;
    line-height: 23px;
    margin-left: 20px;
}
.yzs360 strong {
    font-size: 20px;
}
.maskas186 img {
    max-width: 150px;
}
.masjnh984 {
    font-size: 16px;
}
.masttp801 {
    font-size: 16px;
}
p {
    font-size: 16px;
    line-height: 31px;
}
.vwf687 {
    font-size: 15px;
}
.contactform input, .contactform textarea {
    margin-bottom: 10px;
    padding: 7px 16px;
}
.tmenu .nav-link {
    font-size: 16px;
        padding-bottom: 5px;
}
.tmenu .nav-link::before {
    height: 3px;
}
.logo {
    max-width: 225px;
}
.knb125 div {
    font-size: 18px;
}
.serlists img {
    max-width: 22px;
}
.mastab594 {
    font-size: 15px;
}
	
}

@media (max-width: 1200px) {
.tmenu{
display: none;
}
#svideo {
    object-position: center;
}
	
}

@media (max-width: 1024px) {


	
}

@media (max-width: 990px) {
.knb125 {
    font-size: 35px;
    padding: 0px 20px;
}
.masryl285 {
    flex-direction: column;
}
.maskas186 {
    min-height: 300px;
    margin-bottom: 20px;
}
.masmfh554 {
    width: 100%;
}
.masqwe747 {
    margin-top: 65px;
}
.masahl173 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.mastkk856 {
    flex-direction: column;
    display: block;
}
.masfeb645 {
    flex-direction: column;
}
.masjhx757 {
    margin-top: 10%;
    margin-bottom: 80px;
}
.massbf349 {
    position: relative;
    width: 95%;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.masaxz284 {
    top: -5%;
    left: -6%;
}
.fshr53{
margin-top: 30px;
}
.massoe390 {
    width: 48%;
    margin-bottom: 30px;
}
.maslad840 {
    flex-direction: column;
}
.masyfr376 {
    width: 100%;
}
.masckn939 {
    width: 34%;
    padding: 20px;
}
.masroa452 {
    font-size: 23px!important;
}
.masyyd682 {
    position: initial;
    top: -15%;
    height: auto;
    height: 13%;
    left: 50%;
    transform: none;
    margin: 10px auto;
    display: block;
}
	
}
@media (max-width: 768px) {


}

@media (max-width: 600px) {
.maskas186 {
    margin-right: 15px;
    margin-left: 15px;
}
.section {
    margin-top: 60px;
}
.maswtm314 {
    width: 140px;
}
.masmye792 {
    display: block;
}
.masljv753 {
    width: 93%;
    margin: 0px auto 15px auto;
}
.masglv802 {
    width: 93%;
    margin: auto;
}

}

@media (max-width: 350px) {


	
}