
.banner{ width: 100%; min-width: 1400px; height: 663px; position: relative;}
.banner .swiper{ width: 100%; min-width: 1400px; height: 663px;}
.banner .swiper-slide{ background-position: top center;}
.banner .swiper-slide .title{ width: 880px; display: block; line-height: 75px; text-align: left; margin-top: 80px; color: #141414; font-size: 28px; font-weight: 600;}
.banner .swiper-slide .subTitle{ margin-top: 50px; color: #141414; font-size: 20px;}
.banner .swiper-slide .btn{ margin-top: 50px; display: inline-block; color: #FFFFFF; font-size: 20px; text-align: center; line-height: 63px; width: 264px; height: 63px; background: #3267FF; border-radius: 8px;}
.banner .swiper-horizontal .swiper-pagination{ width: 1400px; text-align: center; left: calc(50% - 700px); bottom: 198px;}
.banner .swiper-pagination-bullet{ background: #FFFFFF;}
.banner .swiper-pagination-bullet-active{ width: 50px; height: 8px; border-radius: 4px; background: #FFFFFF;}
.banner .banner-other{ position: absolute; z-index: 10; bottom: 0px; left: 0px; right: 0px;}
.banner .banner-other .flex{ height: 70px; padding: 44px 0px; background: rgba(249,250,255,0.59); border-radius: 8px;}
.banner .banner-other .flex .other-item{ position: relative; width: 395px; text-align: center;}
.banner .banner-other .flex .other-item::after{ position: absolute; right: 0px; top: calc(50% - 15px); content: ''; display: block; width: 1px; height: 30px; background: #FFFFFF;}
.banner .banner-other .flex .other-item b{ display: block; line-height: 29px; font-size: 21px; color: #141414;}
.banner .banner-other .flex .other-item p{ margin-top: 20px; line-height: 22px; font-size: 16px; color: #7E8287;}

.title{ font-size: 30px; font-weight: 600; color: #141414; line-height: 60px; text-align: center;}
.solution{ padding: 70px 0px;}
.solution .title{ margin-bottom: 74px;}
.solution .flex{ flex-wrap: wrap;}
.solution .solution-item{ position: relative; width: 260px; height: 160px; padding: 40px 30px; margin: 15px;}
.solution .solution-item img{ position: absolute; z-index: -1; width: 320px; height: 240px; left: 0px; top: 0px; right: 0px; bottom: 0px;}
.solution .solution-item b{ color: #FFFFFF; font-size: 21px; line-height: 29px; margin-bottom: 15px; display: block;}
.solution .solution-item p{ color: #FFFFFF; font-size: 16px; line-height: 22px;}

.structuralDiagram .box{ background: url('../img/structuralDiagramBg.png') no-repeat top center; height: 1427px; margin-top: 90px;}
.structuralDiagram .box .top{ padding-top: 28px; text-align: center;}
.structuralDiagram .box p + p{ margin-top: 42px;}
.structuralDiagram .box span{ display: inline-block; margin: 7px 10px; height: 22px; line-height: 22px; font-size: 16px; color: #7F848B;}
.structuralDiagram .box .middle{ justify-content: space-between;}
.structuralDiagram .box .middle .item{ width: 400px; height: 165px; padding: 30px 40px; color: #7F848B;}
.structuralDiagram .box .middle .item + .item{ margin-top: 24px;}
.structuralDiagram .box .middle .right{ text-align: right;}
.structuralDiagram .box .bottom{ margin-top: -35px; text-align: center;}
.structuralDiagram .box .bottom p:nth-child(2){ margin-top: 45px; background: url('../img/structuralDiagramImg.png') no-repeat center center;}
.structuralDiagram .box .bottom p:nth-child(2) span{ margin: 20px 35px;}
.structuralDiagram .box .bottom .flex{ font-size: 0px; margin-top: 45px; justify-content: space-between;}
.structuralDiagram .box .bottom .flex .left,
.structuralDiagram .box .bottom .flex .right{ padding: 15px 40px; width: 312px; height: 142px;}
.structuralDiagram .box .bottom .flex .left{ text-align: left;}
.structuralDiagram .box .bottom .flex .right{ text-align: right;}
.structuralDiagram .box .bottom .flex p{ margin-bottom: 17px; color: #141414; font-size: 16px;}
.structuralDiagram .box .bottom .flex span{ margin: 0px; margin-left: 18px; text-align: center; width: 114px; height: 46px; line-height: 46px; text-align: center; color: #7F848B; font-size: 16px;}
.structuralDiagram .box .bottom .flex span.mt{ margin-top: 16px;}
.structuralDiagram .box .bottom .flex span.ml{ margin-left: 25px;}
.structuralDiagram .box .bottom .flex span.mr{ margin-right: 24px;}
.structuralDiagram .box .other{ text-align: center; margin-top: 152px; height: 90px; line-height: 90px;}
.structuralDiagram .box .other span{ margin: 0px 22px;}

.advantage .tab .tab-title{ display: flex; justify-content: space-between; margin: 80px auto 10px; border-bottom: 1px solid #DFE1E4;}
.advantage .tab .tab-title span{ padding-bottom: 10px; color: #141414; font-size: 21px; font-weight: 600; cursor: pointer; line-height: 29px; display: inline-block;}
.advantage .tab .tab-title span.active{ position: relative; color: #3267FF;}
.advantage .tab .tab-title span.active::after{ position: absolute; left: calc(50% - 74px); bottom: 0px; content: ''; display: block; width: 148px; height: 2px; background: #3267FF;}
.advantage .tab .tab-content{ width: 100%; min-width: 1400px; height: 515px; overflow: hidden;}
.advantage .tab .tab-content .item{ transition: all 1s; width: 100%; height: 515px; position: absolute;}
.advantage .tab .tab-content .item .body{ padding: 50px; margin: 59px 0px; width: 492px; height: 293px; border: 2px solid #FFFFFF; background: rgba(249,250,255,0.6); border-radius: 8px;}
.advantage .tab .tab-content .item .body .title{ margin-bottom: 15px; text-align: left; font-size: 28px;}
.advantage .tab .tab-content .item .body p{ text-indent: 2em; font-size: 16px; line-height: 30px; color: #7F848B;}


