@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&family=Roboto&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background:#fff;    
    font-size:15px;
    font-weight:normal;
    color:#111;
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}




/* start loder OK */
#preloader{
    background: #fff url("../images/loading1.gif") no-repeat center;
    background-size: auto;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 100;
}
/* end loder OK */









/*start manu OK */
nav{
    top: 0;
    width: 100%;    
    position: fixed;
    min-height: 70px;
    z-index: 10;
    /* background-image: linear-gradient(#7D7C7C, transparent); */
    /* background-image: linear-gradient(to right,transparent,rgba(255, 255, 255, 0.7)); */
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* transition: transform 0.7s; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    background-color: #fff;
   
    &:hover{
        background-color: #fff;
    }    
}
.nav-wrapper{
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    position: relative;
}
.bgColor{
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* transition: transform 0.7s;  */
    background-color: #fff;
}

.logo{
    display: flex;
    column-gap: 0.5rem;
}
.logo a{
    text-decoration: none;
    color: #930036;
    font-size: bold;
    font-size: 18px;
    font-weight: 900;
    transition: 0.5s;
    position: relative;
    align-self: center;

    &::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        top: 100%;
        left: 0;
        background: #0d023e;
        /* transition: transform 0.7s; */
        transform: scale(0);
        transform-origin: right;
    }
    &:hover::after{
        transform: scaleX(1);
        transform-origin: left;
    } 
}
.logo img{
    justify-content: center;
}
.logoBF .logoBF1{
    border-style: solid;
    border-width: 8px;
    border-color: #0d023e;  
    box-shadow: 1px 1px 3px grey; 
    width: 100%;
    height: 50%;
    transform: rotate(45deg);    
}
.logoBF .logoBF2{
    border-style: solid;   
    border-width: 8px;
    border-color: #930036; 
    box-shadow: 1px 1px 3px grey;
    width: 100%;
    height: 50%;
    transform: rotate(45deg);
}

.nav-menu{
    display: flex;
    list-style: none;
}
.nav-menu li{
    margin-left: 20px;
    margin-right: 20px;
}

.nav-menu li a:is(:link, :active, :visited){
    text-decoration: none;
    /* color: #95a5a6; */
    color: #333;
    transition: 0.5s;
    position: relative;
    font-size: 16px;

    &::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        top: 100%;
        left: 0;
        background: #930036;
        transition: transform 0.7s;
        transform: scale(0);
        transform-origin: right;
    }
    &:hover{
        color: #333;
    }
    &:hover::after{
        transform: scaleX(1);
        transform-origin: left;
    } 
}
.nav-menu li a:is(:link, :active, :visited).active{
    text-decoration: none;
    color: #333;
    transition: 0.5s;
    font-weight: bold;
}

.hamburger{
    display: none;
    cursor: pointer;
    position: absolute;
    right: 1rem;
}
.bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #333; 
} 
/*end manu OK */



/* start Back to Top OK */
#btt{
    padding: 1rem 1rem;    
    border: none;
    background-color: #333;
    color: #fff;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    border-radius: 15px;
    display: none;
    cursor: pointer;
}
/* end Back to Top */






/* strat background slide OK */
 .slider{
    position: relative;
    overflow: hidden;
    height: 95vh;
    width: 100vw; 
    /* top: 70px; */
    top: 0;
}
.slide{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.7s ease-in-out;
    object-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;

    justify-content: bottom;
    object-position: bottom;
}
.slide.current{
    opacity: 1;
}
.slide .contentS{
    position: absolute;
    bottom: 70px;
    left: -600px;
    opacity: 0;
    width: 600px;    
    color: #333;
    padding: 25px; 
    padding-left: 80px;
    border-radius: 0px 5px 50px 0px;    
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0.5px 0.5px 3px grey;
    
    /* background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); */
}
.slide .contentS h1{
    margin-bottom: 10px;
}
.slide.current .contentS{
    opacity: 1;
    transform: translateX(600px);
    transition: all 0.7s ease-in-out 0.7s;
} 
.arrow{
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 0;
    height: 0;
    size: 100px;
}
#arrow-left{
    left: 0;
    margin-left: 30px;
    color: #fff; 
}
#arrow-left:hover{
    text-shadow: 1px 1px 3px gray
}
#arrow-right{
    right: 0;
    margin-right: 30px;
    color: #fff; 
}
#arrow-right:hover{
    text-shadow: 1px 1px 3px gray
}

.slide:first-child{
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');     
} 
.slide:nth-child(2){
    background-image: url('../images/FT40x40 RIENGSAP BROWN_M_R1-2.jpg');
} 
.slide:nth-child(3){
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');
} 
.slide:nth-child(4){
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');
} 
.slide:nth-child(5){
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');
}  
.slide:nth-child(6){
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');
} 
.slide:nth-child(7){
    background-image: url('../images/FT60x60-SHANGRILA_G_R1-1.png');
} 
/* end background slide */






/* start scall between OK */
.paddingSection1{
    padding-top: 10vh;
}
.paddingSection2{
    padding-top: 5vh;
}
/* end scall between OK */







/* start show company OK */
.comshowBG{
    background-color:  #ecf0f1;
    padding: 2rem 0;
}
.conShow{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2,180px);
    gap: 1rem;
}
.conShow .conShowLeft{
    grid-row-start: 1;
    grid-row-end: 3;
    padding: 4rem 4rem;
    border-radius: 30px 0 30px 0px;
    border: 1px ridge #fff;
    box-shadow: 1px 1px 3px #fff;
}
.conShow .conShowLeft h3{
    padding-bottom: 1.5rem; 
    color: #930036;
}
.conShow .conShowLeft p{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.conShow .conShowLeft .conShowS{
    color: #930036;
    font-weight: 500;
    text-align: center;
}

.conShowRight{
    display: flex;
    gap: 1rem;
}
.conShowRight img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
    object-position: center;
    overflow: hidden; 
  
    &:hover{
        box-shadow: 1px 1px 3px gray;
    }
}
.conShowRight #conShowRight-img{
    border-radius: 30px 0 30px 0px;
}
/* end show company  OK */










/* start about us OK  */
.conMainAbout{
    display: grid;
    padding-top: 5rem;
}
.conAbout{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 300px 150px 250px; 
}

.conAboutSub1{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    object-fit: cover;
    overflow: hidden;
    position: relative; 
    padding-right: 1rem;
}
.conAboutSub1Overlay-top{
    display: flex;
    position: absolute;
    justify-content: space-between;
    text-align: center;
    align-content: center;    
    padding: 1rem;  
}
.conAboutSub1Overlay-top .cAlogo{
    max-width: 50px;
    height: auto;  
    object-fit: cover;  
    object-position: center;
    overflow: hidden;
}
.conAboutSub1 .cAimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
    border-radius: 30px 0px 0px 30px;
}
.conAboutSub1 img:hover{
    box-shadow: 1px 1px 3px gray;
    transition: 0.1s ease-in-out;
}

.conAboutSubText-1{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
    border-radius: 30px 0 0px 0px;
    border: 1px ridge #ecf0f1;
    box-shadow: 1px 1px 3px #ecf0f1;
}

.conAboutInfo .co{
    color: #930036;
    padding-top: 2rem;
}
.conAboutInfo p{
    margin: 1rem 0;
    font-size: 14px;
}
.conAboutSub2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;    
    border-radius: 0px 30px 30px 0px; 
}
.conAboutSub2 img:hover{
    box-shadow: 1px 1px 3px gray;
    transition: 0.1s ease-in-out;
}

.conAboutSub3{
    grid-column-start: 3;
    grid-column-end: 5;
    display: flex;
    padding-top: 1rem;
}
.conAboutSub3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;      
}
.conAboutSub3 img:hover{
    box-shadow: 1px 1px 3px gray;
    transition: 0.1s ease-in-out;
}
.conAboutSub3 #conAboutImg1{
    border-radius: 20px 0px 0px 20px;
}

.conAboutSubText-2{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
    grid-column-start: 3;
    grid-column-end: 5;
    position: relative;
}
.conAboutInfo{
    padding: 0 1rem;
}
.conAboutInfo h4{
    padding-top: 2rem;
}
.conAboutInfo a{
    justify-content: right;
}
.conAboutInfo-A{
    text-align: right;
    position: absolute;
    right:  0.1rem;
    bottom: 0.1rem;
}
.conAboutInfo-A .btn-about{
    display: inline-block;
    background-color: #ccc;
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 12px;  
    box-shadow: 1px 1px 1px gray;
}
.conAboutInfo-A .btn-about:hover{
    background-color: #333;
    color: #fff;
    box-shadow: 1px 1px 3px grey;
}
/* end about us OK  */









/* start slider reward OK  */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 24
}
.sliderAbout{
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}
.slider-wrapper{
    position: relative;
}
.slider-wrapper .image-list{    
    display: grid;
    gap: 18px;
    padding: 0.2rem 0.2rem; 
    overflow-x: auto;
    scrollbar-width: none; 
    grid-template-columns: repeat(6, 1fr);
    margin-bottom: 20px; 
}
.slider-wrapper .image-list::-webkit-scrollbar{
    display: none;
}
.image-list .conSlidImg{
    width: 150px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    position: relative; 
}
.slider-wrapper .image-list .image-item{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    border-radius: 10px; 
    /* background-color:#EFEFEF; */
}
.image-list .conSlidImg:hover{
    /* box-shadow: 1px 1px 3px gray; */
    border-radius: 10px; 
    background-color:#EFEFEF;
}
.slider-scrollbar{
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
}
.slider-scrollbar .scrollbar-track{
    position: relative;
    width: 100%;
    height: 2px;
    background-color:#ccc;
    border-radius: 40px;
}
.slider-scrollbar:hover .scrollbar-track{
    height: 4px;
}
.slider-scrollbar .scrollbar-thumb{
    position: absolute;
    width: 50%;
    height: 100%;
    background-color:#333;
    border-radius: inherit;
    cursor: grab;
}
.slider-scrollbar .scrollbar-track:active{
    cursor: grabbing;
    height: 8xp;
    top: -2px;
}
.slider-scrollbar .scrollbar-thumb::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px
}
.slider-wrapper .slide-button{
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    background-color: #ccc;
    border: none;
    outline: none;
    font-size: 0.5rem;
    cursor: pointer;
    border-radius: 100%;
    transform: translateY(-50%);
    box-shadow: 1px 1px 1px gray;
  }
.slider-wrapper .slide-button:hover{
    background-color: #333;
    box-shadow: 1px 1px 3px grey;
}
.slider-wrapper .slide-button#prev-slide{
    left: -20px;
    display: none;
}
.slider-wrapper .slide-button#next-slide{
    right: -20px;
}
.conSlidImg .middle{
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 65%;
    height: 100%;
    width: 100%;
    align-content: center;
    text-align: center;
    align-items: center;
    object-position: center;
    font-size: 12px;
}
/* .middle .textYear{
    position: absolute;
    color: #333;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 0.5rem;
    align-content: center;
    text-align: center;
    align-items: center;
    object-position: center;
    
}
.conSlidImg:hover #Mimg{
    opacity: 0;
} */
.conSlidImg .imgYear{
    font-size: 25px;
    color: #333333;
    position: absolute;
    overflow: hidden;
    left: 0.5rem;   
}
/* .conSlidImg:hover .imgYear{
    opacity: 0;
} */
/* end slider reward OK  */









/* start all product OK */
.prodBG{
    display: grid;    
    grid-template-columns: auto 1200px auto;
}
.prodBG .prodBG-1{
    background-color: #ecf0f1 ;
}
.prodBG .prodBG-2{
    background-color:  #ecf0f1 ;
    border-radius: 0 5px 100px 0; 
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.prodBG .prodBG-2 h1{
    padding-bottom: 3rem;
} 
.prodBG-2 .prod h3{
    padding-left: 10rem;
    padding-bottom: 0.5rem;
    color: #930036;
    font-weight: bolder;
    text-shadow: 3px 3px 3px #ccc;
}

.prod p{
    padding-left: 15rem;
}

.prod-ul{
    display: flex;
    list-style: none;
    padding-left: 15rem;
}
.prod-ul li{
    padding: 4px 4px;
}

.prodBottom{
    display: inline-block;
    background-color: #ccc;
    color: #111;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 2px 0 0 20px;
    font-size: 12px;  
    box-shadow: 1px 1px 1px gray;
    position: relative;
    overflow: hidden;

    &:hover{
        background-color: #333;
        color: #fff;
        transform: translate(0, -6px);
        transition: all 0.3s ease;
    }
    &:hover::after{
        transform: rotate(150deg);
    }
    &::after{
        content: '';
        width: 400px;
        height: 400px;
        position: absolute;
        top: -50px;
        left: -100px;
        background-color: #333;
        z-index: -1;
        transition: all 0.3s ease;
    }
}
/* end all product OK */











/* start about us logo ISO OK  */
.conISO{
    padding-top: 2rem;
    padding-bottom: 4rem;
    text-align: center;
}
.conISO img{
    object-fit: cover;
}
/* end about us logo ISO OK  */








/* start contact OK */
.contentContact{
    display: grid;
    grid-template-columns: 1fr 500px;
    column-gap: 1rem;
}
.contentContact .content_left{
    width: 100%;
}
.contentContact .content_right{
    width: 100%;
    padding-left: 2rem;
}
.content_right h1{
    margin-bottom: 2rem;
    text-align: center;
    font-size: xx-large;
}
.content_rightLine h4{
    margin-top: 0.5rem;
    color: #930036;
}
.content_rightLine p{
    margin-bottom: 2rem;
}
.content_rightLine a{
    text-decoration: none;
    color:  #21618c ;
   
    &:hover{
        text-decoration:underline;
    }
}
.conAboutInfo-A2{
    text-align: right;
}
.conAboutInfo-A2 .btn-about{
    display: inline-block;
    background-color: #ccc;
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 12px;  
    box-shadow: 1px 1px 1px gray;
}
.conAboutInfo-A2 .btn-about:hover{
    background-color: #333;
    color: #fff;
    box-shadow: 1px 1px 3px grey;
}


/* end contact OK */










/* start privacy-policy */
.priavcyPolicy{
    padding: 1rem 1rem;
}
.ckHead{
    background-color: #ecf0f1;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
}
.priavcyPolicy #pri{
    padding-bottom: 5rem;
}
.priavcyPolicy h3{
    color: #930036;
    font-size: 20px;
}
.priavcyPolicy h4{
    padding-top: 1.5rem;
    padding-bottom: 1rem; 
    font-size: 16px;   
}
.priavcyPolicy p{
    padding-bottom: 0.5rem;
    font-size: 16px;
}
.priavcyPolicy a{
    text-decoration: none;
    color:  #21618c ;
   
    &:hover{
        text-decoration:underline;
    }
}
.priavcyPolicy .ppbr{
    padding-bottom: 0.2rem;
}
/* end privacy-policy */




/* start footer OK */
.footer-top{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #333;
    color: #fff;
}
.footer-top-con{
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    column-gap: 2rem;
}
.footer-top-item{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.footer-top-item:nth-child(1) h4,
.footer-top-item:nth-child(2) h4{
    margin-bottom: 1rem;
}
.footer-top-item:nth-child(1) h5,
.footer-top-item:nth-child(2) h5{
    margin-bottom: 0.5;
    margin-left: 1rem;
}
.footer-top-item:nth-child(1) p,
.footer-top-item:nth-child(2) p{
    font-size: small;
    margin-left: 2rem;
}
.footer-top-item a{
    display: flex;
    color: #95a5a6;
    text-decoration: none;
    font-size: 16px;
    margin: 1rem;
    
    &:hover{
        color: #fff;
    }
}
.footer-top-item2 a{
    display: flex;
    color: #95a5a6;
    text-decoration: none;
    font-size: 12px;
    margin: 0rem;
    
    &:hover{
        color: #fff;
    }
}
.footer-top-item #footer-top-itemH5{
    color: #930036;
}

.footer-bottom{
    background-color: #fff;
    color: #333;
    padding: 1rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #ccc;
}
.footer-bottom img{
    width: 50px;
    align-items: center;
}
.footer-bottom h3{
    color: #930036;
    text-align: center;
}
.footer-bottom .cop2{
    color: #333;
    text-align: center;
    font-size: 12px;
}
.cop3{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;  
    font-size: 12px;    
}
.cop3 a{
    color: #95a5a6;
    font-size: small;
    text-decoration: none;
    margin-left: 1rem;
    &:hover{
        color: #333;
    }
}
#cop3-1{
    margin-left: 1rem;
    border: 1px solid #ccc;
}
/* end footer OK */





/* start cookies OK*/
.ck-wrapper.show{
    bottom: 0px;
}
.ck-wrapper{   
    position: fixed;
    bottom: -100px;     
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    transition: transform 0.7s; 
    box-shadow: 1px 1px 3px #ccc;
    padding-top: 5px;
    padding-bottom: 10px;
    text-align: center; 
    transition: bottom 0.7s ease; 
}
.ck-data{
    color: #333;
    padding-top: 0.5rem;
}
.ck-data a {
    color: #111;
    text-decoration: none;
}
.ck-data a:hover {
    text-decoration: underline;
}
.ck-bt{
    border: none;
    color: #fff;
    padding: 8px 0;
    border-radius: 4px;
    background-color:#333 ;
    cursor: pointer;
    text-align: center;
    padding : 0.5rem 0.5rem;
}
.ck-bt:hover{
    background-color: #ccc;
    box-shadow: 1px 1px 3px #ccc;
    color: #333;
}
/* end cookies OK*/








/* start for employee */
.foremployee{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}
.foremployee2{
    padding: 1rem 1rem 1rem 1rem;
}
.foremployee3 img{
    width: 150px;
}
.foremployee3{
    text-align: center;
}
.foremployee2 p{
    font-size: 18px;
}
.foremployee2 p a{
    text-decoration: none;
    color: #333;
}
.foremployee2 p a:hover{
    text-decoration:underline;
    color: #333;
}



/*footer*/
.ckHead2{
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    background-image: linear-gradient(#eee, transparent);
    color: #333;
}

.bgpicssc0{
    background-image: linear-gradient(transparent,#ccc);
}
.bgpicssc1 img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px 10px 50px 0px;    
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0.5px 0.5px 3px grey;
}
.foremployee2 h3{
    background-color: #eee;
    padding: 0.5rem 0rem;
    border-radius: 0px 5px 25px 0px;    
    text-align: center;
    box-shadow: 0.5px 0.5px 1px #ccc;
}
/* end for employee */











/* ===== FIX OneTrust Click Issue ===== */
#onetrust-consent-sdk,
#onetrust-pc-sdk,
#onetrust-banner-sdk,
.ot-sdk-container {
  z-index: 2147483647 !important;
}

#onetrust-pc-sdk .ot-close-icon,
#onetrust-pc-sdk button {
  pointer-events: auto !important;
}


#preloader.hide{
  opacity: 0;
  pointer-events: none;
}