body { overflow-x: hidden; } .mySwiper { width: 100vw!important; } .swiper-wrapper { width: 100vw!important; } .swiper-slide { width: 100%!important; } .concentrationBox { width: 100%; margin-top: 80px; /* background: linear-gradient(0deg, #071688, #163FC4); */ cursor: pointer; } h3 { text-align: center; height: 228px; line-height: 228px; font-size: 54px; font-family: OPPOSans; font-weight: bold; color: #202530; } .modeBox { width: 96%; margin: 0 auto; } .privateBox { overflow: hidden; } .private { width: 49%; height: 310px; margin-right: 1%; /* background: #0E1542; */ background-image: url('https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img_1.png'); background-repeat: no-repeat; background-size: 100% 100%; float: left; position: relative; } .private:hover .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .private:hover .privateHie { display: none; } .privateHie { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; display: block; } .privateText { width: 312px; height: 69px; font-size: 24px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; line-height: 45px; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.53); margin-top: 63px; margin-left: 30px; } .goPrivate { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .goDigitization { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; /* box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); */ border-radius: 6px; border: 2px solid #FFFFFF; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #ffffff; border: 2px solid #FFFFFF; } .digitization { background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img4_1.png"); background-repeat: no-repeat; width: 49%; height: 310px; float: right; position: relative; background-size: 100% 100%; } .digitization:hover .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .digitization:hover .digitizationHie { display: none; } .digitizationHie { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; display: block; } .integrationBox { margin-top: 30px; margin-bottom: 102px; display: flex; justify-content: space-between; } .integrationItem { position: relative; width: 32%; height: 310px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img3.png"); background-repeat: no-repeat; background-size: 100% 100%; } .integrationItemHie { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; display: block; } .integrationItem:hover .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .integrationItem:hover .integrationItemHie { display: none; } .integrationItem2 { position: relative; width: 32%; height: 310px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img2_1.png"); background-repeat: no-repeat; background-size: 100% 100%; } .integrationItem2Hie { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; display: block; } .integrationItem2:hover .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .integrationItem2:hover .integrationItem2Hie { display: none; } .integrationItem3 { position: relative; width: 32%; height: 310px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img5_1.png"); background-repeat: no-repeat; background-size: 100% 100%; } .integrationItem3Hie { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; display: block; } .integrationItem3:hover .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; background: #FFFFFF; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); border-radius: 6px; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #08188A; } .integrationItem3:hover .integrationItem3Hie { display: none; } .integrationText { /* width: 287px; */ height: 69px; font-size: 24px; font-family: OPPOSans; font-weight: bold; color: #FFFFFF; line-height: 38px; margin-top: 50px; margin-left: 30px; } .integrationText2 { /* width: 215px; */ height: 69px; font-size: 24px; font-family: OPPOSans; font-weight: bold; color: #FFFFFF; line-height: 38px; margin-top: 50px; margin-left: 30px; } .integrationText3 { /* width: 180px; */ height: 69px; font-size: 24px; font-family: OPPOSans; font-weight: bold; color: #FFFFFF; line-height: 38px; margin-top: 50px; margin-left: 30px; } .goIntegration { display: block; margin-top: 88px; margin-left: 30px; width: 168px; height: 50px; line-height: 50px; text-align: center; /* box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); */ border-radius: 6px; border: 2px solid #FFFFFF; font-size: 20px; font-family: OPPOSans; font-weight: 500; color: #ffffff; border: 2px solid #FFFFFF; transition: all .3s; } .serveBox { overflow: hidden; background: #F8FAFF; } .title { text-align: center; padding-top: 94px; padding-bottom: 80px; font-size: 54px; font-family: OPPOSans; font-weight: bold; color: #202530; } .textBox { width: 1200px; margin: 0 auto; } .itemBox4 { border-bottom: #E3E4FF 1px dotted; display: flex; justify-content: center; } .itemImgBox1 { width: 25%; cursor: pointer; } .itemImgBox1 .img { width: 40px; height: 40px; /* background: cadetblue; */ display: block; margin: 0 auto } .itemImgBox2 { width: 25%; cursor: pointer; } .itemImgBox2 .img { width: 40px; height: 40px; /* background: cadetblue; */ display: block; margin: 0 auto } .itemImgBox3 { width: 25%; cursor: pointer; } .itemImgBox3 .img { width: 40px; height: 40px; /* background: cadetblue; */ display: block; margin: 0 auto } .itemImgBox4 { width: 25%; cursor: pointer; } .itemImgBox4 .img { width: 40px; height: 40px; /* background: cadetblue; */ display: block; margin: 0 auto } .imgText { font-size: 24px; font-family: OPPOSans; font-weight: 400; color: #202530; text-align: center; margin-top: 17px; } .activity1 { width: 68px; height: 8px; background: #0067ED; border-radius: 4px; /* text-align: center; */ margin: 10px auto; } .activity2 { width: 68px; height: 8px; background: #0067ED; border-radius: 4px; /* text-align: center; */ margin: 10px auto; display: none; } .activity3 { width: 68px; height: 8px; background: #0067ED; border-radius: 4px; /* text-align: center; */ margin: 10px auto; display: none; } .activity4 { width: 68px; height: 8px; background: #0067ED; border-radius: 4px; /* text-align: center; */ margin: 10px auto; display: none; } .explainBox1 { overflow: hidden; margin-top: 150px; position: relative; } .explainBox2 { overflow: hidden; margin-top: 150px; position: relative; display: none } .explainBox3 { overflow: hidden; margin-top: 150px; position: relative; display: none } .explainBox4 { overflow: hidden; margin-top: 150px; position: relative; display: none } .explainImg { position: absolute; left: 0; top: 0; } .explainTextBox { float: left; width: 510px; margin-left: 16px; margin-top: 4px; } .explainH3 { font-size: 36px; font-family: OPPOSans; font-weight: 500; color: #131D2E; line-height: 54px; } .explainP { width: 510px; height: 78px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #737780; line-height: 30px; margin-top: 35px; } .explainText { margin-top: 10px; font-size: 36px; font-family: OPPOSans; font-weight: 500; color: #131D2E; line-height: 54px; } .explainImgBox { float: right; width: 599px; height: 400px; } .partner { font-size: 54px; font-family: OPPOSans; font-weight: bold; color: #202530; text-align: center; margin-top: 80px; margin-bottom: 60px; } .partnerLogo { height: 79px; /* background-color: chartreuse; */ display: block; margin: 0 auto; } .partnerLogoBox { width: 100%; height: 79px; margin-bottom: 74px; background-color: #ffffff; overflow: hidden; } .caseBox { overflow: hidden; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_bnt.png"); background-repeat: no-repeat; } .caseText { padding-top: 74px; padding-bottom: 84px; text-align: center; font-size: 54px; font-family: OPPOSans; font-weight: bold; color: #202530; } .caseLogoBox { width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 104px; } .caseLogo1 { width: 443px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jxal_jmh.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; } .jinbaoBoxA1 { position: absolute; left: 30px; top: 240px; overflow: hidden; margin: 0 auto; } .jinbaoBoxA2 { position: absolute; left: 30px; top: 240px; overflow: hidden; display: none; } .jinbaoBoxA3 { position: absolute; left: 30px; top: 240px; overflow: hidden; display: none; } .jinbaoBoxA4 { position: absolute; left: 30px; top: 240px; overflow: hidden; display: none; } .jinbaoBoxA5 { position: absolute; left: 30px; top: 240px; overflow: hidden; display: none; } .jinbaoF { float: left; width: 210px; } .jinbaoText { font-size: 24px; font-family: OPPOSans; font-weight: bold; color: #FFFFFF; margin-bottom: 16px; } .jinbaop { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #FDFEFF; overflow: hidden; text-overflow: ellipsis; height: 96px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; } .jinbaoR { float: right; margin-left: 46px; width: 130px; } .rqCode { width: 130px; height: 130px; margin-bottom: 10px; background-color: #ffffff; border-radius: 50%; } .rqText { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #A5A9B4; } .caseLogo2 { width: 222px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_hlc.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; /* width: 222px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jxal_hlc1.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; */ } .logoBox1 { width: 100%; position: absolute; display: none; /* left: 40px; */ top: 330px; } .logoBox2 { width: 100%; position: absolute; /* left: 40px; */ top: 330px; } .logoBox3 { width: 100%; position: absolute; /* left: 40px; */ top: 330px; } .logoBox4 { width: 100%; position: absolute; /* left: 40px; */ top: 330px; } .logoBox5 { width: 100%; position: absolute; /* left: 40px; */ top: 330px; } .LOGO { text-align: center; font-size: 30px; font-family: OPPOSans; font-weight: 800; color: #FDFEFF; margin-bottom: 10px; } .name { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FDFEFF; text-align: center; margin-top: 40px; } .caseLogo3 { width: 222px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_hzdz.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; } .caseLogo4 { width: 222px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_wxgc.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; } .caseLogo5 { width: 222px; height: 415px; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/jinpeng-1.png"); background-repeat: no-repeat; border-radius: 10px; position: relative; } .aboutUt { background-color: #Fff; overflow: hidden; position: relative; } .aboutTextBoxw { margin-top: 142px; margin-left: 10%; background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_gywm_qq.png"); background-repeat: no-repeat; } .aboutTextBox { margin-top: 172px; margin-left: 10%; overflow: hidden; } .bgImg { position: absolute; top: 13%; left: 38%; } .aboutTitle { width: 340px; font-size: 56px; font-family: OPPOSans; font-weight: 500; color: #131D2E; padding-top: 30px; } .xian { width: 340px; height: 4px; background: #E3E8EF; position: relative; margin-bottom: 54px; margin-top: 35px; } .zixian { position: absolute; top: 0; right: 0; width: 147px; height: 4px; background: #0067ED; } .aboutText1 { margin-top: 54px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #666F80; width: 464px; line-height: 36px; margin-bottom: 20px; } .aboutText2 { margin-top: 54px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #666F80; width: 464px; line-height: 36px; margin-bottom: 218px; } .select { background: #F8FAFF; overflow: hidden; } .companyLogoBox { overflow: hidden; position: relative; width: 1200px; height: 1000px; margin: 120px auto 0 auto; } .companyLogo1 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 21%; left: 0%; } .companyLogo1 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo8 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 39%; left: 0%; } .companyLogo8 img { width: 90%; height: 85%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo15 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 57%; left: 0%; } .companyLogo15 img { width: 90%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo22 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 66%; left: 0%; } .companyLogo22 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo2 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 14%; left: 14%; text-align: center; } .companyLogo2 img { width: 90%; height: 57%; /* margin: auto 0; */ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo9 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 32%; left: 14%; } .companyLogo9 img { width: 90%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo16 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 50%; left: 14%; } .companyLogo16 img { width: 90%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo23 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 68%; left: 14%; } .companyLogo23 img { width: 90%; height: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo3 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 7%; left: 29%; } .companyLogo3 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo10 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 25%; left: 29%; } .companyLogo10 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo17 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 43%; left: 29%; } .companyLogo17 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo24 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 61%; left: 29%; } .companyLogo24 img { width: 93%; height: 28%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo4 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 0%; left: 44%; } .companyLogo4 img { width: 100%; height: 40%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo11 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 18%; left: 44%; } .companyLogo11 img { width: 90%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo18 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 36%; left: 44%; } .companyLogo18 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo25 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 54%; left: 44%; } .companyLogo25 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo26 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 72%; left: 44%; } .companyLogo26 img { width: 90%; height: 51%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo5 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 8%; left: 59%; } .companyLogo5 img { width: 100%; height: 55%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo12 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 26%; left: 59%; } .companyLogo12 img { width: 90%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo19 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 44%; left: 59%; } .companyLogo19 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo27 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 62%; left: 59%; } .companyLogo27 img { width: 90%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo6 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 2%; left: 74%; } .companyLogo6 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo13 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 20%; left: 74%; } .companyLogo13 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo20 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 38%; left: 74%; } .companyLogo20 img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo28 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 56%; left: 74%; } .companyLogo28 img { width: 90%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo7 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 19%; right: 0; } .companyLogo7 img { width: 100%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo14 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 37%; right: 0; } .companyLogo14 img { width: 90%; height: 40%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo21 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 55%; right: 0; } .companyLogo21 img { width: 90%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo29 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 3%; left: 0; } .companyLogo29 img { width: 90%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .companyLogo30 { width: 142px; height: 142px; background: #FFFFFF; box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16); border-radius: 8px; position: absolute; top: 1%; right:0 ; } .companyLogo30 img { width: 90%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .selectTitle { width: 100%; font-size: 54px; font-family: OPPOSans; font-weight: bold; color: #202530; margin: 86px 0 0 0; text-align: center; } .selectImg { width: 100%; height: 100%; margin: 0 auto; display: block; } /**/ .headerBox { width: 100%; height: 80px; background: #FFFFFF; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 10000; } .imgBox { float: left; margin-left: 40px; margin-top: 17px; width: 158px; height: 45px; } .contenBox { float: left; margin-left: 10%; margin-top: 32px; overflow: hidden; } .item { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; /* line-height: 16px; */ float: left; cursor: pointer; margin-right: 80px; padding: 4px 0; } .goBox { overflow: hidden; float: right; margin-top: 22px; margin-right: 2%; } .zx { width: 108px; height: 36px; background: #FF4800; border-radius: 6px; float: left; margin-right: 14px; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 36px; text-align: center; cursor: pointer; } .goA { width: 78px; height: 36px; background: #0067ED; border-radius: 6px; float: left; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 36px; text-align: center; }