.bg{ background: no-repeat top center; background-size: auto; height: 640px; } .section1 .title{ text-align: center; font-family: alihyaihei; font-size: 56px; color: #ffffff; letter-spacing: 0; text-shadow: 0 2px 24px rgba(21,30,75,0.62); padding-top: 292px; } .title h3 { line-height: 72px; font-weight: normal; } .title p { font-family: pingfangsc-regular; font-size: 24px; color: #ffffff; letter-spacing: 0; line-height: 32px; margin-top: 20px; } /* 第二部分 */ .section2 { background: #f2f5fa; padding-top: 120px; padding-bottom: 120px; } .tip{ font-family: pingfangsc-medium; font-size: 40px; color: #ffffff; letter-spacing: 4px; line-height: 52px; position: absolute; top: 72px; left: 360px; } .tip-bottom { position: absolute; top: 136px; left: 303px; font-family: pingfangsc-regular; font-size: 24px; color: #ffffff; letter-spacing: 6px; line-height: 28px; } /* 介绍 */ .section3 { background: #f2f5fa; } .shop-title { font-family: pingfangsc-medium; font-size: 40px; font-weight: 500; color: #172344; letter-spacing: 0; line-height: inherit; padding-top: 122px; background: no-repeat 0 50px; } .introduce ul { padding-top: 72px; height: 732px; } .introduce li{ width: 364px; height: 64px; padding: 64px 48px 72px 48px; background: #fafdff; box-shadow: 8px 8px 24px 0 rgba(132,146,165,0.17); border-radius: 12px; float: left; margin-bottom: 20px; position: relative; top: 0; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } .introduce li:nth-child(2), .introduce li:nth-child(4), .introduce li:nth-child(6){ margin-left: 20px; } .introduce li:nth-child(1):hover img { content: ; } .introduce li:nth-child(2):hover img { content: ; } .introduce li:nth-child(3):hover img { content: ; } .introduce li:nth-child(4):hover img { content: ; } .introduce li:nth-child(5):hover img { content: ; } .introduce li:nth-child(6):hover img { content: ; } .introduce li:hover { box-shadow: 12px 12px 20px 0 rgba(163,178,201,0.32); cursor: pointer; top: -12px; position: relative; } .pos-li { position: absolute; bottom: 0; right: 18%; top: 80%; } /* .introduce { background: no-repeat left boo; position: relative; } */ .pos-img { position: absolute; right: 18%; top: 33%; } .box-img { width: 92px; height: 72px; display: flex; align-items: center; justify-content: center; float: left; } .box-img .left { /* width: 48px; */ text-align: center; vertical-align: middle; display: inline-block; } .introduce li .right { float: left; width: 224px; letter-spacing: 0; padding-left: 43px; } .right .set { font-family: pingfangsc-medium; font-size: 20px; color: #172344; line-height: 24px; margin-bottom: 8px; } .right .set-con { font-family: pingfangsc-regular; font-size: 14px; color: #172344; line-height: 16px; } /* 功能强大 */ .section4 { background: #f2f5fa; padding-top: 100px; } .section4 .function .strong-title { font-family: pingfangsc-medium; font-size: 40px; color: #172344; letter-spacing: 0; line-height: 52px; background: no-repeat 0 10px; font-weight: 500; padding-top: 78px; } .function .strong-bottom { font-family: pingfangsc-regular; font-size: 24px; color: #172344; letter-spacing: 0; margin-top: 10px; padding-bottom: 72px; } .tab-wrap .tab-title{ font-family: pingfangsc-regular; font-size: 16px; color: #9ca8ba; letter-spacing: 0; line-height: 24px; padding: 15px 0; } .tab-wrap .tab-title span{ padding: 15px 48px; cursor: pointer; } .tab-title .select { font-size: 18px; color: #ffffff; background-image: linear-gradient(33deg, #ff6710 17%, #ff9138 100%); border-radius: 4px 4px 0 0; } .con-wrap { background-color: #fafdff; } .show-con { padding: 80px 0; overflow: hidden; } .con-list { display: none; } .show { display: block; } .con-list .top-tit { position: relative; margin-left: 19px; font-family: pingfangsc-medium; font-size: 20px; color: #172344; letter-spacing: 0; line-height: 24px; margin-bottom: 44px; } .con-list .round { width: 40px; height: 40px; display: inline-block; background-color: #ff8b5e; opacity: .1813; border-radius: 100%; position: absolute; left: -19px; bottom: 0; } .con-list img { float: left; } .fire-icon { position: absolute; right: 60px; top: -9px;; } .con-list .li-title { font-family: pingfangsc-medium; font-size: 16px; color: #172344; letter-spacing: 0; line-height: 20px; } .con-list li > .li-con { font-family: pingfangsc-regular; font-size: 14px; color: #8e9aa9; letter-spacing: 0; line-height: 16px; margin-top: 8px; font-weight: 500; } .con-list ul > li { float: right; width: 403px; } .con-list ul > li:last-child { margin-bottom: 0!important; } #li-24 { display: table-cell; vertical-align: middle; } .con-list .action-list { overflow: hidden; float: left; width: 380px; margin-left: 100px; } .con-list .action-list > li{ font-family: pingfangsc-regular; font-size: 16px; color: #172344; letter-spacing: 0; line-height: 40px; float: left; background: no-repeat 24px 13px; margin-top: 24px; background-color: #fbfdff; border: 1px solid #e6ebf1; border-radius: 20px; height: 40px; padding-left: 52px; width: 78px; margin-right: 40px; } .con-list ul > li > .list-style { font-family: dinpro-regular; font-size: 16px; color: #ff6710; letter-spacing: -0.8px; text-align: justify; line-height: 20px; margin-right: 8px; /* list-style-type: decimal-leading-zero; */ } /* 第五部分细分行业 */ .section5 { background-color: #f2f5fa; padding-top: 120px; padding-bottom: 309px; background: no-repeat right center; } .section5 .industry .industry-title{ font-family: pingfangsc-medium; font-size: 40px; color: #172344; letter-spacing: 0; line-height: 52px; background: no-repeat 0 10px; font-weight: 500; padding-top: 78px; } .industry .industry-bottom{ font-family: pingfangsc-regular; font-size: 24px; color: #172344; letter-spacing: 0; margin-top: 10px; padding-bottom: 72px; } .industry-tab p{ font-family: pingfangsc-regular; font-size: 16px; color: #9ca8ba; letter-spacing: 0; line-height: 24px; padding: 20px 24px; cursor: pointer; } .industry-tab .select-tab{ background-image: linear-gradient(33deg, #ff6710 17%, #ff9138 100%); border-radius: 4px 0 0 4px; color: #fff; } .industry-box{ display: flex; align-items: center; } .con-box { background: #fafdff; box-shadow: 8px 8px 24px 0 rgba(132,146,165,0.17); border-radius: 12px; height: 636px; width: 860px; display: none; } .small-box { padding: 60px 0 92px 80px } .con-box .industry-con-title { font-family: pingfangsc-medium; font-size: 20px; color: #172344; letter-spacing: 0; line-height: 24px; } .title-detail { font-family: pingfangsc-regular; font-size: 14px; color: #8e9aa9; letter-spacing: 0; line-height: 20px; margin-top: 8px; width: 700px; } .feature-list { overflow: hidden; padding: 24px 40px 60px 12px; } .feature-list li { font-family: pingfangsc-regular; font-size: 14px; color: #172344; letter-spacing: 0; line-height: 16px; float: left; } .feature-list li p { background: no-repeat 0 top; background-size: contain; padding-left: 20px; margin-top: 24px; padding-right: 82px; } .border-bottom { border-bottom: 1px solid #eef2f6; width: 701px; overflow: hidden; } .case { font-family: pingfangsc-medium; font-size: 20px; color: #172344; letter-spacing: 0; line-height: 24px; margin-bottom: 24px; margin-top: 59px; } .case-list li { float: left; position: relative; cursor: pointer; width: 140px; height: 140px; box-shadow: 4px 4px 12px 0 rgba(132,146,165,0.17); background: #ffffff; border-radius: 4px; } .case-list { position: relative; } .case-list li:nth-child(2) { margin-left: 20px; margin-right: 10px; } .case-list li:nth-child(3) { margin-left: 10px; margin-right: 20px; } /* .case-list li:nth-child(1) .hover-con{ left: 0; } .case-list li:nth-child(2) .hover-con{ left: 0px; } .case-list li:nth-child(3) .hover-con{ left: 0px; } */ .case-list .selectedw300 { width: 300px; } /* hover第一个默认效果 */ .hover-con { background-image: linear-gradient(33deg, #ff6710 17%, #ff9138 100%); box-shadow: 12px 12px 20px 0 rgba(163,178,201,0.32); border-radius: 4px; display: none; /* max-height: 328px; */ position: absolute; height: 0; width: 0; /* overflow: hidden; */ top: 0; left: 0; z-index: 3; } .hover-con .middle-con { padding: 36px 24px; font-family: pingfangsc-regular; font-size: 14px; color: #ffffff; letter-spacing: 0; text-align: justify; line-height: 20px; font-weight: 500; position: relative; } .hover-con .middle-con h3 { font-family: pingfangsc-medium; font-size: 20px; margin-bottom: 20px; } .intro { margin-bottom: 11.5px; } .bottom-use { padding-top: 11.5px; border-top: 1px solid rgba(255, 255, 255, .2) } .bottom-use p{ font-family: pingfangsc-regular; letter-spacing: -1px; } .bottom-use .use-effect { margin-bottom: 8px; } .code-show .line { background: rgba(255,107,20,0.60); width: 2px; height: 12px; position: absolute; left: 52%; z-index: 3; bottom: -11px; } .code-show img { position: absolute; left: 36%; bottom: -111px; border: 2px solid rgba(255,108,21,0.60); border-radius: 100%; box-shadow: 12px 12px 20px 0 rgba(163,178,201,0.32) } /* hover效果 */ /* .img-bottom { width: 140px; } */ .case-list li .img-style { opacity: 0; /* width: 0; overflow: hidden; */ transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } .case-list li .img-bottom { opacity: 1; /* width: 0; overflow: hidden; */ transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } .hover-style { height: auto; width: 300px; max-height: 328px; display: block; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } .con-show { display: block; } /* 第六部分 */ .section6 { padding-top: 150px; background: no-repeat -28px top; background-size: cover; } .custom-use { font-family: pingfangsc-medium; font-size: 40px; color: #ffffff; letter-spacing: 0; line-height: 52px; background: no-repeat left top; padding-top: 42px; padding-right: 32px; } .logo-list { overflow: hidden; padding-top: 52px; padding-bottom: 72px; } .logo-list li{ float: left; padding: 38px 50px; border-bottom: 1px solid rgba(159,172,231, .12); border-right: 1px solid rgba(159,172,231, .12); } .logo-list li:nth-child(1) { margin-left: -50px; } .logo-list li:nth-child(6) { margin-left: -50px; } .logo-list li:nth-child(5) { margin-right: -50px; } .logo-list li:nth-child(10) { margin-right: -50px; } .logo-list li:nth-child(6), .logo-list li:nth-child(7), .logo-list li:nth-child(8), .logo-list li:nth-child(9), .logo-list li:nth-child(10){ border-bottom:none } .more { opacity: 0.6; font-family: pingfangsc-regular; font-size: 16px; color: #c4cad2; letter-spacing: 0; line-height: 20px; margin-left: 519px; cursor: pointer; } /* 第七部分 */ .section7 { background: #f2f5fa; } .section7 .content { padding: 120px 0; padding-bottom: 0; } .service { font-family: pingfangsc-medium; font-size: 40px; color: #172344; letter-spacing: 0; line-height: 52px; padding-top: 78px; background: no-repeat 0; } .bottom-line { background-image: linear-gradient(33deg, #ff6710 17%, #ff9138 100%); border-radius: 2px; width: 24px; height: 4px; margin-left: 8px; } .dec-content { /* overflow: hidden; */ margin-top: 72px; position: relative; top: 20px; /* padding-bottom: 40px; */ height: 164px; } .box-dec { background: #fafdff; box-shadow: 8px 8px 24px 0 rgba(132,146,165,0.17); border-radius: 12px; width: 300px; height: 164px; float: left; display: flex; align-items: center; /* justify-content: space-around; */ justify-content: space-between; top: 0; position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } /* .box-dec-selected { top: -12px; box-shadow: 12px 12px 20px 0 rgba(163,178,201,0.32); cursor: pointer; position: relative; } */ .dec-content .box-dec:hover { top: -12px; box-shadow: 12px 12px 20px 0 rgba(163,178,201,0.32); cursor: pointer; position: relative; } .left-dec { font-family: pingfangsc-regular; font-size: 20px; color: #172344; letter-spacing: 0; line-height: 40px; float: left; margin-left: 40px; } .left-dec .year { font-weight: 600; font-family: pingfangsc-medium; font-size: 32px; } .box-dec:nth-child(2) { margin-left: 20px; margin-right: 20px; } .right-icon { /* float: right; */ text-align: right; margin-right: 40px; } .bottom-line { margin-top: 28px; } .bg-white { /* background: #fff; */ width: 100%; padding-top: 40px; padding-bottom: 120px; } .consult { background: #fafdff; box-shadow: 8px 8px 24px 0 rgba(132,146,165,0.17); border-radius: 12px; height: 96px; line-height: 96px; width: 940px; margin: 0 auto; margin-top: 40px; position: relative; top: 0; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* firefox 4 */ -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; /* safari 和 chrome */ -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s /* opera */ } .consult:hover { position: relative; top: -12px; } .consult .consult-left{ float: left; margin-left: 40px; font-family: pingfangsc-medium; font-size: 20px; color: #172344; letter-spacing: 0; } .consult .consult-right{ float: right; margin-right: 68px; font-family: dinpro-regular; font-size: 24px; color: #172344; letter-spacing: 0; } /* 第八部分 */ .section8 { background: #202020; } .section8 .content { padding-bottom: 118px; } .box-copyright { overflow: hidden; } .hot { font-family: helvetica; font-size: 24px; color: #ffffff; letter-spacing: 1px; line-height: 22px; padding-top: 120px; margin-bottom: 52px; } .tel { font-family: helvetica; font-size: 18px; color: #ffffff; letter-spacing: 0; margin-bottom: 36px; line-height: 18px; margin-top: 11px; } .tips { font-family: pingfangsc-regular; font-size: 12px; color: #777777; letter-spacing: 0; line-height: 12px; } .one, .two, .three, .code-right { float: left; } .two { margin-left: 100px; margin-right: 100px; } .code-right { margin-left: 240px; } .code-right .wechat-code { color: #fff; text-align: right; } .copyright-bottom { overflow: hidden; float: left; } .copyright-bottom span { font-family: pingfangsc-regular; font-size: 12px; /* float: left; */ color: #777777; margin-top: 28px; margin-right: 32px; } .address { font-family: pingfangsc-regular; font-size: 12px; color: #777777; letter-spacing: 0; line-height: 12px; margin-top: 24px; }