.main{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #000;
    box-sizing: border-box;
}
.h100{
    height: 100%;
}
.main .ber{
    width: 100%;
    position: absolute;
     opacity: 0.8;
    left: 0px;
    top: 0px;
    height: 100%;
}
.main .con{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0px -19px 69px #000 inset;

}

.nav{
    background-color: rgba(0,0,0,0.7);
    width: 250px;
    margin: auto;
    height: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
}
.navTop{
    width: 150px;
    margin: auto;
    height: 150px;
    transform: rotate(45deg);
    text-align: center;
    margin-bottom: 51px;
    display: flex;
    justify-content: center;
    background-color: #0D0D0D;
}
.navTop img{
    transform: rotate(-45deg);
}
.navLsit>a{
    font-size: 22px;
    display: block;
    text-align: center;
    position: relative;
    padding: 15px 0px;

}
.navLsit>a:hover{
    background-color: rgba(0,0,0,0.5);
    color: #fff;

}

.navLsit>a>.make{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    width: 100%;
    display: none;
    right: -100%;
    top: 0px;
}
.navLsit>a:hover .make{
    display: block;
}
.navLsit>a>.make>a{
    font-size: 22px;
    display: block;
    text-align: center;
    padding: 15px 0px;
}
.navLsit>a>.make>a:hover{
    background-color: #0f0f0f;
    color: #fff;
}
.navHref{
    display: flex;
    justify-content: center;
    margin-top: 65px;
}
.navHref>a{
    display: inline-block;
    width: 34px;
    display: flex;
    margin: 3px;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 1px solid rgb(95, 95, 95);
}
.footer{
    background-color: #000;
    width: 100%;
    height: 74px;
    position: fixed;
    bottom: 0px;
    text-align: center;
    line-height: 74px;
    z-index: 5;
    left: 0px;
}
.footer a{
    color: #262626;
}
.returnIndex{
    position: fixed;
    right: 50px;
    bottom: 160px;
    z-index: 15;
}
.returnIndex:hover{
    color: #fff;
}
.conNav{
    margin: 0px;
}
.mainCon{
    width: 1440px;
    margin: auto;
}
.navLsit .on{
    color: #fff;
}
.text{
    width: 954px;
    height: 806px;
    animation: myfirstTe 2s;
    text-align: center;
    padding: 60px 30px 60px 80px;
    box-shadow: 0px 0px 130px #000 inset;
      overflow: hidden;
    background-color: rgba(0,0,0,0.5);
}
.mainCon{
    display: flex;
    align-items: center;
    padding-bottom: 74px;
    justify-content: flex-end;
}
.contentPage{
    overflow-y:auto ;
    height: 530px;
    padding-right: 58px;

}

.contentPageC .title{
    font-size: 44px;
    margin-bottom: 59px;
    font-style:italic;
    line-height: 44px;
    color: #fefefe;
}
.contentPageC img{
    max-width: 100%;
}
.contentPage .subtitle{
    font-size: 28px;
    color: #fefefe;
    line-height: 28px;
    margin-bottom: 30px;

}
.contentPage .p{
    font-size: 16px;
    line-height: 30px;
    color: #fefefe;
    margin-bottom: 38px;
}
.contentPage::-webkit-scrollbar {/*滚动条整体样式*/

    width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

}

.contentPage::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

    border-radius: 10px;

     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: #A3A3A3;

}

.contentPage::-webkit-scrollbar-track {/*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 10px;

    background: #201E1B;

}

.aboutUs{
    display: flex;
    text-align: left;
}
.aboutUs>img{
    position: relative;
    left: -100px;
}
.aboutUsPbottom{
    padding-bottom: 0px;
    overflow: visible;
}

.aboutUsPbottom .contentPage{
    height: auto;
    overflow: visible;
}
.aboutUsTitle{
font-size: 28px;
animation: myfirst 4s;
color: #e8e8e8;
margin-bottom: 30px;
padding-top: 60px;
}
.aboutUsSubtitle{
    font-size: 18px;
    animation: myfirst 4s;
    color: #e8e8e8;
    line-height: 36px;
    
}

.aboutUsP{
    font-size: 16px;
    line-height: 32px;
    margin-top: 65px;
    animation: myfirsta 4s;
    
    
    color: #e8e8e8;
}

.honoraryCertificate .title{
font-size: 44px;
margin-bottom: 43px;
font-style:italic;
padding-top: 30px;
text-align: center;
color: #e8e8e8;
animation: myfirste 2s;
}
.honoraryCertificateCon>.list{
width: 950px;
height: 154px;
padding: 12px;
display: flex;
align-items: center;
background-color: rgba(0,0,0,0.6);
box-sizing: border-box;
margin-bottom: 12px;
transition: all 1s;
}
.honoraryCertificateCon>.list:hover{
    transition: all 1s;
    transform: scale(1.1);
}
.honoraryCertificateCon>.list .listImg{
    height: 130px;
    width: 180px;

}
.honoraryCertificateCon>.list .listImg img{
    width:100%;
    object-fit: contain;
}
.honoraryCertificateCon>.list .listTitle{
    font-size: 28px;
    color: #e8e8e8;
    margin-left: 58px;
}
.honoraryCertificateCon>.list .listText{
    font-size: 24px;
    color: #e8e8e8;
    margin-left: 62px;
}
.InterviewSwiper{
    padding-right: 30px;
    position: relative;
}

.lisiImg .img{
    width: 100%;
    object-fit: contain;
}
.Interview .swiper{
    width: 550px;

}
.Interview{
    flex: 1;
    margin-right: -300px;
    padding-left: 200px;
}

.InterviewCon{
    overflow: hidden;
   padding-left: 30px;
}
.suspended{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    left: 0px;
    top: 0px;
    align-items: center;
    justify-content: center;
}
.suspended>div{
    width: 63px;
    height: 63px;
    padding-left: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.6);
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.InterviewSwiper .lisiImg{
    width: 100%;
    height: 310px;

    position: relative;
}
.InterviewSwiper .listDate{
    width: 66px;
    position: absolute;
    left: -10px;
    bottom: -24px;
    text-align: center;
    background-color: #0e0e0e;
    height: 66px;
    padding-top: 14px;
    color: #E8E8E8;
    border-radius: 50%;
}
.InterviewSwiper .listText{
    margin-top: 42px;
}
.InterviewSwiper .listText>:nth-child(1){
    color: #e8e8e8;
    font-size: 18px;
    text-align: center;
}
.InterviewSwiper .listText>:nth-child(2){
    color: #e8e8e8;
    font-size: 18px;
    margin-top: 24px;
    display: block;
    text-align: center;text-decoration:underline;
}
.Interview .title{
    font-size: 44px;
    color: #fefefe;
    font-style:italic;
    animation: myfirstTe 2s;
    text-align: center;
}
.Interview .select{
    width: 100px;
    height: 46px;
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    padding: 0 15px;box-sizing: border-box;
    border: 1px solid #bfbfbf;
    display: flex;
    align-items: center;
    margin: auto;margin-top: 20px;
}
.Interview .select select{
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    border: none;
    width: 100%;
    height: 100%;
}
.InterviewTitle{
    margin-left: -200px;
    margin-bottom: 100px;

}
.InterviewDetails{
    text-align: left;
}
.InterviewDetails .title{
    font-size: 24px;
    text-align: center;
}
.InterviewDetailsImg{
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}
.suspended img{
    width: auto;
}
.projectIntroductionList>div>p{
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 24px;
    color: #e8e8e8;
}
.projectIntroductionList>div>.on{
    text-decoration: underline;
}
.projectIntroduction{
    display: flex;
    justify-content: space-between;
    margin-top: 46px;
}

.projectIntroductionCon{
    padding-left: 0px;
    width: 950px;
    animation: myfirstTe 2s;
}

.projectIntroductionCon .title{
    font-size: 44px;
    color: #fefefe;
    font-style:italic;
    text-align: center;

}
option{
    font-size: 20px;
    background-color: rgba(0,0,0,0); 
}
.projectIntroductionCon .select{
    width: 100px;
    height: 46px;
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    padding: 0 15px;box-sizing: border-box;
    border: 1px solid #bfbfbf;
    display: flex;
    align-items: center;
    margin: auto;margin-top: 20px;
}
.projectIntroductionCon .select select{
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    border: none;
    width: 100%;
    height: 100%;
}
.projectIntroductionJt>a{
    margin-right: 14px;
}
.projectIntroductionConMain{
    margin-left: 44px;
padding-right: 30px;
}

.projectIntroductionConMain{
    height: 596px;
    overflow-x: auto;
 
}
.projectIntroductionConMain img{
    max-width: 100%;
}


.projectIntroductionConMain::-webkit-scrollbar {/*滚动条整体样式*/

    width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

}

.projectIntroductionConMain::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

    border-radius: 10px;

     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

     background: #EDEDED;

}

.projectIntroductionConMain::-webkit-scrollbar-track {/*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 10px;
    background: #535353;


}
.projectIntroductionDetails .title{
    font-size: 36px;
    text-align: left;
    margin-bottom: 23px;
}
.projectIntroductionDetails .p{
    font-size: 16px;
    color: #E8E8E8;
    line-height: 30px;
}.projectIntroductionDetails{
    width: 677px;
}

.projectIntroductionDetails{
    
    margin-bottom: 40px;
}
.projectIntroductionDetailsNav{
    padding-top: 150px;
}
.projectIntroductionDetails+.projectIntroductionConMain{
    height: 511px;
}


.brand .select{
    width: 100px;
    height: 46px;
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    padding: 0 15px;box-sizing: border-box;
    border: 1px solid #bfbfbf;
    display: flex;
    align-items: center;
    margin: auto;
    margin-bottom: 43px;
}
.brand .select select{
    font-size: 20px;
    background-color: rgba(0,0,0,0);
    color: #bfbfbf;
    border: none;
    width: 100%;
    height: 100%;
}
.brand  .title{
    margin-bottom: 22px;
    font-style:italic

}
.brand .p{
    text-align: left;
}
.serviceConcept .list{
    width: 300px;
    margin-bottom: 28px;
    padding-top: 36px;
    box-sizing: border-box;
    text-align: center;
    padding-right: 20px;
    padding-left: 20px;
    height: 278px;
    background-color: rgba(0,0,0,0.7);
}
.serviceConcept{
    display: flex;
    flex-wrap: wrap;
    width: 954px;
    justify-content: space-between;
}
.serviceConcept .list .listImg{
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.serviceConcept .list .listImg>:nth-child(2){
    display: none;
}
.serviceConcept .list>:nth-child(2){
    font-size: 22px;
    color: #e8e8e8;

    line-height: 22px;
    margin-bottom: 12px;
}
.serviceConcept .list:hover>:nth-child(2){
    font-weight: bold;
}

.serviceConcept .list>:nth-child(3){
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 28px;
}
.serviceConcept .list>.p{
    font-size: 14px;
    text-align: center;
    color: #ffffff;
}

.serviceConcept .list:hover .listImg>:nth-child(1){

    display: none;
}

.serviceConcept .list:hover .listImg>:nth-child(2){


    display: block;
}

.serviceConcept .list:hover{
    background-color: rgba(196,196,196,0.9);
    
}
.serviceConcept .list:hover>:nth-child(2){
    color: #1b1b1b;
}

.serviceConcept .list:hover>.p{
    font-size: 14px;
    text-align: center;
    color: #1b1b1b;
}
.wellKnownProductsNav a{
    font-size: 16px;
    color: #e8e8e8;
    text-align: left;
    margin-bottom: 20px;
    line-height: 16px;
    display: block;
}
.wellKnownProductsNav .on{
    border-bottom: 1px solid #e8e8e8;
}
.wellKnownProducts{
    display: flex;
    justify-content: space-between;
}
.wellKnownProductsNavP{
    padding-right: 60px;
}
.wellKnownProducts .p{
    font-size: 18px;
    color: #e8e8e8;
    text-align: center;
    margin-top: 25px;
}
.wellKnownProductsJt{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    align-items: center;
}
.wellKnownProductsJt p{
    font-size: 14px;
    color: #e8e8e8;
    margin: 0 18px;
}
.contactUsTelText{
    display: flex;
    text-align: left;
    align-items: center;
    margin-bottom: 40px;
}
.contactUsTelText>div{
    margin-left: 28px;
}
.contactUsTelText>div>p{
    font-size: 15px;
    line-height: 15px;
    color: #fff;
}
.contactUsTelText>div>:nth-child(1){
    margin-bottom: 13px;
}
.wx{
    display: flex;
}
.wx>div{
    margin-left: 35px;
}
.wx p{
    font-size: 15px;
    color: #e8e8e8;
    text-align: center;
    margin-top: 18px;
    line-height: 15px;
}
.contactUsTel{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inta{
    display: flex;
    justify-content: space-between;
}
.inta input{
    padding:17px 0px;
    background-color: rgba(0,0,0,0);
    border: none;
    color: #e8e8e8;
    border-bottom: 1px solid rgb(45, 45, 45);
    width: 48%;
}
.inta input::placeholder{
    font-size: 18px;
    color: #e8e8e8;

}
.contactUsInpur{
    margin-top: 40px;
}
.intB{
    text-align: left;
    margin-top: 46px;
}
.intB p{
    font-size: 18px;
    color: #e8e8e8;
    margin-bottom: 35px;
}
.intB input{
    border: none;
    color: #e8e8e8;
height: 31px;
    border-bottom: 1px solid rgb(45, 45, 45);
    width: 100%;
    background-color: rgba(0,0,0,0);
}
.contactUsButton{
    width: 142px;
    height: 55px;
    background-color: #000;
    border: none;
    margin: auto;
    color: #fff;
    margin-top: 29px;
}
.indexBrandCon{
    display: flex;
    margin-top: 62px;
 
}
.indexBrandCon .indexBrandNav{
    width: 237px;
    margin-right: 32px;
}
.indexBrandCon .contentPage{
      width: 580px;
      text-align: left;
}
.indexBrandNav{
    text-align: left;
}

.indexBrandNav .list p{
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 5px;
    color: #e8e8e8;
    display: inline-block;
    padding: 5px;
}
.indexBrandNav .list  .on{
    background-color: #3b3a39;
}
.indexBrandCon .contentPage .subtitle{
    margin-top: 30px;

}
.indexBrandNav .tit{
    font-size: 18px;
    line-height: 18px;
    color: #e8e8e8;
    margin-bottom: 15px;
    padding-bottom: 12px;
    
    border-bottom: 1px solid #2c2b28;
}
.engineeringConText{
    width: 673px;
    height: 471px;
    padding-right: 31px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5)
}
.engineeringCon .tit{
    font-size: 28px;
    height: 63px;
    line-height: 57px;
    color: #e8e8e8;
    padding-left: 9px;
    margin-left: 30px;
    margin-bottom: 60px;
    border-left: 1px solid #E8E8E8;
}
.engineeringConText .listImg{
    width: 517px;
    height: 305px;
    margin-left: 30px;
    position: relative;
    top: -60px;
}
.engineeringConText .listImg img{
    width: 100%;
    object-fit: contain;
}
.engineeringConText .p{
    font-size: 16px;
    line-height: 30px;
    margin-left: 30px;
    margin-top: -50px;
    color: #e8e8e8;
}
.engineeringNavList .list{
    background-color: rgba(0,0,0,0.5);
    width: 270px;
    height: 121px;
 
}
.engineering{
    display: flex;
    margin-top: 45px;
}
.engineeringNav{
    margin-left: 10px;

}
.engineering .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 22px;
    margin-bottom: 10px;
padding-right: 18px;
}
.engineering .list p{
    font-size: 18px;
    width: 72px;
    overflow:hidden;
    white-space:nowrap;
text-overflow:ellipsis; /* 加省略号 */

    color: #c7c7c7;
}
.engineering .list div{
width: 144px;

height: 84px;
}
.engineering .list div img{
    max-width: 100%;
}
.engineeringNavButton{
    width: 271px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.5);
}
.engineeringNavButton a{
    display: inline-block;
    margin: 0 10px;
}
.engineeringNavList .on{
    background-color: rgba(0,0,0,0);
    box-sizing: border-box;
    border: 1px solid #E8E8E8;
} 
.siteImage{
    background-color: rgba(0,0,0,0.5);
    width: 954px;
    height: 530px;
}
.siteImageW .select{
    width: 135px;
    margin-bottom: 106px;
}
.siteImage{
    position: relative;
}
.siteImage .listImg{
    width: 696px;
    margin: auto;
    height: 410px;
    overflow: hidden;
    position: relative;
    top: -60px;
}
.siteImage .listImg img{
    width: 100%;
}
.siteImageButton{
    display: flex;
    padding: 0 44px;
    align-items: center;
}
.swiperImg{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}
.siteImageButton{
    margin-top: -47px;
}
.swiperImg img{
    display: block;
    /* object-fit: contain; */
   height: 100%;
}
/* .siteImageSwiper{
    padding: 0 40px;
    box-sizing: border-box;
} */
.siteImageSwiper{
    width: 81.5%;
}
.makeV{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    align-content:center;
    justify-content: center;
    flex-direction: column;
    z-index: 6;
    display: none;
    background-color: rgba(0,0,0,0.6);
}
.makeV video{
    width: 80%;
    position: relative;
    z-index: 6;
}
.makeV button{
    background-color: #000;
    color: #fff;
    width: 100px;
    height: 50px;
    margin-top: 30px;
}
.reduction{
    transform: rotateZ(180deg);
}
.projectIntroductionNav{
    position: relative;
}
.projectIntroductionNavButton{
    display: none;
}
.swiper-a{
    transform: rotate(180deg);
}
select{
    outline:none
}
.aboutUsText{
    margin-left: -55px;
}
@media screen and (min-width:767px) and (max-width:991px) {

}
@media screen and (max-width:1560px){
    .projectIntroductionDetails{
        width: 560px;
    }
    .siteImage .listImg{
        height: auto;
    }
    .siteImage{
        width: 100%;
        height: auto;
    }
    .engineeringNavList .list{
        width: 200px;
    }
    .engineeringNavButton{
        width: 200px;
    }
    .engineeringConText{
        width: 80%;
    }
    .engineeringConText .listImg{
        width: 80%;
        height: auto;
    }
    
    .wellKnownProductsText{
        width: 80%;
    }
    .serviceConcept .list{
        width: 31%;
    }
    .serviceConcept{
        width: 700px;
    }
    .serviceConcept .list{
        padding-top: 10px;
    }
    .projectIntroductionNav{
        height: 553px;
        overflow-x: auto;
    
    }
    .serviceConcept .list>:nth-child(2){
        font-size: 16px;
    }
    .serviceConcept .list>:nth-child(3){
        margin-bottom: 10px;
    }
    .projectIntroductionCon{
        width: 70%;
   margin-left: 30px;
    }
    .mainCon{
        width: 100%;
        padding: 0 80px;
    }
    .text{
        margin-left: 30px;
    }
    .aboutUs>img{
        object-fit:contain;
        width: 45%;
        z-index: 6;
    }
 
    .aboutUsText{
        width: 70%;
        margin: 0px;
    }
    .honoraryCertificateCon{
        margin-left: 30px;
    }
    .honoraryCertificateCon>.list{
        width: 700px;
    }
}

@media screen and (max-width:1320px){
    .projectIntroductionDetails {
        width: 400px;
    }
}
@media screen and (max-width:1020px){
    .wellKnownProductsNav{
        display: flex;
        justify-content: space-between;

    }

    .make{
        display: block;
    }
    .navLsit>a>.make{
        display: block;
        position:static ;
        background-color: rgba(0,0,0,0);
    }
    .navLsit>a>.make>:nth-child(1){
        display: none;
    }
    .nav{
        overflow-x: auto;
        padding-bottom: 120px;
    }
    .navLsit>a>.make>a{
        background-color: rgba(0,0,0,0);
        margin-top: 15px;
    }
    .projectIntroductionCon{
        padding-top: 20px;
    }
    .projectIntroductionJt{
        display: flex;
        justify-content: center;
    }
  
    .projectIntroductionJt>a{
        margin-left: 14px;
    }
    .projectIntroductionNav{
        height: 70px;
        text-align: center;
    }
    .projectIntroductionList>div>:nth-child(1){
        margin-bottom: 60px;
    }
    .projectIntroductionNavButton{
        display: block;
        width: 30px;
        margin: auto;
      
    }
    .projectIntroductionNavButton{
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -15px;
    }
    .projectIntroductionNavButton img{
        width: 100%;
    }
    .projectIntroductionDetails{
        margin-top: 30px;
    }
    .projectIntroductionDetails+.projectIntroductionConMain{
        height: auto;
    }
    .projectIntroductionDetails {
        width: 100%;
        margin-left: 0px;
    }
    .navCon{
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 20;
    }
    .navCon p{
        width: 30px;
        height: 3px;
        margin-bottom: 6px;
        background-color: #000;
    }
    .navIpd{
        position: fixed;
        right: -250px;
        z-index: 30;
        transition: all 1s;
        top: 0px;
        
    }
    .swiperImg{
        width: 60px;
        height:60px;
    }
    .siteImage .listImg{
        width: 90%;
    }
    .projectIntroductionCon .title{
        font-size: 24px;
        
    }
    .engineeringNavList{
        display: flex;
        justify-content: space-between;
    }
    .engineering .list{
        display: block;
        text-align: center;
        height: auto;
        padding: 10px;

    }
    .engineering .list p{
        font-size: 14px;
    }
    .engineering .list p{
        width: auto;
        padding: 20px 0px;
    }
    .engineering .list div{
        width: 100%;
        text-align: center;
        overflow: hidden;
    }
    .engineeringNavList .list{
        width: 23%;
    }
    .engineering .list div img{
        display: block;
        margin: auto;
    }
    .engineeringNavButton{
        width: 100%;
    }
    .engineeringCon{
        margin-top: 20px;
    }
    .engineeringConText{
        width: 100%;
    }
    .honoraryCertificate .title{
        font-size: 24px;
    }
    .engineering{
        flex-direction: column-reverse;
    }
    .serviceConcept{
        width: 100%;
    }
    .projectIntroductionCon{
        margin-left: 0px;
    }
    .projectIntroductionCon{
        width: 100%;
    }
    .InterviewTitle{
        margin-left: 0px;
    }
    .Interview{
        padding-left: 0px;
        margin-right: 0px;
    }
    .h100{
        min-height: 100vh;
    }
    .main{
        height: auto;
        padding-bottom: 80px;
    }
     .honoraryCertificate{
         width: 100%;
     }
    
    .honoraryCertificateCon{
        margin: 0px;
        width: 100%;
    }
    .honoraryCertificateCon>.list{
        width: 100%;
    }
    .text{
        margin-left: 0px;
    }
    .indexBrandCon .contentPage{
        width: 100%;
        height: auto;
    }
    .indexBrandCon .indexBrandNav{
        display: block;
        width: auto;
    }
    .main .con{
        height: auto;
    }
    .main{
        min-height: 100vh;
    }
    .returnIndex {
        position: fixed;
        right: 16px;
        bottom: 130px;
        z-index: 15;
    }
   
    .contentPage{
        height: auto;
    }
    .text{
        width: 100%;
    }
    .contentPageC .title{
        font-size: 24px;
        margin-bottom: 20px;
    }
    .Interview .title{
        font-size: 24px;
    }
    .contentPage .subtitle{
        font-size: 18px;
    }
    .contentPage .p{
        font-size: 14px;
    }
    .mainCon{
        width: 100%;
        padding: 0 15px;
        padding-top: 60px;
    }
    .projectIntroduction{
        display: block;
    }
}

@media screen and (max-width:768px){
   
    .contactUsTel{
        display: block;
    }
    .wx {
        width: 100%;
        justify-content: space-between;
    }
    .wx>div{
        margin-left: 0px;
    }
    .swiperImg{
        width: 60px;
        height:60px;
    }
    .siteImageButton{
        padding: 20px ;
    }
    .wellKnownProducts{
        display: block;
    }
    .serviceConcept .list{
        width: 49%;
    }
    .projectIntroduction{
        display: block;
    }
    .wellKnownProductsText{
        width: 100%;
    }
    .projectIntroductionConMain {
        margin-left: 0px;
        margin-top: 20px;
        height: auto;
        
    }
    .aboutUs>img{
        left: 0px;
        margin-right: 20px;
    }
    .text {
        height: auto;
        padding: 20px 20px 80px 20px;
    }
    .contentPage{
        padding-right: 0px;
    }
    .indexBrandCon{
        display: block;
    }
}
@media screen and (max-width:568px){
    .wx>div{
        width: 49%;
    }
    .wx>div img{
        width: 100%;
    }
    .swiperImg{
        width: 40px;
        height: 40px;
    }
    .engineering .list div{
        height: 50px;
    }
    .serviceConcept .list{
        width: 100%;
    }
    .InterviewSwiper .lisiImg{
        height: auto;
    }
    .Interview .swiper{
        width: 280px;
    }
    .aboutUs{
        display: block;
    }
    .aboutUs>img{
        width: 100%;
        margin: 0px;
    }
    .honoraryCertificateCon>.list .listTitle{
        margin: 0px;
        margin-top: 20px;
    }
    .honoraryCertificateCon>.list img {
        display: block;
        margin: auto;
    }
    .honoraryCertificateCon>.list{
        display: block;
        text-align: center;
        height: auto;
    }
    .honoraryCertificateCon>.list .listText{
        margin: 0px;
        margin-top: 20px;
    }
}
@keyframes myfirst
{
    0% {
        margin-left: 100px;
        opacity: 0;
    }
    50%{
        margin-left: 100px;
        opacity: 0; 
    }
    100% {
        margin-left: 0px;
        opacity: 1;
    }
}
@keyframes myfirsta
{
    from {
        margin-top: 200px;
        opacity: 0;
    }
    to {
        margin-top: 65px;
        opacity: 1;
    }
}
@keyframes myfirstTe
{
    from {
        margin-top: 100vh;
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}
@keyframes myfirste
{
    from {
        padding-top: 100vh;
        opacity: 0;
    }
    to {
        padding-top: 30px;
        opacity: 1;
    }
}

@keyframes  projectConMainmyfirs
{
    from {
        padding-top: 100%;
        opacity: 0;
    }
    to {
        padding-top: 0px;
        opacity: 1;
    }
}