@import url('../font/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
body,
html {
    height: 100%;
    margin: 0;
    /* font-family: 'Prompt', sans-serif;; */
    /* font-family: 'Kanit'; */
    color: #020202;
    font-size: 16px;
    /*    background: #2A2A2A;*/
}
body.content-th,
body.content-th p,
body.content-th div
{
    font-family: 'Prompt', sans-serif;

}
body.content-en{
    font-family: 'Montserrat', sans-serif;
}
ul.ul1{
    padding: 0;
}

.c-red {
    color: #DA2028;
}

.c-white {
    color: #fff;
}

.c-black {
    color: #000;
}

.c-grey {
    color: #555555;
}

.f-oswald{
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Oswald'; */
}
.f-oswald.en{
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Oswald'; */
}

.f-oswald.th{
    /* font-family: 'Kanit'; */
    font-family: 'Prompt', sans-serif;
}

.f-bold {
    font-weight: 500 !important;
}

.f-100 {

    font-weight: 100 !important;
}

.f-200 {

    font-weight: 200 !important;
}

.f-300 {

    font-weight: 300 !important;
}

.f-400 {

    font-weight: 400 !important;
}

.f-500 {
    font-weight: 500 !important;
}

.f-600 {
    font-weight: 600 !important;
}

.fb_reset > div {
    right: 95px !important;
}

.fb_iframe_widget iframe {
    right: 65pt !important;
}

.fb_dialog_content iframe {
    right: 65pt !important;
}

.ccsd {
    bottom: 55pt !important;
}

.ccsd-d {
    bottom: 5pt !important;
}

.ccsd2 {
    bottom: 97pt !important;
}

.ccsd2-d {
    bottom: 50pt !important;
}
.fb_dialog{
    background: unset !important;
}
.bg-red {
    background: #DA2028;
}
.bg-red-footer {
    background: #BE1F24;
}

#box-brand-2 {
    margin-bottom: 70px;
}

.w40 {
    width: 40%;
}

li.nav-item {
    padding-right: 60px
}

.lang-right {
    padding-right: 35px;
    padding-top: 0px;
    text-align: right;
}

.contact-button {
    background: #DA2028;
    padding: 3px 40px !important;
    line-height: 30px !important;
    display: block;
    margin-top: 15px;
}

.contact-button:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.8
}
.text-copy .contact-button{
    max-width: 140px;
    bottom: 10px;
    position:absolute;
    color: #fff;
    text-decoration: none;
}
.text-copy .contact-button:hover{
    color: #fff;
}

.logo-top {
    width: 160px;
    padding-bottom: 20px;
}

.navbar-right .navbar-nav a.nav-link {
    color: #fff;
    padding: 0;
    line-height: 45px;
    display: inline-block;
    text-decoration: none;
}

.navbar-right .navbar-nav a.nav-link:hover,
.navbar-right .navbar-nav a.nav-link.activemt {
    color: #fff;
}
/* Set Menu */
.nav-menu-en li a,
a.lang-en{
    font-family: 'Montserrat', sans-serif;
}
.nav-menu-th li a{
    font-family: 'Prompt', sans-serif;
}
a.lang-en{
    font-family: 'Montserrat', sans-serif !important;
}
a.lang-th{
    font-family: 'Prompt', sans-serif !important;
}
/* End set menu */
.tmenu::after,
.activemt::after {
    content: '';
    display: block;
    width: 0%;
    height: 3px;
    background: #DA2028;
    transition: width .5s;
}

.tmenu:hover::after,
.activemt::after {
    width: 100%;
    /*    transition: width .3s;*/
}

a.lang {
    color: #fff;
}

a.lang:hover,
a.lang.activem {
    color: #fff;
    border-bottom: 2px solid #DA2028;
    text-decoration: none;
}


/*hamburger menu*/
.box-hamberger {
    color: #000;
    overflow: hidden;
    width: 90px;
    position: fixed;
    right: 0;
    z-index: 999999999999999;
    height: 120px;
	top: 0;
}

.sunn {
    height: 100vh;
    width: 300px;
}

.hamburger-menu {
    z-index: 2;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.contact-menu-right {
    background: #EFF0F2;
    border: none !important;
    padding: 0 20px !important;
    margin: 0 !important;
}

.pid {
    border-bottom: 2px solid #f4f5f4;
    padding: 15px 0;
}

.bar,
.bar:after,
.bar:before {
    width: 30px;
    height: 3px;
}

.bar {
    position: relative;
    transform: translateY(25px);
    background: rgba(0, 0, 0, 1);
    transition: all 0ms 300ms;
}

.bar.animate {
    background: rgba(255, 255, 255, 0);
}

.bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    background: rgba(0, 0, 0, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    background: rgba(0, 0, 0, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    ;
}

.bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    ;
}

.chat {
    position: fixed;
    bottom: 0;
    right: 90px;
    z-index: 999;
}

.chat-open {
    right: 300px;
}

.chat img {
    width: 45px;
}

/*nav menu*/
.navbar-right {
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 20px 90px 0;
}

.show {
    right: 0%;
    opacity: 1;
}

.hide {
    opacity: 0;
    left: 100%;
}

.mobile-nav {
    background: #EFF0F2;
    position: absolute;
    top: 0;
    width: 300px;
    height: 100vh;
    text-align: center;
    transition: 1.5s ease;
}

.mobile-nav ul {
    background: #fff;
    position: relative;
    padding-top: 120px;
    padding-left: 0;
    /*    transform: translateY(-50%);*/
    list-style: none;
}

.mobile-nav ul li {
    border-bottom: 2px solid #f4f5f4;
    padding: 15px 0;
    margin: 0 20px;
}

.mobile-nav a {
    text-align: center;
    font-size: 16px;
    color: #555555;
    opacity: 0;
    transition: opacity .9s ease-in-out;
}

.mobile-nav.show a {
    text-align: center;
    font-size: 16px;
    color: #555555;
    font-weight: 300;
    opacity: 1;
}

.mobile-nav a:hover,
.mobile-nav a.focus {
    text-decoration: none;
    color: #555555;
    border-bottom: 2px solid #DA2028;
}

.mobile-nav ul li .dropdown-btn {
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    outline: none;
}

/*
.mobile-nav ul li a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
*/

.dropdown-container {
    display: none;
    background-color: #fff;
    padding-left: 8px;
}

.dropdown-container a {
    /*    display: block;*/
    line-height: 35px;
}

/*menu right*/
.navigation {
    position: fixed;
    width: 90px;
    right: 0;
    top: 0;
    background-color: #fff;
    color: #fff;
    height: 100%;
    z-index: 99999;

}

.navigation a {
    display: block;
    transform: rotate(-90deg);
    position: absolute;
    right: 0;
    opacity: 0;
    visibility: visible;
    transform-origin: 70% 50%;
    -webkit-transform-origin: 70% 50%;
    -moz-transform-origin: 70% 50%;
    -o-transform-origin: 70% 50%;
    -ms-transform-origin: 70% 50%;
    font-family: 'Oswald';
    color: #555555;
    font-weight: 400;
    font-size: 16px;
    width: 165px;
    text-align: center;
    text-decoration: none;

}

.topic-ser {
    line-height: 50px;
}

a.navigation__link.active2 {
    visibility: visible;
    opacity: 1;
    text-align: left;
    transition: opacity 2s linear;
    bottom: 130px;
}

a.navigation__link.active {

    color: red;
    top: 45%;
    visibility: visible;
    opacity: 1;
    animation: animationFrames linear 1s;
    animation-iteration-count: 1;
    -webkit-animation: animationFrames linear 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation: animationFrames linear 1s;
    -moz-animation-iteration-count: 1;
    -o-animation: animationFrames linear 1s;
    -o-animation-iteration-count: 1;
    -ms-animation: animationFrames linear 1s;
    -ms-animation-iteration-count: 1;
}

a.navigation__link.active .fa {
    opacity: 0;
}

.lisen {
    border-top: 2px solid #f4f5f4;
}


@keyframes animationFrames {
    0% {
        opacity: 0;
        transform: translate(0px, 200px) rotate(-90deg) scaleX(0.57);
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px) rotate(-90deg) scaleX(1.04);
    }
}

@-moz-keyframes animationFrames {
    0% {
        opacity: 0;
        -moz-transform: translate(0px, 200px) rotate(-90deg) scaleX(0.57);
    }

    100% {
        opacity: 1;
        -moz-transform: translate(0px, 0px) rotate(-90deg) scaleX(1.04);
    }
}

@-webkit-keyframes animationFrames {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px, 200px) rotate(-90deg) scaleX(0.57);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px) rotate(-90deg) scaleX(1.04);
    }
}

@-o-keyframes animationFrames {
    0% {
        opacity: 0;
        -o-transform: translate(0px, 200px) rotate(-90deg) scaleX(0.57);
    }

    100% {
        opacity: 1;
        -o-transform: translate(0px, 0px) rotate(-90deg) scaleX(1.04);
    }
}

@-ms-keyframes animationFrames {
    0% {
        opacity: 0;
        -ms-transform: translate(0px, 200px) rotate(-90deg) scaleX(0.57);
    }

    100% {
        opacity: 1;
        -ms-transform: translate(0px, 0px) rotate(-90deg) scaleX(1.04);
    }
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}


/*section 1*/

.box-text-benner {
    position: absolute;
    color: #fff;
    width: 100%;
    transform: translate(0%, -50%);
    top: 50%;
    padding-left: 90px;
}

.box-text-benner-sub {
    position: relative;
    display: block;
    width: 100%
}

.text-banner-home {
    color: #DA2028;
    font-size: 50px;
    font-weight: 700;
    line-height: 60px;
}

.text2-banner-home {
    font-size: 27px;
    font-weight: 300;
    font-family: 'Kanit';
}

.box-number-home {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
}

.count {
    font-size: 49px;
    line-height: 45px;
    font-weight: 700;
}

ul.banner-bottom {
    width: 100%;
    display: inline-block;
    padding: 0;
    display: flex;
    margin: 0;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 35px 10px 35px 90px;
    ;
}

ul.banner-bottom li {
    float: left;
    list-style: none;
    width: 140px;
    padding: 14px;
}

.mmd {
    position: relative;
    z-index: 999;
    top: 0;
    margin-right: 90px;
}

/*section 1*/

/*section product*/
.box-text-sub {
    font-weight: 300;
    font-size: 21px;
}

.box-text-sub-service {
    font-size: 16px;
}

.icon-product-h {
    padding: 80px 0 0;
}

.icon-product-h ul {
    display: table;
    padding: 0;
    width: 100%;

}

.icon-product-h ul li {
    display: table-cell;
    text-align: center;
    padding: 0 5px
}

.icon-product-h ul li img {
    width: 120px;
}

.icon-product-h ul li a:hover img {
    background: #F0F0F0;
}

.icon-product-h ul li a:hover img.p {
    background: rgba(240, 240, 240, 0.4);
}

.icon-product-h ul li a.p-active img.p {
    background: rgba(240, 240, 240, 0.3);
}

.box-sub-process {
    padding: 80px 0 0;
}

.box-sub-process ul {
    display: table;
    padding: 0;
    width: 100%;

}

.box-sub-process ul li span {
    display: block;
    background: #F0F0F0;
    padding: 30px 0 10px;
    text-decoration: none;
    color: #555555;
    transition: 0.9s;
    cursor: pointer;
    transform-origin: top center;
}

.box-sub-process ul li {
    display: table-cell;
    text-align: center;
    padding: 0 5px;
    /*    border: 1px solid red;*/
}

.box-sub-process ul li img {
    width: 120px;
    border: 4px solid #656565;
}

.box-sub-process ul li span:hover,
.box-sub-process ul li span.active {
    transform: scale(1.1);
    background: #DA2028;
    color: #fff;
}

.box-sub-process ul li span:hover img,
.box-sub-process ul li span.active img {
    border: 4px solid #DA2028;
    background: #FFFFFF
}


.box-sub-app {
    padding: 80px 0 0;
}

.box-sub-app ul {
    display: table;
    padding: 0;
    width: 100%;

}

.box-sub-app ul li span p {
    height: 50px;
}

.box-sub-app ul li span {
    display: block;
    background: #F0F0F0;
    padding: 30px 0 10px;
    text-decoration: none;
    color: #555555;
    transition: 0.9s;
    cursor: pointer;
    transform-origin: top center;
}

.box-sub-app ul li {
    display: table-cell;
    text-align: center;
    padding: 0 5px;
    /*    border: 1px solid red;*/
}

.box-sub-app ul li img {
    width: 120px;
    border: 4px solid #656565;
}

.box-sub-app ul li span:hover,
.box-sub-app ul li span.active {
    transform: scale(1.1);
    background: #DA2028;
    color: #fff;

}

.box-sub-app ul li span:hover img,
.box-sub-app ul li span.active img {
    border: 4px solid #DA2028;
    background: #FFFFFF
}

/*section product*/


/*section service*/
.box-service {
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    width: 100%
}

.pp-calen-box {
    padding-right: 7px;
}

/*section service*/



/*section event*/
.topic-event {
    font-size: 32px;
    font-weight: 500;
    padding: 0px 0 15px;
}

.event-home {
    padding: 40px 140px
}

.box-event {
    padding: 0px 7px 7px
}

a.box-event-home {
    display: flex;
    background: #fff;
    color: #000;
    text-decoration: none;
}

.b-mont {
    width: 33%;
    float: left;
    background: #da2028;
    margin: 20px 0;
}

.b-mont-d {
    display: inline-block;
    font-weight: 600;
    font-size: 75px;
    line-height: 43px;
    padding: 40px 15px 20px;
}

.b-mont-m {
    font-size: 18px;
    font-weight: 300;
    float: right;
}

.b-des {
    width: 67%;
    float: left;
    margin: 20px
}

.b-des-topic {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 5px;
    height:50px;
    overflow: hidden;
}

.b-des-des {
    font-weight: 300;
}

/*section event*/

/*section news*/
a.box-news-home {
    color: #000;
    text-decoration: none;
    border: 2px solid rgba(0, 0, 0, 0.035);
    display: block;
    transition: 0.9s;
    margin-bottom: 30px;
}

a.box-news-home:hover {
    box-shadow: 7px 7px 13px -5px rgba(0, 0, 0, 0.19);
}

.b-news-des {
    margin: 20px;
}

.b-news-des-des {
    height: 70px;
    overflow: hidden;
    display: block;
    font-weight: 300;
}

.b-news-des-date {
    color: #dedede;
    font-weight: 500;
    font-size: 15px;
    padding-top: 15px;
}

.box-news-y {
    right: 0;
    bottom: 0;
    background: #FAB055;
    padding: 3px 15px;
    width: 120px;
    text-align: center;
}

.box-news-r {
    right: 0;
    bottom: 0;
    background: #D82028;
    padding: 3px 15px;
    width: 120px;
    text-align: center;
}

.box-news-g {
    right: 0;
    bottom: 0;
    background: #52985D;
    padding: 3px 15px;
    width: 120px;
    text-align: center;
}

.box-news-b {
    right: 0;
    bottom: 0;
    background: #2E368F;
    padding: 3px 15px;
    width: 120px;
    text-align: center;
}

.seemore:hover {
    text-decoration: none;
    color: #555555;
    opacity: 0.8
}

/*section news*/






/*section contact*/
.box-contact-left {
    padding: 40px 15px 40px 140px
}

.box-about {
    padding: 0px 140px;
}

.box-calen {
    padding: 0px 140px;
    top: 180px;
    transform: unset;
/*    top: unset;*/
    width: 100%;
}

.box-about-vision {
    padding: 0px 140px;
    margin-bottom: -80px;
}

.box-contact-right {
    padding: 40px 100px 40px 60px;
    background: #FCFCFC;
    background-image: url(../img/kw-logo-background.png);
    background-size: 90% auto; /* ปรับขนาดให้เต็มพื้นที่ */
    background-position: center; /* จัดกลางภาพ */
    background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
}

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

ul.menu-footer li a {
    color: #555555;
    font-weight: 300;
}

ul.menu-footer li a:hover {
    font-weight: 500;
    text-decoration: none;
}

.icon-tel-footer {
    font-size: 33px;
    margin: 0 20px 0 0;
}

.icon-mail-footer {
    font-size: 25px;
    margin: 0 20px 0 0;
}

a.lang-footer {
    color: #555555;
    font-weight: 300;
    text-decoration: none;
}

a.lang-footer:hover,
a.lang-footer.select {
    color: #555555;
    font-weight: 500;
    border-bottom: 2px solid #da2028;

}

/*section contact*/

.topic {
    font-size: 53px;
    font-weight: 600;
    padding: 80px 0 0;
}


/*section service*/
.en > .ci {
    /*    border: 1px solid red;*/
    width: 45%;
    height: 45%;
    z-index: 999999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: url('../img/service.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100% 100%;
}

.th > .ci {
    /*    border: 1px solid red;*/
    width: 47%;
    height: 47%;
    z-index: 999999;
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: url('../img/Select-th.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100% 100%;
}

#skills {
    position: relative;
    width: 380px;
    height: 380px;
    /*                                            margin: 30px auto;*/
}

#skills .circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
}

#skills .animate {
    -webkit-transition: 0.2s cubic-bezier(.74, 1.13, .83, 1.2);
    -moz-transition: 0.2s cubic-bezier(.74, 1.13, .83, 1.2);
    -o-transition: 0.2s cubic-bezier(.74, 1.13, .83, 1.2);
    transition: 0.2s cubic-bezier(.74, 1.13, .83, 1.2);
    cursor: pointer;
}



.en > .part1 {
    -webkit-clip-path: polygon(51% 0, 50% 50%, 170% 100%, 100% 0);
    clip-path: polygon(51% 0, 50% 50%, 170% 100%, 100% 0);

    background-image: url('../img/Installation-1.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100% 100%;
    opacity: 1;
}

.en > .part1h {
    background-image: url('../img/Installation-2.png');
}

#skills.en >  .part1:hover {
    background-image: url('../img/Installation-3.png');
    transform-origin: center center;
}

#skills.en >  .part1:hover #skills .part2 {
    opacity: 0.5 !important;
}

.en > .part2 {
    -webkit-clip-path: polygon(50% 50%, 100% 70%, 100% 100%, -71% 100%);
    clip-path: polygon(50% 50%, 100% 70%, 100% 100%, -71% 100%);

    background-image: url('../img/Maintenance-1.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
}

.en > .part2h {
    background-image: url('../img/Maintenance-2.png');
}

#skills.en >  .part2:hover {
    background-image: url('../img/Maintenance-3.png');
    transform-origin: center center;
}

.en > .part3 {
    -webkit-clip-path: polygon(50% 50%, 0 71%, 0 0, 53% 0%);
    clip-path: polygon(50% 50%, 0 71%, 0 0, 53% 0%);

    background-image: url('../img/SpareParts-1.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
}

.en > .part3h {
    background-image: url('../img/SpareParts-2.png');
}

#skills.en >  .part3:hover {
    background-image: url('../img/SpareParts-3.png');
    transform-origin: center center;
}


.th > .part1 {
    -webkit-clip-path: polygon(51% 0, 50% 50%, 170% 100%, 100% 0);
    clip-path: polygon(51% 0, 50% 50%, 170% 100%, 100% 0);

    background-image: url('../img/Installation-1-th.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100% 100%;
    opacity: 1;
}

.th > .part1h {
    background-image: url('../img/Installation-2-th.png');
}

#skills.th >  .part1:hover {
    background-image: url('../img/Installation-3-th.png');
    transform-origin: center center;
}

#skills.th >  .part1:hover #skills .part2 {
    opacity: 0.5 !important;
}

.th > .part2 {
    -webkit-clip-path: polygon(50% 50%, 100% 70%, 100% 100%, -71% 100%);
    clip-path: polygon(50% 50%, 100% 70%, 100% 100%, -71% 100%);

    background-image: url('../img/Maintenance-1-th.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
}

.th > .part2h {
    background-image: url('../img/Maintenance-2-th.png');
}

#skills.th >  .part2:hover {
    background-image: url('../img/Maintenance-3-th.png');
    transform-origin: center center;
}

.th > .part3 {
    -webkit-clip-path: polygon(50% 50%, 0 71%, 0 0, 53% 0%);
    clip-path: polygon(50% 50%, 0 71%, 0 0, 53% 0%);

    background-image: url('../img/SpareParts-1-th.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
}

.th > .part3h {
    background-image: url('../img/SpareParts-2-th.png');
}

#skills.th >  .part3:hover {
    background-image: url('../img/SpareParts-3-th.png');
    transform-origin: center center;
}

/*section service*/




textarea:focus,
input:focus,
button:focus {
    outline: none;
}

::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #da2028;
    border: 0px none #ffffff;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #da2028;
}

::-webkit-scrollbar-thumb:active {
    background: #da2028;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
    background: transparent;
}

::-webkit-scrollbar-track:active {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {

    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #da2028;
}

.modal-content {
    background: none;
    border: none;
}

.modal-body {
    background: #DA2028;
    border: none;
    border-radius: 0px;
    padding: 20px 90px 20px 40px;
}

.modal {
    top: 5%;
}

.modal-header .close {
    border-radius: 50%;
    border: 2px solid #D5D5D5;
    padding: 2px 8px 2px;
    font-size: 30px;
    margin-bottom: -5px;
    background: rgba(213, 213, 213, 0.8);
    opacity: 1;
}

.modal.show .modal-dialog {
    float: right;
    margin-right: 85px;
}

.ok-modal {
    padding: 3px 45px;
    background: #FFFFFF;
    color: #DA2028;
    font-size: 14px;
    font-weight: 300;
    border: unset;
}

.ok-modal:hover {
    text-decoration: none;
    opacity: 0.8
}

.res {
    display: none;
}


/*about page*/
.box-timeline-about {
    padding: 0 45px;
}

.box-timeline-about img {
    width: 120px;
}

.box-vision {
    padding: 90px 0 0;
    background-image: url('../img/about.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}

.box-vision-winning {
    padding-top: 100px;
}

.vision-winnig {
    font-size: 50px;
    font-weight: 600;
    margin-top: -40px;
    margin-left: 120px;
}

.box-vision-water {
    padding-top: 100px;
    padding-left: 50%;
}

.vision-water {
    font-size: 300px;
    line-height: 0;
    font-style: italic;
}

a.box-sup {
    display: block;
    padding: 15px;
    transition: 0.9s;
}

a.box-sup:hover {
    transform: scale(1.4);
}

.carousel-item img {
    width: 100%
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 1.8s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}

.carousel-item.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

/*about page*/


/*footer*/
.text-copy {
    padding: 20px 15px;
    position: relative;
}

.box-totop {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

#return-to-top img {
    width: 90px;
}

/*footer*/
.hero {
    margin-right: 90px
}

.kwi-logo .logo-bottom {
    width: 60%;
    margin-left: -24px;
}

.logo-bottom {
    width: 100px
}

.company-footer {
    font-size: 17px
}

.pignose-calendar {
    width: 100%;
    max-width: 100%;
    height: 550px;
}

.box {
    display: block;
    height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pignose-calendar .pignose-calendar-top {
    margin: 0 35px;
    background-color: unset;
    box-shadow: unset;
    padding: 25px 0 10px;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-month {
    font-size: 18px;
    text-align: left;
    color: #555555;
    padding-top: 25px;
    position: absolute;
    font-weight: 500;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-date {
    padding: 20px 0;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-year {
    text-align: left;
    color: #DA2028;
    font-size: 30px;
    font-weight: 600;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav.pignose-calendar-top-prev {
    margin-left: 120px;
    margin-top: 20px;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav.pignose-calendar-top-next {
    float: left;
    margin-top: 20px;
}

.pignose-calendar .pignose-calendar-header {
    font-weight: 400;
    font-size: 16px
}

.pignose-calendar .pignose-calendar-unit a {
    color: #555555 !important;
}

.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-active a {
    background-color: #F6C6C8;
    border-radius: unset;
    box-shadow: unset;
}

.box-navi {
    margin-top: 190px;
    font-size: 14px;
    font-style: italic;
}

.box-navi a {
    color: #555555;
}

.box-text-detail {
    padding: 15px 30px;
}

.box-text-career {
    position: absolute;
    color: #fff;
    width: 100%;
    bottom: 5%;
    padding-left: 90px;
}

.box-text-benner-career {
    position: relative;
    display: block;
    width: 100%;
}

.text-banner-career {
    font-size: 50px;
    line-height: 35px;
}

.text2-banner-career {
    font-size: 18px;
    font-weight: 100;
}

.b-topic-career {
    font-size: 18px;
    padding-bottom: 15px;
}

ul.career {
    list-style: none;
    padding-left: 30px !important
}

ul.career li {
    padding-bottom: 25px;
}

ul.career li::before {
    font-family: FontAwesome;
    content: "\f04d";
    color: #DA2028;
    font-weight: bold;
    display: inline-block;
    width: 23px;
    margin-left: -28px;
    font-size: 15px;
}

ul.service {
    list-style: none;
    padding-left: 22px !important
}

ul.service li {}

ul.service li::before {
    font-family: FontAwesome;
    content: "\f04d";
    color: #DA2028;
    font-weight: bold;
    display: inline-block;
    width: 23px;
    margin-left: -22px;
    font-size: 10px;
}


.box-career-form {
    padding: 0px 250px 100px;
}

.file-upload {
    display: block;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.file-upload .file-select {
    display: block;
    border: 1px solid #ced4da;
    color: #34495e;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
}

.file-upload .file-select .file-select-button {
    background: #DA2028;
    padding: 0 30px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    float: right;
    color: #fff;
}

.file-upload .file-select .file-select-name {
    line-height: 40px;
    display: inline-block;
    padding: 0 10px;
}





.file-upload .file-select input[type=file] {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
    opacity: 0.65;
}


.box-input {
    padding-bottom: 30px;
}

.box-input input,
.box-input select {
    border-radius: 0;
    height: 50px;
    font-weight: 200;
    padding: 5px 15px;
}

.box-input textarea {
    border-radius: 0;
    font-weight: 200;
}

.submit {
    background: #DA2028;
    box-shadow: none;
    border: 0;
    padding: 10px 15px;
    display: block;
    width: 100%;
}

.submit:hover {
    opacity: 0.8;
    text-decoration: none;
    color: #fff;
}

.gre {
    border-color: #28a745;
}

.da {
    border-color: red !important;
}

.file-upload.active {
    border: 1px solid #28a745 !important;
}

.topic-contact {
    font-size: 50px;
    font-weight: 400;
    padding: 0px 0 15px;
}

.box-right-form {
    padding-left: 100px;
}

.box-news-con {
    padding: 40px 80px 120px;

}

.box-p-100 {
    padding-bottom: 100px
}

.box-ul-service ul {
    padding: 0;
}

.box-ul-service ul li {
    float: left;
    list-style: none;
    padding-right: 15px;
}

.box-ul-service ul li img {
    width: 100px;
}

.gear {
    position: absolute;
    z-index: 9;
    width: 100%;
    overflow: hidden;
    top: -160px;
    left: 0px;
    transition-timing-function: ease;
}

.gear2 {
    position: fixed;
    left: px;
    top: 15%;
}

.img-td {
    width: 100px
}

.box-product-search {
    padding: 0px 300px;
    background: #DA2028;
}

.autocomplete {
    position: relative;
    display: inline-block;
    width: 100%
}

#myInput {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

input[type=text]#myInput {
    background-color: #f1f1f1;
    width: 100%;
}

input[type=submit]#sub {
    background-color: #000;
    color: #fff;
    cursor: pointer;
    right: 0;
    border: 0;
    padding: 11px 50px;
}

.autocomplete-items {
    position: absolute;
    box-shadow: 0px 0px 5px 1px #DDDDDD;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;

}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    font-weight: 300;
    color: #555555;

}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #F0F0F0;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.slideleftt {
    /*  position: fixed;*/
    z-index: 100;
    /*  background: #DA2028;*/
    width: 0;
    left: 0;
    animation: 1.5s in-out forwards;
}

@keyframes in-out {
    0% {
        width: 0;
    }

    50% {
        width: 40%;
    }

    100% {
        width: 40%;
        /* but starting to "disappear" from left to right, just like the way it appears */
    }
}


.product-process {
    display: none;
}

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

ul.table-list-product li span {
    padding: 10px 25px;
    background: #F0F0F0;
    color: #999999;
    font-size: 18px;
    cursor: pointer;
    display: block;
    font-weight: 600;
    transition: 0.9s;
}

ul.table-list-product li span:hover,
ul.table-list-product li span.act {
    background: #DA2028;
    color: #fff;
    font-weight: 600
}

ul.table-list-product li span::before {

    color: #DA2028;
    font-weight: bold;
    display: inline-block;
    width: 23px;
    margin-left: 0px;
    font-size: 15px;
}

ul.table-list-product-sub {
    list-style: none;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.33s, opacity 0.33s linear;
    height: 0;
}


ul.table-list-product-sub li span {
    padding: 10px 25px;
    background: #FCFCFC;
    color: #999999;
    font-size: 18px;
    cursor: pointer;
    border: 1px solid #FCFCFC;
    transition: 0.9s;
    font-weight: 300;
}

ul.table-list-product-sub li span:hover::before,
ul.table-list-product-sub li span.act-sub::before {
    color: #FCFCFC;
}

ul.table-list-product-sub li span:hover,
ul.table-list-product-sub li span.act-sub {
    background: unset;
    color: #555555;
    font-weight: 600;
    padding-left: 0;
    border: 1px solid #DA2028;
    transition: 0.9s;
}

ul.table-list-product-sub li span::before {
    font-family: FontAwesome;
    content: "\f068";
    color: #DA2028;
    font-weight: bold;
    display: inline-block;
    width: 23px;
    margin-left: 0px;
    font-size: 15px;
}

.topic-product-name {
    font-size: 18px;
}

.topic-product-name.act-name {
    color: #DA2028;
}

a.product-box-a {
    color: #000;
    text-decoration: none;
    transition: 0.9s;
}

a.product-box-a:hover {
    color: #DA2028;
    transition: 0.9s;
}

.actt {

    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    transition-delay: 0s !important;
}

.box-app {
    display: none;
}

.cascade-slider_container {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 auto;
    margin-bottom: 70px;
}

.cascade-slider_item {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(1.2);
    transition: all 1s ease;
    opacity: 0.8;
    z-index: -1;
    height: 128px;
    overflow: hidden;
    width: 307px;
    /*        border: 1px solid red;*/
    transform-origin: top center;
    box-shadow: 5px 4px 9px 0px rgba(0, 0, 0, 0.19);
}

.cascade-slider_item img {
    width: 100%;
    background: #fff;
    cursor: pointer;
}

.cascade-slider_item.next {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-150%) scale(1.2);
    opacity: 1;
    z-index: 1;
    transform-origin: top left;
}

.cascade-slider_item.prev {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(50%) scale(1.2);
    opacity: 1;
    z-index: 1;
    transform-origin: top right;
}

.cascade-slider_item.now {
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(1.5);
    opacity: 1;
    z-index: 5;
}

.cascade-slider_arrow {
    display: inline-block;
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 5;
    font-size: 30px;
}

.cascade-slider_arrow-left {
    left: 0;
}

.cascade-slider_arrow-right {
    right: 0;
}

.cascade-slider_nav {
    position: absolute;
    bottom: -120px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.cascade-slider_dot {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 1em;
    background: #ddd;
    list-style: none;
    cursor: pointer;
}

.cascade-slider_dot:hover {
    background: #555;
}

.cascade-slider_dot.cur {
    background: #555;
}

.dropdown-btn .fa-angle-down {
    display: block;
}

.dropdown-btn .fa-angle-up {
    display: none;
}

.dropdown-btn.activett .fa-angle-down {
    display: none;
}

.dropdown-btn.activett .fa-angle-up {
    display: block;
}

.dd2 .fa-angle-down {
    display: inline-block;
    float: right;
    margin-top: 5px;
}

.dd2 .fa-angle-up {
    display: none;
}

.dd2.activett .fa-angle-down {
    display: none;
}

.dd2.activett .fa-angle-up {
    display: inline-block;
    float: right;
    margin-top: 5px;
}


@media screen and (max-width: 1300px) {
    #skills {
    position: relative;
    width: 300px;
    height: 300px;
    /*                                            margin: 30px auto;*/
}
    .footer-left {
        padding-left: 80px;
    }

    ul.banner-bottom li {
        width: 100px;
    }

    .icon-product-h ul li {
        padding: 0 5px;
    }

    .icon-product-h ul li img {
        width: 100px
    }

    .box-text-sub {
        font-size: 18px;
    }

    .logo-top {
        width: 120px;
        padding-bottom: 10px;
    }

    .navbar-right {
        padding: 10px 90px 0;
    }

    .contact-button {
        margin-top: 10px;
    }
    .text-copy .contact-button{
        max-width: 120px;
    }

    .box-career-form {
        padding: 0px 200px 100px;
    }

    .box-right-form {
        padding-left: 50px;
    }

    .box-timeline-about {
        padding: 0 15px;
    }
    .b-mont-d {
        font-size: 55px;
        line-height: 30px;
    }
    .b-mont-m{
           font-size: 15px; 
    }

    .cascade-slider_item {
        width: 280px;
    }

    .pignose-calendar .pignose-calendar-unit {
        height: 40px;
    }

    .pignose-calendar .pignose-calendar-unit .pignose-calendar-button-schedule-container {
        margin-top: -15px;
    }

    .pignose-calendar .pignose-calendar-unit .pignose-calendar-button-schedule-container .pignose-calendar-button-schedule-pin {
        width: 5px;
        height: 5px;
    }

    .pignose-calendar,
    .box {
        height: 430px
    }
}

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

    body,
    html {
        font-size: 12px;
    }

    .logo-top {
        width: 100px;
        padding-bottom: 10px;
    }

    .text-banner-home {
        font-size: 30px
    }

    .text2-banner-home {
        font-size: 16px
    }

    ul.banner-bottom {
        padding: 15px 10px 15px 45px;
    }

    ul.banner-bottom li {
        width: 80px;
    }

    .count {
        font-size: 25px;
    }

    .navigation {
        width: 45px
    }

    .hero {
        margin-right: 0px
    }

    .navbar-right {
        padding: 10px 45px 0
    }

    .box-text-benner {
        padding-left: 45px;
    }

    .hamburger-menu {
        top: 20px;
        right: 8px;
    }

    li.nav-item {
        padding-right: 30px;
    }

    .contact-button {
        padding: 0px 20px !important;
        margin-top: 10px;
    }
    .text-copy .contact-button{
        max-width: 120px;
    }
    .topic {
        font-size: 30px
    }

    .icon-product-h ul li {
        padding: 0 5px;
        padding: 0 5px;
    }

    .icon-product-h ul li img {
        width: 100%;
    }

    .box-text-sub {
        font-size: 16px
    }

    #skills {
        width: 200px;
        height: 200px;
    }

    .event-home {
        padding: 40px 70px
    }

    .topic-event {
        font-size: 18px;
    }

    .b-mont {
        margin: 10px 0
    }

    .b-mont-d {}

    .b-des-topic {
        font-size: 14px;
    }

    .b-mont-d {
        font-size: 35px;
        line-height: 22px;
    }

    .b-mont-m {
        font-size: 10px;
    }

    .b-des {
        margin: 10px;
    }

    .b-news-des-date {
        font-size: 10px;
    }

    .box-contact-left {
        padding: 40px 45px 40px 40px;
    }

    .box-about {
        padding: 0px 60px;
    }

    .box-calen {
        padding: 0px 45px;
        bottom: 10px;
        top: unset;
    }

    .box-about-winnig {
        padding: 0px 45px;
        /*        margin-bottom: -45px;*/
    }

    .box-contact-right {
        padding: 40px 50px 40px 15px;
    }
    .logo-bottom {
        width: 150px
    }
    .kwi-logo > .logo-bottom {
        width: 200px;
        max-width: 100%;
    }

    .company-footer {
        font-size: 16px
    }

    .navigation a {
        font-size: 14px;
        right: -24px
    }

    .text-copy {
        padding: 7.5px 15px;
    }

    #return-to-top img {
        width: 45px
    }

    .chat {
        right: 45px;
    }

    .box-vision-winning {
        padding-top: 50px;
    }

    .vision-winnig {
        font-size: 30px;
        margin-left: 60px;
        margin-top: -20px;
    }

    .vision-water {
        font-size: 150px;
    }

    .box-vision-water {
        padding-top: 50px;
        padding-left: 50%;
    }

    .box-about-vision {
        padding: 0px 45px;
        margin-bottom: -45px;
    }

    .pignose-calendar {
        height: 330px;
    }

    .box {
        height: 330px
    }

    .pignose-calendar .pignose-calendar-unit {
        height: 30px;
    }

    .pignose-calendar .pignose-calendar-unit .pignose-calendar-button-schedule-container {
        margin-top: -10px;
    }

    .pignose-calendar .pignose-calendar-header {
        font-size: 11px
    }

    .box-career-form {
        padding: 0px 100px 50px;
    }

    .box-right-form {
        padding-left: 20px;
    }

    .box-news-con {
        padding: 40px 30px 30px;
    }

    .box-text-sub-service,
    .b-topic-career {
        font-size: 12px;
    }

    ul.service li::before {
        width: 10px;
        font-size: 5px;
    }

    .img-td {
        width: 70px
    }

    .box-ul-service ul li img {
        width: 70px;
    }

    .box-navi {
        margin-top: 100px;
    }

    .box-product-search {
        padding: 0px 90px;
    }

    input[type=submit]#sub {
        padding: 14px 50px
    }

    .box-sub-process ul li img {
        width: 70px;
    }

    .bx-wrapper .bx-prev {
        left: -20px;
    }

    .bx-wrapper .bx-next {
        right: -20px;
    }

    ul.table-list-product li span,
    ul.table-list-product-sub li span {
        font-size: 16px;
        padding: 10px 15px;
    }

    .box-sub-app ul li img {
        width: 80px;
    }

    .cascade-slider_item {
        width: 180px;
        height: 75px;
    }

    .box-sub-app ul li span p {
        height: 35px;

    }

}

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

    body,
    html {
        font-size: 14px;
    }

    .res {
        height: 120vh;
        position: fixed;
        z-index: 99999999999999999999;
        background: rgba(0, 0, 0, 1);
        width: 100%;
        bottom: 0;
        top: 0;
        display: flex;
    }

    .navigation {
        display: none;
    }

    .box-text-benner {
        padding-left: 15px;
    }

    .text-banner-home {
        font-size: 20px;
        line-height: 25px;
        margin: 0px 0 5px 0px;
    }

    .text2-banner-home {
        font-size: 12px;
    }

    ul.banner-bottom {
        padding: 10px 15px;
    }

    ul.banner-bottom li {
        padding: 5px;
        width: 60px;
    }

    .count {
        font-size: 18px;
        line-height: 20px;
    }

    .bc {
        font-size: 10px;
    }

    .box-text-benner {
        padding-left: 0;
        top: 50%;
    }

    .box-hamberger {
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        height: 50px;
    }

    .hamburger-menu {
        top: 0px;
    }

    .bar,
    .bar:before,
    .bar:after {
        background: rgba(255, 255, 255, 1);
    }

    .sunn {
        height: 100vh;
        /*    width: 300px;*/
    }

    .bar.animate:before,
    .bar.animate:after {
        background: rgba(0, 0, 0, 1);
    }

    .logo-top {
        width: 60px;
    }

    ul.res-menu {
        float: left;
        display: block;
        width: 100%;
        padding-left: 15px;
    }

    ul.res-menu li {
        padding-right: 15px;
        float: left;
        padding-top: 15px;
    }

    ul.res-menu li a {
        color: #fff;
        font-size: 12px;
    }

    .topic {
        padding: 40px 0 0;
    }

    .event-home {
        padding: 40px 25px;
    }

    .box-news-con {
        padding: 20px 0px 20px;
    }

    .box-service {
        padding: 0 15px;

    }

    .ser-home {
        padding: 15px 15px 0;
        overflow: hidden
    }

    #skills {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .box-text-sub {
        font-size: 14px;
    }

    .box-about {
        padding: 0px 15px;
    }

    .box-p-100 {
        padding-bottom: 30px;
    }

    .img-td {
        width: 40px;
    }

    .mmd {
        margin-right: 0px;
    }

    .box-ul-service ul li img {
        width: 40px;
    }

    .scal-res {
        overflow: hidden;
    }

    .scal-res img {
        /*        transform: scale(1.5);*/
        width: 120% !important;
        overflow: hidden;
    }

    .box-ser-ser {
        position: relative;
        background-image: url(../img/Pic-25.jpg);
        padding: 80px 0 0px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        transform: unset;
    }

    .topic-ser {
        line-height: 25px;
    }

    .b-news-des {
        margin: 8px;
    }

    .shower {
        padding: 5px;
    }

    .box-sse {
        margin: 0 7px;
    }

    .box-calen {
        padding: 100px 15px 0;
        position: relative !important;
        background-color: #000;
    }

    .pp-calen-box,
    .pp-calen-box2 {
        padding: 0 0 15px;

    }

    .box {
        height: 435px;
    }

    p.p-if iframe {
        height: 300px !important;
    }

    .box-timeline-about img {
        width: 60px;
    }

    .box-timeline-about {
        padding: 15px;
    }

    .box-vision {
        padding: 20px 0;
        background-size: cover;
    }

    .box-about-vision {
        padding: 0 15px;
    }

    .vision-winnig {
        margin: 30px 0 60px;
    }

    .box-career-form {
        padding: 0px 15px 50px;
    }

    .box-navi {
        margin-top: 50px;
    }

    .box-text-bennerres {
        position: relative;
        background-image: url(../img/KW_Banner-Job.jpg);
        padding: 15px 0 30px;
        background-size: cover;
        background-repeat: no-repeat;
        transform: unset;
    }

    .box-res-home {
        position: relative;
        background-image: url(../img/banner-home.jpg);
        padding: 100px 0 100px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        transform: unset;
    }

    .box-res-service {
        position: relative;
        background-image: url(../img/Pic-25.jpg);
        padding: 20px 0 20px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        transform: unset;
    }

    .modal.show .modal-dialog {
        margin-right: 0px;
        margin-top: 30px;
    }

    .box-b-p {
        position: relative;
        background-image: url(../img/KW_Banner-Product.jpg);
        padding: 15px 0 30px;
        background-size: cover;
        background-repeat: no-repeat;
        transform: unset;
    }

    .icon-product-h {
        padding: 80px 30px 0;
    }

    .box-product-search {
        padding: 0px 15px;
    }

    input[type=submit]#sub {
        padding: 13px 30px;
    }

    .box-sub-process ul li img,
    .box-sub-app ul li img {
        width: 50px;
        border: 2px solid #656565;
    }

    .cascade-slider_item {
        width: 100px;
        height: 50px;
    }

    .box-sub-process {
        padding: 40px 0 0;
    }


    .prpro {
        margin: 15px 0;
        padding: 15px;
    }

    #box-brand-2 {
        margin: 0 -10px;
    }

    .w40 {
        width: 100%;
    }

    .box-sub-process ul li {
        width: 33.33%
    }

    .box-sub-process ul li p,
    .box-sub-app ul li span p {
        font-size: 11px;
    }

    .bx-wrapper .bx-next {
        right: -13% !important;
    }

    .bx-wrapper .bx-prev {
        left: -10% !important;
    }

    .box-sub-app ul li {
        width: 33.33%
    }

    .chat {
        right: 2px;
        bottom: 60px;
    }

    a.product-box-a {
        padding: 0 10px;
        display: block;
    }

    .prd {
        padding: 0 15px !important;
    }

    .fb_reset > div {
        right: 5px !important;
    }

    .fb_iframe_widget iframe {
        right: 5pt !important;
    }

    .ccsd {
        bottom: 30pt !important;
    }

    .ccsd2 {
        bottom: 97pt !important;
    }
    
    .fb_dialog_content iframe{
            right: 0px !important;
    }

    .text-copy {
        padding: 8.5px 0px;
        font-size: 10px;
        
    }
    
    .f12-res {
        font-size: 12px;
    }

    .lisen {
        border-top: unset;
        padding-top: 30px;
    }
    .mg-res-25{
        margin-left: 25%
    }

}