#bannerVideo{
    width: 100%;
    position: relative;
}
#bannerVideo canvas{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}


.topPoster{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
.slidDown{
    width: .47rem;
    bottom: .58rem;
    animation: down 2s linear infinite;
}
@keyframes down {
    0%{
        bottom: .58rem;
    }
    50%{
        bottom: .68rem;
    }
    100%{
        bottom: .58rem;
    }
}

#company{
    width: 100%;
    padding:0.68rem 0 .9rem 3.1rem;
    height: 7.85rem;
    box-sizing: border-box;
    background-color: #ffffff;
    overflow: hidden;
}
.companyInfo{
    width: 100%;
    height: 100%;
    position: relative;
}
.titles{
    width: 100%;
}
.titles p{
    color: #285990;
    font-weight: bold;
    font-size: .3rem;
    margin-bottom: .1rem;
}
.titles img{
    width: 1.69rem;
    display: block;
}
.companyInfoBgText{
    position: absolute;
    top: 0;
    left: 5.05rem;
    width: 11.08rem;
}
.companyInfoText{
    font-size: .16rem;
    color: #666666;
    position: absolute;
    top: .8rem;
    width: 6.18rem;
}
.companyInfoText p{
    margin-bottom: .2rem;
    line-height: .3rem;
}
.companyInfoBottom{
    width: 100%;
    height: 1.65rem;
    background-color: #232323;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: .5rem;
    box-sizing: border-box;
    background-image: url("../images/companyInfoBottomBg.png");
    background-position: 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
.companyInfoNum{
    margin-right: .85rem;
    height: .9rem;
    position: relative;
}
.companyInfoNumTitle{
    font-weight: bold;
    font-size: .5rem;
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.companyInfoNumTitle p{
    font-weight: bold;
    color: #fff;
    opacity: .5rem;
    font-size: .18rem;
    padding-bottom: .07rem;
}
.companyInfoNum>p{
    color: #fff;
    opacity: .5rem;
    font-size: .18rem;
}
.companyInfoUnit{
    position: absolute;
    right: -.4rem;
    width: .95rem;
    top: 0;
}
.companyInfoUnit p{
    top: .3rem;
    color: #fff;
    opacity: .5rem;
    font-size: .18rem;
    position: absolute;
    right: .12rem;
}
.companySwiper{
    position: absolute;
    left: 6.75rem;
    top: 1.4rem;
    width: 14.81rem;
    height: 4.45rem;
}
.swiper{
    width: 100%;
    height: 3.7rem;
}
.swiper-slide{
    width: 7.41rem;
    height: 100%;
    border-radius: .45rem 0 0 0;
    overflow: hidden;
    padding-right: .86rem;
    box-sizing: border-box;
}
.swiper-slide img{
    opacity: .3;
}
.swiper-slide-active img{
    opacity: 1;
}

.companySwiperBtn{
    position: absolute;
    left: 0;
    top: 4.05rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.companySwiperBtn img{
    width: .4rem;
    display: block;
}
.swiperBtnLeft{
    transform: rotate(180deg);
    margin-right: .1rem;
}

.indexNavBox{
    position: fixed;
    top: 3.04rem;
    left: .62rem;
    width: 1.03rem;
    height: 3.56rem;
}
.navBoxLine{
    width: .01rem;
    height: 100%;
    position: absolute;
    left: .05rem;
    top: 0;
    background-color: #b8c7d7;
}
.indexNavItemBox{
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    cursor: pointer;
    top: .28rem;
}
.indexNavItem{
    width: 100%;
    height: .27rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    opacity: 0.25;
   
}
.indexNavItemMark{
    width: .1rem;
    height: .1rem;
    border-radius: .1rem;
    background-color: rgba(40,89,144,.2);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.indexNavItemMark div{
    width: .08rem;
    height: .08rem;
    background-color: #285990;
    border-radius: .08rem;
}
.indexNavItemText{
    width: .84rem;
    height: .27rem;
    font-size: .16rem;
    color: #ffffff;
    border: .01rem solid #fff;
    background-color: rgba(40,89,144,.2);
    border-radius: .27rem;
    height: .27rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    line-height: .25rem;
    opacity: .8;
}
.indexNavItemActive {
    opacity: 1;
}
.indexNavItemBox:hover .indexNavItem{
    opacity: 1;
}
.indexNavItemActive .indexNavItemMark{
    opacity: 1;
}
.indexNavItemActive .indexNavItemText{
    background-color: #4f76a2;
    opacity: 1;
}

#businessSector{
    background-image: url("../images/businessSectorBg.png?v1.0");
    background-repeat: repeat-y;
    background-size: 100% auto;
    padding: .7rem 0 0;
    height: 7.61rem;
    width: 100%;
    box-sizing: border-box;
}
.businessSectorBox{
    width: 13rem;
    margin: 0 auto;
}
.businessSectorItemBox{
    width: 100%;
    /* display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap; */
    margin-top: .32rem;
    position: relative;
}
.businessSectorItem{
    width: 3.76rem;
    height: 2.39rem;
    display: flex;
    justify-content: center;
    align-content: space-between;
    flex-wrap: wrap;
    cursor: pointer;
    position: absolute;
}
.businessSectorItem1{
    left: 0;
    top: .32rem;
}
.businessSectorItem2{
    left: 3.8rem;
    top: -0.1rem;
    height: 2.72rem;
}
.businessSectorItem3{
    left: 7.6rem;
    top: -0.4rem;
    height: 2.7rem;
}
.businessSectorItem4{
    left: 1.9rem;
    top: 2.25rem;
    height: 2.8rem;
}
.businessSectorItem5{
    left: 5.69rem;
    top: 2.28rem;
}
.businessSectorItem6{
    left: 9.46rem;
    top: 1.65rem;
    height: 2.64rem;
}

.businessSectorItemInfo{
    width: 3.76rem;
    height: 1.78rem;
    background-size: 100%;
    background-position: 0;
    background-repeat: no-repeat;
    padding: .3rem .37rem .39rem .57rem;
    box-sizing: border-box;
}
.businessSectorItemInfo2{
    padding: .4rem .37rem .39rem .57rem;
}
.businessSectorItem1 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_1.png");
}
.businessSectorItem2 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_2.png");
}
.businessSectorItem3 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_3.png");
}
.businessSectorItem4 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_4.png");
}
.businessSectorItem5 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_5.png");
}
.businessSectorItem6 .businessSectorItemInfo{
    background-image: url("../images/businessorder1_6.png");
}
.businessSectorItemInfo div{
    font-size: .215rem;
    color: #232323;
    margin-bottom: .2rem;
    height: .3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.businessSectorItemInfo p{
    font-size: .143rem;
    color: #666666;
    line-height: .25rem;
}
.businessMark{
    width:  .29rem;
    height: .59rem;
    background-image: url("../images/businessMark1.png");
    background-size: 100%;
    background-position: 0;
    background-repeat: no-repeat;
    margin-left: .2rem;
}
.businessMark2{
    transform: rotate(180deg);
}

.businessSectorItem:hover .businessMark{
    background-image: url("../images/businessMark2.png");
}
.businessSectorItem:hover .businessSectorItemInfo div,.businessSectorItem:hover .businessSectorItemInfo p{
    color: #ffffff;
}
.businessSectorItem1:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_1.png");;
}
.businessSectorItem2:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_2.png");;
}
.businessSectorItem3:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_3.png");;
}
.businessSectorItem4:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_4.png");;
}
.businessSectorItem5:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_5.png");;
}
.businessSectorItem6:hover  .businessSectorItemInfo{
    background-image: url("../images/businessorder2_6.png");;
}
/* .businessSectorItem{
    width: 4.32rem;
    height: 3.66rem;
    position: relative;
    margin-bottom: .02rem;
    cursor: pointer;
} */
.businessSectorItemText{
    position: absolute;
    bottom: 0;
    height: 1.29rem;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.businessSectorItemText div,.businessSectorItemHover div{
    color: #ffffff;
    font-size: .24rem;
    line-height: .38rem;
    border-bottom: .02rem solid #fff;
    margin-bottom: .2rem;
}
.businessSectorItemText p,.businessSectorItemHover p{
    font-size: .24rem;
    color: #fff;
    width: 100%;
    text-align: center;
}
.businessSectorItemHover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: none;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.businessSectorItemHover span{
    font-size: .16rem;
    color: #fff;
    font-weight: normal;
    width: 3.33rem;
    opacity: .5;
    margin-top: .2rem;
}
.businessSectorItem:hover .businessSectorItemText{
    display: none;
}
.businessSectorItem:hover .businessSectorItemHover{
    display: flex;
}
.middle{
    margin: 0 .02rem .02rem;
}

#mainWorks{
    background-color: #fff;
    padding: .7rem 0 .9rem;

}
.mainWorksNav{
    margin: .6rem auto .6rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 11.16rem;
}
.mainWorksNav div{
    width: 1.16rem;
    height: .37rem;
    text-align: center;
    line-height: .37rem;
    color: #666666;
    font-size: .2rem;
    margin-right: .2rem;
    cursor: pointer;
}
.mainWorksNav .mainWorksNavItemActive{
    background-color: #285990;
    color: #fff;
}
.mainWorksNav div:hover{
    color: #285990;
}
.mainWorksNav .mainWorksNavItemActive:hover{
    color: #fff;
}
.mainWorksItemBox{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}
.mainWorksItem{
    width: 4.12rem;
    height: 3.12rem;
    margin-bottom: .5rem;
    cursor: pointer;
}
.mainWorksItemImg{
    width: 100%;
    height: 2.02rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    overflow: hidden;
}
.mainWorksItemTitle{
    font-size: .18rem;
    color: #333333;
    line-height: .56rem;
}
.mainWorksItem:hover .mainWorksItemTitle{
    color: #285990;
}
.mainWorksItemMsgBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .25rem;
    color: #999999;
}
.mainWorksItemMsg{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}
.mainWorksItemType{
    padding: 0 .1rem;
    height: 100%;
    box-sizing: border-box;
    font-size: .16rem;
    border-radius: .16rem;
    border: .01rem solid #999999;
}
.lookIcon{
    width: .23rem;
    height: .16rem;
    margin: 0 .1rem;
    background-image: url("../images/lookIcon2.png");
    background-size: 100%;
    background-position:  0 ;
    background-repeat: no-repeat;
}
.mainWorksItemNum{
    font-size: .18rem;
}
.mainWorksItemMsgBox p{
    font-size: .18rem;
}
.middle2{
    margin: 0 .32rem .5rem;
}
.mainWorksItem:hover .lookIcon{
    background-image: url("../images/lookIcon1.png");
}
.mainWorksItem:hover .mainWorksItemType{
    border: .01rem solid #285990;
}
.mainWorksItem:hover .mainWorksItemMsgBox{
    color: #285990;
}
.mainWorksMore{
    margin:.3rem auto 0 ;
    border: .01rem solid #b2b2b2;
    width: 1.9rem;
    height: .52rem;
    text-align: center;
    line-height: .52rem;
    font-size:  .2rem;
    color: #666666;
    cursor: pointer;
}
.mainWorksMore:hover{
    color: #285990;
    border: .01rem solid #285990;
}

#coBranding{
    width: 100%;
    background-color: #fbfbfb;
    padding: .7rem 0 1.5rem;
}

.coBranding{
    width: 100%;
    margin-top: .5rem;
}
.coBrandingLine{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: -.5rem;
}
.coBrandingLine:nth-child(even){
    padding-left: 1.12rem;
}
.coBrandingItem {
    width: 1.68rem;
    height: 1.68rem;
    margin-right: .6rem;
    position: relative;
}
.coBrandingItemName{
    background-image: url("../images/coBrandingItemName.png");
    background-size: 100%;
    background-position: 0;
    background-repeat: no-repeat;
    width: 1.77rem;
    height: .81rem;
    position: absolute;
    top: -.2rem;
    left: -.04rem;
    display: none;
}
.coBrandingItem p{
    padding-top: 13%;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    font-size: .2rem;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coBrandingItemTr{
    animation: tr 1s linear 1 forwards;
}
@keyframes tr{
    0%{
        transform: scaleX(1);
    }
    25%{
        transform: scaleX(0);
    }
    50%{
        transform: scaleX(-1);
    }
    75%{
        transform: scaleX(0);
    }
    100%{
        transform: scaleX(1);
    }
}

.coBrandingLine .coBrandingItem:last-child{ 
    margin-right: 0;
}
.logoBg{
    width: 2.34rem;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: -.33rem;
    top: -.26rem;
}
.coBrandingItemImg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coBrandingItemImg img{
    width: 1rem;
    display: block;
}