.carousel { width: 100%; height: 549px; margin-top:-90px; } .carousel img { width: 100%; height: 100%; } .carousel .swiper { width: 100%; height: 100%; } .carousel .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .carousel .swiper-slide a{ width: 100%; } .carousel .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .carousel .swiper-carousel .swiper-carousel-pagination{ width: 1200px; left:50%; transform: translateX(-50%); margin-left:-465px; bottom:60px; } .carousel .swiper-carousel .swiper-pagination-bullet { width: 16px; height: 6px; border-radius: 4px; } .carousel .swiper-carousel .swiper-pagination-bullet-active { width: 24px; height: 6px; border-radius: 4px; background: #019BFF; } .grow { width: 100%; } .grow .title { margin-top: 110px; position: relative; } .grow .title .circle-icon-l { position: absolute; top: -55px; left: 394px; width: 113px; height: 113px; } .grow .title .circle-icon-l img { width: 100%; height: 100%; } .grow .title .circle-icon-r { position: absolute; top: -18px; right: -65px; z-index: -1; width: 284px; height: 284px; } .grow .title .circle-icon-r img { width: 100%; height: 100%; } .grow .title .title-top { height: 35px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #222B33; line-height: 48px; text-align: center; } .grow .title .title-bom { height: 30px; font-size: 24px; margin-top: 10px; font-family: 'Futura LT Heavy Oblique'; color: #ddd; line-height: 31px; text-align: center; letter-spacing: 1px; } .grow ul { list-style: none; display: flex; justify-content: space-between; width: 100%; flex-shrink: 0; } .grow ul li { width: 22%; height: 185px; margin-top:78px; background: #FFFFFF; box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.05); border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .grow ul li .item-icon { margin-top: -46px; width: 93px; height: 93px; } .grow ul li .item-icon img { width: 100%; height: 100%; } .grow ul li .item-num { height: 41px; margin-top: 18px; font-size: 32px; font-family: FuturaLT-Heavy, FuturaLT; font-weight: 800; color: #2B3245; line-height: 42px; } .grow ul li .item-word { height: 18px; font-size: 18px; margin-top: 16px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #2B343B; line-height: 27px; } .grow ul li .item-des { height: 24px; font-size: 18px; margin-top: 12px; font-family: FuturaLT-Heavy, FuturaLT; color: #BFC4CE; line-height: 25px; } .ability { background: linear-gradient(180deg, #E4F1FD 0%, rgba(255, 255, 255, 0.25) 100%); padding-top: 74px; margin-top: 36px; } .ability .part_1 { display: flex; justify-content: space-between; position: relative; margin-top: 125px; } .ability .part_1 .part_1_left { position: relative; margin-right:20px; } .ability .part_1 .part_1_left .part_1_left_word{ position: relative; } .ability .part_1 .part_1_left .left-circle-icon { position: absolute; width: 123px; height: 123px; left: 30px; top: -39px; } .ability .part_1 .part_1_left .left-title { max-width: 464px; height: 227px; position: relative; background: url("../image/15.png") no-repeat left top; background-size: 100% 100%; } .ability .part_1 .part_1_left .left-title .word { position: absolute; top: 40px; right: 0px; /*width: 218px;*/ height: 48px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #044888; line-height: 48px; } .ability .part_1 .part_1_left .left-title .line { position: absolute; right: 0px; top: 89px; width: 80px; height: 7px; background: #2B94F6; } .ability .part_1 .part_1_left .left_pic { position: relative; margin-top: -30px; max-width: 540px; min-width: 400px; } .ability .part_1 .part_1_left .left_pic img { width: 100%; } .ability .part_1 .part_1_right { max-width: 600px; min-width: 480px; height: 656px; background: #FFFFFF; box-shadow: 2px 2px 10px 2px rgba(133, 141, 215, 0.11); border-radius: 12px; margin-top: 84px; } .ability .part_1 .part_1_right ul { display: flex; flex-wrap: wrap; padding: 0px 55px 55px 55px; justify-content: space-between; } .ability .part_1 .part_1_right ul li { max-width: 47%; margin-top: 55px; } .ability .part_1 .part_1_right ul li .item-title { display: flex; align-items: center; } .ability .part_1 .part_1_right ul li .item-title .icon { flex-shrink: 0; width: 60px; height: 60px; } .ability .part_1 .part_1_right ul li .item-title .icon img { width: 100%; height: 100%; } .ability .part_1 .part_1_right ul li .item-title .word { font-size: 21px; margin-left: 14px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #051442; line-height: 25px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .ability .part_1 .part_1_right ul li .item-des { font-size: 14px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #868993; line-height: 18px; margin-top: 12px; text-align: justify; text-align-last: left; text-justify: inter-ideograph; } .ability .part_2 { display: flex; justify-content: space-between; position: relative; margin-top: 115px; } .ability .part_2 .part_2_left { width: 600px; margin-top: 28px; position: relative; margin-right:20px; } .ability .part_2 .part_2_left .part_2_left_icon { position: absolute; left: 95px; top: -72px; width: 129px; height: 129px; } .ability .part_2 .part_2_left ul li { margin-left: 68px; background: #FFFFFF; box-shadow: 2px 2px 10px 2px rgba(133, 141, 215, 0.11); border-radius: 12px; display: flex; margin-top: 20px; align-items: center; padding: 20px 49px 20px 0px; } .ability .part_2 .part_2_left ul li .item-icon { width: 80px; height: 80px; margin-left: -40px; flex-shrink: 0; } .ability .part_2 .part_2_left ul li .item-icon img { width: 100%; height: 100%; } .ability .part_2 .part_2_left ul li .item-con { margin-left: 28px; } .ability .part_2 .part_2_left ul li .item-con .item-title { font-size: 22px; font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-weight: 500; color: #051442; line-height: 48px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .ability .part_2 .part_2_left ul li .item-con .item-des { font-size: 16px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #868993; line-height: 22px; } .ability .part_2 .part_2_right { position: relative; } .ability .part_2 .part_2_right .right-circle-icon { position: absolute; width: 195px; height: 195px; left: 181px; top: -58px; } .ability .part_2 .part_2_right .right-title { width: 361px; height: 150px; position: relative; background: url("../image/17.png") no-repeat left top; background-size: 100% 100%; } .ability .part_2 .part_2_right .right-title .word { position: absolute; top: 40px; left: 0px; height: 48px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #044888; line-height: 48px; } .ability .part_2 .part_2_right .right-title .line { position: absolute; left: 0px; top: 89px; width: 80px; height: 7px; background: #2B94F6; } .ability .part_2 .part_2_right .right_pic { position: relative; max-width: 540px; } .ability .part_2 .part_2_right .right_pic img { width: 100%; } .ability .part_3 { display: flex; justify-content: space-between; position: relative; margin-top: 145px; } .ability .part_3 .part_3_left { position: relative; display: flex; margin-right:20px; flex-direction: column; } .ability .part_3 .part_3_left .left-circle-icon { position: absolute; width: 199px; height: 199px; left: 478px; top: -82px; } .ability .part_3 .part_3_left .left-title { position: relative; margin-left: 200px; width: 320px; height: 151px; background: url("../image/16.png") no-repeat left top; background-size: 100% 100%; } .ability .part_3 .part_3_left .left-title .word { position: absolute; top: 40px; right: 0px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #044888; line-height: 48px; } .ability .part_3 .part_3_left .left-title .line { position: absolute; right: 0px; top: 89px; width: 80px; height: 7px; background: #2B94F6; } .ability .part_3 .part_3_left .left_pic { position: relative; margin-top: -30px; max-width: 540px; } .ability .part_3 .part_3_left .left_pic img { width: 100%; } .ability .part_3 .part_3_right { width: 600px; background: #EEF6FD; box-shadow: 2px 2px 10px 2px rgba(133, 141, 215, 0.11); border-radius: 12px; margin-top: 84px; } .ability .part_3 .part_3_right ul { display: flex; flex-wrap: wrap; padding: 0px 55px 55px 55px; justify-content: space-between; } .ability .part_3 .part_3_right ul li { margin-top: 55px; display: flex; } .ability .part_3 .part_3_right ul li .item-icon { width: 80px; height: 80px; flex-shrink: 0; } .ability .part_3 .part_3_right ul li .item-icon img { width: 100%; height: 100%; } .ability .part_3 .part_3_right ul li .item-con { margin-left: 19px; } .ability .part_3 .part_3_right ul li .item-con .item-title { font-size: 22px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #051442; margin-top: -4px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .ability .part_3 .part_3_right ul li .item-con .item-des { font-size: 14px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #868993; line-height: 18px; text-align: justify; margin-top: 5px; text-align-last: left; text-justify: inter-ideograph; } .ability .part_4 { display: flex; justify-content: space-between; position: relative; margin-top: 145px; } .ability .part_4 .part_4_right { position: relative; } .ability .part_4 .part_4_right .left-circle-icon { position: absolute; width: 199px; height: 199px; left: 478px; top: -82px; } .ability .part_4 .part_4_right .left-title { position: relative; width: 447px; height: 151px; margin-left: 40px; background: url("../image/24.png") no-repeat left top; background-size: 100% 100%; } .ability .part_4 .part_4_right .left-title .word { position: absolute; top: 40px; left: 0px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #044888; line-height: 48px; } .ability .part_4 .part_4_right .left-title .line { position: absolute; left: 0px; top: 89px; width: 80px; height: 7px; background: #2B94F6; } .ability .part_4 .part_4_right .left_pic { position: relative; margin-top: -30px; max-width: 540px; } .ability .part_4 .part_4_right .left_pic img { width: 100%; } .ability .part_4 .part_4_left { width: 600px; background: #EEF6FD; box-shadow: 2px 2px 10px 2px rgba(133, 141, 215, 0.11); border-radius: 12px; margin-top: 84px; } .ability .part_4 .part_4_left .left-circle-icon { position: absolute; width: 195px; height: 195px; left: 402px; top: -27px; } .ability .part_4 .part_4_left ul { display: flex; flex-wrap: wrap; padding: 0px 55px 55px 55px; justify-content: space-between; } .ability .part_4 .part_4_left ul li { margin-top: 55px; display: flex; } .ability .part_4 .part_4_left ul li .item-icon { width: 80px; height: 80px; flex-shrink: 0; } .ability .part_4 .part_4_left ul li .item-icon img { width: 100%; height: 100%; } .ability .part_4 .part_4_left ul li .item-con { margin-left: 19px; } .ability .part_4 .part_4_left ul li .item-con .item-title { font-size: 22px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #051442; margin-top: -4px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .ability .part_4 .part_4_left ul li .item-con .item-des { font-size: 14px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #868993; line-height: 18px; text-align: justify; margin-top: 5px; text-align-last: left; text-justify: inter-ideograph; } .title-block { display: flex; justify-content: center; } .title-block .common-title { display: flex; flex-direction: column; justify-content: center; } .title-block .common-title .title { height: 100px; text-align: center; } .title-block .common-title .title.t_1 { height: 48px; background: url("../image/62.png") no-repeat center top; background-size: 332px 48px; } .title-block .common-title .title.t_2 { height: 48px; background: url("../image/11.png") no-repeat center top; background-size: 332px 48px; } .title-block .common-title .title.t_3 { height: 48px; background: url("../image/12.png") no-repeat center top; background-size: 392px 48px; } .title-block .common-title .title.t_4 { height: 48px; background: url("../image/13.png") no-repeat center top; background-size: 190px 48px; } .title-block .common-title .title.t_5 { height: 48px; background: url("../image/63.png") no-repeat center top; background-size: 242px 48px; } .title-block .common-title .title .title-word { padding-top: 5px; height: 35px; font-size: 36px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #222B33; line-height: 48px; } .title-block .common-title .title .title-line { margin: 20px auto 0px auto; width: 80px; height: 7px; background: #2B94F6; } .title-block .common-title .title-des { display: flex; align-items: center; height: 56px; position: relative; margin-top: 39px; } .title-block .common-title .title-des .left-icon { position: absolute; left: 0px; top: 0px; width: 16px; height: 15px; } .title-block .common-title .title-des .left-icon img { width: 100%; height: 100%; } .title-block .common-title .title-des .des-word { padding: 0px 20px; font-size: 18px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #1F2830; line-height: 28px; } .title-block .common-title .title-des .right-icon { position: absolute; right: 0px; bottom: 10px; width: 16px; height: 15px; } .title-block .common-title .title-des .right-icon img { width: 100%; height: 100%; } .advantage { margin-top: 154px; position: relative; } .advantage ul { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: 25px; } .advantage ul li { width: 48%; background: #FFFFFF; box-shadow: 2px 2px 10px 2px rgba(133, 181, 215, 0.11); border-radius: 8px; justify-content: center; align-items: center; display: flex; flex-direction: column; padding: 40px 33px; margin-bottom: 29px; } .advantage ul li .item-icon { width: 200px; height: 140px; } .advantage ul li .item-icon img { width: 100%; height: 100%; } .advantage ul li .item-title { margin-top: 15px; display: flex; align-items: center; } .advantage ul li .item-title .num-icon { width: 42px; height: 40px; } .advantage ul li .item-title .num-icon img { width: 100%; height: 100%; } .advantage ul li .item-title .item-con { display: flex; flex-direction: column; margin-left: 20px; } .advantage ul li .item-title .item-con .word { font-size: 24px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #051442; line-height: 26px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .advantage ul li .item-title .item-con .des { font-size: 11px; font-family: FuturaLT; color: #299FEC; line-height: 18px; -webkit-text-stroke: 0px #FFFFFF; text-stroke: 0px #FFFFFF; } .advantage ul li .item-des { margin-top: 25px; font-size: 16px; font-family: SourceHanSansCN-Normal, SourceHanSansCN; font-weight: 400; color: #7B7E89; line-height: 22px; } .advantage .circle-icon-r { position: absolute; bottom: -95px; right: 50%; margin-right: -695px; z-index: -1; width: 240px; height: 240px; } .advantage .circle-icon-r img { width: 100%; height: 100%; } .case { position: relative; margin-top: 154px; } .case .swiper-case { position: relative; } .case .swiper-case .swiper { width: 100%; height: 100%; margin-top: 58px; padding: 10px 5px 60px 5px; } .case .swiper-case .swiper-slide { background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .case .swiper-case .swiper-slide .slide-item { background: #FFFFFF; overflow: hidden; box-shadow: 2px 2px 10px 2px rgba(133, 181, 215, 0.11); border-radius: 8px; padding-bottom: 20px; height: 100%; } .case .swiper-case .swiper-slide .slide-item .more{ width: 376.66px; height: 439px; display: flex; align-items: center; justify-content: center; } .case .swiper-case .swiper-slide .slide-item .more a{ color: #2B94F6; font-size:18px; } .case .swiper-case .swiper-slide .slide-item .item-icon { width: 334px; height: 252px; } .case .swiper-case .swiper-slide .slide-item .item-icon img { width: 100%; height: 100%; } .case .swiper-case .swiper-slide .slide-item .item-title { margin-top: 26px; font-size: 24px; font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-weight: 500; color: #222B33; line-height: 26px; border-left: 10px #2B94F6 solid; padding: 0px 10px; } .case .swiper-case .swiper-slide .slide-item .item-title a{ color: #222B33; } .case .swiper-case .swiper-slide .slide-item .item-des { margin-top: 15px; font-size: 16px; font-family: SourceHanSansCN-Normal, SourceHanSansCN; font-weight: 400; color: #7B7E89; line-height: 24px; padding: 0px 15px; height: 120px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .case .swiper-case .swiper-slide .slide-item .item-type { text-align: right; font-size: 16px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #2B94F6; margin: 0px 20px; background: url("../image/67.png") no-repeat right bottom; background-size: 97px 10px; } .case .swiper-case .swiper-button-next { width: 36px; height: 36px; right: -60px; border-radius: 100%; background: #a4dbff; } .case .swiper-case .swiper-button-prev { width: 36px; height: 36px; left: -50px; border-radius: 100%; background: #a4dbff; } .case .swiper-case .swiper-button-next:after, .case .swiper-case .swiper-button-prev:after { font-size: 16px !important; color: #ffffff; } .case .swiper-case .swiper-pagination-bullet { width: 28px; height: 6px; border-radius: 4px; } .case .swiper-case .swiper-pagination-bullet-active { background: #019BFF; } .case .swiper-case .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .case .circle-icon-l { position: absolute; bottom: -42px; left: 50%; margin-left: -697px; width: 240px; height: 240px; } .case .circle-icon-l img { width: 100%; height: 100%; } .customer { position: relative; margin-top: 154px; } .customer .circle-icon-r { position: absolute; top: 95px; right: 50%; margin-right: -576px; z-index: -1; width: 179px; height: 179px; } .customer .circle-icon-r img { width: 100%; height: 100%; } .customer ul { display: flex; width: 100%; flex-wrap: wrap; margin-top: 25px; } .customer ul li { width: 16.6%; height: auto; margin-bottom:10px; } .customer ul li img { width: 95%; height: 100%; object-fit: contain; } .partners { position: relative; margin-top: 154px; padding-bottom:80px; } .partners .circle-icon-l { position: absolute; top: 104px; left: 50%; margin-left: -665px; width: 179px; height: 179px; } .partners .circle-icon-l img { width: 100%; height: 100%; } .partners ul { display: flex; width: 100%; flex-wrap: wrap; margin-top: 40px; } .partners ul li { width: 20%; /*height: 41px;*/ margin-bottom: 50px; display: flex; align-items: center; } .partners ul li img { width: 70%; height: auto; object-fit: cover; } .slide-des{ position: absolute; width: 1200px; left:50%; padding-left:92px; padding-right:92px; transform: translateX(-50%); } .slide-des .des-title{ max-width: 600px; font-size: 40px; font-family: SourceHanSansCN-Bold, SourceHanSansCN; font-weight: bold; color: #FFFFFF; text-align: left; line-height: 60px; text-shadow: 0px 2px 9px rgba(19, 20, 128, 0.23); } .slide-des .des-word{ max-width: 700px; font-size: 20px; font-family: SourceHanSansCN-Regular, SourceHanSansCN; font-weight: 400; color: #FFFFFF; margin-top:24px; text-align: left; line-height: 32px; text-shadow: 0px 2px 9px rgba(19, 20, 128, 0.5); } .slide-des .des-word ul{ margin-left:20px; } .slide-des .des-word ul li{ list-style-type: disc; } .slide-des.des_2 .des-title{ color: #0845A4; } .slide-des.des_2 .des-word{ color: #0845A4; } .slide-des .des-zx{ width: 160px; height: 48px; margin-top:60px; } .slide-des .des-zx img{ width: 100%; height: 100%; } .hx-header-fix.no-bg{ background: none !important; box-shadow: none; } .hx-header-fix .auto-container .hx-header .hx-menu ul li a.one{ color:#ffffff; } .hx-header-fix .auto-container .hx-header .hx-menu ul li a.two{ color:#8B8B8B; } .hx-header-fix .auto-container .hx-header .hx-menu ul li a.three{ color:#ffffff; }