.itopplus-background {

}
body {
  overflow-x: hidden;
  font-family: "Lexend","Noto Sans Thai", serif;
  color: #444;
}

.itopplus-bg {
  background-image: url("https://itp1.itopfile.com/ImageServer/z_itp_04002024lqox/0/0/1z-z1604453015667.webp");
  background-color: #07284c;
}

.itopplus-bg2 {
  background-image: url("https://itp1.itopfile.com/ImageServer/z_itp_04002024lqox/0/0/2z-z658761863187.webp");
}

.itopplus-bg3 {
  background-image: url("https://itp1.itopfile.com/ImageServer/z_itp_04002024lqox/0/0/3z-z1423045911801.webp");
}

.itopplus-pos2 {
    background-image: url("http://itp1.itopfile.com/ImageServer/z_itp_04002024lqox/1140/0/bg-servicez-z112543262716.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itopplus-footer {
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_04002024lqox/1423/0/bg-footz-z1104217171919.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.navbar-default .navbar-nav>li>a {
  color: #000000;
  margin: 0 15px;
  padding: 5px 12px;
  border-radius: 30px;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  color: #fff !important;
  box-shadow: none;
  background: transparent;
  background-color: #1e580b;
}

.dropdown-menu>li>a {
  color: #000;
}

.no-js .dropdown-menu>li>a:focus,
.no-js .dropdown-menu>li>a:hover {
  color: #000;
  background: #e8e8e8;
}

@media screen and (max-width: 992px) {
  #controlBanner img {
    position: fixed;
    top: 5px;
    left: 10px;
    width: 40px !important;
    z-index: 10000;
  }

  #nav-menu,
  #ItopplusMainSidebar>div {
    background: #07284c !important;
  }

  #itpMenuSideBar span {
    background-color: #fff !important;
  }

  #controlMenu * {
    color: #fff !important;
    border: none;
  }
}

@media screen and (min-width: 1024px) {
  .itopplus-banner .container {
    display: grid;
    grid-template-columns: 25% auto;
            height: clamp(80px, 6vw , 100px);
    align-items: center;
  }

  .no-js .itopplus-banner {
    position: sticky;
    top: 0;
    z-index: 110;
  }

  .itopplus-banner {
    background: #fff;
    transition: 0.3s;
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.05);
  }

  .itopplus-sticky {
    background: #fff !important;
  }
  
.itopplus-logo {
    position: relative;
    height: 100%;
}

    #controlBanner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        object-fit: contain;
        padding: 15px;
        width: clamp(150px, 10vw, 200px);
        margin: 0 auto;
    }

  #nav-menu {
    display: grid;
    justify-content: end;
    background: transparent;
    min-height: auto;
  }

#controlBanner img {
    border-radius: 50%;
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.05);
}

}

@media screen and (min-width: 1366px) {}

@media screen and (min-width: 1900px) {}

@media screen and (max-width: 900px) {}

@media screen and (max-width: 480px) {}

/************font-size***************/

.navbar-default .navbar-nav>li>a {
    font-size: 16px;
}

h1 {
    font-size: 4.125em;
}

h2 {
    font-size: 3.2em;
}

h3 {
    font-size: 2.8em;
}

h4 {
    font-size: 2.4em;
}

h5 {
    font-size: 2em;
}

h6 {
    font-size: 1.4em;
}

p, .text-service h6  {
    font-size: 16px;
}

.btn-more, 
div#Component6787916bf924540013c0276b button {
    font-size: 14px;
}

.footer h6 {
    font-size: 18px;
}

.pt-3 {
	padding-top:3%;
}

.pt-5 {
	padding-top:5%;
}

.pt-8 {
	padding-top:8%;
}

.pt-20 {
    padding-top: 20%;
}


/*************************master-page****************************/

figure.effect-selena,
figure.effect-jazz{
    background: transparent;
}

figure.effect-jazz figcaption::after {
    border: none;
}

div#Component67861041ec68f70013f2e8bc {
    width: 90%;
}

.sect-about h5, .sect-project h2, .sect-service h2,
.footer h6, .head-page h2 ,.about-page h5, .service-page h6,
.sect-service h4, .head-page h4, .contact-page h5,
.form-contact h4{
    font-weight: 600;
}

.text-service h6 {
    font-weight: 400;
}

.sect-about h5, .sect-project h6, .head-page h6,
.about-page, .head-page h4, .contact-page ,
.contact-page a{
    color: #000;
}

.sect-about h1 {
    color: #1e580b;
    font-weight: 800;
    margin: 0 0 5%;
}

.sect-project h2, .head-page h2 {
    color: #1e580b;
}

.btn-more {
    width: fit-content;
    padding: 1rem 2rem;
    background: #0c3869;
    color: #fff;
    font-weight: 400;
    transition: all 0.2s ease-out;
}

.sect-about p {
    margin-bottom: 7%;
    line-height: 26px;
}

.sect-about {
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 4%;
}

.sect-service, .text-service h6, .sect-project,
.head-page{
    text-align: center;
}

.sect-service, .footer a {
     color: #fff;
}

.sect-service, .sect-project, .head-page {
    margin-bottom: 3%;
}

#background678614e91270ef0013dfb0aa > div > div.none-middle > div.none-middle-mid > div > div.bootstrap-collum > div > div:nth-child(3),
#background67863d695c7d4a0013fc4267 > div > div.none-middle > div.none-middle-mid > div > div.bootstrap-collum > div > div:nth-child(3){
    justify-content: center;
}

div#Component678614e91270ef0013dfb0aa figcaption,
div#Component67863d695c7d4a0013fc4267 figcaption{
    padding: 0;
    position: relative;
    text-transform: none;
}

figure.effect-jazz h2 {
    padding-top: 0;
    -webkit-transition: inherit;
    transition: inherit;
    -webkit-transform: inherit;
    transform: inherit;
}
 
figure.effect-jazz figcaption::after, figure.effect-jazz p,
figure.effect-jazz:hover .img-service img{
    opacity: 1 !important;
    -webkit-transform: inherit;
    transform: inherit;
    -webkit-transition: inherit;
    transition: inherit;
}

.img-service img {
    opacity: 1 !important;
}

.img-service {
    width: 45px;
    position: absolute;
    bottom: 74px;
}

.blog-service {
    position: relative;
}

.grid figure h2 {
    word-spacing: 0;
    font-weight: unset;
}

.text-service h6, .service-page h6 {
    line-height: 24px;
}

.sect-about h5 , .text-service h6,
div#Component67861cda5c7d4a0013fc3c83 .thumbs{
    margin: 0;
}

.service-page h6 {
    margin-bottom: 4%;
}

div#Component678614e91270ef0013dfb0aa .imgLightbox,
div#Component67863d695c7d4a0013fc4267 .imgLightbox{
    overflow: hidden;
}

figure.effect-jazz:hover .img-service img {
    -webkit-transition: inherit !important;
    transition: inherit !important;
}

.text-service {
    padding: 5% 0;
    height: 75px;
      color: #fff;
}

.pe-20 {
    padding-left: 20%;
}

.social-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 40%;
}

.qr-line {
    width: 50%;
    margin: auto;
    margin-right: 0;
}

.footer.pe-20 p {
    margin-bottom: 0%;
}

.about-page {
    padding-left: 8%;
    padding-top: 1%;
}

.about-page ul {
    list-style: none;
    margin: 4% 0;
}

.about-page li {
    display: grid;
    grid-template-columns: 40px auto;
    gap: 10px;
    margin-bottom: 2%;
    align-items: baseline;
}

.about-page h5 {
    color: #07284c;
}

.about-page h6 {
    color: #444;
}

    .marquee-content {
      display: flex;
      animation: scrolling 40s linear infinite;
    }
    
    .marquee {
        overflow: hidden;
    }
    
    .marquee-item {
      flex: 0 0 9vw;
      margin: 0 1vw;
    /*   flex: 0 0 20vw; */
    /*   margin: 0 2vw; */
    }
    
    @keyframes scrolling {
      0% { transform: translateX(0); }
      100% { transform: translatex(-144vw); }
    }
    
    .marquee-item img {
        width: 100%;
    }

div#Component6786388c1270ef0013dfb917 .col-md-3.col-sm-4.col-xs-4 {
    width: 12.5%;
}
    
.service-page {
    padding: 0 4%;
    color: #000;
}

.service-page li {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.service-page ul {
    padding: 0;
    list-style: none;
}

.head-page h4 {
    line-height: 40px;
}

.contact-page {
    padding-left: 8%;
}

.contact-page li {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 1%;
}

.contact-page ul {
    list-style: none;
    padding-left: 6%;
    margin-top: 3%;
}

.form-contact {
    width: 50%;
    margin: auto;
    background: #fff;
    text-align: center;
    color: #000;
    padding: 3% 3% 2%;
    margin-bottom: -1px;
}

div#Component6787916bf924540013c0276b {
    width: 50%;
    margin: auto;
    background: #fff;
    padding: 1% 3% 3%;
}

div#Component6787916bf924540013c0276b .col-xs-12.col-sm-3.col-md-3 {
    display: none !important;
}

div#Component6787916bf924540013c0276b .col-xs-12.col-sm-6.col-md-6 {
    width: 100%;
}

div#Component6787916bf924540013c0276b input.form-control {
    height: 40px;
}

div#Component6787916bf924540013c0276b .form-control {
    box-shadow: none;
    border-radius: 0;
}

div#Component6787916bf924540013c0276b .col-md-offset-3 {
    margin: 0;
    width: 100%;
    text-align: center;
    margin-top: 3%;
}

div#Component6787916bf924540013c0276b button {
    background: #1e580b;
    text-shadow: none;
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 30px;
}

.btn-more:hover {
    background: #1e580b;
}

.footer a:hover, .contact-page a:hover {
    color: #46b123;
}

.social-footer img:hover, .about-page li:hover img,
.service-page li:hover img,.contact-page li:hover img{
    transform: scale(1.05);
}

.social-footer img, .about-page li img, .service-page li img,
.contact-page li img{
    transition: transform 0.2s ease-out;
}

.post-time, .fbcomments, .landingpagemanager{
    display: none;
}

.social-icon {
    border-radius: 5px;
}

.ITPcookiebar {
  width: 100% !important;
      background-color: #78787896 !important;
    color: #fff;
}

.buttonExampleSite {
    border-radius: 5rem !important;
    border: 1px solid #78787896 !important;
    color: #171717 !important;
}

.buttonExampleSite:hover {
    background: #1e580b !important;
    color: #ffffff !important;
}

.ITPlinkToCookiepage:hover {
    color: #1e580b !important;
}

.itpPDPALandingPage ,
.ITP-pdpa-template-contentFont{
    font-size: 16px !important;
    margin-bottom: 3% !important;
}

.itpPDPALandingPage {
    margin-top: 7%;
}

.ITP-pdpa-template-titleFont {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.ITP-pdpa-template-contentFont {
    line-height: 28px;
}
/***********************responsive*********************/

@media screen and (min-width: 1900px) {


.navbar-default .navbar-nav>li>a {
    font-size: 20px;
}

h1 {
    font-size: 4.625em;
}

h2 {
    font-size: 3.6em;
}

h3 {
    font-size: 3.2em;
}

h4 {
    font-size: 2.8em;
}

h5 {
    font-size: 2.4em;
}

h6 {
    font-size: 1.8em;
}

p, .text-service h6  {
    font-size: 20px;
}

.btn-more, 
div#Component6787916bf924540013c0276b button {
    font-size: 18px;
}

.footer h6 {
    font-size: 22px;
}
  
  .sect-about p {
    line-height: 32px;
}
  
  .text-service h6, .service-page h6, .about-page p {
    line-height: 28px;
}
  
  .text-service {
    height: 95px;
}
  
  .img-service {
    bottom: 95px;
    width: 55px;
}
  
  .pt-20 {
    padding-top: 18%;
}
  
  .sect-project h2, .head-page h2 {
    margin-bottom: 1%;
}
  
  .social-footer {
    width: 32%;
}
  
  .about-page li {
    grid-template-columns: 50px auto;
    margin-bottom: 3%;
}
  
  .service-page li {
    grid-template-columns: 50px auto;
    align-items: center;
}
  
  .head-page h4 {
    line-height: 48px;
}
  
  div#HtmlTool67878f6bfbf4e600135d6ba2 iframe {
    height: 420px !important;
}
  
  .contact-page li {
    margin-bottom: 1.5%;
    grid-template-columns: 45px auto;
}
  
  div#Component6787916bf924540013c0276b .form-control {
    font-size: 16px !important;
}
  
  .ITP-pdpa-template-titleFont {
    font-size: 24px !important;
  }
  
  .ITP-pdpa-template-contentFont {
    line-height: 32px;
    font-size: 18px !important;
}
  
}

@media screen and (max-width: 1366px) {

.contact-page li {
    grid-template-columns: 35px auto;
}
  
.contact-page ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 0;
}
}

@media screen and (max-width: 1200px) {

.navbar-default .navbar-nav>li>a {
    padding: 5px 10px;
    margin: 0 10px;
}
  
  .sect-about h1 {
    color: #1e580b;
    font-weight: 800;
    margin: 0 0 5%;
}
  
  .sect-about {
    padding-right: 0;
    padding-left: 0;
}
  
  h1 {
    font-size: 3.8em;
}
  
  h2 {
    font-size: 2.8em;
}
  
  .about-page {
    padding-left: 3%;
  }
  
  h5 {
    font-size: 1.8em;
}
  
  .about-page li {
    grid-template-columns: 45px auto;
    align-items: center;
    margin-bottom: 4%;
}
  
  h4 {
    font-size: 2em;
}
  
  .head-page h4 {
    line-height: 36px;
}
  
  .contact-page h5 {
    font-size: 22px;
}
  
.contact-page p {
    font-size: 14px;
}
  
  div#HtmlTool67878f6bfbf4e600135d6ba2 iframe {
    height: 255px;
}
  
  div#Component6787916bf924540013c0276b input.form-control {
    height: 35px;
}
}

@media screen and (max-width: 900px) {

div#mainmenu678620a96a9e2000138a92d1 .col-md-4.col-sm-4.col-xs-12 {
    width: 100%;
}
  
  .copy-right {
    text-align: center;
}
  
      h1 {
        font-size: 40px;
    }
  
      h2 {
        font-size: 36px;
    }
    
      h3 {
        font-size: 32px;
    }
      
      h4 {
        font-size: 28px;
    }
      
    h5 {
        font-size: 24px;
    }
        
    h6, .about-page h5 {
        font-size: 20px;
    }
  
  .sect-about p {
    line-height: inherit;
}
  
  .sect-about {
    padding: 0;
}
  
  .itopplus-bg, .itopplus-bg2 {
    background-size: cover;
}
  
  div#Component678614e91270ef0013dfb0aa .col-md-3.col-sm-4.col-xs-4,
  div#Component67861cda5c7d4a0013fc3c83 .col-md-3.col-sm-4.col-xs-4,
  div#Component67863d695c7d4a0013fc4267 .col-md-3.col-sm-4.col-xs-4{
    width: 25%;
}
  
  br {
    display: none;
}
  
  .text-service h6 {
    line-height: 22px;
    font-size: 14px;
}
  
  .text-service {
    height: 85px;
}
  
  .img-service {
    bottom: 85px;
}
  
  .about-page li {
    align-items: flex-start;
}
  
  .contact-page ul {
    grid-template-columns: repeat(1, 1fr);
}
  
      div#HtmlTool67878f6bfbf4e600135d6ba2 iframe {
        height: 410px;
    }
  
}

@media screen and (max-width: 480px) {

  
  div#imagesControl67860dcf5c7d4a0013fc3829,
  div#imagesControl67861041ec68f70013f2e8bc,
  div#imagesControl67861cda5c7d4a0013fc3c83,
  div#imagesControl678631476a9e2000138a986e,
  div#imagesControl67878ce4fbf4e600135d6ad7,
div#imagesControl67878d09ed20a30013bd2f6f,
div#imagesControl67878d2ac79c4b0013bcc601,
div#imagesControl67878d4afbf4e600135d6afe,
div#imagesControl67878d6ec79c4b0013bcc63c,
div#imagesControl67878d8f61df930012b5860b,
div#imagesControl67878db2ed20a30013bd2fb8,
  div#imagesControl67863d695c7d4a0013fc4267,
  div#imagesControl678614e91270ef0013dfb0aa,
  div#imagesControl678633ec6a9e2000138a98a3,
  div#imagesControl6786388c1270ef0013dfb917{
    padding: 0 !important;
}
  
  div#Component67861041ec68f70013f2e8bc,
  .form-contact, div#Component6787916bf924540013c0276b{
    width: 100%;
}
  
  .pt-5 {
    padding-top: 10%;
}
  
  .sect-about p {
    margin-bottom: 10%;
  }
  
  .sect-about, .sect-service, .sect-project, 
  .head-page, .about-page li , .service-page h6,
  .service-page ul{
    margin-bottom: 8%;
}
  
      .text-service {
        height: 75px;
    }
  
  .img-service {
        bottom: 75px;
    }
  
      .text-service h6, .contact-page p {
        font-size: 16px;
    }
  
  .marquee-item {
    flex: 0 0 20vw;
}
  
  .sect-project.pt-8 {
    padding-top: 12%;
}
  
      h1 {
        font-size: 36px;
    }
  
      h2 {
        font-size: 32px;
    }
    
      h3 {
        font-size: 28px;
    }
    
      h4 {
        font-size: 24px;
    }
  
      h5 {
        font-size: 20px;
    }
  
      h6 {
        font-size: 18px;
    }
  
  .about-page, .contact-page {
    padding: 0;
}
  
  .about-page ul {
    padding-left: 5%;
}
  
      .head-page h4 {
        line-height: 26px;
        font-size: 20px;
    }
  
  div#Component6786388c1270ef0013dfb917 .col-md-3.col-sm-4.col-xs-12 {
    width: 33%;
}
  
      div#HtmlTool67878f6bfbf4e600135d6ba2 iframe {
        height: 300px;
    }
  
  div#mainmenu67878f3dc79c4b0013bcc6ec .none-middle-mid .none-middle-mid {
    display: block;
}
  
div#mainmenu67878f3dc79c4b0013bcc6ec .none-middle-mid {
    display: flex;
    flex-wrap: wrap-reverse;
}

  .contact-page ul {
    margin-top: 5%;
    margin-bottom: 8%;
}
  
  .form-contact {
    padding: 6% 3% 2%;
}
  
    .ITPcookiebar {
    padding: 3%;
    display: flex !important;
}
  
  .ITPcookieLeftText {
    /* color: white; */
    float: unset !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}
  
  .ITPcookieButton {
    float: unset !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}
  
   .ITPcookieLeftText span {
    font-size: 14px;
}

}