.mian { width: 1920px; height: 696px; background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%); } #top { position: relative; width: 1920px; height: 90px; background: #FFFFFF; /* line-height: 90px; */ box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; } #top .tu { position: absolute; left: 243px; top: 11px; width: 164px; height: 65px; } .top1 { /* width: 37px; */ height: 19px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #0F5FB6; /* margin-left: 825px; */ margin-top: 34px; /* display: inline-block; */ padding-bottom: 32px; border-bottom: 5px solid blue; } .top2 { /* width: 74px; */ height: 19px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #333333; margin-left: 88px; /* margin-top: 34px; */ /* display: inline-block; */ } .top3 { position: relative; /* width: 76px; */ height: 19px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #333333; margin-left: 88px; display: flex; align-items: center; /* 你们就不会用flex 全部都是定位 焯 */ /* margin-top: 34px; */ /* display: inline-block; */ } .t3-2 { /* position: absolute; width: 14px; height: 8px; left: 81px; top: -33px; */ margin-left: 10px; } .top { position: relative; } .top .t3-3 { position: absolute; left: 200px; top: 20px; z-index: 100000; } .t3-3>.t3-3-1>div { font-size: 13px; height: 35px; color: #666666; } .top4 { /* width: 96px; */ height: 18px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #333333; margin-left: 87px; /* margin-top: 34px; */ /* display: inline-block; */ } .top5 { /* width: 76px; */ height: 19px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #333333; margin-left: 69px; /* margin-top: 34px; */ /* display: inline-block; */ } .top6 { /* width: 75px; */ height: 19px; font-size: 19px; font-family: PingFang SC; font-weight: 400; color: #333333; /* margin-top: 34px; */ margin-left: 87px; /* display: inline-block; */ } .bottem { width: 100%; min-width: 1024px; height: 607px; position: relative; } .bottem>.bo1 { width: 276px; height: 432px; background: #213040; border-radius: 6px; margin-left: 240px; margin-top: 24px; display: inline-block; } .bottem>.bo1>.bo1-1-1 { width: 80px; height: 20px; margin-left: 21px; margin-top: 29px; display: inline-block; font-size: 20px; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; } .bottem>.bo1>.bo1-1-2 { width: 142px; height: 304px; font-size: 17px; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; line-height: 72px; margin-left: 20px; } /* .bottem>.bo2 { width: 1150px; height: 433px; position: absolute; left: 533px; top: 25px; } */ /* .bottem .t3-3 { width: 153px; height: 227px; background: #FFFFFF; position: absolute; left: 1115px; border-radius: 4px; top: 2px; } */ /* .bottem .t3-3>.t3-3-1 { height: 225px; display: flex; flex-direction: column; margin-left: 16px; width: 103px; margin-top: 10px; border-radius: 2px; } */ /* .bottem .t3-3>.t3-3-1>div { font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #666666; line-height: 41px; } */ .bo3 { width: 270px; height: 96px; background: #F4F5F6; border-radius: 6px; /* display: inline-block; */ margin-left: 240px; margin-top: 24px; /* border: 1px solid; */ } .bo31 { width: 68px; height: 68px; display: inline-block; margin-left: 16px; margin-top: 14px; /* border: 1px dashed black; */ } .bo32 { width: 153px; height: 42px; /* display: inline-block; */ float: right; margin-right: 21px; margin-top: 25px; } .bo32 .s1 { display: block; } .bo4 { width: 270px; height: 96px; background: #F4F5F6; border-radius: 6px; position: relative; left: 533px; top: -95px; } .bo5 { width: 270px; height: 96px; background: #F4F5F6; border-radius: 6px; position: relative; left: 826px; top: -191px; } .bo6 { width: 270px; height: 96px; background: #F4F5F6; border-radius: 6px; position: relative; left: 1119px; top: -288px; } .bo7 { width: 270px; height: 96px; background: #F4F5F6; border-radius: 6px; position: relative; left: 1412px; top: -384px; } .m2 { width: 100%; min-width: 1024px; height: 571px; background: #F7FAFF; position: relative; } .m2 .m2s1 { width: 409px; height: 45px; white-space: nowrap; position: absolute; left: 499px; top: 80px; } .m2 .m2s1>span { width: 409px; height: 45px; font-size: 46px; font-family: Source Han Sans CN; font-weight: bold; color: #34363B; } .m2 .m2s2 { width: 409px; height: 45px; white-space: nowrap; position: absolute; left: 930px; top: 80px; } .m2 .m2s2>span { width: 498px; height: 43px; font-size: 46px; font-family: Source Han Sans CN; font-weight: 400; color: #34363B; } .m2 .m2s3 { display: block; position: absolute; left: 652px; top: 158px; } .m2 .md1 { width: 249px; height: 206px; background: #FFFFFF; border-radius: 10px; position: absolute; left: 241px; top: 268px; } .m2 .md1 .md1d { width: 75px; height: 82px; margin-left: 33px; margin-top: 22px; /* border: 1px dashed black; */ } .m2 .md1 .md1s { display: block; width: 83px; height: 19px; font-size: 20px; font-family: Source Han Sans CN; font-weight: 400; color: #000000; margin-left: 32px; margin-top: 12px; } .m2 .md1 .md1s2 { width: 128px; height: 16px; font-size: 16px; font-family: Source Han Sans CN; font-weight: 400; color: #9BA5B3; display: block; margin-left: 31px; margin-top: 16px; } .m2 .md2 { width: 249px; height: 206px; background: #FFFFFF; border-radius: 10px; position: absolute; left: 538px; top: 268px; } .m2 .md2 .md1d { width: 98px; height: 81px; margin-left: 34px; margin-top: 23px; /* border: 1px dashed black; */ } .m2 .md2 .md1s { display: block; width: 137px; height: 19px; font-size: 17px; font-family: Source Han Sans CN; font-weight: 400; color: #000000; margin-left: 34px; margin-top: 12px; } .m2 .md2 .md1s2 { width: 128px; height: 16px; font-size: 13px; font-family: Source Han Sans CN; font-weight: 400; color: #9BA5B3; display: block; margin-left: 31px; margin-top: 16px; } .m2 .md3 { width: 249px; height: 206px; background: #FFFFFF; border-radius: 10px; position: absolute; left: 835px; top: 268px; } .m2 .md3 .md1d { width: 92px; height: 82px; margin-left: 34px; margin-top: 22px; /* border: 1px dashed black; */ } .m2 .md3 .md1s { display: block; width: 83px; height: 19px; font-size: 20px; font-family: Source Han Sans CN; font-weight: 400; color: #000000; margin-left: 32px; margin-top: 12px; } .m2 .md3 .md1s2 { width: 128px; height: 16px; font-size: 16px; font-family: Source Han Sans CN; font-weight: 400; color: #9BA5B3; display: block; margin-left: 31px; margin-top: 16px; } .m2 .md4 { width: 249px; height: 206px; background: #FFFFFF; border-radius: 10px; position: absolute; left: 1132px; top: 268px; } .m2 .md4 .md1d { width: 82px; height: 82px; margin-left: 33px; margin-top: 22px; /* border: 1px dashed black; */ } .m2 .md4 .md1s { display: block; width: 99px; height: 19px; font-size: 19px; font-family: Source Han Sans CN; font-weight: 400; color: #000000; margin-left: 32px; margin-top: 12px; } .m2 .md4 .md1s2 { width: 168px; height: 16px; font-size: 15px; font-family: Source Han Sans CN; font-weight: 400; color: #9BA5B3; display: block; margin-left: 31px; margin-top: 16px; } .m2 .md5 { width: 249px; height: 206px; background: #FFFFFF; border-radius: 10px; position: absolute; left: 1429px; top: 268px; } .m2 .md5 .md1d { width: 91px; height: 60px; margin-left: 33px; margin-top: 22px; /* border: 1px dashed black; */ } .m2 .md5 .md1s { display: block; width: 92px; height: 21px; font-size: 19px; font-family: Source Han Sans CN; font-weight: 400; color: #000000; margin-left: 34px; margin-top: 23px; } .m2 .md5 .md1s2 { width: 176px; height: 16px; font-size: 16px; font-family: Source Han Sans CN; font-weight: 400; color: #9BA5B3; display: block; margin-left: 31px; margin-top: 16px; } .m3 { width: 100%; min-height: 1024px; position: relative; height: 684px; /* display: none; */ background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%); } #qi1 { /* display: none; */ display: block; } #qi2 { display: none; } #qi3 { display: none; } #qi4 { display: none; } #qi5 { display: none; } .m3 .m3s1 { width: 409px; height: 45px; position: absolute; left: 612px; top: 80px; } .m3 .m3s1>span { width: 409px; height: 45px; font-size: 46px; font-family: Source Han Sans CN; font-weight: bold; color: #34363B; } .m3 .m3s2 { width: 409px; height: 45px; position: absolute; left: 997px; top: 80px; } .m3 .m3s2>span { width: 498px; height: 43px; font-size: 46px; font-family: Source Han Sans CN; font-weight: 400; color: #34363B; } .m3 .m3s3 { display: block; position: absolute; left: 672px; top: 157px; /* width: 595px; */ height: 19px; font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #939CAC; } .m3 .m3s4 { width: 635px; height: 19px; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #333333; /* background-color: rebeccapurple; */ /* border: 1px solid rebeccapurple; */ position: absolute; left: 654px; top: 217px; } .m3 .m3s5 { width: 303px; height: 276px; background: #FFFFFF; box-shadow: 0px 8px 19px 2px #F7F9FF; border-radius: 10px; position: absolute; left: 280px; top: 314px; } .m3 .m3s5 .m3s51 { width: 146px; height: 31px; margin-left: 26px; margin-top: 45px; /* border: 1px dashed black; */ } .m3 .m3s5>span { display: block; width: 198px; height: 17px; margin-left: 25px; margin-top: 24px; font-size: 17px; font-family: PingFang SC; font-weight: 400; color: #333333; } .m3 .m3s5 .m3s52 { width: 249px; height: 2px; background: #EEEEEE; border-radius: 1px; margin-left: 26px; margin-top: 15px; } .m3 .m3s5>p { display: block; width: 240px; height: 92px; font-size: 16px; font-family: PingFang SC; font-weight: 100; color: #333333; margin-left: 24px; margin-top: 14px; } .m3 .m3s6 { width: 303px; height: 276px; background: #FFFFFF; box-shadow: 0px 8px 19px 2px #F7F9FF; border-radius: 10px; position: absolute; left: 635px; top: 314px; } .m3 .m3s6 .m3s61 { width: 92px; height: 29px; margin-left: 26px; margin-top: 45px; /* border: 1px dashed black; */ } .m3 .m3s6>span { display: block; width: 120px; height: 17px; margin-left: 25px; margin-top: 24px; font-size: 17px; font-family: PingFang SC; font-weight: 400; color: #333333; } .m3 .m3s6 .m3s62 { width: 249px; height: 2px; background: #EEEEEE; border-radius: 1px; margin-left: 26px; margin-top: 15px; } .m3 .m3s6>p { display: block; width: 240px; height: 92px; font-size: 16px; font-family: PingFang SC; font-weight: 100; color: #333333; margin-left: 24px; margin-top: 14px; } .m3 .m3s7 { width: 303px; height: 276px; background: #FFFFFF; box-shadow: 0px 8px 19px 2px #F7F9FF; border-radius: 10px; position: absolute; left: 991px; top: 314px; } .m3 .m3s7 .m3s71 { width: 92px; height: 29px; margin-left: 26px; margin-top: 45px; /* border: 1px dashed black; */ } .m3 .m3s7>span { display: block; width: 127px; height: 18px; margin-left: 25px; margin-top: 24px; font-size: 17px; font-family: PingFang SC; font-weight: 400; color: #333333; } .m3 .m3s7 .m3s72 { width: 249px; height: 2px; background: #EEEEEE; border-radius: 1px; margin-left: 26px; margin-top: 15px; } .m3 .m3s7>p { display: block; width: 240px; height: 92px; font-size: 15px; font-family: PingFang SC; font-weight: 100; color: #333333; margin-left: 24px; margin-top: 14px; } .m3 .m3s8 { width: 303px; height: 276px; background: #FFFFFF; box-shadow: 0px 8px 19px 2px #F7F9FF; border-radius: 10px; position: absolute; left: 1346px; top: 314px; } .m3 .m3s8 .m3s81 { width: 26px; height: 27px; margin-left: 26px; margin-top: 45px; /* border: 1px dashed black; */ } .m3 .m3s8>span { display: block; width: 127px; height: 18px; margin-left: 25px; margin-top: 24px; font-size: 17px; font-family: PingFang SC; font-weight: 400; color: #333333; } .m3 .m3s8 .m3s82 { width: 249px; height: 2px; background: #EEEEEE; border-radius: 1px; margin-left: 26px; margin-top: 15px; } .m3 .m3s8>p { display: block; width: 240px; height: 92px; font-size: 16px; font-family: PingFang SC; font-weight: 100; color: #333333; margin-left: 24px; margin-top: 14px; } .m4 { width: 100%; min-width: 1024px; height: 696px; position: relative; background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%); } .m4 .m4s1 { width: 409px; height: 45px; position: absolute; left: 493px; top: 90px; } .m4 .m4s1>span { width: 409px; height: 45px; font-size: 45px; font-family: Source Han Sans CN; font-weight: bold; color: #34363B; } .m4 .m4s2 { width: 545px; height: 43px; position: absolute; left: 921px; top: 91px; } .m4 .m4s2>span { width: 498px; height: 43px; font-size: 45px; font-family: Source Han Sans CN; font-weight: 400; color: #34363B; } .m4 .m4s3 { display: block; position: absolute; left: 639px; top: 167px; /* width: 595px; */ height: 19px; font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #939CAC; } .m4 .m4s41 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 239px; top: 243px; overflow: hidden; } .m4 .m4s42 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 533px; top: 243px; overflow: hidden; } .m4 .m4s43 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 827px; top: 243px; overflow: hidden; } .m4 .m4s44 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 1121px; top: 243px; overflow: hidden; } .m4 .m4s45 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 1415px; top: 243px; overflow: hidden; } .m4 .m4s46 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 239px; top: 399px; overflow: hidden; } .m4 .m4s47 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 533px; top: 399px; overflow: hidden; } .m4 .m4s48 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 827px; top: 399px; overflow: hidden; } .m4 .m4s49 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 1121px; top: 399px; overflow: hidden; } .m4 .m4s50 { position: absolute; width: 264px; height: 132px; background: #F7F9FF; border-radius: 6px; left: 1415px; top: 399px; overflow: hidden; } .m4 .m4s5 { width: 220px; height: 19px; font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #939CAC; display: block; position: absolute; left: 850px; top: 582px; } .m5 { width: 100%; min-width: 1024px; height: 842px; position: relative; background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%); } .m5 .m5s1 { width: 390px; height: 44px; position: absolute; left: 552px; top: 80px; } .m5 .m5s1>span { width: 409px; height: 45px; font-size: 44px; font-family: Source Han Sans CN; font-weight: bold; color: #34363B; } .m5 .m5s2 { width: 408px; height: 43px; position: absolute; left: 954px; top: 80px; } .m5 .m5s2>span { width: 408px; height: 43px; font-size: 43px; font-family: Source Han Sans CN; font-weight: 400; color: #34363B; } .m5 .m5s3 { display: block; position: absolute; left: 579px; top: 157px; /* width: 595px; */ height: 19px; font-size: 17px; font-family: Source Han Sans CN; font-weight: 400; color: #939CAC; } .m5 .m5d1 { position: absolute; width: 328px; height: 495px; background: #F7F9FF; border-radius: 10px; left: 276px; top: 250px; } .m5 .m5d1 .m5d11 { width: 328px; height: 245px; background: #000000; border-radius: 10px; } .m5 .m5d1 .s1 { width: 82px; height: 26px; font-size: 28px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 14px; margin-top: 14px; } .m5 .m5d1 .s2 { width: 147px; height: 17px; font-size: 18px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 10px; margin-top: 22px; } .m5 .m5d1 .s3 { display: block; width: 79px; height: 16px; font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 12px; margin-top: 19px; } .m5 .m5d1 .m5d12 { width: 304px; height: 2px; background: #000000; border-radius: 1px; margin-left: 11px; margin-top: 7px; } .m5 .m5d1>p { width: 303px; height: 121px; font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #666666; display: block; line-height: 26px; margin-top: 13px; margin-left: 12px; } .m5 .m5d2 { position: absolute; width: 328px; height: 495px; background: #F7F9FF; border-radius: 10px; left: 624px; top: 250px; } .m5 .m5d2 .m5d21 { width: 328px; height: 245px; background: #000000; border-radius: 10px; } .m5 .m5d2 .s1 { width: 82px; height: 26px; font-size: 28px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 14px; margin-top: 14px; } .m5 .m5d2 .s2 { width: 143px; height: 17px; font-size: 18px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 10px; margin-top: 22px; } .m5 .m5d2 .s3 { display: block; width: 79px; height: 16px; font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 12px; margin-top: 19px; } .m5 .m5d2 .m5d22 { width: 304px; height: 2px; background: #000000; border-radius: 1px; margin-left: 11px; margin-top: 7px; } .m5 .m5d2>p { width: 303px; height: 121px; font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #666666; display: block; line-height: 26px; margin-top: 13px; margin-left: 12px; } .m5 .m5d3 { position: absolute; width: 328px; height: 495px; background: #F7F9FF; border-radius: 10px; left: 972px; top: 250px; } .m5 .m5d3 .m5d31 { width: 328px; height: 245px; background: #000000; border-radius: 10px; } .m5 .m5d3 .s1 { width: 82px; height: 26px; font-size: 28px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 14px; margin-top: 14px; } .m5 .m5d3 .s2 { width: 143px; height: 17px; font-size: 18px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 10px; margin-top: 22px; } .m5 .m5d3 .s3 { display: block; width: 79px; height: 16px; font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 12px; margin-top: 19px; } .m5 .m5d3 .m5d32 { width: 304px; height: 2px; background: #000000; border-radius: 1px; margin-left: 11px; margin-top: 7px; } .m5 .m5d3>p { width: 303px; height: 121px; font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #666666; display: block; line-height: 26px; margin-top: 13px; margin-left: 12px; } .m5 .m5d4 { position: absolute; width: 328px; height: 495px; background: #F7F9FF; border-radius: 10px; left: 1320px; top: 250px; } .m5 .m5d4 .m5d41 { width: 328px; height: 245px; background: #000000; border-radius: 10px; } .m5 .m5d4 .s1 { width: 82px; height: 26px; font-size: 28px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 14px; margin-top: 14px; } .m5 .m5d4 .s2 { width: 143px; height: 17px; font-size: 18px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 10px; margin-top: 22px; } .m5 .m5d4 .s3 { display: block; width: 79px; height: 16px; font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #333333; margin-left: 12px; margin-top: 19px; } .m5 .m5d4 .m5d42 { width: 304px; height: 2px; background: #000000; border-radius: 1px; margin-left: 11px; margin-top: 7px; } .m5 .m5d4>p { width: 303px; height: 121px; font-size: 15px; font-family: PingFang SC; font-weight: 400; color: #666666; display: block; line-height: 26px; margin-top: 13px; margin-left: 12px; } .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; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper { width: 1150px; height: 433px; /* position: absolute; left: 533px; top: 25px; */ } #re { position: absolute; left: 533px; z-index: -1; top: 25px; } body { position: relative; } .t3-3 { position: absolute; /* left: 1129px; top: 103px; */ background: #FFFFFF; z-index: 20; border-radius: 5px; display: none; left: 0px; top: 51px; } .t3-3 .t3-3-1 { margin-left: 8px; }