/* @update :2018/06/14 */ .search .searchLeft{ width: 670px; float: left; } .search{ margin-top: 30px; } .search .search-inp{ vertical-align: top; margin-top: -8px; } .search .searchLeft ul li { float: left; margin-left: 60px; } .search .searchLeft ul li img{ margin-right: 16px; } .search .searchLeft ul li span{ font-size: 18px; color: #7a7878 } .search .searchLeft ul li:first-child{ margin-left: 18px; } .search .search-inp{ float: left; width:512px; } .search .search-inp div{ width: 510px; } .search .search-inp input{ width: 406px; } /* /服务项目 */ .serviceItems { clear: both; overflow: hidden; } .serviceItems h3{ width: 630px; height: 26px; margin: 0 auto; font-weight: normal; background: url(../../../img/newMenu/serves_4.png) no-repeat; background-size:100% 100%; margin-top: 72px; } .wrapper{ padding-top: 8px; } .wrapper .wrapperLeft{ float: left; width: 944px; } .wrapper .wrapperRight{ float: right; width: 224px; } .title .seeMore { float:right; color: #7a7878; font-size: 14px; vertical-align: top; margin-top: 6px; } .title .seeMore:hover{ color:#1797e9; } .title img{ vertical-align: top; margin-top: 2px; } .title strong{ font-size: 22px; color:#1f1f1f; margin: 0 4px 0 10px; font-weight: normal; } .title span{ display: inline-block; font-size: 18px; color: #7a7878; margin: 0 4px } /* 补贴 */ .subsidy{ padding-bottom: 15px; overflow: hidden; padding-top: 18px; } .subsidy>img{ float: left; width: 184px; height: 226px; } .subsidy .subsidyTxt{ width: 759px; float: left; border: 1px solid #efefef; border-left: none; height: 226px; } .subsidy .subsidyTxt ul { } .subsidy .subsidyTxt ul li{ display: inline-block; width: 249px; padding-top: 22px; padding-bottom: 15px; padding-left: 12px; transition: all .2s ease-in-out; } .subsidyTxt ul li:hover{ } .subsidyTxt ul li:hover div h4{ color: #0a7dd4!important; } .subsidy .subsidyTxt ul li div{ overflow: hidden; float: left; font-size: 14px; transition: all .2s ease-in-out; } .subsidyTxt ul li div:nth-child(1){ width:72px; height: 72px; border-radius: 50%; margin-right: 7px; } .subsidy .subsidyTxt ul li div img{ width:100%; } .subsidy .subsidyTxt ul li div h4{ font-size: 14px; font-weight: normal; color: #393838; padding: 12px 0; } .subsidy .subsidyTxt ul li:hover div:nth-child(1){ transform: rotateY(360deg); transition: all .2s ease-in } .subsidy .subsidyTxt ul li div p{ color: #7a7878; } .advertisement img{ width: 100%; padding-bottom: 50px; } .subsidy .subsidyList{ float: left; width: 763px; float: left; background: #f8f8f8; height: 318px; } /* 知识产权 */ .property>img{ width: 180px; height: 318px; } .property .subsidyList{ padding-left: 18px; padding-top: 15px; } .property .subsidyList>ul>li { text-align: center; float: left; width: 230px; height: 136px; background:#ffffff; margin-left: 19px; transition: all .2s ease-in-out; } .subsidyList>ul>li:hover{ margin-top: -4px; box-shadow: 0 2px 10px #ccc; transition: all .2s ease-in } .property .subsidyList>ul li:first-child{ margin-left: 0 } .subsidyList a{ color: #7a7878; } .subsidyList>ul li .listImg{ width: 100%; height: 48px; background: url(../../../img/newMenu/serves_18.jpg) no-repeat; background-size:100% 100%; padding-top: 4px; } .subsidyList>ul li:nth-child(2) .listImg{ background: url(../../../img/newMenu/serves_16.png) no-repeat; } .subsidyList>ul li:nth-child(3) .listImg{ background: url(../../../img/newMenu/serves_17.jpg) no-repeat; } .subsidyList .listImg p{ width: 150px; line-height: 40px; height: 40px; margin:0px auto; text-align: center; font-size: 18px; color: #1f1f1f; background: url(../../../img/newMenu/serves_21.png) no-repeat; background-size:100% 100%; } .property{ padding-bottom:48px; } .property .subsidyList>ul li ol{ padding-top: 20px; width: 196px; margin: 0 auto; overflow: hidden; } .property .subsidyList>ul li ol li{ height: 46px; line-height: 46px; border: 1px solid #efefef; font-size: 14px; color: #7a7878; } .property .subsidyList>ul li ol li p{ height: 100%; } .property .subsidyList>ul li ol li:hover{ background: #f8f8f8 } .property .subsidyList>ul li ol li:hover p{ color: #000000; } .property .subsidyList>ul li ol li a{ width: 100%; height: 100%; display: inline-block; } .property .subsidyList>ul li:nth-child(2) ol li{ float: left; text-align: center; width: 50% } .property .subsidyList>ul li:nth-child(3) ol{ padding-top: 10px; } .property .subsidyList>ul li:nth-child(3) ol li{ padding: 0; float: left; text-align: center; width: 50%; height: 35px; line-height: 35px; } .property .subsidyList>ul li:nth-child(3) ol li:nth-child(1){ border-bottom: 0; border-right: none; } .property .subsidyList>ul li:nth-child(3) ol li:nth-child(2){ border-bottom: 0 } .property .subsidyList>ul li:nth-child(3) ol li:nth-child(3){ border-right: 0 } /* 专利服务 */ .servicePatent{ clear: both; overflow: hidden; padding-top: 10px; } .servicePatent .patent{ width: 600px; height:142px; background: #ffffff; float: left; transition: all .2s ease-out; } .servicePatent .patent:hover{ box-shadow:0 2px 10px #ccc; transition: all .2s ease-in; } .servicePatent .patent .patentImg{ width: 95px; height: 142px; background: url(../../../img/newMenu/serves_20.jpg) no-repeat; background-size:100% 100%; padding-top: 18px; float: left; } .servicePatent .patent .patentImg p{ font-size: 18px; color: #1f1f1f; letter-spacing: 20px; width: 44px; height: 104px; margin: 0px auto; background: url(../../../img/newMenu/serves_23.png) no-repeat; background-size:100% 100%; padding-left: 11px; line-height: 18px; padding-top:15px; } .servicePatent .originality{ float: left; width: 120px; height: 40px; background: url(../../../img/newMenu/serves_22.png) no-repeat; background-size:100% 100%; font-size: 16px; color: #ffffff; text-align: center; line-height: 36px; vertical-align: top; margin-top: 54px; margin-left: 10px; transition: all .2s ease-in-out; } .servicePatent .originality:hover{ margin-top: 45px; transition: all .2s ease-in; } .patent .patentList{ float: left; padding-left: 16px; padding-top:18px; } .patent .patentList ul{ width: 470px; overflow: hidden; border-top: 1px solid #efefef; border-left: 1px solid #efefef; } .subsidyList a p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; } .patent .patentList ul li a{ width: 100%; height: 100%; display: inline-block; } .patent .patentList ul li { width: 93px; float: left; text-align: center; height: 55px; line-height: 55px; border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; } .patent .patentList ul li:hover a p{ color:#000000; } .patent .patentList ul li:hover{ background: #f8f8f8; } /* 企业认证 */ .advertisement{ clear: both; } .certification{ overflow: hidden; margin-top: 24px; padding-bottom: 50px; } .certification div{ float: left; } .certification .certificationImg { width: 174px; height: 278px; } .certification .certificationImg img{ width: 100%; height: 100%; } .certification .certificationList{ width: 378px; height: 280px; } .certification .certificationList>div{ width: 100%; background: #fbfbfb; line-height: 74px; height: 74px; text-align: center; font-size: 18px; color: #393838; border: 1px solid #efefef; border-left: none; } .certification .certificationRight { float: right; border-left: 1px solid #efefef; } .certification .certificationList>div img{ margin-right: 10px; } .certification .certificationList ol li{ width: 50%; float: left; height: 51px; line-height: 51px; text-align: center; font-size: 14px; color: #7a7878; border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .certificationList ol li:hover{ background: #f8f8f8; } .certificationList ol li a{ width: 100%; height: 100%; display: inline-block; } .certificationList ol li:hover a{ color: #000000!important; } .certification .certificationList ol li a{ color:#7a7878; } .advertisement.bj{ clear: both; padding-top: 20px; } .advertisement.bj img{ padding-bottom: 0 } /* 管理 */ .administration{ overflow: hidden; border: 1px solid #efefef; } .administration ul li { width:25%; height: 48px; line-height: 48px; float: left; text-align: center; border-top: 1px solid #efefef; border-left: 1px solid #efefef } .administration ul li a{ width: 100%; height: 100%; display: inline-block; } .administration ul li:hover{ background: #f8f8f8; } .administration ul li:hover a{ color: #000000; } .administration ul li a{ color:#7a7878 } .administration ul li:nth-child(5),.administration ul li:nth-child(6),.administration ul li:nth-child(7),.administration ul li:nth-child(12),.administration ul li:nth-child(13),.administration ul li:nth-child(14){ width: 33.33%; } /* 右侧 */ .wrapperRight { float: right; width: 224px; } .wrapperRight .memo>div{ width: 100%; height: 58px; line-height: 58px; text-align: center; font-size: 22px; color: #ffffff; background: url(../../../img/newMenu/serves_29.png) no-repeat; background-size:100% 100%; margin-bottom: 12px; } .wrapperRight .memo{ border: 1px solid #efefef; padding-bottom: 38px; height: 382px; } .wrapperRight .memo h4{ font-size: 18px; color: #393838; text-align: center; line-height: 30px; height: 30px; } .wrapperRight .memo h4 strong{ font-size: 24px; color: #ff580e; vertical-align: top; margin-top: 6px; font-weight:550 } .wrapperRight .memo ul{ padding:20px 12px 0; } .wrapperRight .memo ul li{ overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; margin-top: 4px; transition: all .2s ease-in-out; } .wrapperRight .memo ul li a{ color: #7a7878; font-size: 14px; } .wrapperRight .memo ul li a::before{ content: ''; border-radius: 50%; width: 4px; height: 4px; margin-right: 10px; vertical-align: middle; display: inline-block; background: #666666; } .wrapperRight .memo ul li a:hover{ color: #0a7dd4; } /* 政策放榜 */ .policy{ border: 1px solid #efefef; padding-bottom: 20px; margin-top: 50px; height: 337px; } .policy>div{ width: 100%; height: 100px; background: url(../../../img/newMenu/serves_30.png) no-repeat; background-size:100% 100%; } .policy ul li { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .policy ul{ padding-left: 12px; padding-top: 15px; } .policy ul li{ margin-top: 5px; transition: all .2s ease-in-out; } .policy ul li a{ color: #7a7878; font-size: 14px; } .policy ul li:hover,.memo ul li:hover{ margin-left: -4px; transition: all .2s ease-in; } .policy ul li:hover a{ color: #0a7dd4; } /* 今日快讯 */ .newFlash{ padding-top: 30px; } .newFlash h4{ font-weight: normal; font-size: 14px; color: #393838; margin-bottom: 10px; } .newFlash h4 img{ display: inline-block; margin-right: 5px; vertical-align: top; } .newFlash>div{ width: 100%; position: relative; height: 80px; } .newFlash>div img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } .newFlash>div p{ width: 100%; height: 0px; line-height: 0px; background: rgba(0, 0, 0, .3); position: absolute; color: #ffffff; bottom: 0; left: 0; z-index: 999; text-align: center; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; transition: all .5s; } .newFlash>div:hover p{ height:24px; line-height:24px; transition: all .5s; } .newFlash ul{ padding-top: 10px; height: 315px; } .newFlash ul li{ border-bottom: 1px dashed #eeeeee; padding:6px 0; transition: all .2s ease-in; } .newFlash ul li a{ color: #686868; height: 24px; line-height: 24px; } .newFlash ul li:hover{ margin-left: -2px; transition: all .2s ease-in; } .newFlash ul li a:hover{ color: #0a7dd4; } .newFlash ul li img{ margin-right: 5px; display: inline-block; } /* 技淘百科 */ .encyclopedias { width: 218px; height: 330px; margin-top: 60px; position: relative; background: url(../../../img/newMenu/service_jitao1.jpg) no-repeat; background-size:100% 100%; } .encyclopedias a{ display: inline-block; width: 128px; height: 36px; position: absolute; left: 50%; bottom: 34px; margin-left: -64px; text-align: center; font-size: 14px; color: #ffffff; line-height: 36px; background: #80e561; border-radius: 20px; box-shadow: 0 2px 10px rgb(155, 152, 152); transition: all .2s ease-in-out; } .encyclopedias a img{ margin-left: 10px; } .encyclopedias a:hover{ background: #ff5910; transition: all .2s ease-in } .overBj{ clear: both; margin-top: 18px; } .overBj img{ width: 100%; } /* p品牌通 */ .brand{ height: 620px; width: 100%; background: url(../../../img/newMenu/service_101.jpg)no-repeat; background-size:100% 100%; padding-top: 44px; } .branTtitle{ text-align: center; } .branTtitle h4{ font-weight: normal; width: 630px; margin: 0 auto; height: 26px; font-size: 26px; color: #ef7b43; background: url(../../../img/newMenu/service_102.png) no-repeat; background-size:100% 100%; } .branTtitle p{ font-size: 18px; color: #c98e62; margin-top: 12px; } .brand .brandList{ display: flex; display: -webkit-flex; justify-content: space-between; align-items: flex-end; height: 434px; } .brand .brandList li{ text-align: center; width: 214px; vertical-align: bottom; background: #ffffff; box-shadow: 0 5px 15px #c98e62; border-radius: 15px 15px 0 0 ; transition: all .2s ease-in-out; } .brandList li:hover{ margin-bottom: 8px; transition: all .2s ease-in; } .brandList li:hover div span{ box-shadow: 0 8px 15px #ec9c7c; } .brand .brandList li img{ width: 100%; height: 142px; border-radius: 10px 10px 0 0 ; } .brand .brandList li:nth-child(1){ height: 355px; } .brand .brandList li:nth-child(1) div{ height: 160px; padding-top: 16px; } .brand .brandList li:nth-child(1) div span{ margin-top: 10px; } .brand .brandList li:nth-child(2) div span{ margin-top: 22px; } .brand .brandList li:nth-child(3) div span{ margin-top: 38px; } .brand .brandList li:nth-child(4) div span{ margin-top: 54px; } .brand .brandList li:nth-child(5) div span{ margin-top:70px; } .brand .brandList li:nth-child(2){ height: 375px; } .brand .brandList li:nth-child(2) div{ height: 178px; padding-top: 24px; } .brand .brandList li:nth-child(3){ height: 395px; } .brand .brandList li:nth-child(3) div{ height: 198px; padding-top: 28px; } .brand .brandList li:nth-child(4){ height: 415px; } .brand .brandList li:nth-child(4) div{ height: 218px; padding-top: 32px; } .brand .brandList li:nth-child(5){ height: 435px; } .brand .brandList li:nth-child(5) div{ box-sizing: border-box; height:238px; padding-top:35px; } .brand .brandList li p{ font-size: 16px; color: #7a7878; line-height: 32px; height: 32px; } .brand .brandList li div{ padding-top: 30px; } .brand .brandList li div span{ width: 148px; height: 46px; line-height: 46px; display: inline-block; background: linear-gradient(left, #ff580e ,#ff8041); background: -webkit-linear-gradient(left, #ff580e ,#ff8041); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, #ff580e ,#ff8041); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, #ff580e ,#ff8041); /* Firefox 3.6 - 15 */ background: linear-gradient(left, #ff580e ,#ff8041); /* 标准的语法 */ font-size: 18px; color: #ffffff; border-radius: 10px; vertical-align: bottom; transition: all .2s ease-in-out; } /* 科技通 */ .scienceTtitle{ clear: both; text-align: center; padding-top: 56px; } .scienceTtitle h4{ font-weight: normal; width: 630px; margin: 0 auto; height: 26px; font-size: 26px; color: #ff5d1d; background: url(../../../img/newMenu/service_108.png) no-repeat; background-size:100% 100%; } .scienceTtitle p{ font-size: 18px; color: #7a7878; margin-top: 12px; } .scienceLeft>.imgt{ float: left; width: 246px; height: 286px; position: relative; margin-top: 68px; z-index: 111; } .scienceLeft>.imgt img{ width: 246px; height: 286px; position: absolute; top: 0; left: 0; z-index: 222; } .scienceLeft>.imgt span{ width: 246px; height: 286px; display: inline-block; position: absolute; background: rgba(0, 0, 0, .5); top:0; left:0; z-index: 300; } .scienceLeft>.imgt>div{ width: 210px; height: 70px; top: 87px; left: 20px; background: url(../../../img/newMenu/service_110.png)no-repeat; background-size:100% 100%; text-align: center; position: absolute; top: 90px; left: 50%; margin-left: -105px; z-index: 444; } .scienceLeft>.imgt a{ color: #ffffff; width: 86px; height: 32px; line-height: 32px; text-align: center; box-shadow: 0 5px 10px #333; position: absolute; bottom: 50px; left: 50%; margin-left: -43px; background: #1d1d1d; z-index: 999; border-radius: 10px; transition: all .5s ease-in; } .imgt:hover a{ transform: scale(1.2); box-shadow: 0px 0px 55px #e7e7e7; transition: all .5s ease-in; } .scienceLeft>.imgt>div p{ font-size: 24px; color: #ffffff; } .scienceList{ float: left; width: 660px; height: 284px; margin-top: 68px; } .scienceLeft ul{ box-sizing:border-box; } .scienceLeft ul li { display: inline-block; vertical-align: top; margin-left: 10px; margin-bottom: 22px; transition: all .2s ease-in-out; } .scienceLeft ul li:hover img{ box-shadow: 0 4px 10px #ccc; transition: all .2s ease-in; transform: scale(1.02); } .scienceRight{ float: right; width: 290px; } .scienceRight h4{ font-weight: normal; font-size: 18px; color: #444444; } .scienceRight h4 img{ margin-right: 12px; } .scienceRight>div{ width: 290px; height: 364px; background: url(../../../img/newMenu/service_109.png)no-repeat; background-size:100% 100%; padding-top: 56px; padding-left: 50px; } .scienceRight>div p{ width: 190px; text-align: justify; line-height:26px; color: #444444; } .scienceRight div a{ width: 94px; height: 34px; line-height: 34px; display: inline-block; text-align: center; border: 1px solid #ff580e; font-size: 14px; color: #ff580e; border-radius: 12px; float: right; margin-right: 50px; margin-top: 10px; transition: all .2s ease-in-out; } .scienceRight div a:hover{ background: #ef7b43; color: #ffffff; transition: all .2s ease-in; } /* 科技项目 */ .project{ clear: both; overflow: hidden; margin-bottom: 40px; } .project .projectImg{ float: left; width: 266px; height: 300px; } .project .projectImg img{ width: 100%; height: 100%; } .project .projectMid{ float: right; width: 920px; } .project .projectMid img{ margin-bottom: 12px; } .projectMid >div>div{ float: left; } .projectMid .imgLeft { width: 680px; } .projectMid .imgLeft ul li { float: left; width: 214px; height: 57px; background: #f8f8f8; font-size: 14px; line-height: 57px; text-align: center; margin-right: 2px; margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0 5px; } .imgLeft ul li:hover{ background: #ffffff; } .imgLeft ul li:hover p{ color: #000000; } .imgLeft ul li P{ overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .imgLeft ul li a{ color: #393838; } .projectMid .imgRight{ width: 214px; text-align: center; margin-right: 16px; } .projectMid .imgRight ol li { height: 57px; font-size: 14px; color: #393838; line-height: 57px; margin-bottom: 2px; background: #f8f8f8; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .advertisementBj{ height: 92px; width: 100%; margin-bottom: 24px; } .advertisementBj img{ width: 100%; height: 100%; } .projectRight{ width: 220px; float: right!important; margin-right: 20px; text-align: center; margin-top: -24px; } .projectRight li{ width: 100%; height: 34px; font-size:14px; border: 1px solid #dcdcdc; line-height: 34px; border-radius:20px; margin-bottom: 12px; transition: all .2s ease-in-out; } .projectRight li:hover{ margin-left: -4px; border-color: #ff5a0e; transition: all .2s ease-in; } .projectRight li:hover p{ color: #ff5a0e; } .projectRight li p{ line-height: 30px; color: #444444; } .projectRight li span{ color: #ff5a0e; font-size: 18px; display: inline-block; margin-right: 10px; } /* 合作伙伴 */ .cooperation{ clear: both; padding-top: 26px; } .cooperation .cooperationImg{ float: left; width:270px; height: 250px; } .cooperation .cooperationLogo{ width: 930px; float: left; height: 249px; border-bottom: 1px solid #f3f3f3; } .cooperation .cooperationLogo ul{ box-sizing: border-box; } .cooperation .cooperationLogo ul li{ float: left; width: 20%; height: 82.5px; border-right:1px solid #f3f3f3; border-top: 1px solid #f3f3f3; } .cooperation .cooperationLogo ul li img{ width: 100%; height: 100%; } .cooperationPeople{ clear: both; padding-top:40px; padding-bottom: 60px; } .cooperationPeople .listPre,.cooperationPeople .listNext{ width: 34px; height: 34px; display: inline-block; vertical-align: top; margin: 44px 5px 0; cursor: pointer; transition: all .3s ease-out; } .cooperationPeople>span:hover{ transform: scale(1.1); transition: all .3s ease-in; } .cooperationPeople .listPre{ float: left; } .cooperationPeople .listNext{ float: right; } .cooperationPeople .customerList{ width: 1100px; overflow: hidden; } .cooperationPeople .customerList ul { overflow: hidden; width: 999999px; box-sizing: border-box; } .cooperationPeople .customerList ul li{ float: left; width: 370px; } .customerList ul li img{ width: 96px; height: 96px; border-radius: 50%; float: left; margin-right: 15px; margin-top: 3px; } .customerList ul li div{ width: 228px; float: left; } .customerList ul li div h5{ font-size: 18px; } .customerList ul li div h5 span{ color: #ff580e; font-size: 14px; display: inline-block; margin-left: 10px; } .customerList ul li div h5 span:first-child{ font-weight: normal; font-size: 18px; color: #323232; margin-top: 16px; } .customerList ul li div p{ font-size: 12px; color: #686868; margin-top: 15px; } .customerList ul li:hover h5{ color: #0a7dd4 } /* map */ .serviceMap { float: left; position: relative; width: 520px; height: 350px; z-index: 99; } .serviceMap .BMap_Marker{ display: inline-block; width: 150px!important; } .serviceMap .BMapLabel{ width: 200px; height: 20px; line-height: 20px } .serviceMap .bottom{ margin-top: 0; border-bottom:none; } .serviceMap .center{ width: 252px!important; } .serviceMap>img{ position: absolute; top: 0; right: 50px; z-index: 999; } .serviceMap #dituContent{ position: absolute; top: 50px; z-index: 888; } .serviceTxt{ float: left; padding: 48px 24px 0; width: 244px; } .serviceTxt h2{ text-align: center; margin-bottom: 18px; font-size: 24px; color: #ff7e0b; font-weight: 700 } .serviceTxt .txtMid{ font-size: 14px; color: #686868; text-align: right; margin-bottom: 18px; } .serviceTxt .txtOrange{ font-size: 18px; color: #ff983c; margin-bottom: 18px; } .serviceTxt .txtSmall{ font-size: 14px; color: #f29848; text-align: center; margin-bottom: 18px; } .serviceTxt .txtF{ font-size: 16px; color: #ff6600; font-weight: 700; } .serviceCapacity { clear: both; overflow: hidden; padding-top: 40px; padding-bottom: 18px; } .serviceCapacity .serviceCrowd{ float: left; width: 436px; } .serviceCapacity .serviceCrowd>img{ width: 100%; margin-bottom: 16px; } .serviceCrowd ol{ clear: both; overflow: hidden; } .serviceCrowd ol li{ float: left; width: 216px; } .serviceCrowd .portrait{ float: left; width: 120px; height: 126px; position: relative; z-index: 88; } .serviceCrowd .portrait img{ width: 120px; height: 126px; position: absolute; top: 0; left: 0; } .serviceCrowd .portrait p{ position: absolute; width:90px; height: 18px; line-height: 18px; font-size: 14px; color: #ffffff; text-align: center; bottom:35px; left: 50%; margin-left: -45px; background: #69c3f1; } .serviceCrowd ol li>p{ float: left; width: 96px; font-size: 14px; color: #7a7878; margin-top: 14px; } .process{ padding-top: 42px; padding-bottom: 110px; } .process ul{ display: flex; box-sizing: border-box; } .process ul li{ text-align: center; width: 200px; } .process ul li span{ display: inline-block; width: 100%; height: 34px; background: url(../../../img/newMenu/service_131.jpg) no-repeat; background-size:100% 100%; }