@font-face {
    font-family: 'Kanit';
    src: url('../fonts/kanit-regular-webfont.woff2') format('woff2'), url('../fonts/kanit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.crisp-client .cc-kv6t[data-full-view=true] .cc-1xry .cc-unoo {
 
    bottom: 85px!important;
 
}
.cc-unoo {
 
    bottom: 85px!important;
 
}
.webp body {
    background-image: url(../images/bg.webp);
}
.no-webp body {
	background-image: url(../images/bg.png);
}
body {
    color: #fff;
    height: auto;
}

.webp .page {
    background-image: url(../images/bg-page.png);
}
.no-webp .page {
    background-image: url(../images/bg-page.webp);
}

.page {
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.linetop {
    height: 5px;
    background: rgb(19, 16, 10);
    background: linear-gradient(90deg, rgba(101, 67, 2, 1) 0%, rgba(247, 201, 114, 1) 15%, rgba(100, 66, 2, 1) 30%, rgba(247, 201, 114, 1) 59%, rgba(100, 66, 2, 1) 77%, rgba(247, 201, 114, 1) 89%, rgba(100, 66, 2, 1) 100%);
}

.bg-dark {
    padding-top: 55px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(59, 59, 59, 1) 51%, rgba(0, 0, 0, 1) 100%);
}

.contact {
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
    width: 90%;
    left: 5%;
    border-radius: 0px 0px 10px 10px;
    background: rgb(101, 67, 2);
    background: linear-gradient(90deg, rgba(101, 67, 2, 1) 0%, rgba(247, 201, 114, 1) 15%, rgba(100, 66, 2, 1) 30%, rgba(247, 201, 114, 1) 59%, rgba(100, 66, 2, 1) 77%, rgba(247, 201, 114, 1) 89%, rgba(100, 66, 2, 1) 100%);
}

.logo {
    width: 70%;
}

header video {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-12%, -65%);
}

header {
    position: relative;
    height: auto;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
    justify-items: center;
    align-items: center;
}

.topic {
    font-family: 'kanit';
    font-size: 22px;
    color: #fac445;
}

.slide {
    position: relative;
    overflow: hidden;
    margin-top: 120px;
}

.navbar-brand {
    width: 225px;
}

.btn-top {
    position: relative;
    top: -40px;
    width: 100%;
}

.btn-top img {
    margin-bottom: 10px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgb(255 255 255) !important;
}

.navbar-nav {
    font-family: 'Kanit';
}

.bg-glod {
    background: linear-gradient(to right, rgb(101 67 2) 0%, rgb(247 201 114) 12%, rgb(100 66 2) 25%, rgb(247 201 114) 54%, rgb(105 72 9) 77%, rgb(247 201 114) 88%, rgb(101 67 2) 99%);
    border-radius: 20px;
    padding: 3px;
}

.box-bg {
    background-color: #000;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
}

.prakad {
    background: linear-gradient(to right, rgb(101 67 2) 0%, rgb(247 201 114) 12%, rgb(100 66 2) 25%, rgb(247 201 114) 54%, rgb(105 72 9) 77%, rgb(247 201 114) 88%, rgb(101 67 2) 99%);
    border-radius: 10px 10px 0px 0px;
    width: 95%;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0 auto;
    height: 40px;
}

marquee {
    background-color: #000000b8;
    border-radius: 10px 10px 0px 0px;
    padding-top: 5px;
}

.box-intro {
    position: inherit;
}

.main-detail {
    position: relative;
    top: -30px;
}

.txt-g {
    -webkit-background-clip: text;
    position: relative;
    font-family: 'Kanit';
    display: inline-block;
    line-height: 1.5!important;
    text-align: center !important;
    margin-bottom: 20px;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 4px #000);
    background-image: url(data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…xsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #AD710A), color-stop(18%, #F7C972), color-stop(31%, #996B1C), color-stop(49%, #F7C972), color-stop(64%, #B57B16), color-stop(77%, #F7C972), color-stop(99%, #AD7B25));
    background-image: -moz-linear-gradient(top, #AD710A 0, #F7C972 18%, #996B1C 31%, #F7C972 49%, #B57B16 64%, #F7C972 77%, #AD7B25 99%);
    background-image: -webkit-linear-gradient(top, #AD710A 0, #F7C972 18%, #996B1C 31%, #F7C972 49%, #B57B16 64%, #F7C972 77%, #AD7B25 99%);
    background-image: -o-linear-gradient(top, #AD710A 0, #F7C972 18%, #996B1C 31%, #F7C972 49%, #B57B16 64%, #F7C972 77%, #AD7B25 99%);
    background-image: -ms-linear-gradient(top, #AD710A 0, #F7C972 18%, #996B1C 31%, #F7C972 49%, #B57B16 64%, #F7C972 77%, #AD7B25 99%);
    background-image: linear-gradient(top, #AD710A 0, #F7C972 18%, #996B1C 31%, #F7C972 49%, #B57B16 64%, #F7C972 77%, #AD7B25 99%);
    font-weight: 700;
}

.box-sp {
    width: 85%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    transform: skew(-10deg);
    background: #000000d4;
    padding: 10px;
}

.step {
    width: 98%;
    margin: 0 auto;
}

.boxmb {
    background: linear-gradient(to bottom, rgb(101 67 2) 0%, rgb(247 201 114) 12%, rgb(177 129 35) 25%, rgb(247 201 114) 54%, rgb(195 147 55) 77%, rgb(247 201 114) 88%, rgb(116 81 15) 99%);
    border-radius: 20px;
    margin-bottom: 10px;
}

#step,
#why,
#news {
    margin-top: 50px;
}

.picent {
    width: 100%;
}

.list li {
    margin-bottom: 15px;
    font-family: 'kanit';
    font-size: 18px;
}

.box-news {
    background-color: #282828cf;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.box-news h6 {
    color: #e6b954;
    font-family: 'kanit';
    font-size: 18px;
    margin-bottom: 10px;
}

hr {
    border-top: 1px solid rgb(86 80 80 / 66%);
}

footer {
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(59, 59, 59, 1) 46%, rgba(59, 59, 59, 1) 57%, rgba(0, 0, 0, 1) 100%);
    padding-bottom: 20px;
    font-family: 'kanit';
}

#why li {
    list-style: none;
}

.menu-foot {
    padding-left: 70px;
}

.f-topic {
    padding-top: 20px;
    font-size: 18px;
}

.t-step {
    color: #d5951a;
    font-size: 18px;
    font-family: 'kanit';
    background-color: #000;
    border: 2px solid #dfad55;
    border-radius: 20px;
    padding: 5px;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 20px
}

.main {
    margin-top: 120px;
    margin-bottom: 30px;
}

.bd {
    background-color: #000000b8;
    border-radius: 10px;
    box-shadow: 1px 1px 8px 4px #000000bd
}

.content {
    padding: 10px;
    font-family: 'tahoma' !important;
    font-size: 15px;
    color: #e5e5e5;
}

.sh {
    box-shadow: 1px 1px 8px 4px #000000bd
}

.pad-bt {
    margin-top: 10px;
    margin-bottom: 10px;
}

.pad-ban {
    margin-top: 2px;
    margin-bottom: 2px;
}

.corner {
    border-radius: 10px;
}

.sh-ban {
    box-shadow: 1px -1px 10px 0px #000000bd;
}

a {
    color: #eebb5b !important;
}

.btn-more {
    padding: 10px;
    border-radius: 15px;
    color: #fff !important;
    background: linear-gradient(90deg, rgb(131 91 33) 0%, rgba(245, 219, 164, 1) 16%, rgb(187 142 80) 52%, rgba(245, 219, 164, 1) 77%, rgb(131 91 33) 100%)!important;
    box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    color: #000!important;
    border: 2px solid #946e35!important;
    text-align: center;
}

.tp-pro {
    font-size: 22px;
    font-family: 'Kanit';
}

.cdt {
    color: #c7a76f;
    font-family: 'Kanit';
    font-size: 16px;
    font-weight: bold;
}

.dt-pro {
    padding: 5px 20px 20px 20px;
    border: 2px solid #222222;
    border-radius: 20px;
    background-color: #000000;
    margin-bottom: 20px;
}

.hide {
    display: none;
}

.webp #navfixright2  {
    background-image: url(../images/bg-foot.png);
}
.no-webp #navfixright2  {
    background-image: url(../images/bg-foot.webp);
}


#navfixright2 {
    background-position: center;
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
    text-align: center;
    padding-top: 5px;
}

div#navfixright2 .nav-btn2,
div#navfixright2 .nav-btn3 {
    position: absolute;
    top: -36px;
    bottom: 36px;
    width: 173px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 36px;
    cursor: pointer;
    color: #fff;
    display: block
}

div#navfixright2 .nav-btn2 {
    background-image: url(../images/tab-open.png);
}

div#navfixright2 .nav-btn3 {
    background-image: url(../images/tab-close.png);
}

.popup-login {
    /* background: linear-gradient(90deg, rgb(131 91 33) 0%, rgba(245,219,164,1) 16%, rgb(187 142 80) 52%, rgba(245,219,164,1) 77%, rgb(131 91 33) 100%)!important;
   */
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(59, 59, 59, 1) 51%, rgba(0, 0, 0, 1) 100%);
    box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    color: #fff!important;
    border: 2px solid #946e35!important;
    padding: 0px 30px;
    border-radius: 20px;
}

.modal-header {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 0px;
    position: absolute;
    z-index: 999;
    right: 0;
}

.logologin {
    /*  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(59, 59, 59, 1) 51%, rgba(0, 0, 0, 1) 100%);
border: 2px solid #94641c;
    border-radius: 70px;*/
}

.btn-login {
    background: linear-gradient(90deg, rgb(131 91 33) 0%, rgba(245, 219, 164, 1) 16%, rgb(187 142 80) 52%, rgba(245, 219, 164, 1) 77%, rgb(131 91 33) 100%)!important;
    box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    color: #000!important;
    border: 2px solid #946e35!important;
}

.form-control {
    color: #ffffff;
    background-color: #101010;
    background-clip: padding-box;
    border: 2px solid #000000;
}

.input-group-text {
    color: #533a08;
    background: linear-gradient(359deg, rgb(131 91 33) 0%, rgba(245, 219, 164, 1) 16%, rgb(187 142 80) 52%, rgba(245, 219, 164, 1) 77%, rgb(131 91 33) 100%)!important;
    border: 2px solid #7f5f26;
}

.box-c div.img-n {
    border-radius: 10px 10px 0px 0px;
    display: block;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.box-c {
    border-radius: 10px;
    margin-top: 2px;
    color: #fff;
}

.box-c div.img-n:after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 45%;
}

.bg-con {
    background-color: #000000c4;
    padding: 2px 20px;
    border-radius: 20px;
    font-weight: 600;
}

.hl {
    color: #dda130;
}

.bd-vd {
    border-radius: 15px;
}

.zoom {
    transition: transform .5s;
    /* Animation */
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.1);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    cursor: pointer;
}
.pp{
	  cursor: pointer;
}

.link-all {
    background-color: rgb(0 0 0) !important;
    padding: 2px !important;
    border: 2px solid #e7a31e;
    border-radius: 20px;
    float: right;
    /* color: #185A05 !important; */
    text-shadow: none !important;
    font-family: 'Tahoma' !important;
    font-size: 12px !important;
}

.page-item.active .page-link {
    background-color: #694604;
    border-color: #a68249;
}

.page-link,
.page-item.disabled .page-link {
    background-color: #8c652c;
    border-color: #a68249;
}
  .hh{
        display: block;
    line-height: 5px;
    }

@media (min-width: 450px) {
    div#navfixright2 .nav-btn2,
    div#navfixright2 .nav-btn3 {
        /* right: 30%;*/
    }
}

@media (min-width: 450px) {
    header video {
        position: absolute;
        z-index: 0;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
    }
    .btn-top {
        top: -60px;
    }
}
@media (min-width: 550px) {

    .hh{
        display:none
    }
}


@media (min-width: 768px) {
    .btn-top {
        top: -90px;
    }
    .main-detail {
        position: relative;
        top: -70px;
    }
    .step-rg {
        background: linear-gradient(to bottom, rgb(101 67 2) 0%, rgb(247 201 114) 12%, rgb(177 129 35) 25%, rgb(247 201 114) 54%, rgb(195 147 55) 77%, rgb(247 201 114) 88%, rgb(116 81 15) 99%);
        border-radius: 20px;
    }
    .boxmb {
        background: none;
        border-radius: 0px;
        margin-bottom: 0px;
    }
    .box-sp {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .hide {
        display: inline;
        margin-left: 10px;
    }
    .contact {
        width: 70%;
        left: 15%;
    }
}

@media (min-width: 992px) {
    .logo-pc {
        position: relative;
        top: -20px;
    }
    .navbar-expand-lg .navbar-nav {
        position: relative;
        top: -25px;
    }
    #menu.scrolled {
        /* background: #0a0a0ade !important;*/
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.9023984593837535) 0%, rgb(0 0 0 / 92%) 54%, rgb(0 0 0 / 76%) 86%, rgb(0 5 6 / 0%) 98%);
        height: 100px;
    }
    .bg-dark {
        padding-top: 10px;
    }
    .contact {
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        text-align: center;
        padding: 5px;
        width: 480px !important;
        float: unset;
        right: 0%;
        left: unset;
        top: 0px;
        border-radius: 0px 0px 0px 10px;
        background: rgb(101, 67, 2);
        background: linear-gradient(90deg, rgba(101, 67, 2, 1) 0%, rgba(247, 201, 114, 1) 15%, rgba(100, 66, 2, 1) 30%, rgba(247, 201, 114, 1) 59%, rgba(100, 66, 2, 1) 77%, rgba(247, 201, 114, 1) 89%, rgba(100, 66, 2, 1) 100%);
    }
    .bg-dark {
        background: none !important;
        width: 100%;
        margin: 0 auto;
    }
    .btn-top {
        top: -120px;
        width: 50%;
    }
    .navbar-brand {
        width: 255px;
    }
    .logo {
        width: 100%;
    }
    .main-detail {
        position: relative;
        top: -100px;
    }
    .picent {
        width: 110%;
        position: relative;
        top: -25px;
        left: -60px;
    }
    #why {
        margin-top: 80px;
    }
    .menu-foot {
        padding-left: 120px;
    }
    .pad {
        padding: 0px 5px 0px 5px;
    }
}

@media (min-width: 1040px) {
    .nav-link {
        padding-left: 12px !important;
        padding-right: 12px!important;
    }
}

@media (min-width: 1130px) {
    .nav-link {
        padding-left: 17px !important;
        padding-right: 17px!important;
    }
}

@media (min-width: 1200px) {
    .bg-dark {
        width: 100%;
        margin: 0 auto;
    }
    .btn-top {
        top: -130px;
        width: 500px;
    }
    .picent {
        width: 115%;
        position: absolute;
        top: -40px;
        left: -55px;
    }
    .dt-csn {
        padding-top: 20px;
    }
    .nav-link {
        padding-left: 20px !important;
        padding-right: 20px!important;
    }
}

@media (min-width: 1300px) {
    .picent {
        width: 125%;
        position: absolute;
        top: -40px;
        left: -55px;
    }
    .navbar-brand {
        width: 300px;
    }
    .bg-dark {
        width: 95%;
    }
}

@media (min-width: 1400px) {
    .bg-dark {
        width: 90%;
    }
}

@media (min-width: 1500px) {
    .bg-dark {
        width: 80%;
    }
}