.itopplus-background {

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

.itopplus-bg {
  background-image: url("https://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/0/0/1z-z269556005839.webp");
}

.itopplus-footer {
  background-image: url("https://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/0/0/fz-z1595878626868.webp");
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
  margin: 15px;
  padding: 3px 5px;
  border-radius: none;
  border-bottom: 2px solid transparent;
}

.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;
  border-color: #db0c0c;
  background: transparent;
  background-color: transparent;
}

.dropdown-menu > li > a {
  color: #000;
  font-family: "Montserrat", "Noto Sans Thai", serif;
}

.no-js .dropdown-menu > li > a:focus,
.no-js .dropdown-menu > li > a:hover {
  color: #fff;
  background: #022d21;
}

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

  #nav-menu,
  #ItopplusMainSidebar > div {
    background: #022d21 !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: 30% auto;
    align-items: center;
  }

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

  .itopplus-banner {
    background: #022d21;
    transition: 0.3s;
  }

  .itopplus-sticky {
    background: #022d21 !important;
  }

  #controlBanner {
    object-fit: contain;
    padding: 25px 10px;
    width: clamp(150px, 100%, 90%);
    margin: 0 auto;
  }

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

@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,
.dropdown-menu > li > a {
  font-size: 16px;
}

h1 {
  font-size: 4.125em;
}

h2 {
  font-size: 3.6em;
}

h3 {
  font-size: 2.8em;
}

h4,
h3.managerHeader {
  font-size: 2.4em;
}

h5 {
  font-size: 2em;
}

h6 {
  font-size: 1.5em;
}

p,
.table-product tbody > tr > td {
  font-size: 16px;
}

.text-service h5 {
  font-size: 34px;
}

.text-service h6,
.text-why h6 {
  font-size: 18px;
}

.btn-detail,
div#background6797085f1fe7240013852df3 button,
div#background67974418c6a85c001a697eb1 button {
  font-size: 14px;
}

.sect-vision .text-green {
  font-size: 40px;
}

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

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

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

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

.footer,
.sect-service,
.sect-why,
.head-page,
.sect-mission,
h3.managerHeader {
  text-align: center;
}

.footer h6,
.sect-service h1,
.sect-why h1,
.head-page h1,
.sect-vision h5,
.sect-mission h1,
.fw-semi,
h3.managerHeader,
.service-detail h6,
.product-detail h6,
.table-product tbody > tr > td strong {
  font-weight: 600;
}

.sect-slogan h2,
.fw-bold,
.service-detail h5,
.gallery-service h5,
.contact-page h5 {
  font-weight: 700;
}

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

.info-footer a {
  color: #fff;
}

.footer h6,
.info-footer a:hover,
.sect-why h1,
.sect-slogan h2,
.text-green,
.sect-mission h1,
.contact-page h4,
.contact-page a:hover,
div#Component6793439c575acf001392db3b figure:hover .text-service h6 {
  color: #01ddab;
}

.service-detail h5 {
  color: #07725a;
}

.cont-footer {
  display: grid;
  grid-template-columns: 20% 30%;
  justify-content: center;
  gap: 35px;
  margin: 3% 0;
}

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

.info-footer {
  text-align: left;
}

.footer {
  padding-top: 10%;
  padding-bottom: 5%;
}

.social-cont {
  border-right: 2px solid #01ddab;
}

.copy-right {
  color: #d9d9d9;
}

.info-footer,
.social-cont,
.copy-right,
.text-service h6,
.pre-product {
  font-family: "Montserrat", serif;
}

.sect-service,
.pre-product h6,
.pre-port h6,
.head-page,
.sect-vision h5,
.pre-service h6,
.contact-page,
.contact-page a,
h3.managerHeader,
.service-detail,
.gallery-service,
.product-detail {
  color: #000;
}

.sect-service h1,
.text-service h5,
.sect-why h1,
.head-page h1,
.sect-mission h1,
.contact-page h4 {
  font-family: "Teko", serif;
}

.sect-service h1,
.sect-service h6,
.sect-why h1,
.sect-why h6,
.pre-product h6,
.pre-port h6,
.head-page h1,
.head-page h6,
.sect-mission h1,
.sect-mission h6,
.pre-service h6 {
  margin: 0;
}

figure.effect-oscar figcaption::before,
.dropdown-menu {
  border: none;
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
  opacity: 1 !important;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transform: inherit;
  transform: inherit;
}

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

figure.effect-oscar h2 {
  margin: 0;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transform: inherit;
  transform: inherit;
}

figure.effect-oscar {
  background: transparent;
}

div#Component6793439c575acf001392db3b figcaption {
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  text-transform: none;
  background: transparent;
}

figure.effect-oscar:hover h2 {
  -webkit-transform: inherit;
  transform: inherit;
}

.text-service {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

div#Component6793439c575acf001392db3b .imgLightbox img,
div#Component6793439c575acf001392db3b figure {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

div#Component6793439c575acf001392db3b .col-md-4.col-sm-4.col-xs-4:nth-child(even) {
  margin-top: 70px;
}

.sect-why {
  background-image: url("http://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/1903/0/bg-whyz-z1155970086448.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  color: #fff;
  padding: 25% 0 17%;
}

.sect-mission {
  background-image: url("http://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/1423/0/bg-mission02z-z1159772947152.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  color: #fff;
  padding: 12% 0 20%;
  margin-bottom: -265px;
  position: relative;
}

.sect-why ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 80%;
  margin: auto;
  gap: 10px;
  margin-top: -25px;
}

.sect-mission ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 80%;
  margin: auto;
  gap: 10px;
}

.icon-why {
  width: 50%;
  margin: auto;
  margin-bottom: 5%;
}

.text-why h6 {
  font-weight: 400;
  line-height: inherit;
}

.sect-why li:nth-child(2),
.sect-why li:nth-child(3) {
  margin-top: 25%;
}

.sect-mission li:nth-child(1),
.sect-mission li:nth-child(4) {
  margin-top: 25%;
}

div#Component6793439c575acf001392db3b {
  margin-bottom: -50px;
}

.sect-service h1,
.head-page h1 {
  text-transform: uppercase;
}

.sect-slogan {
  background-image: url("http://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/1698/0/bg-service02z-z613452646719.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  color: #fff;
  padding: 7% 0 38%;
  text-align: center;
}

.sect-slogan h5 {
  line-height: 38px;
  font-weight: 400;
  margin-bottom: 0;
}

.sect-client {
  margin-top: -55px;
}

.marquee-content {
  display: flex;
  animation: scrolling 30s linear infinite;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee-item {
  flex: 0 0 10vw;
  margin: 0 1vw;
  /*   flex: 0 0 20vw; */
  /*   margin: 0 2vw; */
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translatex(-144vw);
  }
}

.marquee-item img {
  border-radius: 0;
  border: 1px solid #ddd;
  width: 100%;
}

.marquee::after {
  content: " ";
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(270deg, #ffffff, transparent);
  right: 0;
  z-index: 2;
}

.marquee::before {
  content: " ";
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(90deg, #ffffff, transparent);
  left: 0;
  z-index: 2;
}

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

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

.Textmanager {
  text-align: left;
  display: flow-root;
}

.template1 .col-md-4.col-sm-4.col-xs-12 {
  width: 25%;
  padding: 0 1% !important;
}

.template1 {
  display: flex;
  flex-wrap: wrap;
}

.Contentmanager .template1 .template-panel {
  padding-bottom: 70%;
}

div#Contentmanager .img-container .img {
  background-position: center !important;
  background-color: #ffffff96;
  transition: transform 0.2s ease-out;
}

.btn-detail,
div#background6797085f1fe7240013852df3 button,
div#background67974418c6a85c001a697eb1 button {
  width: fit-content;
  padding: 0.75rem 2rem;
  background: #db0c0c;
  color: #fff;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  overflow: hidden;
}

.pre-product {
  padding: 6% 4%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10%;
}

.pre-port h6 {
  margin-bottom: 6%;
  line-height: 24px;
}

.pre-port {
  text-align: left;
  padding: 7% 0;
  margin-bottom: 10%;
  font-family: "Montserrat", "Noto Sans Thai", serif;
}

.about-img01,
.about-img02 {
  width: 47%;
  border-radius: 20px;
}

.about-img01 img,
.about-img02 img {
  border-radius: 20px;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
  border: 3px solid #fff;
}

.about-cert {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #074e3deb;
  padding: 4% 1%;
  border-radius: 25px;
}

.about-text {
  width: 100%;
}

.about-text h6 {
  text-align: center;
  line-height: 26px;
  font-weight: 600;
  color: #fff;
}

.head-page,
.service-detail ul,
.service-detail h5 {
  margin-bottom: 3%;
}

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

.sect-vision h5 {
  font-family: "Teko", "Noto Sans Thai", serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sect-vision img {
  width: 23% !important;
  margin-bottom: 3%;
}

.sect-vision {
  padding-left: 8%;
  padding-top: 3%;
}

.sect-vision p {
  line-height: 24px;
}

#background679705f596fc0c00131a1dc5 .template1 .col-md-4.col-sm-4.col-xs-12,
#background6797060ad9bd5e0013045fd0 .template1 .col-md-4.col-sm-4.col-xs-12,
#background6797061df1fba800130e177b .template1 .col-md-4.col-sm-4.col-xs-12 {
  width: 33.33%;
}

.pre-service h6,
.contact-page p,
h3.managerHeader,
.service-detail,
.table-product tbody > tr > td,
.product-detail {
  font-family: "Montserrat", "Noto Sans Thai", serif;
}

.pre-service {
  text-align: left;
  padding: 4% 0;
  margin-bottom: 5%;
}

.contact-page p {
  margin-bottom: 1%;
}

.contact-page li {
  display: grid;
  grid-template-columns: 40px auto;
  gap: 10px;
  align-items: baseline;
}

.contact-page ul {
  list-style: none;
  padding: 0;
  margin-top: 3%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

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

div#background6797085f1fe7240013852df3,
div#background67974418c6a85c001a697eb1 {
  width: 85%;
  margin: auto;
  background: #fff !important;
  padding: 4%;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.05);
}

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

div#background6797085f1fe7240013852df3 .form-control,
div#background67974418c6a85c001a697eb1 .form-control {
  box-shadow: none;
  border-radius: 0;
  height: 45px;
  border: none;
  border-bottom: 2px dashed #bfbfbf;
  background: transparent;
}

.contact-page {
  padding-top: 5%;
}

.contact-page li p {
  line-height: 26px;
}

div#background6797085f1fe7240013852df3 .col-md-offset-3,
div#background67974418c6a85c001a697eb1 .col-md-offset-3 {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

div#background6797085f1fe7240013852df3 button,
div#background67974418c6a85c001a697eb1 button {
  text-shadow: none;
  border: none;
  border-radius: 0;
  margin-top: 3%;
}

.page-header {
  padding-bottom: 0;
  margin: 4% 0 0;
  border-bottom: none;
}

div#Contentmanager .img-thumbnail,
div#Contentmanager .thumbnail {
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
}

.Contenemanager-gallery .thumbnail > img,
.Contenemanager-gallery .thumbnail {
  width: 100%;
  border: 1px solid #ddd;
}

.service-detail,
.product-detail {
  padding-left: 5%;
  padding-top: 5%;
}

.service-detail li,
.product-detail li {
  margin-bottom: 1%;
}

.gallery-service hr {
  width: 55px;
  margin-left: 0;
  border-width: 5px;
  border-color: #01ddab;
  margin-bottom: 3%;
}

.Contenemanager-gallery .col-md-3 {
  padding: 0 1% !important;
}

.table-product {
  border: 1px solid #ebebeb;
  margin-top: 3%;
}

.table-product tbody > tr:nth-child(even) {
  background: #75d9c230;
}

.table-product tbody > tr > td {
  border: none !important;
  padding: 2% !important;
  vertical-align: middle !important;
}

div#Component6793439c575acf001392db3b figure img,
.icon-why img,
.social-footer img,
.about-img01 img,
.about-img02 img,
.sect-vision img,
.contact-page li img,
.Contenemanager-gallery .thumbnail > img {
  transition: transform 0.2s ease-out;
}

div#Component6793439c575acf001392db3b figure:hover img,
.sect-why li:hover .icon-why img,
.social-footer img:hover,
.template1 .col-md-4.col-sm-4.col-xs-12:hover .img,
.about-img01 img:hover,
.about-img02 img:hover,
.sect-vision:hover img,
.sect-mission li:hover .icon-why img,
.contact-page li:hover img,
.Contenemanager-gallery .thumbnail > img:hover {
  transform: scale(1.05);
}

.btn-detail:hover::before,
div#background6797085f1fe7240013852df3 button:hover::before,
.template1 .col-md-4.col-sm-4.col-xs-12:hover .btn-detail::before,
div#background67974418c6a85c001a697eb1 button:hover::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.btn-detail::before,
div#background6797085f1fe7240013852df3 button::before,
div#background67974418c6a85c001a697eb1 button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #01ddab;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

div#Contentmanager .img-container {
  overflow: hidden;
  border: 1px solid #dedede;
}

.template1 .col-md-4.col-sm-4.col-xs-12:hover .pre-product h6,
.template1 .col-md-4.col-sm-4.col-xs-12:hover .pre-service h6 {
  color: #db0c0c;
}

.pre-product h6 {
  transition: all 0.2s ease-out;
}
.ITPcookiebar {
  width: 100% !important;
  background-color: #76767687 !important;
  color: #fff;
}

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

.buttonExampleSite:hover {
  background: #01ddab !important;
  color: #ffffff !important;
}

.ITPlinkToCookiepage:hover {
  color: #757b7a !important;
}

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

.itpPDPALandingPage {
  margin-top: 3%;
}

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

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

div#cookie6797085f1fe7240013852df3 {
  padding: 2% 0;
}
/**********************responsive*********************/

@media screen and (min-width: 1900px) {
  .itopplus-banner .container {
    width: 95vw;
  }

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

  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 4.2em;
  }

  h3 {
    font-size: 3.2em;
  }

  h4,
  h3.managerHeader {
    font-size: 2.8em;
  }

  h5 {
    font-size: 2.4em;
  }

  h6 {
    font-size: 1.9em;
  }

  p,
  .table-product tbody > tr > td {
    font-size: 20px;
  }

  .text-service h5 {
    font-size: 46px;
  }

  .text-service h6,
  .text-why h6 {
    font-size: 22px;
  }

  .btn-detail,
  div#background6797085f1fe7240013852df3 button,
  div#background67974418c6a85c001a697eb1 button {
    font-size: 18px;
  }

  .sect-vision .text-green {
    font-size: 44px;
  }

  .icon-why {
    width: 45%;
  }

  .sect-slogan h5 {
    line-height: 44px;
  }

  .text-service {
    bottom: 20px;
  }

  .social-footer {
    width: 50%;
    margin-top: 5%;
  }

  .sect-slogan {
    padding: 7% 0 40%;
  }

  .sect-client {
    margin-top: -65px;
  }

  .sect-vision p,
  .pre-port h6,
  .contact-page li p {
    line-height: 30px;
  }

  .sect-vision img {
    width: 18% !important;
  }

  .sect-mission {
    margin-bottom: -350px;
  }

  .pre-port {
    padding: 5% 0;
  }

  div#background6797085f1fe7240013852df3 .form-control,
  div#background67974418c6a85c001a697eb1 .form-control {
    font-size: 16px !important;
    height: 50px;
  }

  .contact-page {
    padding-top: 3%;
  }

  .service-detail {
    padding-left: 8%;
    padding-top: 8%;
  }

  .ITP-pdpa-template-titleFont {
    font-size: 26px !important;
  }

  .ITP-pdpa-template-contentFont {
    line-height: 32px;
    font-size: 18px !important;
  }
}

@media screen and (max-width: 1680px) {
  .footer {
    padding-top: 16%;
  }

  .sect-slogan {
    padding: 7% 0 40%;
  }

  .sect-mission {
    margin-bottom: -295px;
  }

  .service-detail {
    padding-left: 8%;
    padding-top: 8%;
  }

  .itopplus-banner .container {
    width: 95vw;
  }
}

@media screen and (max-width: 1366px) {
  .footer {
    padding-top: 11%;
    padding-bottom: 3%;
  }

  h1 {
    font-size: 3.8em;
  }

  .sect-why ul,
  .sect-mission ul {
    width: 90%;
  }
}

@media screen and (max-width: 1200px) {
  .itopplus-banner .container {
    display: grid;
    grid-template-columns: 26% auto;
    align-items: center;
  }

  .itopplus-footer {
    background-size: cover;
  }

  .navbar-default .navbar-nav > li > a {
    margin: 15px 8px;
  }

  .text-service {
    width: 80%;
  }

  .sect-why {
    padding: 24% 0 16%;
  }

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

  h6 {
    font-size: 1.4em;
  }

  .btn-detail,
  div#background6797085f1fe7240013852df3 button,
  div#background67974418c6a85c001a697eb1 button {
    padding: 0.75rem 1.5rem;
  }

  .sect-slogan {
    padding: 7% 0 35%;
  }

  h5 {
    font-size: 1.8em;
  }

  .sect-slogan h5 {
    line-height: inherit;
  }

  .footer {
    padding-top: 7%;
    padding-bottom: 1%;
  }

  h2 {
    font-size: 3.2em;
  }

  h3 {
    font-size: 2.6em;
  }

  h4,
  h3.managerHeader {
    font-size: 2.2em;
  }

  .sect-mission {
    margin-bottom: -222px;
  }

  .text-why br,
  .sect-vision br {
    display: none;
  }

  .contact-page li {
    grid-template-columns: 35px auto;
  }

  .contact-page {
    padding-top: 3%;
  }

  .service-detail {
    padding-top: 4%;
  }
}

@media screen and (max-width: 900px) {
  .btn-detail {
  	white-space: nowrap;
  }
  
  .text-service {
    bottom: 0;
  }

  .text-service h5 {
    font-size: 30px;
    margin-bottom: 2%;
  }

  .sect-why {
    padding: 22% 0 16%;
  }

  br,
  .content-footer,
  .cont-footer {
    display: none;
  }

  .sect-why ul,
  .sect-mission ul {
    width: 95%;
  }

  .btn-detail,
  div#background6797085f1fe7240013852df3 button,
  div#background67974418c6a85c001a697eb1 button {
    padding: 0.75rem;
  }

  .pre-product h6 {
    font-size: 14px;
  }

  .sect-slogan br {
    display: block;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4,
  h3.managerHeader {
    font-size: 28px;
  }

  h5 {
    font-size: 24px;
  }

  h6 {
    font-size: 20px;
  }

  .text-service h6 {
    margin-top: 0;
  }

  .itopplus-footer {
    background-size: cover;
  }

  .footer {
    padding-top: 2%;
    padding-bottom: 1%;
  }

  .sect-vision {
    padding-top: 0;
  }

  .about-cert {
    gap: 10px;
  }

  .sect-mission {
    margin-bottom: 0;
    padding: 8% 0 16%;
  }

  .pre-service h6 {
    margin-bottom: 5%;
  }

  .pre-service {
    padding: 5% 0;
    margin-bottom: 5%;
  }

  div#Contentmanager .col-md-6.pull-left,
  div#Contentmanager .col-md-6.pull-right {
    width: 50%;
  }

  .Contenemanager-gallery .col-md-3 {
    width: 33.33%;
  }

  .gallery-service hr,
  .pre-port {
    margin-bottom: 5%;
  }

  .pre-port h6 {
    font-size: 16px;
    line-height: inherit;
  }

  .contact-page ul {
    grid-template-columns: repeat(1, 1fr);
  }

  div#background67974418c6a85c001a697eb1 {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  div#Component6793439c575acf001392db3b {
    margin-bottom: 0;
  }

  div#Component6793439c575acf001392db3b .thumbs,
  div#Component6793439c575acf001392db3b .col-md-4.col-sm-4.col-xs-12,
  div#mainmenu679369fd96fc0c00131a0cd1 > div {
    padding: 0 !important;
  }

  div#Component6793439c575acf001392db3b figure {
    overflow: hidden;
  }

  .text-service {
    bottom: 25px;
  }

  .sect-why ul,
  .sect-mission ul {
    width: 100%;
    margin-top: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 10px;
    margin-top: 5%;
  }

  .sect-why li:nth-child(2),
  .sect-why li:nth-child(3),
  .sect-mission li:nth-child(1),
  .sect-mission li:nth-child(4) {
    margin-top: 0;
  }

  .sect-why {
    background-size: auto;
    padding: 10% 3% 12%;
    background-position: center;
  }

  .pt-8.sect-service {
    padding-top: 12%;
    margin-bottom: 5%;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 28px;
  }

  h4,
  h3.managerHeader {
    font-size: 24px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .pre-product h6 {
    font-size: 16px;
  }

  .sect-slogan {
    padding: 15% 3% 15%;
    background-size: auto;
    background-position: center 20%;
  }

  .sect-slogan h2 {
    margin-top: 2%;
    margin-bottom: 0;
  }

  .marquee-item {
    flex: 0 0 20vw;
  }

  .sect-vision {
    padding-left: 0;
    margin-top: 10%;
  }

  .sect-vision img {
    width: 30% !important;
    margin-bottom: 5%;
  }

  .sect-mission {
    background-size: auto;
    padding: 10% 3% 10%;
    background-position: center;
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_04002024a6rw/1903/0/bg-whyz-z1155970086448.webp);
  }

  .footer {
    padding-top: 17%;
    padding-bottom: 3%;
  }

  .sect-client {
    margin-top: 12%;
  }

  .pt-5.head-page {
    padding-top: 10%;
  }

  #background679705f596fc0c00131a1dc5 .template1 .col-md-4.col-sm-4.col-xs-12,
  #background6797060ad9bd5e0013045fd0 .template1 .col-md-4.col-sm-4.col-xs-12,
  #background6797061df1fba800130e177b .template1 .col-md-4.col-sm-4.col-xs-12,
  .template1 .col-md-4.col-sm-4.col-xs-12 {
    width: 100%;
    padding: 0 !important;
  }

  div#Contentmanager .col-md-6.pull-left,
  div#Contentmanager .col-md-6.pull-right {
    width: 100%;
    padding: 0;
    float: none !important;
  }

  .service-detail,
  .product-detail,
  .contact-page {
    padding: 0;
  }

  div#Contentmanager .col-md-12.text-justify {
    padding: 0 2%;
  }

  .service-detail ul {
    margin-bottom: 6%;
  }

  .Contenemanager-gallery .col-md-3 {
    width: 100%;
    padding: 0 3% !important;
  }

  div#background679369fd96fc0c00131a0cd1 .template1 .col-md-4.col-sm-4.col-xs-12 {
    width: 50%;
    padding: 0 3% !important;
  }

  .pre-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 6% 0;
    margin-bottom: 5%;
  }

  div#background679369fd96fc0c00131a0cd1 .pre-product {
    padding: 8% 0;
    margin-bottom: 8%;
  }

  .table-product,
  .contact-page ul {
    margin-top: 6%;
  }

  .pre-port {
    padding: 5% 0;
  }

  .pre-port h6 {
    margin-bottom: 4%;
  }

  .social-share {
    top: 0;
  }

  div#background67974418c6a85c001a697eb1 {
    width: 100%;
  }
  .ITPcookiebar {
    padding: 3% 2%;
    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: 12px;
  }

  .itopplus-footer {
    background-position: top;
  }

  div#cookie67974418c6a85c001a697eb1 {
    padding: 3% 0;
  }

  div#Component6793439c575acf001392db3b figure:hover img,
  .sect-why li:hover .icon-why img,
  .social-footer img:hover,
  .template1 .col-md-4.col-sm-4.col-xs-12:hover .img,
  .about-img01 img:hover,
  .about-img02 img:hover,
  .sect-vision:hover img,
  .sect-mission li:hover .icon-why img,
  .contact-page li:hover img,
  .Contenemanager-gallery .thumbnail > img:hover {
    transform: scale(1);
  }

  div#background67974418c6a85c001a697eb1 {
    display: block;
  }
}