.itopplus-background {

}
body {
    overflow-x: hidden;
}


.itopplus-bg, .itopplus-pos2 {
    background-image: url('https://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/0/0/1z-z1182190092558.webp');
}

.itopplus-bg3 {
    background-image: url('https://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/0/0/3z-z382593607615.webp');
}

.itopplus-footer::after {
    display: block;
    content: "";
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #c09a47 0, #f7eec5 55% , #e5bc53 100%);
}


/************Menu***************/
.navbar-default .navbar-nav>li>a {
    color: #000;
    margin: 0 15px;
    padding: 10px 3px;
}

.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: #000 !important;
    box-shadow: 0px 3px 0px 0px #ca9e40;
    border-radius: none;
    background: transparent;
    background-color: transparent;
}

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

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
        color: #fff;
    background: #caaa5e;
}

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

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #444 !important;
        color: #444 !important;
    }

    #controlMenu,
    #controlMenu i,
    #controlMenu li a {
        color: #444 !important;
    }

    .navbar-default {
        background: #fff;
    }

    .navbar-header {
        display: flex;
        flex-direction: row-reverse;
        box-shadow: 0 0 3px 0 #ccc;
        padding: 0 10px;
    }

    .itopplus-logo img {
        position: fixed;
        object-fit: contain;
        width: 45px !important;
        top: 3px;
        left: 15px;
    }
}

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

    .navbar-default {
        background: transparent;
    }

    #controlBanner {
        object-fit: contain;
        padding: 15px;
        width: 75%;
        margin: 0 auto;
        position: absolute;
    }

    #controlPosition {
        margin-top: 2.5%;
        text-align: right;
    }

    .no-js .itopplus-banner {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 100;
        background: #fff;
        transition: .3s;
      	height: 95px;
    }

    

}

@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.2em;
}

h3 {
    font-size: 2.8em;
}

h4 {
    font-size: 2.4em;
}

h5 {
    font-size: 2em;
}

h6 {
    font-size: 1.4em;
}

p , .text-exam h6, .table-product>thead>tr>th{
    font-size: 16px;
}

 .text-spare h6{
    font-size: 18px;
}

.btn-service ,.btn-more, div#formdisplay6630acabeab55f0013659a02 button,
.pre-art p, div#Component663333da2941af0013f1b60c button{
    font-size: 14px;
}

.text-spare h5 {
    font-size: 20px;
}

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

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

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

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

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

.navbar-nav>li#menu663057972941af0013f19907:hover .dropdown-menu,
.navbar-nav>li#menu663057812941af0013f198bd:hover>.dropdown-menu{
    display: block;
}

div#Component66305b16017a6d0012f60e6b .thumbs,
.btn-call3, .pre-art .btn-more, .text-spare h6{
    margin: 0;
}

.logo-footer {
    width: 60%;
    margin: auto;
}

.call-footer h6, .call-footer p {
    margin: 2% 0;
}

.call-footer {
    display: grid;
    grid-template-columns: 15% auto;
    gap: 15px;
    align-items: center;
}

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

.logo-dba {
    width: 60%;
    margin-top: 6%;
}

.copy-right p {
    font-size: 13px;
}

div#mainmenu66306080eab55f0013658edd .col-md-3.col-sm-6.col-xs-12:nth-child(3),
div#mainmenu663065ac017a6d0012f610ce .col-md-3.col-sm-6.col-xs-12:nth-child(3){
    width: 15%;
}

div#mainmenu66306080eab55f0013658edd .col-md-3.col-sm-6.col-xs-12:nth-child(2),
div#mainmenu663065ac017a6d0012f610ce .col-md-3.col-sm-6.col-xs-12:nth-child(2){
    width: 35%;
}

.logo-dba , .copy-right{
    margin-left: 15%;
}

.text-call a, .sect-request h5, .sect-request h6, .text-white {
    color: #fff;
}

.text-call a:hover, .sect-about h5, .about-page h4, .text-gold, .service-page h4,
.cont-page a:hover{
    color: #caaa5e;
}

.ff-monts, .sect-head h2, .sect-cate h3, .head-page h2, .btn-call3 h6, .exam-product h5,
.product-detail h5{
    font-family: "Montserrat","Noto Sans Thai",sans-serif;
}

.ff-monts, .footer h6, .text-call h6, .sect-about h3,
.sect-about h5, .sect-head h2, .sect-service h3, .sect-cate h3,
 .about-page h5, .sect-request h5, .text-step h6, .service-page h4,
.service-detail h6, .product-detail h5, .contact-page h5{
    font-weight: 700;
}

.head-page h2,.fw-semi, .about-page h4, .form-reques h4,
.exam-product h5, .cont-page p{
    font-weight: 600;
}

.text-product p{
    color: #000;
    font-weight: 500;
    margin-bottom: 8%;
}

figure.effect-jazz figcaption::after ,
.table-product2>tbody>tr>td, .dropdown-menu{
    border: none;
}

figure.effect-jazz {
    border-radius: 20px;
}

div#Component663066bda8754a0013c60fe1 {
    padding-right: 15%;
}

div#Component663066d6eab55f0013658fb9 {
    padding-left: 15%;
}

.sect-about h3, .sect-service h3, .about-page h5, .form-reques h4, .exam-product h5,
.service-page h6,.service-detail h6, .product-detail h5, .contact-page h5{
    color: #0f1f2f;
}

.sect-about {
    text-align: center;
    margin-top: -40px;
}

.sect-service p,.sect-request h6, .pre-art p{
    margin-bottom: 5%;
}

.sect-about h5 {
    margin-bottom: 2%;
}

.sect-about p, .sect-service p, .about-page p, .text-exam h6 {
    color: #000;
    line-height: 26px;
}

.icon-about li img {
    width: 90% !important;
    margin-bottom: 8%;
}

.icon-about ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
    text-align: center;
    margin-top: 7%;
}

.sect-head, .head-page ,.table-product thead>tr>th, 
.table-product tbody>tr>td, .service-page, .head-page2{
    text-align: center;
}

.sect-head h2, .sect-head h6  {
    color: #11213b;
}

.items-product {
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/565/0/Group3z-z497012893459.webp);
    display: grid;
    grid-template-columns: 50% 47%;
    gap: 15px;
    padding: 8% 4% 10% 0;
    align-items: start;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 295px;
      background-size: cover;
}

.text-product h5, .text-product h6 {
    color: #b48b32;
    margin-bottom: 5%;
}

.btn-more {
    background: #07174a;
    width: fit-content;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    margin-bottom: 12%;
  transition: transform 0.2s ease-out;
}

.img-bg01 {
    width: 80%;
    margin: auto;
    margin-right: -20px;
  transition: transform 0.2s ease-out;
}

.sect-service {
    padding-left: 20%;
}

.sect-service h3 {
    line-height: 54px;
}

.about-page h5 {
    line-height: 45px;
}

.btn-service {
    background: linear-gradient(to right, rgba(192, 154, 71, 1) 0%, rgba(247, 238, 197, 0.85) 42%, 
      rgba(247, 238, 197, 0.87) 51%, rgba(247, 238, 197, 0.89) 59%, rgba(229, 188, 83, 1) 100%);
    width: fit-content;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    color: #000;
  transition: transform 0.2s ease-out;
}

.img-bg02 {
    position: relative;
    left: 75px;
  transition: transform 0.2s ease-out;
}

.img-bg03 {
    position: absolute;
    top: 0;
  transition: transform 0.2s ease-out;
}

.img-bg04 {
    position: absolute;
    top: -120px;
    right: 0;
    width: 105%;
  transition: transform 0.2s ease-out;
}

.sect-cate h3 , .text-step h6{
    color: #706035;
}

.img-book {
    margin-top: -80px;
    margin-bottom: -105px;
  transition: transform 0.2s ease-out;
}

.sect-cate .btn-more, .sect-cate h3, .pre-product .btn-more {
    margin-bottom: 0;
}

.sect-cate {
    display: flex;
    gap: 40px;
    align-items: center;
    padding-left: 10%;
    padding-top: 10%;
}

.btn-howto {
    display: grid;
    grid-template-columns: 37px auto;
    gap: 10px;
    align-items: center;
    background: linear-gradient(to right, rgba(192, 154, 71, 1) 0%, rgba(247, 238, 197, 0.85) 42%, 
      rgba(247, 238, 197, 0.87) 51%, rgba(247, 238, 197, 0.89) 59%, rgba(229, 188, 83, 1) 100%);
    padding: 1.5rem 3rem;
    border-radius: 10px;
  transition: transform 0.2s ease-out;
}

.btn-cont{
    display: grid;
    grid-template-columns: 35px auto;
    gap: 10px;
    align-items: center;
    background: linear-gradient(to right, rgba(16, 32, 57, 1) 0%, rgba(35, 65, 117, 1) 42%, 
      rgba(35, 65, 117, 1) 52%, rgba(35, 65, 117, 1) 61%, rgba(14, 30, 55, 1) 100%);
    padding: 1.5rem 3rem;
    border-radius: 10px;
  transition: transform 0.2s ease-out;
}

.group-btn {
    display: flex;
    width: 80%;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
    justify-content: center;
    margin: auto;
}

.btn-line {
    width: 16%;
  transition: transform 0.2s ease-out;
}

.btn-howto h5 {
    margin: 0;
    font-weight: 600;
    color: #706035;
}

.btn-cont h5 {
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.eapps-widget-toolbar, .form-reques span, 
div#formdisplay6630acabeab55f0013659a02 .glyphicon,
.Text_seller2{
    display: none;
}

.group-social {
    margin-top: 5%;
    text-align: center;
    margin-bottom: 4%;
}

.btn-line2, .btn-face, .btn-call2{
    display: grid;
    grid-template-columns: 25px auto;
    gap: 5px;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
  transition: transform 0.2s ease-out;
}

.pass-btn {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-line2 {
    background: linear-gradient(to right, rgba(192, 154, 71, 1) 0%, rgba(247, 238, 197, 1) 42%, 
      rgba(247, 238, 197, 1) 51%, rgba(247, 238, 197, 1) 59%, rgba(229, 188, 83, 1) 100%);
    color: #000;
}

.btn-face {
    background: linear-gradient(to right, rgba(16, 32, 57, 1) 0%, rgba(35, 65, 117, 1) 42%, 
      rgba(35, 65, 117, 1) 52%, rgba(35, 65, 117, 1) 61%, rgba(14, 30, 55, 1) 100%);
      color: #fff;
}

.btn-call2 {
    border: 2px solid #cdcdcd;
    color: #000;
    background: #fff;
}

.group-social h6 , .about-page h4, .about-page p{
    margin-bottom: 2%;
}

.pass-btn a {
    width: 13%;
}

.head-page, .head-page2 {
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/1140/0/bannr-pagez-z1451038682051.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 4% 0 3%;
}

.head-page2 {
    height: 200px;
    position: relative;
}

.pass-about img {
    border-radius: 20px;
}

.pass-about , .pass-about02{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pass-about02 {
    grid-template-columns: repeat(1, 1fr);
}

.about-page {
      text-align: center;
}

.representative {
    position: relative;
}

.representative h6 {
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
    color: #000;
    background: linear-gradient(to right, rgba(192, 154, 71, 1) 0%, rgba(247, 238, 197, 1) 42%, rgba(247, 238, 197, 1) 51%, rgba(247, 238, 197, 1) 59%, rgba(229, 188, 83, 1) 100%);
    width: fit-content;
    margin: 2% auto 4%;
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 10px;
}

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

.sect-request {
    text-align: center;
    padding: 8% 2%;
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/1140/0/scscz-z1404650930152.webp);
    background-repeat: no-repeat;
    border-radius: 20px;
    background-size: cover;
}

.line-qr {
    width: 30%;
    margin: auto;
    margin-bottom: 5%;
}

.btn-call3 {
    justify-content: center;
    gap: 10px;
    grid-template-columns: 25px auto;
    display: grid;
    align-items: center;
    background: #fff;
    width: fit-content;
    padding: 0.65rem 3rem;
    border-radius: 30px;
    margin: auto;
    transition: transform 0.2s ease-out;
}

.btn-call3 h6, .cont-page a {
    color: #000;
}

div#formdisplay6630acabeab55f0013659a02, figure.effect-selena {
    background: transparent !important;
}

.form-reques h4 {
    border-left: 3px solid #e4c778;
    padding-left: 2%;
}

div#formdisplay6630acabeab55f0013659a02 .form-control,
div#Component663333da2941af0013f1b60c .form-control{
    box-shadow: none;
    border-radius: 0;
    border: none;
    background: transparent;
    border-bottom: 1px solid #8d8d8d;
    margin-bottom: 2rem;
}

div#formdisplay6630acabeab55f0013659a02 input::placeholder, 
div#formdisplay6630acabeab55f0013659a02 textarea::placeholder,
div#Component663333da2941af0013f1b60c input::placeholder,
div#Component663333da2941af0013f1b60c textarea::placeholder{
    color: #000;
}

div#formdisplay6630acabeab55f0013659a02 .col-md-offset-5,
div#Component663333da2941af0013f1b60c .col-md-offset-3{
    margin: initial;
    width: 100%;
    text-align: center;
}

div#formdisplay6630acabeab55f0013659a02 button,
div#Component663333da2941af0013f1b60c button{
    background-image: none;
    text-shadow: none;
    border: none;
    border-radius: 30px;
    background: linear-gradient(to right, rgba(192, 154, 71, 1) 0%, rgba(247, 238, 197, 1) 42%, 
      rgba(247, 238, 197, 1) 51%, rgba(247, 238, 197, 1) 59%, rgba(229, 188, 83, 1) 100%);
    padding: 0.75rem 2rem;
    color: #000;
  transition: transform 0.2s ease-out;
}

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

.pre-art h6 {
    margin: 0;
    margin-bottom: 2%;
    line-height: 24px;
    color: #07174a;
    font-weight: 700;
}

.pre-art {
    text-align: left;
    background: #fff;
    padding: 5% 3% 8%;
}


div#mainmenu6630caa6a8754a0013c61b51 .col-md-4.col-sm-4.col-xs-12:nth-child(3) {
    display: none !important;
}

div#mainmenu6630caa6a8754a0013c61b51 .none-middle-mid .none-middle-mid {
    display: block;
}

div#mainmenu6630caa6a8754a0013c61b51 .none-middle-mid {
    display: flex;
    justify-content: center;
}

.step-howto .number {
    position: absolute;
}

.step-howto {
    text-align: center;
    background: #fff;
    padding: 5%;
    position: relative;
    height: 235px;
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
    background-image: url(http://itp1.itopfile.com/ImageServer/z_itp_15012023i84e/565/0/Group3z-z497012893459.webp);
    background-repeat: no-repeat;
    background-position: center 70%;
  transition: transform 0.2s ease-out;
      background-size: cover;
}

.step-howto img {
    width: 30% !important;
    margin-bottom: 3%;
}

.step-howto .number {
    position: absolute;
    background: #eed384;
    padding: 1rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-family: "Montserrat", "Noto Sans Thai", sans-serif;
    font-weight: 600;
}

div#Component6632f91aa8754a0013c61e91 .col-md-4.col-sm-4.col-xs-12,
div#Component663312421c278b001305635f .col-md-4.col-sm-4.col-xs-12,
div#Component66331595017a6d0012f626fa .col-md-4.col-sm-4.col-xs-12,
div#Component66331563017a6d0012f626cb .col-md-4.col-sm-4.col-xs-12,
div#Component663316bc017a6d0012f6274f .col-md-4.col-sm-4.col-xs-12,
div#Component66331a4a1c278b001305659f .col-md-4.col-sm-4.col-xs-12,
div#Component6630bf41017a6d0012f61a6b .col-md-4.col-sm-4.col-xs-12 {
    width: 23%;
    padding: 1% !important;
    text-align: center;
    background: #fff;
    margin: 1%;
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
    border-radius: 10px;
  transition: transform 0.2s ease-out;
}

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

.pre-product .btn-more {
    margin: auto;
}

.pre-product h6 {
    margin-bottom: 4%;
    color: #000;
  font-family: "Montserrat", "Noto Sans Thai", sans-serif;
      height: 47px;
}

div#Component6632ff252941af0013f1ae3c figcaption {
    padding: 0;
    position: static;
    text-transform: none;
}

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

div#Component6632ff252941af0013f1ae3c figure.effect-selena h2 {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
}

.exam-product h5 {
    padding: 1%;
    border-left: 3px solid #e4c778;
    margin-bottom: 2rem;
}

.exam-product li {
    list-style: none;
    margin-bottom: 1%;
}

.blog-pieces {
    display: grid;
    grid-template-columns: 20% auto;
    gap: 10px;
    align-items: center;
    background: #fff;
    border-right: 3px solid #e4c778;
    border-radius: 10px;
}

.img-page-product {
    margin: 3% 3% 10%;

}

.img-page-product img {
    height: 165px;
      object-fit: contain;
}

.table-product>thead>tr>th {
    border: none;
    padding: 1.5rem 0.5rem !important;
}

.table-product>thead {
    background: linear-gradient(to right, rgba(16, 32, 57, 1) 0%, rgba(35, 65, 117, 1) 42%, 
      rgba(35, 65, 117, 1) 52%, rgba(35, 65, 117, 1) 61%, rgba(14, 30, 55, 1) 100%);
    color: #fff;
}

.table-product>tbody>tr>td {
    border: 1px solid #ddd;
    vertical-align: middle;
}

div#InmyDiv1714622626152 video {
    height: 300px !important;
    background: #000;
    border-radius: 10px;
}

div#Component6632f91aa8754a0013c61e91 .img-container .img,
div#Component663312421c278b001305635f .img-container .img,
div#Component66331595017a6d0012f626fa .img-container .img,
div#Component66331563017a6d0012f626cb .img-container .img,
div#Component663316bc017a6d0012f6274f .img-container .img,
div#Component66331a4a1c278b001305659f .img-container .img{
    border-bottom: 2px solid #07174a;
}

.text-spare {
    text-align: center;
    background: #fff;
    padding: 5% 3% 8%;
    border-radius: 0 0 10px 10px;
}

.text-spare h6 {
    height: 35px;
}

.text-spare h5 {
    font-weight: 600;
    border-bottom: 2px solid #e4c778;
    width: fit-content;
    margin: auto;
    margin-top: 3%;
    padding: 1% 2% 3%;
    margin-bottom: 5%;
    color: #07174a;
}

div#Component66331709017a6d0012f6276d .thumbs {
    box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
    padding: 0 !important;
}


div#Component6630bf41017a6d0012f61a6b .col-md-4.col-sm-4.col-xs-12 {
  width: 31%;
}

div#Component6632ff252941af0013f1ae3c .imgLightbox img,
div#HtmlTool66331c0fa8754a0013c62581 iframe,
div#Component66331709017a6d0012f6276d .thumbs,
.navbar-nav>li>.dropdown-menu, .dropdown-submenu>.dropdown-menu{
    border-radius: 10px;
}

.img-pieces img {
    border-radius: 10px 0 0 10px;
}

.table-bordered {
    border: 1px solid #ddd;
    border-radius: 20px;
    border-collapse: separate;
    border-spacing: inherit;
}

.table-product>thead>tr>th , div#Component66331709017a6d0012f6276d .imgLightbox img{
    border-radius: 10px 10px 0 0;
}

.table-product>tbody>tr:last-child>td:nth-child(1) {
   border-radius: 0 0 0 20px;
}

.service-detail {
    padding-left: 3%;
}

.service-detail li {
    margin-bottom: 1%;
    text-indent: 30px;
}

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

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

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

.zIndex-pos2 {
    z-index: 99;
}

h3.managerHeader {
    position: absolute;
    top: -130px;
    z-index: 999;
    color: #fff;
    width: 100%;
    text-align: center;
    font-family: "Montserrat", "Noto Sans Thai", sans-serif;
    font-weight: 700;
}

.Textmanager {
    text-align: left;
}

.w-50 {
    width: 50%;
    float: right;
}

.table-product2 tbody>tr:nth-child(odd) {
    background: #dddddd42;
}

.table-product2 {
    margin-top: 1rem;
    background: #fff;
}

.product-detail h5 {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.product-detail li {
    text-indent: 30px;
    margin-bottom: 1rem;
}

.product-detail ul {
    list-style: none;
    padding: 0;
}

div#Component6630bf41017a6d0012f61a76 .img-thumbnail, 
div#Component6630bf41017a6d0012f61a76 .thumbnail, 
div#Component6630bf41017a6d0012f61a76 .thumbnail img {
    padding: 0;
    border: none;
    border-radius: 10px;
}

div#Component66bb1d5abdde450013276903 .thumbnail {
	box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
  	border: none;
}

.cont-page {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    margin-top: 3%;
    gap: 10px;
}

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

div#Component663333da2941af0013f1b60c {
    background: #fff;
    padding: 3% 5%;
}

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

div#Component663333da2941af0013f1b60c .form-control {
    margin-bottom: 1rem;
}

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

.items-product:hover .img-product, .icon-about li:hover,
.img-bg01:hover, .img-bg02:hover, .img-bg03:hover, .img-bg04:hover,
.img-book:hover, .btn-line:hover, .btn-line2:hover, .btn-face:hover, 
.btn-call2:hover, .btn-cont:hover, .btn-howto:hover, .btn-more:hover,
.btn-service:hover, .social-footer img:hover, .pass-about img:hover,
.representative img:hover,div#Component6632f91aa8754a0013c61e91 .col-md-4.col-sm-4.col-xs-12:hover,
div#Component663312421c278b001305635f .col-md-4.col-sm-4.col-xs-12:hover,
div#Component66331595017a6d0012f626fa .col-md-4.col-sm-4.col-xs-12:hover,
div#Component66331563017a6d0012f626cb .col-md-4.col-sm-4.col-xs-12:hover,
div#Component663316bc017a6d0012f6274f .col-md-4.col-sm-4.col-xs-12:hover,
div#Component66331a4a1c278b001305659f .col-md-4.col-sm-4.col-xs-12:hover,
div#Component6630bf41017a6d0012f61a6b .col-md-4.col-sm-4.col-xs-12:hover,
div#formdisplay6630acabeab55f0013659a02 button:hover,.line-qr img:hover,
div#Component663333da2941af0013f1b60c button:hover, .btn-call3:hover,
.step-howto:hover, div#Component66331709017a6d0012f6276d .col-md-3.col-sm-4.col-xs-4:hover,
.head-contact>div:hover{
    transform: scale(1.05);
}

.img-product , .icon-about li, .social-footer img, .pass-about img,
.representative img, .line-qr img, div#Component66331709017a6d0012f6276d .col-md-3.col-sm-4.col-xs-4,
.head-contact>div {
  transition: transform 0.2s ease-out;
}

.items-product:hover .btn-more , .btn-more:hover, .btn-howto:hover,.btn-line2:hover,
div#Component6632f91aa8754a0013c61e91 .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component663312421c278b001305635f .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component66331595017a6d0012f626fa .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component66331563017a6d0012f626cb .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component663316bc017a6d0012f6274f .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component66331a4a1c278b001305659f .col-md-4.col-sm-4.col-xs-12:hover .btn-more,
div#Component6630bf41017a6d0012f61a6b .col-md-4.col-sm-4.col-xs-12:hover .btn-more{
    background: rgba(229, 188, 83, 1) ;
}

.btn-service:hover , .btn-cont:hover, .btn-face:hover,
div#formdisplay6630acabeab55f0013659a02 button:hover, 
div#Component663333da2941af0013f1b60c button:hover,
.btn-call3:hover{
    background: #07174a;
    color: #fff;
}

.btn-call2:hover {
    background: #cdcdcd;
}

.btn-call3:hover h6 {
    color: #fff;
}

.btn-call3:hover img {
   filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(587%) hue-rotate(208deg) brightness(116%) contrast(100%);
}

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

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

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

.ITPlinkToCookiepage:hover {
    color: #1b5997 !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;
}

.table-product2 tbody>tr:hover, .table-product tbody>tr:hover {
    background: #09a6e542 !important;
}

.about-page .icon-about {
    width: 35%;
    margin: auto;
}

.representative h6:hover {
    background: rgba(229, 188, 83, 1);
}

.product-detail h6 {
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.head-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 60%;
    gap: 10px;
}

/****************responsive*******************/

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


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

h1 {
    font-size: 4.625em;
}

h2 {
    font-size: 3.8em;
}

h3 {
    font-size: 3.4em;
}

h4 {
    font-size: 3em;
}

h5 {
    font-size: 2.6em;
}

h6 {
    font-size: 1.8em;
}

p , .text-exam h6, .table-product>thead>tr>th{
    font-size: 20px;
}

 .text-spare h6{
    font-size: 22px;
}

.btn-service ,.btn-more, div#formdisplay6630acabeab55f0013659a02 button,
.pre-art p, div#Component663333da2941af0013f1b60c button,.table-product>tbody>tr>td,
   .table-product2>tbody>tr>td{
    font-size: 18px;
}

.text-spare h5 {
    font-size: 26px;
}

.copy-right p, div#formdisplay6630acabeab55f0013659a02 .form-control, div#Component663333da2941af0013f1b60c .form-control {
    font-size: 16px !important;
}

.representative h6 {
    font-size: 20px;
}
  
  .no-js .itopplus-banner {
    height: 110px;
}
  
  .sect-about p, .sect-service p, .about-page p, .text-exam h6 {
    line-height: 32px;
}
  
  .icon-about li img {
    width: 80% !important;
  }
  
  .items-product {
    height: 400px;
}
  
  .sect-service h3 {
    line-height: 62px;
}
  
.img-bg04 {
    right: 60px;
    top: -125px;
    width: 100%;
}
  
  .img-bg01 {
    top: 45px;
    position: relative;
}
  
  .img-bg03 {
    width: 96%;
}
  
  .img-book {
    width: 95%;
    margin-bottom: -135px;
}
  
  .btn-cont, .btn-howto {
    padding: 2rem 4rem;
}
  
  .btn-line {
    width: 18%;
  }
  
  .btn-line2, .btn-face, .btn-call2 {
    padding: 1.5rem 3rem;
    grid-template-columns: 30px auto;
}
  
  .btn-more, .btn-service {
    padding: 1rem 2rem;
}
  
  .social-footer {
    width: 85%;
    gap: 15px;
}
  
  div#InmyDiv1714622626152 video {
    height: 375px !important;
  }
  
  .img-page-product img {
    height: 155px;
}
  
  .table-product2>tbody>tr>td {
    padding: 1.5rem 1rem;
}
  
  div#formdisplay6630acabeab55f0013659a02 input.form-control, 
  div#Component663333da2941af0013f1b60c input.form-control {
    height: 45px;
}
  
  .pre-art {
    padding: 5% 3% 5%;
}
  
  .step-howto {
    height: 320px;
}
  
  .step-howto img {
    width: 27% !important;
  }
  
  .step-howto .number {
    width: 50px;
    height: 50px;
}
  
  .cont-page {
    grid-template-columns: 50px auto;
    margin-top: 2%;
}

  .ITP-pdpa-template-titleFont {
    font-size: 24px !important;
  }
  
  .ITP-pdpa-template-contentFont {
    line-height: 32px;
    font-size: 18px !important;
}
  
  .head-contact {
    width: 52%;
    margin-top: -10px;
    gap: 15px;
}
}

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


.img-page-product img {
    height: 120px;
  }
  
  h3.managerHeader {
    font-size: 2.2em;
}
  
  .step-howto {
    height: 250px;
}
}

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

h5 {
    font-size: 1.8em;
}
  
  .sect-about br, .sect-service p br, div#contentnewmode66306ca3017a6d0012f61163  {
    display: none;
}
  
  .sect-about p, .sect-service p, .about-page p, .text-exam h6, .sect-service h3,
  .about-page h5{
    line-height: inherit;
}
  
  .icon-about ul {
    gap: 15px;
}
  
  .items-product {
    height: 240px;
    padding: 6% 3% 6% 0;
}
  
  h3 {
    font-size: 2.4em;
}
  
  h4 {
    font-size: 2em;
}
  
  h6 {
    font-size: 18px;
}
  
  
.img-book {
    margin-top: -60px;
    margin-bottom: -90px;
  }
  
  .btn-line {
    width: 20%;
  }
  
  .pass-btn a {
    width: 17%;
}
  
  div#mainmenu66306080eab55f0013658edd .col-md-3.col-sm-6.col-xs-12:nth-child(2), 
  div#mainmenu663065ac017a6d0012f610ce .col-md-3.col-sm-6.col-xs-12:nth-child(2),
  div#mainmenu66306080eab55f0013658edd .col-md-3.col-sm-6.col-xs-12:nth-child(3), 
  div#mainmenu663065ac017a6d0012f610ce .col-md-3.col-sm-6.col-xs-12:nth-child(3){
    width: 25%;
}
  
  .social-footer {
    width: 70%;
}

  .about-page.pt-8 {
    padding-top: 4%;
}
  
  .pre-product h6 {
    margin-bottom: 10%;
  }
  
  .blog-pieces {
    grid-template-columns: 25% auto;
}
  
 .Textmanager iframe {
    width: 100%;
}
  
  h2 {
    font-size: 2.8em;
}
}

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

    h5 {
        font-size: 20px;
    }
  
  div#contentnewmode66306d7beab55f001365903f,
  div#contentnewmode663079c92941af0013f19c62,
  div#formdisplay6630acabeab55f0013659a02 .col-md-12.col-sm-12, 
  div#formdisplay6630acabeab55f0013659a02 .col-md-6.col-sm-12{
    padding: 0 !important;
}
  
  p, .text-exam h6, .table-product>thead>tr>th {
    font-size: 14px;
}
  
      .items-product {
        height: 235px;
  }
  
      h3 {
        font-size: 26px;
    }
  
      h4 {
        font-size: 24px;
    }
  
      h2 {
        font-size: 34px;
    }
  
  .img-bg04 {
    top: -75px;
}
  
  .img-bg02 {
    left: 10px;
}
  
  .sect-service {
    padding-left: 6%;
    margin-bottom: 5%;
}
  
  .img-book {
        margin-top: -45px;
        margin-bottom: -75px;
    }
  
  .group-btn {
    gap: 20px;
    width: 85%;
}
  
      .btn-line {
        width: 23%;
    }
  
  .btn-cont, .btn-howto {
    padding: 1rem 3rem;
    grid-template-columns: 30px auto;
}
  
      .pass-btn a {
        width: 20%;
    }
  
  div#mainmenu66306080eab55f0013658edd .col-md-3.col-sm-6.col-xs-12,
  div#mainmenu663065ac017a6d0012f610ce .col-md-3.col-sm-6.col-xs-12{
    width: 100%;
    text-align: center;
}
  
  .logo-dba, .copy-right {
    margin-left: 0;
}
  
  .pre-product h6 {
    height: 40px;
}
  
  div#Component6632ff252941af0013f1ae3c .col-md-4.col-sm-4.col-xs-6.col-sm-5fix {
    width: 20%;
}
  
      .blog-pieces {
        grid-template-columns: 20% auto;
    }
  
  .table-responsive {
    border: none;
}
  
  .pt-5.table-responsive {
    padding-top: 0;
}
  
  div#Component6630bf41017a6d0012f61a76 .col-md-6.pull-left {
    width: 50%;
}
  
  .head-page2,  .head-page {
    height: 125px;
  }
  
  h3.managerHeader {
    top: -115px;
}
  
  .head-page {
    padding: 4% 0 0;
}
  
  div#formdisplay6630acabeab55f0013659a02 {
    padding: 0 3%;
}
  
  .pre-art h6, .pre-art p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

      h3.managerHeader {
        font-size: 24px;
    }
  
      .step-howto {
        height: 225px;
    }
  
 .about-page .icon-about {
    width: 40%;
  }
  
  div#mainmenu665fd9a620090100133b1751 {
    display: none;
}
  
  div#contentnewmode666171c3a0c0f600135d4903,
  div#contentnewmode6661730bcdad8a00132d5f8c{
    display: none;
}
  
  .new-image-icon-facebook {
    display: none !important;
}
}

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

div#imagesControl66305b16017a6d0012f60e6b,
  div#Component663066d6eab55f0013658fb9,
    div#Component663066bda8754a0013c60fe1,
  div#contentnewmode66308b711c278b00130550b7,
div#contentnewmode66308b750a8c9a0013495687,
div#contentnewmode66308b7a0a8c9a001349569f,
  div#contentnewmode66308f192941af0013f19ef9,
  div#contentnewmode6630a4900a8c9a0013495b27,
  div#contentnewmode6630a4662941af0013f1a378,
div#contentnewmode66331092eab55f001365a585,
  .about-page.pt-8, .about-page,
  div#contentnewmode66330ffa017a6d0012f624af,
  div#contentnewmode66330f401c278b0013056204,
  div#imagesControl66331709017a6d0012f6276d,
  div#imagesControl66bb1d5abdde450013276903,
  div#form6630acabeab55f0013659a02, .contact-page,
  div#contentnewmode6633338d1c278b00130568fa,
  div#mainmenu663333a2a8754a0013c62871>div{
    padding: 0 !important;
}
  
  .pt-10 {
    padding-top: 4%;
}
  
  div#Component663066bda8754a0013c60fe1 .imgLightbox img,
  div#Component663066d6eab55f0013658fb9 .imgLightbox img{
    border-radius: 20px;
}
  
  .sect-about {
    margin-top: 10px;
}
  
  .icon-about li img {
    width: 70% !important;
  }
  
    .items-product {
        height: auto;
        grid-template-columns: 40% 57%;
        padding: 5%;
        align-items: center;
    }
  
  div#mainmenu66306f89eab55f0013659065>div, 
  div#mainmenu66306f7f2941af0013f19b1d>div, 
  div#mainmenu66306f921c278b0013054e55>div,
  div#mainmenu66330437017a6d0012f6226e>div, 
div#mainmenu66330443017a6d0012f62277>div, 
div#mainmenu6633044b017a6d0012f62280>div,
  div#mainmenu66331c07a8754a0013c62578>div,
  div#mainmenu6630caa6a8754a0013c61b51>div{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
  
  .text-product h5, .text-product h6 {
    font-size: 18px;
}
  .img-bg02,.img-bg03, .img-bg04 {
    position: static;
}
  
  .img-bg01 {
    width: 50%;
    position: absolute;
    top: -55px;
    right: 0;
  }
  
  div#mainmenu66308b61eab55f0013659275 .col-md-4.col-sm-4.col-xs-12 {
    width: 33.33%;
}
  
      .img-book {
        margin-top: -30px;
        margin-bottom: 0;
    }
  
  .sect-cate {
    padding-left: 0;
    padding-top: 0;
    display: block;
}
  
  div#mainmenu66308d331c278b0013055124 .col-md-5.col-sm-5.col-xs-12, 
  div#mainmenu66308d331c278b0013055124 .col-md-7.col-sm-7.col-xs-12,
    div#Component6632ff252941af0013f1ae3c .col-md-4.col-sm-4.col-sm-5fix.col-xs-12,
  div#Component66331709017a6d0012f6276d .col-md-3.col-sm-4.col-xs-12{
    width: 50%;
}
  
  .sect-cate h3 {
    margin-bottom: 8%;
}
      .group-btn {
        gap: 20px 10px;
        width: 100%;
        flex-wrap: wrap;
    }
  
      .btn-line {
        width: 45%;
       margin: auto;
        margin-top: 5%;
    }
  
      .btn-cont, .btn-howto {
               padding: 1rem;
        grid-template-columns: 20px auto;
    }
  
      h5 {
        font-size: 18px;
    }
  
  .btn-howto h5 , .btn-cont h5{
    font-size: 16px;
}
  
  .pass-btn {
    flex-wrap: wrap;
    gap: 10px;
}

  
  .pass-btn a {
        width: 47%;
    }

  
  div#Component6632f91aa8754a0013c61e91 .col-md-4.col-sm-4.col-xs-12, 
  div#Component663312421c278b001305635f .col-md-4.col-sm-4.col-xs-12, 
  div#Component66331595017a6d0012f626fa .col-md-4.col-sm-4.col-xs-12, 
  div#Component66331563017a6d0012f626cb .col-md-4.col-sm-4.col-xs-12, 
  div#Component663316bc017a6d0012f6274f .col-md-4.col-sm-4.col-xs-12, 
  div#Component66331a4a1c278b001305659f .col-md-4.col-sm-4.col-xs-12, 
  div#Component6630bf41017a6d0012f61a6b .col-md-4.col-sm-4.col-xs-12 {
    width: 46%;
    margin-bottom: 5% !important;
    margin: 2%;
  }
  
      .head-page2 {
        height: 95px;
    }
  
  .head-page {
        height: 115px;
    }
  
      .head-page {
        padding: 7% 0 0;
    }
  
      h2 {
        font-size: 24px;
    }
  
  .exam-product.pt-8 {
    padding-top: 3%;
}
  
  .exam-product ul {
    padding-left: 5%;
}
  
  .exam-product li, .service-detail li {
    margin-bottom: 3%;
}
  
  div#Component6632ff252941af0013f1ae3c .col-md-4.col-sm-4.col-sm-5fix.col-xs-12 {
    text-align: center;
}
  
  div#contentnewmode6633049deab55f001365a2ba,
  div#contentnewmode663304a1eab55f001365a2c3,
div#contentnewmode663304a6eab55f001365a2cd,
div#contentnewmode663304aaeab55f001365a2db,
div#contentnewmode663304b0eab55f001365a2ec,
div#contentnewmode663304b4eab55f001365a2f5,
div#contentnewmode663304b9eab55f001365a2fe,
div#contentnewmode663304bceab55f001365a306,
div#contentnewmode663304d70a8c9a001349679f,
div#contentnewmode663304db017a6d0012f622c9{
    padding: 5px !important;
}
  
      div#Component6630bf41017a6d0012f61a76 .col-md-6.pull-left {
        width: 100%;
    }
  
  div#Component6630bf41017a6d0012f61a76 .col-md-12.text-justify {
    padding: 0 2%;
}
  
      h3.managerHeader {
        top: -90px;
    }
  
      p, .text-exam h6, .table-product>thead>tr>th {
        font-size: 16px;
    }
    div#formdisplay6630acabeab55f0013659a02 {
        padding: 0;
    }
  
      h4 {
        font-size: 20px;
    }
  
  div#mainmenu6630acabeab55f0013659a02>div {
    padding-left: 0 !important;
}
      h3.managerHeader {
        font-size: 20px;
    }
  
      .social-share {
        top: -30px;
        right: -40px;
    }
  
  .w-50 {
    width: 100%;
    float: none;
}
  
  div#Component663333da2941af0013f1b60c {
    margin-top: 5%;
    padding: 3% 0;
}
 .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;
}
  
  br {
    display:none;
  }
  
  div#mainmenu6630caa6a8754a0013c61b51 .none-middle-mid {
    display: block;
  }
  
  .text-spare h6 {
    font-size: 16px;
}
  
    .about-page  .icon-about {
        width: 100%;
    }
  
  .icon-about ul {
        gap: 10px;
    }
  
  .representative h6 {
    margin: 6% auto 8%;
}
  
  div#mainmenu665fd9a620090100133b1751 {
    display: block;
}
}