@import url('https://fonts.googleapis.com/css2?family=Bayon&display=swap');

a {
    text-decoration: none !important;
}

#main_index {
    overflow: hidden !important;
    padding-bottom: 0px !important;
}

#main_index .navbar_type8 {
    height: 95px;
    left: 50%;
    transform: translate(-50%, 0);
    width :100%;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
        transition: all ease-in-out 0.45s;
    background-color: transparent;
}

.navbar_type8 {
    background-color: #33415c;
    height: 95px;
}

.navbar_type8 .logo {
    margin-left: 0;
}

.navbar_type8 .logo {
    flex: 0 1 40%;
    overflow: hidden;
    position: relative;
    margin-left: 8vw;
}

.navbar_type8 .logo img {
    width: auto;
    padding: 18px;
}

.navbar_type8 .nav_tab {
    padding-left: 0;
    padding-right: 9vw;
}

.navbar_type8 .nav_tab .nav_item a {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    padding: 16px 25px;
}

.navbar_type8 .nav_tab .nav_item {
    position: relative;
}

.navbar_type8 .nav_tab .nav_item::before {
    content: "";
    position: absolute;
    top: 1.8vw;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px; 
    background-color: #fff;
    transform-origin: center;
    transition: transform 0.3s ease;
    opacity: 1;
}

.navbar_type8 .nav_tab .nav_item::before {
    border-bottom: 3px solid #fff;
}

.navbar_type8 .nav_tab .nav_item:hover::before {
    transform: translateX(-50%) scaleX(1);
}

.dark_nav {
    background-color: #5c677d !important;
    border-bottom: none;
    /*max-width: 100%;*/
    border-bottom: #5c677d !important;
}

.navbar_type8 .nav_tab .nav_item:last-child a {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    background-color: #33415c;
    padding: 16px 35px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 1vw;
}

.navbar_type8 .nav_tab .nav_item:last-child a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("https://cdn1.npcdn.net/img/1783949166ws-button-white.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

@media screen and (max-width: 1300.5px){
    .navbar_type8 .nav_tab .nav_item a {
        font-size: 15px;
        font-weight: 400;
        color: #fff;
        padding: 16px 12px;
    }
    
    .navbar_type8 .nav_tab .nav_item:last-child a {
        font-size: 15px;
        font-weight: 400;
        color: #fff;
        background-color: #33415c;
        padding: 16px 30px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 1vw;
    }
}

@media screen and (max-width: 1200.5px){
    /*.navbar_type8 .nav_tab .nav_item a {*/
    /*    font-size: 1.3vw;*/
    /*    font-weight: 500;*/
    /*    padding: 20px;*/
    /*}*/
    
    .navbar_type8 .logo {
        flex: 0 1 30%;
        overflow: hidden;
        position: relative;
        margin-left: 7vw;
    }
    
    .navbar_type8 .logo img {
        width: auto;
        padding: 30px;
    }
    
    /*.navbar_type8 .nav_tab .nav_item a {*/
    /*    font-size: 1.05vw;*/
    /*    font-weight: 500;*/
    /*    padding: 18px;*/
    /*}*/
    
    /*.navbar_type8 .nav_tab .nav_item:last-child a {*/
    /*    font-size: 15px;*/
    /*    font-weight: 400;*/
    /*    color: #fff;*/
    /*    background-color: #33415c;*/
    /*    padding: 16px 35px;*/
    /*    display: inline-flex;*/
    /*    align-items: center;*/
    /*    gap: 8px;*/
    /*}*/
    
    .navbar_type8 .nav_tab .nav_item a {
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        padding: 12px 12px;
    }
    
    .navbar_type8 .nav_tab .nav_item:last-child a {
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        background-color: #33415c;
        padding: 12px 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 1vw;
    }
}

@media screen and (max-width: 992.5px){
    .navbar_type8 {
        display: none !important;
    }
    
    .navbar_mobile {
        flex-basis: auto;
        background-color: #5c677d !important;
        width: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        color: #33415c;
        align-items: center;
        justify-content: flex-end;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        height: 80px;
    }
    
    .navbar_mobile .btn-outline-light {
        border-color: #fff;
        color: #fff;
    }
}

@media screen and (max-width: 767.5px){
    .navbar_mobile .logo_img {
        max-height: 40px;
        padding: 0;
        font-size: 1.75rem;
        line-height: inherit;
        white-space: nowrap;
        margin-top: 1vw;
    }
}

/*hp_banner*/

.index_wrapper_2 {
    margin-top: -110px;
}

.hp_banner {
    position: relative;
    top: 28vw;
    left: 9.5vw;
    transform: translate(0, -50%);
    width: 40%;
}

.hp_banner_title {
    font-family: 'Bayon', sans-serif;
    font-size: 3.75vw;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4vw;
    line-height: 1.1;
    position: relative;
    text-transform: uppercase;
}

.hp_banner_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vw;
    width: 105px;
    height: 4px;
    background-color: #fff;
    transform: none;
}

.hp_banner_subtitle {
    font-size: 0.95vw;
    font-weight: 300;
    color: #fff;
    margin-bottom: 0vw;
    line-height: 1.8;
    position: relative;
    padding: 0vw 7vw 0vw 0vw;
}

.n_bannerViewMore {
    font-size: 0.9vw;
    font-weight: 500;
    color: #7d8597;
    background-color: #fff;
    text-align: center;
    padding: 1%;
    height: 2.7vw;
    width: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s all linear;
    margin-top: 2vw;
    /*border-radius: 25px;*/
}

.n_bannerViewMore:hover {
    color: #fff;
    background-color: #000;
    text-decoration: none;
    /*transform: scale(0.95);*/
}

.n_bannerViewMore {
    position: relative;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: none;*/
    outline: none;
    overflow: hidden;
}

.n_bannerViewMore:hover {
    transform: scale(1.05);
}

.n_bannerViewMore:active {
    transform: scale(0.85);
}

.n_bannerViewMore:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.n_bannerViewMore::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100px;
    opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.n_bannerViewMore img.arrow-icon {
    margin-left: 12px !important;
    width: 8px !important;
    height: auto !important;
    display: inline-block !important;
    transition: transform 0.3s ease;
}

.n_bannerViewMore:hover img.arrow-icon {
    animation: swing 1s;
    filter: brightness(0) invert(1);
}

@media screen and (max-width: 1200.5px){
    .hp_banner_subtitle {
        font-size: 1.3vw;
        font-weight: 300;
        color: #fff;
        margin-bottom: 0vw;
        line-height: 1.8;
        position: relative;
        padding: 0vw 0vw 0vw 0vw;
    }
    
    .n_bannerViewMore {
        font-size: 1.2vw;
        font-weight: 500;
        color: #7d8597;
        background-color: #fff;
        text-align: center;
        padding: 1%;
        height: 3.7vw;
        width: 16vw;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s all linear;
        margin-top: 2vw;
        /* border-radius: 25px; */
    }
}

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

@media screen and (max-width: 767.5px){
    .index_wrapper_2 {
        margin-top: 0px;
    }
    
    .hp_banner {
        position: relative;
        top: 34vw;
        left: 9.5vw;
        transform: translate(0, -50%);
        width: 85%;
    }
    
    .hp_banner_title {
        font-family: 'Bayon', sans-serif;
        font-size: 8vw;
        font-weight: 500;
        color: #fff;
        margin-bottom: 5vw;
        line-height: 1.1;
        position: relative;
        text-transform: uppercase;
    }
    
    .hp_banner_title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3vw;
        width: 105px;
        height: 4px;
        background-color: #fff;
        transform: none;
    }
    
    .hp_banner_subtitle {
        font-size: 3.3vw;
        font-weight: 300;
        color: #fff;
        margin-bottom: 0vw;
        line-height: 1.8;
        position: relative;
        padding: 0vw 0vw 0vw 0vw;
    }
    
    .n_bannerViewMore {
        font-size: 3.2vw;
        font-weight: 500;
        color: #7d8597;
        background-color: #fff;
        text-align: center;
        padding: 1%;
        height: 9vw;
        width: 43vw;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s all linear;
        margin-top: 4vw;
        /* border-radius: 25px; */
    }
}

/*hp_about*/

.hp_about {
    padding: 9vw 9vw 7vw 9vw;
    position: relative;
}

.hp_about::after {
    content: "";
    position: absolute;
    top: -3vw;
    right: 0vw;
    width: 22%;
    height: 81%;
    background-color: #e8ecef;
    z-index: -1;
}

.hp_about_left {
    padding: 1vw 0vw 0vw 0vw;
    margin-top: 0vw;
}

.hp_about .hp_small_title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #7d8597;
    letter-spacing: 2px;
    margin-bottom: 1.5vw;
}

.hp_about .hp_big_title {
    font-family: 'Bayon', sans-serif;
    font-size: 3.75vw;
    font-weight: 500;
    color: #33415c;
    line-height: 1.1;
    padding: 0vw 10vw 0vw 0vw;
}

.hp_about .hp_keyword {
    font-size: 0.95vw;
    font-weight: 500;
    color: #333;
    margin-bottom: 0;
    line-height: 1.8;
    padding: 1vw 4vw 2vw 0vw;
}

.n_aboutViewMore {
    font-size: 0.9vw;
    font-weight: 500;
    color: #fff;
    background-color: #7d8597;
    text-align: center;
    padding: 1%;
    height: 2.7vw;
    width: 13vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s all linear;
    margin-top: 0vw;
    /*border-radius: 25px;*/
}

.n_aboutViewMore:hover {
    color: #fff;
    background-color: #000;
    text-decoration: none;
    /*transform: scale(0.95);*/
}

.n_aboutViewMore {
    position: relative;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: none;*/
    outline: none;
    overflow: hidden;
}

.n_aboutViewMore:hover {
    transform: scale(1.05);
}

.n_aboutViewMore:active {
    transform: scale(0.85);
}

.n_aboutViewMore:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.n_aboutViewMore::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100px;
    opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.n_aboutViewMore img.arrow-icon {
    margin-left: 12px !important;
    width: 8px !important;
    height: auto !important;
    display: inline-block !important;
    transition: transform 0.3s ease;
}

.n_aboutViewMore:hover img.arrow-icon {
    animation: swing 1s;
    filter: brightness(0) invert(1);
}

.hp_about_img {
    width: 105%;
    max-width: 150%;
    margin-top: 0vw;
    margin-left: -1vw;
}

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

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

@media screen and (max-width: 767.5px){
    .hp_about .hp_small_title {
        font-size: 4.2vw;
        font-weight: 600;
        color: #7d8597;
        letter-spacing: 2px;
        margin-bottom: 1.5vw;
    }
    
    .hp_about .hp_big_title {
        font-family: 'Bayon', sans-serif;
        font-size: 7.75vw;
        font-weight: 500;
        color: #33415c;
        line-height: 1.1;
        padding: 1vw 14vw 0vw 0vw;
    }
    
    .hp_about .hp_keyword {
        font-size: 3.5vw;
        font-weight: 500;
        color: #333;
        margin-bottom: 0;
        line-height: 1.8;
        padding: 1vw 0vw 2vw 0vw;
    }
    
    .n_aboutViewMore {
        font-size: 3.2vw;
        font-weight: 500;
        color: #fff;
        background-color: #7d8597;
        text-align: center;
        padding: 1%;
        height: 9vw;
        width: 48vw;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s all linear;
        margin-top: 2vw;
        /* border-radius: 25px; */
    }
    
    .hp_about {
        padding: 7vw 5vw 7vw 5vw;
        position: relative;
    }
    
    .hp_about_img {
        width: 100%;
        max-width: 150%;
        margin-top: 5vw;
        margin-left: 0vw;
    }
    
    .hp_about_left {
        padding: 1vw 3vw 0vw 3vw;
        margin-top: 0vw;
    }
    
    .hp_about::after {
        content: "";
        position: absolute;
        top: 90vw;
        right: 0vw;
        width: 40%;
        height: 35%;
        background-color: #e8ecef;
        z-index: -1;
    }
}

/*hp_why*/

.hp_why {
    padding: 4vw 1vw 5vw 9vw;
    position: relative;
}

.hp_why .hp_small_title {
    font-size: 1vw;
    font-weight: 600;
    color: #fff;
    position: relative;
    display: inline-block;
    margin-bottom: 1vw;
}

.hp_why .hp_small_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.3vw;
    width: 100%;
    height: 2px;
    background-color: #f1ab01;
}

.hp_why .hp_big_title {
    font-size: 2.4vw;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2vw;
}

.hp_why .whyContent {
    margin-top: -4vw;
    margin-left: -1vw;
    padding: 0vw 0vw 0vw 0vw;
}

.hp_why .whyBorder {
    padding: 25px 15px;
}

.hp_why .whyBorder {
    position: relative;
    padding: 30px;
}

.hp_why .whyBorder:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5vw;
    height: 97%;
    width: 1px;
    background-color: #ccc;
    transform: translate(50%, -50%); 
}

.hp_why .n_whyBox {
    display: block;
    align-items: center;
    margin-top: 0vw;
    margin-top: 0vw;
    gap: 1vw;
}

.hp_why .n_whyContentTitle {
    font-family: 'Bayon', sans-serif;
    font-size: 1.6vw;
    font-weight: 400;
    color: #33415c;
    line-height: 1.2;
    margin-top: 0.5vw;
}

.hp_why .n_whyContentText {
    font-size: 0.95vw;
    font-weight: 400;
    color: #000;
    line-height: 1.6;
    margin-top: 1vw;
}

.hp_why .n_whyIcon {
    width: 60px;
    height: auto;
    margin-bottom: 1vw; 
}

.hp_why .n_whyIcon {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.hp_why .n_whyBox:hover .n_whyIcon,
.hp_why .n_whygBox:active .n_whyIcon {
    transform: rotate(5deg) scale(1.05);
}

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

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

@media screen and (max-width: 767.5px){
    .hp_why .n_whyContentTitle {
        font-family: 'Bayon', sans-serif;
        font-size: 5.6vw;
        font-weight: 400;
        color: #33415c;
        line-height: 1.2;
        margin-top: 2vw;
    }
    
    .hp_why .n_whyContentText {
        font-size: 3.5vw;
        font-weight: 400;
        color: #000;
        line-height: 1.6;
        margin-top: 1vw;
    }
    
    .hp_why {
        padding: 2vw 10vw 2vw 10vw;
        position: relative;
    }
    
    .hp_why br {
        display: none;
    }
    
    .hp_why .whyBorder:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 1.5vw;
        height: 97%;
        width: 1px;
        background-color: #ccc;
        transform: translate(50%, -50%);
        display: none !important;
    }
    
    .hp_why .whyBorder {
        position: relative;
        padding: 15px;
    }
}

/*hp_product*/

.hp_product {
    padding: 1vw 8.5vw 3vw 8.5vw;
    position: relative;
}

.hp_product_right {
    padding: 6vw 0vw 0vw 5vw;
    margin-top: 0vw;
    background-image: url(https://cdn1.npcdn.net/img/1759115112product-img2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.productBorder2 {
    padding: 0px 0px 0px 9px;
}

.hp_product .hp_small_title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 1.5vw;
}

.hp_product .hp_big_title {
    font-family: 'Bayon', sans-serif;
    font-size: 3.1vw;
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
    padding: 0vw 6vw 0vw 0vw;
    position: relative
}

.hp_product .hp_big_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.5vw;
    width: 105px;
    height: 4px;
    background-color: #fff;
    transform: none;
}

.hp_product .hp_keyword {
    font-size: 0.9vw;
    font-weight: 300;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.8;
    padding: 3.5vw 4vw 2vw 0vw;
}

.n_productViewMore {
    font-size: 0.9vw;
    font-weight: 400;
    color: #fff;
    background-color: transparent;
    text-align: center;
    height: 2.4vw;
    width: 15vw;
    display: flex;
    align-items: center;
    transition: 0.25s all linear;
    margin-top: 0vw;
    /*border-radius: 25px;*/
}

.n_productViewMore:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    /*transform: scale(0.95);*/
}

.n_productViewMore {
    position: relative;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* border: none; */
    outline: none;
    overflow: hidden;
}

.n_productViewMore:hover {
    transform: scale(1.05);
}

.n_productViewMore:active {
    transform: scale(0.85);
}

/*.n_productViewMore:hover::before {*/
/*    animation: shine 1.5s ease-out infinite;*/
/*}*/

/*.n_productViewMore::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 100px;*/
/*    height: 100%;*/
/*    background-image: linear-gradient(*/
/*    120deg,*/
/*    rgba(255, 255, 255, 0) 30%,*/
/*    rgba(255, 255, 255, 0.8),*/
/*    rgba(255, 255, 255, 0) 70%*/
/*    );*/
/*    top: 0;*/
/*    left: -100px;*/
/*    opacity: 0.6;*/
/*}*/

/*@keyframes shine {*/
/*  0% {*/
/*    left: -100px;*/
/*  }*/

/*  60% {*/
/*    left: 100%;*/
/*  }*/

/*  to {*/
/*    left: 100%;*/
/*  }*/
/*}*/

.n_productViewMore img.arrow-icon {
    margin-left: 12px !important;
    width: 8px !important;
    height: auto !important;
    display: inline-block !important;
    transition: transform 0.3s ease;
}

.n_productViewMore:hover img.arrow-icon {
    animation: swing 1s;
    filter: brightness(0) invert(1);
}

.hp_product_img {
    width: 100%;
    max-width: 150%;
    margin-top: 0vw;
    margin-left: 0vw;
}

.hp_product .rowProduct {
    padding: 3vw 0vw 2vw 0vw;
}

.hp_product .productBorder {
    padding: 0 10px;
}

.hp_product .product-card {
    position: relative;
    background: linear-gradient(to bottom, #f3f3f3, #cccccc 80%, #999999 100%);
    padding: 0vw 0vw 0vw 0vw;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
}

.hp_product .product-card img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hp_product .product-card:hover img {
  transform: scale(1.05);
}

.hp_product .product-label {
    font-family: 'Bayon', sans-serif;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #1d3557;
    color: #fff;
    font-size: 1.7vw;
    font-weight: 300;
    padding: 0.25vw 1.2vw 0.25vw 1.2vw;
    z-index: 2;
    letter-spacing: 2px;
    clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 100% calc(100% - 10px), /* bottom-right cut start */ calc(100% - 10px) 100%, /* bottom-right cut end */ 0 100% /* bottom-left */);
}

.hp_product .product-info {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: rgba(29, 53, 87, 0.95);
    color: #fff;
    padding: 15px;
    text-align: center;
    transition: bottom 0.4s ease;
}

.hp_product .product-card:hover .product-info {
    bottom: 0;
}

.hp_product .product-info h4 {
    font-family: 'Bayon', sans-serif;
    font-size: 1.4vw;
    font-weight: 500;
    margin-bottom: 0px;
}

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

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

@media screen and (max-width: 767.5px){
    .hp_product .productBorder2 {
        padding: 0px 0px 0px 0px;
    }
    
    .hp_product .hp_small_title {
        font-size: 4.2vw;
        font-weight: 600;
        color: #fff;
        letter-spacing: 2px;
        margin-bottom: 1.5vw;
    }
    
    .hp_product .hp_big_title {
        font-family: 'Bayon', sans-serif;
        font-size: 7.75vw;
        font-weight: 500;
        color: #fff;
        line-height: 1.1;
        padding: 0vw 6vw 0vw 0vw;
        position: relative;
    }
    
    .hp_product .hp_big_title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3.5vw;
        width: 105px;
        height: 4px;
        background-color: #fff;
        transform: none;
    }

    .hp_product .hp_keyword {
        font-size: 3.5vw;
        font-weight: 300;
        color: #fff;
        margin-bottom: 0;
        line-height: 1.8;
        padding: 5vw 0vw 2vw 0vw;
    }
    
    .n_productViewMore {
        font-size: 3.2vw;
        font-weight: 400;
        color: #fff;
        background-color: transparent;
        text-align: center;
        height: 9vw;
        width: 45vw;
        display: flex;
        align-items: center;
        transition: 0.25s all linear;
        margin-top: 0vw;
        /* border-radius: 25px; */
    }
    
    .hp_product_right {
        padding: 5vw 1vw 3vw 5vw;
        margin-top: 0vw;
        background-image: url(https://cdn1.npcdn.net/img/1759115112product-img2.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .hp_product .product-label {
        font-family: 'Bayon', sans-serif;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #1d3557;
        color: #fff;
        font-size: 5vw;
        font-weight: 300;
        padding: 0.5vw 4.2vw 0.5vw 4.2vw;
        z-index: 2;
        letter-spacing: 2px;
        clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 100% calc(100% - 10px), /* bottom-right cut start */ calc(100% - 10px) 100%, /* bottom-right cut end */ 0 100% /* bottom-left */);
    }
    
    .hp_product .product-card {
        position: relative;
        background: linear-gradient(to bottom, #f3f3f3, #cccccc 80%, #999999 100%);
        padding: 0vw 0vw 0vw 0vw;
        margin-bottom: 20px;
        overflow: hidden;
        text-align: center;
    }
    
    .hp_product .productBorder {
        padding: 0 0px;
    }
    
    .hp_product .product-info h4 {
        font-family: 'Bayon', sans-serif;
        font-size: 5.4vw;
        font-weight: 500;
        margin-bottom: 0px;
    }
    
    .hp_product br {
        display: none !important;
    }
}

/*hp_oem*/

.hp_oem {
    padding: 3vw 8vw 5.5vw 8vw;
    position: relative;
}

.hp_oem .hp_small_title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #7d8597;
    letter-spacing: 2px;
    margin-bottom: 1.5vw;
    text-align: left;
}

.hp_oem .hp_big_title {
    font-family: 'Bayon', sans-serif;
    font-size: 3.5vw;
    font-weight: 500;
    color: #33415c;
    line-height: 1.1;
    margin-bottom: 0vw;
    text-align: left;
}

.hp_oem .rowOem {
    padding: 2vw 0vw 2vw 0vw;
}

.hp_oem .oemBorder {
    padding: 0 10px;
}

.hp_oem .oem-card {
    position: relative;
    background: linear-gradient(to bottom, #f3f3f3, #cccccc 80%, #999999 100%);
    padding: 0vw 0vw 0vw 0vw;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
}

.hp_oem .oem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.hp_oem .oem-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hp_oem .oem-card:hover img {
  transform: scale(1.05);
}

.hp_oem .oem-label {
    font-family: 'Bayon', sans-serif;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #33415c;
    color: #fff;
    font-size: 1.7vw;
    font-weight: 300;
    padding: 0.25vw 1.2vw 0.25vw 1.2vw;
    z-index: 2;
    letter-spacing: 2px;
    clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 100% calc(100% - 10px), /* bottom-right cut start */ calc(100% - 10px) 100%, /* bottom-right cut end */ 0 100% /* bottom-left */);
}

.hp_oem .oem-info {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    /*background: rgba(29, 53, 87, 0.95);*/
    color: #fff;
    padding: 15px;
    text-align: left;
    transition: bottom 0.4s ease;
}

.hp_oem .oem-card:hover .oem-info {
    bottom: 0;
}

.hp_oem .oem-info h4 {
    font-family: 'Bayon', sans-serif;
    font-size: 1.4vw;
    font-weight: 500;
    margin-bottom: 0px;
}

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

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

@media screen and (max-width: 767.5px){
    .hp_oem .hp_small_title {
        font-size: 4.2vw;
        font-weight: 600;
        color: #7d8597;
        letter-spacing: 2px;
        margin-bottom: 1.5vw;
        /*text-align: right;*/
    }
    
    .hp_oem .hp_big_title {
        font-family: 'Bayon', sans-serif;
        font-size: 7.75vw;
        font-weight: 500;
        color: #33415c;
        line-height: 1.1;
        margin-bottom: 3.5vw;
        /*text-align: right;*/
    }
    
    .hp_oem {
        padding: 3vw 5vw 5vw 5vw;
        position: relative;
    }
    
    .hp_oem .oem-label {
        font-family: 'Bayon', sans-serif;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #33415c;
        color: #fff;
        font-size: 5vw;
        font-weight: 300;
        padding: 0.5vw 4.2vw 0.5vw 4.2vw;
        z-index: 2;
        letter-spacing: 2px;
        clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 100% calc(100% - 10px), /* bottom-right cut start */ calc(100% - 10px) 100%, /* bottom-right cut end */ 0 100% /* bottom-left */);
    }
    
    .hp_oem .oem-info h4 {
        font-family: 'Bayon', sans-serif;
        font-size: 5.4vw;
        font-weight: 500;
        margin-bottom: 0px;
    }
}

/*hp_services*/

.hp_services {
    padding: 7vw 8vw 5.5vw 8vw;
    position: relative;
}

.hp_services::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0vw;
    width: 100%;
    height: 80%;
    background-image: url(https://cdn1.npcdn.net/img/1759076232service-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.hp_services .hp_small_title {
    font-size: 1.2vw;
    font-weight: 600;
    color: #7d8597;
    letter-spacing: 2px;
    margin-bottom: 1.5vw;
    text-align: right;
}

.hp_services .hp_big_title {
    font-family: 'Bayon', sans-serif;
    font-size: 4.5vw;
    font-weight: 500;
    color: #33415c;
    line-height: 1.1;
    margin-bottom: 3.5vw;
    text-align: right;
}

.hp_services .click1 {
    position: relative;
    display: inline-block;
    transition: all 0.50s;
}

.hp_services .click1:hover {
    transform: translateY(15px);
}

/*.hp_services .move1 {*/
/*    margin-top: 50px;*/
/*}*/

.hp_services .font-title-2 {
    font-family: 'Bayon', sans-serif;
    font-size: 1.25vw;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}

.hp_services .click1 .border1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; 
    pointer-events: none;
    z-index: 2;
}

.hp_services .border1 {
    position: relative; 
    display: block;
}

.hp_services .border1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
    z-index: 2; 
}

.hp_services .border1 img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.hp_services .click1 .font-title-2 {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 3;
    margin: 0;
    width: 100%;
    text-align: center;
    /* font-weight: bold; */
}

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

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

@media screen and (max-width: 767.5px){
    .hp_services .hp_small_title {
        font-size: 4.2vw;
        font-weight: 600;
        color: #7d8597;
        letter-spacing: 2px;
        margin-bottom: 1.5vw;
        text-align: right;
    }
    
    .hp_services .hp_big_title {
        font-family: 'Bayon', sans-serif;
        font-size: 7.75vw;
        font-weight: 500;
        color: #33415c;
        line-height: 1.1;
        margin-bottom: 3.5vw;
        text-align: right;
    }
    
    .hp_services .font-title-2 {
        font-family: 'Bayon', sans-serif;
        font-size: 5.25vw;
        font-weight: 400;
        color: #fff;
        text-transform: uppercase;
    }
    
    .hp_services {
        padding: 16vw 5vw 5vw 5vw;
        position: relative;
    }
    
    .hp_services::before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0vw;
        width: 100%;
        height: 100%;
        background-image: url(https://cdn1.npcdn.net/img/1759076232service-bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right;
        z-index: -1;
    }
    
    .hp_services .move1 {
        margin-top: 0px;
    }
    
    .serviceBorder {
        padding: 10px 15px;
    }
}

/*footer*/

.footer_type10 {
    color: white;
    background-color: #5c677d;
    padding-top: 1rem;
    overflow-x: hidden;
}

.footer_type10 .logo img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    width: auto;
    max-height: 35px;
}

@media screen and (max-width: 500.5px) {
    .index_wrapper_2 .item>img{
    	min-height:26rem!important;
    	object-fit:cover;
    	object-position: 50% 50%;
    }
}


/* product */
#main_ourproducts img{

object-fit:contain;
}

/* main_category */
#main_category img{

object-fit:contain;
}

/* main_searchproducts */
#main_searchproducts img{

object-fit:contain;
}

/* main_tag */
#main_tag img{

object-fit:contain;
}

/* main_showproducts */
#main_showproducts img{

object-fit:contain;
}