body{
    background-color: #F8F9FB !important;
    font-family: font_THReular,font_ENReular !important;
}
@font-face {
    font-family: font_THReular;
    src: url('asset/font/SFPRO_TH/SFProTH_regular.woff.ttf');
}
@font-face {
    font-family: font_THBold;
    src: url('asset/font/SFPRO_TH/FontsFree-Net-SFProText-Bold.ttf');
}
@font-face {
    font-family: font_Reular;
    src: url('asset/font/NotoSansThai/NotoSansThai-Regular.ttf');
}
@font-face {
    font-family: font_promptReular;
    src: url('asset/font/prompt/Prompt-Regular.ttf');
}
@font-face {
    font-family: font_ENReular;
    src: url('asset/font/Inter/static/Inter-Regular.ttf');
}
@font-face {
    font-family: font_ENSemiBold;
    src: url('asset/font/Inter/static/Inter-Medium.ttf');
}
@font-face {
    font-family: font_ENBold;
    src: url('asset/font/Inter/static/Inter-Bold.ttf');
}

@font-face {
    font-family: font_SFSemibold;
    src: url('asset/font/SFPRO_TH/SF-Pro-TH-Semibold.ttf');
}

h5{
    text-decoration: none !important;
}
a{
    text-decoration: none !important;
}
.pointer{
    cursor: pointer;
}
.text-ban{
    text-align: left;  
    margin-left: 10%;
}
.text-ban-para{
    text-align: left;  
    margin-left: 50%;
}

.banner-fcs {
    background-image: url(asset/img/ParallelsRASBanner.png);
    height: 65%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.button-contact{
    color: #ffffff !important;
    background: #E63E45;
    border: 2px solid #E63E45;
    border-radius: 100px;

}
.button-quotation{
    color: #000000 !important;
    background: #ffffff;
    border: 2px solid #E63E45;
    border-radius: 100px;

}
.front-regular{
    font-family: font_THReular,font_ENReular;
}
.front-promptregular{
    font-family: font_promptReular;
}
.front-en-semibold{
    font-family: font_ENSemiBold;
}
.front-h-home{
    font-family: font_THBold !important;
}
.font{
     font-family: font_ENReular !important;
}
.card {
    box-shadow: none !important;
    border: none !important;
}
.font_nev{
    font-family: font_ENReular !important;
}
.font_footer{
     font-family: font_ENReular !important;
    color: #ffffff !important;
}
.front_h_product{
    font-family: font_ENBold;
    color: #EC323B !important;
}

.cuttext{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.map{
    width:100%;
    height: 58%;
}
.item_article{
    width: 18rem;
    height: 325px; 
    background: #FFFFFF;
    box-shadow: 0px 10px 10px rgba(192, 189, 189, 0.25) !important;
    border-radius: 5px;
}
.h-about{
    font-family: font_ENSemiBold;
    color: #CB4B57;
}
.c-about{
    color: #939393;
    font-size: 1rem;
}
.f-about{
    font-family: font_ENSemiBold;
    color: #ffffff;
    font-size: 1.3rem;
}

tr.odd{
    background-color:#F8F9FB !important;
}

th{
    border:none !important;
}
.none{
    display: none;
}
.hide{
    display: block;
}
.nav-pills .nav-link.active{
    border: 2px solid #E63E45;
    background-color: #ffffff !important;
    border-radius: 50px;
}
@media only screen and (max-width: 1400px){
    .none{
        display: block;
    }
    .hide{
        display: none;
    }
   
    }
@media only screen and (max-width: 768px){
    .none{
        display: block;
    }
    .hide{
        display: none;
    }
    .text-ban{ 
        text-align: center;
        margin-left: 0;
    }
    .text-ban-para{
        text-align: center;
        margin-left: 0;
    }
    /* .banner-footer{
        background-image: url(asset/img/Footer.png);
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    } */
    

}


.carousel-item:hover .carousel .carousel-control-prev-icon, .carousel .carousel-control-next-icon:hover ,.carousel .carousel-control-prev-icon:hover{
        opacity: 0.4;
      }
      .carousel .carousel-control-next-icon,.carousel .carousel-control-prev-icon {
        opacity: 0.1;
        width: 48px;
        height: 48px;
      }
     
      /*// Extra small devices (portrait phones, less than 576px)*/
      @media (max-width: 575.98px) { 
        .banner-tsplus{
          /*background-image: url(asset/img/TSplus_Banner.png);*/
          height: 65%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-left: 3%;
          padding-right: 3%;

        }
        .banner-home{
          background-image: none !important;
        } 
        .tsplus-logo{ width: 35% }
        .banner-parallels {
          /*background-image: url(asset/img/ParalellRAS_Banner.png);*/
          height: 60%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-left: 3%;
          padding-right: 3%;
          /*padding-bottom: 10%;*/
        }
        .banner-centerm{
          background-image: url(asset/img/bg/Centerm_Art.png);
          background-repeat: no-repeat;
          background-position-x: left;
          background-position-y: center;
          
        }
        .banner-aisino{
          background-image: url(asset/img/bg/Aisino_1920x550.png);
          background-repeat: repeat-y;
          background-position-x: left;
          background-position-y: center;
        }
        .banner-telpo{
          background-image:  url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: repeat;
          background-position-x:  left;
          background-position-y:  center;
        }
        .banner-footer{
          background-image: url(asset/img/Footer_600x900.png);
          background-position: center;
          background-repeat: no-repeat;
        }
      }

      /*// Small devices (landscape phones, 576px and up)*/
      @media (min-width: 576px) and (max-width: 767.98px) {
        .banner-tsplus{
          /*background-image: url(asset/img/TSplus_Banner.png);*/
          height: 60%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-left: 3%;
          padding-right: 3%;
        }
        .tsplus-logo{ width: 30% }
        .banner-parallels {
          /*background-image: url(asset/img/ParalellRAS_Banner.png);*/
          height: 55%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-left: 3%;
          padding-right: 3%;
        }
        .banner-centerm{
          background-image: url(asset/img/bg/Centerm_Art.png);
          background-repeat: no-repeat;
          background-position-x: center;
          background-position-y: center;
          
        }
        .banner-aisino{
          background-image: url(asset/img/bg/Aisino_1920x550.png);
          background-repeat: repeat-y;
          background-position-x: left;
          background-position-y: center;
        }
        .banner-telpo{
          background-image:  url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: repeat;
          background-position-x:  left;
          background-position-y:  center;
        }
        .banner-footer{
          background-image: url(asset/img/Footer_600x900.png);
          background-position: center;
          background-repeat: no-repeat;
        }
      }

      /*// Medium devices (tablets, 768px and up)*/
      @media (min-width: 768px) and (max-width: 991.98px) {
        .banner-home{
          background-image: none !important;
        } 
        .banner-tsplus{
          /*background-image: url(asset/img/TSplus_Banner.png);*/
          height: 50%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-left: 3%;
          padding-right: 3%;
        }
        .tsplus-logo{ width: 20% }
        .banner-parallels {
          /*background-image: url(asset/img/ParalellRAS_Banner.png);*/
          height: 60%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }
        .banner-centerm{
          background-image: url(asset/img/bg/Centerm_Art.png);
          background-repeat: no-repeat;
          background-position-x: left;
          background-position-y: center;
          
        }
        .banner-aisino{
          background-image: url(asset/img/bg/AisinoQ161.png);
          background-repeat: repeat-y;
          background-position-x: left;
          background-position-y: center;
        }
        .banner-telpo{
          background-image:  url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: repeat;
          background-position-x:  left;
          background-position-y:  center;
        }
        .banner-footer{
          background-image: url(asset/img/Footer.png);
          background-position: center;
          background-repeat: no-repeat;
        }
      }

      /*// Large devices (desktops, 992px and up)*/
      @media (min-width: 992px) and (max-width: 1199.98px) {
        .banner-tsplus{
          /*background-image: url(asset/img/TSplus_Banner.png);*/
          height: 60%;
          background-position: right;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }
        .tsplus-logo{ width: 15% }
        .banner-parallels {
          /*background-image: url(asset/img/ParalellRAS_Banner.png);*/
          height: 60%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
          padding-right: 3%;
        }
        .banner-centerm{
          background-image: url(asset/img/bg/Centerm_Art.png), url(asset/img/bg/Centerm_Info_GP.png);
          background-repeat: no-repeat, no-repeat;
          background-position-x: left, 165%;
          background-position-y: center, bottom;
          
        }
        .banner-aisino{
          background-image: url(asset/img/bg/AisinoQ161.png);
          background-repeat: repeat-y;
          background-position-x: left, 165%;
          background-position-y: center;
        }
        .banner-telpo{
          background-image: url(asset/img/bg/Telpo_1920x550.png), url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: no-repeat, no-repeat;
          background-position-x: 90%, left;
          background-position-y: 81%, center;
        }

        .banner-home{
            background-image: url(asset/img/Index_Banner.png);
            height: 65%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .banner-telpo{
          background-image:  url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: repeat;
          background-position-x:  left;
          background-position-y:  center;
        }

        .banner-footer{
          background-image: url(asset/img/Footer.png);
          background-position: center;
          background-repeat: no-repeat;
        }
      }

      /*// Extra large devices (large desktops, 1200px and up)*/
      @media (min-width: 1200px) { 
        .banner-tsplus{
          background-image: url(asset/img/TSplus_Banner.png);
          height: 60%;
          background-position: right;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }
        .tsplus-logo{ width: 15% }
        .banner-parallels {
          background-image: url(asset/img/ParalellRAS_Banner.png);
          height: 60%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }
        .banner-centerm{
          background-image: url(asset/img/bg/Centerm_Art.png), url(asset/img/bg/Centerm_Info_GP.png);
          background-repeat: no-repeat, no-repeat;
          background-position-x: left, 120%;
          background-position-y: center, bottom;
        }

        .banner-aisino{
          background-image: url(asset/img/bg/bgAisino.png), url(asset/img/bg/Aisino_1920x550.png);
          background-repeat: no-repeat, repeat-y;
          background-position-x: 100%, left;
          background-position-y: 81%, center;
        }

        .banner-sunmi{
          background-image: url(asset/img/bg/P3MIXbanner.png), url(asset/img/bg/Aisino_1920x550.png);
          background-repeat: no-repeat, repeat-y;
          background-position-x: 100%, left;
          background-position-y: 81%, center;
        }

        .banner-sunmip3mix{
          background-image: url(asset/img/bg/P3MIXbanner.png), url(asset/img/bg/Aisino_1920x550.png);
          background-repeat: no-repeat, repeat-y;
          background-position-x: 100%, left;
          background-position-y: 81%, center;
        }

        .banner-telpo{
          background-image: url(asset/img/bg/Telp_Info_GP.png), url(asset/img/bg/Telpo_1920x550.png);
          background-repeat: no-repeat, repeat;
          background-position-x: right, left;
          background-position-y: top, center;
        }

        .banner-home{
            background-image: url(asset/img/Index_Banner.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

        .banner-footer{
          background-image: url(asset/img/Footer.png);
          background-position: center;
          background-repeat: no-repeat;
        }
        
      }
      
    }


--------------------------------------navbar-----------------------------------



    @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: linear-gradient(110deg, #fdcd3b 20%, #ffaa00 60%) !important;
            }
            
        }

.carousel,.carousel .carousel-inner,.carousel .carousel-inner .active,.carousel .carousel-inner .carousel-item,.view,body,html{
    height:100%;
}
.page-footer, .top-nav-collapse {
    backdrop-filter: saturate(180%) blur(20px) !important;
    background-color: rgba(255,255,255,0.72) !important;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 5%);
}

.navbar{
    background-color:#ffffff;
    /*box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);*/
    -webkit-box-shadow:none;
}

.navbar.scrolling-navbar.top-nav-collapse {
    padding-top: 10px;
    padding-bottom: 10px;
}
.page-footer,.top-nav-collapse{
    /*background: linear-gradient(110deg, #fdcd3b 20%, #ffaa00 60%);*/
    background-color: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

.indent-50{
    text-indent: 50px;
}

.text-headpage{
    color:#fa0;
}

.page-footer{
    background: linear-gradient(110deg, #ffaa00 80%, #fdcd3b 60%);
}

.navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link{
    background-color: rgba(255, 255, 255, 0.5);
    color: #dc3545 !important;
}

.hoverimage{
    max-width:100px;
    margin:15px 15px 0px 15px;
    transition: .3s;
}

.hoverimage:hover{
    max-width:120px;
    transition: .3s;
}



@media only screen and (max-width: 1200px){
    .table-responsive-xl {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar{
            background-color:white !important;
            }
}