.tec-list .btn0, .tec-list .btn1, .service-nav li, .service-connect .right .btn, .promise-list li { transition: transform .2s; transform: translateZ(0); }
.tec-list .btn0:hover, .tec-list .btn1:hover, .service-nav li:hover, .service-connect .right .btn:hover, .promise-list li:hover { transform: translate3d(0, -10px, 0); opacity: .9; backface-visibility: hidden; perspective: 1000; }

.tec-list { margin-top: 40px; }
.tec-list ul { display: flex; flex-wrap: wrap; }
.tec-list li { flex: 19% 0 1; flex: calc(25% - 15px) 0 1; margin-left: 20px; height: 567px; text-align: center; padding: 70px 30px 0; position: relative; background-color: #fff; box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05); }
.tec-list li:hover { box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05); z-index: 2; opacity: 1; }
.tec-list li:hover a { display: block; }
.tec-list li:nth-child(4n-3) { margin-left: 0; }
.tec-list img { width: 64px; height: 64px; }
.tec-list p { font-size: 20px; font-weight: bold; margin: 15px 0; }
.tec-list .btn0 { position: absolute; width: calc(100% - 60px); line-height: 56px; background-color: #34CA7E; color: #fff; bottom: 30px; left: 30px; display: none; }
.tec-list .btn1 { position: absolute; width: calc(100% - 60px); line-height: 56px; bottom: 30px; left: 30px; border: 1px solid #3470ff; color: #3470ff; }
.tec-list .btn1:hover { background-color: #3470ff; color: #fff; }
.tec-list .btn2 { background-color: #3470ff; }
.tec-list .tags { text-align: left; position: absolute; bottom: 120px; }
.tec-list .tags em { display: inline-block; line-height: 30px; border: 1px solid #f1f1f1; padding: 0 12px; color: #999; margin-right: 14px; font-size: 14px; margin-top: 14px; text-align: center; }
.tec-list .tags em:nth-child(3) { margin-right: 0; }
.tec-listb .btn1 { border-color: #34ca7e; color: #34ca7e; }
.tec-listb .btn1:hover { background-color: #34ca7e; color: #fff; }

.service-tit { text-align: center; padding-top: 96px; }
.service-tit p { font-size: 24px; font-weight: bold; line-height: 32px; }
.service-tit span { color: #666; }
.service-tit em { color: #34ca7e; }
.service-nav { margin-top: -30px; position: relative; z-index: 2; }
.service-nav ul { display: flex; }
.service-nav li { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.04); border-radius: 8px; background-color: #fff; padding: 30px; margin-left: 20px; flex: 1; display: flex; align-items: center; }
.service-nav li:first-child { margin-left: 0; }
.service-nav li:hover { opacity: 1; }
.service-nav .icon { margin-right: 20px; }
.service-nav .i { width: 56px; height: 56px; object-fit: cover; margin-bottom: 12px; }
.service-nav p { font-size: 20px; font-weight: bold; }
.service-nav span { color: #666; }
.service-connect { background-color: #f7f8f9; padding-bottom: 120px; }
.service-connect .wrapper { width: 1200px; }
.service-connect .service-tit { margin-bottom: 40px; }
.service-connect .flex { display: flex; justify-content: space-between; }
.service-connect .code { line-height: 40px; position: relative; }
.service-connect .code h3 { font-size: 20px; }
.service-connect .code p { margin-bottom: 32px; }
.service-connect .code .btn { width: 242px; line-height: 56px; text-align: center; background-color: #3470ff; color: #fff; display: inline-block; }
.service-connect .code .ewm { position: absolute; bottom: 70px; left: 23px; width: 195px; background-color: #fff; text-align: center; font-size: 14px; display: none; padding-bottom: 15px; line-height: 1; z-index: 6; }
.service-connect .code .ewm img { width: 195px; height: 195px; }
.service-connect .right { width: 500px; }
.service-connect .right .list { position: relative; }
.service-connect .right .ipt, .service-connect .right .txt { border: solid 1px #f1f1f1; }
.service-connect .right .ipt:focus, .service-connect .right .txt:focus { border-color: #3470ff; }
.service-connect .right .ipt { height: 56px; width: 240px; padding: 0 20px; }
.service-connect .right .txt { width: 100%; resize: none; height: 110px; padding: 10px 20px; margin-top: 20px; }
.service-connect .right .btn { display: block; line-height: 56px; text-align: center; background-color: #3470ff; color: #fff; border-radius: 56px; margin-top: 30px; }
.service-connect .right .tips { font-size: 12px; color: red; position: absolute; display: none; }

.pop-bg { background-color: rgba(0, 0, 0, 0.5); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; display: none; }
.pop-box { text-align: center; width: 460px; height: 280px; background-image: linear-gradient(180deg, #dfe8ff, #fff); box-shadow: 0px 0px 60px 0px rgba(255, 131, 84, 0.2); border-radius: 8px; padding-top: 40px; position: fixed; left: 50%; margin-left: -230px; top: 50%; margin-top: -140px; background-color: #fff; z-index: 5; display: none; }
.pop-box .close { position: absolute; right: 10px; top: 10px; }
.pop-box p { font-size: 24px; font-weight: bold; margin-bottom: 15px; }
.pop-box span { display: inline-block; line-height: 1.6; }
.pop-box .color1 { color: #3470ff; }

.service-nav .icon { margin-right: 0; margin-bottom: 16px; }
.service-nav li { flex-direction: column; padding: 30px 0; }

.tec-list li { height: 452px; box-shadow: none; }

.promise { background-color: #f7f8f9; margin-top: 80px; padding-bottom: 80px; }
.promise-list { margin-top: 40px; }
.promise-list ul { display: flex; }
.promise-list li { flex: 1; text-align: center; }
.promise-list .i { width: 64px; height: 64px; object-fit: cover; }
.promise-list p { font-size: 20px; font-weight: bold; margin-top: 25px; line-height: 1.6; }

.process { margin-bottom: 80px; }
.process-list { margin-top: 30px; }
.process-list ul { display: flex; justify-content: space-between; }
.process-list li { text-align: center; position: relative; width: 160px; height: 160px; border-radius: 50%; background-color: #e9efff; display: flex; flex-direction: column; justify-content: center; color: #3470ff; font-weight: bold; line-height: 1.2; transition: all .3s; }
.process-list li::before { content: ''; background-color: #e9efff; width: 10px; height: 120px; position: absolute; transform: rotate(135deg); right: -16px; bottom: -64px; z-index: -1; }
.process-list li:nth-child(2n) { margin-top: 160px; }
.process-list li:nth-child(2n) p { top: -180px; bottom: auto; margin-bottom: 70px; }
.process-list li:nth-child(2n) p::before, .process-list li:nth-child(2n) p::after { bottom: auto; top: 50px; }
.process-list li:nth-child(2n)::before { transform: rotate(45deg); right: -14px; top: -56px; bottom: auto; }
.process-list li:last-child::before { content: normal; }
.process-list li:hover { background-color: #3470ff; color: #fff; }
.process-list li em { font-size: 32px; }
.process-list li h3 { font-size: 20px; }
.process-list li p { font-size: 14px; color: #999; margin-top: 70px; font-weight: normal; position: absolute; left: 50%; transform: translateX(-50%); width: 160px; bottom: -110px; line-height: 1.4; height: 40px; }
.process-list li p::before, .process-list li p::after { content: ''; position: absolute; background-color: #ccc; left: 50%; bottom: 50px; }
.process-list li p::before { width: 1px; height: 60px; }
.process-list li p::after { width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; }

.footer { margin-top: 0; }
