﻿#main_index{
    overflow: hidden;
    padding-bottom: 0px !important;
}
a:hover{
    text-decoration: unset;
}
:root{
    --primary-color: #ed1c24;
    --sec-padding: 5rem;
}


.main-btn{
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: clamp(1rem, 1vw, 1vw) !important;
    color: var(--primary-color);
    font-weight: 500;
    padding: 0;
    
    .btn-icon{
        width: 28px;
    }
    
    &:hover{
        .btn-icon{
            animation: btnAnim 1s linear infinite;
            filter: brightness(0);
        }
    }
}
@keyframes btnAnim{
    0%, 100%{
        transform: translate(0);
    }
    50%{
        transform: translateX(-10px);
    }
}


.subtitle-style{
    color: var(--primary-color);
    font-size: clamp(1rem, 1.35vw, 1.35vw);
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}
.title-style{
    font-size: clamp(1.75rem, 2.3vw, 2.3vw);
    font-weight: 700;
    margin: 0;
    
    span{
        color: var(--primary-color);
    }
}
.content{
    font-size: clamp(.85rem, .95vw, .95vw);
    font-weight: 500;
    line-height: 1.75;
    margin: 0;
}


.industry_topContact {
    background-color: var(--primary-color);
}
.ts-row{
    display: flex;
    justify-content: space-between;
    padding: .5rem 9%;
}

.industry_topContactContent a{
    color:#fff;
    text-decoration: none;   
    font-size: clamp(.85rem, 1vw, 1vw);
}
.industry_topContactText img{
    width: 25px;
}

.industry_topContactContent {
    display: flex;
    justify-content: flex-start;       
}

.industry_topContactText {
    font-size: .8rem;
    color: #fff;
    
}

.search-bar{
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #fff;
    padding: 5px 15px;
}
.search-bar input{
    color: #fff;
    background: transparent;    
    border-style: none;
}
.search-bar input::placeholder{
    color: #fff;
}
.search-bar button{    
    border-style: none;
    background: transparent;
    color: #fff;
}

@media all and (max-width: 992px) { 
    .industry_topContact {
        display: none;
    }
}


.navbar_type8{
    height: 100px;
    background: #000;    
}
#main_index .navbar_type8{
    background: transparent;
}
.navbar_type8 .logo{
    margin-left: 9%;  
    flex: unset;
    min-width: 24%;
}
.navbar_type8 .logo img{
    padding: 0px;
    width: 100%;
}

.navbar_type8 .nav_tab{
    flex: unset;
    width: 100%;
    padding-right: 9%;
    gap: 4vw;  
}
.navbar_type8 .nav_tab .nav_item:before{
    border-color: var(--primary-color);
    border-width: 2px;
    width: 0;
    transition: all .3s linear;
}
.navbar_type8 .nav_tab .nav_item a{
    color: #fff;
    padding: 0;
    font-size: clamp(.9rem, 1.2vw, 1.2vw);
    font-weight: 600;       
}
.navbar_type8 .nav_tab .nav_item:hover:before{
    width: 100%;
}

.dark_nav{
background: rgba(0, 0, 0, 0.9) !important;
}

.navbar_mobile{
    background: #0a0a0a;
}
.navbar_mobile .logo_img{
    max-height: 35px;
}
.navbar_mobile .row_1{
  height: 100%;
  margin: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

@media(max-width:1300px){
    .navbar_type8 {
        height: 100px;
    }
}


.hp_banner{
    position: relative;
}

.b-content{
    position: absolute;
    left: 30%;
    bottom: 8%;
}
.b-row.top{
    margin-left: -30%;
    display: flex;    
    align-items: end;
    gap: 3rem;
}
.b-row.top h2{
    white-space: nowrap;
}
.b-row.top h3{
    color: #fff;
    width: 28%;
    font-size: clamp(.85rem, 1.25vw, 1.25vw);
    font-weight: 700;
    line-height: 1.3;
}

.b-row.middle{
    margin-bottom: 3.5%;
}

.b-content h2{
    color: #fff;
    font-size: clamp(2.5rem, 4.75vw, 4.75vw);
    font-weight: 700;
    margin-bottom: 0;
    
    span{
        color: var(--primary-color);
    }
}
.b-content ul{
    color: #fff;
}
.b-content li{
    font-size: clamp(.85rem, 1.35vw, 1.35vw);
    font-style: italic;
    
    &:not(:last-child):after{
        display: inline-block;
        content: "•";
        margin: 0 1rem;
    }
}
.b-row.middle h3{
    color: #fff;
    font-size: 125%;
    
}

.b-highlight{
    position: absolute;
    width: 25vw;
    bottom: 0;
    left: 0;    
    padding-left: 3vw;
    padding-bottom: 2vw;
}
.b-highlight h3{
    font-size: clamp(1.1rem, 1.75vw, 1.75vw);
    font-weight: 700;
    
    span{
        color: var(--primary-color);
    }
}
.b-highlight p{
    font-size: clamp(.75rem, .95vw, .95vw);
    margin: 0;
}

.b-scroll{
    position: absolute;
    bottom: 5%;
    right: 2%;
}
.scroll-frame{
    width: 25px;
    margin-left: auto;
    margin-bottom: .5rem;
    animation: scrollAnim 1.5s linear infinite;
}
@keyframes scrollAnim{
    0%, 100%{
        transform: translate(-10px, -10px);
    }
    50%{
        transform: translate(0, 0);
    }
}
.b-scroll p{
    color: #fff;
    margin: 0;
}

@media(min-width:991px){
    .slider_banner{
        margin-top: -100px;
    }
}

@media(max-width:991px){
    .slider_banner .item > img{
        min-height: 60vw;
        object-fit: cover;
        object-position: left;
    }
    
    .b-highlight{
        width: 31vw;
        padding-bottom: 3vw;
    }
    
    .b-content{
        left: 35%;
    }
    .b-row.top{
        margin-left: -40%;
        margin-bottom: 1rem;
    }
    .b-row.top h3{
        width: 35%;
        font-size: 120%;
        margin: 0;
    }
    .b-row.top h2{
        white-space: normal;
    }       
}

@media(max-width:768px){
    .slider_banner .item > img{
        min-height: 80vw;
        object-fit: cover;
    }
    
    .b-highlight{
        width: 42vw;
        padding-bottom: 4vw;
    }
    
    .b-content{
        bottom: unset;
        top: 0;
        left: 0;
        padding: 5rem 2rem;
    }
    .b-row.top{
        margin: 0;   
        margin-bottom: 1rem;
        gap: 0;
    }    
    .b-row.top h2{
        width: auto;
    }
    .b-row.top h3{
        min-width: 50%;
        font-size: 140%;
    }
    
    .b-content li{
        font-size: 120%;
    }
}

@media(max-width:576px){
    .slider_banner .item > img{
        min-height: 140vw;
        object-position: center;
    }
    
    .b-highlight{
        padding: 0;
        width: 80vw;
        bottom: 5%;
        left: 5%;
    }
    .b-highlight h3{
        color: #fff;
    }
    .b-highlight p{
        color: #fff;
    }
    
    .b-scroll{
        right: 5%;
    }
    
    .b-content{
        padding: 0rem 5%;
        top: 5%            
    }
    .b-content h2{
        font-size: 260%;
        
        span{
            color: white;
        }
    }
    .b-content ul{
        flex-direction: column;
    }
    .b-content li:after{
        display: none !important;
    }
    .b-content li:before{
        display: inline-block;
        content: "•";
        margin: 0 1rem;
    }
}


.hp_about{
    background: url(../jpg/b_about_bg_vq8s7b_1773716275a0zds4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding: calc(var(--sec-padding) * 3) 0 calc(var(--sec-padding) * 4);
}

@media(min-width:768px) and (max-width:991px){
    .abt-left-box{
        display: flex;
        align-items: end;
        justify-content: space-between;
    }
}

@media(min-width:991px){
    .abt-content{
        width: 92%;
        margin-left: auto;
    }   
    
    .hp_about .container{
        max-width: 100%;
        padding: 0 9%;
    }
}

@media(max-width:1200px){
    .hp_about{
        padding: calc(var(--sec-padding) * 1.5) 0 calc(var(--sec-padding) * 2.5);
    }
}

@media(max-width:768px){
    .hp_about{
        padding: var(--sec-padding) 0 calc(var(--sec-padding) * 2);
    }
}


.hp_wcu{
    margin-top: calc(var(--sec-padding) * -1);
    padding-bottom: var(--sec-padding);
}
.wcu-frame{
    position: relative;
}
.wcu-title-box{
    position: absolute;
    top: 0;
    right: 0;
    padding: 2vw 1vw 2.6vw 2vw;
}

.wcu-list{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-left: auto;
}
.wcu-box{
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.wcu-box:not(:last-child){
    margin-bottom: 2rem;
}
.wcu-icon img{
    max-width: 72px;
}
.wcu-info p{
    margin: 0;
    font-size: clamp(.85rem, .95vw, .95vw);
    line-height: 1.45;
}
.wcu-info h3{
    font-size: clamp(1rem, 1.3vw, 1.3vw);
    font-weight: 700;
}

@media(min-width:991px) and (max-width:1200px){
    .wcu-title-box .subtitle-style{
        font-size: 120%;
        margin-bottom: .5rem !important;
    }
    .wcu-title-box .title-style{
        font-size: 180%;
    }
    .wcu-icon{
        width: 160px;
    }
}

@media(min-width:991px){
    .hp_wcu .container{
        max-width: 100%;
        padding: 0 9%;
    }
    .wcu-list{
        padding-bottom: 5%;
    }
}

@media(max-width:991px){
    .wcu-title-box{
        padding: 5vw;
    }
    .wcu-frame{
        margin-bottom: 3rem;        
    }
    .wcu-list{
        margin: auto;
    }
    .wcu-icon{
        min-width: 80px;
        width: 80px;
        aspect-ratio: 1/1;
    }
    .wcu-info h3{
        font-size: 130%;
    }
    .wcu-info p{
        font-size: 110%;
    }
}

@media(Max-width:768px){
    .wcu-title-box{
        padding: 2.5vw 0vw 2.5vw 2vw;
    }
}

@media(max-width:576px){
    .wcu-title-box{
        padding: 5vw;
    }
    .wcu-title-box h6{
        font-size: 3vw;
        margin-bottom: .5rem !important;
    }
    .wcu-title-box h2{
        font-size: 4.35vw;
    }
    
    .wcu-icon{
        min-width: 60px;
        width: 60px;
    }
}


.index_wrapper_5{
    background: url(../png/d_core_business_bg_l5i4z0_17737270849wkmzp.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f2f2f2;
    border-radius: 5rem;
    padding: var(--sec-padding) 0;
}
.hp_core .title-wrapper{
    display: flex;
    gap: 5rem;
}
.hp_core .title-wrapper .title-content{
    width: 48%;
}

.product_cat-10 .wrapper_product_category{
    text-align: left;
    background: #fff;
    margin-bottom: 0;
    padding-bottom: 2rem;
    border-radius: 1rem;    
}
.product_cat-10 .wrapper_product_category .mt-3{
    padding: 0 2.5rem;
}
.product_cat-10 .wrapper_product_category .mt-3:nth-child(2){
    margin-top: 2rem !important;
}
.product_cat-10 .wrapper_product_category .product_img{
    padding-top: 65%;
}
.product_cat-10 .wrapper_product_category h3{
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    overflow-wrap: normal;
}
.product_cat-10 .wrapper_product_category .view-btn{
    padding: 0;
    background: transparent;
    border: none;
    color: #a2a2a2;
    transition: all .1s linear;
    
    &:hover{
        color: var(--primary-color);
    }  
}
.product_cat-10 .wrapper_product_category:hover .view-btn{
    transform: unset;
}
.product_cat-10 .wrapper_product_category .mt-3:last-child{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product_cat-10 .wrapper_product_category .mt-3:last-child:after{
    display: inline-flex;
    content: "";
    width: 25px;
    height: auto;
    aspect-ratio: 1/1;
    background: url(../png/button_red_ptlo47_177371639902hynw.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.product_cat-10 .wrapper_product_category:hover .mt-3:last-child:after{
    animation: btnAnim .8s linear infinite;
}
.product_cat-10 .wrapper_product_category:hover{
    background: var(--primary-color);
    
    h3,
    .view-btn{
        color: #fff;
    }
    
    .mt-3:last-child:after{
        filter: brightness(0) invert(1);
    }
}

@media(min-width:991px){
    .index_wrapper_5 > .container{
        max-width: 100%;
        padding: 0 calc(9% - 15px);
    }
    .hp_core .container{
        max-width: 100%;
    }
}

@media(max-width:991px){
    .product_cat-10 .wrapper_product_category .mt-3{
        padding: 0 1rem;
    }
    .product_cat-10 .wrapper_product_category .mt-3:nth-child(2){
        margin-top: 1rem !important;
    }
    .product_cat-10 .wrapper_product_category .mt-3:last-child{
        margin-top: .5rem !important;
        
        &:after{
            width: 20px;
        }
    }
    .product_cat-10 .wrapper_product_category{
        padding-bottom: 1rem;
    }
    .product_cat-10 .wrapper_product_category h3{
        font-size: 150%;
    }
}

@media(max-width:768px){
    .hp_core .title-wrapper{
        flex-direction: column;
        gap: 1.25rem;
    }
    .hp_core .title-wrapper .title-content{
        width: 100%;
    }
    .product_cat-10 .col-12:not(:last-child) .wrapper_product_category{
        margin-bottom: 3rem;
    }
}

@media(max-width:576px){
    .index_wrapper_5{
        border-radius: 3rem;
    }
}


.hp_service{
    padding: calc(var(--sec-padding) * 1.5) 0;    
    
    &:before{
        position: absolute;
        content: "";
        width: 20vw;
        height: 20vw;
        background: url(../png/e_service_bg_2_5hsbno_1773731389ou7w0j.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
}

.service-content{
    position: relative;    
    height: 90%;    
    
    &:before{
        position: absolute;
        content: "";
        width: 140%;
        height: 100%;
        background: url(../jpg/imgbg_gr1bh3_1773729638qzam3k.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;                
        border-radius: 2rem;
        z-index: -1;
        top: -10%;
    }
}
.service-content .title-box{
    padding: 0 5rem;
}
.service-content .title-box .title-style{
    white-space: nowrap;
}
.service-content .title-box .content{
    font-weight: 400;
}

.service-content .service-list{
    padding: 0 5rem;
}
.service-box{
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    border-bottom: 1px solid #fff;
    padding-bottom: 1rem;
}
.service-box:hover .service-btn-icon{
    animation: swing 1s linear;
}
.service-list a:not(:last-child) .service-box{
    margin-bottom: 1rem;
}
.service-num{
    font-size: clamp(.85rem, 1.15vw, 1.15vw);
    font-weight: 500;
    width: 0px;
    font-style: italic;
}
.service-title{
    font-size: clamp(1.15rem, 1.5vw, 1.5vw);
    font-weight: 500;
    width: 100%;    
}
.service-btn-icon img{
    width: 35px; 
}

.service-frame{
    position: relative;
    margin-left: -5%;
    margin-top: 10%;
    
    &:before{
        position: absolute;
        content: "";
        width: 20vw;
        height: 20vw;
        background: url(../png/e_service_bg_1_sah736_17737313895fyvof.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: -11.5vw;
        left: 17vw;
        z-index: -1;
    }        
}
.service-more-box{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33%;
    background: #f1f1f1;
    padding: 1.9rem 2rem;
    border-radius: 1rem;
}
.service-more-box h3{
    font-size: clamp(.85rem, 1.2vw, 1.2vw);
    font-weight: 700;
    margin-bottom: 1rem;
}

@media(min-width:991px){
    .hp_service .container{
        max-width: calc(100% - 18%);
        margin: 0 9%;
    }
}

@media(max-width:1400px){
    .service-more-box{
        width: 35%;
    }
}

@media(max-width:1300px){
    .service-more-box{
        padding: 0;
        width: 14vw;
        height: 10.5vw;
        display: grid;
        place-content: center;
        padding: 0 1.25rem;
    }
    .service-more-box h3{
        margin-bottom: .75rem;
    }
    .service-more-box .main-btn{
        font-size: 100% !important;
        
        .btn-icon{
            width: 22px;
        }
    }
    
    .service-content .title-box{
        padding: 0 1rem 0 3rem;
    }
    .service-content .service-list{
        padding: 0 3rem;
    }
}

@media(max-width:1200px){
    .service-content{
        padding: 3rem 0;        
        
        &:before{
            top: 0;
        }
    }
    .service-content .service-list{
        padding: 0 1rem 0 3rem;
    }
    .hp_service .row{
        align-items: end;
    }
    .service-frame{
        margin-bottom: 8%;
    }
}

@media(max-width:991px){
    .hp_service{
        padding: var(--sec-padding) 0 10px;
    }
    .service-content:before{
        width: 100%;
    }
    .service-more-box{
        width: 35%;
        height: 40%;
        border-radius: 1.75rem;
        padding: 0 2.5rem;
    }
    .service-more-box h3{
        font-size: 135%;
    }        
    
    .service-content .title-box,
    .service-content .service-list{
        padding: 0 3rem;
    }
}

@media(max-width:768px){
    .hp_service{
        padding-bottom: calc(var(--sec-padding) * .5)
    }
    .service-frame{
        margin-left: 0;
        width: 120%;
        margin-left: -10%;
    }
    .service-more-box{
        padding: 0 2rem;
    }
    .service-more-box h3{
        font-size: 2.5vw;
    }
}

@media(max-width:576px){
    .hp_service{
        padding-bottom: var(--sec-padding);
    }
    .service-frame{
        width: 100%;
        margin: 0;
        margin-top: 3rem;
    }        
    .service-content .title-box .title-style{        
        white-space: normal;
    }
    .service-box{
        gap: 2rem;
    }
    .service-more-box{
        padding: 0 3vw;
        border-radius: 13px;
        text-align: center;
    }    
    .service-more-box .main-btn{
        font-size: 2vw !important;
        gap: .35rem;
        margin: auto;
    }
    .service-more-box .main-btn .btn-icon{
        width: 15px;
    }                
    .service-title{
        font-size: 100%;
        line-height: 1.25;
    }
    
    .service-frame:before{
        left: 70%;
    }
}


.hp_brand{
    padding-bottom: calc(var(--sec-padding) * 1.5);
}
.brand-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;   
    width: 90%;
    margin: auto;
}
.brand-wrapper .title-box{
    min-width: 40%;
}
.brand-list{
    display: flex;
    width: auto;
    gap: 3rem;
}

@media(min-width:991px){
    .hp_brand .container{
        max-width: 100%;
        padding: 0 9%;
    }
}

@media(max-width:991px){
    .hp_brand{
        padding-bottom: var(--sec-padding);
    }
    .brand-wrapper{
        flex-direction: column;
        gap: 2rem;
    }
}

@media(max-width:576px){
    .brand-list{
        flex-wrap: wrap;
    }
    .brand-item{
        width: 70%;
        margin: auto;
    }
}


.hp_license{
    background: url(../png/g_map_bg_bgdw9e_17737342709g7sza.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding: calc(var(--sec-padding) * 2) 0 calc(var(--sec-padding) * 2);
}
.point-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 80%;
}
.point-box{
    display: flex;
    gap: 1rem;
}
.point-box h3{
    font-size: clamp(1rem, 1.7vw, 1.7vw);
    font-weight: 600;    
    margin-bottom: .25rem;
}
.point-box p{
    color: #666;
    margin: 0;
}
.point-dot{
    display: block;
    content: "";    
    height: 10px;
    width: 10px;
    min-width: 10px;
    background: var(--primary-color);
    border-radius: 50%;    
    margin-top: .7rem;
}

@media(min-width:991px){
    .hp_license .container{
        max-width: 100%;
        padding: 0 9%;
    }
    .license-right-box {
        width: 90%;
        margin-left: auto;
    }
}

@media(Max-width:991px){
    .point-list{
        width: 100%;
        margin-bottom: 3rem;
    }
}

@media(max-width:768px){
    .hp_license{
        padding: calc(var(--sec-padding)) 0 calc(var(--sec-padding) * 2);
    }
}

@media(max-width:576px){
    .hp_license{
        padding: calc(var(--sec-padding)) 0;
    }
    .point-list{
        grid-template-columns: 1fr;
    }
}


.hp_cta{
    overflow: hidden;
}
.cta-wrapper {
  background: url(../png/h_contact_bg_bhy9xi_1773735871gw693h.png) var(--primary-color);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4.5rem;
  padding: var(--sec-padding) calc(var(--sec-padding) * 1.35);
  display: flex;
}
.cta-wrapper .title-box{
    width: 40%;
}
.cta-wrapper .content-box{
  color: #fff;
    width: 45%;
    margin-left: auto;
}
.cta-wrapper .content-box .main-btn{
  color: #fff;
    
    &:hover .btn-icon{
        filter: unset;
    }
}

@media(min-width:991px){
    .hp_cta .container{
        max-width: 100%;
        padding: 0 9%;
    }
}

@media(Max-width:991px){
    .cta-wrapper{
        padding: var(--sec-padding) calc(var(--sec-padding) * .75);
    }
}

@media(max-width:768px){
    .cta-wrapper{
        padding: 3rem;
        border-radius: 3rem;
        flex-direction: column;        
    }
    .cta-wrapper .title-box,
    .cta-wrapper .content-box{
        width: 100%;
    }
    .cta-wrapper .title-box{
        margin-bottom: 1rem;
    }
}

@media(max-width:576px){
    .hp_cta .container{
        padding: 0;
    }
    .cta-wrapper{
        border-radius: 0;
    }
}


.footer_type10{
    background: url(../jpg/i_footer_bg_9i610e_1773735394o4itov.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: calc(var(--sec-padding) * 1.35) !important;
    margin-top: calc(var(--sec-padding) * -1);
    padding-bottom: 1rem !important;
}
.footer_type10 .logo{
    padding-top: 45px;
    
    img{
        max-height: 45px;
    }
}
.footer_type10 .text{
    font-size: clamp(.85rem, .95vw, .95vw);
}
.footer_type10 a:hover{
    color: var(--primary-color) !important;
}

@media(min-width:991px){
    .footer_type10 > .container{
        max-width: 100%;
        padding: 0 9%;
    }
}



#main_showproducts h1 {
  
    font-size: 20px;
    
}

#main_showproducts h2 {
  
    font-size: 20px;
    
}

#main_showproducts h3 {
  
    font-size: 20px;
    
}


#main_services h1 {
  
    font-size: 20px;
    
}

#main_services h2 {
  
    font-size: 20px;
    
}

#main_services h3 {
  
    font-size: 20px;
    
}