.banner{
    position: relative;
    background: url(../images/banner33.png) no-repeat;
    background-size: 100% 100%;
    min-height: 666px;

}



.banner-txt{



    position: absolute;



    top: 20%;



    left: 50%;



    transform: translateX(-50%);



    color: #ffffff;



    font-size: 1vw;



    text-align: center;



    background: url('../images/bj8.png') no-repeat;



    background-size: 100% 100%;



    padding: 2% 10%;



}



.banner-txt div:first-child{



    font-size: 2vw;



}



.banner img{



    width: 100%;



    max-width: 100%;



}



.service-flow{

    display: flex;

    max-width: 1400px;

    margin: -490px  auto 0 auto;

    justify-content: space-between;

    padding: 40px 0;
    


}

.service-flow .small-container{

    background: url(../images/small-bg.png);

    background-size: 100% 100%;

    width: 32%;

    padding: 30px;

}

.service-flow .small-container .title{

    font-size: 30px;

    font-weight: bold;

    margin: 15px 0;

}

.service-flow .small-container .contant{
    
    line-height: 2;

}

.service-flow .small-container .img-container{

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.service-flow>div{



    /* background: #d9d9d9; */



    position: relative;



}



.service-flow-body{



    padding: 10% 0 1% 0;



    font-size: 0.8vw;



}



.service-flow-giao{



    position: absolute;



    top: -60%;



    left: 14%;



}



.service-flow-body>div{



    width: 30%;



}



.service-flow-img{



    width: 25%;



    margin: 0 auto;



}



.service-flow-img img{



    width: 100%;



    max-width: 100%;



}



.service-commit{



    /* transform: translateY(-40%); */

    /*background: url(../images/liucheng-bg.png) no-repeat center center;*/

    background-size:contain;

     max-width: 1400px; 

    /*height: 76vh;*/

    margin: 0 auto;

    position: relative;

}

.service-commit img{
    max-width: 100%;
}

.service-commit .all-container{

    display: flex;

    position: absolute;

   right:30px;

    bottom:30px;

    /*top: calc(50% + 80px);*/

    /*left: calc(50% + 390px);*/

    /*transform: translate(-50%,-50%);*/

}

.service-commit .all-container .img-container div{
    /*width:16vw;*/
    padding:0.5vw;
}

.service-commit .all-container .img-container img{
    max-width:100%;
}

.service-commit .all-container{
    /*width:40vw;*/
    width: 40%;
}

.service-commit .title{

    font-size: 38px;

    font-weight: bold;

    position: absolute;

    transform: translate(-50%,-50%);

    left: 50%;

    top: 65px;

    width: 100%;
    
    text-align: center;

}

.service-commit-body-left{



    width: 27%;



    position: relative;



}



.service-commit-body-left::before{



    content: "";



    position: absolute;



    top: 0;



    left: -72%;



    width: 100%;



    height: 2px;



    background: #000000;



}



.service-commit-body-left img{



    width: 100%;



    max-width: 100%;



}



.service-commit-body-right{



    font-size: 1vw;



    margin-left: 5%;



    width: 65%;



    position: relative;



}



.service-commit-body-right::before{



    content: "PROMISES";



    position: absolute;



    bottom: 0;



    right: -29.7%;



    font-size: 1.5vw;



    color: #000000;



    font-weight: 700;



    border-bottom: 2px solid #000000;



    width: 50%;



    text-align: left;



    z-index: 2;



}



.service-commit-body-right::after{



    content: "PROMISES";



    position: absolute;



    bottom: -4%;



    right: 5%;



    font-size: 2vw;



    color: #e6e6e6;



    font-weight: 700;



    z-index: 1;



}



.service-commit-body-right>div:first-child{



    font-size: 2vw;



    color: #f51f1f;



    font-weight: 700;



}



.service-commit-body-right>div:nth-child(2){



    width: 10%;



    height: 5px;



    background: #000000;



    margin-top: 4%;



}



.service-commit-body-right>div:nth-child(3),.service-commit-body-right>div:nth-child(4){



    letter-spacing: 0.02vw;



    margin-top: 5%;



    line-height: 2vw;



}



.technical-support{



    background: url('../images/service-bbgg.png') no-repeat;



    background-size: 100% 100%;



    color: #ffffff;



    padding-bottom: 30px;

    margin-top: -60px;



}



.technical-support-title{



    color: #fff;



    font-size: 38px;



    font-weight: 700;



    margin: 80px 0 10px 0;



    /* text-align: center; */



}



.technical-support-body{



    padding: 2% 0 0 0;



}



.technical-support-content{



    /* margin-top: 5%; */



    /*font-size: 0.88vw;*/



    line-height: 2;



}



.technical-support-img img{



    /* width: 100%; */

   width:44px;

   height:38px;

    max-width: 100%;



}



.technical-support-img{



    /* width: 139%; */



    /* background: rgba(48,53,65,.7); */



    /* margin-left: -20%; */



    /* margin-top: 5%; */

    display: flex;

    justify-content: space-between;



}

.technical-support-img .support-container{

    background: url(../images/service-small-bg.png) no-repeat;

    background-size: 100% 100%;

    padding: 20px;

    flex:1;

}

.technical-support-img .support-container div:nth-child(2){

    font-size: 32px;

    color: #f51f1f;

    font-weight: bold;

    margin-top:0.56vw;


}

.technical-support-img .support-container div:nth-child(3){

    line-height: 1.5;

}

.accessories-title{



    color: #f51f1f;



    font-size: 2vw;



    font-weight: 700;



    margin-top: 60%;



}



.accessories-tips{



    font-style: italic;



    color: #000000;



    font-size: 0.8vw;



    font-weight: 700;



    margin-top: 80%;



}



.accessories-center{



    /*padding-bottom: 5%;*/

    position: relative;



    /* margin-top: 5%; */



}

.accessories-center .customer{

    position: absolute;

    top: -35px;

    right: 0;

    padding: 30px 0 30px 20px;

    background-color: #fff;

    border-radius: 30px 0 0 5px;

    box-shadow: 0 0 5px #999;

    overflow:hidden;

    max-width:80%;

}

.accessories-center .customer>div{

    display: flex;
 max-width:100%;

     position: relative; 

}

/*.accessories-center .customer>div::before{

    content: "";

    background:url(../images/triangle.png);

    width: 22px;

    height: 20px;

    display: flex;

    position: absolute;

    left: 80px;

    top: -3px;

}*/

.accessories-center .customer img{

    border: 1px solid #999999;

}

.accessories-center .customer div:nth-child(n+2){

    margin-left: 42px;

}

.accessories-center .certificate{

    display: flex;

    flex-direction: column;

    margin-top: 30px;
    
    padding-bottom: 160px;

}



.accessories-center .certificate .top{

    display: flex;

    align-items: center;

}



.accessories-center .certificate .top .left .title{

    font-size: 38px;

    font-weight: bold;

}

.accessories-center .certificate .top .left .content{

    /*font-size: 0.89vw;*/

    line-height: 2;

   /* padding-right: 170px;*/

    margin-top: 20px;

}

.accessories-center .certificate .top .left .lines{

    display: flex;

    margin-top: 30px;

}

.accessories-center .certificate .top .left .lines .left::after{

     content:"";

     background-color: #f51f1f;

     width: 5.55vw;

     height: 0.55vw;

     border-radius: 5px;

     display: flex;

}

.accessories-center .certificate .top .left .lines .right::after{

    content:"";

    background-color: #f51f1f;

    width: 2.77vw;

    height: 0.55vw;

    border-radius: 5px;

    display: flex;

    margin-left: 30px;

}

.accessories-center .certificate .top .right{

    display: flex;
    gap: 30px;

}

.accessories-center .certificate .top img:hover,.accessories-center .certificate .bottom img:hover{
     transform:scale(1.1);

}

.accessories-center .certificate .bottom{

    display: flex;
 
    flex-wrap: wrap;
    margin-top:30px;

    gap: 20px;

    /*justify-content: flex-end;*/

}
.accessories-center .certificate .bottom div{
    width: calc((100% - 60px) / 4);
}
.accessories-center .certificate .bottom img{
    max-width: 100%;
    transition:all 0.5s ease;
}


.accessories-center-left a{



    background: linear-gradient(to right,#ffa602 0%,#ffc107 100%);



    color: #ffffff;



    padding: 4% 0 4% 30%;



    font-size: 1vw;



    font-weight: 700;



    width: 150%;



    margin-top: 5%;



    position: relative;



    border-radius: 1vw;



}



.accessories-center-left a::before{



    content: "";



    position: absolute;



    top: 10%;



    left: 8%;



    width: 8%;



    height: 80%;



    background: url(../images/bj11.png) no-repeat;



    background-size: 100% 100%;



}



.accessories-center-right{



    position: relative;



}



.accessories-center-right img{



    width: 100%;



    max-width: 100%;



}



.accessories-center-right::before{



    content: "ACCESSOIRES";



    position: absolute;



    bottom: 30%;



    right: -29.7%;



    font-size: 1.5vw;



    color: #000000;



    font-weight: 700;



    border-bottom: 2px solid #000000;



    width: 50%;



    text-align: left;



    z-index: 2;



}



.accessories-center-right::after{



    content: "ACCESSOIRES";



    position: absolute;



    bottom: 26%;



    right: 0;



    font-size: 2vw;



    color: #e6e6e6;



    font-weight: 700;



    z-index: 1;



}



.banner .home-service{

    color: #fff;
    display:flex;
    width: 100%;
    max-width: 1400px;
    margin:0 auto;
    padding: 20px 0;
}

.banner .home-service a{
    color: #fff;
}

.banner .nav-tips .our-service{

    color: #fff;

    font-size: 58px;

    font-weight: bold;

    margin: 1.11vh 0;

}

.banner .nav-tips .content{

    color: #fff;

    /*font-size: 0.89vw;*/

    line-height: 2;

}

.banner .nav-tips{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width:1400px){
    .banner,.technical-support,.accessories-center{
        padding-left: .31rem;
        padding-right: .31rem;
    }
}
@media screen and (max-width:1200px){
    .accessories-center .certificate .top{
        flex-wrap:wrap;
    }
    .accessories-center .certificate .top>.right{
        margin-top:3vh;
    }
}

@media (max-width:1080px){
    .accessories-center .certificate{
        padding-bottom: 50px;
    }
    .banner{
        background: rgb(41,45,58);
        min-height: 0;
        padding-bottom: 30px;
        
    }
    .banner .nav-tips .our-service{
        font-size: 48px;
    }
    .service-flow{
        margin: 0;
    }
    .service-commit .title,.technical-support-title,.accessories-center .certificate .top .left .title{
        font-size: 30px;
    }
    .technical-support-img .support-container div:nth-child(2){
        font-size: 30px;
    }
    .accessories-center .customer{
        max-width: 100%;
    }
    .technical-support{
        background: rgb(41,45,58);
    }
}
@media (max-width:768px){
    .service-flow{
        flex-wrap: wrap;
        gap: 20px;
    }
    .service-flow .small-container{
        width: 100%;
    }
    .banner .nav-tips .our-service{
        font-size: 40px;
    }
    .service-commit .title, .technical-support-title, .accessories-center .certificate .top .left .title{
        font-size: 24px;
    }
    .service-commit{
        display: none;
    }
    .technical-support-title{
        margin-top: 30px;
    }
    .technical-support-img{
        flex-wrap: wrap;
        gap: 20px;
    }
    .technical-support-img .support-container{
        width: calc((100% - 40px) / 3);
        flex: none;
    }
    .technical-support-img:after{
        content: "";
        margin-left: auto;
    }
    .accessories-center .certificate .top>.right{
        flex-wrap: wrap;
    }
    .accessories-center .customer{
        top: 0;
    }
    .technical-support-img .support-container div:nth-child(2){
        font-size: 20px;
    }
    .accessories-center .certificate .bottom div{
        width: calc((100% - 20px) / 2);
    }
    
}

@media (max-width:500px){
    .accessories-center .certificate img{
        max-width: 100%;
    }
    .accessories-center .certificate .top>.right,.accessories-center .certificate .bottom{
        gap: 20px;
    }
    .accessories-center .certificate .top>.right div,.accessories-center .certificate .bottom div{
        max-width: calc((100% - 20px) / 2);
    }
    .technical-support-img .support-container{
        width: calc((100% - 20px) / 2);
    }
    .banner .nav-tips .our-service{
        font-size: 30px;
    }
    .service-flow .small-container .title,.technical-support-title,.accessories-center .certificate .top .left .title{
        font-size: 20px;
    }
}